Implement height adjustment for textarea on mount (#649)

* Implement height adjustment for textarea on mount
Add useEffect to adjust textarea height on mount
Issue : #647

* Add missing dependency array
Issue : #647

* Update src/components/EditorCanvas/Note.jsx

Co-authored-by: 1ilit <[email protected]>

---------

Co-authored-by: 1ilit <[email protected]>

Author: Red-Hide

src/components/EditorCanvas/Note.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import { Action, ObjectType, Tab, State } from "../../data/constants";
 import { Input, Button, Popover } from "@douyinfe/semi-ui";
 import ColorPicker from "../EditorSidePanel/ColorPicker";
@@ -179,6 +179,14 @@ export default function Note({ data, onPointerDown }) {
   const width = data.width ?? noteWidth;
   const MIN_NOTE_WIDTH = 120;
 
+  useEffect(() => {
+    const textarea = document.getElementById(`note_${data.id}`);
+    textarea.style.height = "0";
+    textarea.style.height = textarea.scrollHeight + "px";
+    const newHeight = textarea.scrollHeight + 42;
+    updateNote(data.id, { height: newHeight });
+  }, [data.id, updateNote]);
+
   return (
     <g
       onPointerEnter={(e) => e.isPrimary && setHovered(true)}
@@ -506,4 +514,4 @@ export default function Note({ data, onPointerDown }) {
       </foreignObject>
     </g>
   );
-}
+}