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

package/src/shapes/IText/ITextBehavior.ts

@@ -27,7 +27,11 @@ import { extractLinesFromDOM, storeBrowserLines } from '../../text/browserLines'
  *  - `\-`     Matches a "-" character (char code 45).
  */
 // eslint-disable-next-line no-useless-escape
-const reNonWord = /[ \n\.,;!\?\-]/;
+// Word boundary characters for Latin, Arabic, and Hebrew
+// Latin: space, newline, punctuation
+// Arabic: ، (comma U+060C), ؛ (semicolon U+061B), ؟ (question U+061F), ۔ (full stop U+06D4), ـ (tatweel U+0640)
+// Hebrew: ׃ (sof pasuq U+05C3), ״ (gershayim U+05F4)
+const reNonWord = /[ \n\.,;!\?\-\u060C\u061B\u061F\u06D4\u0640\u05C3\u05F4\u2000-\u206F]/;
 
 export type ITextEvents = ObjectEvents & {
   'selection:changed': never;
@@ -325,12 +329,102 @@ export abstract class ITextBehavior<
 
   /**
    * Finds index corresponding to beginning or end of a word
+   * Uses Intl.Segmenter for proper Unicode word segmentation when available,
+   * falls back to regex-based detection for older browsers.
    * @param {Number} selectionStart Index of a character
    * @param {Number} direction 1 or -1
    * @return {Number} Index of the beginning or end of a word
    */
   searchWordBoundary(selectionStart: number, direction: 1 | -1): number {
-    const text = this._text;
+    // Try to use Intl.Segmenter for proper Unicode word segmentation
+    if (typeof Intl !== 'undefined' && (Intl as any).Segmenter) {
+      return this._searchWordBoundaryWithSegmenter(selectionStart, direction);
+    }
+    // Fallback to regex-based detection
+    return this._searchWordBoundaryWithRegex(selectionStart, direction);
+  }
+
+  /**
+   * Word boundary search using Intl.Segmenter (proper Unicode support)
+   * Works on original text (this.text) since selectionStart is in original text space
+   */
+  private _searchWordBoundaryWithSegmenter(selectionStart: number, direction: 1 | -1): number {
+    // Use original text (without kashida) since indices are in original text space
+    const originalText = this.text;
+    const SegmenterClass = (Intl as any).Segmenter;
+    const segmenter = new SegmenterClass(undefined, { granularity: 'word' });
+    const segments = Array.from(segmenter.segment(originalText)) as Array<{
+      segment: string;
+      index: number;
+      isWordLike: boolean;
+    }>;
+
+    if (segments.length === 0) {
+      return direction === -1 ? 0 : originalText.length;
+    }
+
+    // Find the segment containing the cursor position
+    let currentSegmentIdx = 0;
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      if (selectionStart >= seg.index && selectionStart < seg.index + seg.segment.length) {
+        currentSegmentIdx = i;
+        break;
+      }
+      if (selectionStart >= seg.index + seg.segment.length) {
+        currentSegmentIdx = i;
+      }
+    }
+
+    // Find word boundaries
+    if (direction === -1) {
+      // Search backwards for word start
+      let targetIdx = currentSegmentIdx;
+
+      // If cursor is at the start of a segment, look at previous segment
+      if (selectionStart === segments[targetIdx].index && targetIdx > 0) {
+        targetIdx--;
+      }
+
+      // Skip non-word segments
+      while (targetIdx > 0 && !segments[targetIdx].isWordLike) {
+        targetIdx--;
+      }
+
+      // Return the start of the word segment
+      if (segments[targetIdx].isWordLike) {
+        return segments[targetIdx].index;
+      }
+      return 0;
+    } else {
+      // Search forwards for word end
+      let targetIdx = currentSegmentIdx;
+
+      // If we're in a word, find its end
+      if (segments[targetIdx].isWordLike) {
+        return segments[targetIdx].index + segments[targetIdx].segment.length;
+      }
+
+      // Skip non-word segments to find next word
+      while (targetIdx < segments.length && !segments[targetIdx].isWordLike) {
+        targetIdx++;
+      }
+
+      // Return the end of the next word segment
+      if (targetIdx < segments.length && segments[targetIdx].isWordLike) {
+        return segments[targetIdx].index + segments[targetIdx].segment.length;
+      }
+      return originalText.length;
+    }
+  }
+
+  /**
+   * Word boundary search using regex (fallback for older browsers)
+   * Works on original text (this.text) since selectionStart is in original text space
+   */
+  private _searchWordBoundaryWithRegex(selectionStart: number, direction: 1 | -1): number {
+    // Use original text as an array of characters
+    const text = Array.from(this.text);
     // if we land on a space we move the cursor backwards
     // if we are searching boundary end we move the cursor backwards ONLY if we don't land on a line break
     let index =
@@ -455,84 +549,84 @@ export abstract class ITextBehavior<
     });
   }
 
