handsontable 14.0.0-next-fc6b81e-20231116 → 14.0.0-next-6009c41-20231120

package/editors/textEditor/textEditor.js

@@ -7,8 +7,7 @@ var _eventManager = _interopRequireDefault(require("../../eventManager"));
 var _browser = require("../../helpers/browser");
 var _element = require("../../helpers/dom/element");
 var _number = require("../../helpers/number");
-var _unicode = require("../../helpers/unicode");
-var _autoResize = require("../../3rdparty/autoResize");
+var _autoResize = require("../../utils/autoResize");
 var _mixed = require("../../helpers/mixed");
 var _editorManager = require("../../editorManager");
 var _baseEditor2 = require("../baseEditor/baseEditor");
@@ -51,7 +50,7 @@ class TextEditor extends _baseEditor.BaseEditor {
      * @private
      * @type {Function}
      */
-    _defineProperty(this, "autoResize", (0, _autoResize.autoResize)());
+    _defineProperty(this, "autoResize", (0, _autoResize.createInputElementResizer)(this.hot.rootDocument));
     /**
      * An TEXTAREA element.
      *
@@ -117,9 +116,7 @@ class TextEditor extends _baseEditor.BaseEditor {
   open() {
     this.refreshDimensions(); // need it instantly, to prevent https://github.com/handsontable/handsontable/issues/348
     this.showEditableElement();
-    const shortcutManager = this.hot.getShortcutManager();
-    shortcutManager.setActiveContextName('editor');
-    this.addHook('afterDocumentKeyDown', event => this.onAfterDocumentKeyDown(event));
+    this.hot.getShortcutManager().setActiveContextName('editor');
     this.registerShortcuts();
   }
 
@@ -134,7 +131,6 @@ class TextEditor extends _baseEditor.BaseEditor {
 
     this.hideEditableElement();
     this.unregisterShortcuts();
-    this.removeHooksByKey('afterDocumentKeyDown');
   }
 
   /**
@@ -437,22 +433,6 @@ class TextEditor extends _baseEditor.BaseEditor {
         let [keyName] = _ref2;
         (0, _caretPositioner.updateCaretPosition)(keyName, this.TEXTAREA);
       }
-    }, {
-      keys: [['Control/Meta', 'Z']],
-      preventDefault: false,
-      callback: () => {
-        this.hot._registerTimeout(() => {
-          this.autoResize.resize();
-        }, 10);
-      }
-    }, {
-      keys: [['Control/Meta', 'Shift', 'Z']],
-      preventDefault: false,
-      callback: () => {
-        this.hot._registerTimeout(() => {
-          this.autoResize.resize();
-        }, 10);
-      }
     }], contextConfig);
   }
 
@@ -468,18 +448,5 @@ class TextEditor extends _baseEditor.BaseEditor {
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     editorContext.removeShortcutsByGroup(_baseEditor2.SHORTCUTS_GROUP_EDITOR);
   }
-
-  /**
-   * OnAfterDocumentKeyDown callback.
-   *
-   * @private
-   * @param {KeyboardEvent} event The keyboard event object.
-   */
-  onAfterDocumentKeyDown(event) {
-    const arrowKeyCodes = [_unicode.KEY_CODES.ARROW_UP, _unicode.KEY_CODES.ARROW_RIGHT, _unicode.KEY_CODES.ARROW_DOWN, _unicode.KEY_CODES.ARROW_LEFT];
-    if (arrowKeyCodes.indexOf(event.keyCode) === -1) {
-      this.autoResize.resize(String.fromCharCode(event.keyCode));
-    }
-  }
 }
 exports.TextEditor = TextEditor;

package/editors/textEditor/textEditor.mjs

