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

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   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;
@@ -4807,7 +4807,7 @@
   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
@@ -22385,6 +22385,10 @@
               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) {
@@ -24157,10 +24161,20 @@
      * @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;
@@ -24662,36 +24676,36 @@
   }
 
   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();
@@ -24734,17 +24748,17 @@
       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) {
@@ -24770,11 +24784,11 @@
       }
     }
 
-    /**
-     * 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) {
@@ -24791,9 +24805,9 @@
       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;
@@ -24807,6 +24821,52 @@
       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);
@@ -24884,15 +24944,15 @@
       updateAndFire();
     }
 
-    /**
-     * Composition start
+    /**
+     * Composition start
      */
     onCompositionStart() {
       this.inCompositionMode = true;
     }
 
-    /**
-     * Composition end
+    /**
+     * Composition end
      */
     onCompositionEnd() {
       this.inCompositionMode = false;
@@ -24910,8 +24970,8 @@
       this.updateTextareaPosition();
     }
 
-    /**
-     * Copies selected text
+    /**
+     * Copies selected text
      */
     copy() {
       if (this.selectionStart === this.selectionEnd) {
@@ -24930,19 +24990,19 @@
       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),
@@ -24954,11 +25014,11 @@
       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),
@@ -24976,12 +25036,12 @@
       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) {
@@ -24991,10 +25051,10 @@
       }
     }
 
-    /**
-     * @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),
@@ -25013,9 +25073,9 @@
       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],
@@ -25045,9 +25105,9 @@
       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) {
@@ -25056,9 +25116,9 @@
       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) {
@@ -25067,10 +25127,10 @@
       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);
@@ -25092,9 +25152,9 @@
       }
     }
 
-    /**
-     * 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;
@@ -25102,9 +25162,9 @@
       return offset !== 0;
     }
 
-    /**
-     * Moves cursor up without shift
-     * @param {Number} offset
+    /**
+     * Moves cursor up without shift
+     * @param {Number} offset
      */
     moveCursorWithoutShift(offset) {
       if (offset < 0) {
@@ -25117,9 +25177,9 @@
       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) {
@@ -25128,11 +25188,11 @@
       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;
@@ -25151,23 +25211,23 @@
       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;
@@ -25182,9 +25242,9 @@
       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) {
@@ -25195,9 +25255,9 @@
       }
     }
 
-    /**
-     * 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) {
@@ -25206,10 +25266,10 @@
       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'}`;
@@ -25224,9 +25284,9 @@
       }
     }
 
-    /**
-     * 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) {
@@ -25237,9 +25297,9 @@
       }
     }
 
-    /**
-     * 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;