docmost · KhaledSMQ · Oct 18, 2025 · Oct 18, 2025
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -31,18 +31,21 @@
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
+    "hammerjs": "^2.0.8",
     "highlightjs-sap-abap": "^0.3.0",
     "i18next": "^23.14.0",
     "i18next-http-backend": "^2.6.1",
     "jotai": "^2.12.5",
     "jotai-optics": "^0.4.0",
+    "js-base64": "^3.7.8",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "katex": "0.16.22",
     "lowlight": "^3.3.0",
     "mantine-form-zod-resolver": "^1.3.0",
     "mermaid": "^11.11.0",
     "mitt": "^3.0.1",
+    "pako": "^2.1.0",
     "posthog-js": "^1.255.1",
     "react": "^18.3.1",
     "react-arborist": "3.4.0",
@@ -55,6 +58,7 @@
     "react-router-dom": "^7.0.1",
     "semver": "^7.7.2",
     "socket.io-client": "^4.8.1",
+    "svg-pan-zoom": "^3.6.2",
     "tippy.js": "^6.3.7",
     "tiptap-extension-global-drag-handle": "^0.1.18",
     "zod": "^3.25.56"
@@ -63,9 +67,11 @@
     "@eslint/js": "^9.16.0",
     "@tanstack/eslint-plugin-query": "^5.62.1",
     "@types/file-saver": "^2.0.7",
+    "@types/hammerjs": "^2.0.46",
     "@types/js-cookie": "^3.0.6",
     "@types/katex": "^0.16.7",
     "@types/node": "22.10.0",
+    "@types/pako": "^2.0.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.4.1",

diff --git a/apps/client/src/features/editor/components/code-block/code-block-view.tsx b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
@@ -1,7 +1,7 @@
 import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
-import { useEffect, useState } from "react";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { IconCheck, IconCopy, IconZoomIn, IconZoomOut, IconZoomReset, IconExternalLink } from "@tabler/icons-react";
 import classes from "./code-block.module.css";
 import React from "react";
 import { Suspense } from "react";
@@ -15,54 +15,172 @@ export default function CodeBlockView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { node, updateAttributes, extension, editor, getPos } = props;
   const { language } = node.attrs;
-  const [languageValue, setLanguageValue] = useState<string | null>(
-    language || null,
-  );
   const [isSelected, setIsSelected] = useState(false);
 
+  // Mermaid zoom and pan state with extended range (0.2x to 12x)
+  const [scale, setScale] = useState<number>(1);
+  const [position, setPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const [mermaidLink, setMermaidLink] = useState<string>("");
+
+  // Throttled selection listener with try/catch to avoid rare getPos() races
+  const rafRef = useRef(0);
   useEffect(() => {
-    const updateSelection = () => {
-      const { state } = editor;
-      const { from, to } = state.selection;
-      // Check if the selection intersects with the node's range
-      const isNodeSelected =
-        (from >= getPos() && from < getPos() + node.nodeSize) ||
-        (to > getPos() && to <= getPos() + node.nodeSize);
-      setIsSelected(isNodeSelected);
+    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", updateSelection);
+    editor.on("selectionUpdate", onSel);
     return () => {
-      editor.off("selectionUpdate", updateSelection);
+      cancelAnimationFrame(rafRef.current);
+      editor.off("selectionUpdate", onSel);
     };
-  }, [editor, getPos(), node.nodeSize]);
+  }, [editor, getPos, node.nodeSize]);
 
