apps/client/package.json (1)

34-34: Heads‑up: Hammer.js is largely unmaintained; consider Pointer Events–based alternatives.

Current use is fine short‑term, but plan to migrate (e.g., use-gesture + Pointer Events) to avoid future breakage and improve interop. Based on learnings.

apps/client/src/features/editor/components/code-block/code-block.module.css (2)

29-34: Duplicate .mermaid svg rules; keep one consolidated block.

You define .mermaid svg twice; the latter adds pointer/touch props. Delete the first to avoid confusion.

Apply this diff:

-.mermaid svg {
-    width: 100% !important;
-    height: auto !important;
-    max-width: 100%;
-    display: block;
-}

Also applies to: 50-57

---

56-56: Minor: touch-action: none also set inline.

You set touch-action both in CSS and inline style; one is sufficient. Prefer CSS for consistency.

apps/client/src/features/editor/components/code-block/code-block-view.tsx (2)

82-85: Show either code or diagram, not both; gate controls + preview by shouldHideCode.

Currently, the preview and code can render together while editing/selected. Gate controls and <MermaidView/> by shouldHideCode.

Apply this diff:

-  const isMermaidDiagram = language === "mermaid";
-  const showMermaidControls = isMermaidDiagram && node.textContent.length > 0;
-  const shouldHideCode = isMermaidDiagram && node.textContent.length > 0 && (!editor.isEditable || !isSelected);
+  const isMermaidDiagram = language === "mermaid";
+  const hasDiagram = isMermaidDiagram && node.textContent.length > 0;
+  const shouldHideCode = hasDiagram && (!editor.isEditable || !isSelected);
+  const showMermaidControls = hasDiagram && shouldHideCode;

