Refactor commands

src/components/Milkdown/Slash.vue

@@ -1,11 +1,35 @@
 <script setup lang="ts">
-import { SlashProvider } from '@milkdown/plugin-slash'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useInstance } from '@milkdown/vue'
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
-import type { VNodeRef } from 'vue'
+import { editorViewCtx } from '@milkdown/core'
-import { useCommands } from '../../composables/commands'
+import { SlashProvider } from '@milkdown/plugin-slash'
+import { callCommand } from '@milkdown/utils'
+
+import type { VNodeRef } from 'vue'
+import type { CmdKey } from '@milkdown/core'
+import {
+  createCodeBlockCommand,
+  insertHrCommand,
+  wrapInBlockquoteCommand,
+  wrapInBulletListCommand,
+  wrapInHeadingCommand,
+  wrapInOrderedListCommand,
+} from '@milkdown/preset-commonmark'
+
+const [loading, get] = useInstance()
+
+const call = <T>(command: CmdKey<T>, payload?: T) => {
+  return get()!.action((ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const { dispatch, state } = view
+    const { tr, selection } = state
+    const { from } = selection
+    dispatch(tr.deleteRange(from - 1, from))
+    return callCommand(command, payload)(ctx)
+  })
+}
 
-const { addCodeBlock, toggleBold } = useCommands()
 let tooltipProvider: SlashProvider
 
 const { view, prevState } = usePluginViewContext()
@@ -29,18 +53,54 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="divRef">
+  <div v-if="loading" ref="divRef">
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="addCodeBlock"
+      @click.prevent="call(createCodeBlockCommand.key)"
     >
       Code Block
     </button>
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleBold"
+      @click.prevent="call(wrapInHeadingCommand.key, 1)"
     >
-      Bold
+      Heading1
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(wrapInHeadingCommand.key, 2)"
+    >
+      Heading2
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(wrapInHeadingCommand.key, 3)"
+    >
+      Heading3
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(wrapInBulletListCommand.key)"
+    >
+      BulletList
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(wrapInOrderedListCommand.key)"
+    >
+      OrderList
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(wrapInBlockquoteCommand.key)"
+    >
+      Quote
+    </button>
+    <button
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @click.prevent="call(insertHrCommand.key)"
+    >
+      Hr
     </button>
   </div>
 </template>

src/components/Milkdown/Tooltip.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
+import { useInstance } from '@milkdown/vue'
 import { TooltipProvider } from '@milkdown/plugin-tooltip'
-
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-
+import type { CmdKey } from '@milkdown/core'
 import type { VNodeRef } from 'vue'
-import { useCommands } from '../../composables/commands'
+import { callCommand } from '@milkdown/utils'
+
+import {
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+  wrapInBlockquoteCommand,
+} from '@milkdown/preset-commonmark'
+import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'
+
+const [loading, get] = useInstance()
+
+const call = <T>(command: CmdKey<T>, payload?: T) => {
+  return get()?.action(callCommand(command, payload))
+}
 
-const {
-  toggleBold,
-  toggleInlineCode,
-  toggleItalic,
-  wrapInBlockQuote,
-  toggleStrikeThrough,
-} = useCommands()
 const { view, prevState } = usePluginViewContext()
 
 const divRef = ref<VNodeRef>()
@@ -38,34 +45,34 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="divRef">
+  <div v-if="loading" ref="divRef">
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleBold"
+      @click.prevent="call(toggleStrongCommand.key)"
     >
       Bold
     </button>
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleInlineCode"
+      @click.prevent="call(toggleInlineCodeCommand.key)"
     >
       Code
     </button>
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleItalic"
+      @click.prevent="call(toggleEmphasisCommand.key)"
     >
       Italic
     </button>
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="wrapInBlockQuote"
+      @click.prevent="call(wrapInBlockquoteCommand.key)"
     >
       Quote
     </button>
     <button
       class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleStrikeThrough"
+      @click.prevent="call(toggleStrikethroughCommand.key)"
     >
       StrikeThrough
     </button>

src/composables/commands.ts

@@ -1,66 +0,0 @@
-/* eslint-disable antfu/if-newline */
-import { useInstance } from '@milkdown/vue'
-import {
-  createCodeBlockCommand,
-  toggleEmphasisCommand,
-  toggleInlineCodeCommand,
-  toggleStrongCommand,
-  wrapInBlockquoteCommand,
-} from '@milkdown/preset-commonmark'
-import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'
-import { callCommand } from '@milkdown/utils'
-import { editorViewCtx } from '@milkdown/core'
-
-export const useCommands = () => {
-  const [loading, get] = useInstance()
-
-  const toggleBold = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action(callCommand(toggleStrongCommand.key))
-  }
-
-  const toggleInlineCode = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action(callCommand(toggleInlineCodeCommand.key))
-  }
-
-  const toggleItalic = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action(callCommand(toggleEmphasisCommand.key))
-  }
-  const toggleStrikeThrough = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action(callCommand(toggleStrikethroughCommand.key))
-  }
-
-  const wrapInBlockQuote = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action(callCommand(wrapInBlockquoteCommand.key))
-  }
-  const addCodeBlock = (e: Event) => {
-    if (loading.value) return
-    e.preventDefault()
-    get()!.action((ctx) => {
-      const view = ctx.get(editorViewCtx)
-      const { dispatch, state } = view
-      const { tr, selection } = state
-      const { from } = selection
-      dispatch(tr.deleteRange(from - 1, from))
-      return callCommand(createCodeBlockCommand.key)(ctx)
-    })
-  }
-
-  return {
-    toggleBold,
-    toggleInlineCode,
-    toggleItalic,
-    toggleStrikeThrough,
-    wrapInBlockQuote,
-    addCodeBlock,
-  }
-}