perf: optimize editorcanvas memoization and debounce shiki highlighting

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) => {
+          onExcalidrawAPI={handleExcalidrawAPI}
-            excalidrawApiRef.current = api;
-          }}
           renderEmbeddable={renderCodeBlockEmbeddable}
         />
         <CodeBlockSidebar

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]);