Add gfm & Fix Tooltip

package.json

@@ -19,6 +19,7 @@
     "@milkdown/plugin-slash": "^7.1.0",
     "@milkdown/plugin-tooltip": "^7.1.0",
     "@milkdown/preset-commonmark": "^7.1.0",
+    "@milkdown/preset-gfm": "^7.1.0",
     "@milkdown/prose": "^7.1.0",
     "@milkdown/theme-nord": "^7.1.0",
     "@milkdown/transformer": "^7.1.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   '@milkdown/plugin-slash': ^7.1.0
   '@milkdown/plugin-tooltip': ^7.1.0
   '@milkdown/preset-commonmark': ^7.1.0
+  '@milkdown/preset-gfm': ^7.1.0
   '@milkdown/prose': ^7.1.0
   '@milkdown/theme-nord': ^7.1.0
   '@milkdown/transformer': ^7.1.0
@@ -39,6 +40,7 @@ dependencies:
   '@milkdown/plugin-slash': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-tooltip': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/preset-commonmark': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
+  '@milkdown/preset-gfm': 7.1.0_s4gkqlm2kzzymfckug7bkebyd4
   '@milkdown/prose': 7.1.0
   '@milkdown/theme-nord': 7.1.0_fnri332nzjq6erd5dndce6khhq
   '@milkdown/transformer': 7.1.0_@milkdown+prose@7.1.0
@@ -631,6 +633,28 @@ packages:
       - '@milkdown/transformer'
     dev: false
 
+  /@milkdown/preset-gfm/7.1.0_s4gkqlm2kzzymfckug7bkebyd4:
+    resolution: {integrity: sha512-ggqdItgW6N2r4SWabyurgKiRUAsgcBLaVBLQUSSAz9VHh5lTVOr/ZzHrzFASU3+4l+G4xSHAL4/pFJw3NUNpiQ==}
+    peerDependencies:
+      '@milkdown/core': ^7.0.0-next.0
+      '@milkdown/ctx': ^7.0.0-next.0
+      '@milkdown/preset-commonmark': ^7.0.0-next.0
+      '@milkdown/prose': ^7.0.0-next.0
+      '@milkdown/transformer': ^7.0.0-next.0
+    dependencies:
+      '@milkdown/core': 7.1.0_c3r5dnopq2fkbj274fowd6pqe4
+      '@milkdown/ctx': 7.1.0
+      '@milkdown/exception': 7.1.0
+      '@milkdown/preset-commonmark': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
+      '@milkdown/prose': 7.1.0
+      '@milkdown/transformer': 7.1.0_@milkdown+prose@7.1.0
+      '@milkdown/utils': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
+      remark-gfm: 3.0.1
+      tslib: 2.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@milkdown/prose/7.1.0:
     resolution: {integrity: sha512-hEXTNh90cNIQw9LUt1uiNSKxqRtUb9G/X+YyndxOtBgLjmLAqNVvIPITbCoGNonbYA6CXQz7aWmry/vZfOhgaw==}
     dependencies:
@@ -1295,6 +1319,10 @@ packages:
       upper-case-first: 2.0.2
     dev: false
 
+  /ccount/2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+    dev: false
+
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1694,6 +1722,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /escape-string-regexp/5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /eslint-import-resolver-node/0.3.7:
     resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
     dependencies:
@@ -2747,6 +2780,10 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /markdown-table/3.0.3:
+    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
+    dev: false
+
   /masto/5.10.0:
     resolution: {integrity: sha512-RlTw3X2b2ipkcgsgoKEWKKFNYkpAlUtJhNOFKwBKWEBv+we/ZupQbnerGOJssB5rs7ig4HWWsZZHLtNeFdYQTQ==}
     dependencies:
@@ -2771,6 +2808,15 @@ packages:
       unist-util-visit: 4.1.2
     dev: false
 
