Issue-616: Handle backspace, cmd+X, cmd+C and enter on RectangleSelec…

…tion (codex-team#617)

* cut-n-copy multiple selection with rectangle

* use pop instead of shift

* enter and backspace behavior with rectangeSelection

* bump version and minify bundle

* optimize code

README.md

@@ -10,6 +10,7 @@ Welcome to testing stage. Please, join a [public Telegram-chat](//t.me/codex_edi
 
 ### 2.7-2.9 changelog
 
+- `New` Blocks selected with RectangleSelection can be also removed, copied or cut
 - `New` Migrate from postcss-cssnext to postcss-preset-env and disable postcss-custom-properties which conflicts with postcss-preset-env
 - `New` *RectangeSelection* - Ability to select Block or several Blocks with mouse
 

dist/codex-editor.licenses.txt

@@ -21,11 +21,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
-@babel/polyfill
+@babel/runtime
 MIT
 MIT License
 
-Copyright (c) 2014-2018 Sebastian McKenzie <sebmck@gmail.com>
+Copyright (c) 2014-2018 Sebastian McKenzie and other contributors
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
@@ -47,14 +47,11 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
-regenerator-runtime
-MIT
-
-@babel/runtime
+@babel/polyfill
 MIT
 MIT License
 
-Copyright (c) 2014-2018 Sebastian McKenzie and other contributors
+Copyright (c) 2014-2018 Sebastian McKenzie <sebmck@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
@@ -76,6 +73,9 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
+regenerator-runtime
+MIT
+
 codex-notifier
 MIT
 MIT License

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.9.2
+
+- `New` Blocks selected with RectangleSelection can be also removed, copied or cut
+
 ### 2.9.1
 
 - `Improvements` Migrate from postcss-cssnext to postcss-preset-env and disable postcss-custom-properties which conflicts with postcss-preset-env

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "CodeX Editor. Native JS, based on API and Open Source",
   "main": "dist/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/modules/blockEvents.ts

@@ -3,7 +3,6 @@
  */
 import Module from '../__module';
 import _ from '../utils';
-import Block from '../block';
 
 export default class BlockEvents extends Module {
   /**
@@ -197,59 +196,37 @@ export default class BlockEvents extends Module {
    */
   public handleCommandX(event): void {
     const { BlockSelection, BlockManager, Caret } = this.Editor;
-    const currentBlock = BlockManager.currentBlock;
 
-    if (!currentBlock) {
+    if (!BlockSelection.anyBlockSelected) {
       return;
     }
 
-    /** Copy Blocks before removing */
-    if (currentBlock.selected || BlockManager.currentBlock.isEmpty) {
-      /**
-       * Prevent default copy
-       * Remove "decline sound" on macOS
-       */
-      event.preventDefault();
+    /**
+     * Copy Blocks before removing
+     *
+     * Prevent default copy
+     * Remove "decline sound" on macOS
+     */
+    event.preventDefault();
 
-      BlockSelection.copySelectedBlocks();
+    BlockSelection.copySelectedBlocks();
 
-      if (BlockSelection.allBlocksSelected) {
-        BlockManager.removeAllBlocks();
-      } else {
-        BlockManager.removeBlock();
-        Caret.setToBlock(BlockManager.insert(), Caret.positions.START);
-      }
+    const selectionPositionIndex = BlockManager.removeSelectedBlocks();
+    Caret.setToBlock(BlockManager.insertAtIndex(selectionPositionIndex, true), Caret.positions.START);
 
-      /** Clear selection */
-      BlockSelection.clearSelection();
-    }
+    /** Clear selection */
+    BlockSelection.clearSelection();
   }
 
   /**
    * ENTER pressed on block
    * @param {KeyboardEvent} event - keydown
    */
   private enter(event: KeyboardEvent): void {
-    const {BlockSelection, BlockManager, Tools, Caret} = this.Editor;
+    const {BlockManager, Tools} = this.Editor;
     const currentBlock = BlockManager.currentBlock;
     const tool = Tools.available[currentBlock.name];
 
-    if (currentBlock.selected) {
-      if (BlockSelection.allBlocksSelected) {
-        BlockManager.removeAllBlocks();
-      } else {
-        /** Replace current Block */
-        const newBlock = BlockManager.replace();
-
-        /** Set caret to the current block */
-        Caret.setToBlock(newBlock);
-      }
-
-      /** Clear selection */
-      BlockSelection.clearSelection();
-      return;
-    }
-
     /**
      * Don't handle Enter keydowns when Tool sets enableLineBreaks to true.
      * Uses for Tools like <code> where line breaks should be handled by default behaviour.
@@ -325,25 +302,21 @@ export default class BlockEvents extends Module {
     if (currentBlock.selected || currentBlock.isEmpty && currentBlock.currentInput === currentBlock.firstInput) {
       event.preventDefault();
 
-      if (BlockSelection.allBlocksSelected) {
-        BlockManager.removeAllBlocks();
+      const index = BlockManager.currentBlockIndex;
+
+      if (BlockManager.previousBlock && BlockManager.previousBlock.inputs.length === 0) {
+        /** If previous block doesn't contain inputs, remove it */
+        BlockManager.removeBlock(index - 1);
       } else {
-        const index = BlockManager.currentBlockIndex;
-
-        if (BlockManager.previousBlock && BlockManager.previousBlock.inputs.length === 0) {
-          /** If previous block doesn't contain inputs, remove it */
-          BlockManager.removeBlock(index - 1);
-        } else {
-          /** If block is empty, just remove it */
-          BlockManager.removeBlock();
-        }
-
-        Caret.setToBlock(
-          BlockManager.currentBlock,
-          index ? Caret.positions.END : Caret.positions.START,
-        );
+        /** If block is empty, just remove it */
+        BlockManager.removeBlock();
       }
 
+      Caret.setToBlock(
+        BlockManager.currentBlock,
+        index ? Caret.positions.END : Caret.positions.START,
+      );
+
       /** Close Toolbar */
       this.Editor.Toolbar.close();
 

src/components/modules/blockManager.ts

@@ -347,6 +347,29 @@ export default class BlockManager extends Module {
     }
   }
 
+  /**
+   * Remove only selected Blocks
+   * and returns first Block index where started removing...
+   * @return number|undefined
+   */
+  public removeSelectedBlocks(): number|undefined {
+    let firstSelectedBlockIndex;
+
+    /**
+     * Remove selected Blocks from the end
+     */
+    for (let index = this.blocks.length - 1; index >= 0; index--) {
+      if (!this.blocks[index].selected) {
+        continue;
+      }
+
+      this.removeBlock(index);
+      firstSelectedBlockIndex = index;
+    }
+
+    return firstSelectedBlockIndex;
+  }
+
   /**
    * Attention!
    * After removing insert new initial typed Block and focus on it

src/components/modules/shortcuts.ts

@@ -47,7 +47,7 @@ export default class Shortcuts extends Module {
 
     const newShortcut = new Shortcut({
       name: shortcut.name,
-      on: UI.nodes.redactor,
+      on: document, // UI.nodes.redactor
       callback: shortcut.handler,
     });
 

src/components/modules/ui.ts

@@ -202,6 +202,9 @@ export default class UI extends Module {
       case _.keyCodes.ENTER:
         this.enterPressed(event);
         break;
+      case _.keyCodes.BACKSPACE:
+        this.backspacePressed(event);
+        break;
       default:
         this.defaultBehaviour(event);
         break;
@@ -220,7 +223,7 @@ export default class UI extends Module {
     /**
      * Ignore keydowns on editor and meta keys
      */
-    if (keyDownOnEditor || currentBlock && isMetaKey) {
+    if (keyDownOnEditor || (currentBlock && isMetaKey)) {
       return;
     }
 
@@ -235,14 +238,51 @@ export default class UI extends Module {
     this.Editor.Toolbar.close();
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
+  private backspacePressed(event: KeyboardEvent): void {
+    const {BlockManager, BlockSelection, Caret} = this.Editor;
+
+    if (BlockSelection.anyBlockSelected) {
+      const selectionPositionIndex = BlockManager.removeSelectedBlocks();
+      Caret.setToBlock(BlockManager.insertAtIndex(selectionPositionIndex, true), Caret.positions.START);
+
+      /** Clear selection */
+      BlockSelection.clearSelection();
+
+      /**
+       * Stop propagations
+       * Manipulation with BlockSelections is handled in global backspacePress because they may occur
+       * with CMD+A or RectangleSelection and they can be handled on document event
+       */
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    }
+  }
+
   /**
    * Enter pressed on document
    * @param event
    */
   private enterPressed(event: KeyboardEvent): void {
-    const hasPointerToBlock = this.Editor.BlockManager.currentBlockIndex >= 0;
+    const {BlockManager, BlockSelection, Caret} = this.Editor;
+    const hasPointerToBlock = BlockManager.currentBlockIndex >= 0;
 
-    if (this.Editor.BlockSelection.anyBlockSelected) {
+    if (BlockSelection.anyBlockSelected) {
+      const selectionPositionIndex = BlockManager.removeSelectedBlocks();
+      Caret.setToBlock(BlockManager.insertAtIndex(selectionPositionIndex, true), Caret.positions.START);
+
+      /** Clear selection */
+      BlockSelection.clearSelection();
+
+      /**
+       * Stop propagations
+       * Manipulation with BlockSelections is handled in global enterPress because they may occur
+       * with CMD+A or RectangleSelection
+       */
+      event.stopImmediatePropagation();
+      event.stopPropagation();
       return;
     }