From 8c85aa343c7e2483edcce4c5da270f8b84e6cc8f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 22 Sep 2025 08:40:56 +0300
Subject: [PATCH] chore(react/type_widget): add more options to canvas

---
 .../src/widgets/type_widgets/Canvas.tsx       | 26 +++++++++++++++----
 .../src/widgets/type_widgets_old/canvas.ts    | 13 ----------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/Canvas.tsx b/apps/client/src/widgets/type_widgets/Canvas.tsx
index 0ed6cb7b7..85d67b114 100644
--- a/apps/client/src/widgets/type_widgets/Canvas.tsx
+++ b/apps/client/src/widgets/type_widgets/Canvas.tsx
@@ -2,18 +2,21 @@ import { Excalidraw } from "@excalidraw/excalidraw";
 import { TypeWidgetProps } from "./type_widget";
 import "@excalidraw/excalidraw/index.css";
 import { useNoteBlob } from "../react/hooks";
-import { useEffect, useRef } from "preact/hooks";
-import type { ExcalidrawImperativeAPI, Theme } from "@excalidraw/excalidraw/types";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import type { ExcalidrawImperativeAPI, AppState } from "@excalidraw/excalidraw/types";
+import options from "../../services/options";
 import "./Canvas.css";
 
 export default function Canvas({ note }: TypeWidgetProps) {
     const apiRef = useRef<ExcalidrawImperativeAPI>(null);
     const blob = useNoteBlob(note);
+    const viewModeEnabled = options.is("databaseReadonly");
+    const themeStyle = useMemo(() => {
+        const documentStyle = window.getComputedStyle(document.documentElement);
+        return documentStyle.getPropertyValue("--theme-style")?.trim() as AppState["theme"];
+    }, []);
 
     useEffect(() => {
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        const themeStyle = documentStyle.getPropertyValue("--theme-style")?.trim() as Theme;
-
         const api = apiRef.current;
         const content = blob?.content;
         if (!api) return;
@@ -33,6 +36,19 @@ export default function Canvas({ note }: TypeWidgetProps) {
                 <div className="excalidraw-wrapper">
                     <Excalidraw
                         excalidrawAPI={api => apiRef.current = api}
+                        theme={themeStyle}
+                        viewModeEnabled={viewModeEnabled}
+                        zenModeEnabled={false}
+                        isCollaborating={false}
+                        detectScroll={false}
+                        handleKeyboardGlobally={false}
+                        autoFocus={false}
+                        UIOptions={{
+                            canvasActions: {
+                                saveToActiveFile: false,
+                                export: false
+                            }
+                        }}
                     />
                 </div>
             </div>
diff --git a/apps/client/src/widgets/type_widgets_old/canvas.ts b/apps/client/src/widgets/type_widgets_old/canvas.ts
index 4e72a776b..b1b625412 100644
--- a/apps/client/src/widgets/type_widgets_old/canvas.ts
+++ b/apps/client/src/widgets/type_widgets_old/canvas.ts
@@ -134,20 +134,7 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         const Canvas = (await import("./canvas_el.js")).default;
         this.canvasInstance = new Canvas({
             // this makes sure that 1) manual theme switch button is hidden 2) theme stays as it should after opening menu
-            theme: this.themeStyle,
             onChange: () => this.onChangeHandler(),
-            viewModeEnabled: options.is("databaseReadonly"),
-            zenModeEnabled: false,
-            isCollaborating: false,
-            detectScroll: false,
-            handleKeyboardGlobally: false,
-            autoFocus: false,
-            UIOptions: {
-                canvasActions: {
-                    saveToActiveFile: false,
-                    export: false
-                }
-            },
             onLibraryChange: () => {
                 this.libraryChanged = true;