@nasser-sw/fabric 7.0.0-beta1 → 7.0.1-beta10

package/dist/src/text/overlayEditor.mjs

@@ -79,8 +79,12 @@ class OverlayEditor {
     this.textarea.style.pointerEvents = 'auto';
     // Set appropriate unicodeBidi based on content and direction
     const hasArabicText = /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(this.target.text || '');
+    const hasLatinText = /[a-zA-Z]/.test(this.target.text || '');
     const isLTRDirection = this.target.direction === 'ltr';
-    if (hasArabicText && isLTRDirection) {
+    if (hasArabicText && hasLatinText && isLTRDirection) {
+      // For mixed Arabic/Latin text in LTR mode, use embed for consistent line wrapping
+      this.textarea.style.unicodeBidi = 'embed';
+    } else if (hasArabicText && isLTRDirection) {
       // For Arabic text in LTR mode, use embed to preserve shaping while respecting direction
       this.textarea.style.unicodeBidi = 'embed';
     } else {
@@ -169,14 +173,26 @@ class OverlayEditor {
     parseFloat(this.hostDiv.style.width) / zoom;
     const currentHeight = parseFloat(this.hostDiv.style.height) / zoom;
 
-    // Only update if there's a meaningful change (avoid float precision issues)
+    // Always update height for responsive controls (especially important for line deletion)
     const heightDiff = Math.abs(currentHeight - target.height);
-    const threshold = 1; // 1px threshold to avoid micro-changes
+    const threshold = 0.5; // Lower threshold for better responsiveness to line changes
 
     if (heightDiff > threshold) {
+      target.height;
       target.height = currentHeight;
       target.setCoords(); // Update control positions
+
+      // Force dirty to ensure proper re-rendering
+      target.dirty = true;
       this.canvas.requestRenderAll(); // Re-render to show updated selection
+
+      // IMPORTANT: Reposition overlay after height change
+      requestAnimationFrame(() => {
+        if (!this.isDestroyed) {
+          this.applyOverlayStyle();
+          console.log('📐 Height changed - rechecking alignment after repositioning:');
+        }
+      });
     }
   }
 
@@ -204,14 +220,6 @@ class OverlayEditor {
     target.setCoords();
     const aCoords = target.aCoords;
 
-    // DEBUG: Log dimensions before edit
-    console.log('BEFORE EDIT:');
-    console.log('  target.width =', target.width);
-    console.log('  target.height =', target.height);
-    console.log('  target.getScaledWidth() =', target.getScaledWidth());
-    console.log('  target.getScaledHeight() =', target.getScaledHeight());
-    console.log('  target.padding =', target.padding);
-
     // 2. Get canvas position and scroll offsets (like rtl-test.html)
     const canvasEl = canvas.upperCanvasEl;
     const canvasRect = canvasEl.getBoundingClientRect();
@@ -234,14 +242,12 @@ class OverlayEditor {
     const left = canvasRect.left + scrollX + screenPoint.x;
     const top = canvasRect.top + scrollY + screenPoint.y;
 
-    // 4. Get dimensions with zoom scaling - use target.width for text wrapping, scaled height for container
-    const width = target.width * (target.scaleX || 1) * zoom; // Account for object scale and viewport zoom
-    const height = target.height * (target.scaleY || 1) * zoom;
-    console.log('WIDTH CALCULATION:');
-    console.log('  target.width =', target.width);
-    console.log('  scaledWidth =', target.getScaledWidth());
-    console.log('  zoom =', zoom);
-    console.log('  final width =', width);
+    // 4. Calculate the precise width and height for the container
+    // **THE FIX:** Use getBoundingRect() for BOTH width and height.
+    // This is the most reliable measure of the object's final rendered dimensions.
+    const objectBounds = target.getBoundingRect();
+    const width = Math.round(objectBounds.width * zoom);
+    const height = Math.round(objectBounds.height * zoom);
 
     // 5. Apply styles to host DIV - absolute positioning like rtl-test.html
     this.hostDiv.style.position = 'absolute';
@@ -265,50 +271,333 @@ class OverlayEditor {
     const scaleX = target.scaleX || 1;
     const finalFontSize = baseFontSize * scaleX * zoom;
     const fabricLineHeight = target.lineHeight || 1.16;
-    // Apply padding and dimensions to textarea
-    const textareaWidth = paddingX > 0 ? `calc(100% - ${2 * paddingX}px)` : '100%';
-    const textareaHeight = paddingY > 0 ? `calc(100% - ${2 * paddingY}px)` : '100%';
-    this.textarea.style.width = textareaWidth;
-    this.textarea.style.height = textareaHeight;
+    // **THE FIX:** Use 'border-box' so the width property includes padding.
+    // This makes alignment much easier and more reliable.
+    this.textarea.style.boxSizing = 'border-box';
+
+    // **THE FIX:** Set the textarea width to be IDENTICAL to the host div's width.
+    // The padding will now be correctly contained *inside* this width.
+    this.textarea.style.width = `${width}px`;
+    this.textarea.style.height = '100%'; // Let hostDiv control height
     this.textarea.style.padding = `${paddingY}px ${paddingX}px`;
+
+    // Apply all other font and text styles to match Fabric
+    const letterSpacingPx = (target.charSpacing || 0) / 1000 * finalFontSize;
+
+    // Special handling for text objects loaded from JSON - ensure they're properly initialized
+    if (target.dirty !== false && target.initDimensions) {
+      console.log('🔧 Ensuring text object is properly initialized before overlay editing');
+      // Force re-initialization if the text object seems to be in a dirty state
+      target.initDimensions();
+    }
     this.textarea.style.fontSize = `${finalFontSize}px`;
-    this.textarea.style.lineHeight = String(fabricLineHeight); // Use unit-less multiplier
+    this.textarea.style.lineHeight = String(fabricLineHeight);
     this.textarea.style.fontFamily = target.fontFamily || 'Arial';
     this.textarea.style.fontWeight = String(target.fontWeight || 'normal');
     this.textarea.style.fontStyle = target.fontStyle || 'normal';
-    this.textarea.style.textAlign = target.textAlign || 'left';
+    // Handle text alignment and justification
+    const textAlign = target.textAlign || 'left';
+    let cssTextAlign = textAlign;
+
+    // Detect text direction from content for proper justify handling
+    const autoDetectedDirection = this.firstStrongDir(this.textarea.value || '');
+
+    // DEBUG: Log alignment details
+    console.log('🔍 ALIGNMENT DEBUG:');
+    console.log('   Fabric textAlign:', textAlign);
+    console.log('   Fabric direction:', target.direction);
+    console.log('   Text content:', JSON.stringify(target.text));
+    console.log('   Detected direction:', autoDetectedDirection);
+
+    // Map fabric.js justify to CSS
+    if (textAlign.includes('justify')) {
+      // Try to match fabric.js justify behavior more precisely
+      try {
+        // For justify, we need to replicate fabric.js space expansion
+        // Use CSS justify but with specific settings to match fabric.js better
+        cssTextAlign = 'justify';
+
+        // Set text-align-last based on justify type and detected direction
+        // Smart justify: respect detected direction even when fabric alignment doesn't match
+        if (textAlign === 'justify') {
+          this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';
+        } else if (textAlign === 'justify-left') {
+          // If text is RTL but fabric says justify-left, override to justify-right for better UX
+          if (autoDetectedDirection === 'rtl') {
+            this.textarea.style.textAlignLast = 'right';
+            console.log('   → Overrode justify-left to justify-right for RTL text');
+          } else {
+            this.textarea.style.textAlignLast = 'left';
+          }
+        } else if (textAlign === 'justify-right') {
+          // If text is LTR but fabric says justify-right, override to justify-left for better UX  
+          if (autoDetectedDirection === 'ltr') {
+            this.textarea.style.textAlignLast = 'left';
+            console.log('   → Overrode justify-right to justify-left for LTR text');
+          } else {
+            this.textarea.style.textAlignLast = 'right';
+          }
+        } else if (textAlign === 'justify-center') {
+          this.textarea.style.textAlignLast = 'center';
+        }
+
+        // Enhanced justify settings for better fabric.js matching
+        this.textarea.style.textJustify = 'inter-word';
+        this.textarea.style.wordSpacing = 'normal';
+
+        // Additional CSS properties for better justify matching
+        this.textarea.style.textAlign = 'justify';
+        this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;
+
+        // Try to force better justify behavior
+        this.textarea.style.textJustifyTrim = 'none';
+        this.textarea.style.textAutospace = 'none';
+        console.log('   → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);
+      } catch (error) {
+        console.warn('   → Justify setup failed, falling back to standard alignment:', error);
+        cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');
+      }
+    } else {
+      this.textarea.style.textAlignLast = 'auto';
+      this.textarea.style.textJustify = 'auto';
+      this.textarea.style.wordSpacing = 'normal';
+      console.log('   → Applied standard alignment:', cssTextAlign);
+    }
+    this.textarea.style.textAlign = cssTextAlign;
     this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
-    this.textarea.style.letterSpacing = `${(target.charSpacing || 0) / 1000}em`;
-    this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+    this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
+
+    // Use the already detected direction from above
+    const fabricDirection = target.direction;
 
-    // Ensure consistent font rendering between Fabric and CSS
+    // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense
+    this.textarea.style.direction = autoDetectedDirection || fabricDirection || 'ltr';
     this.textarea.style.fontVariant = 'normal';
     this.textarea.style.fontStretch = 'normal';
-    this.textarea.style.textRendering = 'auto';
-    this.textarea.style.fontKerning = 'auto';
-    this.textarea.style.boxSizing = 'content-box'; // Padding is added outside width/height
+    this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas
+    this.textarea.style.fontKerning = 'normal';
+    this.textarea.style.fontFeatureSettings = 'normal';
+    this.textarea.style.fontVariationSettings = 'normal';
     this.textarea.style.margin = '0';
     this.textarea.style.border = 'none';
     this.textarea.style.outline = 'none';
     this.textarea.style.background = 'transparent';
-    this.textarea.style.wordWrap = 'break-word';
+    this.textarea.style.overflowWrap = 'break-word';
     this.textarea.style.whiteSpace = 'pre-wrap';
+    this.textarea.style.hyphens = 'none';
+
+    // DEBUG: Log final CSS properties
+    console.log('🎨 FINAL TEXTAREA CSS:');
+    console.log('   textAlign:', this.textarea.style.textAlign);
+    console.log('   textAlignLast:', this.textarea.style.textAlignLast);
+    console.log('   direction:', this.textarea.style.direction);
+    console.log('   unicodeBidi:', this.textarea.style.unicodeBidi);
+    console.log('   width:', this.textarea.style.width);
+    console.log('   textJustify:', this.textarea.style.textJustify);
+    console.log('   wordSpacing:', this.textarea.style.wordSpacing);
+    console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+
+    // If justify, log Fabric object dimensions for comparison
+    if (textAlign.includes('justify')) {
+      var _calcTextWidth, _ref;
+      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      console.log('   Fabric width:', target.width);
+      console.log('   Fabric calcTextWidth:', (_calcTextWidth = (_ref = target).calcTextWidth) === null || _calcTextWidth === void 0 ? void 0 : _calcTextWidth.call(_ref));
+      console.log('   Fabric textAlign:', target.textAlign);
+      console.log('   Text lines:', target.textLines);
+    }
 
-    // DEBUG: Log final textarea dimensions
-    console.log('TEXTAREA AFTER SETUP:');
-    console.log('  textarea width =', this.textarea.style.width);
-    console.log('  textarea height =', this.textarea.style.height);
-    console.log('  textarea padding =', this.textarea.style.padding);
-    console.log('  paddingX =', paddingX, 'paddingY =', paddingY);
-    console.log('  baseFontSize =', baseFontSize);
-    console.log('  scaleX =', scaleX);
-    console.log('  zoom =', zoom);
-    console.log('  finalFontSize =', finalFontSize);
-    console.log('  fabricLineHeight =', fabricLineHeight);
+    // Debug font properties matching
+    console.log('🔤 FONT PROPERTIES COMPARISON:');
+    console.log('   Fabric fontFamily:', target.fontFamily);
+    console.log('   Fabric fontWeight:', target.fontWeight);
+    console.log('   Fabric fontStyle:', target.fontStyle);
+    console.log('   Fabric fontSize:', target.fontSize);
+    console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
+    console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
+    console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
+    console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+
+    // Enhanced font rendering to better match fabric.js canvas rendering
+    // Default to auto for more natural rendering
+    this.textarea.style.webkitFontSmoothing = 'auto';
+    this.textarea.style.mozOsxFontSmoothing = 'auto';
+    this.textarea.style.fontSmooth = 'auto';
+    this.textarea.style.textSizeAdjust = 'none';
+
+    // For bold fonts, use subpixel rendering to match canvas thickness better
+    const fontWeight = String(target.fontWeight || 'normal');
+    const isBold = fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 600;
+    if (isBold) {
+      this.textarea.style.webkitFontSmoothing = 'subpixel-antialiased';
+      this.textarea.style.mozOsxFontSmoothing = 'unset';
+      console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+    }
+    console.log('🎨 FONT SMOOTHING APPLIED:');
+    console.log('   webkitFontSmoothing:', this.textarea.style.webkitFontSmoothing);
+    console.log('   mozOsxFontSmoothing:', this.textarea.style.mozOsxFontSmoothing);
 
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
 
+  /**
+   * Debug method to compare textarea and canvas object bounding boxes
+   */
+  debugBoundingBoxComparison() {
+    const target = this.target;
+    const canvas = this.canvas;
+    const zoom = canvas.getZoom();
+
+    // Get textarea bounding box (in screen coordinates)
+    const textareaRect = this.textarea.getBoundingClientRect();
+    const hostRect = this.hostDiv.getBoundingClientRect();
+
+    // Get canvas object bounding box (in screen coordinates)
+    const canvasBounds = target.getBoundingRect();
+    const canvasRect = canvas.upperCanvasEl.getBoundingClientRect();
+
+    // Convert canvas object bounds to screen coordinates
+    const vpt = canvas.viewportTransform;
+    const screenObjectBounds = {
+      left: canvasRect.left + canvasBounds.left * zoom + vpt[4],
+      top: canvasRect.top + canvasBounds.top * zoom + vpt[5],
+      width: canvasBounds.width * zoom,
+      height: canvasBounds.height * zoom
+    };
+    console.log('🔍 BOUNDING BOX COMPARISON:');
+    console.log('📦 Textarea Rect:', {
+      left: Math.round(textareaRect.left * 100) / 100,
+      top: Math.round(textareaRect.top * 100) / 100,
+      width: Math.round(textareaRect.width * 100) / 100,
+      height: Math.round(textareaRect.height * 100) / 100
+    });
+    console.log('📦 Host Div Rect:', {
+      left: Math.round(hostRect.left * 100) / 100,
+      top: Math.round(hostRect.top * 100) / 100,
+      width: Math.round(hostRect.width * 100) / 100,
+      height: Math.round(hostRect.height * 100) / 100
+    });
+    console.log('📦 Canvas Object Bounds (screen):', {
+      left: Math.round(screenObjectBounds.left * 100) / 100,
+      top: Math.round(screenObjectBounds.top * 100) / 100,
+      width: Math.round(screenObjectBounds.width * 100) / 100,
+      height: Math.round(screenObjectBounds.height * 100) / 100
+    });
+    console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);
+
+    // Calculate differences
+    const hostVsObject = {
+      leftDiff: Math.round((hostRect.left - screenObjectBounds.left) * 100) / 100,
+      topDiff: Math.round((hostRect.top - screenObjectBounds.top) * 100) / 100,
+      widthDiff: Math.round((hostRect.width - screenObjectBounds.width) * 100) / 100,
+      heightDiff: Math.round((hostRect.height - screenObjectBounds.height) * 100) / 100
+    };
+    const textareaVsObject = {
+      leftDiff: Math.round((textareaRect.left - screenObjectBounds.left) * 100) / 100,
+      topDiff: Math.round((textareaRect.top - screenObjectBounds.top) * 100) / 100,
+      widthDiff: Math.round((textareaRect.width - screenObjectBounds.width) * 100) / 100,
+      heightDiff: Math.round((textareaRect.height - screenObjectBounds.height) * 100) / 100
+    };
+    console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);
+    console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);
+
+    // Check if they're aligned (within 2px tolerance)
+    const tolerance = 2;
+    const hostAligned = Math.abs(hostVsObject.leftDiff) < tolerance && Math.abs(hostVsObject.topDiff) < tolerance && Math.abs(hostVsObject.widthDiff) < tolerance && Math.abs(hostVsObject.heightDiff) < tolerance;
+    const textareaAligned = Math.abs(textareaVsObject.leftDiff) < tolerance && Math.abs(textareaVsObject.topDiff) < tolerance && Math.abs(textareaVsObject.widthDiff) < tolerance && Math.abs(textareaVsObject.heightDiff) < tolerance;
+    console.log(hostAligned ? '✅ Host Div ALIGNED with canvas object' : '❌ Host Div MISALIGNED with canvas object');
+    console.log(textareaAligned ? '✅ Textarea ALIGNED with canvas object' : '❌ Textarea MISALIGNED with canvas object');
+    console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  }
+
+  /**
+   * Debug method to compare text wrapping between textarea and Fabric text object
+   */
+  debugTextWrapping() {
+    const target = this.target;
+    const text = this.textarea.value;
+    console.log('📝 TEXT WRAPPING COMPARISON:');
+    console.log('📄 Text Content:', `"${text}"`);
+    console.log('📄 Text Length:', text.length);
+
+    // Analyze line breaks
+    const explicitLines = text.split('\n');
+    console.log('📄 Explicit Lines (\\n):', explicitLines.length);
+    explicitLines.forEach((line, i) => {
+      console.log(`   Line ${i + 1}: "${line}" (${line.length} chars)`);
+    });
+
+    // Get textarea computed styles for wrapping analysis
+    const textareaStyles = window.getComputedStyle(this.textarea);
+    console.log('📐 Textarea Wrapping Styles:');
+    console.log('   width:', textareaStyles.width);
+    console.log('   fontSize:', textareaStyles.fontSize);
+    console.log('   fontFamily:', textareaStyles.fontFamily);
+    console.log('   fontWeight:', textareaStyles.fontWeight);
+    console.log('   letterSpacing:', textareaStyles.letterSpacing);
+    console.log('   lineHeight:', textareaStyles.lineHeight);
+    console.log('   whiteSpace:', textareaStyles.whiteSpace);
+    console.log('   wordWrap:', textareaStyles.wordWrap);
+    console.log('   overflowWrap:', textareaStyles.overflowWrap);
+    console.log('   direction:', textareaStyles.direction);
+    console.log('   textAlign:', textareaStyles.textAlign);
+
+    // Get Fabric text object properties for comparison
+    console.log('📐 Fabric Text Object Properties:');
+    console.log('   width:', target.width);
+    console.log('   fontSize:', target.fontSize);
+    console.log('   fontFamily:', target.fontFamily);
+    console.log('   fontWeight:', target.fontWeight);
+    console.log('   charSpacing:', target.charSpacing);
+    console.log('   lineHeight:', target.lineHeight);
+    console.log('   direction:', target.direction);
+    console.log('   textAlign:', target.textAlign);
+    console.log('   scaleX:', target.scaleX);
+    console.log('   scaleY:', target.scaleY);
+
+    // Calculate effective dimensions for comparison - use actual rendered width
+    // **THE FIX:** Use getBoundingRect to get the *actual rendered width* of the Fabric object.
+    const fabricEffectiveWidth = this.target.getBoundingRect().width;
+    // Use the exact width set on textarea for comparison
+    const textareaComputedWidth = parseFloat(window.getComputedStyle(this.textarea).width);
+    const textareaEffectiveWidth = textareaComputedWidth / this.canvas.getZoom();
+    const widthDiff = Math.abs(textareaEffectiveWidth - fabricEffectiveWidth);
+    console.log('📏 Effective Width Comparison:');
+    console.log('   Textarea Effective Width:', textareaEffectiveWidth);
+    console.log('   Fabric Effective Width:', fabricEffectiveWidth);
+    console.log('   Width Difference:', widthDiff.toFixed(2) + 'px');
+    console.log(widthDiff < 1 ? '✅ Widths MATCH for wrapping' : '❌ Width MISMATCH may cause different wrapping');
+
+    // Check text direction and bidi handling
+    const hasRTLText = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+    const hasBidiText = /[\u0590-\u06FF]/.test(text) && /[a-zA-Z]/.test(text);
+    console.log('🌍 Text Direction Analysis:');
+    console.log('   Has RTL characters:', hasRTLText);
+    console.log('   Has mixed Bidi text:', hasBidiText);
+    console.log('   Textarea direction:', textareaStyles.direction);
+    console.log('   Fabric direction:', target.direction || 'auto');
+    console.log('   Textarea unicodeBidi:', textareaStyles.unicodeBidi);
+
+    // Measure actual rendered line count
+    const textareaScrollHeight = this.textarea.scrollHeight;
+    const textareaLineHeight = parseFloat(textareaStyles.lineHeight) || parseFloat(textareaStyles.fontSize) * 1.2;
+    const estimatedTextareaLines = Math.round(textareaScrollHeight / textareaLineHeight);
+    console.log('📊 Line Count Analysis:');
+    console.log('   Textarea scrollHeight:', textareaScrollHeight);
+    console.log('   Textarea lineHeight:', textareaLineHeight);
+    console.log('   Estimated rendered lines:', estimatedTextareaLines);
+    console.log('   Explicit line breaks:', explicitLines.length);
+    if (estimatedTextareaLines > explicitLines.length) {
+      console.log('🔄 Text wrapping detected in textarea');
+      console.log('   Wrapped lines:', estimatedTextareaLines - explicitLines.length);
+    } else {
+      console.log('📏 No text wrapping in textarea');
+    }
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+  }
+
   /**
    * Focus the textarea and position cursor at end
    */
@@ -337,6 +626,11 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
     this.target.setCoords();
     this.applyOverlayStyle();
+
+    // Fix character mapping issues after JSON loading for browser-wrapped fonts
+    if (this.target._fixCharacterMappingAfterJsonLoad) {
+      this.target._fixCharacterMappingAfterJsonLoad();
+    }
     this.textarea.focus();
     this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
 
@@ -382,6 +676,23 @@ class OverlayEditor {
     // Handle commit/cancel after restoring visibility
     if (commit && !this.isComposing) {
       const finalText = this.textarea.value;
+
+      // Auto-detect text direction and update fabric object if needed
+      const detectedDirection = this.firstStrongDir(finalText);
+      const currentDirection = this.target.direction || 'ltr';
+      if (detectedDirection && detectedDirection !== currentDirection) {
+        console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
+        console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+
+        // Update the fabric object's direction
+        this.target.set('direction', detectedDirection);
+
+        // Force a re-render to apply the direction change
+        this.canvas.requestRenderAll();
+        console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+      } else {
+        console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+      }
       if (this.onCommit) {
         this.onCommit(finalText);
       }
@@ -421,25 +732,40 @@ class OverlayEditor {
     }
   }
   autoResizeTextarea() {
-    // Allow both vertical growth and shrinking; host width stays fixed
-    const oldHeight = parseFloat(window.getComputedStyle(this.textarea).height);
-
-    // Reset height to measure actual needed height
-    this.textarea.style.height = 'auto';
+    // Store the scroll position and the container's old height for comparison.
+    const scrollTop = this.textarea.scrollTop;
+    const oldHeight = parseFloat(this.hostDiv.style.height || '0');
+
+    // 1. **Force a reliable reflow.**
+    //    First, reset the textarea's height to a minimal value. This is the crucial step
+    //    that forces the browser to recalculate the content's height from scratch,
+    //    ignoring the hostDiv's larger, stale height.
+    this.textarea.style.height = '1px';
+
+    // 2. Read the now-accurate scrollHeight. This value reflects the minimum
+    //    height required for the content, whether it's single or multi-line.
     const scrollHeight = this.textarea.scrollHeight;
 
-    // Add extra padding to prevent text clipping (especially for line height)
-    const lineHeightBuffer = 8; // Extra space to prevent clipping
-    const newHeight = Math.max(scrollHeight + lineHeightBuffer, 25); // Minimum height with buffer
-    const heightChanged = Math.abs(newHeight - oldHeight) > 2; // Only if meaningful change
+    // A small buffer for rendering consistency across browsers.
+    const buffer = 2;
+    const newHeight = scrollHeight + buffer;
 
-    this.textarea.style.height = `${newHeight}px`;
-    this.hostDiv.style.height = `${newHeight}px`; // Match exactly
+    // Check if the height has changed significantly.
+    const heightChanged = Math.abs(newHeight - oldHeight) > 1;
 
-    // Only update object bounds if height actually changed
+    // 4. Only update heights and object bounds if there was a change.
     if (heightChanged) {
+      this.textarea.style.height = `${newHeight}px`;
+      this.hostDiv.style.height = `${newHeight}px`;
       this.updateObjectBounds();
+    } else {
+      // If no significant change, ensure the textarea's height matches the container
+      // to prevent any minor visual misalignment.
+      this.textarea.style.height = this.hostDiv.style.height;
     }
+
+    // 5. Restore the original scroll position.
+    this.textarea.scrollTop = scrollTop;
   }
   handleKeyDown(e) {
     if (e.key === 'Escape') {
@@ -448,6 +774,19 @@ class OverlayEditor {
     } else if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
       e.preventDefault();
       this.destroy(true); // Commit
+    } else if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {
+      // For keys that might change the height, schedule a resize check
+      // Use both immediate and delayed checks to catch all scenarios
+      requestAnimationFrame(() => {
+        if (!this.isDestroyed) {
+          this.autoResizeTextarea();
+        }
+      });
+      setTimeout(() => {
+        if (!this.isDestroyed) {
+          this.autoResizeTextarea();
+        }
+      }, 10); // Small delay to ensure DOM is updated
     }
   }
   handleFocus() {