-  /**
-   * Commit overlay editing changes
-   */
-  private commitOverlayEdit(text: string) {
-    
-    // Preserve geometry to avoid nudge when layout recalculates
-    const prevLeft = this.left;
-    const prevTop = this.top;
-    const prevWidth = this.get('width');
-    const prevMinWidth = (this as any).dynamicMinWidth;
-    const prevUsingBrowserWrap = (this as any)._usingBrowserWrapping;
-    const hadLock = (this as any).lockDynamicMinWidth;
-    (this as any).lockDynamicMinWidth = true;
-    const countKashida = (val?: string) => (val ? (val.match(/\u0640/g) || []).length : 0);
-    console.log('[OverlayCommit] pre-layout', {
-      textLength: text?.length,
-      kashidas: countKashida(text),
-      prevWidth,
-      prevMinWidth,
-      prevUsingBrowserWrap,
-      hadLock,
-      dir: (this as any).direction,
-      align: (this as any).textAlign,
-    });
-
-    const overlayEditor = (this as any).__overlayEditor;
-    
-    if (overlayEditor) {
-      // Extract browser lines for pixel-perfect rendering
-      try {
+  /**
+   * Commit overlay editing changes
+   */
+  private commitOverlayEdit(text: string) {
+    
+    // Preserve geometry to avoid nudge when layout recalculates
+    const prevLeft = this.left;
+    const prevTop = this.top;
+    const prevWidth = this.get('width');
+    const prevMinWidth = (this as any).dynamicMinWidth;
+    const prevUsingBrowserWrap = (this as any)._usingBrowserWrapping;
+    const hadLock = (this as any).lockDynamicMinWidth;
+    (this as any).lockDynamicMinWidth = true;
+    const countKashida = (val?: string) => (val ? (val.match(/\u0640/g) || []).length : 0);
+    // console.log('[OverlayCommit] pre-layout', {
+    //   textLength: text?.length,
+    //   kashidas: countKashida(text),
+    //   prevWidth,
+    //   prevMinWidth,
+    //   prevUsingBrowserWrap,
+    //   hadLock,
+    //   dir: (this as any).direction,
+    //   align: (this as any).textAlign,
+    // });
+
+    const overlayEditor = (this as any).__overlayEditor;
+    
+    if (overlayEditor) {
+      // Extract browser lines for pixel-perfect rendering
+      try {
         const result = extractLinesFromDOM(overlayEditor.textareaElement);
         storeBrowserLines(this, result.lines);
       } catch (error) {
-        console.warn('Failed to extract browser lines:', error);
+        // console.warn('Failed to extract browser lines:', error);
       }
     }
-
-    // Update text content and trigger layout recalculation
-    this.text = text;
-    // Freeze dynamic min width during this layout pass so width doesn't shrink/expand on commit
-    if (prevMinWidth !== undefined) {
-      (this as any).dynamicMinWidth = Math.max(prevMinWidth || 0, prevWidth || 0);
-    }
-    // Keep browser wrapping flag stable
-    if (prevUsingBrowserWrap !== undefined) {
-      (this as any)._usingBrowserWrapping = prevUsingBrowserWrap;
-    }
-
-    this.dirty = true;
-    this.initDimensions();
-    console.log('[OverlayCommit] post-layout', {
-      width: this.get('width'),
-      dynMinWidth: (this as any).dynamicMinWidth,
-      usingBrowserWrap: (this as any)._usingBrowserWrapping,
-      lockDynamicMinWidth: (this as any).lockDynamicMinWidth,
-      kashidas: countKashida(this.text),
-      left: this.left,
-      top: this.top,
-    });
-    // Restore geometry after layout so the object doesn't drift
-    this.set({
-      left: prevLeft,
-      top: prevTop,
-      width: prevWidth,
-    });
-    this.setCoords();
-    this.exitEditing();
-    (this as any).lockDynamicMinWidth = hadLock;
-    console.log('[OverlayCommit] final', {
-      width: this.get('width'),
-      dynMinWidth: (this as any).dynamicMinWidth,
-      lockRestored: hadLock,
-      left: this.left,
-      top: this.top,
-    });
-    this.fire('changed');
-    this.canvas && this.canvas.requestRenderAll();
-  }
+
+    // Update text content and trigger layout recalculation
+    this.text = text;
+    // Freeze dynamic min width during this layout pass so width doesn't shrink/expand on commit
+    if (prevMinWidth !== undefined) {
+      (this as any).dynamicMinWidth = Math.max(prevMinWidth || 0, prevWidth || 0);
+    }
+    // Keep browser wrapping flag stable
+    if (prevUsingBrowserWrap !== undefined) {
+      (this as any)._usingBrowserWrapping = prevUsingBrowserWrap;
+    }
+
+    this.dirty = true;
+    this.initDimensions();
+    // console.log('[OverlayCommit] post-layout', {
+    //   width: this.get('width'),
+    //   dynMinWidth: (this as any).dynamicMinWidth,
+    //   usingBrowserWrap: (this as any)._usingBrowserWrapping,
+    //   lockDynamicMinWidth: (this as any).lockDynamicMinWidth,
+    //   kashidas: countKashida(this.text),
+    //   left: this.left,
+    //   top: this.top,
+    // });
+    // Restore geometry after layout so the object doesn't drift
+    this.set({
+      left: prevLeft,
+      top: prevTop,
+      width: prevWidth,
+    });
+    this.setCoords();
+    this.exitEditing();
+    (this as any).lockDynamicMinWidth = hadLock;
+    // console.log('[OverlayCommit] final', {
+    //   width: this.get('width'),
+    //   dynMinWidth: (this as any).dynamicMinWidth,
+    //   lockRestored: hadLock,
+    //   left: this.left,
+    //   top: this.top,
+    // });
+    this.fire('changed');
+    this.canvas && this.canvas.requestRenderAll();
+  }
 
   /**
    * Cancel overlay editing without changes
@@ -646,7 +740,7 @@ export abstract class ITextBehavior<
    * @private
    */
   _updateTextarea() {
-    console.log('🔤 _updateTextarea called with fabric text:', this.text);
+    // console.log('🔤 _updateTextarea called with fabric text:', this.text);
     this.cursorOffsetCache = {};
     if (!this.hiddenTextarea) {
       return;
@@ -655,9 +749,9 @@ export abstract class ITextBehavior<
     // Sync textarea content with fabric text to prevent double-keypress issues
     const currentFabricText = this.text;
     if (this.hiddenTextarea.value !== currentFabricText) {
-      console.log('🔤 _updateTextarea: syncing textarea to fabric text');
-      console.log('🔤 _updateTextarea: textarea was:', this.hiddenTextarea.value);
-      console.log('🔤 _updateTextarea: fabric is:', currentFabricText);
+      // console.log('🔤 _updateTextarea: syncing textarea to fabric text');
+      // console.log('🔤 _updateTextarea: textarea was:', this.hiddenTextarea.value);
+      // console.log('🔤 _updateTextarea: fabric is:', currentFabricText);
       this.hiddenTextarea.value = currentFabricText;
     }
     
@@ -1237,4 +1331,4 @@ export abstract class ITextBehavior<
       this.selectionEnd = newSelection;
     }
   }
-}
+}

