ensure external assets in excalidraw are avoided

libraries/excalidraw/canvas_note_share.js

@@ -9,7 +9,8 @@ const App = () => {
         height: appState.height,
     });
     const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
-    console.log("no render?");
+    
+    // ensure that assets are loaded from trilium
     
     /**
      * resizing

src/app.js

@@ -30,8 +30,11 @@ app.use(express.urlencoded({extended: false}));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 app.use('/libraries', express.static(path.join(__dirname, '..', 'libraries')));
-// node_modules required for excalidraw-view mode in shared notes
-app.use('/node_modules', express.static(path.join(__dirname, '..', 'node_modules')));
+// excalidraw-view mode in shared notes
+app.use('/node_modules/react/umd/react.production.min.js', express.static(path.join(__dirname, '..', 'node_modules/react/umd/react.production.min.js')));
+app.use('/node_modules/react-dom/umd/react-dom.production.min.js', express.static(path.join(__dirname, '..', 'node_modules/react-dom/umd/react-dom.production.min.js')));
+// expose whole dist folder since complete assets are needed in edit and share
+app.use('/node_modules/@excalidraw/excalidraw/dist/', express.static(path.join(__dirname, '..', 'node_modules/@excalidraw/excalidraw/dist/')));
 app.use('/images', express.static(path.join(__dirname, '..', 'images')));
 const sessionParser = session({
     secret: sessionSecret,

src/public/app/dialogs/note_revisions.js

@@ -183,7 +183,6 @@ async function setContentPane() {
             const svg = data.svg || "no svg present."
 
             /**
-             * Debatable
              * maxWidth: 100% use full width of container but do not enlarge!
              * height:auto to ensure that height scales with width
              */

src/public/app/widgets/type_widgets/canvas-note-utils/replaceExternalAssets.js

@@ -0,0 +1,16 @@
+/**
+ * replaces exlicraw.com and unpkg.com with own assets
+ * 
+ * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged and published
+ * 
+ * @param {string} string 
+ * @returns 
+ */
+const replaceExternalAssets = (string) => {
+    let result = string;
+    // exlidraw.com asset in react usage
+    result = result.replaceAll("https://excalidraw.com/", window.EXCALIDRAW_ASSET_PATH+"excalidraw-assets/");
+    return result;
+}
+
+export default replaceExternalAssets;

src/public/app/widgets/type_widgets/canvas_note.js

@@ -5,6 +5,7 @@ import sleep from './canvas-note-utils/sleep.js';
 import froca from "../../services/froca.js";
 import debounce from "./canvas-note-utils/lodash.debounce.js";
 import uniqueId from "./canvas-note-utils/lodash.uniqueId.js";
+import replaceExternalAssets from "./canvas-note-utils/replaceExternalAssets.js";
 
 const TPL = `
     <div class="canvas-note-widget note-detail-canvas-note note-detail-printable note-detail">
@@ -156,7 +157,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         /**
          * before we load content into excalidraw, make sure excalidraw has loaded
          */
-        while (!this.excalidrawRef) {
+        while (!this.excalidrawRef || !this.excalidrawRef.current) {
             this.log("doRefresh! excalidrawref not yet loeaded, sleep 200ms...");
             await sleep(200);
         }
@@ -259,10 +260,11 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
             files
         });
         const svgString = svg.outerHTML;
+
         /**
-         * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged
+         * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged and published
          */
-        const svgSafeString =svgString.replaceAll("https://excalidraw.com/", window.EXCALIDRAW_ASSET_PATH+"excalidraw-assets/");
+        const svgSafeString = replaceExternalAssets(svgString);
 
         const activeFiles = {};
         elements.forEach((element) => {
@@ -276,7 +278,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
             elements, // excalidraw
             appState, // excalidraw
             files: activeFiles, // excalidraw
-            svg: svgSafeString, // rendered on every save, not needed for excalidraw
+            svg: svgSafeString, // not needed for excalidraw, used for note_short, content, and image api
         };
 
         const contentString = JSON.stringify(content);

src/share/content_renderer.js

@@ -86,6 +86,9 @@ document.addEventListener("DOMContentLoaded", function() {
         isEmpty = true;
     }
     else if (note.type === 'canvas-note') {
+        header += `<script>
+                    window.EXCALIDRAW_ASSET_PATH = window.location.origin + "/node_modules/@excalidraw/excalidraw/dist/";
+                   </script>`;
         header += `<script src="../../node_modules/react/umd/react.production.min.js"></script>`;
         header += `<script src="../../node_modules/react-dom/umd/react-dom.production.min.js"></script>`;
         header += `<script src="../../node_modules/@excalidraw/excalidraw/dist/excalidraw.production.min.js"></script>`;