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

package/src/shapes/Textbox.ts

@@ -2,7 +2,7 @@ import type { TClassProperties, TOptions } from '../typedefs';
 import { IText } from './IText/IText';
 import { classRegistry } from '../ClassRegistry';
 import { createTextboxDefaultControls } from '../controls/commonControls';
-import { JUSTIFY, JUSTIFY_CENTER } from './Text/constants';
+import { JUSTIFY } from './Text/constants';
 import type { TextStyleDeclaration } from './Text/StyledText';
 import type { SerializedITextProps, ITextProps } from './IText/IText';
 import type { ITextEvents } from './IText/ITextBehavior';
@@ -131,32 +131,37 @@ export class Textbox<
     if (!this.initialized) {
       this.initialized = true;
     }
-    
+
     // Prevent rapid recalculations during moves
     if ((this as any)._usingBrowserWrapping) {
       const now = Date.now();
       const lastCall = (this as any)._lastInitDimensionsTime || 0;
       const isRapidCall = now - lastCall < 100;
-      const isDuringLoading = (this as any)._jsonLoading || !(this as any)._browserWrapInitialized;
-      
+      const isDuringLoading =
+        (this as any)._jsonLoading || !(this as any)._browserWrapInitialized;
+
       if (isRapidCall && !isDuringLoading) {
         return;
       }
       (this as any)._lastInitDimensionsTime = now;
     }
