@nasser-sw/fabric 7.0.1-beta16 → 7.0.1-beta17

package/dist/src/shapes/Text/Text.mjs

@@ -8,7 +8,7 @@ import { classRegistry } from '../../ClassRegistry.mjs';
 import { graphemeSplit } from '../../util/lang_string.mjs';
 import { createCanvasElementFor } from '../../util/misc/dom.mjs';
 import { layoutText } from '../../text/layout.mjs';
-import { segmentGraphemes } from '../../text/unicode.mjs';
+import { findKashidaPoints, ARABIC_TATWEEL, segmentGraphemes } from '../../text/unicode.mjs';
 import { hasStyleChanged, stylesToArray, stylesFromArray } from '../../util/misc/textStyles.mjs';
 import { getPathSegmentsInfo, getPointOnPath } from '../../util/path/index.mjs';
 import '../Object/FabricObject.mjs';
@@ -64,6 +64,12 @@ class FabricText extends StyledText {
      * @protected
      */
     _defineProperty(this, "__charBounds", []);
+    /**
+     * contains kashida extension info for each line.
+     * Each entry contains { charIndex, width } for characters that have kashida extensions.
+     * @protected
+     */
+    _defineProperty(this, "__kashidaInfo", []);
     Object.assign(this, FabricText.ownDefaults);
     this.setOptions(options);
     if (!this.styles) {
@@ -182,11 +188,31 @@ class FabricText extends StyledText {
   }
 
   /**
-   * Enlarge space boxes and shift the others for justify alignment
+   * Enlarge space boxes and shift the others for justify alignment.
+   * Supports Arabic kashida (tatweel) justification when kashida property is set.
+   * When kashida is enabled, actual tatweel characters are inserted into the text.
    */
   enlargeSpaces() {
-    let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
+    // console.log('=== enlargeSpaces START ===');
+    // console.log('this.kashida:', this.kashida);
+
+    // Kashida ratios: proportion of extra space distributed via kashida vs space expansion
+    const kashidaRatios = {
+      none: 0,
+      short: 0.25,
+      medium: 0.5,
+      long: 0.75,
+      stylistic: 1.0
+    };
+    const kashidaRatio = kashidaRatios[this.kashida] || 0;
+    // console.log('kashidaRatio:', kashidaRatio);
+
+    // Reset kashida info
+    this.__kashidaInfo = [];
     for (let i = 0, len = this._textLines.length; i < len; i++) {
+      // Initialize kashida info for this line
+      this.__kashidaInfo[i] = [];
+
       // Check if this line should be justified
       const hasTextAfter = this._textLines.slice(i + 1).some(line => {
         const lineText = Array.isArray(line) ? line.join('') : line;
@@ -196,33 +222,121 @@ class FabricText extends StyledText {
       const isLastLine = i === len - 1 || this.isEndOfWrapping(i) || isVisualLastLine;
       const shouldJustifyLine = this.textAlign.includes('justify') && !isLastLine;
       if (!shouldJustifyLine) {
+        // console.log(`  Line ${i}: skipped (not justified)`);
         continue;
       }
-      accumulatedSpace = 0;
-      line = this._textLines[i];
-      currentLineWidth = this.getLineWidth(i);
-      if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
-        numberOfSpaces = spaces.length;
-        diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-
-        // Same logic for both LTR and RTL:
-        // Expand space widths and shift subsequent characters
-        // The rendering handles direction via ctx.direction
-        for (let j = 0; j <= line.length; j++) {
-          charBound = this.__charBounds[i][j];
-          if (charBound) {
-            if (this._reSpaceAndTab.test(line[j])) {
-              charBound.width += diffSpace;
-              charBound.kernedWidth += diffSpace;
-              charBound.left += accumulatedSpace;
-              accumulatedSpace += diffSpace;
-            } else {
-              charBound.left += accumulatedSpace;
+      const line = this._textLines[i];
+      const currentLineWidth = this.getLineWidth(i);
+      const totalExtraSpace = this.width - currentLineWidth;
+      // console.log(`  Line ${i}: width=${this.width}, lineWidth=${currentLineWidth}, extraSpace=${totalExtraSpace}`);
+
+      if (totalExtraSpace <= 0) {
+        // console.log(`  Line ${i}: skipped (no extra space)`);
+        continue;
+      }
+
+      // Find spaces for space expansion
+      const spaces = this.textLines[i].match(this._reSpacesAndTabs);
+      const numberOfSpaces = spaces ? spaces.length : 0;
+
+      // Find kashida points if enabled
+      const kashidaPoints = kashidaRatio > 0 ? findKashidaPoints(line) : [];
+      const hasKashidaPoints = kashidaPoints.length > 0;
+
+      // Calculate space distribution
+      let kashidaSpace = 0;
+      if (hasKashidaPoints && kashidaRatio > 0) {
+        // Distribute between kashida and spaces
+        kashidaSpace = totalExtraSpace * kashidaRatio;
+      }
+
+      // Calculate per-kashida and per-space widths
+      const perKashidaWidth = hasKashidaPoints ? kashidaSpace / kashidaPoints.length : 0;
+
+      // If kashida is enabled, insert tatweel characters into the text
+      if (hasKashidaPoints && perKashidaWidth > 0) {
+        // console.log(`=== Inserting kashida for line ${i} ===`);
+        // console.log(`  kashidaPoints: ${kashidaPoints.length}, perKashidaWidth: ${perKashidaWidth}`);
+
+        // Sort by charIndex descending to insert from end (so indices stay valid)
+        const sortedPoints = [...kashidaPoints].sort((a, b) => b.charIndex - a.charIndex);
+
+        // Calculate how many tatweels to insert per point
+        // Measure tatweel width to determine count
+        const ctx = getMeasuringContext();
+        // console.log(`  getMeasuringContext: ${ctx ? 'OK' : 'NULL'}`);
+
+        if (ctx) {
+          ctx.font = this._getFontDeclaration();
+          const tatweelWidth = ctx.measureText(ARABIC_TATWEEL).width;
+          // console.log(`  tatweelWidth: ${tatweelWidth}`);
+
+          if (tatweelWidth > 0) {
+            const newLine = [...line];
+            for (const point of sortedPoints) {
+              const tatweelCount = Math.max(1, Math.round(perKashidaWidth / tatweelWidth));
+              // console.log(`  Point ${point.charIndex}: inserting ${tatweelCount} tatweels`);
+
+              // Insert tatweels after the character
+              for (let t = 0; t < tatweelCount; t++) {
+                newLine.splice(point.charIndex + 1, 0, ARABIC_TATWEEL);
+              }
+
+              // Store kashida info with updated indices and tatweel count
+              this.__kashidaInfo[i].push({
+                charIndex: point.charIndex,
+                width: perKashidaWidth,
+                tatweelCount: tatweelCount
+              });
+            }
+
+            // console.log(`  Total inserted: ${insertedCount} tatweels`);
+            // console.log(`  Original line length: ${line.length}, new line length: ${newLine.length}`);
+            // console.log(`  New line: ${newLine.join('')}`);
+
+            // Update _textLines with the new line containing tatweels
+            this._textLines[i] = newLine;
+
+            // Update textLines string version
+            if (this.textLines && this.textLines[i] !== undefined) {
+              this.textLines[i] = newLine.join('');
             }
+
+            // Recalculate charBounds for this line since text changed
+            this.__charBounds[i] = [];
+            this.__lineWidths[i] = undefined;
+            this._measureLine(i);
+
+            // console.log(`  After remeasure, lineWidth: ${this.__lineWidths[i]}`);
+          }
+        }
+      }
+
+      // Now apply space expansion to remaining extra space
+      const newLineWidth = this.getLineWidth(i);
+      const remainingSpace = this.width - newLineWidth;
+      if (remainingSpace > 0 && numberOfSpaces > 0) {
+        const extraPerSpace = remainingSpace / numberOfSpaces;
+        let accumulatedOffset = 0;
+        for (let j = 0; j < this._textLines[i].length; j++) {
+          const charBound = this.__charBounds[i][j];
+          if (!charBound) continue;
+          charBound.left += accumulatedOffset;
+          if (this._reSpaceAndTab.test(this._textLines[i][j])) {
+            charBound.width += extraPerSpace;
+            charBound.kernedWidth += extraPerSpace;
+            accumulatedOffset += extraPerSpace;
           }
         }
       }
     }
+
+    // Final debug log showing kashida state
+    // console.log('=== enlargeSpaces END ===');
+    // console.log('Final __kashidaInfo:', JSON.stringify(this.__kashidaInfo.map((lineInfo, i) => ({
+    //   line: i,
+    //   entries: lineInfo.map(k => ({ charIndex: k.charIndex, tatweelCount: k.tatweelCount }))
+    // }))));
   }
 
   /**
@@ -242,7 +356,9 @@ class FabricText extends StyledText {
     return {
       text: this.text,
       width: this.width,
-      height: this.height,
+      // Don't pass height constraint to allow vertical auto-expansion
+      // Only pass height if ellipsis is enabled (need to truncate)
+      height: this.ellipsis ? this.height : undefined,
       wrap: this.wrap || 'word',
       align: this._mapTextAlignToAlign(this.textAlign),
       ellipsis: this.ellipsis || false,
@@ -297,9 +413,13 @@ class FabricText extends StyledText {
     // Convert layout to legacy format for compatibility
     this._convertLayoutToLegacyFormat(layout);
 
-    // Ensure justify alignment is properly applied for compatibility with legacy rendering
-    // Skip legacy enlargeSpaces when using advanced layout; Konva layout already distributes spaces.
-
+    // Apply kashida if enabled for justify alignment
+    // This must be called after _convertLayoutToLegacyFormat to ensure __charBounds exists
+    if (this.textAlign.includes(JUSTIFY) && this.kashida && this.kashida !== 'none') {
+      if (this.__charBounds && this.__charBounds.length > 0) {
+        this.enlargeSpaces();
+      }
+    }
     this.dirty = true;
   }
 
@@ -311,16 +431,27 @@ class FabricText extends StyledText {
     this._textLines = layout.lines.map(line => line.graphemes);
     this.textLines = layout.lines.map(line => line.text);
 
+    // Set _text as flat array of all graphemes (required for editing)
+    this._text = layout.lines.flatMap(line => line.graphemes);
+
     // Convert bounds to legacy format
+    // IMPORTANT: Preserve both logical (left) and visual (renderLeft) positions
+    // - left: cumulative logical offset (for text editing operations)
+    // - renderLeft: actual visual X position after BiDi reordering and alignment
+    // The renderLeft is critical for correct cursor/selection hit testing in mixed RTL/LTR text
     this.__charBounds = layout.lines.map(line => line.bounds.map(bound => ({
       left: bound.left,
       top: bound.y,
       width: bound.width,
       height: bound.height,
       kernedWidth: bound.kernedWidth,
-      deltaY: bound.deltaY || 0
+      deltaY: bound.deltaY || 0,
+      renderLeft: bound.x // Visual X position for hit testing
     })));
 
+    // Populate line widths cache to prevent getLineWidth from triggering legacy measurement
+    this.__lineWidths = layout.lines.map(line => line.width);
+
     // Update grapheme info for compatibility
     if (layout.lines.length > 0) {
       this._unwrappedTextLines = layout.lines.map(line => line.graphemes);
@@ -488,6 +619,48 @@ class FabricText extends StyledText {
     this._renderChars(method, ctx, line, left, top, lineIndex);
   }
 
+  /**
+   * Build display text lines with kashida characters inserted.
+   * This creates a version of _textLines with tatweel characters added at kashida points.
+   * @private
+   */
+  _buildKashidaDisplayLines() {
+    if (this.kashida === 'none' || !this.__kashidaInfo) {
+      return this._textLines;
+    }
+    const displayLines = [];
+    for (let lineIndex = 0; lineIndex < this._textLines.length; lineIndex++) {
+      const line = this._textLines[lineIndex];
+      const kashidaInfo = this.__kashidaInfo[lineIndex];
+      if (!kashidaInfo || kashidaInfo.length === 0) {
+        displayLines.push([...line]);
+        continue;
+      }
+
+      // Sort kashida points by charIndex descending so we can insert from the end
+      const sortedKashida = [...kashidaInfo].sort((a, b) => b.charIndex - a.charIndex);
+
+      // Calculate how many tatweels to insert based on width
+      const newLine = [...line];
+      for (const {
+        charIndex,
+        width
+      } of sortedKashida) {
+        if (width <= 0 || charIndex >= newLine.length) continue;
+
+        // Calculate number of tatweel characters based on width
+        // Each tatweel is approximately 5px at font size 24
+        const tatweelCount = Math.max(1, Math.round(width / 3));
+        const tatweels = ARABIC_TATWEEL.repeat(tatweelCount);
+
+        // Insert tatweels after the character at charIndex
+        newLine.splice(charIndex + 1, 0, tatweels);
+      }
+      displayLines.push(newLine);
+    }
+    return displayLines;
+  }
+
   /**
    * Renders the text background for lines, taking care of style
    * @private
@@ -568,10 +741,13 @@ class FabricText extends StyledText {
     const fontCache = cache.getFontCache(charStyle),
       fontDeclaration = this._getFontDeclaration(charStyle),
       couple = previousChar + _char,
-      stylesAreEqual = previousChar && fontDeclaration === this._getFontDeclaration(prevCharStyle),
+      // Skip kerning for tatweel (kashida) characters - they extend connections
+      // and kerning would make the following character appear too narrow
+      isTatweel = previousChar === '\u0640',
+      stylesAreEqual = previousChar && !isTatweel && fontDeclaration === this._getFontDeclaration(prevCharStyle),
       fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE;
     let width, coupleWidth, previousWidth, kernedWidth;
-    if (previousChar && fontCache[previousChar] !== undefined) {
+    if (previousChar && !isTatweel && fontCache[previousChar] !== undefined) {
       previousWidth = fontCache[previousChar];
     }
     if (fontCache[_char] !== undefined) {
@@ -589,11 +765,11 @@ class FabricText extends StyledText {
         kernedWidth = width = ctx.measureText(_char).width;
         fontCache[_char] = width;
       }
-      if (previousWidth === undefined && stylesAreEqual && previousChar) {
+      if (previousWidth === undefined && stylesAreEqual && previousChar && !isTatweel) {
         previousWidth = ctx.measureText(previousChar).width;
         fontCache[previousChar] = previousWidth;
       }
-      if (stylesAreEqual && coupleWidth === undefined) {
+      if (stylesAreEqual && coupleWidth === undefined && !isTatweel) {
         // we can measure the kerning couple and subtract the width of the previous character
         coupleWidth = ctx.measureText(couple).width;
         fontCache[couple] = coupleWidth;
@@ -640,10 +816,7 @@ class FabricText extends StyledText {
    */
   _measureLine(lineIndex) {
     // Debug: detect if measureLine is called after justify was applied
-    if (this._justifyApplied) {
-      console.warn(`WARNING: _measureLine called for line ${lineIndex} AFTER justify was applied! This will overwrite justified charBounds.`);
-      console.trace('Stack trace:');
-    }
+    if (this._justifyApplied) ;
     let width = 0,
       prevGrapheme,
       graphemeInfo;
@@ -818,13 +991,7 @@ class FabricText extends StyledText {
       top = this._getTopOffset();
 
     // Debug: log once per render
-    if (method === 'fillText' && (_this$textAlign = this.textAlign) !== null && _this$textAlign !== void 0 && _this$textAlign.includes('justify')) {
-      console.log('=== RENDER DEBUG ===');
-      console.log('direction:', this.direction);
-      console.log('textAlign:', this.textAlign);
-      console.log('width:', this.width);
-      console.log('_getLeftOffset:', left);
-    }
+    if (method === 'fillText' && (_this$textAlign = this.textAlign) !== null && _this$textAlign !== void 0 && _this$textAlign.includes('justify')) ;
     for (let i = 0, len = this._textLines.length; i < len; i++) {
       var _this$textAlign2;
       const heightOfLine = this.getHeightOfLine(i),
@@ -833,8 +1000,8 @@ class FabricText extends StyledText {
 
       // Debug: log line offsets for justify
       if (method === 'fillText' && (_this$textAlign2 = this.textAlign) !== null && _this$textAlign2 !== void 0 && _this$textAlign2.includes('justify')) {
-        const lineWidth = this.getLineWidth(i);
-        console.log(`Line ${i}: leftOffset=${leftOffset.toFixed(2)}, lineWidth=${lineWidth.toFixed(2)}, renderAt=${(left + leftOffset).toFixed(2)}`);
+        this.getLineWidth(i);
+        // console.log(`Line ${i}: leftOffset=${leftOffset.toFixed(2)}, lineWidth=${lineWidth.toFixed(2)}, renderAt=${(left + leftOffset).toFixed(2)}`);
       }
       this._renderTextLine(method, ctx, this._textLines[i], left + leftOffset, top + lineHeights + maxHeight, i);
       lineHeights += heightOfLine;
@@ -885,12 +1052,18 @@ class FabricText extends StyledText {
     const lineHeight = this.getHeightOfLine(lineIndex),
       isJustify = this.textAlign.includes(JUSTIFY),
       path = this.path,
-      shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path,
       isLtr = this.direction === 'ltr',
       sign = this.direction === 'ltr' ? 1 : -1,
       // this was changed in the PR #7674
       // currentDirection = ctx.canvas.getAttribute('dir');
       currentDirection = ctx.direction;
+
+    // Check if we should use BiDi-aware rendering with pre-calculated positions
+    // This is needed for advanced layout with RTL or mixed BiDi text
+    const chars = this.__charBounds[lineIndex];
+    this.enableAdvancedLayout && (chars === null || chars === void 0 ? void 0 : chars.length) > 0 && chars[0].renderLeft !== undefined;
+
+    const shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path;
     let actualStyle,
       nextStyle,
       charsToRender = '',
@@ -899,6 +1072,9 @@ class FabricText extends StyledText {
       timeToRender,
       drawingLeft;
     ctx.save();
+
+    // For BiDi rendering with pre-calculated positions, disable browser BiDi
+    // and render each character at its calculated visual position
     if (currentDirection !== this.direction) {
       ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
@@ -918,12 +1094,12 @@ class FabricText extends StyledText {
     }
     // Debug: Log charBounds being used for first line only during justify
     if (isJustify && lineIndex === 0 && method === 'fillText') {
-      console.log(`\n=== RENDER _renderChars line ${lineIndex} ===`);
-      console.log('Initial left:', left.toFixed(2), 'sign:', sign);
-      console.log('_justifyApplied flag:', this._justifyApplied);
+      // console.log(`\n=== RENDER _renderChars line ${lineIndex} ===`);
+      // console.log('Initial left:', left.toFixed(2), 'sign:', sign);
+      // console.log('_justifyApplied flag:', (this as any)._justifyApplied);
       const lineBounds = this.__charBounds[lineIndex];
-      const totalKW = (lineBounds === null || lineBounds === void 0 ? void 0 : lineBounds.reduce((s, b) => s + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0)) || 0;
-      console.log('Total kernedWidth in charBounds:', totalKW.toFixed(2), '(should be ~300 if justify was applied)');
+      (lineBounds === null || lineBounds === void 0 ? void 0 : lineBounds.reduce((s, b) => s + ((b === null || b === void 0 ? void 0 : b.kernedWidth) || 0), 0)) || 0;
+      // console.log('Total kernedWidth in charBounds:', totalKW.toFixed(2), '(should be ~300 if justify was applied)');
       // Log first few space widths to verify expansion
       const spaceIndices = [3, 9, 15, 23, 31];
       spaceIndices.forEach(idx => {
@@ -972,10 +1148,6 @@ class FabricText extends StyledText {
           // For RTL with textAlign='right': x is the right edge, so drawingLeft = left
           // Both cases: drawingLeft = left (the text alignment handles the edge correctly)
           drawingLeft = left;
-          // Debug: log first chunk positioning for justify
-          if (isJustify && lineIndex === 0 && method === 'fillText' && i < 5) {
-            console.log(`  Chunk ending at char ${i}: left=${left.toFixed(2)}, boxWidth=${boxWidth.toFixed(2)}, drawingLeft=${drawingLeft.toFixed(2)}, textAlign=${isLtr ? 'left' : 'right'}`);
-          }
           this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top);
         }
         charsToRender = '';
@@ -984,11 +1156,6 @@ class FabricText extends StyledText {
         boxWidth = 0;
       }
     }
-    // Debug: log final position for justify
-    if (isJustify && lineIndex === 0 && method === 'fillText') {
-      console.log('Final left position after rendering:', left.toFixed(2));
-      console.log('Expected final position:', (sign > 0 ? this.width / 2 : -this.width / 2).toFixed(2));
-    }
     ctx.restore();
   }
 
@@ -1220,12 +1387,159 @@ class FabricText extends StyledText {
    * @private
    */
   _clearCache() {
+    // console.log('🗑️ _clearCache called');
+    // console.trace('🗑️ _clearCache stack trace');
     this._forceClearCache = false;
     this.__lineWidths = [];
     this.__lineHeights = [];
     this.__charBounds = [];
+    this.__kashidaInfo = [];
     // Reset justify applied flag
     this._justifyApplied = false;
+    // Reset dimension state to force recalculation
+    this._lastDimensionState = null;
+  }
+
+  /**
+   * Convert a display character index (in _textLines with tatweels) to original text index.
+   * When kashida is applied, _textLines contains extra tatweel characters that don't exist
+   * in the original text. This method maps back to the original index.
+   * @param lineIndex - The line index
+   * @param displayCharIndex - Character index in the display text (with tatweels)
+   * @returns Original character index (without tatweels)
+   */
+  _displayToOriginalIndex(lineIndex, displayCharIndex) {
+    var _this$__kashidaInfo;
+    // console.log(`🔄 _displayToOriginalIndex called: line=${lineIndex}, displayIdx=${displayCharIndex}`);
+    // console.log(`🔄 __kashidaInfo exists: ${!!this.__kashidaInfo}, length: ${this.__kashidaInfo?.length}`);
+    // console.log(`🔄 __kashidaInfo raw:`, JSON.stringify(this.__kashidaInfo));
+
+    const kashidaInfo = (_this$__kashidaInfo = this.__kashidaInfo) === null || _this$__kashidaInfo === void 0 ? void 0 : _this$__kashidaInfo[lineIndex];
+    if (!kashidaInfo || kashidaInfo.length === 0) {
+      // No kashida on this line, indices are the same
+      // console.log(`🔄 No kashida info for line ${lineIndex}, returning same index`);
+      return displayCharIndex;
+    }
+
+    // Sort kashida info by charIndex ascending for proper traversal
+    const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+
+    // console.log(`🔄 _displayToOriginalIndex: line=${lineIndex}, displayIdx=${displayCharIndex}`);
+    // console.log(`🔄 kashidaInfo:`, sortedKashida.map(k => `{charIdx:${k.charIndex}, cnt:${k.tatweelCount}}`).join(', '));
+
+    let tatweelsBeforeIndex = 0;
+    for (const k of sortedKashida) {
+      const tatweelCount = k.tatweelCount || 0;
+      // Position where tatweels start (after the original character)
+      const tatweelStartPos = k.charIndex + 1 + tatweelsBeforeIndex;
+      const tatweelEndPos = tatweelStartPos + tatweelCount;
+
+      // console.log(`🔄   k.charIndex=${k.charIndex}, tatweelStartPos=${tatweelStartPos}, tatweelEndPos=${tatweelEndPos}, tatweelsBeforeIndex=${tatweelsBeforeIndex}`);
+
+      if (displayCharIndex < tatweelStartPos) {
+        // Before this kashida point
+        // console.log(`🔄   displayIdx < tatweelStartPos, break`);
+        break;
+      } else if (displayCharIndex < tatweelEndPos) {
+        // Within tatweel characters - map to the character before tatweels
+        // console.log(`🔄   Within tatweel, return ${k.charIndex + 1}`);
+        return k.charIndex + 1;
+      } else {
+        // After this kashida point
+        tatweelsBeforeIndex += tatweelCount;
+        // console.log(`🔄   After this kashida, tatweelsBeforeIndex now=${tatweelsBeforeIndex}`);
+      }
+    }
+
+    // Subtract all tatweels that come before this position
+    const result = displayCharIndex - tatweelsBeforeIndex;
+    // console.log(`🔄 Final result: ${displayCharIndex} - ${tatweelsBeforeIndex} = ${result}`);
+    return result;
+  }
+
+  /**
+   * Convert an original text character index to display index (in _textLines with tatweels).
+   * @param lineIndex - The line index
+   * @param originalCharIndex - Character index in the original text (without tatweels)
+   * @returns Display character index (with tatweels)
+   */
+  _originalToDisplayIndex(lineIndex, originalCharIndex) {
+    var _this$__kashidaInfo2;
+    const kashidaInfo = (_this$__kashidaInfo2 = this.__kashidaInfo) === null || _this$__kashidaInfo2 === void 0 ? void 0 : _this$__kashidaInfo2[lineIndex];
+    if (!kashidaInfo || kashidaInfo.length === 0) {
+      // No kashida on this line, indices are the same
+      return originalCharIndex;
+    }
+
+    // Sort kashida info by charIndex ascending
+    const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+    let tatweelsBeforeIndex = 0;
+    for (const k of sortedKashida) {
+      const tatweelCount = k.tatweelCount || 0;
+      // If the original char index is after this kashida insertion point,
+      // add the tatweels to the offset
+      if (originalCharIndex > k.charIndex) {
+        tatweelsBeforeIndex += tatweelCount;
+      } else {
+        break;
+      }
+    }
+    return originalCharIndex + tatweelsBeforeIndex;
+  }
+
+  /**
+   * Check if a display character index points to a tatweel character.
+   * @param lineIndex - The line index
+   * @param displayCharIndex - Character index in the display text
+   * @returns True if the character at this index is a tatweel
+   */
+  _isTatweelAtDisplayIndex(lineIndex, displayCharIndex) {
+    var _this$__kashidaInfo3;
+    const kashidaInfo = (_this$__kashidaInfo3 = this.__kashidaInfo) === null || _this$__kashidaInfo3 === void 0 ? void 0 : _this$__kashidaInfo3[lineIndex];
+    if (!kashidaInfo || kashidaInfo.length === 0) {
+      return false;
+    }
+
+    // Sort kashida info by charIndex ascending
+    const sortedKashida = [...kashidaInfo].sort((a, b) => a.charIndex - b.charIndex);
+    let tatweelsBeforeIndex = 0;
+    for (const k of sortedKashida) {
+      const tatweelCount = k.tatweelCount || 0;
+      const tatweelStartPos = k.charIndex + 1 + tatweelsBeforeIndex;
+      const tatweelEndPos = tatweelStartPos + tatweelCount;
+      if (displayCharIndex >= tatweelStartPos && displayCharIndex < tatweelEndPos) {
+        return true;
+      }
+      tatweelsBeforeIndex += tatweelCount;
+    }
+    return false;
+  }
+
+  /**
+   * Get the total number of tatweel characters inserted in a line.
+   * @param lineIndex - The line index
+   * @returns Total number of tatweels in this line
+   */
+  _getTatweelCountForLine(lineIndex) {
+    var _this$__kashidaInfo4;
+    const kashidaInfo = (_this$__kashidaInfo4 = this.__kashidaInfo) === null || _this$__kashidaInfo4 === void 0 ? void 0 : _this$__kashidaInfo4[lineIndex];
+    if (!kashidaInfo || kashidaInfo.length === 0) {
+      return 0;
+    }
+    return kashidaInfo.reduce((sum, k) => sum + (k.tatweelCount || 0), 0);
+  }
+
+  /**
+   * Get the original line length (without tatweels).
+   * When kashida is applied, _textLines contains extra tatweel characters.
+   * This returns the length as it would be in the original text.
+   * @param lineIndex - The line index
+   * @returns Original line length without tatweels
+   */
+  _getOriginalLineLength(lineIndex) {
+    var _this$_textLines$line;
+    const displayLength = ((_this$_textLines$line = this._textLines[lineIndex]) === null || _this$_textLines$line === void 0 ? void 0 : _this$_textLines$line.length) || 0;
+    return displayLength - this._getTatweelCountForLine(lineIndex);
   }
 
   /**