From 45c32e307cd906119eff3ac96a32a8600704e6ba Mon Sep 17 00:00:00 2001
From: Seviche <me@seviche.cc>
Date: Fri, 24 Mar 2023 22:29:15 +0800
Subject: [PATCH] Add some new commands

---
 src/components/Milkdown/Slash.vue   |  6 ++----
 src/components/Milkdown/Tooltip.vue | 17 +++++++++++------
 src/composables/commands.ts         | 21 +++++++++++++++------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/Milkdown/Slash.vue b/src/components/Milkdown/Slash.vue
index 2df3583..ada6385 100644
--- a/src/components/Milkdown/Slash.vue
+++ b/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>
diff --git a/src/components/Milkdown/Tooltip.vue b/src/components/Milkdown/Tooltip.vue
index 4f13e7d..7f7b692 100644
--- a/src/components/Milkdown/Tooltip.vue
+++ b/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>
diff --git a/src/composables/commands.ts b/src/composables/commands.ts
index f5d8afa..1b77ddb 100644
--- a/src/composables/commands.ts
+++ b/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 }
 }