-    
+
     // Skip if nothing changed
     const currentState = `${this.text}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
-    if ((this as any)._lastDimensionState === currentState && this._textLines && this._textLines.length > 0) {
+    if (
+      (this as any)._lastDimensionState === currentState &&
+      this._textLines &&
+      this._textLines.length > 0
+    ) {
       return;
     }
     (this as any)._lastDimensionState = currentState;
-    
+
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout) {
       return this.initDimensionsAdvanced();
     }
-    
+
     this.isEditing && this.initDelayedCursor();
     this._clearCache();
     // clear dynamicMinWidth as it will be different after we re-wrap line
@@ -164,59 +169,64 @@ export class Textbox<
     // wrap lines
     const splitTextResult = this._splitText();
     this._styleMap = this._generateStyleMap(splitTextResult);
-    
+
     // For browser wrapping, ensure _textLines is set from browser results
-    if ((this as any)._usingBrowserWrapping && splitTextResult && splitTextResult.lines) {
-      this._textLines = splitTextResult.lines.map(line => line.split(''));
-      
+    if (
+      (this as any)._usingBrowserWrapping &&
+      splitTextResult &&
+      splitTextResult.lines
+    ) {
+      this._textLines = splitTextResult.lines.map((line) => line.split(''));
+
       // Store justify measurements and browser height
-      const justifyMeasurements = (splitTextResult as any).justifySpaceMeasurements;
+      const justifyMeasurements = (splitTextResult as any)
+        .justifySpaceMeasurements;
       if (justifyMeasurements) {
         (this._styleMap as any).justifySpaceMeasurements = justifyMeasurements;
       }
-      
+
       const actualHeight = (splitTextResult as any).actualBrowserHeight;
       if (actualHeight) {
         (this as any)._actualBrowserHeight = actualHeight;
       }
     }
     // Don't auto-resize width when using browser wrapping to prevent width increases during moves
-    if (!((this as any)._usingBrowserWrapping) && this.dynamicMinWidth > this.width) {
+    if (
+      !(this as any)._usingBrowserWrapping &&
+      this.dynamicMinWidth > this.width
+    ) {
       this._set('width', this.dynamicMinWidth);
     }
-    
+
     // For browser wrapping fonts (like STV), ensure minimum width for new textboxes
     // since these fonts can't measure English characters properly
     if ((this as any)._usingBrowserWrapping && this.width < 50) {
-      console.log(`🔤 BROWSER WRAP: Font ${this.fontFamily} has width ${this.width}px, setting to 300px for usability`);
+      console.log(
+        `🔤 BROWSER WRAP: Font ${this.fontFamily} has width ${this.width}px, setting to 300px for usability`,
+      );
       this.width = 300;
     }
-    
+
     // Mark browser wrapping as initialized when complete
     if ((this as any)._usingBrowserWrapping) {
       (this as any)._browserWrapInitialized = true;
     }
 
     this.calcTextWidth();
-    
+
     if (this.textAlign.includes(JUSTIFY)) {
       // For browser wrapping fonts, apply browser-calculated justify spaces
       if ((this as any)._usingBrowserWrapping) {
-        console.log('🔤 BROWSER WRAP: Applying browser-calculated justify spaces');
+        console.log(
+          '🔤 BROWSER WRAP: Applying browser-calculated justify spaces',
+        );
         this._applyBrowserJustifySpaces();
         return;
       }
-      
-      // Don't apply justify alignment during drag operations to prevent snapping
-      const now = Date.now();
-      const lastDragTime = (this as any)._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.
       // Ensure __charBounds exists and fonts are ready before applying justify
@@ -226,15 +236,23 @@ export class Textbox<
         if (fontReady) {
           this.enlargeSpaces();
         } else {
-          console.warn('⚠️ Textbox: Font not ready for justify, deferring enlargeSpaces');
+          console.warn(
+            '⚠️ Textbox: Font not ready for justify, deferring enlargeSpaces',
+          );
           // Defer justify calculation until font is ready
           this._scheduleJustifyAfterFontLoad();
         }
       } else {
-        console.warn('⚠️ Textbox: __charBounds not ready for justify alignment, deferring enlargeSpaces');
+        console.warn(
+          '⚠️ Textbox: __charBounds not ready for justify alignment, deferring enlargeSpaces',
+        );
         // Defer the justify calculation until the next frame
         setTimeout(() => {
-          if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+          if (
+            this.__charBounds &&
+            this.__charBounds.length > 0 &&
+            this.enlargeSpaces
+          ) {
             console.log('🔧 Applying deferred Textbox justify alignment');
             this.enlargeSpaces();
             this.canvas?.requestRenderAll();
@@ -243,17 +261,21 @@ export class Textbox<
       }
     }
     // Calculate height - use Fabric's calculation for proper text rendering space
-    if ((this as any)._usingBrowserWrapping && this._textLines && this._textLines.length > 0) {
+    if (
+      (this as any)._usingBrowserWrapping &&
+      this._textLines &&
+      this._textLines.length > 0
+    ) {
       const actualBrowserHeight = (this as any)._actualBrowserHeight;
       const oldHeight = this.height;
       // Use Fabric's height calculation since it knows how much space text rendering needs
       this.height = this.calcTextHeight();
-      
+
       // Force canvas refresh and control update if height changed significantly
       if (Math.abs(this.height - oldHeight) > 1) {
         this.setCoords();
         this.canvas?.requestRenderAll();
-        
+
         // DEBUG: Log exact positioning details
         console.log(`🎯 POSITIONING DEBUG:`);
         console.log(`   Textbox height: ${this.height}px`);
@@ -262,33 +284,54 @@ export class Textbox<
         console.log(`   Text lines: ${this._textLines?.length || 0}`);
         console.log(`   Font size: ${this.fontSize}px`);
         console.log(`   Line height: ${this.lineHeight || 1.16}`);
-        console.log(`   Calculated line height: ${this.fontSize * (this.lineHeight || 1.16)}px`);
+        console.log(
+          `   Calculated line height: ${this.fontSize * (this.lineHeight || 1.16)}px`,
+        );
         console.log(`   _getTopOffset(): ${this._getTopOffset()}px`);
         console.log(`   calcTextHeight(): ${this.calcTextHeight()}px`);
         console.log(`   Browser height: ${actualBrowserHeight}px`);
-        console.log(`   Height difference: ${this.height - this.calcTextHeight()}px`);
+        console.log(
+          `   Height difference: ${this.height - this.calcTextHeight()}px`,
+        );
       }
     } else {
       this.height = this.calcTextHeight();
     }
 
     // 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 as any)._skipJustifyValidation,
+    );
+    if (
+      this.textAlign.includes('justify') &&
+      this.__charBounds &&
+      !(this as any)._skipJustifyValidation
+    ) {
       setTimeout(() => {
         // Verify justify was applied by checking if space widths vary
         let hasVariableSpaces = false;
         this.__charBounds.forEach((lineBounds, i) => {
           if (lineBounds && this._textLines && this._textLines[i]) {
-            const spaces = lineBounds.filter((bound, j) => /\s/.test(this._textLines[i][j]));
+            const spaces = lineBounds.filter((bound, j) =>
+              /\s/.test(this._textLines[i][j]),
+            );
             if (spaces.length > 1) {
               const firstSpaceWidth = spaces[0].width;
-              hasVariableSpaces = spaces.some(space => Math.abs(space.width - firstSpaceWidth) > 0.1);
+              hasVariableSpaces = spaces.some(
+                (space) => Math.abs(space.width - firstSpaceWidth) > 0.1,
+              );
             }
           }
         });
-        
+
         if (!hasVariableSpaces && this.__charBounds.length > 0) {
-          console.warn('   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again');
+          console.warn(
+            '   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again',
+          );
           if (this.enlargeSpaces) {
             this.enlargeSpaces();
             this.canvas?.requestRenderAll();
@@ -308,25 +351,30 @@ export class Textbox<
     if (typeof document === 'undefined' || !('fonts' in document)) {
       return;
     }
-    
+
     // Only schedule if not already waiting
     if ((this as any)._fontJustifyScheduled) {
       return;
     }
     (this as any)._fontJustifyScheduled = true;
-    
+
     const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
-    document.fonts.load(fontSpec).then(() => {
-      (this as any)._fontJustifyScheduled = false;
-      console.log('🔧 Textbox: Font loaded, applying justify alignment');
-      
-      // Re-run initDimensions to ensure proper justify calculation
-      this.initDimensions();
-      this.canvas?.requestRenderAll();
-    }).catch(() => {
-      (this as any)._fontJustifyScheduled = false;
-      console.warn('⚠️ Textbox: Font loading failed, justify may be incorrect');
-    });
+    document.fonts
+      .load(fontSpec)
+      .then(() => {
+        (this as any)._fontJustifyScheduled = false;
+        console.log('🔧 Textbox: Font loaded, applying justify alignment');
+
+        // Re-run initDimensions to ensure proper justify calculation
+        this.initDimensions();
+        this.canvas?.requestRenderAll();
+      })
+      .catch(() => {
+        (this as any)._fontJustifyScheduled = false;
+        console.warn(
+          '⚠️ Textbox: Font loading failed, justify may be incorrect',
+        );
+      });
   }
 
   /**
@@ -337,11 +385,11 @@ export class Textbox<
     if (!this.initialized) {
       return;
     }
-    
+
     this.isEditing && this.initDelayedCursor();
     this._clearCache();
     this.dynamicMinWidth = 0;
-    
+
     // Use new layout engine
     const layout = layoutText({
       text: this.text,
@@ -360,13 +408,13 @@ export class Textbox<
       fontWeight: this.fontWeight,
       verticalAlign: this.verticalAlign || 'top',
     });
-    
+
     // Update dynamic minimum width based on layout
     if (layout.lines.length > 0) {
-      const maxLineWidth = Math.max(...layout.lines.map(line => line.width));
+      const maxLineWidth = Math.max(...layout.lines.map((line) => line.width));
       this.dynamicMinWidth = Math.max(this.minWidth, maxLineWidth);
     }
-    
+
     // Adjust width if needed (preserving Textbox behavior)
     if (this.dynamicMinWidth > this.width) {
       this._set('width', this.dynamicMinWidth);
@@ -381,7 +429,7 @@ export class Textbox<
       this.height = layout.totalHeight;
       (this as any)._convertLayoutToLegacyFormat(layout);
     }
-    
+
     // Generate style map for compatibility
     this._styleMap = this._generateStyleMapFromLayout(layout);
     this.dirty = true;
@@ -400,10 +448,10 @@ export class Textbox<
       if (line.text.includes('\n') && i > 0) {
         realLineCount++;
       }
-      
+
       map[i] = { line: realLineCount, offset: 0 };
       charCount += line.graphemes.length;
-      
+
       if (i < layout.lines.length - 1) {
         charCount += 1; // newline character
       }
@@ -722,17 +770,22 @@ export class Textbox<
       offset += word.length;
 
       // Predictive wrapping: check if adding this word would exceed the width
-      const potentialLineWidth = lineWidth + infixWidth + wordWidth - additionalSpace;
+      const potentialLineWidth =
+        lineWidth + infixWidth + wordWidth - additionalSpace;
       // Use exact width to match overlay editor behavior
       const conservativeMaxWidth = maxWidth; // No artificial buffer
-      
+
       // Debug logging for wrapping decisions
       const currentLineText = line.join('');
-      console.log(`🔧 FABRIC WRAP CHECK: "${data[i].word}" -> potential: ${potentialLineWidth.toFixed(1)}px vs limit: ${conservativeMaxWidth.toFixed(1)}px`);
-      
+      console.log(
+        `🔧 FABRIC WRAP CHECK: "${data[i].word}" -> potential: ${potentialLineWidth.toFixed(1)}px vs limit: ${conservativeMaxWidth.toFixed(1)}px`,
+      );
+
       if (potentialLineWidth > conservativeMaxWidth && !lineJustStarted) {
         // This word would exceed the width, wrap before adding it
-        console.log(`🔧 FABRIC WRAP! Line: "${currentLineText}" (${lineWidth.toFixed(1)}px)`);
+        console.log(
+          `🔧 FABRIC WRAP! Line: "${currentLineText}" (${lineWidth.toFixed(1)}px)`,
+        );
         graphemeLines.push(line);
         line = [];
         lineWidth = wordWidth; // Start new line with just this word
@@ -746,10 +799,11 @@ export class Textbox<
         line.push(infix);
       }
       line = line.concat(word);
-      
+
       // Debug: show current line after adding word
-      console.log(`🔧 FABRIC AFTER ADD: Line now: "${line.join('')}" (${line.length} chars)`);
-      
+      console.log(
+        `🔧 FABRIC AFTER ADD: Line now: "${line.join('')}" (${line.length} chars)`,
+      );
 
       infixWidth = splitByGrapheme
         ? 0
@@ -764,19 +818,28 @@ export class Textbox<
     // it can be moved out of this function since largestWordWidth is now
     // known in advance
     // Don't modify dynamicMinWidth when using browser wrapping to prevent width increases
-    if (!((this as any)._usingBrowserWrapping) && largestWordWidth + reservedSpace > this.dynamicMinWidth) {
-      console.log(`🔧 FABRIC updating dynamicMinWidth: ${this.dynamicMinWidth} -> ${largestWordWidth - additionalSpace + reservedSpace}`);
+    if (
+      !(this as any)._usingBrowserWrapping &&
+      largestWordWidth + reservedSpace > this.dynamicMinWidth
+    ) {
+      console.log(
+        `🔧 FABRIC updating dynamicMinWidth: ${this.dynamicMinWidth} -> ${largestWordWidth - additionalSpace + reservedSpace}`,
+      );
       this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
     } else if ((this as any)._usingBrowserWrapping) {
-      console.log(`🔤 BROWSER WRAP: Skipping dynamicMinWidth update to prevent width increase`);
+      console.log(
+        `🔤 BROWSER WRAP: Skipping dynamicMinWidth update to prevent width increase`,
+      );
     }
-    
+
     // Debug: show final wrapped lines
     console.log(`🔧 FABRIC FINAL LINES: ${graphemeLines.length} lines`);
     graphemeLines.forEach((line, i) => {
-      console.log(`   Line ${i + 1}: "${line.join('')}" (${line.length} chars)`);
+      console.log(
+        `   Line ${i + 1}: "${line.join('')}" (${line.length} chars)`,
+      );
     });
-    
+
     return graphemeLines;
   }
 
@@ -821,39 +884,54 @@ export class Textbox<
    */
   _splitTextIntoLines(text: string) {
     // 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 as any).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
       const cacheKey = `${textHash}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
