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

package/dist/index.mjs

@@ -354,7 +354,7 @@ class Cache {
 }
 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;
@@ -19183,8 +19183,8 @@ _defineProperty(StyledText, "_styleProperties", styleProperties);
 // 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) {
@@ -19197,8 +19197,8 @@ function getMeasurementContext() {
   return measurementContext;
 }
 
-/**
- * Measure a single grapheme
+/**
+ * Measure a single grapheme
  */
 function measureGrapheme(grapheme, options, ctx) {
   // Check cache first
@@ -19231,8 +19231,8 @@ function measureGrapheme(grapheme, options, ctx) {
   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
@@ -19273,9 +19273,9 @@ function measureGraphemeWithKerning(grapheme, previousGrapheme, options, ctx) {
   };
 }
 
-/**
- * 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();
@@ -19364,8 +19364,8 @@ function getRepresentativeCharacter(fontFamily) {
   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;
@@ -19401,8 +19401,8 @@ function getFontMetrics(options) {
   return result;
 }
 
-/**
- * Apply font styling to canvas context
+/**
+ * Apply font styling to canvas context
  */
 function applyFontStyle(ctx, options) {
   const fontDeclaration = getFontDeclaration(options);
@@ -19419,8 +19419,8 @@ function applyFontStyle(ctx, options) {
   ctx.textBaseline = 'alphabetic';
 }
 
-/**
- * Generate font declaration string
+/**
+ * Generate font declaration string
  */
 function getFontDeclaration(options) {
   const {
@@ -19439,8 +19439,8 @@ function getFontDeclaration(options) {
   return `${fontStyle} ${fontWeight} ${fontSize}px ${normalizedFamily}`;
 }
 
-/**
- * LRU Cache implementation for measurements
+/**
+ * LRU Cache implementation for measurements
  */
 class LRUCache {
   constructor() {
@@ -19502,8 +19502,8 @@ class LRUCache {
   }
 }
 
-/**
- * Advanced measurement cache with font-aware keys
+/**
+ * Advanced measurement cache with font-aware keys
  */
 class MeasurementCache {
   constructor() {
@@ -19530,8 +19530,8 @@ class MeasurementCache {
   }
 }
 
-/**
- * Kerning cache for character pairs
+/**
+ * Kerning cache for character pairs
  */
 class KerningCache {
   constructor() {
@@ -19559,8 +19559,8 @@ class KerningCache {
   }
 }
 
-/**
- * Font metrics cache
+/**
+ * Font metrics cache
  */
 class FontMetricsCache {
   constructor() {
@@ -19595,8 +19595,8 @@ if (typeof document !== 'undefined' && 'fonts' in document) {
   });
 }
 
-/**
- * Clear all measurement caches
+/**
+ * Clear all measurement caches
  */
 function clearAllCaches() {
   measurementCache.clear();
@@ -19604,9 +19604,9 @@ function clearAllCaches() {
   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;
@@ -19650,8 +19650,8 @@ function fontLacksEnglishGlyphs(fontFamily) {
 // 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)) {
@@ -19662,17 +19662,17 @@ function fontLacksEnglishGlyphsCached(fontFamily) {
   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
@@ -19692,15 +19692,15 @@ function segmentGraphemes(text) {
   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 {
@@ -19770,8 +19770,8 @@ function applyEllipsis(text, options) {
   };
 }
 
-/**
- * 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);
@@ -19821,8 +19821,8 @@ function truncateByWidth(text, maxWidth, ellipsisChar, ellipsisWidth, measureFn)
   };
 }
 
-/**
- * Truncate text based on height constraint
+/**
+ * Truncate text based on height constraint
  */
 function truncateByHeight(text, maxHeight, ellipsisChar, measureFn) {
   var _measureFn;
@@ -19870,19 +19870,19 @@ function truncateByHeight(text, maxHeight, ellipsisChar, measureFn) {
   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;
@@ -20001,8 +20001,8 @@ function layoutText(options) {
   };
 }
 
-/**
- * Layout a single paragraph with wrapping
+/**
+ * Layout a single paragraph with wrapping
  */
 function layoutParagraph(text, options) {
   const {
@@ -20037,8 +20037,8 @@ function layoutParagraph(text, options) {
   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;
@@ -20108,8 +20108,8 @@ function layoutSingleLine(text, options) {
   };
 }
 
-/**
- * Word-based wrapping algorithm
+/**
+ * Word-based wrapping algorithm
  */
 function wrapByWords(text, maxWidth, options) {
   const lines = [];
@@ -20142,8 +20142,8 @@ function wrapByWords(text, maxWidth, options) {
   return lines.length > 0 ? lines : [''];
 }
 
-/**
- * Character-based wrapping algorithm  
+/**
+ * Character-based wrapping algorithm  
  */
 function wrapByCharacters(text, maxWidth, options) {
   const lines = [];
@@ -20165,8 +20165,8 @@ function wrapByCharacters(text, maxWidth, options) {
   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 => {
@@ -20200,8 +20200,8 @@ function applyAlignment(lines, align, containerWidth, options) {
   });
 }
 
-/**
- * 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;
@@ -20224,8 +20224,8 @@ function applyJustification(line, containerWidth, options) {
   return line;
 }
 
-/**
- * Calculate vertical alignment offset
+/**
+ * Calculate vertical alignment offset
  */
 function calculateVerticalOffset(contentHeight, containerHeight, align) {
   switch (align) {
@@ -20239,8 +20239,8 @@ function calculateVerticalOffset(contentHeight, containerHeight, align) {
   }
 }
 
-/**
- * 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
@@ -20269,8 +20269,8 @@ function handleHeightOverflow(existingLines, overflowLine, remainingHeight, opti
   };
 }
 
-/**
- * Create empty line for empty paragraphs
+/**
+ * Create empty line for empty paragraphs
  */
 function createEmptyLine(options) {
   const height = options.fontSize * options.lineHeight;
@@ -20286,8 +20286,8 @@ function createEmptyLine(options) {
   };
 }
 
-/**
- * Measure width of a line of text
+/**
+ * Measure width of a line of text
  */
 function measureLineWidth(text, options) {
   const graphemes = segmentGraphemes(text);
@@ -20304,8 +20304,8 @@ function measureLineWidth(text, options) {
   return width;
 }
 
-/**
- * Convert layout options to measurement options
+/**
+ * Convert layout options to measurement options
  */
 function createMeasurementOptions(options) {
   return {
@@ -20548,15 +20548,15 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
   }
 }
 
-/**
- * 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) {
@@ -20570,9 +20570,9 @@ function segmentIntoGraphemes(text) {
   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;
@@ -20580,7 +20580,8 @@ function extractLinesFromDOM(textarea) {
     return {
       lines: [],
       totalWidth: 0,
-      totalHeight: 0
+      totalHeight: 0,
+      width: 0
     };
   }
 
@@ -20609,6 +20610,8 @@ function extractLinesFromDOM(textarea) {
   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);
@@ -20659,7 +20662,8 @@ function extractLinesFromDOM(textarea) {
     return {
       lines,
       totalWidth,
-      totalHeight
+      totalHeight,
+      width
     };
   } finally {
     // Clean up mirror element
@@ -20667,16 +20671,16 @@ function extractLinesFromDOM(textarea) {
   }
 }
 
-/**
- * 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) {
@@ -20685,31 +20689,37 @@ function areBrowserLinesValid(target, storedHash) {
   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;
 }
@@ -20790,10 +20800,18 @@ class FabricText extends StyledText {
    * 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;
@@ -20894,6 +20912,11 @@ class FabricText extends StyledText {
   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;
@@ -20901,11 +20924,11 @@ class FabricText extends StyledText {
       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++) {
@@ -22836,8 +22859,8 @@ class OverlayEditor {
     // 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;
@@ -22851,8 +22874,8 @@ class OverlayEditor {
     return container;
   }
 
-  /**
-   * Create the overlay DOM structure
+  /**
+   * Create the overlay DOM structure
    */
   createOverlayDOM() {
     // Host div for positioning and overflow control
@@ -22907,8 +22930,8 @@ class OverlayEditor {
     document.body.appendChild(this.hostDiv);
   }
 
-  /**
-   * Attach all event listeners
+  /**
+   * Attach all event listeners
    */
   attachEventListeners() {
     // Textarea events
@@ -22928,8 +22951,8 @@ class OverlayEditor {
     this.setupViewportChangeDetection();
   }
 
-  /**
-   * Remove all event listeners
+  /**
+   * Remove all event listeners
    */
   removeEventListeners() {
     this.textarea.removeEventListener('input', this.boundHandlers.onInput);
@@ -22946,16 +22969,16 @@ class OverlayEditor {
     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;
@@ -22989,15 +23012,15 @@ class OverlayEditor {
     }
   }
 
-  /**
-   * 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
@@ -23036,10 +23059,10 @@ class OverlayEditor {
     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
@@ -23061,7 +23084,6 @@ class OverlayEditor {
     // 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.
@@ -23123,7 +23145,7 @@ class OverlayEditor {
             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');
@@ -23234,8 +23256,8 @@ class OverlayEditor {
     // 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;
@@ -23305,8 +23327,8 @@ class OverlayEditor {
     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;
@@ -23391,8 +23413,8 @@ class OverlayEditor {
     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"
@@ -23432,8 +23454,8 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
   }
 
-  /**
-   * Refresh overlay positioning and styling
+  /**
+   * Refresh overlay positioning and styling
    */
   refresh() {
     if (this.isDestroyed) return;
@@ -23441,32 +23463,34 @@ class OverlayEditor {
     // 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;
 
@@ -23487,12 +23511,26 @@ class OverlayEditor {
         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
 
@@ -23507,6 +23545,9 @@ class OverlayEditor {
     // Request canvas re-render
     this.canvas.requestRenderAll();
   }
+  get textareaElement() {
+    return this.textarea;
+  }
 
   // Event handlers
   handleInput() {
@@ -23610,8 +23651,8 @@ class OverlayEditor {
     }
   }
 
-  /**
-   * Setup detection for viewport changes (zoom/pan)
+  /**
+   * Setup detection for viewport changes (zoom/pan)
    */
   setupViewportChangeDetection() {
     // Store original methods
@@ -23640,8 +23681,8 @@ class OverlayEditor {
     };
   }
 
-  /**
-   * Restore original viewport methods
+  /**
+   * Restore original viewport methods
    */
   restoreViewportChangeDetection() {
     if (this.canvas.__originalSetZoom) {
@@ -23656,8 +23697,8 @@ class OverlayEditor {
   }
 }
 
-/**
- * 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
@@ -23681,35 +23722,35 @@ function enterTextOverlayEdit(canvas, target, options) {
   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);
@@ -23722,8 +23763,8 @@ class ITextBehavior extends FabricText {
     return super.onDeselect(options);
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _animateCursor(_ref) {
     let {
@@ -23748,8 +23789,8 @@ class ITextBehavior extends FabricText {
     });
   }
 
-  /**
-   * changes the cursor from visible to invisible
+  /**
+   * changes the cursor from visible to invisible
    */
   _tick(delay) {
     this._currentTickState = this._animateCursor({
@@ -23760,8 +23801,8 @@ class ITextBehavior extends FabricText {
     });
   }
 
-  /**
-   * Changes the cursor from invisible to visible
+  /**
+   * Changes the cursor from invisible to visible
    */
   _onTickComplete() {
     var _this$_currentTickCom;
@@ -23773,16 +23814,16 @@ class ITextBehavior extends FabricText {
     });
   }
 
-  /**
-   * 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;
@@ -23800,9 +23841,9 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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())) {
@@ -23810,8 +23851,8 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * Selects entire text
+  /**
+   * Selects entire text
    */
   selectAll() {
     this.selectionStart = 0;
@@ -23821,26 +23862,26 @@ class ITextBehavior extends FabricText {
     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,
@@ -23860,10 +23901,10 @@ class ITextBehavior extends FabricText {
     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,
@@ -23883,10 +23924,10 @@ class ITextBehavior extends FabricText {
     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,
@@ -23898,10 +23939,10 @@ class ITextBehavior extends FabricText {
     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,
@@ -23913,11 +23954,11 @@ class ITextBehavior extends FabricText {
     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;
@@ -23935,9 +23976,9 @@ class ITextBehavior extends FabricText {
     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;
@@ -23953,9 +23994,9 @@ class ITextBehavior extends FabricText {
     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;
@@ -23967,8 +24008,8 @@ class ITextBehavior extends FabricText {
     this._updateTextarea();
   }
 
-  /**
-   * Enters editing state
+  /**
+   * Enters editing state
    */
   enterEditing(e) {
     if (this.isEditing || !this.editable) {
@@ -23988,8 +24029,8 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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) {
@@ -24000,6 +24041,18 @@ class ITextBehavior extends FabricText {
 
     // 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();
@@ -24013,8 +24066,8 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * Enter overlay editing mode using DOM textarea overlay
+  /**
+   * Enter overlay editing mode using DOM textarea overlay
    */
   enterOverlayEditing() {
     this._saveEditingProps();
@@ -24035,33 +24088,85 @@ class ITextBehavior extends FabricText {
     });
   }
 
-  /**
-   * 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
@@ -24069,8 +24174,8 @@ class ITextBehavior extends FabricText {
     this.exitEditing();
   }
 
-  /**
-   * called by {@link Canvas#textEditingManager}
+  /**
+   * called by {@link Canvas#textEditingManager}
    */
   updateSelectionOnMouseMove(e) {
     if (this.getActiveControl()) {
@@ -24098,8 +24203,8 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _setEditingProps() {
     this.hoverCursor = 'text';
@@ -24111,8 +24216,8 @@ class ITextBehavior extends FabricText {
     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),
@@ -24131,8 +24236,8 @@ class ITextBehavior extends FabricText {
     };
   }
 
-  /**
-   * convert from fabric to textarea values
+  /**
+   * convert from fabric to textarea values
    */
   fromGraphemeToStringSelection(start, end, graphemes) {
     const smallerTextStart = graphemes.slice(0, start),
@@ -24151,8 +24256,8 @@ class ITextBehavior extends FabricText {
     };
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _updateTextarea() {
     console.log('🔤 _updateTextarea called with fabric text:', this.text);
@@ -24177,8 +24282,8 @@ class ITextBehavior extends FabricText {
     this.updateTextareaPosition();
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   updateFromTextArea() {
     if (!this.hiddenTextarea) {
@@ -24198,8 +24303,8 @@ class ITextBehavior extends FabricText {
     this.updateTextareaPosition();
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   updateTextareaPosition() {
     if (this.selectionStart === this.selectionEnd) {
@@ -24209,9 +24314,9 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * @private
-   * @return {Object} style contains style for hiddenTextarea
+  /**
+   * @private
+   * @return {Object} style contains style for hiddenTextarea
    */
   _calcTextareaPosition() {
     if (!this.canvas) {
@@ -24258,8 +24363,8 @@ class ITextBehavior extends FabricText {
     };
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _saveEditingProps() {
     this._savedProps = {
@@ -24276,8 +24381,8 @@ class ITextBehavior extends FabricText {
     };
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _restoreEditingProps() {
     if (!this._savedProps) {
@@ -24297,9 +24402,9 @@ class ITextBehavior extends FabricText {
     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;
@@ -24320,8 +24425,8 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * Exits from editing state and fires relevant events
+  /**
+   * Exits from editing state and fires relevant events
    */
   exitEditing() {
     const isTextChanged = this._textBeforeEdit !== this.text;
@@ -24340,8 +24445,8 @@ class ITextBehavior extends FabricText {
     return this;
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _removeExtraneousStyles() {
     for (const prop in this.styles) {
@@ -24351,10 +24456,10 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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 {
@@ -24407,10 +24512,10 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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);
@@ -24425,15 +24530,15 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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 = {};
@@ -24493,12 +24598,12 @@ class ITextBehavior extends FabricText {
     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) {
@@ -24547,11 +24652,11 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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),
@@ -24592,12 +24697,12 @@ class ITextBehavior extends FabricText {
     }
   }
 
-  /**
-   * 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;
@@ -24610,17 +24715,17 @@ class ITextBehavior extends FabricText {
     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;
@@ -24637,9 +24742,9 @@ class ITextBehavior extends FabricText {
     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) {
@@ -24670,36 +24775,36 @@ class ITextBehavior extends FabricText {
 }
 
 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();
@@ -24742,17 +24847,17 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -24778,11 +24883,11 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * 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) {
@@ -24799,9 +24904,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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;
@@ -24938,15 +25043,15 @@ class ITextKeyBehavior extends ITextBehavior {
     updateAndFire();
   }
 
-  /**
-   * Composition start
+  /**
+   * Composition start
    */
   onCompositionStart() {
     this.inCompositionMode = true;
   }
 
-  /**
-   * Composition end
+  /**
+   * Composition end
    */
   onCompositionEnd() {
     this.inCompositionMode = false;
@@ -24964,8 +25069,8 @@ class ITextKeyBehavior extends ITextBehavior {
     this.updateTextareaPosition();
   }
 
-  /**
-   * Copies selected text
+  /**
+   * Copies selected text
    */
   copy() {
     if (this.selectionStart === this.selectionEnd) {
@@ -24984,19 +25089,19 @@ class ITextKeyBehavior extends ITextBehavior {
     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),
@@ -25008,11 +25113,11 @@ class ITextKeyBehavior extends ITextBehavior {
     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),
@@ -25030,12 +25135,12 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -25045,10 +25150,10 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * @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),
@@ -25067,9 +25172,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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],
@@ -25099,9 +25204,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -25110,9 +25215,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -25121,10 +25226,10 @@ class ITextKeyBehavior extends ITextBehavior {
     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);
@@ -25146,9 +25251,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * 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;
@@ -25156,9 +25261,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return offset !== 0;
   }
 
-  /**
-   * Moves cursor up without shift
-   * @param {Number} offset
+  /**
+   * Moves cursor up without shift
+   * @param {Number} offset
    */
   moveCursorWithoutShift(offset) {
     if (offset < 0) {
@@ -25171,9 +25276,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -25182,11 +25287,11 @@ class ITextKeyBehavior extends ITextBehavior {
     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;
@@ -25205,23 +25310,23 @@ class ITextKeyBehavior extends ITextBehavior {
     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;
@@ -25236,9 +25341,9 @@ class ITextKeyBehavior extends ITextBehavior {
     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) {
@@ -25249,9 +25354,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * 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) {
@@ -25260,10 +25365,10 @@ class ITextKeyBehavior extends ITextBehavior {
     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'}`;
@@ -25278,9 +25383,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * 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) {
@@ -25291,9 +25396,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * 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;
@@ -25308,8 +25413,8 @@ class ITextKeyBehavior extends ITextBehavior {
   }
 }
 
-/**
- * `LEFT_CLICK === 0`
+/**
+ * `LEFT_CLICK === 0`
  */
 const notALeftClick = e => !!e.button;
 class ITextClickBehavior extends ITextKeyBehavior {
@@ -25327,36 +25432,36 @@ class ITextClickBehavior extends ITextKeyBehavior {
     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
@@ -25373,8 +25478,8 @@ class ITextClickBehavior extends ITextKeyBehavior {
     this.renderCursorOrSelection();
   }
 
-  /**
-   * Default handler for triple click, select a line
+  /**
+   * Default handler for triple click, select a line
    */
   tripleClickHandler(options) {
     if (!this.isEditing) {
@@ -25384,13 +25489,13 @@ class ITextClickBehavior extends ITextKeyBehavior {
     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 {
@@ -25418,9 +25523,9 @@ class ITextClickBehavior extends ITextKeyBehavior {
     this.selected || (this.selected = alreadySelected || this.isEditing);
   }
 
-  /**
-   * standard handler for mouse up, overridable
-   * @private
+  /**
+   * standard handler for mouse up, overridable
+   * @private
    */
   mouseUpHandler(_ref2) {
     let {
@@ -25451,9 +25556,9 @@ class ITextClickBehavior extends ITextKeyBehavior {
     }
   }
 
-  /**
-   * 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),
@@ -25471,10 +25576,10 @@ class ITextClickBehavior extends ITextKeyBehavior {
     }
   }
 
-  /**
-   * 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()));
@@ -25520,15 +25625,15 @@ class ITextClickBehavior extends ITextKeyBehavior {
   }
 }
 
-/**
- * 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) {
@@ -25572,8 +25677,8 @@ function hitTest(x, y, layout, options) {
   };
 }
 
-/**
- * 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) {
@@ -25620,8 +25725,8 @@ function getCursorRect(insertionIndex, layout, options) {
 
 // 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;
@@ -25644,8 +25749,8 @@ function findLineAtY(y, lines) {
   };
 }
 
-/**
- * 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) {
@@ -25751,8 +25856,8 @@ function findCharAtX(x, line, options) {
   };
 }
 
-/**
- * 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;
@@ -25771,8 +25876,8 @@ function calculateInsertionIndex(lineIndex, graphemeIndex, layout) {
   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;
@@ -25814,8 +25919,8 @@ function findPositionFromIndex(insertionIndex, layout) {
   };
 }
 
-/**
- * Calculate Y position of a line
+/**
+ * Calculate Y position of a line
  */
 function calculateLineY(lineIndex, layout, options) {
   let y = 0;
@@ -25918,48 +26023,48 @@ const iTextDefaultValues = {
 
 // @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() {
@@ -25974,10 +26079,10 @@ class IText extends ITextClickBehavior {
     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, {
@@ -25987,11 +26092,11 @@ class IText extends ITextClickBehavior {
     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) {
@@ -26006,28 +26111,28 @@ class IText extends ITextClickBehavior {
     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) {
@@ -26037,9 +26142,9 @@ class IText extends ITextClickBehavior {
     this._updateTextarea();
   }
 
-  /**
-   * Fires the even of selection changed
-   * @private
+  /**
+   * Fires the even of selection changed
+   * @private
    */
   _fireSelectionChanged() {
     this.fire('selection:changed');
@@ -26048,25 +26153,25 @@ class IText extends ITextClickBehavior {
     });
   }
 
-  /**
-   * 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;
@@ -26075,11 +26180,11 @@ class IText extends ITextClickBehavior {
     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;
@@ -26087,10 +26192,10 @@ class IText extends ITextClickBehavior {
     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;
@@ -26098,9 +26203,9 @@ class IText extends ITextClickBehavior {
     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);
@@ -26110,9 +26215,9 @@ class IText extends ITextClickBehavior {
     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;
@@ -26122,9 +26227,9 @@ class IText extends ITextClickBehavior {
     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) {
@@ -26180,12 +26285,12 @@ class IText extends ITextClickBehavior {
     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 = [];
@@ -26200,13 +26305,13 @@ class IText extends ITextClickBehavior {
     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;
@@ -26220,11 +26325,11 @@ class IText extends ITextClickBehavior {
     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) {
@@ -26236,9 +26341,9 @@ class IText extends ITextClickBehavior {
     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) {
@@ -26254,9 +26359,9 @@ class IText extends ITextClickBehavior {
     };
   }
 
-  /**
-   * 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) {
@@ -26270,9 +26375,9 @@ class IText extends ITextClickBehavior {
     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(),
@@ -26286,10 +26391,10 @@ class IText extends ITextClickBehavior {
     };
   }
 
-  /**
-   * 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,
@@ -26323,29 +26428,29 @@ class IText extends ITextClickBehavior {
     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;
@@ -26368,9 +26473,9 @@ class IText extends ITextClickBehavior {
     };
   }
 
-  /**
-   * 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 {
@@ -26386,10 +26491,10 @@ class IText extends ITextClickBehavior {
     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 = {
@@ -26399,8 +26504,8 @@ class IText extends ITextClickBehavior {
     this._renderSelection(ctx, selection, boundaries);
   }
 
-  /**
-   * Renders drag start text selection
+  /**
+   * Renders drag start text selection
    */
   renderDragSourceEffect() {
     const dragStartSelection = this.draggableTextDelegate.getDragStartSelection();
@@ -26411,12 +26516,12 @@ class IText extends ITextClickBehavior {
     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,
@@ -26478,34 +26583,34 @@ class IText extends ITextClickBehavior {
     }
   }
 
-  /**
-   * 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),
@@ -26521,52 +26626,52 @@ class IText extends ITextClickBehavior {
     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');
@@ -26707,15 +26812,8 @@ class Textbox extends IText {
         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.
@@ -26775,7 +26873,9 @@ class Textbox extends IText {
     }
 
     // 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;
@@ -27288,7 +27388,8 @@ class Textbox extends IText {
    */
   _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
@@ -27313,6 +27414,11 @@ class Textbox extends IText {
 
       // 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;
     }
 
@@ -27341,26 +27447,47 @@ class Textbox extends IText {
       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;
     }
@@ -27385,7 +27512,7 @@ class Textbox extends IText {
           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
@@ -27408,6 +27535,7 @@ class Textbox extends IText {
     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)`);
@@ -27455,7 +27583,8 @@ class Textbox extends IText {
       graphemeText: text.split(''),
       graphemeLines: graphemeLines,
       justifySpaceMeasurements: justifySpaceMeasurements,
-      actualBrowserHeight: adjustedHeight
+      actualBrowserHeight: adjustedHeight,
+      width: clientWidth
     };
   }
 
@@ -27507,6 +27636,14 @@ class Textbox extends IText {
       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) {
@@ -27572,6 +27709,111 @@ class Textbox extends IText {
     });
   }
 
+  /**
+   * 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
@@ -27636,6 +27878,7 @@ class Textbox extends IText {
     // 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
@@ -27695,7 +27938,7 @@ class Textbox extends IText {
       const originalTop = this.top;
       const widthIncrease = newWidth - this.width;
 
-      // Change width 
+      // Change width
       this.set('width', newWidth);
 
       // Force text layout recalculation
@@ -27707,8 +27950,8 @@ class Textbox extends IText {
         // 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();
@@ -27804,6 +28047,35 @@ class Textbox extends IText {
     }
   }
 
+  /**
+   * 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
@@ -27811,7 +28083,60 @@ class Textbox extends IText {
    */
   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;
   }
 }
 /**