Add some new commands

src/App.vue

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

src/components/Milkdown/Block.vue

@@ -14,6 +14,7 @@ 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

@@ -0,0 +1,13 @@
+<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,20 +1,16 @@
 <script setup lang="ts">
-import { editorViewCtx } from '@milkdown/core'
 import { SlashProvider } from '@milkdown/plugin-slash'
-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 { usePluginViewContext } from '@prosemirror-adapter/vue'
 import type { VNodeRef } from 'vue'
-const { view, prevState } = usePluginViewContext()
+import { useCommands } from '../../composables/commands'
-const [loading, get] = useInstance()
-
-const divRef = ref<VNodeRef>()
 
+const { addCodeBlock, toggleBold } = useCommands()
 let tooltipProvider: SlashProvider
 
+const { view, prevState } = usePluginViewContext()
+const divRef = ref<VNodeRef>()
+
 onMounted(() => {
   tooltipProvider = new SlashProvider({
     content: divRef.value as any,
@@ -30,30 +26,21 @@ 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
-      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="addCodeBlock"
+      @click="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,15 +1,14 @@
 <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>()
 
@@ -30,21 +29,27 @@ 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
-      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
+      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

@@ -0,0 +1,47 @@
+/* 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 }
+}