src/App.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import EditorWrapper from './components/Milkdown/EditroWrapper.vue'
+import { MilkdownProvider } from '@milkdown/vue'
+import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
+import Milkdown from './components/Milkdown/Editor.vue'
 </script>
 
 <template>
-  <EditorWrapper />
+  <MilkdownProvider>
+    <ProsemirrorAdapterProvider>
+      <Milkdown />
+    </ProsemirrorAdapterProvider>
+  </MilkdownProvider>
 </template>

src/components/Milkdown/Block.vue

@@ -14,7 +14,6 @@ let tooltipProvider: BlockProvider | undefined
 
 watch([loading], () => {
   const editor = get()
-  // eslint-disable-next-line antfu/if-newline
   if (loading.value || !editor || tooltipProvider) return
 
   editor.action((ctx) => {

src/components/Milkdown/EditroWrapper.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { MilkdownProvider } from '@milkdown/vue'
-import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
-import Editor from './Editor.vue'
-</script>
-
-<template>
-  <MilkdownProvider>
-    <ProsemirrorAdapterProvider>
-      <Editor />
-    </ProsemirrorAdapterProvider>
-  </MilkdownProvider>
-</template>

src/components/Milkdown/Slash.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
+import { editorViewCtx } from '@milkdown/core'
 import { SlashProvider } from '@milkdown/plugin-slash'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { createCodeBlockCommand } from '@milkdown/preset-commonmark'
+import { callCommand } from '@milkdown/utils'
+import { useInstance } from '@milkdown/vue'
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
 import type { VNodeRef } from 'vue'
-import { useCommands } from '../../composables/commands'
-
-const { addCodeBlock, toggleBold } = useCommands()
-let tooltipProvider: SlashProvider
-
 const { view, prevState } = usePluginViewContext()
+const [loading, get] = useInstance()
+
 const divRef = ref<VNodeRef>()
 
+let tooltipProvider: SlashProvider
+
 onMounted(() => {
   tooltipProvider = new SlashProvider({
     content: divRef.value as any,
@@ -26,21 +30,30 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
+
+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)
+  })
+}
 </script>
 
 <template>
   <div 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"
+      className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="addCodeBlock"
+      @mousedown="addCodeBlock"
     >
       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,14 +1,15 @@
 <script setup lang="ts">
 import { TooltipProvider } from '@milkdown/plugin-tooltip'
-
+import { toggleStrongCommand } from '@milkdown/preset-commonmark'
+import { callCommand } from '@milkdown/utils'
+import { useInstance } from '@milkdown/vue'
 import { usePluginViewContext } from '@prosemirror-adapter/vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import type { VNodeRef } from 'vue'
-import { useCommands } from '../../composables/commands'
 
-const { toggleBold, toggleInlineCode, toggleItalic } = useCommands()
 const { view, prevState } = usePluginViewContext()
+const [loading, get] = useInstance()
 
 const divRef = ref<VNodeRef>()
 
@@ -29,27 +30,21 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
+
+const toggleBold = (e: Event) => {
+  if (loading.value) return
+  e.preventDefault()
+  get()!.action(callCommand(toggleStrongCommand.key))
+}
 </script>
 
 <template>
   <div 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"
+      className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
-      @click="toggleBold"
+      @mousedown="toggleBold"
     >
       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"
-    >
-      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"
-    >
-      Italic
-    </button>
   </div>
 </template>

src/composables/commands.ts

@@ -1,47 +0,0 @@
-/* eslint-disable antfu/if-newline */
-import { useInstance } from '@milkdown/vue'
-import {
-  createCodeBlockCommand,
-  toggleEmphasisCommand,
-  toggleInlineCodeCommand,
-  toggleStrongCommand,
-} from '@milkdown/preset-commonmark'
-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 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, addCodeBlock, toggleInlineCode, toggleItalic }
-}