fix: indent more make blockquote (close #242) (#246)

* fix: unintended squire shortcuts applied

* feat: add keymap ctrl+],[ to indent/outdent

* refactor: apply code review (#246)

apps/core/src/js/commandManager.js

@@ -6,8 +6,8 @@ import $ from 'jquery';
 import util from 'tui-code-snippet';
 
 import Command from './command';
+import {isMac} from './util';
 
-const isMac = /Mac/.test(navigator.platform);
 const KEYMAP_OS_INDEX = isMac ? 1 : 0;
 
 /**

apps/core/src/js/editor.js

@@ -189,9 +189,7 @@ class ToastUIEditor {
 
     this.mdEditor = MarkdownEditor.factory(this.layout.getMdEditorContainerEl(), this.eventManager);
     this.preview = new MarkdownPreview(this.layout.getPreviewEl(), this.eventManager, this.convertor);
-    this.wwEditor = WysiwygEditor.factory(this.layout.getWwEditorContainerEl(), this.eventManager, {
-      useCommandShortcut: this.options.useCommandShortcut
-    });
+    this.wwEditor = WysiwygEditor.factory(this.layout.getWwEditorContainerEl(), this.eventManager);
     this.toMarkOptions = null;
 
     this.changePreviewStyle(this.options.previewStyle);

apps/core/src/js/squireExt.js

@@ -7,6 +7,7 @@ import util from 'tui-code-snippet';
 import Squire from 'squire-rte';
 
 import domUtils from './domUtils';
+import {isMac} from './util';
 
 const FIND_BLOCK_TAGNAME_RX = /\b(H[\d]|LI|P|BLOCKQUOTE|TD)\b/;
 const isIElt11 = /Trident\/[456]\./.test(navigator.userAgent);
@@ -325,7 +326,6 @@ class SquireExt extends Squire {
   }
 
   blockCommandShortcuts() {
-    const isMac = /Mac/.test(navigator.platform);
     const meta = isMac ? 'meta' : 'ctrl';
     const keys = ['b', 'i', 'u', 'shift-7', 'shift-5', 'shift-6', 'shift-8', 'shift-9', '[', ']'];
 
@@ -338,4 +338,3 @@ class SquireExt extends Squire {
 }
 
 export default SquireExt;
-

apps/core/src/js/util.js

@@ -27,6 +27,9 @@ function sendHostName() {
   });
 }
 
+const isMac = /Mac/.test(navigator.platform);
+
 module.exports = {
-  sendHostName
+  sendHostName,
+  isMac
 };

apps/core/src/js/wwListManager.js

@@ -74,7 +74,7 @@ class WwListManager {
   }
 
   _initKeyHandler() {
-    this.wwe.addKeyEventHandler('TAB', (ev, range) => {
+    this.wwe.addKeyEventHandler(['TAB', 'CTRL+]', 'META+]'], (ev, range) => {
       let isNeedNext;
 
       if (range.collapsed) {
@@ -89,7 +89,7 @@ class WwListManager {
       return isNeedNext;
     });
 
-    this.wwe.addKeyEventHandler('SHIFT+TAB', (ev, range) => {
+    this.wwe.addKeyEventHandler(['SHIFT+TAB', 'CTRL+[', 'META+['], (ev, range) => {
       let isNeedNext;
 
       if (range.collapsed) {

apps/core/src/js/wysiwygEditor.js

@@ -39,11 +39,9 @@ class WysiwygEditor {
    * Creates an instance of WysiwygEditor.
    * @param {jQuery} $el element to insert editor
    * @param {EventManager} eventManager EventManager instance
-   * @param {object} [options={}] - option object
-   *  @param {boolean} [options.useCommandShortcut=true] - whether to use squire command shortcuts
    * @memberof WysiwygEditor
    */
-  constructor($el, eventManager, options = {}) {
+  constructor($el, eventManager) {
     this.componentManager = new ComponentManager(this);
     this.eventManager = eventManager;
     this.$editorContainerEl = $el;
@@ -55,10 +53,6 @@ class WysiwygEditor {
     this._keyEventHandlers = {};
     this._managers = {};
 
-    this._options = $.extend({
-      'useCommandShortcut': true
-    }, options);
-
     this._initEvent();
     this._initDefaultKeyEventHandler();
 
@@ -80,9 +74,7 @@ class WysiwygEditor {
         'HR': false
       }
     });
-    if (!this._options.useCommandShortcut) {
-      this.editor.blockCommandShortcuts();
-    }
+    this.editor.blockCommandShortcuts();
 
     this._clipboardManager = new WwClipboardManager(this);
     this._initSquireEvent();
@@ -126,7 +118,7 @@ class WysiwygEditor {
    * addKeyEventHandler
    * Add key event handler
    * @memberof WysiwygEditor
-   * @param {string} keyMap keyMap string
+   * @param {string|Array.<string>} keyMap - keyMap string or array of string
    * @param {function} handler handler
    */
   addKeyEventHandler(keyMap, handler) {
@@ -135,11 +127,16 @@ class WysiwygEditor {
       keyMap = 'DEFAULT';
     }
 
-    if (!this._keyEventHandlers[keyMap]) {
-      this._keyEventHandlers[keyMap] = [];
+    if (!util.isArray(keyMap)) {
+      keyMap = [keyMap];
     }
 
-    this._keyEventHandlers[keyMap].push(handler);
+    keyMap.forEach(key => {
+      if (!this._keyEventHandlers[key]) {
+        this._keyEventHandlers[key] = [];
+      }
+      this._keyEventHandlers[key].push(handler);
+    });
   }
 
   /**

apps/core/test/unit/squireExt.spec.js

@@ -5,6 +5,7 @@
 import $ from 'jquery';
 
 import SquireExt from '../../src/js/squireExt';
+import {isMac} from '../../src/js/util';
 
 describe('SquireExt', () => {
   let sqe;
@@ -294,7 +295,6 @@ describe('SquireExt', () => {
 
   describe('blockCommandShortcut()', () => {
     it('blocks key handlers', () => {
-      const isMac = /Mac/.test(navigator.platform);
       const meta = isMac ? 'meta' : 'ctrl';
       const spyOriginal = jasmine.createSpy('original');
       const spy = jasmine.createSpy('replace');

apps/core/test/unit/wysiwygEditor.spec.js

@@ -7,6 +7,7 @@ import $ from 'jquery';
 import WysiwygEditor from '../../src/js/wysiwygEditor';
 import EventManager from '../../src/js/eventManager';
 import ListManager from '../../src/js/wwListManager';
+import {isMac} from '../../src/js/util';
 
 describe('WysiwygEditor', () => {
   let $container, em, wwe;
@@ -27,7 +28,7 @@ describe('WysiwygEditor', () => {
   // we need to wait squire input event process
   afterEach(done => {
     setTimeout(() => {
-      $('body').empty();
+      $container.remove();
       done();
     });
   });
@@ -65,6 +66,20 @@ describe('WysiwygEditor', () => {
       expect(handler).toHaveBeenCalled();
     });
 
+    it('should take multiple keymaps as an array', () => {
+      const handler = jasmine.createSpy('keyEventHandler');
+      wwe.addKeyEventHandler(['HOME', 'END'], handler);
+      em.emit('wysiwygKeyEvent', {
+        keyMap: 'HOME',
+        data: {keyCode: 0}
+      });
+      em.emit('wysiwygKeyEvent', {
+        keyMap: 'END',
+        data: {keyCode: 0}
+      });
+      expect(handler.calls.count()).toBe(2);
+    });
+
     it('run particular keymap and default', () => {
       const handler = jasmine.createSpy('keyEventHandler');
       wwe.addKeyEventHandler('HOME', handler);
@@ -529,4 +544,24 @@ describe('WysiwygEditor', () => {
       expect(wwe._getLastLiString('BLOCKQUOTE>DIV')).toEqual('');
     });
   });
+
+  it('should blocks squire default key handlers', () => {
+    const sqe = wwe.getEditor();
+    const meta = isMac ? 'meta' : 'ctrl';
+    const spyOriginal = jasmine.createSpy('original');
+    const spy = jasmine.createSpy('replace');
+    const keyEvent = {
+      keyCode: 66,
+      preventDefault: spy
+    };
+    keyEvent[`${meta}Key`] = true;
+
+    Object.getPrototypeOf(sqe._keyHandlers)[`${meta}-b`] = spyOriginal;
+    sqe.fireEvent('keydown', keyEvent);
+
+    setTimeout(() => {
+      expect(spy).toHaveBeenCalled();
+      expect(spyOriginal).not.toHaveBeenCalled();
+    }, 1);
+  });
 });