chore: comments

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",

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()

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,

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()
+  })
+}

src/composables/useMarkdownActions.ts

@@ -5,25 +5,21 @@ 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,
     end: 0,
     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) {