perf: optimize editorcanvas memoization and debounce shiki highlighting

.jules/bolt.md

@@ -1,4 +0,0 @@
-## 2024-06-07 - Memoize callbacks passed to Excalidraw
-
-**Learning:** Due to the exceptionally high rendering cost of the `@excalidraw/excalidraw` canvas, always ensure all callbacks passed to it (e.g., `onExcalidrawAPI`) are strictly memoized using `useCallback`. Passing inline functions as props breaks prop stability for `React.memo` and causes severe UI input lag caused by full canvas re-renders when parent states change.
-**Action:** When working with `<Excalidraw>` or its wrapper components like `<EditorCanvas>`, always extract inline callback functions (like `onExcalidrawAPI={(api) => { ... }}`) into `useCallback` hooks before passing them down.

src/client/App.tsx

@@ -307,9 +307,6 @@ function PrivateApp() {
     [],
   );
 
-  // ⚡ Bolt: Memoize the Excalidraw API callback to prevent EditorCanvas from re-rendering
-  // Excalidraw has exceptionally high rendering cost, so we must maintain prop stability
-  // for EditorCanvas's React.memo to avoid severe UI input lag on any parent state change.
   const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
     excalidrawApiRef.current = api;
   }, []);

src/client/components/CodeBlockSidebar.tsx

@@ -30,6 +30,8 @@ function CodeBlockEditor({
 
   useEffect(() => {
     let cancelled = false;
+
+    const timeoutId = setTimeout(() => {
       void renderHighlightedCodeBlockHtml(draft.code, draft.language)
         .then((nextHtml) => {
           if (!cancelled) {
@@ -41,9 +43,11 @@ function CodeBlockEditor({
             setHtml(null);
           }
         });
+    }, 100);
 
     return () => {
       cancelled = true;
+      clearTimeout(timeoutId);
     };
   }, [draft.code, draft.language]);