diff --git a/CHANGELOG.md b/CHANGELOG.md index 28481a54438..acecc369146 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## [next] - chore(): move canvas click handler to TextManager [#8939](https://github.com/fabricjs/fabric.js/pull/8939) +- refactor(): write less bulky code [#8943](https://github.com/fabricjs/fabric.js/pull/8943) ## [6.0.0-beta6] diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index fad54dd56a6..26826b1943c 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -1585,10 +1585,6 @@ export class Canvas extends SelectableCanvas { return true; } - exitTextEditing() { - this.textEditingManager.exitTextEditing(); - } - /** * @override clear {@link textEditingManager} */ diff --git a/src/shapes/IText/ITextKeyBehavior.ts b/src/shapes/IText/ITextKeyBehavior.ts index 46596d5c21c..33e2d68e05f 100644 --- a/src/shapes/IText/ITextKeyBehavior.ts +++ b/src/shapes/IText/ITextKeyBehavior.ts @@ -1,5 +1,4 @@ -//@ts-nocheck - +// @ts-nocheck import { config } from '../../config'; import { getFabricDocument, getEnv } from '../../env'; import type { TPointerEvent } from '../../EventTypeDefs'; @@ -64,43 +63,40 @@ export abstract class ITextKeyBehavior< const doc = (this.canvas && getDocumentFromElement(this.canvas.getElement())) || getFabricDocument(); - this.hiddenTextarea = doc.createElement('textarea'); - this.hiddenTextarea.setAttribute('autocapitalize', 'off'); - this.hiddenTextarea.setAttribute('autocorrect', 'off'); - this.hiddenTextarea.setAttribute('autocomplete', 'off'); - this.hiddenTextarea.setAttribute('spellcheck', 'false'); - this.hiddenTextarea.setAttribute('data-fabric', 'textarea'); - this.hiddenTextarea.setAttribute('wrap', 'off'); - const style = this._calcTextareaPosition(); + const textarea = doc.createElement('textarea'); + Object.entries({ + autocapitalize: 'off', + autocorrect: 'off', + autocomplete: 'off', + spellcheck: 'false', + 'data-fabric': 'textarea', + wrap: 'off', + }).map(([attribute, value]) => textarea.setAttribute(attribute, value)); + const { top, left, fontSize } = this._calcTextareaPosition(); // line-height: 1px; was removed from the style to fix this: // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 - this.hiddenTextarea.style.cssText = `position: absolute; top: ${style.top}; left: ${style.left}; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: ${style.fontSize};`; - - if (this.hiddenTextareaContainer) { - this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); - } else { - doc.body.appendChild(this.hiddenTextarea); - } - - this.hiddenTextarea.addEventListener('blur', this.blur.bind(this)); - this.hiddenTextarea.addEventListener('keydown', this.onKeyDown.bind(this)); - this.hiddenTextarea.addEventListener('keyup', this.onKeyUp.bind(this)); - this.hiddenTextarea.addEventListener('input', this.onInput.bind(this)); - this.hiddenTextarea.addEventListener('copy', this.copy.bind(this)); - this.hiddenTextarea.addEventListener('cut', this.copy.bind(this)); - this.hiddenTextarea.addEventListener('paste', this.paste.bind(this)); - this.hiddenTextarea.addEventListener( - 'compositionstart', - this.onCompositionStart.bind(this) - ); - this.hiddenTextarea.addEventListener( - 'compositionupdate', - this.onCompositionUpdate.bind(this) - ); - this.hiddenTextarea.addEventListener( - 'compositionend', - this.onCompositionEnd.bind(this) + textarea.style.cssText = `position: absolute; top: ${top}; left: ${left}; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: ${fontSize};`; + + (this.hiddenTextareaContainer || doc.body).appendChild(textarea); + + Object.entries({ + blur: 'blur', + keydown: 'onKeyDown', + keyup: 'onKeyUp', + input: 'onInput', + copy: 'copy', + cut: 'copy', + paste: 'paste', + compositionstart: 'onCompositionStart', + compositionupdate: 'onCompositionUpdate', + onCompositionUpdate: 'onCompositionEnd', + } as Record).map(([eventName, handler]) => + textarea.addEventListener( + eventName, + (this[handler] as Function).bind(this) + ) ); + this.hiddenTextarea = textarea; } /**