feat: basic hotkey

public/plugins/bold.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import { jsx } from 'slate-hyperscript';
 import NxSlatePlugin from '@jswork/next-slate-plugin';
+// import isHotkey from 'is-hotkey';
 /**
  * @usage:
  * Editor.addMark(editor,'bold', true)
  */
 
 export default NxSlatePlugin.define({
   id: 'bold',
+  hotkey: 'mod+b',
+  events: {
+    keydown(sender, event) {
+      const cmd = sender.commands['bold'];
+      if (cmd.isHotkey(event)) {
+        cmd.toggle(true);
+      }
+    }
+  },
   serialize: {
     input: (el, children) => {
       const nodeName = el.nodeName.toLowerCase();

public/plugins/ext-editor.js

@@ -14,6 +14,10 @@ export default NxSlatePlugin.define({
       if (!selection) return null;
       const [node, _] = Editor.above(inEditor, selection.anchor.path);
       return node;
+    },
+    isActiveMark: (inEditor, inMark) => {
+      const marks = Editor.marks(inEditor);
+      return marks ? marks[inMark] : false;
     }
   }
 });

public/plugins/italic.js

@@ -8,6 +8,12 @@ import NxSlatePlugin from '@jswork/next-slate-plugin';
 
 export default NxSlatePlugin.define({
   id: 'italic',
+  hotkey: 'mod+i',
+  commands: {
+    activate: () => {
+      Editor.addMark(editor, 'italic', true);
+    }
+  },
   serialize: {
     input: (el, children) => {
       const nodeName = el.nodeName.toLowerCase();

src/components/index.js

@@ -6,6 +6,7 @@ import { createEditor, Editor, Element } from 'slate';
 import { Slate, Editable, withReact } from 'slate-react';
 import nx from '@jswork/next';
 import nxCompose from '@jswork/next-compose';
+import nxDeepAssign from '@jswork/next-deep-assign';
 import nxCompactObject from '@jswork/next-compact-object';
 import NxSlateSerialize from '@jswork/next-slate-serialize';
 import NxSlateDeserialize from '@jswork/next-slate-deserialize';
@@ -69,8 +70,10 @@ export default class ReactRteSlate extends Component {
     const html = inProps.value;
     const composite = this.withDecorator;
     const value = this.fromHtml(html);
+    this.commands = {};
     this.editor = composite(createEditor());
     this.state = { value };
+    this.initialCommands();
     onInit({ target: { value: this.editor } });
   }
 
@@ -101,6 +104,20 @@ export default class ReactRteSlate extends Component {
     plugins.forEach((plugin) => nx.mix(Editor, plugin.statics));
   }
 
+  /**
+   * @schema: commands
+   */
+  initialCommands() {
+    const { plugins } = this.props;
+    plugins.forEach((plugin) => {
+      const { id } = plugin;
+      this.commands[id] = nx.mix(
+        NxSlateDefaults.commands(this, plugin),
+        plugin.commands
+      );
+    });
+  }
+
   /**
    * @schema: render(element)
    * @param {*} inProps
@@ -187,6 +204,20 @@ export default class ReactRteSlate extends Component {
     });
   };
 
+  handleKeyDown = (inEvent) => {
+    // todo: refactor
+    const { plugins } = this.props;
+    plugins.forEach((plugin) => {
+      plugin.events.keydown(this, inEvent);
+      if (plugin.events.keydown === nx.noop && plugin.hotkey) {
+        const cmd = this.commands[plugin.id];
+        if (cmd.isHotkey(inEvent)) {
+          cmd.toggle();
+        }
+      }
+    });
+  };
+
   render() {
     const {
       className,
@@ -211,6 +242,7 @@ export default class ReactRteSlate extends Component {
             placeholder={placeholder}
             renderLeaf={this.renderLeaf}
             renderElement={this.renderElement}
+            onKeyDown={this.handleKeyDown}
             {...props}
           />
         </Slate>