2 Commits

Author	SHA1	Message	Date
Naiyuan Qing	17ee59ccc5	feat(editor): standard Mermaid viewer with pan/zoom, exports and a real dialog (MUL-4908) (#5564) ... * feat(editor): standard Mermaid viewer with pan/zoom, exports and a real dialog (MUL-4908) Mermaid's fullscreen view was a bespoke lightbox: no visible close button, no canvas interaction, and a toolbar that scrolled away with wide diagrams. Escape also stopped working once the iframe took focus, which is why it read as "impossible to close". Replace it with a viewer built on the shared Dialog, so it inherits the backdrop, focus trap, scroll lock, focus restore and Escape handling that HTML preview already had. The diagram stays in an `sandbox=""` iframe — isolation is not relaxed to buy interactivity. Instead the iframe is `pointer-events: none` and pan/zoom is applied from the host document as a transform on its wrapper. That inversion is also what keeps Escape working: the iframe can never take focus. - Viewer: fit-on-open, drag pan, wheel/pinch/keyboard zoom (25%-400%) anchored at the pointer, Fit / 100% / Reset, and a header toolbar that cannot scroll away. Panning is clamped so the canvas can never be lost. - Export: `.mmd`, `.svg` and `.png`. Requires `htmlLabels: false` — browsers do not rasterize Mermaid's default HTML-in-foreignObject labels through an `<img>`; verified in Chromium that they paint zero pixels AND taint the canvas, so PNG export silently produced nothing. - Inline: toolbar lifted out of the scroll container, natural-size rendering (small diagrams centered, wide ones scroll at a readable size with edge fades), copy source, and a parser message on the error fallback. - Theme switches no longer close the viewer or discard zoom/position; the previous diagram stays on screen until its replacement is ready. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai> * fix(editor): stop Mermaid drags selecting text and misfiring the viewer (MUL-4908) Two gesture defects on the inline diagram, reported by Naiyuan. 1. Dragging a diagram started a native text selection. The iframe is a replaced element, so the whole diagram box got painted with the selection highlight and the drag ran on into the surrounding comment text. Fixed with `user-select: none` on the inline scroller and the viewer canvas. Deliberately NOT by preventDefault-ing pointerdown: verified in Chromium that it also drops the default focus, which silently kills the viewer's keyboard controls (+/-, 0, arrows). 2. Any drag ended in a `click`, so trying to look along a wide diagram opened the viewer on top of the user. The inline diagram had no drag handling at all — only `onClick`. Suppressing the selection alone would have made this fire more reliably, not less, so both had to land together. Past a 5px threshold the gesture is a drag for good: releasing no longer taps, and a horizontal drag pans the scroller instead. This holds even when the diagram has no room to scroll, so an unscrollable diagram cannot open on release either. A still click, a sub-threshold jitter, and the expand button all still open the viewer. Touch is left alone — it already pans natively and its vertical drags belong to the page; the browser announces its takeover with pointercancel. Mouse and pen have no native drag-to-scroll and are panned here. Verified in Chromium: still click opens; a 150px drag pans and does not open; a drag on an unscrollable diagram does not open; 3px jitter still opens; and no gesture selects text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai> --------- Co-authored-by: Walt <walt@multica.ai> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai>	2026-07-17 16:07:37 +08:00
Naiyuan Qing	ceb967aefa	feat(editor): inline HTML attachment preview + ```html block render (MUL-2345) (#2790) ... * feat(editor): inline HTML attachment preview + ```html block render (MUL-2345) * attachment-preview-modal: switch HTML iframe sandbox from "" to "allow-scripts" so JS-driven chart libraries render. The opaque-origin iframe still cannot touch cookies, localStorage, parent state, or top-nav — only scripts run. * New shared AttachmentCard wired into the three attachment surfaces (file-card NodeView, ReadonlyContent file-card branch, comment-card standalone AttachmentList). HTML attachments now render inline via a sandboxed iframe pulled through the existing /content proxy; other kinds keep the original chrome behavior. * New HtmlBlockPreview for fenced ```html blocks in ReadonlyContent — default preview iframe, source/Copy toggle. Two-layer code+pre unwrap mirrors the Mermaid pattern; unwrap now matches on language-* class because react-markdown invokes pre before the code renderer runs. * CodeBlockView (Tiptap NodeView) renders an iframe preview for language=html with a CSS-hidden toggle to the editable source — the <NodeViewContent as="code"/> mount must remain in the tree. * Shared use-attachment-html-text hook keeps inline and modal HTML rendering on the same React Query cache. * Vitest coverage: allow-scripts assertion, attachment-card kind branches, readonly HTML iframe + Mermaid unwrap regression, NodeView editable + preview/source toggle. No backend changes; server-side text/plain + nosniff defense kept. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai> * fix(editor): tighten attachment preview and pre unwrap gates (MUL-2345) Addresses Reviewer REQUEST CHANGES on PR #2790: 1. URL-only text/html attachment cards no longer surface a dead Eye button. `AttachmentCard` previously allowed preview when `previewableFromUrl=true` regardless of kind, but the modal's `tryOpen` rejects URL-only text kinds because the `/content` proxy is ID-keyed. Drop the `previewableFromUrl` prop and gate the no-attachmentId path strictly to URL-previewable media kinds (pdf/video/audio). 2. Readonly `pre` unwrap now uses exact class-token matching. The previous `className.includes("language-html")` check also fired on `language-htmlbars`, silently stripping its `<pre>` wrapper. Use `/(^|\s)language-(html|mermaid)(\s|$)/` so only the exact tokens unwrap. Regression tests: - `report.html + no attachmentId` asserts no Preview button. - `pdf URL-only` asserts Preview button still appears. - `htmlbars` / `mermaidx` fences keep their `<pre><code>` wrapper. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: multica-agent <github@multica.ai>	2026-05-18 16:23:40 +08:00