@nasser-sw/fabric 7.0.1-beta1 → 7.0.1-beta11

package/dist/src/shapes/Textbox.mjs

@@ -3,6 +3,7 @@ import { IText } from './IText/IText.mjs';
 import { classRegistry } from '../ClassRegistry.mjs';
 import { createTextboxDefaultControls } from '../controls/commonControls.mjs';
 import { JUSTIFY } from './Text/constants.mjs';
+import { fontLacksEnglishGlyphsCached } from '../text/measure.mjs';
 import { layoutText } from '../text/layout.mjs';
 
 // @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
@@ -19,11 +20,11 @@ const textboxDefaultValues = {
 
 // @TODO this is not complete
 
-/**
- * Textbox class, based on IText, allows the user to resize the text rectangle
- * and wraps lines automatically. Textboxes have their Y scaling locked, the
- * user can only change width. Height is adjusted automatically based on the
- * wrapping of lines.
+/**
+ * Textbox class, based on IText, allows the user to resize the text rectangle
+ * and wraps lines automatically. Textboxes have their Y scaling locked, the
+ * user can only change width. Height is adjusted automatically based on the
+ * wrapping of lines.
  */
 class Textbox extends IText {
   static getDefaults() {
@@ -33,10 +34,10 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * 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, {
@@ -46,10 +47,10 @@ class Textbox extends IText {
     this.initializeEventListeners();
   }
 
-  /**
-   * Creates the default control object.
-   * If you prefer to have on instance of controls shared among all objects
-   * make this function return an empty object and add controls to the ownDefaults object
+  /**
+   * Creates the default control object.
+   * If you prefer to have on instance of controls shared among all objects
+   * make this function return an empty object and add controls to the ownDefaults object
    */
   static createControls() {
     return {
@@ -57,16 +58,35 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Unlike superclass's version of this function, Textbox does not update
-   * its width.
-   * @private
-   * @override
+  /**
+   * Unlike superclass's version of this function, Textbox does not update
+   * its width.
+   * @private
+   * @override
    */
   initDimensions() {
     if (!this.initialized) {
+      this.initialized = true;
+    }
+
+    // Prevent rapid recalculations during moves
+    if (this._usingBrowserWrapping) {
+      const now = Date.now();
+      const lastCall = this._lastInitDimensionsTime || 0;
+      const isRapidCall = now - lastCall < 100;
+      const isDuringLoading = this._jsonLoading || !this._browserWrapInitialized;
+      if (isRapidCall && !isDuringLoading) {
+        return;
+      }
+      this._lastInitDimensionsTime = now;
+    }
+
+    // Skip if nothing changed
+    const currentState = `${this.text}|${this.width}|${this.fontSize}|${this.fontFamily}|${this.textAlign}`;
+    if (this._lastDimensionState === currentState && this._textLines && this._textLines.length > 0) {
       return;
     }
+    this._lastDimensionState = currentState;
 
     // Use advanced layout if enabled
     if (this.enableAdvancedLayout) {
@@ -77,22 +97,147 @@ class Textbox extends IText {
     // clear dynamicMinWidth as it will be different after we re-wrap line
     this.dynamicMinWidth = 0;
     // wrap lines
-    this._styleMap = this._generateStyleMap(this._splitText());
-    // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap
-    if (this.dynamicMinWidth > this.width) {
+    const splitTextResult = this._splitText();
+    this._styleMap = this._generateStyleMap(splitTextResult);
+
+    // For browser wrapping, ensure _textLines is set from browser results
+    if (this._usingBrowserWrapping && splitTextResult && splitTextResult.lines) {
+      this._textLines = splitTextResult.lines.map(line => line.split(''));
+
+      // Store justify measurements and browser height
+      const justifyMeasurements = splitTextResult.justifySpaceMeasurements;
+      if (justifyMeasurements) {
+        this._styleMap.justifySpaceMeasurements = justifyMeasurements;
+      }
+      const actualHeight = splitTextResult.actualBrowserHeight;
+      if (actualHeight) {
+        this._actualBrowserHeight = actualHeight;
+      }
+    }
+    // Don't auto-resize width when using browser wrapping to prevent width increases during moves
+    if (!this._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._usingBrowserWrapping && this.width < 50) {
+      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._usingBrowserWrapping) {
+      this._browserWrapInitialized = true;
+    }
     if (this.textAlign.includes(JUSTIFY)) {
+      // For browser wrapping fonts, apply browser-calculated justify spaces
+      if (this._usingBrowserWrapping) {
+        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._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;
+      }
+
+      // For non-browser-wrapping fonts, use Fabric's justify system
       // once text is measured we need to make space fatter to make justified text.
-      this.enlargeSpaces();
+      // Ensure __charBounds exists and fonts are ready before applying justify
+      if (this.__charBounds && this.__charBounds.length > 0) {
+        // Check if font is ready for accurate justify calculations
+        const fontReady = this._isFontReady ? this._isFontReady() : true;
+        if (fontReady) {
+          this.enlargeSpaces();
+        } else {
+          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');
+        // Defer the justify calculation until the next frame
+        setTimeout(() => {
+          if (this.__charBounds && this.__charBounds.length > 0 && this.enlargeSpaces) {
+            var _this$canvas;
+            console.log('🔧 Applying deferred Textbox justify alignment');
+            this.enlargeSpaces();
+            (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.requestRenderAll();
+          }
+        }, 0);
+      }
+    }
+    // Calculate height - use Fabric's calculation for proper text rendering space
+    if (this._usingBrowserWrapping && this._textLines && this._textLines.length > 0) {
+      const actualBrowserHeight = this._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) {
+        var _this$canvas2, _this$_textLines;
+        this.setCoords();
+        (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.requestRenderAll();
+
+        // DEBUG: Log exact positioning details
+        console.log(`🎯 POSITIONING DEBUG:`);
+        console.log(`   Textbox height: ${this.height}px`);
+        console.log(`   Textbox top: ${this.top}px`);
+        console.log(`   Textbox left: ${this.left}px`);
+        console.log(`   Text lines: ${((_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _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(`   _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`);
+      }
+    } else {
+      this.height = this.calcTextHeight();
+    }
+  }
+
+  /**
+   * Schedule justify calculation after font loads (Textbox-specific)
+   * @private
+   */
+  _scheduleJustifyAfterFontLoad() {
+    if (typeof document === 'undefined' || !('fonts' in document)) {
+      return;
+    }
+
+    // Only schedule if not already waiting
+    if (this._fontJustifyScheduled) {
+      return;
     }
-    // clear cache and re-calculate height
-    this.height = this.calcTextHeight();
+    this._fontJustifyScheduled = true;
+    const fontSpec = `${this.fontSize}px ${this.fontFamily}`;
+    document.fonts.load(fontSpec).then(() => {
+      var _this$canvas3;
+      this._fontJustifyScheduled = false;
+      console.log('🔧 Textbox: Font loaded, applying justify alignment');
+
+      // Re-run initDimensions to ensure proper justify calculation
+      this.initDimensions();
+      (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 || _this$canvas3.requestRenderAll();
+    }).catch(() => {
+      this._fontJustifyScheduled = false;
+      console.warn('⚠️ Textbox: Font loading failed, justify may be incorrect');
+    });
   }
 
-  /**
-   * Advanced dimensions calculation using new layout engine
-   * @private
+  /**
+   * Advanced dimensions calculation using new layout engine
+   * @private
    */
   initDimensionsAdvanced() {
     if (!this.initialized) {
@@ -147,9 +292,9 @@ class Textbox extends IText {
     this.dirty = true;
   }
 
-  /**
-   * Generate style map from new layout format
-   * @private
+  /**
+   * Generate style map from new layout format
+   * @private
    */
   _generateStyleMapFromLayout(layout) {
     const map = {};
@@ -171,12 +316,12 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Generate an object that translates the style object so that it is
-   * broken up by visual lines (new lines and automatic wrapping).
-   * The original text styles object is broken up by actual lines (new lines only),
-   * which is only sufficient for Text / IText
-   * @private
+  /**
+   * Generate an object that translates the style object so that it is
+   * broken up by visual lines (new lines and automatic wrapping).
+   * The original text styles object is broken up by actual lines (new lines only),
+   * which is only sufficient for Text / IText
+   * @private
    */
   _generateStyleMap(textInfo) {
     let realLineCount = 0,
@@ -203,10 +348,10 @@ class Textbox extends IText {
     return map;
   }
 
-  /**
-   * Returns true if object has a style property or has it on a specified line
-   * @param {Number} lineIndex
-   * @return {Boolean}
+  /**
+   * Returns true if object has a style property or has it on a specified line
+   * @param {Number} lineIndex
+   * @return {Boolean}
    */
   styleHas(property, lineIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -218,10 +363,10 @@ class Textbox extends IText {
     return super.styleHas(property, lineIndex);
   }
 
-  /**
-   * Returns true if object has no styling or no styling in a line
-   * @param {Number} lineIndex , lineIndex is on wrapped lines.
-   * @return {Boolean}
+  /**
+   * Returns true if object has no styling or no styling in a line
+   * @param {Number} lineIndex , lineIndex is on wrapped lines.
+   * @return {Boolean}
    */
   isEmptyStyles(lineIndex) {
     if (!this.styles) {
@@ -258,11 +403,11 @@ class Textbox extends IText {
     return true;
   }
 
-  /**
-   * @protected
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
+  /**
+   * @protected
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined
    */
   _getStyleDeclaration(lineIndex, charIndex) {
     if (this._styleMap && !this.isWrapping) {
@@ -276,59 +421,59 @@ class Textbox extends IText {
     return super._getStyleDeclaration(lineIndex, charIndex);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @param {Object} style
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {Object} style
+   * @private
    */
   _setStyleDeclaration(lineIndex, charIndex, style) {
     const map = this._styleMap[lineIndex];
     super._setStyleDeclaration(map.line, map.offset + charIndex, style);
   }
 
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @private
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
    */
   _deleteStyleDeclaration(lineIndex, charIndex) {
     const map = this._styleMap[lineIndex];
     super._deleteStyleDeclaration(map.line, map.offset + charIndex);
   }
 
-  /**
-   * probably broken need a fix
-   * Returns the real style line that correspond to the wrapped lineIndex line
-   * Used just to verify if the line does exist or not.
-   * @param {Number} lineIndex
-   * @returns {Boolean} if the line exists or not
-   * @private
+  /**
+   * probably broken need a fix
+   * Returns the real style line that correspond to the wrapped lineIndex line
+   * Used just to verify if the line does exist or not.
+   * @param {Number} lineIndex
+   * @returns {Boolean} if the line exists or not
+   * @private
    */
   _getLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     return !!this.styles[map.line];
   }
 
-  /**
-   * Set the line style to an empty object so that is initialized
-   * @param {Number} lineIndex
-   * @param {Object} style
-   * @private
+  /**
+   * Set the line style to an empty object so that is initialized
+   * @param {Number} lineIndex
+   * @param {Object} style
+   * @private
    */
   _setLineStyle(lineIndex) {
     const map = this._styleMap[lineIndex];
     super._setLineStyle(map.line);
   }
 
-  /**
-   * Wraps text using the 'width' property of Textbox. First this function
-   * splits text on newlines, so we preserve newlines entered by the user.
-   * Then it wraps each line using the width of the Textbox by calling
-   * _wrapLine().
-   * @param {Array} lines The string array of text that is split into lines
-   * @param {Number} desiredWidth width you want to wrap to
-   * @returns {Array} Array of lines
+  /**
+   * Wraps text using the 'width' property of Textbox. First this function
+   * splits text on newlines, so we preserve newlines entered by the user.
+   * Then it wraps each line using the width of the Textbox by calling
+   * _wrapLine().
+   * @param {Array} lines The string array of text that is split into lines
+   * @param {Number} desiredWidth width you want to wrap to
+   * @returns {Array} Array of lines
    */
   _wrapText(lines, desiredWidth) {
     this.isWrapping = true;
@@ -342,12 +487,12 @@ class Textbox extends IText {
     return wrapped;
   }
 
-  /**
-   * For each line of text terminated by an hard line stop,
-   * measure each word width and extract the largest word from all.
-   * The returned words here are the one that at the end will be rendered.
-   * @param {string[]} lines the lines we need to measure
-   *
+  /**
+   * For each line of text terminated by an hard line stop,
+   * measure each word width and extract the largest word from all.
+   * The returned words here are the one that at the end will be rendered.
+   * @param {string[]} lines the lines we need to measure
+   *
    */
   getGraphemeDataForRender(lines) {
     const splitByGrapheme = this.splitByGrapheme,
@@ -380,17 +525,17 @@ class Textbox extends IText {
     };
   }
 
-  /**
-   * Helper function to measure a string of text, given its lineIndex and charIndex offset
-   * It gets called when charBounds are not available yet.
-   * Override if necessary
-   * Use with {@link Textbox#wordSplit}
-   *
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {String} text
-   * @param {number} lineIndex
-   * @param {number} charOffset
-   * @returns {number}
+  /**
+   * Helper function to measure a string of text, given its lineIndex and charIndex offset
+   * It gets called when charBounds are not available yet.
+   * Override if necessary
+   * Use with {@link Textbox#wordSplit}
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {String} text
+   * @param {number} lineIndex
+   * @param {number} charOffset
+   * @returns {number}
    */
   _measureWord(word, lineIndex) {
     let charOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -405,26 +550,26 @@ class Textbox extends IText {
     return width;
   }
 
-  /**
-   * Override this method to customize word splitting
-   * Use with {@link Textbox#_measureWord}
-   * @param {string} value
-   * @returns {string[]} array of words
+  /**
+   * Override this method to customize word splitting
+   * Use with {@link Textbox#_measureWord}
+   * @param {string} value
+   * @returns {string[]} array of words
    */
   wordSplit(value) {
     return value.split(this._wordJoiners);
   }
 
-  /**
-   * Wraps a line of text using the width of the Textbox as desiredWidth
-   * and leveraging the known width o words from GraphemeData
-   * @private
-   * @param {Number} lineIndex
-   * @param {Number} desiredWidth width you want to wrap the line to
-   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
-   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
-   * @returns {Array} Array of line(s) into which the given text is wrapped
-   * to.
+  /**
+   * Wraps a line of text using the width of the Textbox as desiredWidth
+   * and leveraging the known width o words from GraphemeData
+   * @private
+   * @param {Number} lineIndex
+   * @param {Number} desiredWidth width you want to wrap the line to
+   * @param {GraphemeData} graphemeData an object containing all the lines' words width.
+   * @param {Number} reservedSpace space to remove from wrapping for custom functionalities
+   * @returns {Array} Array of line(s) into which the given text is wrapped
+   * to.
    */
   _wrapLine(lineIndex, desiredWidth, _ref) {
     let {
@@ -454,19 +599,33 @@ class Textbox extends IText {
         width: wordWidth
       } = data[i];
       offset += word.length;
-      lineWidth += infixWidth + wordWidth - additionalSpace;
-      if (lineWidth > maxWidth && !lineJustStarted) {
+
+      // Predictive wrapping: check if adding this word would exceed the width
+      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`);
+      if (potentialLineWidth > conservativeMaxWidth && !lineJustStarted) {
+        // This word would exceed the width, wrap before adding it
+        console.log(`🔧 FABRIC WRAP! Line: "${currentLineText}" (${lineWidth.toFixed(1)}px)`);
         graphemeLines.push(line);
         line = [];
-        lineWidth = wordWidth;
+        lineWidth = wordWidth; // Start new line with just this word
         lineJustStarted = true;
       } else {
-        lineWidth += additionalSpace;
+        // Word fits, add it to current line
+        lineWidth = potentialLineWidth + additionalSpace;
       }
       if (!lineJustStarted && !splitByGrapheme) {
         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)`);
       infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset);
       offset++;
       lineJustStarted = false;
@@ -476,17 +635,27 @@ class Textbox extends IText {
     // TODO: this code is probably not necessary anymore.
     // it can be moved out of this function since largestWordWidth is now
     // known in advance
-    if (largestWordWidth + reservedSpace > this.dynamicMinWidth) {
+    // Don't modify dynamicMinWidth when using browser wrapping to prevent width increases
+    if (!this._usingBrowserWrapping && largestWordWidth + reservedSpace > this.dynamicMinWidth) {
+      console.log(`🔧 FABRIC updating dynamicMinWidth: ${this.dynamicMinWidth} -> ${largestWordWidth - additionalSpace + reservedSpace}`);
       this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
+    } else if (this._usingBrowserWrapping) {
+      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)`);
+    });
     return graphemeLines;
   }
 
-  /**
-   * Detect if the text line is ended with an hard break
-   * text and itext do not have wrapping, return false
-   * @param {Number} lineIndex text to split
-   * @return {Boolean}
+  /**
+   * Detect if the text line is ended with an hard break
+   * text and itext do not have wrapping, return false
+   * @param {Number} lineIndex text to split
+   * @return {Boolean}
    */
   isEndOfWrapping(lineIndex) {
     if (!this._styleMap[lineIndex + 1]) {
@@ -500,12 +669,12 @@ class Textbox extends IText {
     return false;
   }
 
-  /**
-   * Detect if a line has a linebreak and so we need to account for it when moving
-   * and counting style.
-   * This is important only for splitByGrapheme at the end of wrapping.
-   * If we are not wrapping the offset is always 1
-   * @return Number
+  /**
+   * Detect if a line has a linebreak and so we need to account for it when moving
+   * and counting style.
+   * This is important only for splitByGrapheme at the end of wrapping.
+   * If we are not wrapping the offset is always 1
+   * @return Number
    */
   missingNewlineOffset(lineIndex, skipWrapping) {
     if (this.splitByGrapheme && !skipWrapping) {
@@ -514,14 +683,268 @@ class Textbox extends IText {
     return 1;
   }
 
-  /**
-   * Gets lines of text to render in the Textbox. This function calculates
-   * text wrapping on the fly every time it is called.
-   * @param {String} text text to split
-   * @returns {Array} Array of lines in the Textbox.
-   * @override
+  /**
+   * Gets lines of text to render in the Textbox. This function calculates
+   * text wrapping on the fly every time it is called.
+   * @param {String} text text to split
+   * @returns {Array} Array of lines in the Textbox.
+   * @override
    */
   _splitTextIntoLines(text) {
+    // Check if we need browser wrapping using smart font detection
+    const needsBrowserWrapping = this.fontFamily && fontLacksEnglishGlyphsCached(this.fontFamily);
+    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._browserWrapCache && this._browserWrapCache.key === cacheKey) {
+        const cachedResult = this._browserWrapCache.result;
+
+        // For justify alignment, ensure we have the measurements
+        if (this.textAlign.includes('justify') && !cachedResult.justifySpaceMeasurements) ; else {
+          return cachedResult;
+        }
+      }
+      const result = this._splitTextIntoLinesWithBrowser(text);
+
+      // Cache the result
+      this._browserWrapCache = {
+        key: cacheKey,
+        result
+      };
+
+      // Mark that we used browser wrapping to prevent dynamicMinWidth modifications
+      this._usingBrowserWrapping = true;
+      return result;
+    }
+
+    // Clear the browser wrapping flag when using regular wrapping
+    this._usingBrowserWrapping = false;
+
+    // Default Fabric wrapping for other fonts
+    const newText = super._splitTextIntoLines(text),
+      graphemeLines = this._wrapText(newText.lines, this.width),
+      lines = new Array(graphemeLines.length);
+    for (let i = 0; i < graphemeLines.length; i++) {
+      lines[i] = graphemeLines[i].join('');
+    }
+    newText.lines = lines;
+    newText.graphemeLines = graphemeLines;
+    return newText;
+  }
+
+  /**
+   * Use browser's native text wrapping for accurate handling of fonts without English glyphs
+   * @private
+   */
+  _splitTextIntoLinesWithBrowser(text) {
+    if (typeof document === 'undefined') {
+      // Fallback to regular wrapping in Node.js
+      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`;
+    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.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)
+    if (this.textAlign.includes('justify')) {
+      testElement.style.textAlign = 'justify';
+      testElement.style.textAlignLast = 'auto'; // Let browser decide last line alignment
+    } else {
+      testElement.style.textAlign = this.textAlign;
+    }
+    testElement.textContent = text;
+    document.body.appendChild(testElement);
+
+    // Get the browser's natural line breaks
+    const range = document.createRange();
+    const lines = [];
+    const graphemeLines = [];
+    try {
+      // Simple approach: split by measuring character positions
+      const textNode = testElement.firstChild;
+      if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        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)) {
+            // New line detected or end of text
+            const lineEnd = i === textLength ? i : i - 1;
+            const lineText = text.substring(currentLineStart, lineEnd).trim();
+            if (lineText) {
+              lines.push(lineText);
+              // Convert to graphemes for compatibility
+              const graphemeLine = lineText.split('');
+              graphemeLines.push(graphemeLine);
+            }
+            currentLineStart = lineEnd;
+            previousBottom = rect.bottom;
+          }
+        }
+      }
+    } catch (error) {
+      console.warn('Browser wrapping failed, using fallback:', error);
+      document.body.removeChild(testElement);
+      return this._splitTextIntoLinesDefault(text);
+    }
+
+    // Extract actual browser height BEFORE removing element
+    const actualBrowserHeight = testElement.scrollHeight;
+    const offsetHeight = testElement.offsetHeight;
+    const clientHeight = testElement.clientHeight;
+    const boundingRect = testElement.getBoundingClientRect();
+    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}`);
+
+    // For justify alignment, extract space measurements from browser BEFORE removing element
+    let justifySpaceMeasurements = null;
+    if (this.textAlign.includes('justify')) {
+      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`);
+    }
+
+    // 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)`);
+      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)`);
+    } else {
+      console.log(`🔤 Standard font (${this.fontFamily}): Using browser height directly (${bestHeight}px)`);
+    }
+    return {
+      _unwrappedLines: [text.split('')],
+      lines: lines,
+      graphemeText: text.split(''),
+      graphemeLines: graphemeLines,
+      justifySpaceMeasurements: justifySpaceMeasurements,
+      actualBrowserHeight: adjustedHeight
+    };
+  }
+
+  /**
+   * Extract justify space measurements from browser
+   * @private
+   */
+  _extractJustifySpaceMeasurements(element, 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 = [];
+    lines.forEach((line, lineIndex) => {
+      const lineSpaces = [];
+      const spaceCount = (line.match(/\s/g) || []).length;
+      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
+
+        // Calculate expanded space width
+        const remainingSpace = lineWidth - charCount * avgCharWidth;
+        const expandedSpaceWidth = remainingSpace / spaceCount;
+        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;
+  }
+
+  /**
+   * Apply browser-calculated justify space measurements
+   * @private
+   */
+  _applyBrowserJustifySpaces() {
+    if (!this._textLines || !this.__charBounds) {
+      console.warn('🔤 BROWSER JUSTIFY: _textLines or __charBounds not ready');
+      return;
+    }
+
+    // Get space measurements from browser wrapping result
+    const styleMap = this._styleMap;
+    if (!styleMap || !styleMap.justifySpaceMeasurements) {
+      console.warn('🔤 BROWSER JUSTIFY: No justify space measurements available');
+      return;
+    }
+    const spaceWidths = styleMap.justifySpaceMeasurements;
+    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;
+      const lineBounds = this.__charBounds[lineIndex];
+      const lineSpaceWidths = spaceWidths[lineIndex];
+      let spaceIndex = 0;
+      for (let charIndex = 0; charIndex < line.length; charIndex++) {
+        if (/\s/.test(line[charIndex]) && spaceIndex < lineSpaceWidths.length) {
+          const expandedWidth = lineSpaceWidths[spaceIndex];
+          if (lineBounds[charIndex]) {
+            const oldWidth = lineBounds[charIndex].width;
+            lineBounds[charIndex].width = expandedWidth;
+            console.log(`🔤 Line ${lineIndex} space ${spaceIndex}: ${oldWidth.toFixed(1)}px -> ${expandedWidth.toFixed(1)}px`);
+          }
+          spaceIndex++;
+        }
+      }
+    });
+  }
+
+  /**
+   * Fallback to default Fabric wrapping
+   * @private
+   */
+  _splitTextIntoLinesDefault(text) {
     const newText = super._splitTextIntoLines(text),
       graphemeLines = this._wrapText(newText.lines, this.width),
       lines = new Array(graphemeLines.length);
@@ -551,42 +974,29 @@ class Textbox extends IText {
     }
   }
 
-  /**
-   * Initialize event listeners for safety snap functionality
-   * @private
+  /**
+   * Initialize event listeners for safety snap functionality
+   * @private
    */
   initializeEventListeners() {
-    var _this$canvas;
+    var _this$canvas4;
     // Track which side is being used for resize to handle position compensation
     let resizeOrigin = null;
 
     // Detect resize origin during resizing
     this.on('resizing', e => {
       // Check transform origin to determine which side is being resized
-      console.log('🔍 Resize event data:', e);
       if (e.transform) {
         const {
-          originX,
-          originY
+          originX
         } = e.transform;
-        console.log('🔍 Transform origins:', {
-          originX,
-          originY
-        });
         // originX tells us which side is the anchor - opposite side is being dragged
         resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-        console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
       } else if (e.originX) {
         const {
-          originX,
-          originY
+          originX
         } = e;
-        console.log('🔍 Event origins:', {
-          originX,
-          originY
-        });
         resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-        console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
       }
     });
 
@@ -594,65 +1004,40 @@ 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
-      console.log('✅ Modified event fired - resize complete, triggering safety snap', {
-        resizeOrigin: currentResizeOrigin
-      });
       // 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 = this.canvas) === null || _this$canvas === void 0 || _this$canvas.on('object:modified', e => {
+    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 || _this$canvas4.on('object:modified', e => {
       if (e.target === this) {
         const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-        console.log('✅ Canvas object:modified fired for this textbox');
         setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
         resizeOrigin = null; // Reset after capturing
       }
     });
   }
 
-  /**
-   * Safety snap to prevent glyph clipping after manual resize.
-   * Similar to Polotno - checks if any glyphs are too close to edges
-   * and automatically expands width if needed.
-   * @private
-   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
+  /**
+   * Safety snap to prevent glyph clipping after manual resize.
+   * Similar to Polotno - checks if any glyphs are too close to edges
+   * and automatically expands width if needed.
+   * @private
+   * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
    */
   safetySnapWidth(resizeOrigin) {
-    var _this$_textLines;
-    console.log('🔍 safetySnapWidth called', {
-      isWrapping: this.isWrapping,
-      hasTextLines: !!this._textLines,
-      lineCount: ((_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _this$_textLines.length) || 0,
-      currentWidth: this.width,
-      type: this.type,
-      text: this.text
-    });
-
     // 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) {
-      var _this$_textLines2;
-      console.log('❌ Early return - missing requirements', {
-        hasTextLines: !!this._textLines,
-        typeMatch: this.type.toLowerCase() === 'textbox',
-        actualType: this.type,
-        hasLines: ((_this$_textLines2 = this._textLines) === null || _this$_textLines2 === void 0 ? void 0 : _this$_textLines2.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
 
     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]/;
@@ -669,14 +1054,9 @@ class Textbox extends IText {
     const safetyThreshold = 2; // px - very subtle trigger
 
     if (maxRequiredWidth > this.width - safetyThreshold) {
-      var _this$canvas2;
+      var _this$canvas5;
       // Set width to exactly what's needed + minimal safety margin
       const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
-      console.log(`Safety snap: ${this.width.toFixed(0)}px -> ${newWidth.toFixed(0)}px`, {
-        maxActualLineWidth: maxActualLineWidth.toFixed(1),
-        maxRequiredWidth: maxRequiredWidth.toFixed(1),
-        difference: (newWidth - this.width).toFixed(1)
-      });
 
       // Store original position before width change
       const originalLeft = this.left;
@@ -692,19 +1072,12 @@ class Textbox extends IText {
       // Only compensate position when resizing from left handle
       // Right handle resize doesn't shift the text position
       if (resizeOrigin === 'left') {
-        console.log('🔧 Compensating for left-side resize', {
-          originalLeft,
-          widthIncrease,
-          newLeft: originalLeft - widthIncrease
-        });
         // 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
         });
-      } else {
-        console.log('✅ Right-side resize, no compensation needed');
       }
       this.setCoords();
 
@@ -714,35 +1087,116 @@ class Textbox extends IText {
           this.__overlayEditor.refresh();
         }, 0);
       }
-      (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 || _this$canvas2.requestRenderAll();
+      (_this$canvas5 = this.canvas) === null || _this$canvas5 === void 0 || _this$canvas5.requestRenderAll();
+    }
+  }
+
+  /**
+   * Fix character selection mismatch after JSON loading for browser-wrapped fonts
+   * @private
+   */
+  _fixCharacterMappingAfterJsonLoad() {
+    if (this._usingBrowserWrapping) {
+      // Clear all cached states to force fresh text layout calculation
+      this._browserWrapCache = null;
+      this._lastDimensionState = null;
+
+      // Force complete re-initialization
+      this.initDimensions();
+      this._forceClearCache = true;
+
+      // Ensure canvas refresh
+      this.setCoords();
+      if (this.canvas) {
+        this.canvas.requestRenderAll();
+      }
+    }
+  }
+
+  /**
+   * Force complete textbox re-initialization (useful after JSON loading)
+   * Overrides Text version with Textbox-specific logic
+   */
+  forceTextReinitialization() {
+    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(() => {
+        var _this$canvas6;
+        // 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]));
+            if (spaces.length > 1) {
+              const firstSpaceWidth = spaces[0].width;
+              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');
+          if (this.enlargeSpaces) {
+            this.enlargeSpaces();
+          }
+        } else {
+          console.log('   ✅ Justify spaces properly expanded');
+        }
+
+        // Ensure height is recalculated - use browser height if available
+        if (this._usingBrowserWrapping && this._actualBrowserHeight) {
+          this.height = this._actualBrowserHeight;
+          console.log(`🔤 JUSTIFY: Preserved browser height: ${this.height}px`);
+        } else {
+          this.height = this.calcTextHeight();
+          console.log(`🔧 JUSTIFY: Used calcTextHeight: ${this.height}px`);
+        }
+        (_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 || _this$canvas6.requestRenderAll();
+      }, 10);
     }
   }
 
-  /**
-   * Returns object representation of an instance
-   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-   * @return {Object} object representation of an instance
+  /**
+   * Returns object representation of an instance
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+   * @return {Object} object representation of an instance
    */
   toObject() {
     let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
   }
 }
-/**
- * Minimum width of textbox, in pixels.
- * @type Number
+/**
+ * Minimum width of textbox, in pixels.
+ * @type Number
  */
-/**
- * Minimum calculated width of a textbox, in pixels.
- * fixed to 2 so that an empty textbox cannot go to 0
- * and is still selectable without text.
- * @type Number
+/**
+ * Minimum calculated width of a textbox, in pixels.
+ * fixed to 2 so that an empty textbox cannot go to 0
+ * and is still selectable without text.
+ * @type Number
  */
-/**
- * Use this boolean property in order to split strings that have no white space concept.
- * this is a cheap way to help with chinese/japanese
- * @type Boolean
- * @since 2.6.0
+/**
+ * Use this boolean property in order to split strings that have no white space concept.
+ * this is a cheap way to help with chinese/japanese
+ * @type Boolean
+ * @since 2.6.0
  */
 _defineProperty(Textbox, "type", 'Textbox');
 _defineProperty(Textbox, "textLayoutProperties", [...IText.textLayoutProperties, 'width']);