From dc35df9f63d0cfb684db898da95fec8e3b6fac84 Mon Sep 17 00:00:00 2001
From: Tom <7283497+thfrei@users.noreply.github.com>
Date: Tue, 3 May 2022 22:44:52 +0200
Subject: [PATCH] optimize canvas_note share to make it more clear about view
 mode and excalidraw

---
 libraries/excalidraw/canvas_note_share.js | 36 +++++++++++++----------
 src/share/content_renderer.js             |  9 +++---
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/libraries/excalidraw/canvas_note_share.js b/libraries/excalidraw/canvas_note_share.js
index fd8b39fcd..a0c47fc65 100644
--- a/libraries/excalidraw/canvas_note_share.js
+++ b/libraries/excalidraw/canvas_note_share.js
@@ -45,19 +45,7 @@ const App = () => {
             {
                 className: "excalidraw-wrapper",
                 ref: excalidrawWrapperRef
-            },
-            React.createElement(
-                "label",
-                null,
-                React.createElement("input", {
-                  type: "checkbox",
-                  checked: viewModeEnabled,
-                  onChange: () => setViewModeEnabled(!viewModeEnabled)
-                }),
-                " Edit mode "
-              ),
-              React.createElement("br"),
-        
+            },        
             React.createElement(Excalidraw.default, {
                 ref: excalidrawRef,
                 width: dimensions.width,
@@ -72,16 +60,32 @@ const App = () => {
                 detectScroll: false,
                 handleKeyboardGlobally: false,
                 autoFocus: true,
-                renderTopRightUI: () => {
+                renderFooter: () => {
                     return React.createElement(
                         React.Fragment,
                         null,
                         React.createElement(
                             "div",
                             {
-                                className: "excalidraw-top-right-ui",
+                                className: "excalidraw-top-right-ui excalidraw Island",
                             },
-                            "view mode"
+                            React.createElement(
+                                "label",
+                                {
+                                    style: {
+                                        padding: "5px",
+                                    },
+                                    className: "excalidraw Stack",
+                                },
+                                React.createElement(
+                                    "button", 
+                                    {
+                                        onClick: () => setViewModeEnabled(!viewModeEnabled)
+                                    }, 
+                                    viewModeEnabled ? " Enter simple view mode " : " Enter extended view mode "
+                                ),
+                                ""
+                            ),
                         ));
                 },
             })
diff --git a/src/share/content_renderer.js b/src/share/content_renderer.js
index 58cf0777b..399c74136 100644
--- a/src/share/content_renderer.js
+++ b/src/share/content_renderer.js
@@ -105,13 +105,12 @@ document.addEventListener("DOMContentLoaded", function() {
 
         content = `<div>
             <script>
-            const {elements, appState, files} = JSON.parse(${JSON.stringify(content)});
-            window.triliumExcalidraw = {elements, appState, files}
+                const {elements, appState, files} = JSON.parse(${JSON.stringify(content)});
+                window.triliumExcalidraw = {elements, appState, files}
             </script>
-            <div id="excalidraw-app">
-            </div>
+            <div id="excalidraw-app"></div>
             <hr>
-            <a href="api/images/${note.noteId}/${note.title}?${note.utcDateModified}">Download SVG</a>
+            <a href="api/images/${note.noteId}/${note.title}?utc=${note.utcDateModified}">Get Image Link</a>
             <script src="../../libraries/excalidraw/canvas_note_share.js"></script>
         </div>`;
     }