Fix note autoresize loop

Author: gudaoxuri

src/components/EditorCanvas/Note.jsx

@@ -78,10 +78,15 @@ export default function Note({ data, onPointerDown }) {
 
   const handleChange = (e) => {
     const textarea = document.getElementById(`note_${data.id}`);
+    if (!textarea) return;
     textarea.style.height = "0";
     textarea.style.height = textarea.scrollHeight + "px";
     const newHeight = textarea.scrollHeight + 42;
-    updateNote(data.id, { content: e.target.value, height: newHeight });
+    const updates = { content: e.target.value };
+    if (newHeight !== data.height) {
+      updates.height = newHeight;
+    }
+    updateNote(data.id, updates);
   };
 
   const handleBlur = (e) => {
@@ -181,11 +186,17 @@ export default function Note({ data, onPointerDown }) {
 
   useEffect(() => {
     const textarea = document.getElementById(`note_${data.id}`);
+    if (!textarea) return;
+
     textarea.style.height = "0";
-    textarea.style.height = textarea.scrollHeight + "px";
-    const newHeight = textarea.scrollHeight + 42;
+    const scrollHeight = textarea.scrollHeight;
+    textarea.style.height = scrollHeight + "px";
+    const newHeight = scrollHeight + 42;
+
+    if (newHeight === data.height) return;
+
     updateNote(data.id, { height: newHeight });
-  }, [data.id, updateNote]);
+  }, [data.id, data.height, updateNote]);
 
   return (
     <g
@@ -339,7 +350,10 @@ export default function Note({ data, onPointerDown }) {
           onPointerMove={(e) => {
             if (!resizing) return;
             const delta = e.movementX / (transform?.zoom || 1);
-            const next = Math.max(MIN_NOTE_WIDTH, (data.width ?? noteWidth) + delta);
+            const next = Math.max(
+              MIN_NOTE_WIDTH,
+              (data.width ?? noteWidth) + delta,
+            );
             if (next !== data.width) {
               updateNote(data.id, { width: next });
             }
@@ -514,4 +528,4 @@ export default function Note({ data, onPointerDown }) {
       </foreignObject>
     </g>
   );
-}
+}

src/context/NotesContext.jsx

@@ -1,5 +1,10 @@
-import { createContext, useState } from "react";
-import { Action, ObjectType, defaultNoteTheme, noteWidth } from "../data/constants";
+import { createContext, useState, useCallback } from "react";
+import {
+  Action,
+  ObjectType,
+  defaultNoteTheme,
+  noteWidth,
+} from "../data/constants";
 import { useUndoRedo, useTransform, useSelect } from "../hooks";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
@@ -77,7 +82,7 @@ export default function NotesContextProvider({ children }) {
     }
   };
 
-  const updateNote = (id, values) => {
+  const updateNote = useCallback((id, values) => {
     setNotes((prev) =>
       prev.map((t) => {
         if (t.id === id) {
@@ -89,7 +94,7 @@ export default function NotesContextProvider({ children }) {
         return t;
       }),
     );
-  };
+  }, []);
 
   return (
     <NotesContext.Provider