Add some new commands

src/components/Milkdown/Slash.vue

@@ -3,8 +3,9 @@ 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 { useAddCodeBlock, useToggleBold } from '../../composables/commands'
+import { useCommands } from '../../composables/commands'
 
+const { addCodeBlock, toggleBold } = useCommands()
 let tooltipProvider: SlashProvider
 
 const { view, prevState } = usePluginViewContext()
@@ -25,9 +26,6 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
-
-const { addCodeBlock } = useAddCodeBlock()
-const { toggleBold } = useToggleBold()
 </script>
 
 <template>

src/components/Milkdown/Tooltip.vue

@@ -5,7 +5,9 @@ import { usePluginViewContext } from '@prosemirror-adapter/vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import type { VNodeRef } from 'vue'
-import { useAddCodeBlock, useToggleBold } from '../../composables/commands'
+import { useCommands } from '../../composables/commands'
+
+const { toggleBold, toggleInlineCode, toggleItalic } = useCommands()
 const { view, prevState } = usePluginViewContext()
 
 const divRef = ref<VNodeRef>()
@@ -27,9 +29,6 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
-
-const { toggleBold } = useToggleBold()
-const { addCodeBlock } = useAddCodeBlock()
 </script>
 
 <template>
@@ -42,9 +41,15 @@ const { addCodeBlock } = useAddCodeBlock()
     </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="addCodeBlock"
+      @click="toggleInlineCode"
     >
-      Code Block
+      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

@@ -2,12 +2,14 @@
 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 useToggleBold = () => {
+export const useCommands = () => {
   const [loading, get] = useInstance()
 
   const toggleBold = (e: Event) => {
@@ -16,11 +18,17 @@ export const useToggleBold = () => {
     get()!.action(callCommand(toggleStrongCommand.key))
   }
 
-  return { toggleBold }
+  const toggleInlineCode = (e: Event) => {
+    if (loading.value) return
+    e.preventDefault()
+    get()!.action(callCommand(toggleInlineCodeCommand.key))
   }
 
-export const useAddCodeBlock = () => {
-  const [loading, get] = useInstance()
+  const toggleItalic = (e: Event) => {
+    if (loading.value) return
+    e.preventDefault()
+    get()!.action(callCommand(toggleEmphasisCommand.key))
+  }
 
   const addCodeBlock = (e: Event) => {
     if (loading.value) return
@@ -34,5 +42,6 @@ export const useAddCodeBlock = () => {
       return callCommand(createCodeBlockCommand.key)(ctx)
     })
   }
-  return { addCodeBlock }
+
+  return { toggleBold, addCodeBlock, toggleInlineCode, toggleItalic }
 }