package/src/shapes/IText/ITextClickBehavior.ts

@@ -232,7 +232,8 @@ export abstract class ITextClickBehavior<
 
     for (let j = 0; j < charLength; j++) {
       const charStart = lineLeftOffset + chars[j].left;
-      const charEnd = lineLeftOffset + chars[j + 1].left;
+      // For last character, use its width to calculate end position
+      const charEnd = lineLeftOffset + (chars[j + 1]?.left ?? (chars[j].left + chars[j].kernedWidth));
       const charMiddle = (charStart + charEnd) / 2;
       if (mouseOffset.x <= charMiddle) {
         charIndex = lineStartIndex + j;
@@ -244,11 +245,24 @@ export abstract class ITextClickBehavior<
       charIndex = lineStartIndex + charLength;
     }
 
-    const lineCharIndex = charIndex - lineStartIndex;
-    const result = this.flipX
-      ? lineStartIndex + (charLength - lineCharIndex)
-      : charIndex;
+    let lineCharIndex = charIndex - lineStartIndex;
 
-    return Math.min(result, this._text.length);
+    // Handle flipX
+    if (this.flipX) {
+      lineCharIndex = charLength - lineCharIndex;
+    }
+
+    // Convert display index to original index (handles kashida)
+    const originalLineCharIndex = (this as any)._displayToOriginalIndex(lineIndex, lineCharIndex);
+
+    // Calculate original line start (sum of original line lengths before this line)
+    let originalLineStart = 0;
+    for (let i = 0; i < lineIndex; i++) {
+      const originalLineLength = (this as any)._getOriginalLineLength(i);
+      originalLineStart += originalLineLength + this.missingNewlineOffset(i);
+    }
+
+    const originalIndex = originalLineStart + originalLineCharIndex;
+    return Math.min(originalIndex, this.text.length);
   }
 }