-      
+
       // Check if we have a cached result and nothing has changed
-      if ((this as any)._browserWrapCache && (this as any)._browserWrapCache.key === cacheKey) {
+      if (
+        (this as any)._browserWrapCache &&
+        (this as any)._browserWrapCache.key === cacheKey
+      ) {
         const cachedResult = (this as any)._browserWrapCache.result;
-        
+
         // For justify alignment, ensure we have the measurements
-        if (this.textAlign.includes('justify') && !(cachedResult as any).justifySpaceMeasurements) {
+        if (
+          this.textAlign.includes('justify') &&
+          !(cachedResult as any).justifySpaceMeasurements
+        ) {
           // Fall through to recalculate
         } else {
           return cachedResult;
         }
       }
-      
+
       const result = this._splitTextIntoLinesWithBrowser(text);
-      
+
       // Cache the result
       (this as any)._browserWrapCache = { key: cacheKey, result };
-      
+
       // Mark that we used browser wrapping to prevent dynamicMinWidth modifications
       (this as any)._usingBrowserWrapping = true;
-      
+
+      // pass the width to enlargeSpaces
+      if (result.width) {
+        (this as any)._browserWrappingWidth = result.width;
+      }
+
       return result;
     }
-    
+
     // Clear the browser wrapping flag when using regular wrapping
     (this as any)._usingBrowserWrapping = false;
-    
+
     // Default Fabric wrapping for other fonts
     const newText = super._splitTextIntoLines(text),
       graphemeLines = this._wrapText(newText.lines, this.width),
@@ -876,32 +954,59 @@ export class Textbox<
       return this._splitTextIntoLinesDefault(text);
     }
 
