@nasser-sw/fabric 7.0.1-beta10 → 7.0.1-beta12

package/dist/src/shapes/IText/ITextKeyBehavior.mjs

@@ -3,39 +3,39 @@ import { getFabricDocument, getEnv } from '../../env/index.mjs';
 import { capValue } from '../../util/misc/capValue.mjs';
 import { ITextBehavior } from './ITextBehavior.mjs';
 import { getDocumentFromElement } from '../../util/dom_misc.mjs';
-import { RIGHT, LEFT, CHANGED } from '../../constants.mjs';
+import { CHANGED, RIGHT, LEFT } from '../../constants.mjs';
 
 class ITextKeyBehavior extends ITextBehavior {
-  /**
-   * For functionalities on keyDown
-   * Map a special key to a function of the instance/prototype
-   * If you need different behavior for ESC or TAB or arrows, you have to change
-   * this map setting the name of a function that you build on the IText or
-   * your prototype.
-   * the map change will affect all Instances unless you need for only some text Instances
-   * in that case you have to clone this object and assign your Instance.
-   * this.keysMap = Object.assign({}, this.keysMap);
-   * The function must be in IText.prototype.myFunction And will receive event as args[0]
+  /**
+   * For functionalities on keyDown
+   * Map a special key to a function of the instance/prototype
+   * If you need different behavior for ESC or TAB or arrows, you have to change
+   * this map setting the name of a function that you build on the IText or
+   * your prototype.
+   * the map change will affect all Instances unless you need for only some text Instances
+   * in that case you have to clone this object and assign your Instance.
+   * this.keysMap = Object.assign({}, this.keysMap);
+   * The function must be in IText.prototype.myFunction And will receive event as args[0]
    */
 
-  /**
-   * For functionalities on keyUp + ctrl || cmd
+  /**
+   * For functionalities on keyUp + ctrl || cmd
    */
 
-  /**
-   * For functionalities on keyDown + ctrl || cmd
+  /**
+   * For functionalities on keyDown + ctrl || cmd
    */
 
-  /**
-   * DOM container to append the hiddenTextarea.
-   * An alternative to attaching to the document.body.
-   * Useful to reduce laggish redraw of the full document.body tree and
-   * also with modals event capturing that won't let the textarea take focus.
-   * @type HTMLElement
+  /**
+   * DOM container to append the hiddenTextarea.
+   * An alternative to attaching to the document.body.
+   * Useful to reduce laggish redraw of the full document.body tree and
+   * also with modals event capturing that won't let the textarea take focus.
+   * @type HTMLElement
    */
 
-  /**
-   * Initializes hidden textarea (needed to bring up keyboard in iOS)
+  /**
+   * Initializes hidden textarea (needed to bring up keyboard in iOS)
    */
   initHiddenTextarea() {
     const doc = this.canvas && getDocumentFromElement(this.canvas.getElement()) || getFabricDocument();
@@ -78,17 +78,17 @@ class ITextKeyBehavior extends ITextBehavior {
     this.hiddenTextarea = textarea;
   }
 
-  /**
-   * Override this method to customize cursor behavior on textbox blur
+  /**
+   * Override this method to customize cursor behavior on textbox blur
    */
   blur() {
     this.abortCursorAnimation();
   }
 
-  /**
-   * Handles keydown event
-   * only used for arrows and combination of modifier keys.
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Handles keydown event
+   * only used for arrows and combination of modifier keys.
+   * @param {KeyboardEvent} e Event object
    */
   onKeyDown(e) {
     if (!this.isEditing) {
@@ -114,11 +114,11 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * Handles keyup event
-   * We handle KeyUp because ie11 and edge have difficulties copy/pasting
-   * if a copy/cut event fired, keyup is dismissed
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Handles keyup event
+   * We handle KeyUp because ie11 and edge have difficulties copy/pasting
+   * if a copy/cut event fired, keyup is dismissed
+   * @param {KeyboardEvent} e Event object
    */
   onKeyUp(e) {
     if (!this.isEditing || this._copyDone || this.inCompositionMode) {
@@ -135,9 +135,9 @@ class ITextKeyBehavior extends ITextBehavior {
     this.canvas && this.canvas.requestRenderAll();
   }
 
-  /**
-   * Handles onInput event
-   * @param {Event} e Event object
+  /**
+   * Handles onInput event
+   * @param {Event} e Event object
    */
   onInput(e) {
     const fromPaste = this.fromPaste;
@@ -151,6 +151,52 @@ class ITextKeyBehavior extends ITextBehavior {
     if (!this.isEditing) {
       return;
     }
+
+    // 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
+    });
+
+    // 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);
+
+      // Clear all relevant caches that might prevent visual updates
+      this.cursorOffsetCache = {};
+      this._browserWrapCache = null;
+      this._lastDimensionState = null;
+      this._forceClearCache = true;
+      console.log('🔤 Cleared all caches');
+
+      // Use the same logic as updateAndFire but immediately
+      this.updateFromTextArea();
+      this.fire(CHANGED);
+      if (this.canvas) {
+        this.canvas.fire('text:changed', {
+          target: this
+        });
+        // ONLY use synchronous rendering to avoid race conditions
+        // Remove requestRenderAll() which queues for next animation frame
+        this.canvas.renderAll();
+      }
+      console.log('🔤 After updateFromTextArea - fabric text:', this.text);
+      console.log('🔤 Sync complete, caches cleared, synchronous render only');
+      return;
+    }
     const updateAndFire = () => {
       this.updateFromTextArea();
       this.fire(CHANGED);
@@ -228,15 +274,15 @@ class ITextKeyBehavior extends ITextBehavior {
     updateAndFire();
   }
 
-  /**
-   * Composition start
+  /**
+   * Composition start
    */
   onCompositionStart() {
     this.inCompositionMode = true;
   }
 
-  /**
-   * Composition end
+  /**
+   * Composition end
    */
   onCompositionEnd() {
     this.inCompositionMode = false;
@@ -254,8 +300,8 @@ class ITextKeyBehavior extends ITextBehavior {
     this.updateTextareaPosition();
   }
 
-  /**
-   * Copies selected text
+  /**
+   * Copies selected text
    */
   copy() {
     if (this.selectionStart === this.selectionEnd) {
@@ -274,19 +320,19 @@ class ITextKeyBehavior extends ITextBehavior {
     this._copyDone = true;
   }
 
-  /**
-   * Pastes text
+  /**
+   * Pastes text
    */
   paste() {
     this.fromPaste = true;
   }
 
-  /**
-   * Finds the width in pixels before the cursor on the same line
-   * @private
-   * @param {Number} lineIndex
-   * @param {Number} charIndex
-   * @return {Number} widthBeforeCursor width before cursor
+  /**
+   * Finds the width in pixels before the cursor on the same line
+   * @private
+   * @param {Number} lineIndex
+   * @param {Number} charIndex
+   * @return {Number} widthBeforeCursor width before cursor
    */
   _getWidthBeforeCursor(lineIndex, charIndex) {
     let widthBeforeCursor = this._getLineLeftOffset(lineIndex),
@@ -298,11 +344,11 @@ class ITextKeyBehavior extends ITextBehavior {
     return widthBeforeCursor;
   }
 
-  /**
-   * Gets start offset of a selection
-   * @param {KeyboardEvent} e Event object
-   * @param {Boolean} isRight
-   * @return {Number}
+  /**
+   * Gets start offset of a selection
+   * @param {KeyboardEvent} e Event object
+   * @param {Boolean} isRight
+   * @return {Number}
    */
   getDownCursorOffset(e, isRight) {
     const selectionProp = this._getSelectionForOffset(e, isRight),
@@ -320,12 +366,12 @@ class ITextKeyBehavior extends ITextBehavior {
     return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex);
   }
 
-  /**
-   * private
-   * Helps finding if the offset should be counted from Start or End
-   * @param {KeyboardEvent} e Event object
-   * @param {Boolean} isRight
-   * @return {Number}
+  /**
+   * private
+   * Helps finding if the offset should be counted from Start or End
+   * @param {KeyboardEvent} e Event object
+   * @param {Boolean} isRight
+   * @return {Number}
    */
   _getSelectionForOffset(e, isRight) {
     if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) {
@@ -335,10 +381,10 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * @param {KeyboardEvent} e Event object
-   * @param {Boolean} isRight
-   * @return {Number}
+  /**
+   * @param {KeyboardEvent} e Event object
+   * @param {Boolean} isRight
+   * @return {Number}
    */
   getUpCursorOffset(e, isRight) {
     const selectionProp = this._getSelectionForOffset(e, isRight),
@@ -357,9 +403,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return -this._textLines[lineIndex - 1].length + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset);
   }
 
-  /**
-   * for a given width it founds the matching character.
-   * @private
+  /**
+   * for a given width it founds the matching character.
+   * @private
    */
   _getIndexOnLine(lineIndex, width) {
     const line = this._textLines[lineIndex],
@@ -389,9 +435,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return indexOnLine;
   }
 
-  /**
-   * Moves cursor down
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor down
+   * @param {KeyboardEvent} e Event object
    */
   moveCursorDown(e) {
     if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) {
@@ -400,9 +446,9 @@ class ITextKeyBehavior extends ITextBehavior {
     this._moveCursorUpOrDown('Down', e);
   }
 
-  /**
-   * Moves cursor up
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor up
+   * @param {KeyboardEvent} e Event object
    */
   moveCursorUp(e) {
     if (this.selectionStart === 0 && this.selectionEnd === 0) {
@@ -411,10 +457,10 @@ class ITextKeyBehavior extends ITextBehavior {
     this._moveCursorUpOrDown('Up', e);
   }
 
-  /**
-   * Moves cursor up or down, fires the events
-   * @param {String} direction 'Up' or 'Down'
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor up or down, fires the events
+   * @param {String} direction 'Up' or 'Down'
+   * @param {KeyboardEvent} e Event object
    */
   _moveCursorUpOrDown(direction, e) {
     const offset = this[`get${direction}CursorOffset`](e, this._selectionDirection === RIGHT);
@@ -436,9 +482,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * Moves cursor with shift
-   * @param {Number} offset
+  /**
+   * Moves cursor with shift
+   * @param {Number} offset
    */
   moveCursorWithShift(offset) {
     const newSelection = this._selectionDirection === LEFT ? this.selectionStart + offset : this.selectionEnd + offset;
@@ -446,9 +492,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return offset !== 0;
   }
 
-  /**
-   * Moves cursor up without shift
-   * @param {Number} offset
+  /**
+   * Moves cursor up without shift
+   * @param {Number} offset
    */
   moveCursorWithoutShift(offset) {
     if (offset < 0) {
@@ -461,9 +507,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return offset !== 0;
   }
 
-  /**
-   * Moves cursor left
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor left
+   * @param {KeyboardEvent} e Event object
    */
   moveCursorLeft(e) {
     if (this.selectionStart === 0 && this.selectionEnd === 0) {
@@ -472,11 +518,11 @@ class ITextKeyBehavior extends ITextBehavior {
     this._moveCursorLeftOrRight('Left', e);
   }
 
-  /**
-   * @private
-   * @return {Boolean} true if a change happened
-   *
-   * @todo refactor not to use method name composition
+  /**
+   * @private
+   * @return {Boolean} true if a change happened
+   *
+   * @todo refactor not to use method name composition
    */
   _move(e, prop, direction) {
     let newValue;
@@ -495,23 +541,23 @@ class ITextKeyBehavior extends ITextBehavior {
     return false;
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _moveLeft(e, prop) {
     return this._move(e, prop, 'Left');
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _moveRight(e, prop) {
     return this._move(e, prop, 'Right');
   }
 
-  /**
-   * Moves cursor left without keeping selection
-   * @param {KeyboardEvent} e
+  /**
+   * Moves cursor left without keeping selection
+   * @param {KeyboardEvent} e
    */
   moveCursorLeftWithoutShift(e) {
     let change = true;
@@ -526,9 +572,9 @@ class ITextKeyBehavior extends ITextBehavior {
     return change;
   }
 
-  /**
-   * Moves cursor left while keeping selection
-   * @param {KeyboardEvent} e
+  /**
+   * Moves cursor left while keeping selection
+   * @param {KeyboardEvent} e
    */
   moveCursorLeftWithShift(e) {
     if (this._selectionDirection === RIGHT && this.selectionStart !== this.selectionEnd) {
@@ -539,9 +585,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * Moves cursor right
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor right
+   * @param {KeyboardEvent} e Event object
    */
   moveCursorRight(e) {
     if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) {
@@ -550,10 +596,10 @@ class ITextKeyBehavior extends ITextBehavior {
     this._moveCursorLeftOrRight('Right', e);
   }
 
-  /**
-   * Moves cursor right or Left, fires event
-   * @param {String} direction 'Left', 'Right'
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor right or Left, fires event
+   * @param {String} direction 'Left', 'Right'
+   * @param {KeyboardEvent} e Event object
    */
   _moveCursorLeftOrRight(direction, e) {
     const actionName = `moveCursor${direction}${e.shiftKey ? 'WithShift' : 'WithoutShift'}`;
@@ -568,9 +614,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * Moves cursor right while keeping selection
-   * @param {KeyboardEvent} e
+  /**
+   * Moves cursor right while keeping selection
+   * @param {KeyboardEvent} e
    */
   moveCursorRightWithShift(e) {
     if (this._selectionDirection === LEFT && this.selectionStart !== this.selectionEnd) {
@@ -581,9 +627,9 @@ class ITextKeyBehavior extends ITextBehavior {
     }
   }
 
-  /**
-   * Moves cursor right without keeping selection
-   * @param {KeyboardEvent} e Event object
+  /**
+   * Moves cursor right without keeping selection
+   * @param {KeyboardEvent} e Event object
    */
   moveCursorRightWithoutShift(e) {
     let changed = true;