Support language independent keyboard shortcuts (T1027453) (#30)

Author: alexander-kotov-dx

modules/keyboard.js

@@ -178,7 +178,12 @@ class Keyboard extends Module {
     if (typeof handler === 'function') {
       handler = { handler };
     }
-    const keys = Array.isArray(binding.key) ? binding.key : [binding.key];
+
+    const keyPropery = binding.which ? 'which' : 'key';
+    const keys = Array.isArray(binding[keyPropery])
+      ? binding[keyPropery]
+      : [binding[keyPropery]];
+
     keys.forEach(key => {
       const singleBinding = {
         ...binding,
@@ -225,7 +230,10 @@ class Keyboard extends Module {
         suffix: suffixText,
         event: evt,
       };
-      const prevented = matches.some(binding => {
+
+      let prevented = false;
+
+      matches.some(binding => {
         if (
           binding.collapsed != null &&
           binding.collapsed !== curContext.collapsed
@@ -263,8 +271,20 @@ class Keyboard extends Module {
         if (binding.suffix != null && !binding.suffix.test(curContext.suffix)) {
           return false;
         }
-        return binding.handler.call(this, range, curContext, binding) !== true;
+
+        const handlerResult = binding.handler.call(
+          this,
+          range,
+          curContext,
+          binding,
+        );
+        const preventAfterAllMatches = handlerResult?.preventAfterAllMatches;
+
+        prevented = handlerResult !== true || preventAfterAllMatches;
+
+        return prevented && !preventAfterAllMatches;
       });
+
       if (prevented) {
         evt.preventDefault();
       }
@@ -375,9 +395,9 @@ class Keyboard extends Module {
 
 Keyboard.DEFAULTS = {
   bindings: {
-    bold: makeFormatHandler('bold'),
-    italic: makeFormatHandler('italic'),
-    underline: makeFormatHandler('underline'),
+    bold: makeFormatHandler('bold', 66),
+    italic: makeFormatHandler('italic', 73),
+    underline: makeFormatHandler('underline', 85),
     indent: {
       // highlight tab or tab at beginning of list, indent or blockquote
       key: 'tab',
@@ -665,12 +685,14 @@ function makeEmbedArrowHandler(key, shiftKey) {
   };
 }
 
-function makeFormatHandler(format) {
+function makeFormatHandler(format, which) {
   return {
     key: format[0],
+    which,
     shortKey: true,
     handler(range, context) {
       this.quill.format(format, !context.format[format], Quill.sources.USER);
+      return { preventAfterAllMatches: true };
     },
   };
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-quill",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "description": "Core of the DevExtreme HtmlEditor",
   "author": "Developer Express Inc.",
   "main": "dist/dx-quill.js",

package.json

@@ -189,4 +189,72 @@ describe('Keyboard', function() {
       });
     });
   });
+
+  describe('bindings', function() {
+    it('which modifier', function() {
+      const quillMock = {
+        root: document.createElement('div'),
+        once: (eventName, handler) => {
+          handler();
+        },
+        hasFocus: () => true,
+        getSelection: () => {
+          return { index: 0, length: 0 };
+        },
+        getFormat: () => {
+          return {};
+        },
+        getLine: () => {
+          return [{ length: () => 0 }, 0];
+        },
+        getLeaf: () => {
+          return [0, 0];
+        },
+      };
+      const fakeEvent = {
+        key: 'b',
+        which: 66,
+        code: 'KeyB',
+        shiftKey: false,
+        metaKey: false,
+        ctrlKey: true,
+        altKey: false,
+      };
+      let counter = 0;
+
+      const nativeAddEventListener = quillMock.root.addEventListener;
+
+      quillMock.root.addEventListener = function(type, handler) {
+        const modifiedHandler = () => {
+          handler(fakeEvent);
+        };
+
+        nativeAddEventListener.call(this, type, modifiedHandler);
+      };
+
+      // eslint-disable-next-line no-new
+      new Keyboard(quillMock, {
+        bindings: {
+          66: {
+            key: 'b',
+            which: 66,
+            ctrlKey: true,
+            handler() {
+              counter += 1;
+            },
+          },
+        },
+      });
+
+      const keydownEvent = new KeyboardEvent('keydown', {
+        key: 'n',
+      });
+
+      quillMock.root.dispatchEvent(keydownEvent);
+
+      expect(counter).toBe(1);
+
+      quillMock.root.addEventListener = nativeAddEventListener;
+    });
+  });
 });