Updated excalidraw to latest version. Made it easier to change excali…

…draw theme and persist setting. (#40)
standardnotes · Jun 12, 2024 · b97b575 · b97b575
1 parent 9d419c8
commit b97b575
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 61 deletions.
diff --git a/packages/dev.randombits.excalidraw/package.json b/packages/dev.randombits.excalidraw/package.json
@@ -2,7 +2,7 @@
   "name": "sn-excalidraw",
   "description": "A virtual whiteboard editor, with a hand-drawn style. Powered by Excalidraw.",
   "author": "Matthew Nienow",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "build": "webpack"
   },
@@ -15,12 +15,10 @@
     "showInGallery": true
   },
   "dependencies": {
-    "@excalidraw/excalidraw": "^0.15.0",
-    "@standardnotes/component-relay": "^2.2.2",
-    "@standardnotes/models": "^1.43.11",
-    "@standardnotes/stylekit": "5.29.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@excalidraw/excalidraw": "^0.17.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sn-extension-api": "0.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

diff --git a/packages/dev.randombits.excalidraw/src/components/Editor.tsx b/packages/dev.randombits.excalidraw/src/components/Editor.tsx
@@ -1,10 +1,11 @@
-import React, {useRef} from 'react';
-import {Excalidraw, getSceneVersion} from "@excalidraw/excalidraw";
+import React from 'react';
+import {Excalidraw, Footer, getSceneVersion, MainMenu} from "@excalidraw/excalidraw";
 import {useEditor} from "../providers/EditorProvider";
+import snApi from "sn-extension-api";
 
 const Editor = () => {
+  const [theme, setTheme] = React.useState(snApi.extensionMeta?.theme || 'dark');
   const {data, saveNote, isLocked} = useEditor();
-  const el = useRef();
   let lastVersion = getSceneVersion(data.elements);
   let libraryCnt = data.libraryItems?.length || 0;
 
@@ -36,12 +37,69 @@ const Editor = () => {
     }
   };
 
+  const setThemeAndSave = (theme) => {
+    setTheme(theme);
+    snApi.extensionMeta = {theme};
+  };
+
+  const renderThemeBtn = () => {
+    if (theme === 'dark') {
+      return <button
+          className="theme-btn"
+          onClick={() => setThemeAndSave('light')}
+      >
+        <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor"
+             strokeLinecap="round" strokeLinejoin="round">
+          <g stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
+            <path
+                d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667"></path>
+          </g>
+        </svg>
+
+        <span>
+            Light Mode
+      </span>
+      </button>;
+
+    } else {
+      return <button
+          className="theme-btn"
+          onClick={() => setThemeAndSave('dark')}
+      >
+        <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor"
+             strokeLinecap="round" strokeLinejoin="round">
+          <path clip-rule="evenodd" d="M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z"
+                stroke="currentColor"></path>
+        </svg>
+        <span>
+            Dark Mode
+</span>
+      </button>;
+    }
+  };
+
   return (
-    <div className="main">
-      <Excalidraw ref={el} key={Math.random()} initialData={data} theme={'dark'} onChange={onChange} onLibraryChange={onLibraryChange}
-                  viewModeEnabled={isLocked} UIOptions={UIOptions}/>
-    </div>
+      <div className="main">
+        <Excalidraw key={Math.random()} initialData={data} theme={theme} onChange={onChange}
+                    onLibraryChange={onLibraryChange}
+                    viewModeEnabled={isLocked} UIOptions={UIOptions}>
+          <MainMenu>
+            <MainMenu.DefaultItems.LoadScene/>
+            <MainMenu.DefaultItems.Export/>
+            <MainMenu.DefaultItems.SaveAsImage/>
+            <MainMenu.DefaultItems.ClearCanvas/>
+            <MainMenu.DefaultItems.Help/>
+            <MainMenu.DefaultItems.ChangeCanvasBackground/>
+            <div style={{'margin-top': '5px'}}>
+              {renderThemeBtn()}
+            </div>
+          </MainMenu>
+          <Footer>
+            {renderThemeBtn()}
+          </Footer>
+        </Excalidraw>
+      </div>
   );
-}
+};
 
-export default Editor
+export default Editor;
diff --git a/packages/dev.randombits.excalidraw/src/index.css b/packages/dev.randombits.excalidraw/src/index.css
@@ -1,12 +1,37 @@
-@import '@standardnotes/stylekit/dist/stylekit.css';
+@import 'sn-extension-api/dist/sn.min.css';
 
 body,
 html {
-  margin: 0;
-  padding: 0;
-  width: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
 }
 
 .main {
-  height: 100vh;
+    height: 100vh;
+}
+
+.theme-btn {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    background-color: var(--color-surface-low);
+    /*color: var(--sn-stylekit-info-contrast-color);*/
+    width: 150px;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: var(--icon-fill-color);
+    box-shadow: 0 0 0 1px var(--color-surface-lowest);
+}
+
+.theme-btn:hover {
+    background-color: var(--button-hover-bg);
+}
+
+.theme-btn svg {
+    width: 15px;
+    height: 15px;
+    margin-right: 10px;
 }
