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

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

* Add comments

* update comments

* update comment

build/codex-editor.js

@@ -3410,6 +3410,13 @@ var BlockEvents = function (_Module) {
     _createClass(BlockEvents, [{
         key: "keydown",
         value: function keydown(event) {
+            /**
+             * Run common method for all keydown events
+             */
+            this.beforeKeydownProcessing();
+            /**
+             * Fire keydown processor by event.keyCode
+             */
             switch (event.keyCode) {
                 case _.keyCodes.BACKSPACE:
                     this.backspace(event);
@@ -3430,6 +3437,22 @@ var BlockEvents = function (_Module) {
                     break;
             }
         }
+        /**
+         * Fires on keydown before event processing
+         */
+
+    }, {
+        key: "beforeKeydownProcessing",
+        value: function beforeKeydownProcessing() {
+            /**
+             * Clear all highlightings
+             */
+            this.Editor.BlockManager.clearHighlightings();
+            /**
+             * Hide Toolbar
+             */
+            this.Editor.Toolbar.close();
+        }
         /**
          * Key up on Block:
          * - shows Inline Toolbar if something selected
@@ -3482,8 +3505,17 @@ var BlockEvents = function (_Module) {
              */
             var 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();
             }
             event.preventDefault();
@@ -3545,7 +3577,6 @@ var BlockEvents = function (_Module) {
         key: "arrowRightAndDown",
         value: function arrowRightAndDown() {
             this.Editor.Caret.navigateNext();
-            this.Editor.Toolbar.close();
         }
         /**
          * Handle left and up keyboard keys
@@ -3555,7 +3586,6 @@ var BlockEvents = function (_Module) {
         key: "arrowLeftAndUp",
         value: function arrowLeftAndUp() {
             this.Editor.Caret.navigatePrevious();
-            this.Editor.Toolbar.close();
         }
         /**
          * Default keydown handler
@@ -3563,10 +3593,7 @@ var BlockEvents = function (_Module) {
 
     }, {
         key: "defaultHandler",
-        value: function defaultHandler() {
-            this.Editor.BlockManager.currentBlock.selected = false;
-            this.Editor.Toolbar.close();
-        }
+        value: function defaultHandler() {}
     }]);
 
     return BlockEvents;
@@ -3897,6 +3924,44 @@ var BlockManager = function (_Module) {
      * @return {Block}
      */
 
+  }, {
+    key: 'highlightCurrentNode',
+
+
+    /**
+     * Remove selection from all Blocks then highlight only Current Block
+     */
+    value: function highlightCurrentNode() {
+      /**
+       * Remove previous selected Block's state
+       */
+      this.clearHighlightings();
+
+      /**
+       * Mark current Block as selected
+       * @type {boolean}
+       */
+      this.currentBlock.selected = true;
+    }
+
+    /**
+     * Remove selection from all Blocks
+     */
+
+  }, {
+    key: 'clearHighlightings',
+    value: function clearHighlightings() {
+      this.blocks.forEach(function (block) {
+        return block.selected = false;
+      });
+    }
+
+    /**
+     * Get array of Block instances
+     *
+     * @returns {Block[]} {@link Blocks#array}
+     */
+
   }, {
     key: 'setCurrentBlockByChildNode',
 
@@ -4030,27 +4095,7 @@ var BlockManager = function (_Module) {
        * @type {number}
        */
       this.currentBlockIndex = nodes.indexOf(firstLevelBlock);
-
-      /**
-       * Remove previous selected Block's state
-       */
-      this.blocks.forEach(function (block) {
-        return block.selected = false;
-      });
-
-      /**
-       * Mark current Block as selected
-       * @type {boolean}
-       */
-      this.currentBlock.selected = true;
     }
-
-    /**
-     * Get array of Block instances
-     *
-     * @returns {Block[]} {@link Blocks#array}
-     */
-
   }, {
     key: 'blocks',
     get: function get() {
@@ -7460,7 +7505,15 @@ var UI = function (_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

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,8 +194,6 @@ export default class BlockEvents extends Module {
    */
   private arrowRightAndDown(): void {
     this.Editor.Caret.navigateNext();
-
-    this.Editor.Toolbar.close();
   }
 
   /**
@@ -169,16 +201,10 @@ export default class BlockEvents extends Module {
    */
   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