@nasser-sw/fabric 7.0.1-beta13 → 7.0.1-beta14

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.1-beta12";
+  var version = "7.0.1-beta14";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -19189,8 +19189,8 @@
   // Global measurement context - reused for performance
   let measurementContext = null;
 
-  /**
-   * Get or create the shared measurement context
+  /**
+   * Get or create the shared measurement context
    */
   function getMeasurementContext() {
     if (!measurementContext) {
@@ -19203,8 +19203,8 @@
     return measurementContext;
   }
 
-  /**
-   * Measure a single grapheme
+  /**
+   * Measure a single grapheme
    */
   function measureGrapheme(grapheme, options, ctx) {
     // Check cache first
@@ -19237,8 +19237,8 @@
     return measurement;
   }
 
-  /**
-   * Measure a grapheme with kerning relative to previous character
+  /**
+   * Measure a grapheme with kerning relative to previous character
    */
   function measureGraphemeWithKerning(grapheme, previousGrapheme, options, ctx) {
     // Get individual measurement
@@ -19279,9 +19279,9 @@
     };
   }
 
-  /**
-   * Get a representative character for font metrics measurement
-   * Uses canvas to test which scripts the font actually supports
+  /**
+   * Get a representative character for font metrics measurement
+   * Uses canvas to test which scripts the font actually supports
    */
   function getRepresentativeCharacter(fontFamily) {
     const context = getMeasurementContext();
@@ -19370,8 +19370,8 @@
     return 'M';
   }
 
-  /**
-   * Get font metrics for layout calculations
+  /**
+   * Get font metrics for layout calculations
    */
   function getFontMetrics(options) {
     var _metrics$fontBounding, _metrics$fontBounding2, _metrics$actualBoundi, _metrics$actualBoundi2;
@@ -19407,8 +19407,8 @@
     return result;
   }
 
-  /**
-   * Apply font styling to canvas context
+  /**
+   * Apply font styling to canvas context
    */
   function applyFontStyle(ctx, options) {
     const fontDeclaration = getFontDeclaration(options);
@@ -19425,8 +19425,8 @@
     ctx.textBaseline = 'alphabetic';
   }
 
-  /**
-   * Generate font declaration string
+  /**
+   * Generate font declaration string
    */
   function getFontDeclaration(options) {
     const {
@@ -19445,8 +19445,8 @@
     return `${fontStyle} ${fontWeight} ${fontSize}px ${normalizedFamily}`;
   }
 
-  /**
-   * LRU Cache implementation for measurements
+  /**
+   * LRU Cache implementation for measurements
    */
   class LRUCache {
     constructor() {
@@ -19508,8 +19508,8 @@
     }
   }
 
-  /**
-   * Advanced measurement cache with font-aware keys
+  /**
+   * Advanced measurement cache with font-aware keys
    */
   class MeasurementCache {
     constructor() {
@@ -19536,8 +19536,8 @@
     }
   }
 
-  /**
-   * Kerning cache for character pairs
+  /**
+   * Kerning cache for character pairs
    */
   class KerningCache {
     constructor() {
@@ -19565,8 +19565,8 @@
     }
   }
 
-  /**
-   * Font metrics cache
+  /**
+   * Font metrics cache
    */
   class FontMetricsCache {
     constructor() {
@@ -19601,8 +19601,8 @@
     });
   }
 
-  /**
-   * Clear all measurement caches
+  /**
+   * Clear all measurement caches
    */
   function clearAllCaches() {
     measurementCache.clear();
@@ -19610,9 +19610,9 @@
     fontMetricsCache.clear();
   }
 
-  /**
-   * Detect if a font lacks English glyph support
-   * These fonts should use browser-native measurement instead of Fabric's character-by-character measurement
+  /**
+   * Detect if a font lacks English glyph support
+   * These fonts should use browser-native measurement instead of Fabric's character-by-character measurement
    */
   function fontLacksEnglishGlyphs(fontFamily) {
     if (typeof document === 'undefined') return false;
@@ -19656,8 +19656,8 @@
   // Cache for font glyph detection results
   const fontGlyphCache = new Map();
 
-  /**
-   * Cached version of font glyph detection
+  /**
+   * Cached version of font glyph detection
    */
   function fontLacksEnglishGlyphsCached(fontFamily) {
     if (fontGlyphCache.has(fontFamily)) {
@@ -19668,17 +19668,17 @@
     return result;
   }
 
-  /**
-   * Unicode and Internationalization Support
-   * 
-   * Enhanced Unicode handling for complex scripts, RTL/LTR text,
-   * and grapheme cluster boundary detection.
+  /**
+   * Unicode and Internationalization Support
+   * 
+   * Enhanced Unicode handling for complex scripts, RTL/LTR text,
+   * and grapheme cluster boundary detection.
    */
 
 
-  /**
-   * Enhanced grapheme segmentation using Intl.Segmenter when available
-   * with fallback to existing graphemeSplit implementation
+  /**
+   * Enhanced grapheme segmentation using Intl.Segmenter when available
+   * with fallback to existing graphemeSplit implementation
    */
   function segmentGraphemes(text) {
     // Use native Intl.Segmenter if available
@@ -19698,15 +19698,15 @@
     return graphemeSplit(text);
   }
 
-  /**
-   * Ellipsis Text Truncation System
-   * 
-   * Implements text truncation with ellipsis when content exceeds bounds,
-   * using binary search for optimal truncation points.
+  /**
+   * Ellipsis Text Truncation System
+   * 
+   * Implements text truncation with ellipsis when content exceeds bounds,
+   * using binary search for optimal truncation points.
    */
 
-  /**
-   * Apply ellipsis truncation to text based on width/height constraints
+  /**
+   * Apply ellipsis truncation to text based on width/height constraints
    */
   function applyEllipsis(text, options) {
     const {
@@ -19776,8 +19776,8 @@
     };
   }
 
-  /**
-   * Truncate text based on width constraint using binary search
+  /**
+   * Truncate text based on width constraint using binary search
    */
   function truncateByWidth(text, maxWidth, ellipsisChar, ellipsisWidth, measureFn) {
     const graphemes = segmentGraphemes(text);
@@ -19827,8 +19827,8 @@
     };
   }
 
-  /**
-   * Truncate text based on height constraint
+  /**
+   * Truncate text based on height constraint
    */
   function truncateByHeight(text, maxHeight, ellipsisChar, measureFn) {
     var _measureFn;
@@ -19876,19 +19876,19 @@
     return truncateByWidth(lines[0], firstLineWidth, ellipsisChar, 0, measureFn);
   }
 
-  /**
-   * Core Text Layout Engine
-   * 
-   * Implements Konva-compatible text layout with support for:
-   * - Multiple wrap modes (word/char/none)
-   * - Ellipsis truncation
-   * - Justify alignment with proper space distribution
-   * - RTL/LTR text direction
-   * - Advanced grapheme handling
+  /**
+   * Core Text Layout Engine
+   * 
+   * Implements Konva-compatible text layout with support for:
+   * - Multiple wrap modes (word/char/none)
+   * - Ellipsis truncation
+   * - Justify alignment with proper space distribution
+   * - RTL/LTR text direction
+   * - Advanced grapheme handling
    */
 
-  /**
-   * Main text layout function - converts text and options into positioned layout
+  /**
+   * Main text layout function - converts text and options into positioned layout
    */
   function layoutText(options) {
     var _ellipsisResult;
@@ -20007,8 +20007,8 @@
     };
   }
 
-  /**
-   * Layout a single paragraph with wrapping
+  /**
+   * Layout a single paragraph with wrapping
    */
   function layoutParagraph(text, options) {
     const {
@@ -20043,8 +20043,8 @@
     return layoutLines;
   }
 
-  /**
-   * Layout a single line of text (no wrapping)
+  /**
+   * Layout a single line of text (no wrapping)
    */
   function layoutSingleLine(text, options) {
     let textOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -20114,8 +20114,8 @@
     };
   }
 
-  /**
-   * Word-based wrapping algorithm
+  /**
+   * Word-based wrapping algorithm
    */
   function wrapByWords(text, maxWidth, options) {
     const lines = [];
@@ -20148,8 +20148,8 @@
     return lines.length > 0 ? lines : [''];
   }
 
-  /**
-   * Character-based wrapping algorithm  
+  /**
+   * Character-based wrapping algorithm  
    */
   function wrapByCharacters(text, maxWidth, options) {
     const lines = [];
@@ -20171,8 +20171,8 @@
     return lines.length > 0 ? lines : [''];
   }
 
-  /**
-   * Apply text alignment to lines
+  /**
+   * Apply text alignment to lines
    */
   function applyAlignment(lines, align, containerWidth, options) {
     return lines.map(line => {
@@ -20206,8 +20206,8 @@
     });
   }
 
-  /**
-   * Apply justify alignment by expanding spaces
+  /**
+   * Apply justify alignment by expanding spaces
    */
   function applyJustification(line, containerWidth, options) {
     const spaces = line.graphemes.filter(g => /\s/.test(g)).length;
@@ -20230,8 +20230,8 @@
     return line;
   }
 
-  /**
-   * Calculate vertical alignment offset
+  /**
+   * Calculate vertical alignment offset
    */
   function calculateVerticalOffset(contentHeight, containerHeight, align) {
     switch (align) {
@@ -20245,8 +20245,8 @@
     }
   }
 
-  /**
-   * Handle height overflow with ellipsis
+  /**
+   * Handle height overflow with ellipsis
    */
   function handleHeightOverflow(existingLines, overflowLine, remainingHeight, options) {
     // If ellipsis is enabled, try to fit part of the overflow line
@@ -20275,8 +20275,8 @@
     };
   }
 
-  /**
-   * Create empty line for empty paragraphs
+  /**
+   * Create empty line for empty paragraphs
    */
   function createEmptyLine(options) {
     const height = options.fontSize * options.lineHeight;
@@ -20292,8 +20292,8 @@
     };
   }
 
-  /**
-   * Measure width of a line of text
+  /**
+   * Measure width of a line of text
    */
   function measureLineWidth(text, options) {
     const graphemes = segmentGraphemes(text);
@@ -20310,8 +20310,8 @@
     return width;
   }
 
-  /**
-   * Convert layout options to measurement options
+  /**
+   * Convert layout options to measurement options
    */
   function createMeasurementOptions(options) {
     return {
@@ -20554,15 +20554,15 @@
     }
   }
 
-  /**
-   * Browser Line Break Extraction
-   * 
-   * Captures exact line breaks as rendered by the browser to ensure
-   * pixel-perfect consistency between DOM editing and canvas rendering.
+  /**
+   * Browser Line Break Extraction
+   *
+   * Captures exact line breaks as rendered by the browser to ensure
+   * pixel-perfect consistency between DOM editing and canvas rendering.
    */
 
-  /**
-   * Segment text into graphemes safely using Intl.Segmenter or fallback
+  /**
+   * Segment text into graphemes safely using Intl.Segmenter or fallback
    */
   function segmentIntoGraphemes(text) {
     if (typeof Intl !== 'undefined' && Intl.Segmenter) {
@@ -20576,9 +20576,9 @@
     return Array.from(text);
   }
 
-  /**
-   * Extract line break information from a textarea by creating a mirror element
-   * with identical computed styles and measuring grapheme positions.
+  /**
+   * Extract line break information from a textarea by creating a mirror element
+   * with identical computed styles and measuring grapheme positions.
    */
   function extractLinesFromDOM(textarea) {
     const text = textarea.value;
@@ -20586,7 +20586,8 @@
       return {
         lines: [],
         totalWidth: 0,
-        totalHeight: 0
+        totalHeight: 0,
+        width: 0
       };
     }
 
@@ -20615,6 +20616,8 @@
     mirror.style.overflow = 'hidden';
     mirror.style.resize = 'none';
     container.appendChild(mirror);
+    // capture the width the browser is using for layout
+    const width = mirror.clientWidth;
     try {
       // Segment text into graphemes
       const graphemes = segmentIntoGraphemes(text);
@@ -20665,7 +20668,8 @@
       return {
         lines,
         totalWidth,
-        totalHeight
+        totalHeight,
+        width
       };
     } finally {
       // Clean up mirror element
@@ -20673,16 +20677,16 @@
     }
   }
 
