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 (