30 seconds

* fix: image fallback regression

* fix image preview on upload

* fix image loading

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.70.0",
+  "version": "0.70.1",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

apps/client/src/features/editor/components/drawio/drawio-menu.tsx

@@ -1,6 +1,6 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import {
   EditorMenuProps,
@@ -9,6 +9,7 @@ import {
 import {
   ActionIcon,
   Modal,
+  Text,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
@@ -29,10 +30,12 @@ import {
   DrawIoEmbed,
   DrawIoEmbedRef,
   EventExit,
+  EventExport,
   EventSave,
 } from "react-drawio";
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
+import { modals } from "@mantine/modals";
 import classes from "../common/toolbar-menu.module.css";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
@@ -41,6 +44,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
   const [initialXML, setInitialXML] = useState<string>("");
   const drawioRef = useRef<DrawIoEmbedRef>(null);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
 
   const editorState = useEditorState({
     editor,
@@ -131,33 +136,13 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
-  const handleOpen = useCallback(async () => {
-    if (!editorState?.src) return;
+  const saveData = useCallback(async (svgXml: string) => {
+    if (isSavingRef.current) return;
+
+    isSavingRef.current = true;
 
     try {
-      const url = getFileUrl(editorState.src);
-      const request = await fetch(url, {
-        credentials: "include",
-        cache: "no-store",
-      });
-      const blob = await request.blob();
-
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onloadend = () => {
-        const base64data = (reader.result || "") as string;
-        setInitialXML(base64data);
-      };
-    } catch (err) {
-      console.error(err);
-    } finally {
-      open();
-    }
-  }, [editorState?.src, open]);
-
-  const handleSave = useCallback(
-    async (data: EventSave) => {
-      const svgString = decodeBase64ToSvgString(data.xml);
+      const svgString = decodeBase64ToSvgString(svgXml);
       const fileName = "diagram.drawio.svg";
       const drawioSVGFile = await svgStringToFile(svgString, fileName);
 
@@ -179,10 +164,85 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         attachmentId: attachment.id,
       });
 
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [editor, editorState?.attachmentId]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
       close();
-    },
-    [editor, editorState?.attachmentId, close],
-  );
+      return;
+    }
+
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
+    });
+  }, [close, t]);
+
+  const handleOpen = useCallback(async () => {
+    if (!editorState?.src) return;
+
+    try {
+      const url = getFileUrl(editorState.src);
+      const request = await fetch(url, {
+        credentials: "include",
+        cache: "no-store",
+      });
+      const blob = await request.blob();
+
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = (reader.result || "") as string;
+        setInitialXML(base64data);
+      };
+    } catch (err) {
+      console.error(err);
+    } finally {
+      isDirtyRef.current = false;
+      open();
+    }
+  }, [editorState?.src, open]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
+        drawioRef.current.exportDiagram({ format: "xmlsvg" });
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [opened, handleClose]);
 
   return (
     <>
@@ -276,7 +336,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         </div>
       </BaseBubbleMenu>
 
-      <Modal.Root opened={opened} onClose={close} fullScreen>
+      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Body>
@@ -285,6 +345,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
                 ref={drawioRef}
                 xml={initialXML}
                 baseUrl={getDrawioUrl()}
+                autosave
                 urlParameters={{
                   ui: computedColorScheme === "light" ? "kennedy" : "dark",
                   spin: true,
@@ -296,13 +357,19 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
                   if (data.parentEvent !== "save") {
                     return;
                   }
-                  handleSave(data);
+                  saveData(data.xml).then(() => close()).catch(() => {});
                 }}
                 onClose={(data: EventExit) => {
                   if (data.parentEvent) {
                     return;
                   }
-                  close();
+                  handleClose();
+                }}
+                onAutoSave={() => {
+                  isDirtyRef.current = true;
+                }}
+                onExport={(data: EventExport) => {
+                  saveData(data.data).catch(() => {});
                 }}
               />
             </div>

apps/client/src/features/editor/components/drawio/drawio-view.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   useComputedColorScheme,
 } from "@mantine/core";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { useDisclosure } from "@mantine/hooks";
 import { getDrawioUrl } from "@/lib/config.ts";
