Add Drop&Drag Block

package.json

@@ -13,8 +13,10 @@
     "@milkdown/ctx": "^7.1.0",
     "@milkdown/plugin-block": "^7.1.0",
     "@milkdown/plugin-clipboard": "^7.1.0",
+    "@milkdown/plugin-cursor": "^7.1.0",
     "@milkdown/plugin-emoji": "^7.1.0",
     "@milkdown/plugin-history": "^7.1.0",
+    "@milkdown/plugin-indent": "^7.1.0",
     "@milkdown/plugin-math": "^7.1.0",
     "@milkdown/plugin-slash": "^7.1.0",
     "@milkdown/plugin-tooltip": "^7.1.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@milkdown/plugin-cursor': ^7.1.0
   '@milkdown/plugin-emoji': ^7.1.0
   '@milkdown/plugin-history': ^7.1.0
+  '@milkdown/plugin-indent': ^7.1.0
   '@milkdown/plugin-math': ^7.1.0
   '@milkdown/plugin-slash': ^7.1.0
   '@milkdown/plugin-tooltip': ^7.1.0
@@ -38,6 +39,7 @@ dependencies:
   '@milkdown/plugin-cursor': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-emoji': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-history': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
+  '@milkdown/plugin-indent': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-math': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-slash': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
   '@milkdown/plugin-tooltip': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
@@ -578,6 +580,22 @@ packages:
       - '@milkdown/transformer'
     dev: false
 
+  /@milkdown/plugin-indent/7.1.0_732s7te4rg2orop6g3xf7k4a4q:
+    resolution: {integrity: sha512-MewdgU7U+fahrWQalhCRacJ1cDJHLLFzIAwccums1utiOmlwcpFs8r2dVAdjt9+4sTVTGou3mVAv2rW9cTuOMA==}
+    peerDependencies:
+      '@milkdown/core': ^7.0.0-next.0
+      '@milkdown/ctx': ^7.0.0-next.0
+      '@milkdown/prose': ^7.0.0-next.0
+    dependencies:
+      '@milkdown/core': 7.1.0_c3r5dnopq2fkbj274fowd6pqe4
+      '@milkdown/ctx': 7.1.0
+      '@milkdown/prose': 7.1.0
+      '@milkdown/utils': 7.1.0_732s7te4rg2orop6g3xf7k4a4q
+      tslib: 2.5.0
+    transitivePeerDependencies:
+      - '@milkdown/transformer'
+    dev: false
+
   /@milkdown/plugin-math/7.1.0_732s7te4rg2orop6g3xf7k4a4q:
     resolution: {integrity: sha512-eYgjGreYgbqf6O6e/BoBD5jbYP/EmUwIWpeRLBurEPjFPPdtROYoUu++iDzkZto9bc4SKsY7nqcfQHfWtQZlUQ==}
     peerDependencies:

src/components/Milkdown/Block.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { BlockProvider } from '@milkdown/plugin-block'
+import { useInstance } from '@milkdown/vue'
+import { usePluginViewContext } from '@prosemirror-adapter/vue'
+import { onUnmounted, ref, watch } from 'vue'
+
+import type { VNodeRef } from 'vue'
+const { view } = usePluginViewContext()
+const [loading, get] = useInstance()
+
+const divRef = ref<VNodeRef>()
+
+let tooltipProvider: BlockProvider | undefined
+
+watch([loading], () => {
+  const editor = get()
+  if (loading.value || !editor || tooltipProvider) return
+
+  editor.action((ctx) => {
+    tooltipProvider = new BlockProvider({
+      ctx,
+      content: divRef.value as any,
+    })
+
+    tooltipProvider.update(view.value)
+  })
+})
+
+watch([view], () => {
+  tooltipProvider?.update(view.value)
+})
+
+onUnmounted(() => {
+  tooltipProvider?.destroy()
+  tooltipProvider = undefined
+})
+</script>
+
+<template>
+  <div
+    ref="divRef"
+    className="w-6 bg-slate-200 rounded hover:bg-slate-300 cursor-grab"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="{1.5}"
+      stroke="currentColor"
+      className="w-6 h-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
+      />
+    </svg>
+  </div>
+</template>

src/components/Milkdown/Editor.vue

@@ -10,15 +10,17 @@ import { usePluginViewFactory } from '@prosemirror-adapter/vue'
 import { gfm } from '@milkdown/preset-gfm'
 import { clipboard } from '@milkdown/plugin-clipboard'
 import { emoji } from '@milkdown/plugin-emoji'
+import { block } from '@milkdown/plugin-block'
+import { cursor } from '@milkdown/plugin-cursor'
 
 import Tooltip from './Tooltip.vue'
 import Slash from './Slash.vue'
+import Block from './Block.vue'
 
 const tooltip = tooltipFactory('Text')
 const slash = tooltipFactory('Text')
 
 const markdown = `# Milkdown Vue Commonmark
-
 > You're scared of a world where you're needed.
 
 This is a demo for using Milkdown with **Vue**.`
@@ -41,6 +43,11 @@ useEditor((root) => {
           component: Slash,
         }),
       })
+      ctx.set(block.key, {
+        view: pluginViewFactory({
+          component: Block,
+        }),
+      })
     })
     .use(commonmark)
     .use(tooltip)
@@ -50,6 +57,8 @@ useEditor((root) => {
     .use(gfm)
     .use(clipboard)
     .use(emoji)
+    .use(block)
+    .use(cursor)
 })
 </script>