fix text

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

@@ -3,6 +3,11 @@ import { Text, Group } from "react-konva";
 import Konva from "konva";
 import type { TextShapeProps } from "./types";
 import { getFontFamily } from "@/pages/editor/utils/fontFamily";
+import {
+  getEffectiveTextWidth,
+  measureTextBlock,
+  usesWrappedLayout,
+} from "@/pages/editor/utils/textStyle";
 
 const getFontWeight = (fontWeight?: string): string => {
   if (!fontWeight) return "normal";
@@ -53,6 +58,13 @@ const TextShape = ({
   const shapeRef = useRef<Konva.Text>(null);
   const groupRef = useRef<Konva.Group>(null);
   const [isEditing, setIsEditing] = useState(false);
+  const fontSize = obj.fontSize || 24;
+  const allowWrap = usesWrappedLayout(
+    obj.text,
+    obj.height,
+    fontSize,
+    obj.lineHeight ?? 1.2,
+  );
 
   // Transformer is managed in EditorCanvas for multi-select support
   // Set offset for text node
@@ -89,8 +101,32 @@ const TextShape = ({
       });
       measureNode.destroy();
 
-      const nextWidth = Math.max(1, Math.ceil(rw));
-      const nextHeight = Math.max(1, Math.ceil(rh));
+      const fontSize = obj.fontSize || 24;
+      const cssMeasured = measureTextBlock(obj.text || "", {
+        fontSize,
+        fontFamily: obj.fontFamily,
+        fontWeight: obj.fontWeight,
+        letterSpacing: obj.letterSpacing ?? 0,
+        lineHeight: obj.lineHeight ?? 1.2,
+      });
+      const konvaWidth = Math.max(1, Math.ceil(rw));
+      const nextWidth = getEffectiveTextWidth(
+        konvaWidth,
+        obj.text,
+        {
+          fontSize,
+          fontFamily: obj.fontFamily,
+          fontWeight: obj.fontWeight,
+          letterSpacing: obj.letterSpacing ?? 0,
+          lineHeight: obj.lineHeight ?? 1.2,
+        },
+        !allowWrap,
+      ) ?? konvaWidth;
+      const nextHeight = Math.max(
+        1,
+        Math.ceil(rh),
+        cssMeasured.height,
+      );
       const widthChanged = Math.abs((obj.width || 0) - nextWidth) > 1;
       const heightChanged = Math.abs((obj.height || 0) - nextHeight) > 1;
 
@@ -155,6 +191,7 @@ const TextShape = ({
     obj.lineHeight,
     obj.width,
     obj.height,
+    allowWrap,
     onUpdate,
   ]);
 
@@ -321,8 +358,9 @@ const TextShape = ({
         fontStyle={konvaFontStyle}
         letterSpacing={obj.letterSpacing ?? 0}
         lineHeight={obj.lineHeight ?? 1.2}
-        width={obj.width || undefined}
+        width={allowWrap ? obj.width || undefined : undefined}
         align={textAlign}
+        wrap={allowWrap ? "word" : "none"}
       />
     </Group>
   );