Add new commands

src/components/Milkdown/Tooltip.vue

@@ -7,7 +7,13 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
 import type { VNodeRef } from 'vue'
 import { useCommands } from '../../composables/commands'
 
-const { toggleBold, toggleInlineCode, toggleItalic } = useCommands()
+const {
+  toggleBold,
+  toggleInlineCode,
+  toggleItalic,
+  wrapInBlockQuote,
+  toggleStrikeThrough,
+} = useCommands()
 const { view, prevState } = usePluginViewContext()
 
 const divRef = ref<VNodeRef>()
@@ -51,5 +57,17 @@ onUnmounted(() => {
     >
       Italic
     </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="wrapInBlockQuote"
+    >
+      Quote
+    </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="toggleStrikeThrough"
+    >
+      StrikeThrough
+    </button>
   </div>
 </template>

src/composables/commands.ts

@@ -5,7 +5,9 @@ import {
   toggleEmphasisCommand,
   toggleInlineCodeCommand,
   toggleStrongCommand,
+  wrapInBlockquoteCommand,
 } from '@milkdown/preset-commonmark'
+import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'
 import { callCommand } from '@milkdown/utils'
 import { editorViewCtx } from '@milkdown/core'
 
@@ -29,7 +31,17 @@ export const useCommands = () => {
     e.preventDefault()
     get()!.action(callCommand(toggleEmphasisCommand.key))
   }
+  const toggleStrikeThrough = (e: Event) => {
+    if (loading.value) return
+    e.preventDefault()
+    get()!.action(callCommand(toggleStrikethroughCommand.key))
+  }
 
+  const wrapInBlockQuote = (e: Event) => {
+    if (loading.value) return
+    e.preventDefault()
+    get()!.action(callCommand(wrapInBlockquoteCommand.key))
+  }
   const addCodeBlock = (e: Event) => {
     if (loading.value) return
     e.preventDefault()
@@ -43,5 +55,12 @@ export const useCommands = () => {
     })
   }
 
-  return { toggleBold, addCodeBlock, toggleInlineCode, toggleItalic }
+  return {
+    toggleBold,
+    toggleInlineCode,
+    toggleItalic,
+    toggleStrikeThrough,
+    wrapInBlockQuote,
+    addCodeBlock,
+  }
 }