feat(delete): add delete hooks in lifecycle (#454)

src/js/editor/editor.js

@@ -59,6 +59,8 @@ const CALLBACK_QUEUES = {
   DID_UPDATE: 'didUpdate',
   WILL_RENDER: 'willRender',
   DID_RENDER: 'didRender',
+  WILL_DELETE: 'willDelete',
+  DID_DELETE: 'didDelete',
   CURSOR_DID_CHANGE: 'cursorDidChange',
   DID_REPARSE: 'didReparse',
   POST_DID_CHANGE: 'postDidChange',
@@ -311,11 +313,13 @@ class Editor {
   performDelete({direction, unit}={direction: DIRECTION.BACKWARD, unit: 'char'}) {
     let { range } = this;
 
+    this.runCallbacks(CALLBACK_QUEUES.WILL_DELETE);
     if (range.isCollapsed) {
       this.deleteAtPosition(range.head, direction, {unit});
     } else {
       this.deleteRange(range);
     }
+    this.runCallbacks(CALLBACK_QUEUES.DID_DELETE);
   }
 
   handleNewline(event) {
@@ -748,6 +752,22 @@ class Editor {
     this.addCallback(CALLBACK_QUEUES.DID_RENDER, callback);
   }
 
+  /**
+   * @param {Function} callback This callback will be called before deleting.
+   * @public
+   */
+  willDelete(callback) {
+    this.addCallback(CALLBACK_QUEUES.WILL_DELETE, callback);
+  }
+
+  /**
+   * @param {Function} callback This callback will be called after deleting.
+   * @public
+   */
+  didDelete(callback) {
+    this.addCallback(CALLBACK_QUEUES.DID_DELETE, callback);
+  }
+
   /**
    * @param {Function} callback This callback will be called every time the cursor
    *        position (or selection) changes.

tests/acceptance/editor-sections-test.js

@@ -249,6 +249,40 @@ test('deleting across 1 section removes it, joins the 2 boundary sections', (ass
                     'remaining paragraph has correct text');
 });
 
+test('failing to delete will not trigger deleting hooks', (assert) => {
+  assert.expect(0);
+  editor = new Editor({mobiledoc: mobileDocWith2Sections});
+  editor.willDelete(() => {
+    assert.ok(false, 'willDelete should not be triggered');
+  });
+  editor.didDelete(() => {
+    assert.ok(false, 'didDelete should not be triggered');
+  });
+
+  editor.render(editorElement);
+  editor.disableEditing();
+  Helpers.dom.triggerDelete(editor);
+});
+
+test('deleting chracter triggers deleting hooks', (assert) => {
+  assert.expect(3);
+  let lifeCycles = [];
+
+  editor = new Editor({mobiledoc: mobileDocWith2Sections});
+  editor.willDelete(() => {
+    assert.ok(true, 'willDelete is triggered');
+    lifeCycles.push('willDelete');
+  });
+  editor.didDelete(() => {
+    assert.ok(true, 'didDelete is triggered');
+    lifeCycles.push('didDelete');
+  });
+  editor.render(editorElement);
+
+  Helpers.dom.triggerDelete(editor);
+  assert.deepEqual(lifeCycles, ['willDelete', 'didDelete'], 'hooks are triggered in order');
+});
+
 test('keystroke of delete removes that character', (assert) => {
   editor = new Editor({mobiledoc: mobileDocWith3Sections});
   editor.render(editorElement);