-        {showMermaidControls && (
+        {showMermaidControls && (
           <>
             ...
           </>
         )}

-      {isMermaidDiagram && (
+      {isMermaidDiagram && shouldHideCode && (
         <Suspense fallback={null}>
           <MermaidView
             props={props}
             ...
           />
         </Suspense>
       )}

Also applies to: 110-183, 214-224

---

31-49: Initialize selection state on mount to avoid a one‑frame flash.

Call the handler once after subscribing.

Apply this diff:

   useEffect(() => {
     const onSel = () => {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(() => {
         try {
           const { from, to } = editor.state.selection;
           const pos = getPos();
           const end = pos + node.nodeSize;
           setIsSelected((from >= pos && from < end) || (to > pos && to <= end));
         } catch {
           // node may be temporarily detached; ignore
         }
       });
     };
     editor.on("selectionUpdate", onSel);
+    onSel();
     return () => {
       cancelAnimationFrame(rafRef.current);
       editor.off("selectionUpdate", onSel);
     };
   }, [editor, getPos, node.nodeSize]);

apps/client/src/features/editor/components/code-block/mermaid-view.tsx (2)

308-313: Mermaid Live link: match theme to current color scheme.

Embed the current theme in the serialized state so the live preview matches.

Apply this diff:

-            const link = serializeState({
-              ...DEFAULT_STATE,
-              code: node.textContent,
-            });
+            const link = serializeState({
+              ...DEFAULT_STATE,
+              code: node.textContent,
+              mermaid: JSON.stringify(
+                { theme: computedColorScheme === "light" ? "default" : "dark" },
+                undefined,
+                2
+              ),
+            });

---

48-49: Type panZoomRef to the instance (and consider installing typings).

Avoid any for better safety; if available, use ReturnType<typeof panzoom> or install @types/svg-pan-zoom and type the ref accordingly.

Apply this diff:

-  const panZoomRef = useRef<any>(null);
+  const panZoomRef = useRef<ReturnType<typeof panzoom> | null>(null);

If typings are unavailable, consider adding @types/svg-pan-zoom.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/client/src/features/editor/components/code-block/code-block-view.tsx (1)

51-55: Type mismatch remains: parameter should accept string | null.

The Select component's onChange can pass null when cleared, but changeLanguage still declares newLanguage: string. While line 53 guards against null with ?? "", the type signature should reflect this.

Apply this diff:

-  const changeLanguage = useCallback((newLanguage: string) => {
+  const changeLanguage = useCallback((newLanguage: string | null) => {
     updateAttributes({
       language: newLanguage ?? "",
     });
   }, [updateAttributes]);

apps/client/src/features/editor/components/code-block/mermaid-view.tsx (1)

306-306: Critical: Sanitize SVG before injection to prevent XSS.

Mermaid-generated SVG is injected via dangerouslySetInnerHTML without sanitization. While Mermaid is generally trusted, user-controlled diagram code could potentially inject malicious content.

Install DOMPurify:

npm install dompurify
npm install -D @types/dompurify

Apply this diff:

 import { useComputedColorScheme } from "@mantine/core";
 import { deflate } from "pako";
 import { fromUint8Array } from "js-base64";
 import panzoom from "svg-pan-zoom";
 import Hammer from "hammerjs";
+import DOMPurify from "dompurify";

           .then((item) => {
             // Check if component is still mounted
             if (!isMountedRef.current) return;

-            setPreview(item.svg);
+            const safeSvg = DOMPurify.sanitize(item.svg, {
+              USE_PROFILES: { svg: true, svgFilters: true },
+            });
+            setPreview(safeSvg);

No changes needed to the render - you're still using dangerouslySetInnerHTML, but now with sanitized content.

Also applies to: 461-463

apps/client/src/features/editor/components/code-block/code-block-view.tsx (1)

111-182: Consider extracting zoom controls into a separate component.

The 70+ lines of inline JSX for zoom controls reduce readability and make this component harder to test. Extracting to a <MermaidControls> component would improve maintainability.

Example structure:

// New file: mermaid-controls.tsx
interface MermaidControlsProps {
  scale: number;
  position: { x: number; y: number };
  mermaidLink: string;
  onZoomIn: (e: React.MouseEvent) => void;
  onZoomOut: (e: React.MouseEvent) => void;
  onResetZoom: (e: React.MouseEvent) => void;
}

export function MermaidControls({ scale, position, mermaidLink, onZoomIn, onZoomOut, onResetZoom }: MermaidControlsProps) {
  const { t } = useTranslation();
  const isResetDisabled = Math.abs(scale - 1) < 0.01 && Math.abs(position.x) < 1 && Math.abs(position.y) < 1;
  
  return (
    <>
      {/* Move the entire controls JSX here */}
    </>
  );
}

Then use it in code-block-view.tsx:

{showMermaidControls && (
  <MermaidControls
    scale={scale}
    position={position}
    mermaidLink={mermaidLink}
    onZoomIn={handleZoomIn}
    onZoomOut={handleZoomOut}
    onResetZoom={handleResetZoom}
  />
)}

apps/client/src/features/editor/components/code-block/mermaid-view.tsx (2)

48-48: Type safety: Replace any with proper svg-pan-zoom type.

The panZoomRef is typed as any, which bypasses type checking. While svg-pan-zoom may not export perfect types, you can use a more specific type.

Apply this diff:

-  const panZoomRef = useRef<any>(null);
+  const panZoomRef = useRef<ReturnType<typeof panzoom> | null>(null);

This provides better autocomplete and catches method typos at compile time.

---

112-281: Consider refactoring setupPanZoom into smaller functions.

This 170-line function handles initialization, event handlers, and state restoration. Breaking it into focused helpers would improve readability and testability.

Example structure:

const createHammerHandlers = (
  hammer: HammerManager,
  instance: any,
  initialScaleRef: React.MutableRefObject<number>,
  pannedRef: React.MutableRefObject<{ x: number; y: number }>
) => {
  // Extract pan/pinch handler setup
};

const createCustomEventsHandler = (
  hammer: HammerManager,
  touchMoveListener: (e: Event) => void
) => {
  // Return the customEventsHandler object
};

const setupPanZoom = useCallback((svgElement: SVGElement) => {
  // Cleanup existing instances
  // Initialize with extracted helpers
  // Restore state
}, [setScale, setPosition]);

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro