@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

package/src/shapes/Textbox.ts

@@ -1,788 +1,788 @@
-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 type { TextStyleDeclaration } from './Text/StyledText';
-import type { SerializedITextProps, ITextProps } from './IText/IText';
-import type { ITextEvents } from './IText/ITextBehavior';
-import type { TextLinesInfo } from './Text/Text';
-import type { Control } from '../controls/Control';
-import { layoutText } from '../text/layout';
-
-// @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
-// regexes, list of properties that are not suppose to change by instances, magic consts.
-// this will be a separated effort
-export const textboxDefaultValues: Partial<TClassProperties<Textbox>> = {
-  minWidth: 20,
-  dynamicMinWidth: 2,
-  lockScalingFlip: true,
-  noScaleCache: false,
-  _wordJoiners: /[ \t\r]/,
-  splitByGrapheme: false,
-};
-
-export type GraphemeData = {
-  wordsData: {
-    word: string[];
-    width: number;
-  }[][];
-  largestWordWidth: number;
-};
-
-export type StyleMap = Record<string, { line: number; offset: number }>;
-
-// @TODO this is not complete
-interface UniqueTextboxProps {
-  minWidth: number;
-  splitByGrapheme: boolean;
-  dynamicMinWidth: number;
-  _wordJoiners: RegExp;
-}
-
-export interface SerializedTextboxProps
-  extends SerializedITextProps,
-    Pick<UniqueTextboxProps, 'minWidth' | 'splitByGrapheme'> {}
-
-export interface TextboxProps extends ITextProps, UniqueTextboxProps {}
-
-/**
- * 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.
- */
-export class Textbox<
-    Props extends TOptions<TextboxProps> = Partial<TextboxProps>,
-    SProps extends SerializedTextboxProps = SerializedTextboxProps,
-    EventSpec extends ITextEvents = ITextEvents,
-  >
-  extends IText<Props, SProps, EventSpec>
-  implements UniqueTextboxProps
-{
-  /**
-   * Minimum width of textbox, in pixels.
-   * @type Number
-   */
-  declare minWidth: 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
-   */
-  declare dynamicMinWidth: 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
-   */
-  declare splitByGrapheme: boolean;
-
-  declare _wordJoiners: RegExp;
-
-  declare _styleMap: StyleMap;
-
-  declare isWrapping: boolean;
-
-  static type = 'Textbox';
-
-  static textLayoutProperties = [...IText.textLayoutProperties, 'width'];
-
-  static ownDefaults = textboxDefaultValues;
-
-  static getDefaults(): Record<string, any> {
-    return {
-      ...super.getDefaults(),
-      ...Textbox.ownDefaults,
-    };
-  }
-
-  /**
-   * Constructor
-   * @param {String} text Text string
-   * @param {Object} [options] Options object
-   */
-  constructor(text: string, options?: Props) {
-    super(text, { ...Textbox.ownDefaults, ...options } as Props);
-    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
-   */
-  static createControls(): { controls: Record<string, Control> } {
-    return { controls: createTextboxDefaultControls() };
-  }
-
-  /**
-   * Unlike superclass's version of this function, Textbox does not update
-   * its width.
-   * @private
-   * @override
-   */
-  initDimensions() {
-    if (!this.initialized) {
-      return;
-    }
-    
-    // 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
-    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) {
-      this._set('width', this.dynamicMinWidth);
-    }
-    if (this.textAlign.includes(JUSTIFY)) {
-      // once text is measured we need to make space fatter to make justified text.
-      this.enlargeSpaces();
-    }
-    // clear cache and re-calculate height
-    this.height = this.calcTextHeight();
-  }
-
-  /**
-   * Advanced dimensions calculation using new layout engine
-   * @private
-   */
-  initDimensionsAdvanced() {
-    if (!this.initialized) {
-      return;
-    }
-    
-    this.isEditing && this.initDelayedCursor();
-    this._clearCache();
-    this.dynamicMinWidth = 0;
-    
-    // Use new layout engine
-    const layout = layoutText({
-      text: this.text,
-      width: this.width,
-      height: this.height,
-      wrap: this.wrap || 'word',
-      align: (this as any)._mapTextAlignToAlign(this.textAlign),
-      ellipsis: this.ellipsis || false,
-      fontSize: this.fontSize,
-      lineHeight: this.lineHeight,
-      letterSpacing: this.letterSpacing || 0,
-      charSpacing: this.charSpacing,
-      direction: this.direction === 'inherit' ? 'ltr' : this.direction,
-      fontFamily: this.fontFamily,
-      fontStyle: this.fontStyle,
-      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));
-      this.dynamicMinWidth = Math.max(this.minWidth, maxLineWidth);
-    }
-    
-    // Adjust width if needed (preserving Textbox behavior)
-    if (this.dynamicMinWidth > this.width) {
-      this._set('width', this.dynamicMinWidth);
-      // Re-layout with new width
-      const newLayout = layoutText({
-        ...(this as any)._getAdvancedLayoutOptions(),
-        width: this.width,
-      });
-      this.height = newLayout.totalHeight;
-      (this as any)._convertLayoutToLegacyFormat(newLayout);
-    } else {
-      this.height = layout.totalHeight;
-      (this as any)._convertLayoutToLegacyFormat(layout);
-    }
-    
-    // Generate style map for compatibility
-    this._styleMap = this._generateStyleMapFromLayout(layout);
-    this.dirty = true;
-  }
-
-  /**
-   * Generate style map from new layout format
-   * @private
-   */
-  _generateStyleMapFromLayout(layout: any): StyleMap {
-    const map: StyleMap = {};
-    let realLineCount = 0;
-    let charCount = 0;
-
-    layout.lines.forEach((line: any, i: number) => {
-      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
-      }
-    });
-
-    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
-   */
-  _generateStyleMap(textInfo: TextLinesInfo): StyleMap {
-    let realLineCount = 0,
-      realLineCharCount = 0,
-      charCount = 0;
-    const map: StyleMap = {};
-
-    for (let i = 0; i < textInfo.graphemeLines.length; i++) {
-      if (textInfo.graphemeText[charCount] === '\n' && i > 0) {
-        realLineCharCount = 0;
-        charCount++;
-        realLineCount++;
-      } else if (
-        !this.splitByGrapheme &&
-        this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) &&
-        i > 0
-      ) {
-        // this case deals with space's that are removed from end of lines when wrapping
-        realLineCharCount++;
-        charCount++;
-      }
-
-      map[i] = { line: realLineCount, offset: realLineCharCount };
-
-      charCount += textInfo.graphemeLines[i].length;
-      realLineCharCount += textInfo.graphemeLines[i].length;
-    }
-
-    return map;
-  }
-
-  /**
-   * Returns true if object has a style property or has it on a specified line
-   * @param {Number} lineIndex
-   * @return {Boolean}
-   */
-  styleHas(property: keyof TextStyleDeclaration, lineIndex: number): boolean {
-    if (this._styleMap && !this.isWrapping) {
-      const map = this._styleMap[lineIndex];
-      if (map) {
-        lineIndex = map.line;
-      }
-    }
-    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}
-   */
-  isEmptyStyles(lineIndex: number): boolean {
-    if (!this.styles) {
-      return true;
-    }
-    let offset = 0,
-      nextLineIndex = lineIndex + 1,
-      nextOffset: number,
-      shouldLimit = false;
-    const map = this._styleMap[lineIndex],
-      mapNextLine = this._styleMap[lineIndex + 1];
-    if (map) {
-      lineIndex = map.line;
-      offset = map.offset;
-    }
-    if (mapNextLine) {
-      nextLineIndex = mapNextLine.line;
-      shouldLimit = nextLineIndex === lineIndex;
-      nextOffset = mapNextLine.offset;
-    }
-    const obj =
-      typeof lineIndex === 'undefined'
-        ? this.styles
-        : { line: this.styles[lineIndex] };
-    for (const p1 in obj) {
-      for (const p2 in obj[p1]) {
-        const p2Number = parseInt(p2, 10);
-        if (p2Number >= offset && (!shouldLimit || p2Number < nextOffset!)) {
-          for (const p3 in obj[p1][p2]) {
-            return false;
-          }
-        }
-      }
-    }
-    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
-   */
-  _getStyleDeclaration(
-    lineIndex: number,
-    charIndex: number,
-  ): TextStyleDeclaration {
-    if (this._styleMap && !this.isWrapping) {
-      const map = this._styleMap[lineIndex];
-      if (!map) {
-        return {};
-      }
-      lineIndex = map.line;
-      charIndex = map.offset + charIndex;
-    }
-    return super._getStyleDeclaration(lineIndex, charIndex);
-  }
-
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @param {Object} style
-   * @private
-   */
-  protected _setStyleDeclaration(
-    lineIndex: number,
-    charIndex: number,
-    style: object,
-  ) {
-    const map = this._styleMap[lineIndex];
-    super._setStyleDeclaration(map.line, map.offset + charIndex, style);
-  }
-
-  /**
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @private
-   */
-  protected _deleteStyleDeclaration(lineIndex: number, charIndex: number) {
-    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
-   */
-  protected _getLineStyle(lineIndex: number): boolean {
-    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
-   */
-  protected _setLineStyle(lineIndex: number) {
-    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
-   */
-  _wrapText(lines: string[], desiredWidth: number): string[][] {
-    this.isWrapping = true;
-    // extract all thewords and the widths to optimally wrap lines.
-    const data = this.getGraphemeDataForRender(lines);
-    const wrapped: string[][] = [];
-    for (let i = 0; i < data.wordsData.length; i++) {
-      wrapped.push(...this._wrapLine(i, desiredWidth, data));
-    }
-    this.isWrapping = false;
-    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
-   *
-   */
-  getGraphemeDataForRender(lines: string[]): GraphemeData {
-    const splitByGrapheme = this.splitByGrapheme,
-      infix = splitByGrapheme ? '' : ' ';
-
-    let largestWordWidth = 0;
-
-    const data = lines.map((line, lineIndex) => {
-      let offset = 0;
-      const wordsOrGraphemes = splitByGrapheme
-        ? this.graphemeSplit(line)
-        : this.wordSplit(line);
-
-      if (wordsOrGraphemes.length === 0) {
-        return [{ word: [], width: 0 }];
-      }
-
-      return wordsOrGraphemes.map((word: string) => {
-        // if using splitByGrapheme words are already in graphemes.
-        const graphemeArray = splitByGrapheme
-          ? [word]
-          : this.graphemeSplit(word);
-        const width = this._measureWord(graphemeArray, lineIndex, offset);
-        largestWordWidth = Math.max(width, largestWordWidth);
-        offset += graphemeArray.length + infix.length;
-        return { word: graphemeArray, width };
-      });
-    });
-
-    return {
-      wordsData: data,
-      largestWordWidth,
-    };
-  }
-
-  /**
-   * 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: string[], lineIndex: number, charOffset = 0): number {
-    let width = 0,
-      prevGrapheme;
-    const skipLeft = true;
-    for (let i = 0, len = word.length; i < len; i++) {
-      const box = this._getGraphemeBox(
-        word[i],
-        lineIndex,
-        i + charOffset,
-        prevGrapheme,
-        skipLeft,
-      );
-      width += box.kernedWidth;
-      prevGrapheme = word[i];
-    }
-    return width;
-  }
-
-  /**
-   * Override this method to customize word splitting
-   * Use with {@link Textbox#_measureWord}
-   * @param {string} value
-   * @returns {string[]} array of words
-   */
-  wordSplit(value: string): string[] {
-    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.
-   */
-  _wrapLine(
-    lineIndex: number,
-    desiredWidth: number,
-    { largestWordWidth, wordsData }: GraphemeData,
-    reservedSpace = 0,
-  ): string[][] {
-    const additionalSpace = this._getWidthOfCharSpacing(),
-      splitByGrapheme = this.splitByGrapheme,
-      graphemeLines = [],
-      infix = splitByGrapheme ? '' : ' ';
-
-    let lineWidth = 0,
-      line: string[] = [],
-      // spaces in different languages?
-      offset = 0,
-      infixWidth = 0,
-      lineJustStarted = true;
-
-    desiredWidth -= reservedSpace;
-
-    const maxWidth = Math.max(
-      desiredWidth,
-      largestWordWidth,
-      this.dynamicMinWidth,
-    );
-    // layout words
-    const data = wordsData[lineIndex];
-    offset = 0;
-    let i;
-    for (i = 0; i < data.length; i++) {
-      const { word, width: wordWidth } = data[i];
-      offset += word.length;
-
-      lineWidth += infixWidth + wordWidth - additionalSpace;
-      if (lineWidth > maxWidth && !lineJustStarted) {
-        graphemeLines.push(line);
-        line = [];
-        lineWidth = wordWidth;
-        lineJustStarted = true;
-      } else {
-        lineWidth += additionalSpace;
-      }
-
-      if (!lineJustStarted && !splitByGrapheme) {
-        line.push(infix);
-      }
-      line = line.concat(word);
-
-      infixWidth = splitByGrapheme
-        ? 0
-        : this._measureWord([infix], lineIndex, offset);
-      offset++;
-      lineJustStarted = false;
-    }
-
-    i && graphemeLines.push(line);
-
-    // 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) {
-      this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
-    }
-    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}
-   */
-  isEndOfWrapping(lineIndex: number): boolean {
-    if (!this._styleMap[lineIndex + 1]) {
-      // is last line, return true;
-      return true;
-    }
-    if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) {
-      // this is last line before a line break, return true;
-      return true;
-    }
-    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
-   */
-  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1 {
-    if (this.splitByGrapheme && !skipWrapping) {
-      return this.isEndOfWrapping(lineIndex) ? 1 : 0;
-    }
-    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
-   */
-  _splitTextIntoLines(text: string) {
-    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;
-  }
-
-  getMinWidth() {
-    return Math.max(this.minWidth, this.dynamicMinWidth);
-  }
-
-  _removeExtraneousStyles() {
-    const linesToKeep = new Map();
-    for (const prop in this._styleMap) {
-      const propNumber = parseInt(prop, 10);
-      if (this._textLines[propNumber]) {
-        const lineIndex = this._styleMap[prop].line;
-        linesToKeep.set(`${lineIndex}`, true);
-      }
-    }
-    for (const prop in this.styles) {
-      if (!linesToKeep.has(prop)) {
-        delete this.styles[prop];
-      }
-    }
-  }
-
-  /**
-   * Initialize event listeners for safety snap functionality
-   * @private
-   */
-  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;
-      } else if (e.originX) {
-        const { originX } = e;
-        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
-      // 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) {
-        const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-        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')
-   */
-  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) {
-      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]/;
-      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)
-        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth + rtlBuffer);
-      } else {
-        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth);
-      }
-    }
-
-    // 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 
-      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
-        });
-      }
-      
-      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();
-    }
-  }
-
-  /**
-   * 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<
-    T extends Omit<Props & TClassProperties<this>, keyof SProps>,
-    K extends keyof T = never,
-  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
-    return super.toObject<T, K>([
-      'minWidth',
-      'splitByGrapheme',
-      ...propertiesToInclude,
-    ] as K[]);
-  }
-}
-
-classRegistry.setClass(Textbox);
+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 type { TextStyleDeclaration } from './Text/StyledText';
+import type { SerializedITextProps, ITextProps } from './IText/IText';
+import type { ITextEvents } from './IText/ITextBehavior';
+import type { TextLinesInfo } from './Text/Text';
+import type { Control } from '../controls/Control';
+import { layoutText } from '../text/layout';
+
+// @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
+// regexes, list of properties that are not suppose to change by instances, magic consts.
+// this will be a separated effort
+export const textboxDefaultValues: Partial<TClassProperties<Textbox>> = {
+  minWidth: 20,
+  dynamicMinWidth: 2,
+  lockScalingFlip: true,
+  noScaleCache: false,
+  _wordJoiners: /[ \t\r]/,
+  splitByGrapheme: false,
+};
+
+export type GraphemeData = {
+  wordsData: {
+    word: string[];
+    width: number;
+  }[][];
+  largestWordWidth: number;
+};
+
+export type StyleMap = Record<string, { line: number; offset: number }>;
+
+// @TODO this is not complete
+interface UniqueTextboxProps {
+  minWidth: number;
+  splitByGrapheme: boolean;
+  dynamicMinWidth: number;
+  _wordJoiners: RegExp;
+}
+
+export interface SerializedTextboxProps
+  extends SerializedITextProps,
+    Pick<UniqueTextboxProps, 'minWidth' | 'splitByGrapheme'> {}
+
+export interface TextboxProps extends ITextProps, UniqueTextboxProps {}
+
+/**
+ * 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.
+ */
+export class Textbox<
+    Props extends TOptions<TextboxProps> = Partial<TextboxProps>,
+    SProps extends SerializedTextboxProps = SerializedTextboxProps,
+    EventSpec extends ITextEvents = ITextEvents,
+  >
+  extends IText<Props, SProps, EventSpec>
+  implements UniqueTextboxProps
+{
+  /**
+   * Minimum width of textbox, in pixels.
+   * @type Number
+   */
+  declare minWidth: 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
+   */
+  declare dynamicMinWidth: 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
+   */
+  declare splitByGrapheme: boolean;
+
+  declare _wordJoiners: RegExp;
+
+  declare _styleMap: StyleMap;
+
+  declare isWrapping: boolean;
+
+  static type = 'Textbox';
+
+  static textLayoutProperties = [...IText.textLayoutProperties, 'width'];
+
+  static ownDefaults = textboxDefaultValues;
+
+  static getDefaults(): Record<string, any> {
+    return {
+      ...super.getDefaults(),
+      ...Textbox.ownDefaults,
+    };
+  }
+
+  /**
+   * Constructor
+   * @param {String} text Text string
+   * @param {Object} [options] Options object
+   */
+  constructor(text: string, options?: Props) {
+    super(text, { ...Textbox.ownDefaults, ...options } as Props);
+    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
+   */
+  static createControls(): { controls: Record<string, Control> } {
+    return { controls: createTextboxDefaultControls() };
+  }
+
+  /**
+   * Unlike superclass's version of this function, Textbox does not update
+   * its width.
+   * @private
+   * @override
+   */
+  initDimensions() {
+    if (!this.initialized) {
+      return;
+    }
+    
+    // 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
+    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) {
+      this._set('width', this.dynamicMinWidth);
+    }
+    if (this.textAlign.includes(JUSTIFY)) {
+      // once text is measured we need to make space fatter to make justified text.
+      this.enlargeSpaces();
+    }
+    // clear cache and re-calculate height
+    this.height = this.calcTextHeight();
+  }
+
+  /**
+   * Advanced dimensions calculation using new layout engine
+   * @private
+   */
+  initDimensionsAdvanced() {
+    if (!this.initialized) {
+      return;
+    }
+    
+    this.isEditing && this.initDelayedCursor();
+    this._clearCache();
+    this.dynamicMinWidth = 0;
+    
+    // Use new layout engine
+    const layout = layoutText({
+      text: this.text,
+      width: this.width,
+      height: this.height,
+      wrap: this.wrap || 'word',
+      align: (this as any)._mapTextAlignToAlign(this.textAlign),
+      ellipsis: this.ellipsis || false,
+      fontSize: this.fontSize,
+      lineHeight: this.lineHeight,
+      letterSpacing: this.letterSpacing || 0,
+      charSpacing: this.charSpacing,
+      direction: this.direction === 'inherit' ? 'ltr' : this.direction,
+      fontFamily: this.fontFamily,
+      fontStyle: this.fontStyle,
+      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));
+      this.dynamicMinWidth = Math.max(this.minWidth, maxLineWidth);
+    }
+    
+    // Adjust width if needed (preserving Textbox behavior)
+    if (this.dynamicMinWidth > this.width) {
+      this._set('width', this.dynamicMinWidth);
+      // Re-layout with new width
+      const newLayout = layoutText({
+        ...(this as any)._getAdvancedLayoutOptions(),
+        width: this.width,
+      });
+      this.height = newLayout.totalHeight;
+      (this as any)._convertLayoutToLegacyFormat(newLayout);
+    } else {
+      this.height = layout.totalHeight;
+      (this as any)._convertLayoutToLegacyFormat(layout);
+    }
+    
+    // Generate style map for compatibility
+    this._styleMap = this._generateStyleMapFromLayout(layout);
+    this.dirty = true;
+  }
+
+  /**
+   * Generate style map from new layout format
+   * @private
+   */
+  _generateStyleMapFromLayout(layout: any): StyleMap {
+    const map: StyleMap = {};
+    let realLineCount = 0;
+    let charCount = 0;
+
+    layout.lines.forEach((line: any, i: number) => {
+      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
+      }
+    });
+
+    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
+   */
+  _generateStyleMap(textInfo: TextLinesInfo): StyleMap {
+    let realLineCount = 0,
+      realLineCharCount = 0,
+      charCount = 0;
+    const map: StyleMap = {};
+
+    for (let i = 0; i < textInfo.graphemeLines.length; i++) {
+      if (textInfo.graphemeText[charCount] === '\n' && i > 0) {
+        realLineCharCount = 0;
+        charCount++;
+        realLineCount++;
+      } else if (
+        !this.splitByGrapheme &&
+        this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) &&
+        i > 0
+      ) {
+        // this case deals with space's that are removed from end of lines when wrapping
+        realLineCharCount++;
+        charCount++;
+      }
+
+      map[i] = { line: realLineCount, offset: realLineCharCount };
+
+      charCount += textInfo.graphemeLines[i].length;
+      realLineCharCount += textInfo.graphemeLines[i].length;
+    }
+
+    return map;
+  }
+
+  /**
+   * Returns true if object has a style property or has it on a specified line
+   * @param {Number} lineIndex
+   * @return {Boolean}
+   */
+  styleHas(property: keyof TextStyleDeclaration, lineIndex: number): boolean {
+    if (this._styleMap && !this.isWrapping) {
+      const map = this._styleMap[lineIndex];
+      if (map) {
+        lineIndex = map.line;
+      }
+    }
+    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}
+   */
+  isEmptyStyles(lineIndex: number): boolean {
+    if (!this.styles) {
+      return true;
+    }
+    let offset = 0,
+      nextLineIndex = lineIndex + 1,
+      nextOffset: number,
+      shouldLimit = false;
+    const map = this._styleMap[lineIndex],
+      mapNextLine = this._styleMap[lineIndex + 1];
+    if (map) {
+      lineIndex = map.line;
+      offset = map.offset;
+    }
+    if (mapNextLine) {
+      nextLineIndex = mapNextLine.line;
+      shouldLimit = nextLineIndex === lineIndex;
+      nextOffset = mapNextLine.offset;
+    }
+    const obj =
+      typeof lineIndex === 'undefined'
+        ? this.styles
+        : { line: this.styles[lineIndex] };
+    for (const p1 in obj) {
+      for (const p2 in obj[p1]) {
+        const p2Number = parseInt(p2, 10);
+        if (p2Number >= offset && (!shouldLimit || p2Number < nextOffset!)) {
+          for (const p3 in obj[p1][p2]) {
+            return false;
+          }
+        }
+      }
+    }
+    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
+   */
+  _getStyleDeclaration(
+    lineIndex: number,
+    charIndex: number,
+  ): TextStyleDeclaration {
+    if (this._styleMap && !this.isWrapping) {
+      const map = this._styleMap[lineIndex];
+      if (!map) {
+        return {};
+      }
+      lineIndex = map.line;
+      charIndex = map.offset + charIndex;
+    }
+    return super._getStyleDeclaration(lineIndex, charIndex);
+  }
+
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @param {Object} style
+   * @private
+   */
+  protected _setStyleDeclaration(
+    lineIndex: number,
+    charIndex: number,
+    style: object,
+  ) {
+    const map = this._styleMap[lineIndex];
+    super._setStyleDeclaration(map.line, map.offset + charIndex, style);
+  }
+
+  /**
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @private
+   */
+  protected _deleteStyleDeclaration(lineIndex: number, charIndex: number) {
+    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
+   */
+  protected _getLineStyle(lineIndex: number): boolean {
+    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
+   */
+  protected _setLineStyle(lineIndex: number) {
+    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
+   */
+  _wrapText(lines: string[], desiredWidth: number): string[][] {
+    this.isWrapping = true;
+    // extract all thewords and the widths to optimally wrap lines.
+    const data = this.getGraphemeDataForRender(lines);
+    const wrapped: string[][] = [];
+    for (let i = 0; i < data.wordsData.length; i++) {
+      wrapped.push(...this._wrapLine(i, desiredWidth, data));
+    }
+    this.isWrapping = false;
+    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
+   *
+   */
+  getGraphemeDataForRender(lines: string[]): GraphemeData {
+    const splitByGrapheme = this.splitByGrapheme,
+      infix = splitByGrapheme ? '' : ' ';
+
+    let largestWordWidth = 0;
+
+    const data = lines.map((line, lineIndex) => {
+      let offset = 0;
+      const wordsOrGraphemes = splitByGrapheme
+        ? this.graphemeSplit(line)
+        : this.wordSplit(line);
+
+      if (wordsOrGraphemes.length === 0) {
+        return [{ word: [], width: 0 }];
+      }
+
+      return wordsOrGraphemes.map((word: string) => {
+        // if using splitByGrapheme words are already in graphemes.
+        const graphemeArray = splitByGrapheme
+          ? [word]
+          : this.graphemeSplit(word);
+        const width = this._measureWord(graphemeArray, lineIndex, offset);
+        largestWordWidth = Math.max(width, largestWordWidth);
+        offset += graphemeArray.length + infix.length;
+        return { word: graphemeArray, width };
+      });
+    });
+
+    return {
+      wordsData: data,
+      largestWordWidth,
+    };
+  }
+
+  /**
+   * 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: string[], lineIndex: number, charOffset = 0): number {
+    let width = 0,
+      prevGrapheme;
+    const skipLeft = true;
+    for (let i = 0, len = word.length; i < len; i++) {
+      const box = this._getGraphemeBox(
+        word[i],
+        lineIndex,
+        i + charOffset,
+        prevGrapheme,
+        skipLeft,
+      );
+      width += box.kernedWidth;
+      prevGrapheme = word[i];
+    }
+    return width;
+  }
+
+  /**
+   * Override this method to customize word splitting
+   * Use with {@link Textbox#_measureWord}
+   * @param {string} value
+   * @returns {string[]} array of words
+   */
+  wordSplit(value: string): string[] {
+    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.
+   */
+  _wrapLine(
+    lineIndex: number,
+    desiredWidth: number,
+    { largestWordWidth, wordsData }: GraphemeData,
+    reservedSpace = 0,
+  ): string[][] {
+    const additionalSpace = this._getWidthOfCharSpacing(),
+      splitByGrapheme = this.splitByGrapheme,
+      graphemeLines = [],
+      infix = splitByGrapheme ? '' : ' ';
+
+    let lineWidth = 0,
+      line: string[] = [],
+      // spaces in different languages?
+      offset = 0,
+      infixWidth = 0,
+      lineJustStarted = true;
+
+    desiredWidth -= reservedSpace;
+
+    const maxWidth = Math.max(
+      desiredWidth,
+      largestWordWidth,
+      this.dynamicMinWidth,
+    );
+    // layout words
+    const data = wordsData[lineIndex];
+    offset = 0;
+    let i;
+    for (i = 0; i < data.length; i++) {
+      const { word, width: wordWidth } = data[i];
+      offset += word.length;
+
+      lineWidth += infixWidth + wordWidth - additionalSpace;
+      if (lineWidth > maxWidth && !lineJustStarted) {
+        graphemeLines.push(line);
+        line = [];
+        lineWidth = wordWidth;
+        lineJustStarted = true;
+      } else {
+        lineWidth += additionalSpace;
+      }
+
+      if (!lineJustStarted && !splitByGrapheme) {
+        line.push(infix);
+      }
+      line = line.concat(word);
+
+      infixWidth = splitByGrapheme
+        ? 0
+        : this._measureWord([infix], lineIndex, offset);
+      offset++;
+      lineJustStarted = false;
+    }
+
+    i && graphemeLines.push(line);
+
+    // 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) {
+      this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace;
+    }
+    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}
+   */
+  isEndOfWrapping(lineIndex: number): boolean {
+    if (!this._styleMap[lineIndex + 1]) {
+      // is last line, return true;
+      return true;
+    }
+    if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) {
+      // this is last line before a line break, return true;
+      return true;
+    }
+    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
+   */
+  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1 {
+    if (this.splitByGrapheme && !skipWrapping) {
+      return this.isEndOfWrapping(lineIndex) ? 1 : 0;
+    }
+    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
+   */
+  _splitTextIntoLines(text: string) {
+    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;
+  }
+
+  getMinWidth() {
+    return Math.max(this.minWidth, this.dynamicMinWidth);
+  }
+
+  _removeExtraneousStyles() {
+    const linesToKeep = new Map();
+    for (const prop in this._styleMap) {
+      const propNumber = parseInt(prop, 10);
+      if (this._textLines[propNumber]) {
+        const lineIndex = this._styleMap[prop].line;
+        linesToKeep.set(`${lineIndex}`, true);
+      }
+    }
+    for (const prop in this.styles) {
+      if (!linesToKeep.has(prop)) {
+        delete this.styles[prop];
+      }
+    }
+  }
+
+  /**
+   * Initialize event listeners for safety snap functionality
+   * @private
+   */
+  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;
+      } else if (e.originX) {
+        const { originX } = e;
+        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
+      // 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) {
+        const currentResizeOrigin = resizeOrigin; // Capture the value before reset
+        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')
+   */
+  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) {
+      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]/;
+      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)
+        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth + rtlBuffer);
+      } else {
+        maxRequiredWidth = Math.max(maxRequiredWidth, lineWidth);
+      }
+    }
+
+    // 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 
+      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
+        });
+      }
+      
+      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();
+    }
+  }
+
+  /**
+   * 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<
+    T extends Omit<Props & TClassProperties<this>, keyof SProps>,
+    K extends keyof T = never,
+  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
+    return super.toObject<T, K>([
+      'minWidth',
+      'splitByGrapheme',
+      ...propertiesToInclude,
+    ] as K[]);
+  }
+}
+
+classRegistry.setClass(Textbox);