fix: stabilize embedded diagrams

src/components/EditorTheme.css

@@ -411,6 +411,7 @@
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--card);
+  user-select: none;
 }
 
 .editor__blocknote-container .tldraw-whiteboard .tl-container {
@@ -423,6 +424,10 @@
   --tl-layer-following-indicator: 80;
 }
 
+.editor__blocknote-container .tldraw-whiteboard [data-radix-popper-content-wrapper] {
+  position: absolute !important;
+}
+
 .editor__blocknote-container .mantine-Popover-dropdown,
 .editor__blocknote-container .bn-menu,
 .editor__blocknote-container .bn-suggestion-menu {

src/components/MermaidDiagram.test.tsx

@@ -71,6 +71,34 @@ describe('MermaidDiagram', () => {
     expect(style?.getAttribute('nonce')).toBe(RUNTIME_STYLE_NONCE)
   })
 
+  it('keeps Mermaid foreignObject labels visible after sanitizing the SVG', async () => {
+    mermaidMock.render.mockResolvedValueOnce({
+      svg: [
+        '<svg aria-label="Rendered Mermaid">',
+        '<g class="node">',
+        '<foreignObject width="200" height="40">',
+        '<div xmlns="http://www.w3.org/1999/xhtml">',
+        '<span class="nodeLabel" onclick="alert(1)">Employee<br>clocks in</span>',
+        '</div>',
+        '</foreignObject>',
+        '</g>',
+        '</svg>',
+      ].join(''),
+    })
+
+    render(
+      <MermaidDiagram
+        diagram={'flowchart LR\nA(["Employee clocks in"]) --> B'}
+        source={'```mermaid\nflowchart LR\nA(["Employee clocks in"]) --> B\n```'}
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId('mermaid-diagram-viewport')).toHaveTextContent('Employeeclocks in')
+    })
+    expect(screen.getByText('Employeeclocks in')).not.toHaveAttribute('onclick')
+  })
+
   it('falls back to the original source when Mermaid cannot render', async () => {
     mermaidMock.render.mockRejectedValueOnce(new Error('parse error'))
 

src/components/SafeMarkup.tsx

@@ -10,6 +10,13 @@ interface SafeSvgDivProps extends HTMLAttributes<HTMLDivElement> {
   svg: string
 }
 
+const MERMAID_SVG_SANITIZE_CONFIG = {
+  USE_PROFILES: { svg: true, svgFilters: true, html: true },
+  ADD_TAGS: ['foreignObject'],
+  ADD_ATTR: ['xmlns'],
+  HTML_INTEGRATION_POINTS: { foreignobject: true },
+}
+
 function importSanitizedHtmlNodes(html: string): Node[] {
   const sanitized = DOMPurify.sanitize(html, {
     USE_PROFILES: { html: true, mathMl: true },
@@ -19,13 +26,12 @@ function importSanitizedHtmlNodes(html: string): Node[] {
 }
 
 function importSanitizedSvgNode(svg: string): Node | null {
-  const sanitized = DOMPurify.sanitize(svg, {
-    USE_PROFILES: { svg: true, svgFilters: true },
-  })
-  const parsed = new DOMParser().parseFromString(sanitized, 'image/svg+xml')
-  if (parsed.querySelector('parsererror')) return null
+  const sanitized = DOMPurify.sanitize(svg, MERMAID_SVG_SANITIZE_CONFIG)
+  const parsed = new DOMParser().parseFromString(sanitized, 'text/html')
+  const parsedSvg = parsed.body.querySelector('svg')
+  if (!parsedSvg) return null
 
-  const svgNode = document.importNode(parsed.documentElement, true)
+  const svgNode = document.importNode(parsedSvg, true)
   svgNode.querySelectorAll('style').forEach((style) => {
     style.setAttribute('nonce', RUNTIME_STYLE_NONCE)
   })

src/components/TldrawWhiteboard.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } from 'react'
 import {
+  Box,
   Tldraw,
   createTLStore,
   getSnapshot,
   loadSnapshot,
+  type Editor,
+  type TLEventInfo,
   type TLStoreSnapshot,
 } from 'tldraw'
 import 'tldraw/tldraw.css'
@@ -80,6 +83,90 @@ function serializeSnapshot(snapshot: TLStoreSnapshot): string {
   return `${JSON.stringify(snapshot, null, 2)}\n`
 }
 
+function documentZoom(): number {
+  const inlineZoom = document.documentElement.style.getPropertyValue('zoom')
+  const computedZoom = getComputedStyle(document.documentElement).zoom
+  const zoom = inlineZoom || computedZoom
+  const parsed = Number.parseFloat(zoom)
+  if (!Number.isFinite(parsed) || parsed <= 0) return 1
+  return zoom.endsWith('%') ? parsed / 100 : parsed
+}
+
+function viewportBounds(screenBounds: Box | HTMLElement): Box | HTMLElement {
+  if (screenBounds instanceof Box) return screenBounds
+
+  const zoom = documentZoom()
+  if (zoom === 1) return screenBounds
+
+  const rect = screenBounds.getBoundingClientRect()
+  return new Box(
+    (rect.left || rect.x) / zoom,
+    (rect.top || rect.y) / zoom,
+    Math.max(rect.width / zoom, 1),
+    Math.max(rect.height / zoom, 1),
+  )
+}
+
+function zoomAdjustedPoint<T extends { x: number; y: number; z?: number }>(point: T, zoom: number): T {
+  return {
+    ...point,
+    x: point.x / zoom,
+    y: point.y / zoom,
+  }
+}
+
+function zoomAdjustedEvent(info: TLEventInfo): TLEventInfo {
+  const zoom = documentZoom()
+  if (zoom === 1) return info
+
+  switch (info.type) {
+    case 'click':
+    case 'pinch':
+    case 'pointer':
+    case 'wheel':
+      return {
+        ...info,
+        point: zoomAdjustedPoint(info.point, zoom),
+      } as TLEventInfo
+    default:
+      return info
+  }
+}
+
+function installZoomAwareViewport(editor: Editor): () => void {
+  const updateViewportScreenBounds = editor.updateViewportScreenBounds.bind(editor)
+  const updateViewport: Editor['updateViewportScreenBounds'] = (screenBounds, center) =>
+    updateViewportScreenBounds(viewportBounds(screenBounds), center)
+  const dispatch = editor.dispatch.bind(editor)
+  const animationFrameIds: number[] = []
+  const timeoutIds: number[] = []
+
+  editor.updateViewportScreenBounds = updateViewport
+  editor.dispatch = (info: TLEventInfo) => dispatch(zoomAdjustedEvent(info))
+
+  const updateCurrentCanvas = () => {
+    const canvas = editor.getContainer().querySelector<HTMLElement>('.tl-canvas')
+    if (canvas) updateViewport(canvas)
+  }
+
+  const scheduleViewportUpdate = () => {
+    updateCurrentCanvas()
+    animationFrameIds.push(window.requestAnimationFrame(updateCurrentCanvas))
+    timeoutIds.push(window.setTimeout(updateCurrentCanvas, 150))
+  }
+
+  scheduleViewportUpdate()
+  window.addEventListener('laputa-zoom-change', scheduleViewportUpdate)
+
+  return () => {
+    window.removeEventListener('laputa-zoom-change', scheduleViewportUpdate)
+    animationFrameIds.forEach((id) => window.cancelAnimationFrame(id))
+    timeoutIds.forEach((id) => window.clearTimeout(id))
+    editor.updateViewportScreenBounds = updateViewportScreenBounds
+    editor.dispatch = dispatch
+  }
+}
+
 export function TldrawWhiteboard({
   boardId,
   height,
@@ -182,10 +269,14 @@ export function TldrawWhiteboard({
     <div
       ref={boardRef}
       className="tldraw-whiteboard"
+      contentEditable={false}
       data-board-id={boardId}
       style={cssSize(visibleSize)}
     >
-      <Tldraw store={store} />
+      <Tldraw
+        onMount={installZoomAwareViewport}
+        store={store}
+      />
       <div
         aria-label="Resize whiteboard width"
         className="tldraw-whiteboard__resize-handle tldraw-whiteboard__resize-handle--width"

src/components/editorSchema.tsx

@@ -177,6 +177,7 @@ const TldrawBlock = createReactBlockSpec(
   },
   {
     runsBefore: ['codeBlock'],
+    meta: { selectable: false },
     render: (props) => (
       <Suspense fallback={<div className="tldraw-whiteboard tldraw-whiteboard--loading" />}>
         <TldrawWhiteboard