perf: prevent expensive excalidraw re-renders on keystroke

Wraps `onExcalidrawAPI` in `useCallback` to prevent the heavy Excalidraw canvas component from re-rendering on every keystroke when typing in the code block editor.
Wraps `DrawingSidebar` in `memo` and utilizes stable callbacks passed from `App.tsx` instead of inline functions to prevent unnecessary list re-renders.

.jules/bolt.md

@@ -0,0 +1,4 @@
+## 2024-06-25 - Excalidraw Memoization
+
+**Learning:** The `@excalidraw/excalidraw` package's `Excalidraw` component is exceptionally expensive to re-render. Even though `EditorCanvas` was wrapped in `React.memo`, passing an inline arrow function to `onExcalidrawAPI` in the parent `App` broke memoization, causing severe input lag when typing in completely independent UI elements like the codeblock editor sidebar due to the entire canvas re-rendering.
+**Action:** When passing callbacks to heavy third-party components like Excalidraw, always wrap them in `useCallback` hook to preserve their prop stability and maintain `React.memo` benefits, preventing disastrous performance regressions on typing/input.

src/client/App.tsx

@@ -359,12 +359,12 @@ function PrivateApp() {
         onClose={closeSidebar}
         onCreate={handleCreateDrawing}
         onSelect={handleSelectDrawing}
-        onDelete={(drawingId) => void deleteDrawing(drawingId)}
+        onDelete={deleteDrawing}
         onTitleChange={setActiveTitle}
-        onTitleSubmit={() => void submitTitle()}
+        onTitleSubmit={submitTitle}
         onPublicationSlugChange={setPublicationSlug}
-        onPublish={() => void publishPublication()}
-        onDisablePublication={() => void disablePublication()}
+        onPublish={publishPublication}
+        onDisablePublication={disablePublication}
       />
     </div>
   );

src/client/components/CodeBlockSidebar.tsx

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

src/client/components/DrawingSidebar.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { type DrawingMeta, type DrawingPublication } from "../../core/shared";
 
 type DrawingSidebarProps = {
@@ -9,14 +10,14 @@ type DrawingSidebarProps = {
   publicationSlug: string;
   publicationBusy: boolean;
   onClose: () => void;
-  onCreate: () => void;
-  onSelect: (drawingId: string) => void;
-  onDelete: (drawingId: string) => void;
+  onCreate: () => void | Promise<void>;
+  onSelect: (drawingId: string) => void | Promise<void>;
+  onDelete: (drawingId: string) => void | Promise<void>;
   onTitleChange: (title: string) => void;
-  onTitleSubmit: () => void;
+  onTitleSubmit: () => void | Promise<void>;
   onPublicationSlugChange: (slug: string) => void;
-  onPublish: () => void;
-  onDisablePublication: () => void;
+  onPublish: () => void | Promise<void>;
+  onDisablePublication: () => void | Promise<void>;
 };
 
 function DrawerIcon() {
@@ -64,7 +65,7 @@ export function DrawingsToggle({ onClick }: { onClick: () => void }) {
   );
 }
 
-export function DrawingSidebar({
+export const DrawingSidebar = memo(function DrawingSidebar({
   open,
   drawings,
   activeId,
@@ -133,7 +134,7 @@ export function DrawingSidebar({
                       className="title-input"
                       value={activeTitle}
                       onChange={(event) => onTitleChange(event.target.value)}
-                      onBlur={onTitleSubmit}
+                      onBlur={() => void onTitleSubmit()}
                       onKeyDown={(event) => {
                         if (event.key === "Enter") {
                           event.currentTarget.blur();
@@ -143,7 +144,7 @@ export function DrawingSidebar({
                     <button
                       type="button"
                       className="icon-button drawing-delete-button"
-                      onClick={() => onDelete(drawing.id)}
+                      onClick={() => void onDelete(drawing.id)}
                       aria-label={`Delete ${drawing.title}`}
                     >
                       ×
@@ -171,7 +172,7 @@ export function DrawingSidebar({
                       <button
                         type="button"
                         className="secondary-button"
-                        onClick={onPublish}
+                        onClick={() => void onPublish()}
                         disabled={publicationBusy}
                       >
                         {publication.enabled ? "Update link" : "Publish"}
@@ -179,7 +180,7 @@ export function DrawingSidebar({
                       <button
                         type="button"
                         className="secondary-button"
-                        onClick={onDisablePublication}
+                        onClick={() => void onDisablePublication()}
                         disabled={!publication.enabled || publicationBusy}
                       >
                         Unpublish
@@ -205,7 +206,7 @@ export function DrawingSidebar({
                 <button
                   type="button"
                   className="drawing-link"
-                  onClick={() => onSelect(drawing.id)}
+                  onClick={() => void onSelect(drawing.id)}
                 >
                   <span className="drawing-title">{drawing.title}</span>
                 </button>
@@ -214,7 +215,7 @@ export function DrawingSidebar({
                 <button
                   type="button"
                   className="icon-button"
-                  onClick={() => onDelete(drawing.id)}
+                  onClick={() => void onDelete(drawing.id)}
                   aria-label={`Delete ${drawing.title}`}
                 >
                   ×
@@ -226,4 +227,4 @@ export function DrawingSidebar({
       </aside>
     </>
   );
-}
+});