Refactor Editor

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/utils/utils.ts

@@ -7,9 +7,8 @@ import {
   toggleStrongCommand,
 } from '@milkdown/preset-commonmark'
 
-const [loading, get] = useInstance()
-
 export const addCodeBlock = (e: Event) => {
+  const [loading, get] = useInstance()
   if (loading.value) return
   e.preventDefault()
 
@@ -24,7 +23,9 @@ export const addCodeBlock = (e: Event) => {
 }
 
 export const toggleBold = (e: Event) => {
+  const [loading, get] = useInstance()
   if (loading.value) return
   e.preventDefault()
+
   get()!.action(callCommand(toggleStrongCommand.key))
 }