diff --git a/src/components/Milkdown/Slash.vue b/src/components/Milkdown/Slash.vue
index 2ea523a..9b890a1 100644
--- a/src/components/Milkdown/Slash.vue
+++ b/src/components/Milkdown/Slash.vue
@@ -1,20 +1,15 @@
 <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()
-const [loading, get] = useInstance()
-
-const divRef = ref<VNodeRef>()
+import { addCodeBlock } from '../../utils/utils'
 
 let tooltipProvider: SlashProvider
 
+const { view, prevState } = usePluginViewContext()
+const divRef = ref<VNodeRef>()
+
 onMounted(() => {
   tooltipProvider = new SlashProvider({
     content: divRef.value as any,
@@ -30,21 +25,6 @@ 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>
diff --git a/src/components/Milkdown/Tooltip.vue b/src/components/Milkdown/Tooltip.vue
index c5e0a13..fbe0d17 100644
--- a/src/components/Milkdown/Tooltip.vue
+++ b/src/components/Milkdown/Tooltip.vue
@@ -1,20 +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 { usePluginViewContext } from '@prosemirror-adapter/vue'
 import type { VNodeRef } from 'vue'
-
-const { view, prevState } = usePluginViewContext()
-const [loading, get] = useInstance()
-
-const divRef = ref<VNodeRef>()
+import { toggleBold } from '../../utils/utils'
 
 let tooltipProvider: TooltipProvider
 
+const { view, prevState } = usePluginViewContext()
+const divRef = ref<VNodeRef>()
+
 onMounted(() => {
   tooltipProvider = new TooltipProvider({
     content: divRef.value as any,
@@ -30,12 +25,6 @@ watch([view, prevState], () => {
 onUnmounted(() => {
   tooltipProvider.destroy()
 })
-
-const toggleBold = (e: Event) => {
-  if (loading.value) return
-  e.preventDefault()
-  get()!.action(callCommand(toggleStrongCommand.key))
-}
 </script>
 
 <template>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e69de29..1d9459e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -0,0 +1,30 @@
+/* eslint-disable antfu/if-newline */
+import { useInstance } from '@milkdown/vue'
+import { editorViewCtx } from '@milkdown/core'
+import { callCommand } from '@milkdown/utils'
+import {
+  createCodeBlockCommand,
+  toggleStrongCommand,
+} from '@milkdown/preset-commonmark'
+
+const [loading, get] = useInstance()
+
+export 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)
+  })
+}
+
+export const toggleBold = (e: Event) => {
+  if (loading.value) return
+  e.preventDefault()
+  get()!.action(callCommand(toggleStrongCommand.key))
+}