Deleting block: Initial

src/components/block-tunes/block-tune-delete.ts

@@ -0,0 +1,54 @@
+/**
+ * @class MoveUpTune
+ * @classdesc Editor's default tune that moves up selected block
+ *
+ * @copyright <CodeX Team> 2018
+ */
+import IBlockTune from './block-tune';
+
+declare var $: any;
+declare var _: any;
+
+export default class DeleteTune implements IBlockTune {
+
+  /**
+   * Property that contains CodeX Editor API methods
+   * @see {api.md}
+   */
+  private readonly api: any;
+
+  /**
+   * Styles
+   * @type {{wrapper: string}}
+   */
+  private CSS = {
+    wrapper: 'ass',
+  };
+
+  /**
+   * MoveUpTune constructor
+   *
+   * @param {Object} api
+   */
+  public constructor({api}) {
+    this.api = api;
+  }
+
+  /**
+   * Create "MoveUp" button and add click event listener
+   * @returns [Element}
+   */
+  public render() {
+    const deleteButton = $.make('div', ['ce-settings-delete'], {});
+    deleteButton.addEventListener('click', (event) => this.handleClick(event), false);
+    return deleteButton;
+  }
+
+  /**
+   * Move current block up
+   * @param {MouseEvent} event
+   */
+  public handleClick(event: MouseEvent): void {
+    this.api.blocks.delete();
+  }
+}

src/components/block.js

@@ -9,6 +9,7 @@
 
 /** Import default tunes */
 import MoveUpTune from './block-tunes/block-tune-move-up';
+import DeleteTune from './block-tunes/block-tune-delete';
 
 /**
  * @classdesc Abstract Block class that contains Block information, Tool name and Tool class instance
@@ -176,7 +177,7 @@ export default class Block {
    * @return {IBlockTune[]}
    */
   makeTunes() {
-    let tunesList = [ MoveUpTune ];
+    let tunesList = [MoveUpTune, DeleteTune];
 
     // Pluck tunes list and return tune instances with passed Editor API and settings
     return tunesList.map( (tune) => {

src/components/interfaces/api.ts

@@ -26,6 +26,11 @@ export interface IBlocksAPI {
    * After moving the block, we need to scroll window
    */
   moveUp: () => void;
+
+  /**
+   * Removes block
+   */
+  delete: (blockIndex?: number) => void;
 }
 
 /**

src/components/modules/api-blocks.ts

@@ -22,11 +22,15 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
    */
   get methods(): IBlocksAPI {
     return {
+      delete: () => this.delete(),
       moveDown: () => this.moveDown(),
-      moveUp: () => this.moveUp()
-    }
+      moveUp: () => this.moveUp(),
+    };
   }
 
+  /**
+   * Moves block down
+   */
   public moveDown(): void {
     console.log('moving down', this.Editor.BlockManager);
   }
@@ -38,4 +42,16 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
     console.log('moving up', this.Editor.BlockManager);
   }
 
+  /**
+   * Deletes Block
+   * @param blockIndex
+   */
+  public delete(blockIndex?: number): void {
+    if (!blockIndex) {
+      this.Editor.BlockManager.removeBlock();
+      this.Editor.Toolbar.close();
+      this.Editor.BlockManager.navigatePrevious(true);
+    }
+  }
+
 }

src/components/modules/blockManager.js

@@ -130,20 +130,27 @@ export default class BlockManager extends Module {
    * Set's caret to the previous Block
    * Before moving caret, we should check if caret position is start of the Plugins node
    * Using {@link Dom#getDeepestNode} to get a last node and match with current selection
+   *
+   * @param {Boolean} force - force navigation
    */
-  navigatePrevious() {
-    let caretAtStart = this.Editor.Caret.isAtStart;
-
-    if (!caretAtStart) {
-      return;
-    }
-
+  navigatePrevious(force = false) {
     let previousBlock = this.previousBlock;
 
     if (!previousBlock) {
       return;
     }
 
+    if (force) {
+      this.Editor.Caret.setToBlock( previousBlock, 0, true );
+      return;
+    }
+
+    let caretAtStart = this.Editor.Caret.isAtStart;
+
+    if (!caretAtStart) {
+      return;
+    }
+
     this.Editor.Caret.setToBlock( previousBlock, 0, true );
   }
 
@@ -193,6 +200,9 @@ export default class BlockManager extends Module {
    * @param {Number|null} index
    */
   removeBlock(index) {
+    if (!index) {
+      index = this.currentBlockIndex;
+    }
     this._blocks.remove(index);
   }
   /**

src/styles/toolbar.css

@@ -76,4 +76,7 @@
       opacity: .4;
     }
   }
-}
+}
+
+@import "tunes/move-up.css";
+@import "tunes/delete.css";

src/styles/tunes/delete.css

@@ -0,0 +1,9 @@
+.ce-settings-delete {
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::before {
+    content: 'delete'
+  }
+}