fix text resize in extra padding

src/pages/editor/components/tools/TextShape.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useMemo } from "react";
-import { Text } from "react-konva";
+import { Text, Group } from "react-konva";
 import Konva from "konva";
 import type { TextShapeProps } from "./types";
 
@@ -40,6 +40,7 @@ const TextShape = ({
   draggable,
 }: TextShapeProps) => {
   const shapeRef = useRef<Konva.Text>(null);
+  const groupRef = useRef<Konva.Group>(null);
 
   // Transformer is managed in EditorCanvas for multi-select support
   // Set offset for text node
@@ -51,25 +52,18 @@ const TextShape = ({
   }, []);
 
   // Update actual text dimensions after render
+  // Only update if width/height are not set (initial render)
   useEffect(() => {
-    if (shapeRef.current) {
+    if (shapeRef.current && (!obj.width || !obj.height)) {
       const node = shapeRef.current;
       const clientRect = node.getClientRect({ skipTransform: true });
 
-      // اگر width یا height واقعی با مقدار ذخیره شده متفاوت است، آپدیت کن
+      // Update store with actual dimensions
       if (clientRect.width && clientRect.height) {
-        const needsUpdate =
-          !obj.width ||
-          !obj.height ||
-          Math.abs((obj.width || 0) - clientRect.width) > 5 ||
-          Math.abs((obj.height || 0) - clientRect.height) > 5;
-
-        if (needsUpdate) {
-          onUpdate(obj.id, {
-            width: Math.ceil(clientRect.width),
-            height: Math.ceil(clientRect.height),
-          });
-        }
+        onUpdate(obj.id, {
+          width: Math.ceil(clientRect.width),
+          height: Math.ceil(clientRect.height),
+        });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,24 +74,19 @@ const TextShape = ({
   const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]);
 
   return (
-    <Text
-      ref={shapeRef}
+    <Group
+      ref={groupRef}
       id={obj.id}
       name="text-object"
       x={obj.x}
       y={obj.y}
-      text={obj.text || ""}
-      fontSize={obj.fontSize || 24}
-      fill={fillColor}
-      fontFamily={fontFamily}
-      fontStyle={fontWeight}
-      letterSpacing={obj.letterSpacing ?? 0}
-      align="right"
+      width={obj.width}
+      height={obj.height}
       rotation={obj.rotation || 0}
       draggable={draggable}
       onClick={(e) => {
-        if (shapeRef.current) {
-          onSelect(obj.id, shapeRef.current, e);
+        if (groupRef.current) {
+          onSelect(obj.id, groupRef.current, e);
         }
       }}
       onDragEnd={(e) => {
@@ -107,7 +96,20 @@ const TextShape = ({
           y: node.y(),
         });
       }}
-    />
+    >
+      <Text
+        ref={shapeRef}
+        x={0}
+        y={0}
+        text={obj.text || ""}
+        fontSize={obj.fontSize || 24}
+        fill={fillColor}
+        fontFamily={fontFamily}
+        fontStyle={fontWeight}
+        letterSpacing={obj.letterSpacing ?? 0}
+        align="right"
+      />
+    </Group>
   );
 };