@@ -14,6 +14,7 @@ import {
   DrawIoEmbed,
   DrawIoEmbedRef,
   EventExit,
+  EventExport,
   EventSave,
 } from "react-drawio";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
@@ -21,6 +22,7 @@ import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { modals } from "@mantine/modals";
 
 export default function DrawioView(props: NodeViewProps) {
   const { t } = useTranslation();
@@ -30,42 +32,108 @@ export default function DrawioView(props: NodeViewProps) {
   const [initialXML, setInitialXML] = useState<string>("");
   const [opened, { open, close }] = useDisclosure(false);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
 
   const handleOpen = async () => {
     if (!editor.isEditable) {
       return;
     }
+    isDirtyRef.current = false;
     open();
   };
 
-  const handleSave = async (data: EventSave) => {
-    const svgString = decodeBase64ToSvgString(data.xml);
-    const fileName = "diagram.drawio.svg";
-    const drawioSVGFile = await svgStringToFile(svgString, fileName);
+  const saveData = async (svgXml: string, updateSrc = true) => {
+    if (isSavingRef.current) return;
 
-    //@ts-ignore
-    const pageId = editor.storage?.pageId;
+    isSavingRef.current = true;
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(drawioSVGFile, pageId);
+    try {
+      const svgString = decodeBase64ToSvgString(svgXml);
+      const fileName = "diagram.drawio.svg";
+      const drawioSVGFile = await svgStringToFile(svgString, fileName);
+
+      //@ts-ignore
+      const pageId = editor.storage?.pageId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(drawioSVGFile, pageId);
+      }
+
+      if (updateSrc) {
+        updateAttributes({
+          src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+      } else {
+        updateAttributes({
+          attachmentId: attachment.id,
+        });
+      }
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  };
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    updateAttributes({
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  };
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
+        drawioRef.current.exportDiagram({ format: "xmlsvg" });
+      }
+    }, 30_000);
+
+    return () => clearInterval(interval);
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [opened, handleClose]);
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <Modal.Root opened={opened} onClose={close} fullScreen>
+      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Body>
@@ -74,6 +142,7 @@ export default function DrawioView(props: NodeViewProps) {
                 ref={drawioRef}
                 xml={initialXML}
                 baseUrl={getDrawioUrl()}
+                autosave
                 urlParameters={{
                   ui: computedColorScheme === "light" ? "kennedy" : "dark",
                   spin: true,
@@ -85,13 +154,19 @@ export default function DrawioView(props: NodeViewProps) {
                   if (data.parentEvent !== "save") {
                     return;
                   }
-                  handleSave(data);
+                  saveData(data.xml, true).then(() => close()).catch(() => {});
                 }}
                 onClose={(data: EventExit) => {
                   if (data.parentEvent) {
                     return;
                   }
-                  close();
+                  handleClose();
+                }}
+                onAutoSave={() => {
+                  isDirtyRef.current = true;
+                }}
+                onExport={(data: EventExport) => {
+                  saveData(data.data, false).catch(() => {});
                 }}
               />
             </div>

apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx

@@ -1,6 +1,6 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { lazy, Suspense, useCallback, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import {
   EditorMenuProps,
@@ -10,9 +10,11 @@ import {
   ActionIcon,
   Button,
   Group,
+  Text,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import { useDisclosure } from "@mantine/hooks";
 import clsx from "clsx";
 import {
@@ -52,6 +54,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   });
   const [excalidrawData, setExcalidrawData] = useState<any>(null);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
 
   const editorState = useEditorState({
     editor,
@@ -160,57 +166,109 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     } catch (err) {
       console.error(err);
     } finally {
+      isDirtyRef.current = false;
+      isInitialLoadRef.current = true;
       open();
     }
   }, [editorState?.src, open]);
 
-  const handleSave = useCallback(async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async () => {
+    if (!excalidrawAPI || isSavingRef.current) {
       return;
     }
 
-    const { exportToSvg } = await import("@excalidraw/excalidraw");
+    isSavingRef.current = true;
 
-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
+    try {
+      const { exportToSvg } = await import("@excalidraw/excalidraw");
 
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
+      const svg = await exportToSvg({
+        elements: excalidrawAPI?.getSceneElements(),
+        appState: {
+          exportEmbedScene: true,
+          exportWithDarkMode: false,
+        },
+        files: excalidrawAPI?.getFiles(),
+      });
 
-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
+      const serializer = new XMLSerializer();
+      let svgString = serializer.serializeToString(svg);
 
-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+      svgString = svgString.replace(
+        /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+        "https://unpkg.com/@excalidraw/excalidraw@latest",
+      );
 
-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
-    const attachmentId = editorState?.attachmentId;
+      const fileName = "diagram.excalidraw.svg";
+      const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
+      // @ts-ignore
+      const pageId = editor.storage?.pageId;
+      const attachmentId = editorState?.attachmentId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      editor.commands.updateAttributes("excalidraw", {
+        src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+        title: attachment.fileName,
+        size: attachment.fileSize,
+        attachmentId: attachment.id,
+      });
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [editor, excalidrawAPI, editorState?.attachmentId]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      // save failed, modal stays open
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    editor.commands.updateAttributes("excalidraw", {
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  }, [editor, excalidrawAPI, editorState?.attachmentId, close]);
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData().catch(() => {});
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);
 
   return (
     <>
@@ -317,7 +375,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           zIndex: 200,
         }}
         isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
         disableCloseOnBgClick={true}
         contentProps={{
           style: {
@@ -332,10 +390,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSave} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"}>
             {t("Save & Exit")}
           </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
+          <Button onClick={handleClose} color="red" size={"compact-sm"}>
             {t("Exit")}
           </Button>
         </Group>
@@ -343,6 +401,18 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           <Suspense fallback={null}>
             <ExcalidrawComponent
               excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              onChange={(elements, _appState, files) => {
+                const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
+                if (isInitialLoadRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isInitialLoadRef.current = false;
+                  return;
+                }
+                if (fingerprint !== lastFingerprintRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isDirtyRef.current = true;
+                }
+              }}
               initialData={{
                 ...excalidrawData,
                 scrollToContent: true,

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -7,7 +7,14 @@ import {
   Text,
   useComputedColorScheme,
 } from "@mantine/core";
-import { lazy, Suspense, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { svgStringToFile } from "@/lib";
 import { useDisclosure } from "@mantine/hooks";
@@ -20,6 +27,7 @@ import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { modals } from "@mantine/modals";
 
 const ExcalidrawComponent = lazy(() =>
   import("@excalidraw/excalidraw").then((module) => ({
@@ -42,59 +50,122 @@ export default function ExcalidrawView(props: NodeViewProps) {
   const [opened, { open, close }] = useDisclosure(false);
   const computedColorScheme = useComputedColorScheme();
 
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
+
   const handleOpen = async () => {
     if (!editor.isEditable) {
       return;
     }
+    isDirtyRef.current = false;
+    isInitialLoadRef.current = true;
     open();
   };
 
-  const handleSave = async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async (updateSrc = true) => {
+    if (!excalidrawAPI || isSavingRef.current) {
       return;
     }
 
-    const { exportToSvg } = await import("@excalidraw/excalidraw");
+    isSavingRef.current = true;
 
-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
+    try {
+      const { exportToSvg } = await import("@excalidraw/excalidraw");
 
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
+      const svg = await exportToSvg({
+        elements: excalidrawAPI?.getSceneElements(),
+        appState: {
+          exportEmbedScene: true,
+          exportWithDarkMode: false,
+        },
+        files: excalidrawAPI?.getFiles(),
+      });
 
-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
+      const serializer = new XMLSerializer();
+      let svgString = serializer.serializeToString(svg);
 
-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+      svgString = svgString.replace(
+        /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+        "https://unpkg.com/@excalidraw/excalidraw@latest",
+      );
 
-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
+      const fileName = "diagram.excalidraw.svg";
+      const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
 
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
+      // @ts-ignore
+      const pageId = editor.storage?.pageId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      if (updateSrc) {
+        updateAttributes({
+          src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+      } else {
+        updateAttributes({
+          attachmentId: attachment.id,
+        });
+      }
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [excalidrawAPI, editor, attachmentId, updateAttributes]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      /* empty */
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    updateAttributes({
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
     });
+  }, [close, t]);
 
-    close();
-  };
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData(false).catch(() => {});
+      }
+    }, 30_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);
 
   return (
     <NodeViewWrapper data-drag-handle>
@@ -105,7 +176,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
           zIndex: 200,
         }}
         isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
         disableCloseOnBgClick={true}
         contentProps={{
           style: {
@@ -120,10 +191,10 @@ export default function ExcalidrawView(props: NodeViewProps) {
           bg="var(--mantine-color-body)"
           p="xs"
         >
-          <Button onClick={handleSave} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"}>
             {t("Save & Exit")}
           </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
+          <Button onClick={handleClose} color="red" size={"compact-sm"}>
             {t("Exit")}
           </Button>
         </Group>
@@ -131,6 +202,18 @@ export default function ExcalidrawView(props: NodeViewProps) {
           <Suspense fallback={null}>
             <ExcalidrawComponent
               excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              onChange={(elements, _appState, files) => {
+                const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
+                if (isInitialLoadRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isInitialLoadRef.current = false;
+                  return;
+                }
+                if (fingerprint !== lastFingerprintRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isDirtyRef.current = true;
+                }
+              }}
               initialData={{
                 ...excalidrawData,
                 scrollToContent: true,

apps/client/src/features/editor/components/image/image-view.module.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
   animation: pulse 1.2s ease-in-out infinite;

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -3,6 +3,7 @@ import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
+import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import {
   buildPageUrl,
   buildSharedPageUrl,
@@ -13,17 +14,23 @@ import classes from "./mention.module.css";
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
   const { label, entityType, entityId, slugId, anchorId } = node.attrs;
+  const isPageMention = entityType === "page";
   const { spaceSlug, pageSlug } = useParams();
   const { shareId } = useParams();
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const isShareRoute = location.pathname.startsWith("/share");
+
   const {
     data: page,
     isLoading,
     isError,
-  } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
+  } = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
 
-  const location = useLocation();
-  const isShareRoute = location.pathname.startsWith("/share");
+  const { data: sharedPage } = useSharePageQuery({
+    pageId: isPageMention && isShareRoute ? slugId : undefined,
+  });
 
   const currentPageSlugId = extractPageSlugId(pageSlug);
   const isSamePage = currentPageSlugId === slugId;
@@ -39,10 +46,12 @@ export default function MentionView(props: NodeViewProps) {
     }
   };
 
+  const sharePageTitle = sharedPage?.page?.title || label;
+
   const shareSlugUrl = buildSharedPageUrl({
     shareId,
     pageSlugId: slugId,
-    pageTitle: label,
+    pageTitle: sharePageTitle,
     anchorId,
   });
 
@@ -54,21 +63,59 @@ export default function MentionView(props: NodeViewProps) {
         </Text>
       )}
 
-      {entityType === "page" && isError && (
-        <Text component="span" c="dimmed" size="sm">
-          {label}
-        </Text>
-      )}
-
-      {entityType === "page" && !isError && (
+      {isPageMention && isShareRoute && (
         <Anchor
           component={Link}
           fw={500}
-          to={
-            isShareRoute
-              ? shareSlugUrl
-              : buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)
-          }
+          to={shareSlugUrl}
+          onClick={handleClick}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>
+            {sharePageTitle}
+          </span>
+        </Anchor>
+      )}
+
+      {isPageMention && !isShareRoute && isError && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPageUrl(spaceSlug, slugId, label, anchorId)}
+          onClick={handleClick}
+          underline="never"
+          className={classes.pageMentionLink}
+        >
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            component="span"
+            size={18}
+            style={{ verticalAlign: "text-bottom" }}
+          >
+            <IconFileDescription size={18} />
+          </ActionIcon>
+          <span className={classes.pageMentionText}>
+            {label}
+          </span>
+        </Anchor>
+      )}
+
+      {isPageMention && !isShareRoute && !isError && (
+        <Anchor
+          component={Link}
+          fw={500}
+          to={buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)}
           onClick={handleClick}
           underline="never"
           className={classes.pageMentionLink}

apps/client/src/features/editor/components/subpages/subpages-view.tsx

@@ -25,9 +25,9 @@ export default function SubpagesView(props: NodeViewProps) {
   // Get subpages from shared tree if we're in a shared context
   const sharedSubpages = useSharedPageSubpages(currentPageId);
 
-  const { data, isLoading, error } = useGetSidebarPagesQuery({
-    pageId: currentPageId,
-  });
+  const { data, isLoading, error } = useGetSidebarPagesQuery(
+    shareId ? null : { pageId: currentPageId },
+  );
 
   const subpages = useMemo(() => {
     // If we're in a shared context, use the shared subpages

apps/client/src/features/editor/components/video/video-view.module.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
   animation: pulse 1.2s ease-in-out infinite;

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.70.0",
+  "version": "0.70.1",
   "description": "",
   "author": "",
   "private": true,

apps/server/src/app.module.ts

@@ -25,6 +25,7 @@ import { CacheModule } from '@nestjs/cache-manager';
 import KeyvRedis from '@keyv/redis';
 import { LoggerModule } from './common/logger/logger.module';
 import { ClsModule } from 'nestjs-cls';
+import { NoopAuditModule } from './integrations/audit/audit.module';
 
 const enterpriseModules = [];
 try {
@@ -47,6 +48,7 @@ try {
       middleware: { mount: true },
     }),
     LoggerModule,
+    NoopAuditModule,
     CoreModule,
     DatabaseModule,
     EnvironmentModule,

apps/server/src/core/core.module.ts

@@ -20,10 +20,6 @@ import { AuditContextMiddleware } from '../common/middlewares/audit-context.midd
 import { ShareModule } from './share/share.module';
 import { NotificationModule } from './notification/notification.module';
 import { WatcherModule } from './watcher/watcher.module';
-import {
-  AUDIT_SERVICE,
-  NoopAuditService,
-} from '../integrations/audit/audit.service';
 import { ClsMiddleware } from 'nestjs-cls';
 
 @Module({
@@ -43,13 +39,6 @@ import { ClsMiddleware } from 'nestjs-cls';
     NotificationModule,
     WatcherModule,
   ],
-  providers: [
-    {
-      provide: AUDIT_SERVICE,
-      useClass: NoopAuditService,
-    },
-  ],
-  exports: [AUDIT_SERVICE],
 })
 export class CoreModule implements NestModule {
   configure(consumer: MiddlewareConsumer) {

apps/server/src/integrations/audit/audit.module.ts

@@ -0,0 +1,14 @@
+import { Global, Module } from '@nestjs/common';
+import { AUDIT_SERVICE, NoopAuditService } from './audit.service';
+
+@Global()
+@Module({
+  providers: [
+    {
+      provide: AUDIT_SERVICE,
+      useClass: NoopAuditService,
+    },
+  ],
+  exports: [AUDIT_SERVICE],
+})
+export class NoopAuditModule {}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docmost",
   "homepage": "https://docmost.com",
-  "version": "0.70.0",
+  "version": "0.70.1",
   "private": true,
   "scripts": {
     "build": "nx run-many -t build",

packages/editor-ext/src/lib/drawio.ts

@@ -1,6 +1,7 @@
 import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
 import type { ResizableNodeViewDirection } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
+import { normalizeFileUrl } from "./media-utils";
 
 export type DrawioResizeOptions = {
   enabled: boolean;
@@ -223,7 +224,7 @@ export const Drawio = Node.create<DrawioOptions>({
       }
 
       const el = document.createElement("img");
-      el.src = node.attrs.src;
+      el.src = normalizeFileUrl(node.attrs.src);
       el.alt = node.attrs.title || "";
       el.style.display = "block";
       el.style.maxWidth = "100%";
@@ -259,7 +260,7 @@ export const Drawio = Node.create<DrawioOptions>({
           }
 
           if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
+            el.src = normalizeFileUrl(updatedNode.attrs.src);
           }
 
           const w = updatedNode.attrs.width;
@@ -317,12 +318,14 @@ export const Drawio = Node.create<DrawioOptions>({
         });
       }
 
-      // Hide until image loads
-      dom.style.visibility = "hidden";
+      // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onload = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;

packages/editor-ext/src/lib/excalidraw.ts

@@ -1,6 +1,7 @@
 import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
 import type { ResizableNodeViewDirection } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
+import { normalizeFileUrl } from "./media-utils";
 
 export type ExcalidrawResizeOptions = {
   enabled: boolean;
@@ -223,7 +224,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
       }
 
       const el = document.createElement("img");
-      el.src = node.attrs.src;
+      el.src = normalizeFileUrl(node.attrs.src);
       el.alt = node.attrs.title || "";
       el.style.display = "block";
       el.style.maxWidth = "100%";
@@ -259,7 +260,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
           }
 
           if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
+            el.src = normalizeFileUrl(updatedNode.attrs.src);
           }
 
           const w = updatedNode.attrs.width;
@@ -317,12 +318,14 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
         });
       }
 
-      // Hide until image loads
-      dom.style.visibility = "hidden";
+      // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onload = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;

packages/editor-ext/src/lib/image/image.ts

@@ -6,6 +6,7 @@ import {
   Range,
   ResizableNodeView,
 } from "@tiptap/core";
+import { normalizeFileUrl } from "../media-utils";
 import type { ResizableNodeViewDirection } from "@tiptap/core";
 
 export type ImageResizeOptions = {
@@ -252,11 +253,18 @@ export const TiptapImage = Image.extend<ImageOptions>({
         }
       });
 
-      el.src = HTMLAttributes.src;
+      el.src = normalizeFileUrl(HTMLAttributes.src);
       el.style.display = "block";
       el.style.maxWidth = "100%";
       el.style.borderRadius = "8px";
 
+      if (typeof node.attrs.width === "number" && node.attrs.width > 0) {
+        el.style.width = `${node.attrs.width}px`;
+        if (typeof node.attrs.height === "number" && node.attrs.height > 0) {
+          el.style.height = `${node.attrs.height}px`;
+        }
+      }
+
       let currentNode = node;
 
       const nodeView = new ResizableNodeView({
@@ -287,7 +295,7 @@ export const TiptapImage = Image.extend<ImageOptions>({
           }
 
           if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
+            el.src = normalizeFileUrl(updatedNode.attrs.src);
           }
 
           if (updatedNode.attrs.alt !== currentNode.attrs.alt) {
@@ -352,12 +360,14 @@ export const TiptapImage = Image.extend<ImageOptions>({
         });
       }
 
-      // Hide until image loads (official TipTap pattern)
-      dom.style.visibility = "hidden";
+      // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onload = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;

packages/editor-ext/src/lib/media-utils.ts

@@ -1,5 +1,12 @@
 import { Editor } from "@tiptap/core";
 
+export function normalizeFileUrl(src: string): string {
+  if (src && src.startsWith("/files/")) {
+    return "/api" + src;
+  }
+  return src || "";
+}
+
 export type UploadFn = (
   file: File,
   editor: Editor,

packages/editor-ext/src/lib/video/video.ts

@@ -1,5 +1,6 @@
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { Range, Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
+import { normalizeFileUrl } from "../media-utils";
 import type { ResizableNodeViewDirection } from "@tiptap/core";
 
 export type VideoResizeOptions = {
@@ -223,13 +224,20 @@ export const TiptapVideo = Node.create<VideoOptions>({
       }
 
       const el = document.createElement("video");
-      el.src = node.attrs.src;
+      el.src = normalizeFileUrl(node.attrs.src);
       el.controls = true;
       el.preload = "metadata";
       el.style.display = "block";
       el.style.maxWidth = "100%";
       el.style.borderRadius = "8px";
 
+      if (typeof node.attrs.width === "number" && node.attrs.width > 0) {
+        el.style.width = `${node.attrs.width}px`;
+        if (typeof node.attrs.height === "number" && node.attrs.height > 0) {
+          el.style.height = `${node.attrs.height}px`;
+        }
+      }
+
       let currentNode = node;
 
       const nodeView = new ResizableNodeView({
@@ -260,7 +268,7 @@ export const TiptapVideo = Node.create<VideoOptions>({
           }
 
           if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
+            el.src = normalizeFileUrl(updatedNode.attrs.src);
           }
 
           const w = updatedNode.attrs.width;
@@ -318,12 +326,14 @@ export const TiptapVideo = Node.create<VideoOptions>({
         });
       }
 
-      // Hide until video metadata loads
-      dom.style.visibility = "hidden";
+      // Show skeleton background while video loads from server
       dom.style.pointerEvents = "none";
+      dom.style.background =
+        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+
       el.onloadedmetadata = () => {
-        dom.style.visibility = "";
         dom.style.pointerEvents = "";
+        dom.style.background = "";
       };
 
       return nodeView;