diff --git a/src/components/EditorCanvas/Note.jsx b/src/components/EditorCanvas/Note.jsx
index 24341e61..21d2ba07 100644
--- a/src/components/EditorCanvas/Note.jsx
+++ b/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 (
{
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 }) {
);
-}
\ No newline at end of file
+}
diff --git a/src/context/NotesContext.jsx b/src/context/NotesContext.jsx
index 33076957..ce5bbae2 100644
--- a/src/context/NotesContext.jsx
+++ b/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 (