При перемещении по стрелочкам убирать выделение блока (#296)

* При перемещении по стрелочкам убирать выделение блока

* Add comments

* update comments

* update comment

src/components/modules/block-events.ts

@@ -18,6 +18,14 @@ export default class BlockEvents extends Module {
    * @param {KeyboardEvent} event - keydown
    */
   public keydown(event: KeyboardEvent): void {
+    /**
+     * Run common method for all keydown events
+     */
+    this.beforeKeydownProcessing();
+
+    /**
+     * Fire keydown processor by event.keyCode
+     */
     switch (event.keyCode) {
       case _.keyCodes.BACKSPACE:
         this.backspace(event);
@@ -43,6 +51,21 @@ export default class BlockEvents extends Module {
     }
   }
 
+  /**
+   * Fires on keydown before event processing
+   */
+  public beforeKeydownProcessing(): void {
+    /**
+     * Clear all highlightings
+     */
+    this.Editor.BlockManager.clearHighlightings();
+
+    /**
+     * Hide Toolbar
+     */
+    this.Editor.Toolbar.close();
+  }
+
   /**
    * Key up on Block:
    * - shows Inline Toolbar if something selected
@@ -93,9 +116,19 @@ export default class BlockEvents extends Module {
     const newCurrent = this.Editor.BlockManager.currentBlock;
 
     this.Editor.Toolbar.move();
-    this.Editor.Toolbar.open();
 
+    /**
+     * If new Block is empty
+     */
     if (this.Editor.Tools.isInitial(newCurrent.tool) && newCurrent.isEmpty) {
+      /**
+       * Show Toolbar
+       */
+      this.Editor.Toolbar.open();
+
+      /**
+       * Show Plus Button
+       */
       this.Editor.Toolbar.plusButton.show();
     }
 
@@ -142,6 +175,7 @@ export default class BlockEvents extends Module {
       if (this.Editor.Caret.navigatePrevious()) {
         this.Editor.Toolbar.close();
       }
+
       return;
     }
 
@@ -160,25 +194,17 @@ export default class BlockEvents extends Module {
    */
   private arrowRightAndDown(): void {
     this.Editor.Caret.navigateNext();
-
-    this.Editor.Toolbar.close();
   }
 
   /**
    * Handle left and up keyboard keys
    */
   private arrowLeftAndUp(): void {
     this.Editor.Caret.navigatePrevious();
-
-    this.Editor.Toolbar.close();
   }
 
   /**
    * Default keydown handler
    */
-  private defaultHandler(): void {
-    this.Editor.BlockManager.currentBlock.selected = false;
-
-    this.Editor.Toolbar.close();
-  }
+  private defaultHandler(): void {}
 }

src/components/modules/blockManager.js

@@ -294,11 +294,16 @@ export default class BlockManager extends Module {
      * @type {number}
      */
     this.currentBlockIndex = nodes.indexOf(firstLevelBlock);
+  }
 
+  /**
+   * Remove selection from all Blocks then highlight only Current Block
+   */
+  highlightCurrentNode() {
     /**
      * Remove previous selected Block's state
      */
-    this.blocks.forEach( block => block.selected = false);
+    this.clearHighlightings();
 
     /**
      * Mark current Block as selected
@@ -307,6 +312,13 @@ export default class BlockManager extends Module {
     this.currentBlock.selected = true;
   }
 
+  /**
+   * Remove selection from all Blocks
+   */
+  clearHighlightings() {
+    this.blocks.forEach( block => block.selected = false);
+  }
+
   /**
    * Get array of Block instances
    *

src/components/modules/ui.js

@@ -206,7 +206,15 @@ export default class UI extends Module {
      * Select clicked Block as Current
      */
     try {
+      /**
+       * Renew Current Block
+       */
       this.Editor.BlockManager.setCurrentBlockByChildNode(clickedNode);
+
+      /**
+       * Highlight Current Node
+       */
+      this.Editor.BlockManager.highlightCurrentNode();
     } catch (e) {
       /**
        * If clicked outside first-level Blocks, set Caret to the last empty Block