diff --git a/packages/dev.randombits.excalidraw/src/index.tsx b/packages/dev.randombits.excalidraw/src/index.tsx
@@ -3,40 +3,15 @@ import React from 'react';
 import './index.css';
 import {createRoot} from "react-dom/client";
 import {EditorProvider} from "./providers/EditorProvider";
-import ComponentRelay from "@standardnotes/component-relay";
-import {AppDataField} from "@standardnotes/models";
+import snApi from "sn-extension-api";
 
-let currentNote;
-
-const componentRelay = new ComponentRelay({
-  targetWindow: window,
-  options: {
-    coallesedSaving: true,
-    coallesedSavingDelay: 400,
-    debug: false
-  }
-});
+snApi.initialize({debounceSave: 400});
 
 const root = createRoot(document.getElementById('root'));
-componentRelay.streamContextItem((note) => {
-  currentNote = note;
-  // Only update UI on non-metadata updates.
-  if (note.isMetadataUpdate) {
-    return;
-  }
-  const text = note.content?.text || '';
-  const isLocked = componentRelay.getItemAppDataValue(note, AppDataField.Locked);
-
+snApi.subscribe(() => {
   root.render(
-    <React.StrictMode>
-      <EditorProvider text={text} save={save} isLocked={isLocked}/>
-    </React.StrictMode>
+      <React.StrictMode>
+        <EditorProvider/>
+      </React.StrictMode>
   );
 });
-
-const save = (data: any) => {
-  componentRelay.saveItemWithPresave(currentNote, () => {
-    currentNote.content.text = JSON.stringify(data);
-    currentNote.content.preview_plain = '';
-  });
-};
diff --git a/packages/dev.randombits.excalidraw/src/providers/EditorProvider.tsx b/packages/dev.randombits.excalidraw/src/providers/EditorProvider.tsx
@@ -2,6 +2,7 @@ import React, {createContext, useContext, useEffect, useState} from 'react';
 import Unsupported from "../components/Unsupported";
 import Editor from "../components/Editor";
 import {createNewData, parseEditorData} from "../utils";
+import snApi from "sn-extension-api";
 
 interface IEditorContext {
   data: any;
@@ -19,7 +20,7 @@ const EditorContext = createContext<IEditorContext>({
 
 export const useEditor = () => useContext(EditorContext);
 
-export const EditorProvider = ({text, save, isLocked}) => {
+export const EditorProvider = () => {
   const [data, setData] = useState(null);
   const [unsupported, setUnsupported] = useState(false);
 
@@ -31,7 +32,8 @@ export const EditorProvider = ({text, save, isLocked}) => {
   };
 
   const saveNote = (dataToSave = data) => {
-    save(dataToSave);
+    snApi.text = JSON.stringify(dataToSave);
+    snApi.preview = '';
   };
 
   const saveNoteAndRefresh = () => {
@@ -40,8 +42,8 @@ export const EditorProvider = ({text, save, isLocked}) => {
   };
 
   useEffect(() => {
-    if (text) {
-      const parsedData = parseEditorData(text);
+    if (snApi.text) {
+      const parsedData = parseEditorData(snApi.text);
       if (parsedData) {
         // data that matches our extension
         setData(parsedData);
@@ -58,21 +60,21 @@ export const EditorProvider = ({text, save, isLocked}) => {
       setUnsupported(false);
       saveNote(newData);
     }
-  }, [text]);
+  }, []);
 
   const renderContent = () => {
     if (data) {
       return <Editor/>;
     } else if (unsupported) {
       return <Unsupported eraseFn={eraseDataAndStartNewNote}></Unsupported>;
     } else {
-      return <div>Loading...</div>
+      return <div>Loading...</div>;
     }
   };
 
   return (
-    <EditorContext.Provider value={{data, saveNote, saveNoteAndRefresh, isLocked}}>
-      {renderContent()}
-    </EditorContext.Provider>
+      <EditorContext.Provider value={{data, saveNote, saveNoteAndRefresh, isLocked: snApi.locked}}>
+        {renderContent()}
+      </EditorContext.Provider>
   );
 };
diff --git a/packages/dev.randombits.excalidraw/webpack.config.js b/packages/dev.randombits.excalidraw/webpack.config.js
@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = (env, argv) => ({
   mode: 'production',
@@ -44,6 +45,9 @@ module.exports = (env, argv) => ({
     }
   },
   plugins: [
+    new webpack.DefinePlugin({
+      "process.env.IS_PREACT": JSON.stringify("false")
+    }),
     new HtmlWebpackPlugin({
       filename: "index.html",
       template: "./src/index.html",