Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 80e53ef03c |
@@ -0,0 +1,4 @@
|
||||
## 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.
|
||||
@@ -1,5 +0,0 @@
|
||||
## 2025-06-07 - [Added Security Headers via Caddy]
|
||||
|
||||
**Vulnerability:** Missing HTTP security headers (CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy).
|
||||
**Learning:** The application does not apply security headers in the Bun application server but instead relies on the Caddy reverse proxy to inject them in the `Caddyfile`.
|
||||
**Prevention:** Always configure security headers at the reverse proxy level (`Caddyfile`) instead of within the backend API routing code to ensure all routes, including static files, are properly protected.
|
||||
@@ -6,12 +6,6 @@
|
||||
:80 {
|
||||
encode zstd gzip
|
||||
|
||||
header {
|
||||
X-Frame-Options "SAMEORIGIN"
|
||||
X-Content-Type-Options "nosniff"
|
||||
Referrer-Policy "strict-origin-when-cross-origin"
|
||||
}
|
||||
|
||||
handle /mcp {
|
||||
reverse_proxy 127.0.0.1:3001
|
||||
}
|
||||
|
||||
+8
-3
@@ -307,6 +307,13 @@ 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;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="app-shell" ref={appShellRef}>
|
||||
{toastMessage && (
|
||||
@@ -332,9 +339,7 @@ function PrivateApp() {
|
||||
onSceneChange={handleSceneChange}
|
||||
onSelectionStateChange={handleCodeBlockSelectionChange}
|
||||
onEditorActivity={scheduleThemeTokenSync}
|
||||
onExcalidrawAPI={(api) => {
|
||||
excalidrawApiRef.current = api;
|
||||
}}
|
||||
onExcalidrawAPI={handleExcalidrawAPI}
|
||||
renderEmbeddable={renderCodeBlockEmbeddable}
|
||||
/>
|
||||
<CodeBlockSidebar
|
||||
|
||||
Reference in New Issue
Block a user