修复 Mermaid 预览生命周期并发布图片预览 v1.2.9 - #21
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9f3ce27d12
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| useEffect(() => { | ||
| if (!svgSource) return; | ||
|
|
||
| const previousOverflow = document.body.style.overflow; | ||
| document.body.style.overflow = "hidden"; | ||
| viewportRef.current?.focus(); | ||
| if (!content) return; |
There was a problem hiding this comment.
When the preview is opened while CodeMirror or another background control retains focus, this effect now installs only the Escape handler and no longer focuses viewportRef; ordinary keystrokes and editor shortcuts can therefore continue acting on the hidden editor behind the modal. Restore initial focus to the viewport or another control inside the dialog after content is mounted.
Useful? React with 👍 / 👎.
| img.addEventListener("click", (event) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| openImagePreview(this.src, this.alt); | ||
| }); |
There was a problem hiding this comment.
For linked-image syntax such as [](https://example.com), this listener stops the click before the existing .cm-inline-image-link activation path in livePreview.ts can call openUrl. As a result, a normal pointer click now opens only the image preview and the image's hyperlink is no longer reachable by clicking it; skip this handler when this.href is set or provide a separate preview affordance.
Useful? React with 👍 / 👎.
| img.tabIndex = 0; | ||
| img.setAttribute("role", "button"); | ||
| img.setAttribute("aria-label", translate("Open image preview")); |
There was a problem hiding this comment.
For Markdown images with meaningful alt text, this explicit generic aria-label overrides the native accessible name supplied by img.alt, so every rendered image is announced only as “Open image preview” and screen-reader users lose the image's description. Include this.alt in the button label (with a sensible fallback when it is empty) instead of replacing it entirely.
Useful? React with 👍 / 👎.
2 participants
What changed
preventScrollso closing the overlay does not shift the editorRoot cause
The Mermaid overlay changed global body layout and restored focus without preventing browser scrolling. That could force editor layout/scroll corrections when the overlay closed. Images also had no shared media-overlay entry point.
Validation