@@ -7,8 +7,7 @@ import EventManager from "../../eventManager.mjs";
 import { isEdge, isIOS } from "../../helpers/browser.mjs";
 import { addClass, getComputedStyle, isThisHotChild, setCaretPosition, hasClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
-import { KEY_CODES } from "../../helpers/unicode.mjs";
-import { autoResize as autoResizer } from "../../3rdparty/autoResize/index.mjs";
+import { createInputElementResizer } from "../../utils/autoResize.mjs";
 import { isDefined } from "../../helpers/mixed.mjs";
 import { SHORTCUTS_GROUP_NAVIGATION } from "../../editorManager.mjs";
 import { SHORTCUTS_GROUP_EDITOR } from "../baseEditor/baseEditor.mjs";
@@ -47,7 +46,7 @@ export class TextEditor extends BaseEditor {
      * @private
      * @type {Function}
      */
-    _defineProperty(this, "autoResize", autoResizer());
+    _defineProperty(this, "autoResize", createInputElementResizer(this.hot.rootDocument));
     /**
      * An TEXTAREA element.
      *
@@ -113,9 +112,7 @@ export class TextEditor extends BaseEditor {
   open() {
     this.refreshDimensions(); // need it instantly, to prevent https://github.com/handsontable/handsontable/issues/348
     this.showEditableElement();
-    const shortcutManager = this.hot.getShortcutManager();
-    shortcutManager.setActiveContextName('editor');
-    this.addHook('afterDocumentKeyDown', event => this.onAfterDocumentKeyDown(event));
+    this.hot.getShortcutManager().setActiveContextName('editor');
     this.registerShortcuts();
   }
 
@@ -130,7 +127,6 @@ export class TextEditor extends BaseEditor {
 
     this.hideEditableElement();
     this.unregisterShortcuts();
-    this.removeHooksByKey('afterDocumentKeyDown');
   }
 
   /**
@@ -433,22 +429,6 @@ export class TextEditor extends BaseEditor {
         let [keyName] = _ref2;
         updateCaretPosition(keyName, this.TEXTAREA);
       }
-    }, {
-      keys: [['Control/Meta', 'Z']],
-      preventDefault: false,
-      callback: () => {
-        this.hot._registerTimeout(() => {
-          this.autoResize.resize();
-        }, 10);
-      }
-    }, {
-      keys: [['Control/Meta', 'Shift', 'Z']],
-      preventDefault: false,
-      callback: () => {
-        this.hot._registerTimeout(() => {
-          this.autoResize.resize();
-        }, 10);
-      }
     }], contextConfig);
   }
 
@@ -464,17 +444,4 @@ export class TextEditor extends BaseEditor {
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
     editorContext.removeShortcutsByGroup(SHORTCUTS_GROUP_EDITOR);
   }
-
-  /**
-   * OnAfterDocumentKeyDown callback.
-   *
-   * @private
-   * @param {KeyboardEvent} event The keyboard event object.
-   */
-  onAfterDocumentKeyDown(event) {
-    const arrowKeyCodes = [KEY_CODES.ARROW_UP, KEY_CODES.ARROW_RIGHT, KEY_CODES.ARROW_DOWN, KEY_CODES.ARROW_LEFT];
-    if (arrowKeyCodes.indexOf(event.keyCode) === -1) {
-      this.autoResize.resize(String.fromCharCode(event.keyCode));
-    }
-  }
 }

package/focusManager.js

@@ -216,11 +216,12 @@ class FocusManager {
    * @param {number} delay Delay in milliseconds.
    */
   refocusToEditorTextarea() {
+    var _classPrivateFieldGet4;
     let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _classPrivateFieldGet(this, _refocusDelay);
     const refocusElement = this.getRefocusElement();
 
     // Re-focus on the editor's `TEXTAREA` element (or a predefined element) if the `imeFastEdit` option is enabled.
-    if (_classPrivateFieldGet(this, _hot).getSettings().imeFastEdit && !!refocusElement) {
+    if (_classPrivateFieldGet(this, _hot).getSettings().imeFastEdit && !((_classPrivateFieldGet4 = _classPrivateFieldGet(this, _hot).getActiveEditor()) !== null && _classPrivateFieldGet4 !== void 0 && _classPrivateFieldGet4.isOpened()) && !!refocusElement) {
       _classPrivateFieldGet(this, _hot)._registerTimeout(() => {
         refocusElement.select();
       }, delay);

package/focusManager.mjs

@@ -213,11 +213,12 @@ export class FocusManager {
    * @param {number} delay Delay in milliseconds.
    */
   refocusToEditorTextarea() {
+    var _classPrivateFieldGet4;
     let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _classPrivateFieldGet(this, _refocusDelay);
     const refocusElement = this.getRefocusElement();
 
     // Re-focus on the editor's `TEXTAREA` element (or a predefined element) if the `imeFastEdit` option is enabled.
-    if (_classPrivateFieldGet(this, _hot).getSettings().imeFastEdit && !!refocusElement) {
+    if (_classPrivateFieldGet(this, _hot).getSettings().imeFastEdit && !((_classPrivateFieldGet4 = _classPrivateFieldGet(this, _hot).getActiveEditor()) !== null && _classPrivateFieldGet4 !== void 0 && _classPrivateFieldGet4.isOpened()) && !!refocusElement) {
       _classPrivateFieldGet(this, _hot)._registerTimeout(() => {
         refocusElement.select();
       }, delay);

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "14.0.0-next-fc6b81e-20231116";
+  const hotVersion = "14.0.0-next-6009c41-20231120";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "14.0.0-next-fc6b81e-20231116";
+  const hotVersion = "14.0.0-next-6009c41-20231120";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "14.0.0-next-fc6b81e-20231116",
+  "version": "14.0.0-next-6009c41-20231120",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/utils/autoResize.js

@@ -0,0 +1,204 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createInputElementResizer = createInputElementResizer;
+/* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * autoResize - resizes a DOM element to the width and height of another DOM element
+ *
+ * Copyright 2014, Marcin Warpechowski
+ * Licensed under the MIT license
+ */
+/* eslint-enable jsdoc/require-description-complete-sentence */
+/**
+ * Attaches an event listener to the given element.
+ *
+ * @param {HTMLElement} element The element to observe.
+ * @param {string} eventName The name of the event to listen for.
+ * @param {Function} handler The function to call when the event is triggered.
+ */
+function observe(element, eventName, handler) {
+  element.addEventListener(eventName, handler, false);
+}
+
+/**
+ * Removes an event listener from an element.
+ *
+ * @param {HTMLElement} element The element to remove the event listener from.
+ * @param {string} eventName The name of the event to remove.
+ * @param {Function} handler The function to remove as a listener.
+ */
+function unObserve(element, eventName, handler) {
+  element.removeEventListener(eventName, handler, false);
+}
+
+/**
+ * Returns the computed style of an element.
+ *
+ * @param {Element} element The element to get the computed style from.
+ * @returns {CSSStyleDeclaration} The computed style of the element.
+ */
+function getComputedStyle(element) {
+  return element.ownerDocument.defaultView.getComputedStyle(element);
+}
+
+/**
+ * @typedef InputElementResizerConfig
+ * @property {number} minWidth The minimum width of the element.
+ * @property {number} maxWidth The maximum width of the element.
+ * @property {number} minHeight The minimum height of the element.
+ * @property {number} maxHeight The maximum height of the element.
+ */
+/**
+ * @typedef InputElementResizer
+ * @property {function(HTMLElement, InputElementResizerConfig, boolean): void} init Initializes the resizer.
+ * @property {function(): void} resize Resizes the element.
+ * @property {function(): void} unObserve Removes the event listeners.
+ */
+/**
+ * Creates an input element resizer.
+ *
+ * @param {Document} ownerDocument The document to create the resizer for.
+ * @returns {InputElementResizer}
+ */
+function createInputElementResizer(ownerDocument) {
+  const defaults = {
+    minHeight: 200,
+    maxHeight: 300,
+    minWidth: 100,
+    maxWidth: 300
+  };
+  const body = ownerDocument.body;
+  const textHolder = ownerDocument.createTextNode('');
+  const textContainer = ownerDocument.createElement('span');
+  let observedElement;
+
+  /**
+   * Resizes the element.
+   */
+  function resize() {
+    textHolder.textContent = observedElement.value;
+    // Won't expand the element size for displaying body as for example, `grid`, `inline-grid` or `flex` with
+    // `flex-direction` set as `column`.
+    textContainer.style.position = 'absolute';
+    textContainer.style.fontSize = getComputedStyle(observedElement).fontSize;
+    textContainer.style.fontFamily = getComputedStyle(observedElement).fontFamily;
+    textContainer.style.whiteSpace = 'pre';
+    body.appendChild(textContainer);
+    const width = textContainer.clientWidth + 2;
+    body.removeChild(textContainer);
+    const elementStyle = observedElement.style;
+    elementStyle.height = `${defaults.minHeight}px`;
+    if (defaults.minWidth > width) {
+      elementStyle.width = `${defaults.minWidth}px`;
+    } else if (width > defaults.maxWidth) {
+      elementStyle.width = `${defaults.maxWidth}px`;
+    } else {
+      elementStyle.width = `${width}px`;
+    }
+    const scrollHeight = observedElement.scrollHeight ? observedElement.scrollHeight - 1 : 0;
+    if (defaults.minHeight > scrollHeight) {
+      elementStyle.height = `${defaults.minHeight}px`;
+    } else if (defaults.maxHeight < scrollHeight) {
+      elementStyle.height = `${defaults.maxHeight}px`;
+      elementStyle.overflowY = 'visible';
+    } else {
+      elementStyle.height = `${scrollHeight}px`;
+    }
+  }
+
+  /**
+   * Resizes the element after a delay.
+   */
+  function delayedResize() {
+    ownerDocument.defaultView.setTimeout(resize, 0);
+  }
+
+  /**
+   * Extends the default configuration.
+   *
+   * @param {InputElementResizerConfig} config The configuration to extend the defaults with.
+   */
+  function extendDefaults(config) {
+    if (config && config.minHeight) {
+      if (config.minHeight === 'inherit') {
+        defaults.minHeight = observedElement.clientHeight;
+      } else {
+        const minHeight = parseInt(config.minHeight, 10);
+        if (!isNaN(minHeight)) {
+          defaults.minHeight = minHeight;
+        }
+      }
+    }
+    if (config && config.maxHeight) {
+      if (config.maxHeight === 'inherit') {
+        defaults.maxHeight = observedElement.clientHeight;
+      } else {
+        const maxHeight = parseInt(config.maxHeight, 10);
+        if (!isNaN(maxHeight)) {
+          defaults.maxHeight = maxHeight;
+        }
+      }
+    }
+    if (config && config.minWidth) {
+      if (config.minWidth === 'inherit') {
+        defaults.minWidth = observedElement.clientWidth;
+      } else {
+        const minWidth = parseInt(config.minWidth, 10);
+        if (!isNaN(minWidth)) {
+          defaults.minWidth = minWidth;
+        }
+      }
+    }
+    if (config && config.maxWidth) {
+      if (config.maxWidth === 'inherit') {
+        defaults.maxWidth = observedElement.clientWidth;
+      } else {
+        const maxWidth = parseInt(config.maxWidth, 10);
+        if (!isNaN(maxWidth)) {
+          defaults.maxWidth = maxWidth;
+        }
+      }
+    }
+    if (!textContainer.firstChild) {
+      textContainer.className = 'autoResize';
+      textContainer.style.display = 'inline-block';
+      textContainer.appendChild(textHolder);
+    }
+  }
+
+  /**
+   * Initializes the resizer.
+   *
+   * @param {HTMLElement} elementToObserve The element to observe.
+   * @param {InputElementResizerConfig} config The configuration to extend the defaults with.
+   * @param {boolean} [doObserve=false] Whether to observe the element and resize it on every input change.
+   */
+  function init(elementToObserve, config) {
+    let doObserve = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    observedElement = elementToObserve;
+    extendDefaults(config);
+    if (observedElement.nodeName === 'TEXTAREA') {
+      observedElement.style.resize = 'none';
+      observedElement.style.overflowY = '';
+      observedElement.style.height = `${defaults.minHeight}px`;
+      observedElement.style.minWidth = `${defaults.minWidth}px`;
+      observedElement.style.maxWidth = `${defaults.maxWidth}px`;
+      observedElement.style.overflowY = 'hidden';
+    }
+    if (doObserve) {
+      observe(observedElement, 'input', resize);
+      // the keydown event is necessary for undo stack to work properly
+      observe(observedElement, 'keydown', delayedResize);
+    }
+    resize();
+  }
+  return {
+    init,
+    resize,
+    unObserve() {
+      unObserve(observedElement, 'input', resize);
+      unObserve(observedElement, 'keydown', delayedResize);
+    }
+  };
+}

package/utils/autoResize.mjs

@@ -0,0 +1,200 @@
+/* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * autoResize - resizes a DOM element to the width and height of another DOM element
+ *
+ * Copyright 2014, Marcin Warpechowski
+ * Licensed under the MIT license
+ */
+/* eslint-enable jsdoc/require-description-complete-sentence */
+/**
+ * Attaches an event listener to the given element.
+ *
+ * @param {HTMLElement} element The element to observe.
+ * @param {string} eventName The name of the event to listen for.
+ * @param {Function} handler The function to call when the event is triggered.
+ */
+function observe(element, eventName, handler) {
+  element.addEventListener(eventName, handler, false);
+}
+
+/**
+ * Removes an event listener from an element.
+ *
+ * @param {HTMLElement} element The element to remove the event listener from.
+ * @param {string} eventName The name of the event to remove.
+ * @param {Function} handler The function to remove as a listener.
+ */
+function unObserve(element, eventName, handler) {
+  element.removeEventListener(eventName, handler, false);
+}
+
+/**
+ * Returns the computed style of an element.
+ *
+ * @param {Element} element The element to get the computed style from.
+ * @returns {CSSStyleDeclaration} The computed style of the element.
+ */
+function getComputedStyle(element) {
+  return element.ownerDocument.defaultView.getComputedStyle(element);
+}
+
+/**
+ * @typedef InputElementResizerConfig
+ * @property {number} minWidth The minimum width of the element.
+ * @property {number} maxWidth The maximum width of the element.
+ * @property {number} minHeight The minimum height of the element.
+ * @property {number} maxHeight The maximum height of the element.
+ */
+/**
+ * @typedef InputElementResizer
+ * @property {function(HTMLElement, InputElementResizerConfig, boolean): void} init Initializes the resizer.
+ * @property {function(): void} resize Resizes the element.
+ * @property {function(): void} unObserve Removes the event listeners.
+ */
+/**
+ * Creates an input element resizer.
+ *
+ * @param {Document} ownerDocument The document to create the resizer for.
+ * @returns {InputElementResizer}
+ */
+export function createInputElementResizer(ownerDocument) {
+  const defaults = {
+    minHeight: 200,
+    maxHeight: 300,
+    minWidth: 100,
+    maxWidth: 300
+  };
+  const body = ownerDocument.body;
+  const textHolder = ownerDocument.createTextNode('');
+  const textContainer = ownerDocument.createElement('span');
+  let observedElement;
+
+  /**
+   * Resizes the element.
+   */
+  function resize() {
+    textHolder.textContent = observedElement.value;
+    // Won't expand the element size for displaying body as for example, `grid`, `inline-grid` or `flex` with
+    // `flex-direction` set as `column`.
+    textContainer.style.position = 'absolute';
+    textContainer.style.fontSize = getComputedStyle(observedElement).fontSize;
+    textContainer.style.fontFamily = getComputedStyle(observedElement).fontFamily;
+    textContainer.style.whiteSpace = 'pre';
+    body.appendChild(textContainer);
+    const width = textContainer.clientWidth + 2;
+    body.removeChild(textContainer);
+    const elementStyle = observedElement.style;
+    elementStyle.height = `${defaults.minHeight}px`;
+    if (defaults.minWidth > width) {
+      elementStyle.width = `${defaults.minWidth}px`;
+    } else if (width > defaults.maxWidth) {
+      elementStyle.width = `${defaults.maxWidth}px`;
+    } else {
+      elementStyle.width = `${width}px`;
+    }
+    const scrollHeight = observedElement.scrollHeight ? observedElement.scrollHeight - 1 : 0;
+    if (defaults.minHeight > scrollHeight) {
+      elementStyle.height = `${defaults.minHeight}px`;
+    } else if (defaults.maxHeight < scrollHeight) {
+      elementStyle.height = `${defaults.maxHeight}px`;
+      elementStyle.overflowY = 'visible';
+    } else {
+      elementStyle.height = `${scrollHeight}px`;
+    }
+  }
+
+  /**
+   * Resizes the element after a delay.
+   */
+  function delayedResize() {
+    ownerDocument.defaultView.setTimeout(resize, 0);
+  }
+
+  /**
+   * Extends the default configuration.
+   *
+   * @param {InputElementResizerConfig} config The configuration to extend the defaults with.
+   */
+  function extendDefaults(config) {
+    if (config && config.minHeight) {
+      if (config.minHeight === 'inherit') {
+        defaults.minHeight = observedElement.clientHeight;
+      } else {
+        const minHeight = parseInt(config.minHeight, 10);
+        if (!isNaN(minHeight)) {
+          defaults.minHeight = minHeight;
+        }
+      }
+    }
+    if (config && config.maxHeight) {
+      if (config.maxHeight === 'inherit') {
+        defaults.maxHeight = observedElement.clientHeight;
+      } else {
+        const maxHeight = parseInt(config.maxHeight, 10);
+        if (!isNaN(maxHeight)) {
+          defaults.maxHeight = maxHeight;
+        }
+      }
+    }
+    if (config && config.minWidth) {
+      if (config.minWidth === 'inherit') {
+        defaults.minWidth = observedElement.clientWidth;
+      } else {
+        const minWidth = parseInt(config.minWidth, 10);
+        if (!isNaN(minWidth)) {
+          defaults.minWidth = minWidth;
+        }
+      }
+    }
+    if (config && config.maxWidth) {
+      if (config.maxWidth === 'inherit') {
+        defaults.maxWidth = observedElement.clientWidth;
+      } else {
+        const maxWidth = parseInt(config.maxWidth, 10);
+        if (!isNaN(maxWidth)) {
+          defaults.maxWidth = maxWidth;
+        }
+      }
+    }
+    if (!textContainer.firstChild) {
+      textContainer.className = 'autoResize';
+      textContainer.style.display = 'inline-block';
+      textContainer.appendChild(textHolder);
+    }
+  }
+
+  /**
+   * Initializes the resizer.
+   *
+   * @param {HTMLElement} elementToObserve The element to observe.
+   * @param {InputElementResizerConfig} config The configuration to extend the defaults with.
+   * @param {boolean} [doObserve=false] Whether to observe the element and resize it on every input change.
+   */
+  function init(elementToObserve, config) {
+    let doObserve = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    observedElement = elementToObserve;
+    extendDefaults(config);
+    if (observedElement.nodeName === 'TEXTAREA') {
+      observedElement.style.resize = 'none';
+      observedElement.style.overflowY = '';
+      observedElement.style.height = `${defaults.minHeight}px`;
+      observedElement.style.minWidth = `${defaults.minWidth}px`;
+      observedElement.style.maxWidth = `${defaults.maxWidth}px`;
+      observedElement.style.overflowY = 'hidden';
+    }
+    if (doObserve) {
+      observe(observedElement, 'input', resize);
+      // the keydown event is necessary for undo stack to work properly
+      observe(observedElement, 'keydown', delayedResize);
+    }
+    resize();
+  }
+  return {
+    init,
+    resize,
+    unObserve() {
+      unObserve(observedElement, 'input', resize);
+      unObserve(observedElement, 'keydown', delayedResize);
+    }
+  };
+}