From 2315357125ee6ba572bc0efaed725eba15006a9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 9 Feb 2021 21:04:33 +0100
Subject: [PATCH] add keyboardShortcut and enter command

---
 docs/src/demos/Examples/Default/index.vue     | 15 ---
 docs/src/docPages/api/commands.md             |  2 +
 packages/core/src/commands/enter.ts           | 34 +------
 .../core/src/commands/keyboardShortcut.ts     | 95 +++++++++++++++++++
 packages/core/src/extensions/commands.ts      |  2 +
 5 files changed, 102 insertions(+), 46 deletions(-)
 create mode 100644 packages/core/src/commands/keyboardShortcut.ts

diff --git a/docs/src/demos/Examples/Default/index.vue b/docs/src/demos/Examples/Default/index.vue
index 19049ce4..c951a44a 100644
--- a/docs/src/demos/Examples/Default/index.vue
+++ b/docs/src/demos/Examples/Default/index.vue
@@ -1,21 +1,6 @@
 <template>
   <div>
     <div v-if="editor">
-      <button
-        @click="editor
-          .can()
-          .chain()
-          .focus()
-          .enter()
-          .insertText('1')
-          .enter()
-          .insertText('2')
-          .enter()
-          .insertText('3')
-          .run()"
-      >
-        enter
-      </button>
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
index 439c8aaa..5b01d12f 100644
--- a/docs/src/docPages/api/commands.md
+++ b/docs/src/docPages/api/commands.md
@@ -177,7 +177,9 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .blur()               | Removes focus from the editor.          |
 | .deleteRange()        | Delete a given range.                   |
 | .deleteSelection()    | Delete the selection, if there is one.  |
+| .enter()              | Trigger enter.                          |
 | .focus()              | Focus the editor at the given position. |
+| .keyboardShortcut()   | Trigger a keyboard shortcut.            |
 | .scrollIntoView()     | Scroll the selection into view.         |
 | .selectAll()          | Select the whole document.              |
 | .selectNodeBackward() | Select a node backward.                 |
diff --git a/packages/core/src/commands/enter.ts b/packages/core/src/commands/enter.ts
index 887f8a6c..60d52642 100644
--- a/packages/core/src/commands/enter.ts
+++ b/packages/core/src/commands/enter.ts
@@ -1,36 +1,8 @@
 import { Command } from '../types'
 
 /**
- * Press Enter
+ * Trigger enter.
  */
-export const enter = (): Command => ({
-  editor,
-  view,
-  tr,
-  dispatch,
-}) => {
-  const keyCode = 13
-  const key = 'Enter'
-  const event = document.createEvent('Event')
-  event.initEvent('keydown', true, true)
-  // @ts-ignore
-  event.keyCode = keyCode
-  // @ts-ignore
-  event.key = key
-  // @ts-ignore
-  event.code = key
-
-  const capturedTransaction = editor.captureTransaction(() => {
-    view.someProp('handleKeyDown', f => f(view, event))
-  })
-
-  capturedTransaction?.steps.forEach(step => {
-    const newStep = step.map(tr.mapping)
-
-    if (newStep && dispatch) {
-      tr.step(newStep)
-    }
-  })
-
-  return true
+export const enter = (): Command => ({ commands }) => {
+  return commands.keyboardShortcut('Enter')
 }
diff --git a/packages/core/src/commands/keyboardShortcut.ts b/packages/core/src/commands/keyboardShortcut.ts
new file mode 100644
index 00000000..31db9eed
--- /dev/null
+++ b/packages/core/src/commands/keyboardShortcut.ts
@@ -0,0 +1,95 @@
+import { Command } from '../types'
+
+const mac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false
+
+function normalizeKeyName(name: string) {
+  const parts = name.split(/-(?!$)/)
+  let result = parts[parts.length - 1]
+
+  if (result === 'Space') {
+    result = ' '
+  }
+
+  let alt
+  let ctrl
+  let shift
+  let meta
+
+  for (let i = 0; i < parts.length - 1; i += 1) {
+    const mod = parts[i]
+
+    if (/^(cmd|meta|m)$/i.test(mod)) {
+      meta = true
+    } else if (/^a(lt)?$/i.test(mod)) {
+      alt = true
+    } else if (/^(c|ctrl|control)$/i.test(mod)) {
+      ctrl = true
+    } else if (/^s(hift)?$/i.test(mod)) {
+      shift = true
+    } else if (/^mod$/i.test(mod)) {
+      if (mac) {
+        meta = true
+      } else {
+        ctrl = true
+      }
+    } else {
+      throw new Error(`Unrecognized modifier name: ${mod}`)
+    }
+  }
+
+  if (alt) {
+    result = `Alt-${result}`
+  }
+
+  if (ctrl) {
+    result = `Ctrl-${result}`
+  }
+
+  if (meta) {
+    result = `Meta-${result}`
+  }
+
+  if (shift) {
+    result = `Shift-${result}`
+  }
+
+  return result
+}
+
+/**
+ * Trigger a keyboard shortcut.
+ */
+export const keyboardShortcut = (name: string): Command => ({
+  editor,
+  view,
+  tr,
+  dispatch,
+}) => {
+  const keys = normalizeKeyName(name).split(/-(?!$)/)
+  const key = keys.find(item => !['Alt', 'Ctrl', 'Meta', 'Shift'].includes(item))
+  const event = new KeyboardEvent('keydown', {
+    key: key === 'Space'
+      ? ' '
+      : key,
+    altKey: keys.includes('Alt'),
+    ctrlKey: keys.includes('Ctrl'),
+    metaKey: keys.includes('Meta'),
+    shiftKey: keys.includes('Shift'),
+    bubbles: true,
+    cancelable: true,
+  })
+
+  const capturedTransaction = editor.captureTransaction(() => {
+    view.someProp('handleKeyDown', f => f(view, event))
+  })
+
+  capturedTransaction?.steps.forEach(step => {
+    const newStep = step.map(tr.mapping)
+
+    if (newStep && dispatch) {
+      tr.maybeStep(newStep)
+    }
+  })
+
+  return true
+}
diff --git a/packages/core/src/extensions/commands.ts b/packages/core/src/extensions/commands.ts
index adf7bdba..cdab4283 100644
--- a/packages/core/src/extensions/commands.ts
+++ b/packages/core/src/extensions/commands.ts
@@ -15,6 +15,7 @@ import * as insertHTML from '../commands/insertHTML'
 import * as insertText from '../commands/insertText'
 import * as joinBackward from '../commands/joinBackward'
 import * as joinForward from '../commands/joinForward'
+import * as keyboardShortcut from '../commands/keyboardShortcut'
 import * as lift from '../commands/lift'
 import * as liftEmptyBlock from '../commands/liftEmptyBlock'
 import * as liftListItem from '../commands/liftListItem'
@@ -65,6 +66,7 @@ export const Commands = Extension.create({
       ...insertText,
       ...joinBackward,
       ...joinForward,
+      ...keyboardShortcut,
       ...lift,
       ...liftEmptyBlock,
       ...liftListItem,