-  function changeLanguage(language: string) {
-    setLanguageValue(language);
+  const changeLanguage = useCallback((newLanguage: string) => {
     updateAttributes({
-      language: language,
+      language: newLanguage ?? "",
     });
-  }
+  }, [updateAttributes]);
+
+  // Zoom handlers with event propagation prevention and extended range
+  const handleZoomIn = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setScale((prev) => Math.min(prev + 0.25, 12));
+  }, []);
+
+  const handleZoomOut = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setScale((prev) => Math.max(prev - 0.25, 0.2));
+  }, []);
+
+  const handleResetZoom = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+
+  // Memoize callback to prevent unnecessary re-renders of MermaidView
+  const handleLinkGenerated = useCallback((link: string) => {
+    setMermaidLink(link);
+  }, []);
+
+  const isMermaidDiagram = language === "mermaid";
+  const showMermaidControls = isMermaidDiagram && node.textContent.length > 0;
+  const shouldHideCode = isMermaidDiagram && node.textContent.length > 0 && (!editor.isEditable || !isSelected);
+
+  const isResetDisabled = Math.abs(scale - 1) < 0.01 && Math.abs(position.x) < 1 && Math.abs(position.y) < 1;
 
   return (
     <NodeViewWrapper className="codeBlock">
       <Group
         justify="flex-end"
         contentEditable={false}
         className={classes.menuGroup}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
         <Select
           placeholder="auto"
           checkIconPosition="right"
           data={extension.options.lowlight.listLanguages().sort()}
-          value={languageValue}
+          value={language || null}
+          onMouseDown={(e) => e.stopPropagation()}
           onChange={changeLanguage}
           searchable
           style={{ maxWidth: "130px" }}
           classNames={{ input: classes.selectInput }}
           disabled={!editor.isEditable}
         />
 
+        {/* Mermaid zoom controls */}
+        {showMermaidControls && (
+          <>
+            <Tooltip label={t("Zoom in")} withArrow position="bottom">
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={handleZoomIn}
+                onMouseDown={(e) => e.stopPropagation()}
+                disabled={scale >= 12}
+              >
+                <IconZoomIn size={16} />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={t("Zoom out")} withArrow position="bottom">
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={handleZoomOut}
+                onMouseDown={(e) => e.stopPropagation()}
+                disabled={scale <= 0.2}
+              >
+                <IconZoomOut size={16} />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={t("Reset view")} withArrow position="bottom">
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={handleResetZoom}
+                onMouseDown={(e) => e.stopPropagation()}
+                disabled={isResetDisabled}
+              >
+                <IconZoomReset size={16} />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={`${Math.round(scale * 100)}%`} withArrow position="bottom">
+              <div
+                style={{
+                  padding: "0 8px",
+                  fontSize: "12px",
+                  color: "var(--mantine-color-gray-7)",
+                  minWidth: "45px",
+                  textAlign: "center",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                {Math.round(scale * 100)}%
+              </div>
+            </Tooltip>
+
+            {mermaidLink && (
+              <Tooltip label={t("Open in Mermaid Live")} withArrow position="bottom">
+                <ActionIcon
+                  component="a"
+                  href={`https://mermaid.live/view#${mermaidLink}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  variant="subtle"
+                  color="gray"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <IconExternalLink size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </>
+        )}
+
         <CopyButton value={node?.textContent} timeout={2000}>
           {({ copied, copy }) => (
             <Tooltip
@@ -73,7 +191,11 @@ export default function CodeBlockView(props: NodeViewProps) {
               <ActionIcon
                 color={copied ? "teal" : "gray"}
                 variant="subtle"
-                onClick={copy}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  copy();
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
               >
                 {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
               </ActionIcon>
@@ -84,18 +206,21 @@ export default function CodeBlockView(props: NodeViewProps) {
 
       <pre
         spellCheck="false"
-        hidden={
-          ((language === "mermaid" && !editor.isEditable) ||
-            (language === "mermaid" && !isSelected)) &&
-          node.textContent.length > 0
-        }
+        hidden={shouldHideCode}
       >
         <NodeViewContent as="code" className={`language-${language}`} />
       </pre>
 
-      {language === "mermaid" && (
+      {isMermaidDiagram && (
         <Suspense fallback={null}>
-          <MermaidView props={props} />
+          <MermaidView
+            props={props}
+            scale={scale}
+            position={position}
+            setScale={setScale}
+            setPosition={setPosition}
+            onLinkGenerated={handleLinkGenerated}
+          />
         </Suspense>
       )}
     </NodeViewWrapper>

diff --git a/apps/client/src/features/editor/components/code-block/code-block.module.css b/apps/client/src/features/editor/components/code-block/code-block.module.css
@@ -9,16 +9,49 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 20px;
+    border-radius: 4px;
+    margin: 10px 0;
 }
-
 .mermaid {
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+    border-radius: 4px;
+    min-height: 100px;
+    height: auto;
+    width: 100%;
+    margin: 10px 0;
+    overflow: hidden;
+}
+
+.mermaid svg {
+    width: 100% !important;
+    height: auto !important;
+    max-width: 100%;
+    display: block;
 }
 
 .menuGroup {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+    padding: 8px;
+    border-radius: 4px 4px 0 0;
+
     @media print {
         display: none;
+        box-shadow: none;
     }
 }
+
+.mermaid svg {
+    width: 100% !important;
+    height: auto !important;
+    max-width: 100%;
+    display: block;
+    pointer-events: all;
+    touch-action: none;
+}