Implement height adjustment for textarea on mount

Add useEffect to adjust textarea height on mount
Issue : #647

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 });
+  });
+
   return (
     <g
       onPointerEnter={(e) => e.isPrimary && setHovered(true)}
@@ -506,4 +514,4 @@ export default function Note({ data, onPointerDown }) {
       </foreignObject>
     </g>
   );
-}
+}