Refactor commands

src/components/Milkdown/Slash.vue

@@ -3,7 +3,7 @@ import { SlashProvider } from '@milkdown/plugin-slash'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
 import type { VNodeRef } from 'vue'
-import { addCodeBlock } from '../../utils/utils'
+import { useAddCodeBlock, useToggleBold } from '../../composables/quickCommands'
 
 let tooltipProvider: SlashProvider
 
@@ -25,6 +25,9 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
+
+const { addCodeBlock } = useAddCodeBlock()
+const { toggleBold } = useToggleBold()
 </script>
 
 <template>
@@ -35,5 +38,11 @@ onUnmounted(() => {
     >
       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"
+    >
+      Bold
+    </button>
   </div>
 </template>

src/components/Milkdown/Tooltip.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { TooltipProvider } from '@milkdown/plugin-tooltip'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
 import type { VNodeRef } from 'vue'
-import { toggleBold } from '../../utils/utils'
+import { useAddCodeBlock, useToggleBold } from '../../composables/quickCommands'
+const { view, prevState } = usePluginViewContext()
+
+const divRef = ref<VNodeRef>()
 
 let tooltipProvider: TooltipProvider
 
-const { view, prevState } = usePluginViewContext()
-const divRef = ref<VNodeRef>()
-
 onMounted(() => {
   tooltipProvider = new TooltipProvider({
     content: divRef.value as any,
@@ -25,15 +27,24 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
+
+const { toggleBold } = useToggleBold()
+const { addCodeBlock } = useAddCodeBlock()
 </script>
 
 <template>
   <div ref="divRef">
     <button
-      className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      class="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @mousedown="toggleBold"
+      @click="toggleBold"
     >
       Bold
     </button>
+    <button
+      className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @mousedown="addCodeBlock"
+    >
+      Code Block
+    </button>
   </div>
 </template>

src/composables/quickCommands.ts

@@ -0,0 +1,38 @@
+/* eslint-disable antfu/if-newline */
+import { useInstance } from '@milkdown/vue'
+import {
+  createCodeBlockCommand,
+  toggleStrongCommand,
+} from '@milkdown/preset-commonmark'
+import { callCommand } from '@milkdown/utils'
+import { editorViewCtx } from '@milkdown/core'
+
+export const useToggleBold = () => {
+  const [loading, get] = useInstance()
+
+  const toggleBold = (e: Event) => {
+    if (loading.value) return
+    e.preventDefault()
+    get()!.action(callCommand(toggleStrongCommand.key))
+  }
+
+  return { toggleBold }
+}
+
+export const useAddCodeBlock = () => {
+  const [loading, get] = useInstance()
+
+  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 { addCodeBlock }
+}

src/utils/utils.ts

@@ -1,31 +0,0 @@
-/* eslint-disable antfu/if-newline */
-import { useInstance } from '@milkdown/vue'
-import { editorViewCtx } from '@milkdown/core'
-import { callCommand } from '@milkdown/utils'
-import {
-  createCodeBlockCommand,
-  toggleStrongCommand,
-} from '@milkdown/preset-commonmark'
-
-export const addCodeBlock = (e: Event) => {
-  const [loading, get] = useInstance()
-  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)
-  })
-}
-
-export const toggleBold = (e: Event) => {
-  const [loading, get] = useInstance()
-  if (loading.value) return
-  e.preventDefault()
-
-  get()!.action(callCommand(toggleStrongCommand.key))
-}