-  /**
-   * Create a hash of layout-affecting properties to detect when browser lines are still valid
+  /**
+   * Create a hash of layout-affecting properties to detect when browser lines are still valid
    */
   function createLayoutHash(target) {
     const properties = [target.text, target.width, target.height, target.fontFamily, target.fontSize, target.fontWeight, target.fontStyle, target.lineHeight, target.charSpacing, target.textAlign, target.direction];
     return properties.map(p => String(p)).join('|');
   }
 
-  /**
-   * Check if stored browser lines are still valid for the current target state
+  /**
+   * Check if stored browser lines are still valid for the current target state
    */
   function areBrowserLinesValid(target, storedHash) {
     if (!storedHash || !target.__lastBrowserLines) {
@@ -20691,31 +20695,37 @@
     const currentHash = createLayoutHash(target);
     return currentHash === storedHash;
   }
-
-  /**
-   * Store browser lines on a target object with validity hash
+  /**
+   * Store browser lines on a target object with validity hash
    */
-  function storeBrowserLines(target, lines, layoutHash) {
+  function storeBrowserLines(target, lines, width, layoutHash) {
     target.__lastBrowserLines = lines;
+    target.__lastBrowserLinesWidth = width;
     target.__lastBrowserLinesHash = createLayoutHash(target);
   }
 
-  /**
-   * Clear stored browser lines from a target object
+  /**
+   * Clear stored browser lines from a target object
    */
   function clearBrowserLines(target) {
     delete target.__lastBrowserLines;
     delete target.__lastBrowserLinesHash;
+    delete target.__lastBrowserLinesWidth;
   }
 
-  /**
-   * Get stored browser lines if they're still valid
+  /**
+   * Get stored browser lines if they're still valid
    */
   function getBrowserLines(target) {
     const lines = target.__lastBrowserLines;
     const hash = target.__lastBrowserLinesHash;
     if (lines && areBrowserLinesValid(target, hash)) {
-      return lines;
+      return {
+        lines,
+        totalWidth: 0,
+        totalHeight: 0,
+        width: target.__lastBrowserLinesWidth
+      };
     }
     return null;
   }
@@ -20796,10 +20806,18 @@
      * Uses browser lines when available for pixel-perfect consistency.
      */
     _splitText() {
-      // Check if we have valid browser lines and should use them
-      const browserLines = getBrowserLines(this);
-      if (browserLines && this.useOverlayEditing) {
-        return this._splitTextFromBrowserLines(browserLines);
+      // For justify text with overlay editing, always use normal fabric wrapping
+      if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+        console.log('🧹 JUSTIFY OVERLAY: Using fabric wrapping');
+        this.__lastBrowserLines = null;
+        this.__lastBrowserLinesHash = null;
+      } else {
+        // Check if we have valid browser lines for non-justify text
+        const browserLinesInfo = getBrowserLines(this);
+        if (browserLinesInfo && this.useOverlayEditing) {
+          this._browserWrappingWidth = browserLinesInfo.width;
+          return this._splitTextFromBrowserLines(browserLinesInfo.lines);
+        }
       }
       const newLines = this._splitTextIntoLines(this.text);
       this.textLines = newLines.lines;
@@ -20900,6 +20918,11 @@
     enlargeSpaces() {
       let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
       const isRtl = this.direction === 'rtl';
+      // use browser wrapping width if available
+      const justificationWidth = this._browserWrappingWidth || this.width;
+      if (this._browserWrappingWidth) {
+        this._browserWrappingWidth = undefined;
+      }
       for (let i = 0, len = this._textLines.length; i < len; i++) {
         if (!this.textAlign.includes('justify') || i === len - 1 || this.isEndOfWrapping(i)) {
           continue;
@@ -20907,11 +20930,11 @@
         accumulatedSpace = 0;
         line = this._textLines[i];
         currentLineWidth = this.getLineWidth(i);
-        if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
+        if (currentLineWidth < justificationWidth && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
           numberOfSpaces = spaces.length;
-          diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
+          diffSpace = (justificationWidth - currentLineWidth) / numberOfSpaces;
           console.log(`🔧 EnlargeSpaces Line ${i}:`);
-          console.log(`   Current width: ${currentLineWidth}, Target: ${this.width}`);
+          console.log(`   Current width: ${currentLineWidth}, Target: ${justificationWidth}`);
           console.log(`   Spaces: ${numberOfSpaces}, diffSpace: ${diffSpace.toFixed(2)}`);
           if (isRtl) {
             for (let j = 0; j < line.length; j++) {
@@ -22842,8 +22865,8 @@
       // We don't need to save/restore them here as it would conflict with IText's restoration
     }
 
-    /**
-     * Get the container element for the overlay (parent of upperCanvasEl)
+    /**
+     * Get the container element for the overlay (parent of upperCanvasEl)
      */
     getCanvasContainer() {
       const upperCanvas = this.canvas.upperCanvasEl;
@@ -22857,8 +22880,8 @@
       return container;
     }
 
-    /**
-     * Create the overlay DOM structure
+    /**
+     * Create the overlay DOM structure
      */
     createOverlayDOM() {
       // Host div for positioning and overflow control
@@ -22913,8 +22936,8 @@
       document.body.appendChild(this.hostDiv);
     }
 
-    /**
-     * Attach all event listeners
+    /**
+     * Attach all event listeners
      */
     attachEventListeners() {
       // Textarea events
@@ -22934,8 +22957,8 @@
       this.setupViewportChangeDetection();
     }
 
-    /**
-     * Remove all event listeners
+    /**
+     * Remove all event listeners
      */
     removeEventListeners() {
       this.textarea.removeEventListener('input', this.boundHandlers.onInput);
@@ -22952,16 +22975,16 @@
       this.restoreViewportChangeDetection();
     }
 
-    /**
-     * Simple method to refresh positioning when canvas changes
+    /**
+     * Simple method to refresh positioning when canvas changes
      */
     updatePosition() {
       this.applyOverlayStyle();
     }
 
-    /**
-     * Update the Fabric object bounds to match current textarea size
-     * This ensures Fabric.js selection controls follow the growing textbox
+    /**
+     * Update the Fabric object bounds to match current textarea size
+     * This ensures Fabric.js selection controls follow the growing textbox
      */
     updateObjectBounds() {
       if (this.isDestroyed) return;
@@ -22995,15 +23018,15 @@
       }
     }
 
-    /**
-     * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
+    /**
+     * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
      */
     letterSpacingPx(charSpacing, fontSize) {
       return charSpacing / 1000 * fontSize;
     }
 
-    /**
-     * Detect text direction using first strong directional character
+    /**
+     * Detect text direction using first strong directional character
      */
     firstStrongDir(text) {
       // Hebrew: \u0590-\u05FF, Arabic: \u0600-\u06FF, \u0750-\u077F, \uFB50-\uFDFF, \uFE70-\uFEFF
@@ -23042,10 +23065,10 @@
       const top = canvasRect.top + scrollY + screenPoint.y;
 
       // 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.
+      // **THE FIX:** Use the same width calculation as measureLinesWithBrowser for consistency
       const objectBounds = target.getBoundingRect();
-      const width = Math.round(objectBounds.width * zoom);
+      const scaleX = target.scaleX || 1;
+      const width = Math.round((target.width * scaleX + padding * 2) * zoom);
       const height = Math.round(objectBounds.height * zoom);
 
       // 5. Apply styles to host DIV - absolute positioning like rtl-test.html
@@ -23067,7 +23090,6 @@
       // 6. Style the textarea - match Fabric's exact rendering with padding
       const baseFontSize = (_target$fontSize = target.fontSize) !== null && _target$fontSize !== void 0 ? _target$fontSize : 16;
       // Use scaleX for font scaling to match Fabric text scaling exactly
-      const scaleX = target.scaleX || 1;
       const finalFontSize = baseFontSize * scaleX * zoom;
       const fabricLineHeight = target.lineHeight || 1.16;
       // **THE FIX:** Use 'border-box' so the width property includes padding.
@@ -23129,7 +23151,7 @@
               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 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');
@@ -23240,8 +23262,8 @@
       // Initial bounds are set correctly by Fabric.js - don't force update here
     }
 
-    /**
-     * Debug method to compare textarea and canvas object bounding boxes
+    /**
+     * Debug method to compare textarea and canvas object bounding boxes
      */
     debugBoundingBoxComparison() {
       const target = this.target;
@@ -23311,8 +23333,8 @@
       console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     }
 
-    /**
-     * Debug method to compare text wrapping between textarea and Fabric text object
+    /**
+     * Debug method to compare text wrapping between textarea and Fabric text object
      */
     debugTextWrapping() {
       const target = this.target;
@@ -23397,8 +23419,8 @@
       console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
     }
 
-    /**
-     * Focus the textarea and position cursor at end
+    /**
+     * Focus the textarea and position cursor at end
      */
     focusTextarea() {
       // For overlay editing, we want to keep the object in "selection mode" not "editing mode"
@@ -23438,8 +23460,8 @@
       this.canvas.requestRenderAll();
     }
 
-    /**
-     * Refresh overlay positioning and styling
+    /**
+     * Refresh overlay positioning and styling
      */
     refresh() {
       if (this.isDestroyed) return;
@@ -23447,32 +23469,34 @@
       // Don't update object bounds on every refresh - only when textarea actually resizes
     }
 
-    /**
-     * Destroy the overlay editor
+    /**
+     * Destroy the overlay editor
      */
     destroy() {
+      var _this$target$textAlig;
       let commit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       if (this.isDestroyed) return;
       this.isDestroyed = true;
       this.removeEventListeners();
 
-      // Restore target visibility before handling commit/cancel
-      if (this.target.__overlayEditor === this) {
-        this.target.__overlayEditor = undefined;
-
-        // Restore original opacity
-        if (this.target.__overlayOriginalOpacity !== undefined) {
-          this.target.opacity = this.target.__overlayOriginalOpacity;
-          delete this.target.__overlayOriginalOpacity;
+      // EXTRACT DOM DATA BEFORE REMOVING DOM for justify text preservation
+      let extractedOverlayData = null;
+      if (commit && (_this$target$textAlig = this.target.textAlign) !== null && _this$target$textAlig !== void 0 && _this$target$textAlig.includes('justify')) {
+        try {
+          // Store the DOM structure before destruction
+          const result = extractLinesFromDOM(this.textarea);
+          extractedOverlayData = result.lines;
+          console.log('🔧 DESTROY: Extracted overlay lines before DOM removal');
+        } catch (error) {
+          console.warn('Failed to extract overlay lines before destruction:', error);
         }
       }
 
-      // Remove DOM first
-      if (this.hostDiv.parentNode) {
-        this.hostDiv.parentNode.removeChild(this.hostDiv);
+      // Restore original opacity but keep overlayEditor reference for commit
+      if (this.target.__overlayOriginalOpacity !== undefined) {
+        this.target.opacity = this.target.__overlayOriginalOpacity;
+        delete this.target.__overlayOriginalOpacity;
       }
-
-      // Handle commit/cancel after restoring visibility
       if (commit && !this.isComposing) {
         const finalText = this.textarea.value;
 
@@ -23493,12 +23517,26 @@
           console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
         }
         if (this.onCommit) {
+          // Store extracted overlay data on target for commitOverlayEdit to use
+          if (extractedOverlayData) {
+            this.target._extractedOverlayLines = extractedOverlayData;
+          }
           this.onCommit(finalText);
         }
       } else if (!commit && this.onCancel) {
         this.onCancel();
       }
 
+      // Clear overlay editor reference AFTER commit/cancel handlers
+      if (this.target.__overlayEditor === this) {
+        this.target.__overlayEditor = undefined;
+      }
+
+      // Remove DOM after commit/cancel handlers
+      if (this.hostDiv.parentNode) {
+        this.hostDiv.parentNode.removeChild(this.hostDiv);
+      }
+
       // Note: Don't restore object cursors since IText manages all cursors in _restoreEditingProps
       // Let the IText editing system handle proper restoration of all cursor properties
 
@@ -23513,6 +23551,9 @@
       // Request canvas re-render
       this.canvas.requestRenderAll();
     }
+    get textareaElement() {
+      return this.textarea;
+    }
 
     // Event handlers
     handleInput() {
@@ -23616,8 +23657,8 @@
       }
     }
 
-    /**
-     * Setup detection for viewport changes (zoom/pan)
+    /**
+     * Setup detection for viewport changes (zoom/pan)
      */
     setupViewportChangeDetection() {
       // Store original methods
@@ -23646,8 +23687,8 @@
       };
     }
 
-    /**
-     * Restore original viewport methods
+    /**
+     * Restore original viewport methods
      */
     restoreViewportChangeDetection() {
       if (this.canvas.__originalSetZoom) {
@@ -23662,8 +23703,8 @@
     }
   }
 
-  /**
-   * Enter overlay text editing mode for a text object
+  /**
+   * Enter overlay text editing mode for a text object
    */
   function enterTextOverlayEdit(canvas, target, options) {
     // If already in overlay editing, destroy existing editor first
@@ -23687,35 +23728,35 @@
     return editor;
   }
 
-  /**
-   *  extend this regex to support non english languages
-   *
-   *  - ` `      Matches a SPACE character (char code 32).
-   *  - `\n`     Matches a LINE FEED character (char code 10).
-   *  - `.`     Matches a "." character (char code 46).
-   *  - `,`      Matches a "," character (char code 44).
-   *  - `;`      Matches a ";" character (char code 59).
-   *  - `!`      Matches a "!" character (char code 33).
-   *  - `\?`     Matches a "?" character (char code 63).
-   *  - `\-`     Matches a "-" character (char code 45).
+  /**
+   *  extend this regex to support non english languages
+   *
+   *  - ` `      Matches a SPACE character (char code 32).
+   *  - `\n`     Matches a LINE FEED character (char code 10).
+   *  - `.`     Matches a "." character (char code 46).
+   *  - `,`      Matches a "," character (char code 44).
+   *  - `;`      Matches a ";" character (char code 59).
+   *  - `!`      Matches a "!" character (char code 33).
+   *  - `\?`     Matches a "?" character (char code 63).
+   *  - `\-`     Matches a "-" character (char code 45).
    */
   // eslint-disable-next-line no-useless-escape
   const reNonWord = /[ \n\.,;!\?\-]/;
   class ITextBehavior extends FabricText {
     constructor() {
       super(...arguments);
-      /**
-       * Helps determining when the text is in composition, so that the cursor
-       * rendering is altered.
+      /**
+       * Helps determining when the text is in composition, so that the cursor
+       * rendering is altered.
        */
       _defineProperty(this, "_currentCursorOpacity", 1);
     }
-    /**
-     * Keeps track if the IText object was selected before the actual click.
-     * This because we want to delay enter editing by a click.
+    /**
+     * Keeps track if the IText object was selected before the actual click.
+     * This because we want to delay enter editing by a click.
      */
-    /**
-     * Initializes all the interactive behavior of IText
+    /**
+     * Initializes all the interactive behavior of IText
      */
     initBehavior() {
       this._tick = this._tick.bind(this);
@@ -23728,8 +23769,8 @@
       return super.onDeselect(options);
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _animateCursor(_ref) {
       let {
@@ -23754,8 +23795,8 @@
       });
     }
 
-    /**
-     * changes the cursor from visible to invisible
+    /**
+     * changes the cursor from visible to invisible
      */
     _tick(delay) {
       this._currentTickState = this._animateCursor({
@@ -23766,8 +23807,8 @@
       });
     }
 
-    /**
-     * Changes the cursor from invisible to visible
+    /**
+     * Changes the cursor from invisible to visible
      */
     _onTickComplete() {
       var _this$_currentTickCom;
@@ -23779,16 +23820,16 @@
       });
     }
 
-    /**
-     * Initializes delayed cursor
+    /**
+     * Initializes delayed cursor
      */
     initDelayedCursor(restart) {
       this.abortCursorAnimation();
       this._tick(restart ? 0 : this.cursorDelay);
     }
 
-    /**
-     * Aborts cursor animation, clears all timeouts and clear textarea context if necessary
+    /**
+     * Aborts cursor animation, clears all timeouts and clear textarea context if necessary
      */
     abortCursorAnimation() {
       let shouldClear = false;
@@ -23806,9 +23847,9 @@
       }
     }
 
-    /**
-     * Restart tue cursor animation if either is in complete state ( between animations )
-     * or if it never started before
+    /**
+     * Restart tue cursor animation if either is in complete state ( between animations )
+     * or if it never started before
      */
     restartCursorIfNeeded() {
       if ([this._currentTickState, this._currentTickCompleteState].some(cursorAnimation => !cursorAnimation || cursorAnimation.isDone())) {
@@ -23816,8 +23857,8 @@
       }
     }
 
-    /**
-     * Selects entire text
+    /**
+     * Selects entire text
      */
     selectAll() {
       this.selectionStart = 0;
@@ -23827,26 +23868,26 @@
       return this;
     }
 
-    /**
-     * Selects entire text and updates the visual state
+    /**
+     * Selects entire text and updates the visual state
      */
     cmdAll() {
       this.selectAll();
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Returns selected text
-     * @return {String}
+    /**
+     * Returns selected text
+     * @return {String}
      */
     getSelectedText() {
       return this._text.slice(this.selectionStart, this.selectionEnd).join('');
     }
 
-    /**
-     * Find new selection index representing start of current word according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing start of current word according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findWordBoundaryLeft(startFrom) {
       let offset = 0,
@@ -23866,10 +23907,10 @@
       return startFrom - offset;
     }
 
-    /**
-     * Find new selection index representing end of current word according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing end of current word according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findWordBoundaryRight(startFrom) {
       let offset = 0,
@@ -23889,10 +23930,10 @@
       return startFrom + offset;
     }
 
-    /**
-     * Find new selection index representing start of current line according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing start of current line according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findLineBoundaryLeft(startFrom) {
       let offset = 0,
@@ -23904,10 +23945,10 @@
       return startFrom - offset;
     }
 
-    /**
-     * Find new selection index representing end of current line according to current selection index
-     * @param {Number} startFrom Current selection index
-     * @return {Number} New selection index
+    /**
+     * Find new selection index representing end of current line according to current selection index
+     * @param {Number} startFrom Current selection index
+     * @return {Number} New selection index
      */
     findLineBoundaryRight(startFrom) {
       let offset = 0,
@@ -23919,11 +23960,11 @@
       return startFrom + offset;
     }
 
-    /**
-     * Finds index corresponding to beginning or end of a word
-     * @param {Number} selectionStart Index of a character
-     * @param {Number} direction 1 or -1
-     * @return {Number} Index of the beginning or end of a word
+    /**
+     * Finds index corresponding to beginning or end of a word
+     * @param {Number} selectionStart Index of a character
+     * @param {Number} direction 1 or -1
+     * @return {Number} Index of the beginning or end of a word
      */
     searchWordBoundary(selectionStart, direction) {
       const text = this._text;
@@ -23941,9 +23982,9 @@
       return index;
     }
 
-    /**
-     * Selects the word that contains the char at index selectionStart
-     * @param {Number} selectionStart Index of a character
+    /**
+     * Selects the word that contains the char at index selectionStart
+     * @param {Number} selectionStart Index of a character
      */
     selectWord(selectionStart) {
       selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : this.selectionStart;
@@ -23959,9 +24000,9 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Selects the line that contains selectionStart
-     * @param {Number} selectionStart Index of a character
+    /**
+     * Selects the line that contains selectionStart
+     * @param {Number} selectionStart Index of a character
      */
     selectLine(selectionStart) {
       selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : this.selectionStart;
@@ -23973,8 +24014,8 @@
       this._updateTextarea();
     }
 
-    /**
-     * Enters editing state
+    /**
+     * Enters editing state
      */
     enterEditing(e) {
       if (this.isEditing || !this.editable) {
@@ -23994,8 +24035,8 @@
       }
     }
 
-    /**
-     * runs the actual logic that enter from editing state, see {@link enterEditing}
+    /**
+     * runs the actual logic that enter from editing state, see {@link enterEditing}
      */
     enterEditingImpl() {
       if (this.canvas) {
@@ -24006,6 +24047,18 @@
 
       // Check if using overlay editing
       if (this.useOverlayEditing) {
+        // For justify text, backup the current working state before overlay editing
+        if (this.textAlign.includes('justify')) {
+          console.log('💾 BACKUP: Saving pre-overlay justify state');
+          this._originalText = this.text; // Store original text to detect changes
+          this._preOverlayJustifyState = {
+            __charBounds: JSON.parse(JSON.stringify(this.__charBounds || [])),
+            __lineHeights: [...(this.__lineHeights || [])],
+            __lineWidths: [...(this.__lineWidths || [])],
+            textLines: [...(this.textLines || [])],
+            _textLines: (this._textLines || []).map(line => [...line])
+          };
+        }
         this.enterOverlayEditing();
       } else {
         this.initHiddenTextarea();
@@ -24019,8 +24072,8 @@
       }
     }
 
-    /**
-     * Enter overlay editing mode using DOM textarea overlay
+    /**
+     * Enter overlay editing mode using DOM textarea overlay
      */
     enterOverlayEditing() {
       this._saveEditingProps();
@@ -24041,33 +24094,85 @@
       });
     }
 
-    /**
-     * Commit overlay editing changes
+    /**
+     * Commit overlay editing changes
      */
     commitOverlayEdit(text) {
       const overlayEditor = this.__overlayEditor;
-      if (overlayEditor) {
-        // Extract browser lines for pixel-perfect rendering
+
+      // Update text first so browser line cache uses the new content
+      this.text = text;
+
+      // For justify text, restore pre-overlay state only if text didn't change
+      if (this.textAlign.includes('justify')) {
+        const textChanged = this._originalText !== text;
+        console.log('🔄 JUSTIFY CHECK: Text changed:', textChanged);
+
+        // Only restore backup state if text didn't change
+        if (!textChanged) {
+          const backupState = this._preOverlayJustifyState;
+          if (backupState) {
+            var _this$canvas;
+            console.log('📦 RESTORE: Text unchanged, restoring pre-overlay state');
+            // Restore the working character bounds and measurements (but keep current text)
+            this.__charBounds = JSON.parse(JSON.stringify(backupState.__charBounds));
+            this.__lineHeights = [...backupState.__lineHeights];
+            this.__lineWidths = [...backupState.__lineWidths];
+            this.textLines = [...backupState.textLines];
+            this._textLines = backupState._textLines.map(line => [...line]);
+
+            // Clear the backup
+            delete this._preOverlayJustifyState;
+            delete this._originalText;
+
+            // Just request a render, don't rebuild
+            (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+            return;
+          }
+        } else {
+          console.log('🆕 REBUILD: Text changed, need to rebuild justify layout');
+          // Clean up backup since we won't use it
+          delete this._preOverlayJustifyState;
+          delete this._originalText;
+        }
+      }
+      if (overlayEditor && overlayEditor.textareaElement) {
+        // For non-justify text, extract browser lines normally
         try {
           const result = extractLinesFromDOM(overlayEditor.textareaElement);
-          storeBrowserLines(this, result.lines);
+          storeBrowserLines(this, result.lines, result.width);
         } catch (error) {
           console.warn('Failed to extract browser lines:', error);
         }
       }
 
-      // Update text content and trigger layout recalculation
-      this.text = text;
+      // Trigger layout recalculation
       this.dirty = true;
       this.initDimensions();
+
+      // For justify text, force complete reconstruction after overlay editing
+      if (this.textAlign.includes('justify') && 'enlargeSpaces' in this) {
+        setTimeout(() => {
+          var _this$canvas2;
+          console.log('🔧 FORCE REBUILD: Rebuilding justify text after overlay editing');
+          // Force complete reconstruction of character bounds
+          this.__charBounds = [];
+          this.__lineHeights = [];
+          this.__lineWidths = [];
+          // Re-run initDimensions to rebuild everything
+          this.initDimensions();
+          (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.requestRenderAll();
+        }, 20);
+      }
       this.setCoords();
       this.exitEditing();
       this.fire('changed');
       this.canvas && this.canvas.requestRenderAll();
+      console.log('🔧 DEBUG: commitOverlayEdit complete');
     }
 
-    /**
-     * Cancel overlay editing without changes
+    /**
+     * Cancel overlay editing without changes
      */
     cancelOverlayEdit() {
       // Restore original text
@@ -24075,8 +24180,8 @@
       this.exitEditing();
     }
 
-    /**
-     * called by {@link Canvas#textEditingManager}
+    /**
+     * called by {@link Canvas#textEditingManager}
      */
     updateSelectionOnMouseMove(e) {
       if (this.getActiveControl()) {
@@ -24104,8 +24209,8 @@
       }
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _setEditingProps() {
       this.hoverCursor = 'text';
@@ -24117,8 +24222,8 @@
       this.lockMovementX = this.lockMovementY = true;
     }
 
-    /**
-     * convert from textarea to grapheme indexes
+    /**
+     * convert from textarea to grapheme indexes
      */
     fromStringToGraphemeSelection(start, end, text) {
       const smallerTextStart = text.slice(0, start),
@@ -24137,8 +24242,8 @@
       };
     }
 
-    /**
-     * convert from fabric to textarea values
+    /**
+     * convert from fabric to textarea values
      */
     fromGraphemeToStringSelection(start, end, graphemes) {
       const smallerTextStart = graphemes.slice(0, start),
@@ -24157,8 +24262,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _updateTextarea() {
       console.log('🔤 _updateTextarea called with fabric text:', this.text);
@@ -24183,8 +24288,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     updateFromTextArea() {
       if (!this.hiddenTextarea) {
@@ -24204,8 +24309,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     updateTextareaPosition() {
       if (this.selectionStart === this.selectionEnd) {
@@ -24215,9 +24320,9 @@
       }
     }
 
-    /**
-     * @private
-     * @return {Object} style contains style for hiddenTextarea
+    /**
+     * @private
+     * @return {Object} style contains style for hiddenTextarea
      */
     _calcTextareaPosition() {
       if (!this.canvas) {
@@ -24264,8 +24369,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _saveEditingProps() {
       this._savedProps = {
@@ -24282,8 +24387,8 @@
       };
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _restoreEditingProps() {
       if (!this._savedProps) {
@@ -24303,9 +24408,9 @@
       delete this._savedProps;
     }
 
-    /**
-     * runs the actual logic that exits from editing state, see {@link exitEditing}
-     * But it does not fire events
+    /**
+     * runs the actual logic that exits from editing state, see {@link exitEditing}
+     * But it does not fire events
      */
     exitEditingImpl() {
       const hiddenTextarea = this.hiddenTextarea;
@@ -24326,8 +24431,8 @@
       }
     }
 
-    /**
-     * Exits from editing state and fires relevant events
+    /**
+     * Exits from editing state and fires relevant events
      */
     exitEditing() {
       const isTextChanged = this._textBeforeEdit !== this.text;
@@ -24346,8 +24451,8 @@
       return this;
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _removeExtraneousStyles() {
       for (const prop in this.styles) {
@@ -24357,10 +24462,10 @@
       }
     }
 
-    /**
-     * remove and reflow a style block from start to end.
-     * @param {Number} start linear start position for removal (included in removal)
-     * @param {Number} end linear end position for removal ( excluded from removal )
+    /**
+     * remove and reflow a style block from start to end.
+     * @param {Number} start linear start position for removal (included in removal)
+     * @param {Number} end linear end position for removal ( excluded from removal )
      */
     removeStyleFromTo(start, end) {
       const {
@@ -24413,10 +24518,10 @@
       }
     }
 
-    /**
-     * Shifts line styles up or down
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} offset Can any number?
+    /**
+     * Shifts line styles up or down
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} offset Can any number?
      */
     shiftLineStyles(lineIndex, offset) {
       const clonedStyles = Object.assign({}, this.styles);
@@ -24431,15 +24536,15 @@
       }
     }
 
-    /**
-     * Handle insertion of more consecutive style lines for when one or more
-     * newlines gets added to the text. Since current style needs to be shifted
-     * first we shift the current style of the number lines needed, then we add
-     * new lines from the last to the first.
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} charIndex Index of a char
-     * @param {Number} qty number of lines to add
-     * @param {Array} copiedStyle Array of objects styles
+    /**
+     * Handle insertion of more consecutive style lines for when one or more
+     * newlines gets added to the text. Since current style needs to be shifted
+     * first we shift the current style of the number lines needed, then we add
+     * new lines from the last to the first.
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} charIndex Index of a char
+     * @param {Number} qty number of lines to add
+     * @param {Array} copiedStyle Array of objects styles
      */
     insertNewlineStyleObject(lineIndex, charIndex, qty, copiedStyle) {
       const newLineStyles = {};
@@ -24499,12 +24604,12 @@
       this._forceClearCache = true;
     }
 
-    /**
-     * Inserts style object for a given line/char index
-     * @param {Number} lineIndex Index of a line
-     * @param {Number} charIndex Index of a char
-     * @param {Number} quantity number Style object to insert, if given
-     * @param {Array} copiedStyle array of style objects
+    /**
+     * Inserts style object for a given line/char index
+     * @param {Number} lineIndex Index of a line
+     * @param {Number} charIndex Index of a char
+     * @param {Number} quantity number Style object to insert, if given
+     * @param {Array} copiedStyle array of style objects
      */
     insertCharStyleObject(lineIndex, charIndex, quantity, copiedStyle) {
       if (!this.styles) {
@@ -24553,11 +24658,11 @@
       }
     }
 
-    /**
-     * Inserts style object(s)
-     * @param {Array} insertedText Characters at the location where style is inserted
-     * @param {Number} start cursor index for inserting style
-     * @param {Array} [copiedStyle] array of style objects to insert.
+    /**
+     * Inserts style object(s)
+     * @param {Array} insertedText Characters at the location where style is inserted
+     * @param {Number} start cursor index for inserting style
+     * @param {Array} [copiedStyle] array of style objects to insert.
      */
     insertNewStyleBlock(insertedText, start, copiedStyle) {
       const cursorLoc = this.get2DCursorLocation(start, true),
@@ -24598,12 +24703,12 @@
       }
     }
 
-    /**
-     * Removes characters from start/end
-     * start/end ar per grapheme position in _text array.
-     *
-     * @param {Number} start
-     * @param {Number} end default to start + 1
+    /**
+     * Removes characters from start/end
+     * start/end ar per grapheme position in _text array.
+     *
+     * @param {Number} start
+     * @param {Number} end default to start + 1
      */
     removeChars(start) {
       let end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : start + 1;
@@ -24616,17 +24721,17 @@
       this._removeExtraneousStyles();
     }
 
-    /**
-     * insert characters at start position, before start position.
-     * start  equal 1 it means the text get inserted between actual grapheme 0 and 1
-     * if style array is provided, it must be as the same length of text in graphemes
-     * if end is provided and is bigger than start, old text is replaced.
-     * start/end ar per grapheme position in _text array.
-     *
-     * @param {String} text text to insert
-     * @param {Array} style array of style objects
-     * @param {Number} start
-     * @param {Number} end default to start + 1
+    /**
+     * insert characters at start position, before start position.
+     * start  equal 1 it means the text get inserted between actual grapheme 0 and 1
+     * if style array is provided, it must be as the same length of text in graphemes
+     * if end is provided and is bigger than start, old text is replaced.
+     * start/end ar per grapheme position in _text array.
+     *
+     * @param {String} text text to insert
+     * @param {Array} style array of style objects
+     * @param {Number} start
+     * @param {Number} end default to start + 1
      */
     insertChars(text, style, start) {
       let end = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : start;
@@ -24643,9 +24748,9 @@
       this._removeExtraneousStyles();
     }
 
-    /**
-     * Set the selectionStart and selectionEnd according to the new position of cursor
-     * mimic the key - mouse navigation when shift is pressed.
+    /**
+     * Set the selectionStart and selectionEnd according to the new position of cursor
+     * mimic the key - mouse navigation when shift is pressed.
      */
     setSelectionStartEndWithShift(start, end, newSelection) {
       if (newSelection <= start) {
@@ -24676,36 +24781,36 @@
   }
 
   class ITextKeyBehavior extends ITextBehavior {
-    /**
-     * For functionalities on keyDown
-     * Map a special key to a function of the instance/prototype
-     * If you need different behavior for ESC or TAB or arrows, you have to change
-     * this map setting the name of a function that you build on the IText or
-     * your prototype.
-     * the map change will affect all Instances unless you need for only some text Instances
-     * in that case you have to clone this object and assign your Instance.
-     * this.keysMap = Object.assign({}, this.keysMap);
-     * The function must be in IText.prototype.myFunction And will receive event as args[0]
+    /**
+     * For functionalities on keyDown
+     * Map a special key to a function of the instance/prototype
+     * If you need different behavior for ESC or TAB or arrows, you have to change
+     * this map setting the name of a function that you build on the IText or
+     * your prototype.
+     * the map change will affect all Instances unless you need for only some text Instances
+     * in that case you have to clone this object and assign your Instance.
+     * this.keysMap = Object.assign({}, this.keysMap);
+     * The function must be in IText.prototype.myFunction And will receive event as args[0]
      */
 
-    /**
-     * For functionalities on keyUp + ctrl || cmd
+    /**
+     * For functionalities on keyUp + ctrl || cmd
      */
 
-    /**
-     * For functionalities on keyDown + ctrl || cmd
+    /**
+     * For functionalities on keyDown + ctrl || cmd
      */
 
-    /**
-     * DOM container to append the hiddenTextarea.
-     * An alternative to attaching to the document.body.
-     * Useful to reduce laggish redraw of the full document.body tree and
-     * also with modals event capturing that won't let the textarea take focus.
-     * @type HTMLElement
+    /**
+     * DOM container to append the hiddenTextarea.
+     * An alternative to attaching to the document.body.
+     * Useful to reduce laggish redraw of the full document.body tree and
+     * also with modals event capturing that won't let the textarea take focus.
+     * @type HTMLElement
      */
 
-    /**
-     * Initializes hidden textarea (needed to bring up keyboard in iOS)
+    /**
+     * Initializes hidden textarea (needed to bring up keyboard in iOS)
      */
     initHiddenTextarea() {
       const doc = this.canvas && getDocumentFromElement(this.canvas.getElement()) || getFabricDocument();
@@ -24748,17 +24853,17 @@
       this.hiddenTextarea = textarea;
     }
 
-    /**
-     * Override this method to customize cursor behavior on textbox blur
+    /**
+     * Override this method to customize cursor behavior on textbox blur
      */
     blur() {
       this.abortCursorAnimation();
     }
 
-    /**
-     * Handles keydown event
-     * only used for arrows and combination of modifier keys.
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Handles keydown event
+     * only used for arrows and combination of modifier keys.
+     * @param {KeyboardEvent} e Event object
      */
     onKeyDown(e) {
       if (!this.isEditing) {
@@ -24784,11 +24889,11 @@
       }
     }
 
-    /**
-     * Handles keyup event
-     * We handle KeyUp because ie11 and edge have difficulties copy/pasting
-     * if a copy/cut event fired, keyup is dismissed
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Handles keyup event
+     * We handle KeyUp because ie11 and edge have difficulties copy/pasting
+     * if a copy/cut event fired, keyup is dismissed
+     * @param {KeyboardEvent} e Event object
      */
     onKeyUp(e) {
       if (!this.isEditing || this._copyDone || this.inCompositionMode) {
@@ -24805,9 +24910,9 @@
       this.canvas && this.canvas.requestRenderAll();
     }
 
-    /**
-     * Handles onInput event
-     * @param {Event} e Event object
+    /**
+     * Handles onInput event
+     * @param {Event} e Event object
      */
     onInput(e) {
       const fromPaste = this.fromPaste;
@@ -24944,15 +25049,15 @@
       updateAndFire();
     }
 
-    /**
-     * Composition start
+    /**
+     * Composition start
      */
     onCompositionStart() {
       this.inCompositionMode = true;
     }
 
-    /**
-     * Composition end
+    /**
+     * Composition end
      */
     onCompositionEnd() {
       this.inCompositionMode = false;
@@ -24970,8 +25075,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * Copies selected text
+    /**
+     * Copies selected text
      */
     copy() {
       if (this.selectionStart === this.selectionEnd) {
@@ -24990,19 +25095,19 @@
       this._copyDone = true;
     }
 
-    /**
-     * Pastes text
+    /**
+     * Pastes text
      */
     paste() {
       this.fromPaste = true;
     }
 
-    /**
-     * Finds the width in pixels before the cursor on the same line
-     * @private
-     * @param {Number} lineIndex
-     * @param {Number} charIndex
-     * @return {Number} widthBeforeCursor width before cursor
+    /**
+     * Finds the width in pixels before the cursor on the same line
+     * @private
+     * @param {Number} lineIndex
+     * @param {Number} charIndex
+     * @return {Number} widthBeforeCursor width before cursor
      */
     _getWidthBeforeCursor(lineIndex, charIndex) {
       let widthBeforeCursor = this._getLineLeftOffset(lineIndex),
@@ -25014,11 +25119,11 @@
       return widthBeforeCursor;
     }
 
-    /**
-     * Gets start offset of a selection
-     * @param {KeyboardEvent} e Event object
-     * @param {Boolean} isRight
-     * @return {Number}
+    /**
+     * Gets start offset of a selection
+     * @param {KeyboardEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
      */
     getDownCursorOffset(e, isRight) {
       const selectionProp = this._getSelectionForOffset(e, isRight),
@@ -25036,12 +25141,12 @@
       return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex);
     }
 
-    /**
-     * private
-     * Helps finding if the offset should be counted from Start or End
-     * @param {KeyboardEvent} e Event object
-     * @param {Boolean} isRight
-     * @return {Number}
+    /**
+     * private
+     * Helps finding if the offset should be counted from Start or End
+     * @param {KeyboardEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
      */
     _getSelectionForOffset(e, isRight) {
       if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) {
@@ -25051,10 +25156,10 @@
       }
     }
 
-    /**
-     * @param {KeyboardEvent} e Event object
-     * @param {Boolean} isRight
-     * @return {Number}
+    /**
+     * @param {KeyboardEvent} e Event object
+     * @param {Boolean} isRight
+     * @return {Number}
      */
     getUpCursorOffset(e, isRight) {
       const selectionProp = this._getSelectionForOffset(e, isRight),
@@ -25073,9 +25178,9 @@
       return -this._textLines[lineIndex - 1].length + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset);
     }
 
-    /**
-     * for a given width it founds the matching character.
-     * @private
+    /**
+     * for a given width it founds the matching character.
+     * @private
      */
     _getIndexOnLine(lineIndex, width) {
       const line = this._textLines[lineIndex],
@@ -25105,9 +25210,9 @@
       return indexOnLine;
     }
 
-    /**
-     * Moves cursor down
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor down
+     * @param {KeyboardEvent} e Event object
      */
     moveCursorDown(e) {
       if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) {
@@ -25116,9 +25221,9 @@
       this._moveCursorUpOrDown('Down', e);
     }
 
-    /**
-     * Moves cursor up
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor up
+     * @param {KeyboardEvent} e Event object
      */
     moveCursorUp(e) {
       if (this.selectionStart === 0 && this.selectionEnd === 0) {
@@ -25127,10 +25232,10 @@
       this._moveCursorUpOrDown('Up', e);
     }
 
-    /**
-     * Moves cursor up or down, fires the events
-     * @param {String} direction 'Up' or 'Down'
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor up or down, fires the events
+     * @param {String} direction 'Up' or 'Down'
+     * @param {KeyboardEvent} e Event object
      */
     _moveCursorUpOrDown(direction, e) {
       const offset = this[`get${direction}CursorOffset`](e, this._selectionDirection === RIGHT);
@@ -25152,9 +25257,9 @@
       }
     }
 
-    /**
-     * Moves cursor with shift
-     * @param {Number} offset
+    /**
+     * Moves cursor with shift
+     * @param {Number} offset
      */
     moveCursorWithShift(offset) {
       const newSelection = this._selectionDirection === LEFT ? this.selectionStart + offset : this.selectionEnd + offset;
@@ -25162,9 +25267,9 @@
       return offset !== 0;
     }
 
-    /**
-     * Moves cursor up without shift
-     * @param {Number} offset
+    /**
+     * Moves cursor up without shift
+     * @param {Number} offset
      */
     moveCursorWithoutShift(offset) {
       if (offset < 0) {
@@ -25177,9 +25282,9 @@
       return offset !== 0;
     }
 
-    /**
-     * Moves cursor left
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor left
+     * @param {KeyboardEvent} e Event object
      */
     moveCursorLeft(e) {
       if (this.selectionStart === 0 && this.selectionEnd === 0) {
@@ -25188,11 +25293,11 @@
       this._moveCursorLeftOrRight('Left', e);
     }
 
-    /**
-     * @private
-     * @return {Boolean} true if a change happened
-     *
-     * @todo refactor not to use method name composition
+    /**
+     * @private
+     * @return {Boolean} true if a change happened
+     *
+     * @todo refactor not to use method name composition
      */
     _move(e, prop, direction) {
       let newValue;
@@ -25211,23 +25316,23 @@
       return false;
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _moveLeft(e, prop) {
       return this._move(e, prop, 'Left');
     }
 
-    /**
-     * @private
+    /**
+     * @private
      */
     _moveRight(e, prop) {
       return this._move(e, prop, 'Right');
     }
 
-    /**
-     * Moves cursor left without keeping selection
-     * @param {KeyboardEvent} e
+    /**
+     * Moves cursor left without keeping selection
+     * @param {KeyboardEvent} e
      */
     moveCursorLeftWithoutShift(e) {
       let change = true;
@@ -25242,9 +25347,9 @@
       return change;
     }
 
-    /**
-     * Moves cursor left while keeping selection
-     * @param {KeyboardEvent} e
+    /**
+     * Moves cursor left while keeping selection
+     * @param {KeyboardEvent} e
      */
     moveCursorLeftWithShift(e) {
       if (this._selectionDirection === RIGHT && this.selectionStart !== this.selectionEnd) {
@@ -25255,9 +25360,9 @@
       }
     }
 
-    /**
-     * Moves cursor right
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor right
+     * @param {KeyboardEvent} e Event object
      */
     moveCursorRight(e) {
       if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) {
@@ -25266,10 +25371,10 @@
       this._moveCursorLeftOrRight('Right', e);
     }
 
-    /**
-     * Moves cursor right or Left, fires event
-     * @param {String} direction 'Left', 'Right'
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor right or Left, fires event
+     * @param {String} direction 'Left', 'Right'
+     * @param {KeyboardEvent} e Event object
      */
     _moveCursorLeftOrRight(direction, e) {
       const actionName = `moveCursor${direction}${e.shiftKey ? 'WithShift' : 'WithoutShift'}`;
@@ -25284,9 +25389,9 @@
       }
     }
 
-    /**
-     * Moves cursor right while keeping selection
-     * @param {KeyboardEvent} e
+    /**
+     * Moves cursor right while keeping selection
+     * @param {KeyboardEvent} e
      */
     moveCursorRightWithShift(e) {
       if (this._selectionDirection === LEFT && this.selectionStart !== this.selectionEnd) {
@@ -25297,9 +25402,9 @@
       }
     }
 
-    /**
-     * Moves cursor right without keeping selection
-     * @param {KeyboardEvent} e Event object
+    /**
+     * Moves cursor right without keeping selection
+     * @param {KeyboardEvent} e Event object
      */
     moveCursorRightWithoutShift(e) {
       let changed = true;
@@ -25314,8 +25419,8 @@
     }
   }
 
-  /**
-   * `LEFT_CLICK === 0`
+  /**
+   * `LEFT_CLICK === 0`
    */
   const notALeftClick = e => !!e.button;
   class ITextClickBehavior extends ITextKeyBehavior {
@@ -25333,36 +25438,36 @@
       super.initBehavior();
     }
 
-    /**
-     * If this method returns true a mouse move operation over a text selection
-     * will not prevent the native mouse event allowing the browser to start a drag operation.
-     * shouldStartDragging can be read 'do not prevent default for mouse move event'
-     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
-     * @returns
+    /**
+     * If this method returns true a mouse move operation over a text selection
+     * will not prevent the native mouse event allowing the browser to start a drag operation.
+     * shouldStartDragging can be read 'do not prevent default for mouse move event'
+     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
+     * @returns
      */
     shouldStartDragging() {
       return this.draggableTextDelegate.isActive();
     }
 
-    /**
-     * @public override this method to control whether instance should/shouldn't become a drag source,
-     * @see also {@link DraggableTextDelegate#isActive}
-     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
-     * @returns {boolean} should handle event
+    /**
+     * @public override this method to control whether instance should/shouldn't become a drag source,
+     * @see also {@link DraggableTextDelegate#isActive}
+     * To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false
+     * @returns {boolean} should handle event
      */
     onDragStart(e) {
       return this.draggableTextDelegate.onDragStart(e);
     }
 
-    /**
-     * @public override this method to control whether instance should/shouldn't become a drop target
+    /**
+     * @public override this method to control whether instance should/shouldn't become a drop target
      */
     canDrop(e) {
       return this.draggableTextDelegate.canDrop(e);
     }
 
-    /**
-     * Default handler for double click, select a word or enter overlay editing
+    /**
+     * Default handler for double click, select a word or enter overlay editing
      */
     doubleClickHandler(options) {
       // Check if we should enter overlay editing mode
@@ -25379,8 +25484,8 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Default handler for triple click, select a line
+    /**
+     * Default handler for triple click, select a line
      */
     tripleClickHandler(options) {
       if (!this.isEditing) {
@@ -25390,13 +25495,13 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * Default event handler for the basic functionalities needed on _mouseDown
-     * can be overridden to do something different.
-     * Scope of this implementation is: find the click position, set selectionStart
-     * find selectionEnd, initialize the drawing of either cursor or selection area
-     * initializing a mousedDown on a text area will cancel fabricjs knowledge of
-     * current compositionMode. It will be set to false.
+    /**
+     * Default event handler for the basic functionalities needed on _mouseDown
+     * can be overridden to do something different.
+     * Scope of this implementation is: find the click position, set selectionStart
+     * find selectionEnd, initialize the drawing of either cursor or selection area
+     * initializing a mousedDown on a text area will cancel fabricjs knowledge of
+     * current compositionMode. It will be set to false.
      */
     _mouseDownHandler(_ref) {
       let {
@@ -25424,9 +25529,9 @@
       this.selected || (this.selected = alreadySelected || this.isEditing);
     }
 
-    /**
-     * standard handler for mouse up, overridable
-     * @private
+    /**
+     * standard handler for mouse up, overridable
+     * @private
      */
     mouseUpHandler(_ref2) {
       let {
@@ -25457,9 +25562,9 @@
       }
     }
 
-    /**
-     * Changes cursor location in a text depending on passed pointer (x/y) object
-     * @param {TPointerEvent} e Event object
+    /**
+     * Changes cursor location in a text depending on passed pointer (x/y) object
+     * @param {TPointerEvent} e Event object
      */
     setCursorByClick(e) {
       const newSelection = this.getSelectionStartFromPointer(e),
@@ -25477,10 +25582,10 @@
       }
     }
 
-    /**
-     * Returns index of a character corresponding to where an object was clicked
-     * @param {TPointerEvent} e Event object
-     * @return {Number} Index of a character
+    /**
+     * Returns index of a character corresponding to where an object was clicked
+     * @param {TPointerEvent} e Event object
+     * @return {Number} Index of a character
      */
     getSelectionStartFromPointer(e) {
       const mouseOffset = this.canvas.getScenePoint(e).transform(invertTransform(this.calcTransformMatrix())).add(new Point(-this._getLeftOffset(), -this._getTopOffset()));
@@ -25526,15 +25631,15 @@
     }
   }
 
-  /**
-   * Hit Testing and Cursor Positioning System
-   * 
-   * Maps pointer coordinates to text positions and provides cursor rectangles
-   * for interactive text editing with grapheme-aware boundaries.
+  /**
+   * Hit Testing and Cursor Positioning System
+   * 
+   * Maps pointer coordinates to text positions and provides cursor rectangles
+   * for interactive text editing with grapheme-aware boundaries.
    */
 
-  /**
-   * Hit test a point against laid out text to find insertion position
+  /**
+   * Hit test a point against laid out text to find insertion position
    */
   function hitTest(x, y, layout, options) {
     if (layout.lines.length === 0) {
@@ -25578,8 +25683,8 @@
     };
   }
 
-  /**
-   * Get cursor rectangle for a given insertion index
+  /**
+   * Get cursor rectangle for a given insertion index
    */
   function getCursorRect(insertionIndex, layout, options) {
     if (layout.lines.length === 0) {
@@ -25626,8 +25731,8 @@
 
   // Private helper functions
 
-  /**
-   * Find which line contains the given Y coordinate
+  /**
+   * Find which line contains the given Y coordinate
    */
   function findLineAtY(y, lines) {
     var _lines;
@@ -25650,8 +25755,8 @@
     };
   }
 
-  /**
-   * Find character position within a line at given X coordinate
+  /**
+   * Find character position within a line at given X coordinate
    */
   function findCharAtX(x, line, options) {
     if (line.bounds.length === 0) {
@@ -25757,8 +25862,8 @@
     };
   }
 
-  /**
-   * Calculate total insertion index from line and character indices
+  /**
+   * Calculate total insertion index from line and character indices
    */
   function calculateInsertionIndex(lineIndex, graphemeIndex, layout) {
     let insertionIndex = 0;
@@ -25777,8 +25882,8 @@
     return insertionIndex;
   }
 
-  /**
-   * Find line and grapheme position from insertion index
+  /**
+   * Find line and grapheme position from insertion index
    */
   function findPositionFromIndex(insertionIndex, layout) {
     let currentIndex = 0;
@@ -25820,8 +25925,8 @@
     };
   }
 
-  /**
-   * Calculate Y position of a line
+  /**
+   * Calculate Y position of a line
    */
   function calculateLineY(lineIndex, layout, options) {
     let y = 0;
@@ -25924,48 +26029,48 @@
 
   // @TODO this is not complete
 
-  /**
-   * @fires changed
-   * @fires selection:changed
-   * @fires editing:entered
-   * @fires editing:exited
-   * @fires dragstart
-   * @fires drag drag event firing on the drag source
-   * @fires dragend
-   * @fires copy
-   * @fires cut
-   * @fires paste
-   *
-   * #### Supported key combinations
-   * ```
-   *   Move cursor:                    left, right, up, down
-   *   Select character:               shift + left, shift + right
-   *   Select text vertically:         shift + up, shift + down
-   *   Move cursor by word:            alt + left, alt + right
-   *   Select words:                   shift + alt + left, shift + alt + right
-   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
-   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
-   *   Jump to start/end of text:      cmd + up, cmd + down
-   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
-   *   Delete character:               backspace
-   *   Delete word:                    alt + backspace
-   *   Delete line:                    cmd + backspace
-   *   Forward delete:                 delete
-   *   Copy text:                      ctrl/cmd + c
-   *   Paste text:                     ctrl/cmd + v
-   *   Cut text:                       ctrl/cmd + x
-   *   Select entire text:             ctrl/cmd + a
-   *   Quit editing                    tab or esc
-   * ```
-   *
-   * #### Supported mouse/touch combination
-   * ```
-   *   Position cursor:                click/touch
-   *   Create selection:               click/touch & drag
-   *   Create selection:               click & shift + click
-   *   Select word:                    double click
-   *   Select line:                    triple click
-   * ```
+  /**
+   * @fires changed
+   * @fires selection:changed
+   * @fires editing:entered
+   * @fires editing:exited
+   * @fires dragstart
+   * @fires drag drag event firing on the drag source
+   * @fires dragend
+   * @fires copy
+   * @fires cut
+   * @fires paste
+   *
+   * #### Supported key combinations
+   * ```
+   *   Move cursor:                    left, right, up, down
+   *   Select character:               shift + left, shift + right
+   *   Select text vertically:         shift + up, shift + down
+   *   Move cursor by word:            alt + left, alt + right
+   *   Select words:                   shift + alt + left, shift + alt + right
+   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
+   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
+   *   Jump to start/end of text:      cmd + up, cmd + down
+   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
+   *   Delete character:               backspace
+   *   Delete word:                    alt + backspace
+   *   Delete line:                    cmd + backspace
+   *   Forward delete:                 delete
+   *   Copy text:                      ctrl/cmd + c
+   *   Paste text:                     ctrl/cmd + v
+   *   Cut text:                       ctrl/cmd + x
+   *   Select entire text:             ctrl/cmd + a
+   *   Quit editing                    tab or esc
+   * ```
+   *
+   * #### Supported mouse/touch combination
+   * ```
+   *   Position cursor:                click/touch
+   *   Create selection:               click/touch & drag
+   *   Create selection:               click & shift + click
+   *   Select word:                    double click
+   *   Select line:                    triple click
+   * ```
    */
   class IText extends ITextClickBehavior {
     static getDefaults() {
@@ -25980,10 +26085,10 @@
       return type === 'itext' ? 'i-text' : type;
     }
 
-    /**
-     * Constructor
-     * @param {String} text Text string
-     * @param {Object} [options] Options object
+    /**
+     * Constructor
+     * @param {String} text Text string
+     * @param {Object} [options] Options object
      */
     constructor(text, options) {
       super(text, {
@@ -25993,11 +26098,11 @@
       this.initBehavior();
     }
 
-    /**
-     * While editing handle differently
-     * @private
-     * @param {string} key
-     * @param {*} value
+    /**
+     * While editing handle differently
+     * @private
+     * @param {string} key
+     * @param {*} value
      */
     _set(key, value) {
       if (this.isEditing && this._savedProps && key in this._savedProps) {
@@ -26012,28 +26117,28 @@
       return super._set(key, value);
     }
 
-    /**
-     * Sets selection start (left boundary of a selection)
-     * @param {Number} index Index to set selection start to
+    /**
+     * Sets selection start (left boundary of a selection)
+     * @param {Number} index Index to set selection start to
      */
     setSelectionStart(index) {
       index = Math.max(index, 0);
       this._updateAndFire('selectionStart', index);
     }
 
-    /**
-     * Sets selection end (right boundary of a selection)
-     * @param {Number} index Index to set selection end to
+    /**
+     * Sets selection end (right boundary of a selection)
+     * @param {Number} index Index to set selection end to
      */
     setSelectionEnd(index) {
       index = Math.min(index, this.text.length);
       this._updateAndFire('selectionEnd', index);
     }
 
-    /**
-     * @private
-     * @param {String} property 'selectionStart' or 'selectionEnd'
-     * @param {Number} index new position of property
+    /**
+     * @private
+     * @param {String} property 'selectionStart' or 'selectionEnd'
+     * @param {Number} index new position of property
      */
     _updateAndFire(property, index) {
       if (this[property] !== index) {
@@ -26043,9 +26148,9 @@
       this._updateTextarea();
     }
 
-    /**
-     * Fires the even of selection changed
-     * @private
+    /**
+     * Fires the even of selection changed
+     * @private
      */
     _fireSelectionChanged() {
       this.fire('selection:changed');
@@ -26054,25 +26159,25 @@
       });
     }
 
-    /**
-     * Initialize text dimensions. Render all text on given context
-     * or on a offscreen canvas to get the text width with measureText.
-     * Updates this.width and this.height with the proper values.
-     * Does not return dimensions.
-     * @private
+    /**
+     * Initialize text dimensions. Render all text on given context
+     * or on a offscreen canvas to get the text width with measureText.
+     * Updates this.width and this.height with the proper values.
+     * Does not return dimensions.
+     * @private
      */
     initDimensions() {
       this.isEditing && this.initDelayedCursor();
       super.initDimensions();
     }
 
-    /**
-     * Gets style of a current selection/cursor (at the start position)
-     * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.
-     * @param {Number} startIndex Start index to get styles at
-     * @param {Number} endIndex End index to get styles at, if not specified selectionEnd or startIndex + 1
-     * @param {Boolean} [complete] get full style or not
-     * @return {Array} styles an array with one, zero or more Style objects
+    /**
+     * Gets style of a current selection/cursor (at the start position)
+     * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.
+     * @param {Number} startIndex Start index to get styles at
+     * @param {Number} endIndex End index to get styles at, if not specified selectionEnd or startIndex + 1
+     * @param {Boolean} [complete] get full style or not
+     * @return {Array} styles an array with one, zero or more Style objects
      */
     getSelectionStyles() {
       let startIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart || 0;
@@ -26081,11 +26186,11 @@
       return super.getSelectionStyles(startIndex, endIndex, complete);
     }
 
-    /**
-     * Sets style of a current selection, if no selection exist, do not set anything.
-     * @param {Object} [styles] Styles object
-     * @param {Number} [startIndex] Start index to get styles at
-     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
+    /**
+     * Sets style of a current selection, if no selection exist, do not set anything.
+     * @param {Object} [styles] Styles object
+     * @param {Number} [startIndex] Start index to get styles at
+     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
      */
     setSelectionStyles(styles) {
       let startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.selectionStart || 0;
@@ -26093,10 +26198,10 @@
       return super.setSelectionStyles(styles, startIndex, endIndex);
     }
 
-    /**
-     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
-     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
-     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
+    /**
+     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
+     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
+     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
      */
     get2DCursorLocation() {
       let selectionStart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -26104,9 +26209,9 @@
       return super.get2DCursorLocation(selectionStart, skipWrapping);
     }
 
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     render(ctx) {
       super.render(ctx);
@@ -26116,9 +26221,9 @@
       this.renderCursorOrSelection();
     }
 
-    /**
-     * @override block cursor/selection logic while rendering the exported canvas
-     * @todo this workaround should be replaced with a more robust solution
+    /**
+     * @override block cursor/selection logic while rendering the exported canvas
+     * @todo this workaround should be replaced with a more robust solution
      */
     toCanvasElement(options) {
       const isEditing = this.isEditing;
@@ -26128,9 +26233,9 @@
       return canvas;
     }
 
-    /**
-     * Renders cursor or selection (depending on what exists)
-     * it does on the contextTop. If contextTop is not available, do nothing.
+    /**
+     * Renders cursor or selection (depending on what exists)
+     * it does on the contextTop. If contextTop is not available, do nothing.
      */
     renderCursorOrSelection() {
       if (!this.isEditing || !this.canvas) {
@@ -26186,12 +26291,12 @@
       ctx.restore();
     }
 
-    /**
-     * Finds and returns an array of clip paths that are applied to the parent
-     * group(s) of the current FabricObject instance. The object's hierarchy is
-     * traversed upwards (from the current object towards the root of the canvas),
-     * checking each parent object for the presence of a `clipPath` that is not
-     * absolutely positioned.
+    /**
+     * Finds and returns an array of clip paths that are applied to the parent
+     * group(s) of the current FabricObject instance. The object's hierarchy is
+     * traversed upwards (from the current object towards the root of the canvas),
+     * checking each parent object for the presence of a `clipPath` that is not
+     * absolutely positioned.
      */
     findAncestorsWithClipPath() {
       const clipPathAncestors = [];
@@ -26206,13 +26311,13 @@
       return clipPathAncestors;
     }
 
-    /**
-     * Returns cursor boundaries (left, top, leftOffset, topOffset)
-     * left/top are left/top of entire text box
-     * leftOffset/topOffset are offset from that left/top point of a text box
-     * @private
-     * @param {number} [index] index from start
-     * @param {boolean} [skipCaching]
+    /**
+     * Returns cursor boundaries (left, top, leftOffset, topOffset)
+     * left/top are left/top of entire text box
+     * leftOffset/topOffset are offset from that left/top point of a text box
+     * @private
+     * @param {number} [index] index from start
+     * @param {boolean} [skipCaching]
      */
     _getCursorBoundaries() {
       let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -26226,11 +26331,11 @@
       return this._getCursorBoundariesOriginal(index, skipCaching);
     }
 
-    /**
-     * Caches and returns cursor left/top offset relative to instance's center point
-     * @private
-     * @param {number} index index from start
-     * @param {boolean} [skipCaching]
+    /**
+     * Caches and returns cursor left/top offset relative to instance's center point
+     * @private
+     * @param {number} index index from start
+     * @param {boolean} [skipCaching]
      */
     _getCursorBoundariesOffsets(index, skipCaching) {
       if (skipCaching) {
@@ -26242,9 +26347,9 @@
       return this.cursorOffsetCache = this.__getCursorBoundariesOffsets(index);
     }
 
-    /**
-     * Enhanced cursor boundaries using advanced hit testing when available
-     * @private
+    /**
+     * Enhanced cursor boundaries using advanced hit testing when available
+     * @private
      */
     _getCursorBoundariesAdvanced(index) {
       if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
@@ -26260,9 +26365,9 @@
       };
     }
 
-    /**
-     * Enhanced selection start from pointer using BiDi-aware hit testing
-     * @override
+    /**
+     * Enhanced selection start from pointer using BiDi-aware hit testing
+     * @override
      */
     getSelectionStartFromPointer(e) {
       if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
@@ -26276,9 +26381,9 @@
       return Math.min(hitResult.charIndex, this._text.length);
     }
 
-    /**
-     * Original cursor boundaries implementation
-     * @private
+    /**
+     * Original cursor boundaries implementation
+     * @private
      */
     _getCursorBoundariesOriginal(index, skipCaching) {
       const left = this._getLeftOffset(),
@@ -26292,10 +26397,10 @@
       };
     }
 
-    /**
-     * Calculates cursor left/top offset relative to instance's center point
-     * @private
-     * @param {number} index index from start
+    /**
+     * Calculates cursor left/top offset relative to instance's center point
+     * @private
+     * @param {number} index index from start
      */
     __getCursorBoundariesOffsets(index) {
       let topOffset = 0,
@@ -26329,29 +26434,29 @@
       return boundaries;
     }
 
-    /**
-     * Renders cursor on context Top, outside the animation cycle, on request
-     * Used for the drag/drop effect.
-     * If contextTop is not available, do nothing.
+    /**
+     * Renders cursor on context Top, outside the animation cycle, on request
+     * Used for the drag/drop effect.
+     * If contextTop is not available, do nothing.
      */
     renderCursorAt(selectionStart) {
       this._renderCursor(this.canvas.contextTop, this._getCursorBoundaries(selectionStart, true), selectionStart);
     }
 
-    /**
-     * Renders cursor
-     * @param {Object} boundaries
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders cursor
+     * @param {Object} boundaries
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     renderCursor(ctx, boundaries) {
       this._renderCursor(ctx, boundaries, this.selectionStart);
     }
 
-    /**
-     * Return the data needed to render the cursor for given selection start
-     * The left,top are relative to the object, while width and height are prescaled
-     * to look think with canvas zoom and object scaling,
-     * so they depend on canvas and object scaling
+    /**
+     * Return the data needed to render the cursor for given selection start
+     * The left,top are relative to the object, while width and height are prescaled
+     * to look think with canvas zoom and object scaling,
+     * so they depend on canvas and object scaling
      */
     getCursorRenderingData() {
       let selectionStart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
@@ -26374,9 +26479,9 @@
       };
     }
 
-    /**
-     * Render the cursor at the given selectionStart.
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Render the cursor at the given selectionStart.
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     _renderCursor(ctx, boundaries, selectionStart) {
       const {
@@ -26392,10 +26497,10 @@
       ctx.fillRect(left, top, width, height);
     }
 
-    /**
-     * Renders text selection
-     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders text selection
+     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     renderSelection(ctx, boundaries) {
       const selection = {
@@ -26405,8 +26510,8 @@
       this._renderSelection(ctx, selection, boundaries);
     }
 
-    /**
-     * Renders drag start text selection
+    /**
+     * Renders drag start text selection
      */
     renderDragSourceEffect() {
       const dragStartSelection = this.draggableTextDelegate.getDragStartSelection();
@@ -26417,12 +26522,12 @@
       this.renderCursorAt(dragSelection);
     }
 
-    /**
-     * Renders text selection
-     * @private
-     * @param {{ selectionStart: number, selectionEnd: number }} selection
-     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
-     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+    /**
+     * Renders text selection
+     * @private
+     * @param {{ selectionStart: number, selectionEnd: number }} selection
+     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
      */
     _renderSelection(ctx, selection, boundaries) {
       const selectionStart = selection.selectionStart,
@@ -26484,34 +26589,34 @@
       }
     }
 
-    /**
-     * High level function to know the height of the cursor.
-     * the currentChar is the one that precedes the cursor
-     * Returns fontSize of char at the current cursor
-     * Unused from the library, is for the end user
-     * @return {Number} Character font size
+    /**
+     * High level function to know the height of the cursor.
+     * the currentChar is the one that precedes the cursor
+     * Returns fontSize of char at the current cursor
+     * Unused from the library, is for the end user
+     * @return {Number} Character font size
      */
     getCurrentCharFontSize() {
       const cp = this._getCurrentCharIndex();
       return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize');
     }
 
-    /**
-     * High level function to know the color of the cursor.
-     * the currentChar is the one that precedes the cursor
-     * Returns color (fill) of char at the current cursor
-     * if the text object has a pattern or gradient for filler, it will return that.
-     * Unused by the library, is for the end user
-     * @return {String | TFiller} Character color (fill)
+    /**
+     * High level function to know the color of the cursor.
+     * the currentChar is the one that precedes the cursor
+     * Returns color (fill) of char at the current cursor
+     * if the text object has a pattern or gradient for filler, it will return that.
+     * Unused by the library, is for the end user
+     * @return {String | TFiller} Character color (fill)
      */
     getCurrentCharColor() {
       const cp = this._getCurrentCharIndex();
       return this.getValueOfPropertyAt(cp.l, cp.c, FILL);
     }
 
-    /**
-     * Returns the cursor position for the getCurrent.. functions
-     * @private
+    /**
+     * Returns the cursor position for the getCurrent.. functions
+     * @private
      */
     _getCurrentCharIndex() {
       const cursorPosition = this.get2DCursorLocation(this.selectionStart, true),
@@ -26527,52 +26632,52 @@
       super.dispose();
     }
   }
-  /**
-   * Index where text selection starts (or where cursor is when there is no selection)
-   * @type Number
+  /**
+   * Index where text selection starts (or where cursor is when there is no selection)
+   * @type Number
    */
-  /**
-   * Index where text selection ends
-   * @type Number
+  /**
+   * Index where text selection ends
+   * @type Number
    */
-  /**
-   * Color of text selection
-   * @type String
+  /**
+   * Color of text selection
+   * @type String
    */
-  /**
-   * Indicates whether text is in editing mode
-   * @type Boolean
+  /**
+   * Indicates whether text is in editing mode
+   * @type Boolean
    */
-  /**
-   * Indicates whether a text can be edited
-   * @type Boolean
+  /**
+   * Indicates whether a text can be edited
+   * @type Boolean
    */
-  /**
-   * Border color of text object while it's in editing mode
-   * @type String
+  /**
+   * Border color of text object while it's in editing mode
+   * @type String
    */
-  /**
-   * Width of cursor (in px)
-   * @type Number
+  /**
+   * Width of cursor (in px)
+   * @type Number
    */
-  /**
-   * Color of text cursor color in editing mode.
-   * if not set (default) will take color from the text.
-   * if set to a color value that fabric can understand, it will
-   * be used instead of the color of the text at the current position.
-   * @type String
+  /**
+   * Color of text cursor color in editing mode.
+   * if not set (default) will take color from the text.
+   * if set to a color value that fabric can understand, it will
+   * be used instead of the color of the text at the current position.
+   * @type String
    */
-  /**
-   * Delay between cursor blink (in ms)
-   * @type Number
+  /**
+   * Delay between cursor blink (in ms)
+   * @type Number
    */
-  /**
-   * Duration of cursor fade in (in ms)
-   * @type Number
+  /**
+   * Duration of cursor fade in (in ms)
+   * @type Number
    */
-  /**
-   * Indicates whether internal text char widths can be cached
-   * @type Boolean
+  /**
+   * Indicates whether internal text char widths can be cached
+   * @type Boolean
    */
   _defineProperty(IText, "ownDefaults", iTextDefaultValues);
   _defineProperty(IText, "type", 'IText');
@@ -26713,15 +26818,8 @@
           return;
         }
 
-        // Don't apply justify alignment during drag operations to prevent snapping
-        const now = Date.now();
-        const lastDragTime = this._lastInitDimensionsTime || 0;
-        const isDuringDrag = now - lastDragTime < 200; // 200ms window for drag detection
-
-        if (isDuringDrag) {
-          console.log('🔤 Skipping justify during drag operation to prevent snapping');
-          return;
-        }
+        // Note: Removed drag detection logic that was causing issues
+        // Justify alignment will now apply immediately when needed
 
         // For non-browser-wrapping fonts, use Fabric's justify system
         // once text is measured we need to make space fatter to make justified text.
@@ -26781,7 +26879,9 @@
       }
 
       // Double-check that justify was applied by checking space widths
-      if (this.textAlign.includes('justify') && this.__charBounds) {
+      // Skip validation during rapid width changes to prevent interference
+      console.log('🔍 JUSTIFY CHECK:', this.textAlign.includes('justify'), !!this.__charBounds, !this._skipJustifyValidation);
+      if (this.textAlign.includes('justify') && this.__charBounds && !this._skipJustifyValidation) {
         setTimeout(() => {
           // Verify justify was applied by checking if space widths vary
           let hasVariableSpaces = false;
@@ -27294,7 +27394,8 @@
      */
     _splitTextIntoLines(text) {
       // Check if we need browser wrapping using smart font detection
-      const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily);
+      // Skip browser wrapping for justify text when using overlay editing to prevent measurement conflicts
+      const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily) && !(this.textAlign.includes('justify') && this.useOverlayEditing);
       if (needsBrowserWrapping) {
         // Cache key based on text content, width, font properties, AND text alignment
         const textHash = text.length + text.slice(0, 50); // Include text content in cache key
@@ -27319,6 +27420,11 @@
 
         // Mark that we used browser wrapping to prevent dynamicMinWidth modifications
         this._usingBrowserWrapping = true;
+
+        // pass the width to enlargeSpaces
+        if (result.width) {
+          this._browserWrappingWidth = result.width;
+        }
         return result;
       }
 
@@ -27347,26 +27453,47 @@
         return this._splitTextIntoLinesDefault(text);
       }
 
+      // Skip measurement if we just extracted lines from overlay for justify text
+      if (this._skipJustifyMeasurement && this.textAlign.includes('justify')) {
+        console.log('🚫 SKIP: Skipping browser measurement, using stored overlay lines');
+        this._skipJustifyMeasurement = false; // Reset flag
+        return this._splitTextIntoLinesDefault(text);
+      }
+
       // Create a hidden element that mimics the overlay editor
       const testElement = document.createElement('div');
       testElement.style.position = 'absolute';
       testElement.style.left = '-9999px';
       testElement.style.visibility = 'hidden';
-      testElement.style.fontSize = `${this.fontSize}px`;
+      const scaleX = this.scaleX || 1;
+      const fontSize = this.fontSize * scaleX;
+      const padding = this.padding || 0;
+      testElement.style.fontSize = `${fontSize}px`;
       testElement.style.fontFamily = `"${this.fontFamily}"`;
       testElement.style.fontWeight = String(this.fontWeight || 'normal');
       testElement.style.fontStyle = String(this.fontStyle || 'normal');
       testElement.style.lineHeight = String(this.lineHeight || 1.16);
-      testElement.style.width = `${this.width}px`;
+      testElement.style.letterSpacing = `${(this.charSpacing || 0) / 1000 * fontSize}px`;
       testElement.style.direction = this.direction || 'ltr';
       testElement.style.whiteSpace = 'pre-wrap';
       testElement.style.wordBreak = 'normal';
       testElement.style.overflowWrap = 'break-word';
-
-      // Set browser-native text alignment (including justify)
+      testElement.style.padding = `${padding}px`;
+      testElement.style.boxSizing = 'border-box';
+      testElement.style.width = `${this.width * scaleX + padding * 2}px`;
       if (this.textAlign.includes('justify')) {
         testElement.style.textAlign = 'justify';
-        testElement.style.textAlignLast = 'auto'; // Let browser decide last line alignment
+        if (this.direction === 'rtl') {
+          testElement.style.textAlignLast = 'right';
+        } else {
+          testElement.style.textAlignLast = 'left';
+        }
+        testElement.style.textJustify = 'inter-word';
+        testElement.style.unicodeBidi = 'plaintext';
+        testElement.style.wordSpacing = 'normal';
+        // Match font smoothing from overlay editor
+        testElement.style.webkitFontSmoothing = 'auto';
+        testElement.style.mozOsxFontSmoothing = 'auto';
       } else {
         testElement.style.textAlign = this.textAlign;
       }
@@ -27391,7 +27518,7 @@
             if (i > currentLineStart && (rect.bottom > previousBottom + 5 || i === textLength)) {
               // New line detected or end of text
               const lineEnd = i === textLength ? i : i - 1;
-              const lineText = text.substring(currentLineStart, lineEnd).trim();
+              const lineText = text.substring(currentLineStart, lineEnd);
               if (lineText) {
                 lines.push(lineText);
                 // Convert to graphemes for compatibility
@@ -27414,6 +27541,7 @@
       const offsetHeight = testElement.offsetHeight;
       const clientHeight = testElement.clientHeight;
       const boundingRect = testElement.getBoundingClientRect();
+      const clientWidth = testElement.clientWidth;
       console.log(`🔤 Browser element measurements:`);
       console.log(`   scrollHeight: ${actualBrowserHeight}px (content + padding + hidden overflow)`);
       console.log(`   offsetHeight: ${offsetHeight}px (content + padding + border)`);
@@ -27461,7 +27589,8 @@
         graphemeText: text.split(''),
         graphemeLines: graphemeLines,
         justifySpaceMeasurements: justifySpaceMeasurements,
-        actualBrowserHeight: adjustedHeight
+        actualBrowserHeight: adjustedHeight,
+        width: clientWidth
       };
     }
 
@@ -27513,6 +27642,14 @@
         return;
       }
 
+      // Check for overlay justify measurements first
+      const overlayMeasurements = this._overlayJustifyMeasurements;
+      if (overlayMeasurements) {
+        console.log('🎯 OVERLAY JUSTIFY: Using stored overlay measurements');
+        this._applyOverlayJustifySpaces(overlayMeasurements);
+        return;
+      }
+
       // Get space measurements from browser wrapping result
       const styleMap = this._styleMap;
       if (!styleMap || !styleMap.justifySpaceMeasurements) {
@@ -27578,6 +27715,111 @@
       });
     }
 
+    /**
+     * Apply overlay justify measurements to character bounds
+     * @private
+     */
+    _applyOverlayJustifySpaces(overlayMeasurements) {
+      this._textLines.forEach((line, lineIndex) => {
+        if (!this.__charBounds || !this.__charBounds[lineIndex]) return;
+        const lineMeasurement = overlayMeasurements[lineIndex];
+        if (!lineMeasurement) return;
+        const {
+          justifiedSpaceWidth
+        } = lineMeasurement;
+        let spaceIndex = 0;
+        line.forEach((char, charIndex) => {
+          if (char === ' ' && this.__charBounds[lineIndex][charIndex]) {
+            const oldWidth = this.__charBounds[lineIndex][charIndex].width;
+            this.__charBounds[lineIndex][charIndex].width = justifiedSpaceWidth;
+            console.log(`🎯 OVERLAY Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${justifiedSpaceWidth.toFixed(1)}px`);
+            spaceIndex++;
+          }
+        });
+      });
+    }
+
+    /**
+     * Extract justify measurements from overlay textarea and store them
+     */
+    extractJustifyMeasurementsFromOverlay(textarea) {
+      const text = textarea.value;
+      if (!text || !this.textAlign.includes('justify')) {
+        return;
+      }
+
+      // Use the same measurement technique as measureLinesWithBrowser
+      const testElement = document.createElement('div');
+      testElement.style.position = 'absolute';
+      testElement.style.left = '-9999px';
+      testElement.style.visibility = 'hidden';
+
+      // Copy all styles from the textarea to ensure identical rendering
+      const computedStyle = window.getComputedStyle(textarea);
+      const stylesToCopy = ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'lineHeight', 'letterSpacing', 'direction', 'textAlign', 'textAlignLast', 'textJustify', 'width', 'padding', 'boxSizing', 'whiteSpace', 'wordBreak', 'overflowWrap'];
+      stylesToCopy.forEach(prop => {
+        testElement.style[prop] = computedStyle[prop];
+      });
+      testElement.textContent = text;
+      document.body.appendChild(testElement);
+      try {
+        // Extract justify space measurements using the same logic
+        const lines = text.split('\n');
+        const justifyMeasurements = {};
+        lines.forEach((line, lineIndex) => {
+          if (line.trim()) {
+            const spaces = (line.match(/\s/g) || []).length;
+            if (spaces > 0) {
+              // Measure natural space width
+              const singleSpaceDiv = document.createElement('div');
+              stylesToCopy.forEach(prop => {
+                singleSpaceDiv.style[prop] = computedStyle[prop];
+              });
+              singleSpaceDiv.textContent = ' ';
+              document.body.appendChild(singleSpaceDiv);
+              const naturalSpaceWidth = singleSpaceDiv.getBoundingClientRect().width;
+              document.body.removeChild(singleSpaceDiv);
+
+              // Measure justified line width
+              const lineDiv = document.createElement('div');
+              stylesToCopy.forEach(prop => {
+                lineDiv.style[prop] = computedStyle[prop];
+              });
+              lineDiv.textContent = line;
+              document.body.appendChild(lineDiv);
+              const lineWidth = lineDiv.getBoundingClientRect().width;
+              const containerWidth = parseFloat(computedStyle.width);
+
+              // Calculate justified space width
+              const nonSpaceText = line.replace(/\s/g, '');
+              const nonSpaceDiv = document.createElement('div');
+              stylesToCopy.forEach(prop => {
+                nonSpaceDiv.style[prop] = computedStyle[prop];
+              });
+              nonSpaceDiv.textContent = nonSpaceText;
+              document.body.appendChild(nonSpaceDiv);
+              const nonSpaceWidth = nonSpaceDiv.getBoundingClientRect().width;
+              const justifiedSpaceWidth = (containerWidth - nonSpaceWidth) / spaces;
+              console.log(`🎯 OVERLAY Line ${lineIndex}: ${spaces} spaces, natural: ${naturalSpaceWidth.toFixed(1)}px -> justified: ${justifiedSpaceWidth.toFixed(1)}px`);
+              justifyMeasurements[lineIndex] = {
+                naturalSpaceWidth,
+                justifiedSpaceWidth,
+                spaceCount: spaces
+              };
+              document.body.removeChild(lineDiv);
+              document.body.removeChild(nonSpaceDiv);
+            }
+          }
+        });
+
+        // Store the measurements
+        this._overlayJustifyMeasurements = justifyMeasurements;
+        console.log('💾 STORED: Overlay justify measurements', justifyMeasurements);
+      } finally {
+        document.body.removeChild(testElement);
+      }
+    }
+
     /**
      * Fallback to default Fabric wrapping
      * @private
@@ -27642,6 +27884,7 @@
       // Use 'modified' event which fires after user releases the mouse
       this.on('modified', () => {
         const currentResizeOrigin = resizeOrigin; // Capture the value before reset
+        this.initDimensions();
         // Small delay to ensure text layout is updated
         setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
         resizeOrigin = null; // Reset after capturing
@@ -27701,7 +27944,7 @@
         const originalTop = this.top;
         const widthIncrease = newWidth - this.width;
 
-        // Change width 
+        // Change width
         this.set('width', newWidth);
 
         // Force text layout recalculation
@@ -27713,8 +27956,8 @@
           // When resizing from left, the expansion pushes text right
           // Compensate by moving the textbox left by the width increase
           this.set({
-            'left': originalLeft - widthIncrease,
-            'top': originalTop
+            left: originalLeft - widthIncrease,
+            top: originalTop
           });
         }
         this.setCoords();
@@ -27810,6 +28053,35 @@
       }
     }
 
+    /**
+     * Fix justify text after JSON loading - call this after fromObject
+     * @public
+     */
+    fixJustifyAfterJSONLoad() {
+      if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+        console.log('🔧 JSON FIX: Fixing justify text after JSON load');
+        // The issue is that enlargeSpaces() isn't properly updating after JSON load
+        // Workaround: temporarily change width to trigger proper rebuild, then restore
+        setTimeout(() => {
+          const originalWidth = this.width;
+          console.log('🔄 JSON TRICK: Temporarily changing width to force justify rebuild');
+
+          // Temporarily change width by 1px to trigger proper justify recalculation
+          this.width = originalWidth + 1;
+          this.initDimensions();
+
+          // Restore original width - this will trigger the proper justify calculation
+          setTimeout(() => {
+            var _this$canvas8;
+            this.width = originalWidth;
+            this.initDimensions();
+            (_this$canvas8 = this.canvas) === null || _this$canvas8 === void 0 || _this$canvas8.requestRenderAll();
+            console.log('✅ JSON FIX: Restored original width, justify should be fixed');
+          }, 50);
+        }, 100);
+      }
+    }
+
     /**
      * Returns object representation of an instance
      * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
@@ -27817,7 +28089,60 @@
      */
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
+      const obj = super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
+
+      // For justify text with overlay editing, ensure measurements are available
+      if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+        var _charBounds, _charBounds2;
+        // If character bounds don't exist yet, initialize dimensions to calculate them
+        if (!((_charBounds = this.__charBounds) !== null && _charBounds !== void 0 && _charBounds.length)) {
+          console.log('🔧 SERIALIZE: Character bounds missing, initializing dimensions for justify text');
+          this.initDimensions();
+        }
+
+        // Now save the measurements if they exist
+        if ((_charBounds2 = this.__charBounds) !== null && _charBounds2 !== void 0 && _charBounds2.length) {
+          console.log('💾 SERIALIZE: Saving justify measurements to JSON');
+          obj._justifyMeasurements = {
+            __charBounds: this.__charBounds,
+            __lineHeights: this.__lineHeights,
+            __lineWidths: this.__lineWidths,
+            _hasJustifyData: true
+          };
+        } else {
+          console.warn('⚠️ SERIALIZE: Could not generate character bounds for justify text');
+        }
+      }
+      return obj;
+    }
+
+    /**
+     * Override _set to handle justify measurements during JSON loading
+     * @private
+     */
+    _set(key, value) {
+      const result = super._set(key, value);
+
+      // Restore justify measurements if they exist in the JSON data
+      if (key === '_justifyMeasurements' && value && value._hasJustifyData) {
+        console.log('🔄 DESERIALIZE: Restoring justify measurements from JSON');
+        this.__charBounds = value.__charBounds;
+        this.__lineHeights = value.__lineHeights;
+        this.__lineWidths = value.__lineWidths;
+
+        // Mark that we have restored data so we don't interfere with it
+        this._hasRestoredJustifyData = true;
+
+        // Automatically trigger the fix after JSON loading
+        if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+          console.log('🔄 AUTO-FIX: Calling fixJustifyAfterJSONLoad after restoring justify measurements');
+          // Use setTimeout to ensure this runs after all object initialization is complete
+          setTimeout(() => {
+            this.fixJustifyAfterJSONLoad();
+          }, 10);
+        }
+      }
+      return result;
     }
   }
   /**