package/src/shapes/IText/ITextKeyBehavior.ts

@@ -180,21 +180,21 @@ export abstract class ITextKeyBehavior<
     }
     
     // Debug log to track the double keypress issue
-    console.log('🔤 onInput debug:', {
-      fabricText: this.text,
-      textareaValue: value,
-      fabricSelection: { start: this.selectionStart, end: this.selectionEnd },
-      textareaSelection: { start: selectionStart, end: selectionEnd },
-      fromPaste,
-      inComposition: this.inCompositionMode
-    });
+    // console.log('🔤 onInput debug:', {
+    //   fabricText: this.text,
+    //   textareaValue: value,
+    //   fabricSelection: { start: this.selectionStart, end: this.selectionEnd },
+    //   textareaSelection: { start: selectionStart, end: selectionEnd },
+    //   fromPaste,
+    //   inComposition: this.inCompositionMode
+    // });
     
     // Immediate sync for simple character replacement - fix for double keypress issue
     if (this.text !== value && !this.inCompositionMode) {
-      console.log('🔤 Immediate sync: fabric text differs from textarea, syncing immediately');
-      console.log('🔤 Before sync - fabric text:', this.text);
-      console.log('🔤 Before sync - textarea value:', value);
-      console.log('🔤 fromPaste:', fromPaste);
+      // console.log('🔤 Immediate sync: fabric text differs from textarea, syncing immediately');
+      // console.log('🔤 Before sync - fabric text:', this.text);
+      // console.log('🔤 Before sync - textarea value:', value);
+      // console.log('🔤 fromPaste:', fromPaste);
       
       // Clear all relevant caches that might prevent visual updates
       this.cursorOffsetCache = {};
@@ -202,7 +202,7 @@ export abstract class ITextKeyBehavior<
       (this as any)._lastDimensionState = null;
       this._forceClearCache = true;
       
-      console.log('🔤 Cleared all caches');
+      // console.log('🔤 Cleared all caches');
       
       // Use the same logic as updateAndFire but immediately
       this.updateFromTextArea();
@@ -214,8 +214,8 @@ export abstract class ITextKeyBehavior<
         this.canvas.renderAll();
       }
       
-      console.log('🔤 After updateFromTextArea - fabric text:', this.text);
-      console.log('🔤 Sync complete, caches cleared, synchronous render only');
+      // console.log('🔤 After updateFromTextArea - fabric text:', this.text);
+      // console.log('🔤 Sync complete, caches cleared, synchronous render only');
       return;
     }