+    // Skip measurement if we just extracted lines from overlay for justify text
+    if (
+      (this as any)._skipJustifyMeasurement &&
+      this.textAlign.includes('justify')
+    ) {
+      console.log(
+        '🚫 SKIP: Skipping browser measurement, using stored overlay lines',
+      );
+      (this as any)._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 as any).textJustify = 'inter-word';
+      (testElement.style as any).unicodeBidi = 'plaintext';
+      (testElement.style as any).wordSpacing = 'normal';
+      // Match font smoothing from overlay editor
+      (testElement.style as any).webkitFontSmoothing = 'auto';
+      (testElement.style as any).mozOsxFontSmoothing = 'auto';
     } else {
       testElement.style.textAlign = this.textAlign;
     }
-    
+
     testElement.textContent = text;
 
     document.body.appendChild(testElement);
@@ -918,22 +1023,25 @@ export class Textbox<
         let currentLineStart = 0;
         const textLength = text.length;
         let previousBottom = 0;
-        
+
         for (let i = 0; i <= textLength; i++) {
           range.setStart(textNode, currentLineStart);
           range.setEnd(textNode, i);
           const rect = range.getBoundingClientRect();
-          
-          if (i > currentLineStart && (rect.bottom > previousBottom + 5 || i === textLength)) {
+
+          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
               const graphemeLine = lineText.split('');
               graphemeLines.push(graphemeLine);
-                    }
+            }
             currentLineStart = lineEnd;
             previousBottom = rect.bottom;
           }
