Fixed the 1302 bug and improve the tab key behaviour (#1342)

* Fixed the 1302 bug and improve the tab key behaviour * yarn lint:fixed based improvements * Update docs/CHANGELOG.md Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Update src/components/modules/ui.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
codex-team · Oct 5, 2020 · ef5f12b · ef5f12b
1 parent b836359
commit ef5f12b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -20,6 +20,7 @@
 - `New` - Allows users to provide common `inlineToolbar` property which will be used for all tools whose `inlineToolbar` property is set to `true`. It can be overridden by the tool's own `inlineToolbar` property. Also, inline tools will be ordered according to the order of the inline tools in array provided in the `inlineToolbar` property. [#1056](https://github.com/codex-team/editor.js/issues/1056)
 - `Fix` - blocks.getBlockByIndex() API method now returns void for indexes out of range [#1270](https://github.com/codex-team/editor.js/issues/1270)
 - `Fix` - Fixed the `onChange` callback issue. This method didn't be called for native inputs before some contentedtable element changed [#843](https://github.com/codex-team/editor.js/issues/843)
+- `Fix` - Fixed the `Tab` key behavior when the caret is not set inside contenteditable element, but the block is selected [#1302](https://github.com/codex-team/editor.js/issues/1302).
 
 ### 2.18
 

diff --git a/src/components/modules/blockSelection.ts b/src/components/modules/blockSelection.ts
@@ -17,9 +17,8 @@ import { SanitizerConfig } from '../../../types/configs';
  *
  */
 export default class BlockSelection extends Module {
-
   /**
-   * Sometimes .anyBlockSelected can be called frequently, 
+   * Sometimes .anyBlockSelected can be called frequently,
    * for example at ui@selectionChange (to clear native browser selection in CBS)
    * We use cache to prevent multiple iterations through all the blocks
    *

diff --git a/src/components/modules/tools.ts b/src/components/modules/tools.ts
@@ -43,7 +43,7 @@ export default class Tools extends Module {
   /**
    * Returns available Tools
    *
-   * @returns {Object<Tool>}
+   * @returns {object<Tool>}
    */
   public get available(): { [name: string]: ToolConstructable } {
     return this.toolsAvailable;

diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts
@@ -418,10 +418,19 @@ export default class UI extends Module<UINodes> {
    * @param {KeyboardEvent} event - keyboard event
    */
   private defaultBehaviour(event: KeyboardEvent): void {
-    const keyDownOnEditor = (event.target as HTMLElement).closest(`.${this.CSS.editorWrapper}`);
     const { currentBlock } = this.Editor.BlockManager;
+    const keyDownOnEditor = (event.target as HTMLElement).closest(`.${this.CSS.editorWrapper}`);
     const isMetaKey = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 
+    /**
+     * When some block is selected, but the caret is not set inside the editor, treat such keydowns as keydown on selected block.
+     */
+    if (currentBlock !== undefined && keyDownOnEditor === null) {
+      this.Editor.BlockEvents.keydown(event);
+
+      return;
+    }
+
     /**
      * Ignore keydowns on editor and meta keys
      */
@@ -752,7 +761,6 @@ export default class UI extends Module<UINodes> {
       return;
     }
 
-
     /**
      * @todo add debounce
      */