moving canvas_note_share to src/share and add routes

src/share/canvas_note_share.js

@@ -0,0 +1,102 @@
+/**
+ * this is used as a "standalone js" file and required by a shared note directly via script-tags
+ * 
+ * data input comes via window variable as follow
+ * const {elements, appState, files} = window.triliumExcalidraw;
+ */
+
+document.getElementById("excalidraw-app").style.height = appState.height+"px";
+
+const App = () => {
+    const excalidrawRef = React.useRef(null);
+    const excalidrawWrapperRef = React.useRef(null);
+    const [dimensions, setDimensions] = React.useState({
+        width: undefined,
+        height: appState.height,
+    });
+    const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
+    
+    // ensure that assets are loaded from trilium
+    
+    /**
+     * resizing
+     */
+    React.useEffect(() => {
+        const dimensions = {
+            width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+            height: excalidrawWrapperRef.current.getBoundingClientRect().height
+        };
+        setDimensions(dimensions);
+
+        const onResize = () => {
+            const dimensions = {
+                width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+                height: excalidrawWrapperRef.current.getBoundingClientRect().height
+            };
+            setDimensions(dimensions);
+        };
+        
+        window.addEventListener("resize", onResize);
+        // ensure that resize is also called for split creation and deletion
+        // not really the problem. problem is saved appState!
+        // self.$renderElement.addEventListener("resize", onResize);
+        
+        return () => window.removeEventListener("resize", onResize);
+    }, [excalidrawWrapperRef]);
+
+    return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+            "div",
+            {
+                className: "excalidraw-wrapper",
+                ref: excalidrawWrapperRef
+            },        
+            React.createElement(Excalidraw.default, {
+                ref: excalidrawRef,
+                width: dimensions.width,
+                height: dimensions.height,
+                initialData: {
+                    elements, appState, files
+                },
+                viewModeEnabled: !viewModeEnabled,
+                zenModeEnabled: false,
+                gridModeEnabled: false,
+                isCollaborating: false,
+                detectScroll: false,
+                handleKeyboardGlobally: false,
+                autoFocus: true,
+                renderFooter: () => {
+                    return React.createElement(
+                        React.Fragment,
+                        null,
+                        React.createElement(
+                            "div",
+                            {
+                                className: "excalidraw-top-right-ui excalidraw Island",
+                            },
+                            React.createElement(
+                                "label",
+                                {
+                                    style: {
+                                        padding: "5px",
+                                    },
+                                    className: "excalidraw Stack",
+                                },
+                                React.createElement(
+                                    "button", 
+                                    {
+                                        onClick: () => setViewModeEnabled(!viewModeEnabled)
+                                    }, 
+                                    viewModeEnabled ? " Enter simple view mode " : " Enter extended view mode "
+                                ),
+                                ""
+                            ),
+                        ));
+                },
+            })
+        )
+    );
+};
+ReactDOM.render(React.createElement(App), document.getElementById("excalidraw-app"));

src/share/content_renderer.js

@@ -114,7 +114,7 @@ document.addEventListener("DOMContentLoaded", function() {
             <div id="excalidraw-app"></div>
             <hr>
             <a href="api/images/${note.noteId}/${note.title}?utc=${note.utcDateModified}">Get Image Link</a>
-            <script src="../../libraries/excalidraw/canvas_note_share.js"></script>
+            <script src="./canvas_note_share.js"></script>
         </div>`;
     }
     else {

src/share/routes.js

@@ -1,3 +1,6 @@
+const express = require('express');
+const path = require('path');
+
 const shaca = require("./shaca/shaca");
 const shacaLoader = require("./shaca/shaca_loader");
 const shareRoot = require("./share_root");
@@ -55,6 +58,8 @@ function register(router) {
         });
     }
 
+    router.use('/share/canvas_note_share.js', express.static(path.join(__dirname, 'canvas_note_share.js')));
+
     router.get(['/share', '/share/'], (req, res, next) => {
         shacaLoader.ensureLoad();