+  /mdast-util-find-and-replace/2.2.2:
+    resolution: {integrity: sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      escape-string-regexp: 5.0.0
+      unist-util-is: 5.2.1
+      unist-util-visit-parents: 5.1.3
+    dev: false
+
   /mdast-util-from-markdown/0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
@@ -2802,6 +2848,62 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-gfm-autolink-literal/1.0.3:
+    resolution: {integrity: sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      ccount: 2.0.1
+      mdast-util-find-and-replace: 2.2.2
+      micromark-util-character: 1.1.0
+    dev: false
+
+  /mdast-util-gfm-footnote/1.0.2:
+    resolution: {integrity: sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-to-markdown: 1.5.0
+      micromark-util-normalize-identifier: 1.0.0
+    dev: false
+
+  /mdast-util-gfm-strikethrough/1.0.3:
+    resolution: {integrity: sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-to-markdown: 1.5.0
+    dev: false
+
+  /mdast-util-gfm-table/1.0.7:
+    resolution: {integrity: sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      markdown-table: 3.0.3
+      mdast-util-from-markdown: 1.3.0
+      mdast-util-to-markdown: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-gfm-task-list-item/1.0.2:
+    resolution: {integrity: sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-to-markdown: 1.5.0
+    dev: false
+
+  /mdast-util-gfm/2.0.2:
+    resolution: {integrity: sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==}
+    dependencies:
+      mdast-util-from-markdown: 1.3.0
+      mdast-util-gfm-autolink-literal: 1.0.3
+      mdast-util-gfm-footnote: 1.0.2
+      mdast-util-gfm-strikethrough: 1.0.3
+      mdast-util-gfm-table: 1.0.7
+      mdast-util-gfm-task-list-item: 1.0.2
+      mdast-util-to-markdown: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-math/2.0.2:
     resolution: {integrity: sha512-8gmkKVp9v6+Tgjtq6SYx9kGPpTf6FVYRa53/DLh479aldR9AyP48qeVOgNZ5X7QUK7nOy4yw7vg6mbiGcs9jWQ==}
     dependencies:
@@ -2866,6 +2968,79 @@ packages:
       uvu: 0.5.6
     dev: false
 
+  /micromark-extension-gfm-autolink-literal/1.0.3:
+    resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-sanitize-uri: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-gfm-footnote/1.0.4:
+    resolution: {integrity: sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==}
+    dependencies:
+      micromark-core-commonmark: 1.0.6
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-normalize-identifier: 1.0.0
+      micromark-util-sanitize-uri: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-gfm-strikethrough/1.0.4:
+    resolution: {integrity: sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==}
+    dependencies:
+      micromark-util-chunked: 1.0.0
+      micromark-util-classify-character: 1.0.0
+      micromark-util-resolve-all: 1.0.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-gfm-table/1.0.5:
+    resolution: {integrity: sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==}
+    dependencies:
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-gfm-tagfilter/1.0.1:
+    resolution: {integrity: sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==}
+    dependencies:
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-extension-gfm-task-list-item/1.0.3:
+    resolution: {integrity: sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==}
+    dependencies:
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-gfm/2.0.1:
+    resolution: {integrity: sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==}
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 1.0.3
+      micromark-extension-gfm-footnote: 1.0.4
+      micromark-extension-gfm-strikethrough: 1.0.4
+      micromark-extension-gfm-table: 1.0.5
+      micromark-extension-gfm-tagfilter: 1.0.1
+      micromark-extension-gfm-task-list-item: 1.0.3
+      micromark-util-combine-extensions: 1.0.0
+      micromark-util-types: 1.0.2
+    dev: false
+
   /micromark-extension-math/2.0.2:
     resolution: {integrity: sha512-cFv2B/E4pFPBBFuGgLHkkNiFAIQv08iDgPH2HCuR2z3AUgMLecES5Cq7AVtwOtZeRrbA80QgMUk8VVW0Z+D2FA==}
     dependencies:
@@ -3592,6 +3767,17 @@ packages:
       jsesc: 0.5.0
     dev: true
 
+  /remark-gfm/3.0.1:
+    resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-gfm: 2.0.2
+      micromark-extension-gfm: 2.0.1
+      unified: 10.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /remark-inline-links/6.0.1:
     resolution: {integrity: sha512-etdk1A0kRs+bXtT41XEFfyePOu583cmuHDF8bhAUfHJeCAPbPZpqmqZHD/wLhijIJV3ldjIvO4irM0jRGb1Dhg==}
     dependencies:

src/components/Milkdown/Editor.vue

@@ -2,13 +2,17 @@
 import { Editor, defaultValueCtx, rootCtx } from '@milkdown/core'
 import { commonmark } from '@milkdown/preset-commonmark'
 import { nord } from '@milkdown/theme-nord'
-// import { history } from '@milkdown/plugin-history'
+import { history } from '@milkdown/plugin-history'
-// import { math } from '@milkdown/plugin-math'
+import { math } from '@milkdown/plugin-math'
 import { Milkdown, useEditor } from '@milkdown/vue'
 import { tooltipFactory } from '@milkdown/plugin-tooltip'
 import { usePluginViewFactory } from '@prosemirror-adapter/vue'
+import { gfm } from '@milkdown/preset-gfm'
 import Tooltip from './Tooltip.vue'
+import Slash from './Slash.vue'
+
 const tooltip = tooltipFactory('Text')
+const slash = tooltipFactory('Text')
 
 const markdown = `# Milkdown Vue Commonmark
 
@@ -29,9 +33,18 @@ useEditor((root) => {
           component: Tooltip,
         }),
       })
+      ctx.set(slash.key, {
+        view: pluginViewFactory({
+          component: Slash,
+        }),
+      })
     })
     .use(commonmark)
     .use(tooltip)
+    .use(slash)
+    .use(history)
+    .use(math)
+    .use(gfm)
 })
 </script>
 

src/components/Milkdown/Slash.vue

@@ -0,0 +1,59 @@
+<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 type { VNodeRef } from 'vue'
+const { view, prevState } = usePluginViewContext()
+const [loading, get] = useInstance()
+
+const divRef = ref<VNodeRef>()
+
+let tooltipProvider: SlashProvider
+
+onMounted(() => {
+  tooltipProvider = new SlashProvider({
+    content: divRef.value as any,
+  })
+
+  tooltipProvider.update(view.value, prevState.value)
+})
+
+watch([view, prevState], () => {
+  tooltipProvider?.update(view.value, prevState.value)
+})
+
+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>
+  <div ref="divRef">
+    <button
+      className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
+      @mousedown="addCodeBlock"
+    >
+      Code Block
+    </button>
+  </div>
+</template>