Custom keymaps for actions

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sunsama/rich-markdown-editor",
   "description": "A rich text editor with Markdown shortcuts",
-  "version": "10.6.15",
+  "version": "10.6.16",
   "main": "dist/lib/index.js",
   "typings": "dist/@types/index.d.ts",
   "license": "BSD-3-Clause",

src/index.tsx

@@ -91,6 +91,10 @@ export type Props = {
   template?: boolean;
   headingsOffset?: number;
   scrollTo?: string;
+  keys?: Array<{
+    action: 'cancel' | 'save' | 'save_exit' | 'newline';
+    keys: string[];
+  }>;
   handleDOMEvents?: {
     [name: string]: (view: EditorView, event: Event) => boolean;
   };
@@ -140,6 +144,16 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     onClickLink: href => {
       window.open(href, "_blank");
     },
+    keys: [{
+      action: 'cancel',
+      keys: ['Esc'],
+    }, {
+      action: 'save',
+      keys: ['Meta', 's'],
+    }, {
+      action: 'save_exit',
+      keys: ['Meta', 'Enter'],
+    }],
     disabledExtensions: [],
     embeds: [],
     extensions: [],
@@ -289,6 +303,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
             new TrailingNode(),
             new MarkdownPaste(),
             new Keys({
+              keys: this.props.keys,
               onSave: this.handleSave,
               onSaveAndExit: this.handleSaveAndExit,
               onCancel: this.props.onCancel,

src/lib/markdown/serializer.js

@@ -149,7 +149,12 @@ export class MarkdownSerializerState {
   // Render the given node as a block.
   render(node, parent, index) {
     if (typeof parent === "number") throw new Error("!");
-    this.nodes[node.type.name](this, node, parent, index);
+    const render = this.nodes[node.type.name];
+    if (!render) {
+        throw new Error(`Cannot render unknown node (${node.type.name})`);
+    } else {
+        render(this, node, parent, index);
+    }
   }
 
   // :: (Node)

src/menus/block.ts

@@ -92,7 +92,7 @@ export default function blockMenuItems(): MenuItem[] {
       keywords: "script",
     },
     {
-      name: "hr",
+      name: "horizontal_rule",
       title: "Divider",
       icon: HorizontalRuleIcon,
       shortcut: `${mod} _`,
@@ -144,6 +144,5 @@ export const extensionBlockNames = {
     h2: [{ name: 'heading', attrs: { level: 2 }}],
     h3: [{ name: 'heading', attrs: { level: 3 }}],
     notice: ['container_notice'],
-    horizontal_rule: ['hr']
 }
 

src/nodes/HorizontalRule.ts

@@ -3,7 +3,11 @@ import Node from "./Node";
 
 export default class HorizontalRule extends Node {
   get name() {
-    return "hr";
+    return "horizontal_rule";
+  }
+
+  get markdownToken() {
+      return "hr";
   }
 
   get schema() {
@@ -52,6 +56,6 @@ export default class HorizontalRule extends Node {
   }
 
   parseMarkdown() {
-    return { node: "hr" };
+    return { node: "horizontal_rule" };
   }
 }

src/plugins/Keys.ts

@@ -1,3 +1,5 @@
+
+import { includes, without, find } from 'lodash';
 import { Plugin } from "prosemirror-state";
 import Extension from "../lib/Extension";
 
@@ -13,29 +15,50 @@ export default class Keys extends Extension {
           // we can't use the keys bindings for this as we want to preventDefault
           // on the original keyboard event when handled
           handleKeyDown: (view, event) => {
-            if (!event.metaKey) return false;
-            if (event.key === "s") {
-              event.preventDefault();
-              this.options.onSave();
-              return true;
-            }
-
-            if (event.key === "Enter") {
-              event.preventDefault();
-              this.options.onSaveAndExit();
-              return true;
-            }
-
-            if (event.key === "Escape") {
-              event.preventDefault();
-              this.options.onCancel();
-              return true;
+            const matchingKey = find(this.options.keys, ({ keys }) => this.isMatchingKey(keys, event));
+            if (matchingKey) {
+                const { action, keys } = matchingKey;
+                switch(action) {
+                    case 'save': {
+                      event.preventDefault();
+                      this.options.onSave();
+                      return true;
+                    }
+                    case 'save_exit': {
+                      event.preventDefault();
+                      this.options.onSaveAndExit();
+                      return true;
+                    }
+                    case 'cancel': {
+                      event.preventDefault();
+                      this.options.onCancel();
+                      return true;
+                    }
+                    case 'newline': {
+                      const { state, dispatch } = view;
+                      event.preventDefault();
+                      dispatch(state.tr.insertText('\n'));
+                      return true;
+                    }
+                    default: {
+                        console.warn(`Unknown action specified in keys ${action}`);
+                        return false;
+                    }
+                }
             }
-
             return false;
           },
         },
       }),
     ];
   }
+
+  isMatchingKey(keys: string[], event) {
+      const shouldHaveMeta = includes(keys, 'Meta');
+      if (shouldHaveMeta && !event.metaKey) {
+          return false;
+      }
+      const nonMetaKeys = without(keys, 'Ctrl', 'Cmd',  'Meta');
+      return nonMetaKeys.includes(event.key);
+  }
 }