Fix for input and textarea bug (#1214)

* [Improvements] ESLint action (#1099) * TSLint -> ESLint, GitHub Action * Update eslint.yml * Autofix * more autofix * fix * manually fix some issues * Update CHANGELOG.md * [Refactor] ESLint fixed (#1100) Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * [Feature] i18n (#1106) * i18n first steps * i18n internal, toolbox, api for tools * namespaced api * tn, t * tn in block tunes * join toolbox and inlineTools under toolNames * translations * make enum toolTypes * Update block.ts * Update src/components/core.ts Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> * add more types * rm tn * export i18n types * upd bundle * fix tabulation * Add type-safe namespaces * upd * Improve example * Update toolbox.ts * improve examplle * upd * fix typo * Add comments for complex types Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: Georgy Berezhnoy <gohabereg@gmail.com> * Remove unused submodule * Fixed: icon centering in Firefox * Do not load styles twice (#1112) * Do not load styles twice * Add changelog * Fix issue link Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Show warning if Block to delete is not found (#1111) Resolves #1102 * Save Tools' order in the Toolbox (#1113) Resolves #1073 * fix $.isEmpty performance (#1096) * fix $.isEmpty performance * add changelog * upd bundle Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Add issue templates (#1114) * Update issue templates (#1121) * Update issue templates * Apply suggestions from code review Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> * upd texts * Update feature_request.md * Update .github/ISSUE_TEMPLATE/discussion.md Co-Authored-By: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> * Allowing deleting block by block id (#1108) * Allowing deleting block by block id * Fixed no argument error * Making index value optional for delete operation * Added to changelog * Making index value optional for delete operation * Added parameter description * Update docs/CHANGELOG.md * Update types/api/blocks.d.ts * Update editor.js Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Allow navigate next from last non-initial block (#1110) Resolves #1103 * Create CODE_OF_CONDUCT.md (#1171) * Create CODE_OF_CONDUCT.md * Update changelog file * Update dependencies (#1122) * Update dependencies * upd codex.tooltip * Update editor.js.LICENSE.txt Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Feature/disable tab event config (#1164) * Highlight first block on autofocus (#1127) * Fix shortcut for external tools (#1141) * fix/shortcut-for-external-tools * Check inline tools property for shortcut Co-authored-by: George Berezhnoy <gohabereg@gmail.com> * Hotfix/issue1133 selection shortcut removed on editor destroy (#1140) * Removed shortcut CMD+A on editor destroy #1133 * Removed patch version and made code cleaner #1133 * lint error fixes #1133 Co-authored-by: Sisir <sisir@hellosivi.com> Co-authored-by: George Berezhnoy <gohabereg@gmail.com> * [Feature] BlockAPI Interface (#1075) * Fix BlockManager.insert method (#1172) * Fix BlockManager.insert method * upd * Explicitly check for undefined * Update tools master branches (#1180) * Update master branches * Update image * Update CHANGELOG.md * Fix behaviour of inputs editing in block settings (#1123) * lint code * Update CHANGELOG.md * added handling of inputs and textareas in custom plugins * Upd tools * Add changelog * Upd submodules Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: Georgy Berezhnoy <gohabereg@gmail.com> Co-authored-by: tasuku-s <tasuku@freemind.co.jp> Co-authored-by: Athul Anil Kumar <athul7744@outlook.com> Co-authored-by: Taly <vitalik7tv@yandex.ru> Co-authored-by: flaming-cl <51183663+flaming-cl@users.noreply.github.com> Co-authored-by: Nguyen Ngoc Son <sonnn.se@gmail.com> Co-authored-by: Sisir Das K <37764463+sis-dk@users.noreply.github.com> Co-authored-by: Sisir <sisir@hellosivi.com>
codex-team · Aug 27, 2020 · 18be7d0 · 18be7d0
1 parent 08221c7
commit 18be7d0
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 6 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -11,6 +11,7 @@
 - `Fix` - Tool's `destroy` method is not invoked when `editor.destroy()` is called. [#1047](https://github.com/codex-team/editor.js/issues/1047)
 - `New` - Tool's `reset` static method added to the API to clean up any data added by Tool on initialization
 - `Improvements` - Unuseful log about missed i18n section has been removed  [#1269](https://github.com/codex-team/editor.js/issues/1269)
+- `Fix` - Fixed issue with enter key in inputs and textareas [#920](https://github.com/codex-team/editor.js/issues/920)
 
 ### 2.18
 

diff --git a/src/components/block/index.ts b/src/components/block/index.ts
@@ -621,7 +621,7 @@ export default class Block {
    * Update current input index with selection anchor node
    */
   public updateCurrentInput(): void {
-    this.currentInput = SelectionUtils.anchorNode;
+    this.currentInput = document.activeElement;
   }
 
   /**
@@ -640,13 +640,20 @@ export default class Block {
         attributes: true,
       }
     );
+
+    /**
+     * Mutation observer doesn't track changes in "<input>" and "<textarea>"
+     * so we need to track focus events
+     */
+    this.addInputEvents();
   }
 
   /**
    * Is fired when Block will be unselected
    */
   public willUnselect(): void {
     this.mutationObserver.disconnect();
+    this.removeInputEvents();
   }
 
   /**
@@ -664,4 +671,37 @@ export default class Block {
 
     return wrapper;
   }
+
+  /**
+   * Is fired when text input or contentEditable is focused
+   */
+  private handleFocus = (): void => {
+    /**
+     * Drop cache
+     */
+    this.cachedInputs = [];
+
+    /**
+     * Update current input
+     */
+    this.updateCurrentInput();
+  }
+
+  /**
+   * Adds focus event listeners to all inputs and contentEditables
+   */
+  private addInputEvents(): void {
+    this.inputs.forEach(input => {
+      input.addEventListener('focus', this.handleFocus);
+    });
+  }
+
+  /**
+   * removes focus event listeners from all inputs and contentEditables
+   */
+  private removeInputEvents(): void {
+    this.inputs.forEach(input => {
+      input.removeEventListener('focus', this.handleFocus);
+    });
+  }
 }
diff --git a/src/components/modules/caret.ts b/src/components/modules/caret.ts
@@ -355,12 +355,30 @@ export default class Caret extends Module {
       selectRange.deleteContents();
 
       if (currentBlockInput) {
-        const range = selectRange.cloneRange();
+        if ($.isNativeInput(currentBlockInput)) {
+          /**
+           * If input is native text input we need to use it's value
+           * Text before the caret stays in the input,
+           * while text after the caret is returned as a fragment to be inserted after the block.
+           */
+          const input = currentBlockInput as HTMLInputElement | HTMLTextAreaElement;
+          const newFragment = document.createDocumentFragment();
 
-        range.selectNodeContents(currentBlockInput);
-        range.setStart(selectRange.endContainer, selectRange.endOffset);
+          const inputRemainingText = input.value.substring(0, input.selectionStart);
+          const fragmentText = input.value.substring(input.selectionStart);
 
-        return range.extractContents();
+          newFragment.textContent = fragmentText;
+          input.value = inputRemainingText;
+
+          return newFragment;
+        } else {
+          const range = selectRange.cloneRange();
+
+          range.selectNodeContents(currentBlockInput);
+          range.setStart(selectRange.endContainer, selectRange.endOffset);
+
+          return range.extractContents();
+        }
       }
     }
   }