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.

.jules/sentinel.md

@@ -1,4 +0,0 @@
-## 2024-06-04 - Defense in Depth: Shiki HTML Sanitization
-**Vulnerability:** Potential XSS via `dangerouslySetInnerHTML` in CodeBlock components rendering Shiki highlighted code.
-**Learning:** While Shiki is generally considered safe as it just wraps code in spans, passing user-controlled input (even if it's "code") through an external library and directly into `dangerouslySetInnerHTML` without explicit sanitization creates an unnecessary risk surface. A vulnerability or misconfiguration in the highlighter could lead to XSS.
-**Prevention:** Always wrap the output of HTML generators (like Shiki) in a dedicated sanitizer (like DOMPurify) before using `dangerouslySetInnerHTML`, even if the generator is deemed "safe." This is a core tenet of defense in depth.

bun.lock

@@ -1,12 +1,12 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "excali",
       "dependencies": {
         "@excalidraw/excalidraw": "^0.18.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
-        "dompurify": "^3.4.8",
         "fast-json-patch": "^3.1.1",
         "mcp-handler": "^1.1.0",
         "react": "^19.2.6",
@@ -16,7 +16,6 @@
       },
       "devDependencies": {
         "@types/bun": "^1.3.14",
-        "@types/dompurify": "^3.2.0",
         "@types/react": "^19.2.15",
         "@types/react-dom": "^19.2.3",
         "prettier": "^3.8.3",
@@ -218,8 +217,6 @@
 
     "@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
 
-    "@types/dompurify": ["@types/dompurify@3.2.0", "", { "dependencies": { "dompurify": "*" } }, "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg=="],
-
     "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
@@ -396,7 +393,7 @@
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
-    "dompurify": ["dompurify@3.4.8", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ=="],
+    "dompurify": ["dompurify@3.4.5", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
@@ -846,8 +843,6 @@
 
     "mermaid/@mermaid-js/parser": ["@mermaid-js/parser@1.1.1", "", { "dependencies": { "@chevrotain/types": "~11.1.1" } }, "sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw=="],
 
-    "mermaid/dompurify": ["dompurify@3.4.5", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA=="],
-
     "mermaid/roughjs": ["roughjs@4.6.6", "", { "dependencies": { "hachure-fill": "^0.5.2", "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ=="],
 
     "points-on-path/points-on-curve": ["points-on-curve@0.2.0", "", {}, "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="],

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@excalidraw/excalidraw": "^0.18.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "dompurify": "^3.4.8",
     "fast-json-patch": "^3.1.1",
     "mcp-handler": "^1.1.0",
     "react": "^19.2.6",
@@ -30,7 +29,6 @@
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",
-    "@types/dompurify": "^3.2.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "prettier": "^3.8.3",

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
@@ -357,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()}
+        onPublish={publishPublication}
-        onDisablePublication={() => void disablePublication()}
+        onDisablePublication={disablePublication}
       />
     </div>
   );

src/client/components/CodeBlockEmbeddable.tsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useState } from "react";
-import DOMPurify from "dompurify";
 import type { ExcalidrawProps } from "@excalidraw/excalidraw/types";
 import type {
   ExcalidrawEmbeddableElement,
@@ -58,7 +57,7 @@ const CodeBlockEmbeddable = memo(function CodeBlockEmbeddable({
       {html ? (
         <div
           className="codeblock-embeddable-html"
-          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
+          dangerouslySetInnerHTML={{ __html: html }}
         />
       ) : (
         <pre className="codeblock-embeddable-fallback">

src/client/components/CodeBlockSidebar.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-import DOMPurify from "dompurify";
 import {
   CODE_BLOCK_LANGUAGES,
   type CodeBlockDraftState,
@@ -76,7 +75,7 @@ function CodeBlockEditor({
         {html ? (
           <div
             className="codeblock-editor-highlight-html"
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
+            dangerouslySetInnerHTML={{ __html: html }}
           />
         ) : (
           <pre className="codeblock-editor-highlight-fallback">

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;
+  onCreate: () => void | Promise<void>;
-  onSelect: (drawingId: string) => void;
+  onSelect: (drawingId: string) => void | Promise<void>;
-  onDelete: (drawingId: string) => void;
+  onDelete: (drawingId: string) => void | Promise<void>;
   onTitleChange: (title: string) => void;
-  onTitleSubmit: () => void;
+  onTitleSubmit: () => void | Promise<void>;
   onPublicationSlugChange: (slug: string) => void;
-  onPublish: () => void;
+  onPublish: () => void | Promise<void>;
-  onDisablePublication: () => 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>
     </>
   );
-}
+});