From f76534b6321a402bc1bb88660df1b97b8c9efbc1 Mon Sep 17 00:00:00 2001
From: ruinivist <179396038+ruinivist@users.noreply.github.com>
Date: Thu, 4 Jun 2026 07:51:05 +0000
Subject: [PATCH] perf: optimize editorcanvas memoization and debounce shiki
 highlighting

---
 src/client/App.tsx                         |  8 ++++---
 src/client/components/CodeBlockSidebar.tsx | 26 +++++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/client/App.tsx b/src/client/App.tsx
index 33ddb41..5fd06e8 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -307,6 +307,10 @@ function PrivateApp() {
     [],
   );
 
+  const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
+    excalidrawApiRef.current = api;
+  }, []);
+
   return (
     <div className="app-shell" ref={appShellRef}>
       {toastMessage && (
@@ -332,9 +336,7 @@ function PrivateApp() {
           onSceneChange={handleSceneChange}
           onSelectionStateChange={handleCodeBlockSelectionChange}
           onEditorActivity={scheduleThemeTokenSync}
-          onExcalidrawAPI={(api) => {
-            excalidrawApiRef.current = api;
-          }}
+          onExcalidrawAPI={handleExcalidrawAPI}
           renderEmbeddable={renderCodeBlockEmbeddable}
         />
         <CodeBlockSidebar
diff --git a/src/client/components/CodeBlockSidebar.tsx b/src/client/components/CodeBlockSidebar.tsx
index 1b81d50..7cafe83 100644
--- a/src/client/components/CodeBlockSidebar.tsx
+++ b/src/client/components/CodeBlockSidebar.tsx
@@ -30,20 +30,24 @@ function CodeBlockEditor({
 
   useEffect(() => {
     let cancelled = false;
-    void renderHighlightedCodeBlockHtml(draft.code, draft.language)
-      .then((nextHtml) => {
-        if (!cancelled) {
-          setHtml(nextHtml);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setHtml(null);
-        }
-      });
+
+    const timeoutId = setTimeout(() => {
+      void renderHighlightedCodeBlockHtml(draft.code, draft.language)
+        .then((nextHtml) => {
+          if (!cancelled) {
+            setHtml(nextHtml);
+          }
+        })
+        .catch(() => {
+          if (!cancelled) {
+            setHtml(null);
+          }
+        });
+    }, 100);
 
     return () => {
       cancelled = true;
+      clearTimeout(timeoutId);
     };
   }, [draft.code, draft.language]);