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

package/dist/index.mjs

@@ -354,7 +354,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "7.0.1-beta9";
+var version = "7.0.1-beta11";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -4801,7 +4801,7 @@ const TEXT_DECORATION_THICKNESS = 'textDecorationThickness';
 const fontProperties = ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle'];
 const textDecorationProperties = ['underline', 'overline', 'linethrough'];
 const textLayoutProperties = [...fontProperties, 'lineHeight', 'text', 'charSpacing', 'textAlign', 'styles', 'path', 'pathStartOffset', 'pathSide', 'pathAlign', 'wrap', 'ellipsis', 'letterSpacing', 'enableAdvancedLayout', 'verticalAlign'];
-const additionalProps = [...textLayoutProperties, ...textDecorationProperties, 'textBackgroundColor', 'direction', TEXT_DECORATION_THICKNESS];
+const additionalProps = [...textLayoutProperties, ...textDecorationProperties, 'textBackgroundColor', 'direction', TEXT_DECORATION_THICKNESS, 'useOverlayEditing'];
 const styleProperties = [...fontProperties, ...textDecorationProperties, STROKE, 'strokeWidth', FILL, 'deltaY', 'textBackgroundColor', TEXT_DECORATION_THICKNESS];
 
 // @TODO: Many things here are configuration related and shouldn't be on the class nor prototype
@@ -22379,6 +22379,10 @@ class FabricText extends StyledText {
             textObject._usingBrowserWrapping = true;
             console.log(`🔤 STV font: Forcing browser wrapping flag during JSON load`);
 
+            // Enable overlay editing for STV fonts to use native browser text handling
+            textObject.useOverlayEditing = true;
+            console.log(`🔤 STV font: Enabling overlay editing during JSON load`);
+
             // Multiple initialization attempts for STV fonts
             const reinitWithDelay = attempt => {
               if (textObject.forceTextReinitialization) {
@@ -24151,10 +24155,20 @@ class ITextBehavior extends FabricText {
    * @private
    */
   _updateTextarea() {
+    console.log('🔤 _updateTextarea called with fabric text:', this.text);
     this.cursorOffsetCache = {};
     if (!this.hiddenTextarea) {
       return;
     }
+
+    // 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);
+      this.hiddenTextarea.value = currentFabricText;
+    }
     if (!this.inCompositionMode) {
       const newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text);
       this.hiddenTextarea.selectionStart = newSelection.selectionStart;
@@ -24656,36 +24670,36 @@ class ITextBehavior extends FabricText {
 }
 
 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();
@@ -24728,17 +24742,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) {
@@ -24764,11 +24778,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) {
@@ -24785,9 +24799,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;
@@ -24801,6 +24815,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);
@@ -24878,15 +24938,15 @@ class ITextKeyBehavior extends ITextBehavior {
     updateAndFire();
   }
 
-  /**
-   * Composition start
+  /**
+   * Composition start
    */
   onCompositionStart() {
     this.inCompositionMode = true;
   }
 
-  /**
-   * Composition end
+  /**
+   * Composition end
    */
   onCompositionEnd() {
     this.inCompositionMode = false;
@@ -24904,8 +24964,8 @@ class ITextKeyBehavior extends ITextBehavior {
     this.updateTextareaPosition();
   }
 
-  /**
-   * Copies selected text
+  /**
+   * Copies selected text
    */
   copy() {
     if (this.selectionStart === this.selectionEnd) {
@@ -24924,19 +24984,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),
@@ -24948,11 +25008,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),
@@ -24970,12 +25030,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) {
@@ -24985,10 +25045,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),
@@ -25007,9 +25067,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],
@@ -25039,9 +25099,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) {
@@ -25050,9 +25110,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) {
@@ -25061,10 +25121,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);
@@ -25086,9 +25146,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;
@@ -25096,9 +25156,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) {
@@ -25111,9 +25171,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) {
@@ -25122,11 +25182,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;
@@ -25145,23 +25205,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;
@@ -25176,9 +25236,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) {
@@ -25189,9 +25249,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) {
@@ -25200,10 +25260,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'}`;
@@ -25218,9 +25278,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) {
@@ -25231,9 +25291,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;