@@ -950,51 +1058,73 @@ export class Textbox<
     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)`);
-    console.log(`   clientHeight: ${clientHeight}px (content + padding, no border/scrollbar)`);
-    console.log(`   boundingRect.height: ${boundingRect.height}px (actual rendered height)`);
-    console.log(`   Font size: ${this.fontSize}px, Line height: ${this.lineHeight || 1.16}, Lines: ${lines.length}`);
+    console.log(
+      `   scrollHeight: ${actualBrowserHeight}px (content + padding + hidden overflow)`,
+    );
+    console.log(
+      `   offsetHeight: ${offsetHeight}px (content + padding + border)`,
+    );
+    console.log(
+      `   clientHeight: ${clientHeight}px (content + padding, no border/scrollbar)`,
+    );
+    console.log(
+      `   boundingRect.height: ${boundingRect.height}px (actual rendered height)`,
+    );
+    console.log(
+      `   Font size: ${this.fontSize}px, Line height: ${this.lineHeight || 1.16}, Lines: ${lines.length}`,
+    );
 
     // For justify alignment, extract space measurements from browser BEFORE removing element
     let justifySpaceMeasurements = null;
     if (this.textAlign.includes('justify')) {
-      justifySpaceMeasurements = this._extractJustifySpaceMeasurements(testElement, lines);
+      justifySpaceMeasurements = this._extractJustifySpaceMeasurements(
+        testElement,
+        lines,
+      );
     }
 
     document.body.removeChild(testElement);
 
     console.log(`🔤 Browser wrapping result: ${lines.length} lines`);
-    
+
     // Try different height measurements to find the most accurate
     let bestHeight = actualBrowserHeight;
-    
+
     // If scrollHeight and offsetHeight differ significantly, investigate
     if (Math.abs(actualBrowserHeight - offsetHeight) > 2) {
-      console.log(`🔤 Height discrepancy detected: scrollHeight=${actualBrowserHeight}px vs offsetHeight=${offsetHeight}px`);
+      console.log(
+        `🔤 Height discrepancy detected: scrollHeight=${actualBrowserHeight}px vs offsetHeight=${offsetHeight}px`,
+      );
     }
-    
+
     // Consider using boundingRect height if it's larger (sometimes more accurate for visible content)
     if (boundingRect.height > bestHeight) {
-      console.log(`🔤 Using boundingRect height (${boundingRect.height}px) instead of scrollHeight (${bestHeight}px)`);
+      console.log(
+        `🔤 Using boundingRect height (${boundingRect.height}px) instead of scrollHeight (${bestHeight}px)`,
+      );
       bestHeight = boundingRect.height;
     }
-    
+
     // Font-specific height adjustments for accurate bounding box
     let adjustedHeight = bestHeight;
-    
+
     // Fonts without English glyphs need additional height buffer due to different font metrics
     const lacksEnglishGlyphs = fontLacksEnglishGlyphsCached(this.fontFamily);
     if (lacksEnglishGlyphs) {
       const glyphBuffer = this.fontSize * 0.25; // 25% of font size for non-English fonts
       adjustedHeight = bestHeight + glyphBuffer;
-      console.log(`🔤 Non-English font detected (${this.fontFamily}): Adding ${glyphBuffer}px buffer (${bestHeight}px + ${glyphBuffer}px = ${adjustedHeight}px)`);
+      console.log(
+        `🔤 Non-English font detected (${this.fontFamily}): Adding ${glyphBuffer}px buffer (${bestHeight}px + ${glyphBuffer}px = ${adjustedHeight}px)`,
+      );
     } else {
-      console.log(`🔤 Standard font (${this.fontFamily}): Using browser height directly (${bestHeight}px)`);
+      console.log(
+        `🔤 Standard font (${this.fontFamily}): Using browser height directly (${bestHeight}px)`,
+      );
     }
-    
+
     return {
       _unwrappedLines: [text.split('')],
       lines: lines,
@@ -1002,52 +1132,56 @@ export class Textbox<
       graphemeLines: graphemeLines,
       justifySpaceMeasurements: justifySpaceMeasurements,
       actualBrowserHeight: adjustedHeight,
+      width: clientWidth,
     };
   }
 
-
-
-
   /**
    * Extract justify space measurements from browser
    * @private
    */
   _extractJustifySpaceMeasurements(element: HTMLElement, lines: string[]) {
-    console.log(`🔤 Extracting browser justify space measurements for ${lines.length} lines`);
-    
+    console.log(
+      `🔤 Extracting browser justify space measurements for ${lines.length} lines`,
+    );
+
     // For now, we'll use a simplified approach:
     // Apply uniform space expansion to match the line width
     const spaceWidths: number[][] = [];
-    
+
     lines.forEach((line, lineIndex) => {
       const lineSpaces: number[] = [];
       const spaceCount = (line.match(/\s/g) || []).length;
-      
-      if (spaceCount > 0 && lineIndex < lines.length - 1) { // Don't justify last line
+
+      if (spaceCount > 0 && lineIndex < lines.length - 1) {
+        // Don't justify last line
         // Calculate how much space expansion is needed
         const normalSpaceWidth = 6.4; // Default space width for STV font
         const lineWidth = this.width;
-        
+
         // Estimate natural line width
         const charCount = line.length - spaceCount;
         const avgCharWidth = 12; // Approximate for STV font
-        const naturalWidth = charCount * avgCharWidth + spaceCount * normalSpaceWidth;
-        
+        const naturalWidth =
+          charCount * avgCharWidth + spaceCount * normalSpaceWidth;
+
         // Calculate expanded space width
-        const remainingSpace = lineWidth - (charCount * avgCharWidth);
+        const remainingSpace = lineWidth - charCount * avgCharWidth;
         const expandedSpaceWidth = remainingSpace / spaceCount;
-        
-        console.log(`🔤 Line ${lineIndex}: ${spaceCount} spaces, natural: ${normalSpaceWidth}px -> justified: ${expandedSpaceWidth.toFixed(1)}px`);
-        
+
+        console.log(
+          `🔤 Line ${lineIndex}: ${spaceCount} spaces, natural: ${normalSpaceWidth}px -> justified: ${expandedSpaceWidth.toFixed(1)}px`,
+        );
+
         // Fill array with expanded space widths for this line
         for (let i = 0; i < spaceCount; i++) {
           lineSpaces.push(expandedSpaceWidth);
         }
       }
-      
+
       spaceWidths.push(lineSpaces);
     });
-    
+
     return spaceWidths;
   }
 
@@ -1061,20 +1195,37 @@ export class Textbox<
       return;
     }
 
+    // Check for overlay justify measurements first
+    const overlayMeasurements = (this as any)._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 as any;
     if (!styleMap || !styleMap.justifySpaceMeasurements) {
-      console.warn('🔤 BROWSER JUSTIFY: No justify space measurements available');
+      console.warn(
+        '🔤 BROWSER JUSTIFY: No justify space measurements available',
+      );
       return;
     }
 
     const spaceWidths = styleMap.justifySpaceMeasurements as number[][];
-    console.log('🔤 BROWSER JUSTIFY: Applying space measurements to __charBounds');
+    console.log(
+      '🔤 BROWSER JUSTIFY: Applying space measurements to __charBounds',
+    );
 
     // Apply space widths to character bounds
     this._textLines.forEach((line, lineIndex) => {
-      if (!this.__charBounds || !this.__charBounds[lineIndex] || !spaceWidths[lineIndex]) return;
-      
+      if (
+        !this.__charBounds ||
+        !this.__charBounds[lineIndex] ||
+        !spaceWidths[lineIndex]
+      )
+        return;
+
       const lineBounds = this.__charBounds[lineIndex];
       const lineSpaceWidths = spaceWidths[lineIndex];
       let spaceIndex = 0;
@@ -1092,7 +1243,7 @@ export class Textbox<
           spaceIndex++;
         }
       }
-      
+
       spaceIndex = 0;
       let remainingDiff = spaceDiffs.reduce((a, b) => a + b, 0);
 
@@ -1111,8 +1262,10 @@ export class Textbox<
           const oldWidth = charBound.width;
           charBound.width += diff;
           charBound.kernedWidth += diff;
-          console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${charBound.width.toFixed(1)}px`);
-          
+          console.log(
+            `🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${charBound.width.toFixed(1)}px`,
+          );
+
           if (isRtl) {
             remainingDiff -= diff;
           } else {
@@ -1133,6 +1286,148 @@ export class Textbox<
     });
   }
 
