From bde6e2dc44dddb04c46f2199b4f22a90b7b70717 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Sat, 16 Dec 2023 11:19:03 -0500
Subject: [PATCH] chore: comments

---
 package.json                            |  1 +
 pnpm-lock.yaml                          | 13 ++++++++++++
 src/components/MarkdownUi.vue           |  7 ++++++-
 src/composables/index.ts                |  2 ++
 src/composables/useKeyboardShortcuts.ts | 27 +++++++++++++++++++++++++
 src/composables/useMarkdownActions.ts   | 12 ++++-------
 6 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 src/composables/useKeyboardShortcuts.ts

diff --git a/package.json b/package.json
index a181aa65..e2fdaf57 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@sindresorhus/slugify": "^2.2.1",
     "@vueuse/core": "^10.7.0",
+    "@vueuse/math": "^10.7.0",
     "html-format": "^1.1.2",
     "markdown-it": "^14.0.0",
     "markdown-it-abbr": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2008259e..5cb9824c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,9 @@ dependencies:
   '@vueuse/core':
     specifier: ^10.7.0
     version: 10.7.0(vue@3.3.11)
+  '@vueuse/math':
+    specifier: ^10.7.0
+    version: 10.7.0(vue@3.3.11)
   html-format:
     specifier: ^1.1.2
     version: 1.1.2
@@ -1715,6 +1718,16 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/math@10.7.0(vue@3.3.11):
+    resolution: {integrity: sha512-JTHFTQ/Mr5nGe6YYC30evYna+981TR6HYFvjD83Aay2dLIEVZGRwM8+f6IxOGcoq9u95hFkhOcer/VsjIDvETg==}
+    dependencies:
+      '@vueuse/shared': 10.7.0(vue@3.3.11)
+      vue-demi: 0.14.6(vue@3.3.11)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/metadata@10.7.0:
     resolution: {integrity: sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==}
     dev: false
diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
index e98e0e88..28d29573 100644
--- a/src/components/MarkdownUi.vue
+++ b/src/components/MarkdownUi.vue
@@ -21,6 +21,7 @@
         data-testid="markdown-editor"
       >
         <textarea
+          :id="textareaId"
           autocapitalize="off"
           autocomplete="off"
           autocorrect="off"
@@ -114,6 +115,7 @@ const { init: initMarkdownIt, md } = composables.useMarkdownIt(props.theme)
 
 // Generate a unique id to handle mutiple components on the same page
 const componentContainerId = computed((): string => `markdown-ui-${uuidv4()}`)
+const textareaId = computed((): string => `markdown-ui-textarea-${uuidv4()}`)
 
 // Provide the id to child components
 provide(COMPONENT_CONTAINER_ID_INJECTION_KEY, computed((): string => componentContainerId.value))
@@ -145,7 +147,7 @@ const markdownHtml = ref<string>('')
 // The preview HTML (if user enables it in the toolbar)
 const markdownPreviewHtml = ref<string>('')
 
-const { toggleInlineFormatting, toggleTab, insertMarkdownTemplate } = composables.useMarkdownActions(componentContainerId.value, rawMarkdown)
+const { toggleInlineFormatting, toggleTab, insertMarkdownTemplate } = composables.useMarkdownActions(textareaId.value, rawMarkdown)
 
 const formatSelection = (format: InlineFormat): void => {
   toggleInlineFormatting(format)
@@ -215,6 +217,9 @@ const saveChanges = async (): Promise<void> => {
   emit('save', rawMarkdown.value)
 }
 
+// Initialize keyboard shortcuts
+composables.useKeyboardShortcuts(textareaId.value, rawMarkdown, emulateInputEvent)
+
 onBeforeMount(async () => {
   // Initialize markdown-it
   await initMarkdownIt()
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 284a27b3..78463c8f 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1,10 +1,12 @@
 import useDebounce from './useDebounce'
+import useKeyboardShortcuts from './useKeyboardShortcuts'
 import useMarkdownActions from './useMarkdownActions'
 import useMarkdownIt from './useMarkdownIt'
 import useShikiji from './useShikiji'
 
 export default {
   useDebounce,
+  useKeyboardShortcuts,
   useMarkdownActions,
   useMarkdownIt,
   useShikiji,
diff --git a/src/composables/useKeyboardShortcuts.ts b/src/composables/useKeyboardShortcuts.ts
new file mode 100644
index 00000000..7c4803af
--- /dev/null
+++ b/src/composables/useKeyboardShortcuts.ts
@@ -0,0 +1,27 @@
+import { computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import useMarkdownActions from './useMarkdownActions'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd, logicOr } from '@vueuse/math'
+
+/**
+ * Utilize keyboard shortcuts in the markdown editor.
+ * @param {string} textareaId The `id` of the textarea
+ * @returns
+ */
+export default function useKeyboardShortcuts(textareaId: string, rawMarkdown: Ref<string>, onEditCallback: () => void) {
+  // The document.activeElement
+  const activeElement = useActiveElement()
+  const textareaIsActive = computed((): boolean => activeElement.value?.id === textareaId)
+  const { toggleInlineFormatting } = useMarkdownActions(textareaId, rawMarkdown)
+
+  // Keyboard events
+  const keys = useMagicKeys()
+
+  // TODO: Skip debounce
+  // TODO: Control messes with text selection
+  whenever(logicAnd(logicOr(keys.command_b, keys.control_b), textareaIsActive), () => {
+    toggleInlineFormatting('bold')
+    onEditCallback()
+  })
+}
diff --git a/src/composables/useMarkdownActions.ts b/src/composables/useMarkdownActions.ts
index bf468b09..78573a3e 100644
--- a/src/composables/useMarkdownActions.ts
+++ b/src/composables/useMarkdownActions.ts
@@ -5,14 +5,10 @@ import type { InlineFormat, MarkdownTemplate } from '../types'
 
 /**
  * Utilize the markdown editor actions.
- * @param {string} componentContainerId The `id` of the component container
+ * @param {string} textareaId The `id` of the textarea
  * @returns
  */
-export default function useMarkdownActions(componentContainerId: string, rawMarkdown: Ref<string>) {
-  if (!componentContainerId) {
-    console.error('useMarkdownActions: no componentContainerId')
-  }
-
+export default function useMarkdownActions(textareaId: string, rawMarkdown: Ref<string>) {
   // A reactive object to keep track of the textarea's selection
   const selectedText = reactive({
     start: 0,
@@ -20,10 +16,10 @@ export default function useMarkdownActions(componentContainerId: string, rawMark
     text: '',
   })
 
-  /** Utilize the componentContainerId to obtain a reference to the underlying textarea element */
+  /** Utilize the textareaId to obtain a reference to the underlying textarea element */
   const getTextarea = (): HTMLTextAreaElement | null => {
     // Find the textarea within the component container
-    const selector = `#${componentContainerId} textarea`
+    const selector = `#${textareaId}`
     const textarea: HTMLTextAreaElement | null = document.querySelector(selector)
 
     if (!textarea) {