+  /**
+   * Apply overlay justify measurements to character bounds
+   * @private
+   */
+  _applyOverlayJustifySpaces(overlayMeasurements: any) {
+    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: HTMLTextAreaElement) {
+    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 as any)[prop] = (computedStyle as any)[prop];
+    });
+
+    testElement.textContent = text;
+    document.body.appendChild(testElement);
+
+    try {
+      // Extract justify space measurements using the same logic
+      const lines = text.split('\n');
+      const justifyMeasurements: any = {};
+
+      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 as any)[prop] = (computedStyle as any)[
+                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 as any)[prop] = (computedStyle as any)[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 as any)[prop] = (computedStyle as any)[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 as any)._overlayJustifyMeasurements = justifyMeasurements;
+      console.log(
+        '💾 STORED: Overlay justify measurements',
+        justifyMeasurements,
+      );
+    } finally {
+      document.body.removeChild(testElement);
+    }
+  }
+
   /**
    * Fallback to default Fabric wrapping
    * @private
@@ -1176,29 +1471,32 @@ export class Textbox<
   private initializeEventListeners(): void {
     // Track which side is being used for resize to handle position compensation
     let resizeOrigin: 'left' | 'right' | null = null;
-    
+
     // Detect resize origin during resizing
     this.on('resizing', (e: any) => {
       // Check transform origin to determine which side is being resized
       if (e.transform) {
         const { originX } = e.transform;
         // originX tells us which side is the anchor - opposite side is being dragged
-        resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
+        resizeOrigin =
+          originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
       } else if (e.originX) {
         const { originX } = e;
-        resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
+        resizeOrigin =
+          originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
       }
     });
-    
+
     // Only trigger safety snap after resize is complete (not during)
     // 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
     });
-    
+
     // Also listen to canvas-level modified event as backup
     this.canvas?.on('object:modified', (e) => {
       if (e.target === this) {
@@ -1218,24 +1516,29 @@ export class Textbox<
    */
   private safetySnapWidth(resizeOrigin?: 'left' | 'right' | null): void {
     // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
-    if (!this._textLines || this.type.toLowerCase() !== 'textbox' || this._textLines.length === 0) {
+    if (
+      !this._textLines ||
+      this.type.toLowerCase() !== 'textbox' ||
+      this._textLines.length === 0
+    ) {
       return;
     }
-    
+
     const lineCount = this._textLines.length;
     if (lineCount === 0) return;
 
     // Check all lines, not just the last one
     let maxActualLineWidth = 0; // Actual measured width without buffers
-    let maxRequiredWidth = 0;   // Width including RTL buffer
-    
+    let maxRequiredWidth = 0; // Width including RTL buffer
+
     for (let i = 0; i < lineCount; i++) {
       const lineText = this._textLines[i].join(''); // Convert grapheme array to string
       const lineWidth = this.getLineWidth(i);
       maxActualLineWidth = Math.max(maxActualLineWidth, lineWidth);
-      
+
       // RTL detection - regex for Arabic, Hebrew, and other RTL characters
-      const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
+      const rtlRegex =
+        /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
       if (rtlRegex.test(lineText)) {
         // Add minimal RTL compensation buffer - just enough to prevent clipping
         const rtlBuffer = (this.fontSize || 16) * 0.15; // 15% of font size (much smaller)
@@ -1247,42 +1550,42 @@ export class Textbox<
 
     // Safety margin - how close glyphs can get before we snap
     const safetyThreshold = 2; // px - very subtle trigger
-    
+
     if (maxRequiredWidth > this.width - safetyThreshold) {
       // Set width to exactly what's needed + minimal safety margin
       const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
-      
+
       // Store original position before width change
       const originalLeft = this.left;
       const originalTop = this.top;
       const widthIncrease = newWidth - this.width;
-      
-      // Change width 
+
+      // Change width
       this.set('width', newWidth);
-      
+
       // Force text layout recalculation
       this.initDimensions();
-      
+
       // Only compensate position when resizing from left handle
       // Right handle resize doesn't shift the text position
       if (resizeOrigin === 'left') {
         // 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();
-      
+
       // Also refresh the overlay editor if it exists
       if ((this as any).__overlayEditor) {
         setTimeout(() => {
           (this as any).__overlayEditor.refresh();
         }, 0);
       }
-      
+
       this.canvas?.requestRenderAll();
     }
   }
@@ -1296,11 +1599,11 @@ export class Textbox<
       // Clear all cached states to force fresh text layout calculation
       (this as any)._browserWrapCache = null;
       (this as any)._lastDimensionState = null;
-      
+
       // Force complete re-initialization
       this.initDimensions();
       this._forceClearCache = true;
-      
+
       // Ensure canvas refresh
       this.setCoords();
       if (this.canvas) {
@@ -1315,23 +1618,23 @@ export class Textbox<
    */
   forceTextReinitialization(): void {
     console.log('🔄 Force reinitializing Textbox object');
-    
+
     // CRITICAL: Ensure textbox is marked as initialized
     this.initialized = true;
-    
+
     // Clear all caches and force dirty state
     this._clearCache();
     this.dirty = true;
     this.dynamicMinWidth = 0;
-    
+
     // Force isEditing false to ensure clean state
     this.isEditing = false;
-    
+
     console.log('   → Set initialized=true, dirty=true, cleared caches');
-    
+
     // Re-initialize dimensions (this will handle justify properly)
     this.initDimensions();
-    
+
     // Double-check that justify was applied by checking space widths
     if (this.textAlign.includes('justify') && this.__charBounds) {
       setTimeout(() => {
@@ -1339,25 +1642,34 @@ export class Textbox<
         let hasVariableSpaces = false;
         this.__charBounds.forEach((lineBounds, i) => {
           if (lineBounds && this._textLines && this._textLines[i]) {
-            const spaces = lineBounds.filter((bound, j) => /\s/.test(this._textLines[i][j]));
+            const spaces = lineBounds.filter((bound, j) =>
+              /\s/.test(this._textLines[i][j]),
+            );
             if (spaces.length > 1) {
               const firstSpaceWidth = spaces[0].width;
-              hasVariableSpaces = spaces.some(space => Math.abs(space.width - firstSpaceWidth) > 0.1);
+              hasVariableSpaces = spaces.some(
+                (space) => Math.abs(space.width - firstSpaceWidth) > 0.1,
+              );
             }
           }
         });
-        
+
         if (!hasVariableSpaces && this.__charBounds.length > 0) {
-          console.warn('   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again');
+          console.warn(
+            '   ⚠️ Justify spaces still uniform - forcing enlargeSpaces again',
+          );
           if (this.enlargeSpaces) {
             this.enlargeSpaces();
           }
         } else {
           console.log('   ✅ Justify spaces properly expanded');
         }
-        
+
         // Ensure height is recalculated - use browser height if available
-        if ((this as any)._usingBrowserWrapping && (this as any)._actualBrowserHeight) {
+        if (
+          (this as any)._usingBrowserWrapping &&
+          (this as any)._actualBrowserHeight
+        ) {
           this.height = (this as any)._actualBrowserHeight;
           console.log(`🔤 JUSTIFY: Preserved browser height: ${this.height}px`);
         } else {
@@ -1369,6 +1681,38 @@ export class Textbox<
     }
   }
 
+  /**
+   * 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(() => {
+          this.width = originalWidth;
+          this.initDimensions();
+          this.canvas?.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
@@ -1378,12 +1722,67 @@ export class Textbox<
     T extends Omit<Props & TClassProperties<this>, keyof SProps>,
     K extends keyof T = never,
   >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
-    return super.toObject<T, K>([
+    const obj = super.toObject<T, K>([
       'minWidth',
       'splitByGrapheme',
       ...propertiesToInclude,
     ] as K[]);
+
+    // For justify text with overlay editing, ensure measurements are available
+    if (this.textAlign.includes('justify') && this.useOverlayEditing) {
+      // If character bounds don't exist yet, initialize dimensions to calculate them
+      if (!(this as any).__charBounds?.length) {
+        console.log('🔧 SERIALIZE: Character bounds missing, initializing dimensions for justify text');
+        this.initDimensions();
+      }
+
+      // Now save the measurements if they exist
+      if ((this as any).__charBounds?.length) {
+        console.log('💾 SERIALIZE: Saving justify measurements to JSON');
+        (obj as any)._justifyMeasurements = {
+          __charBounds: (this as any).__charBounds,
+          __lineHeights: (this as any).__lineHeights,
+          __lineWidths: (this as any).__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: string, value: any) {
+    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 as any).__charBounds = value.__charBounds;
+      (this as any).__lineHeights = value.__lineHeights;
+      (this as any).__lineWidths = value.__lineWidths;
+
+      // Mark that we have restored data so we don't interfere with it
+      (this as any)._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;
   }
+
 }
 
 classRegistry.setClass(Textbox);