add experiment demos

demos/src/Experiments/GenericFigure/Vue/figure.ts

@@ -0,0 +1,56 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { Plugin } from 'prosemirror-state'
+
+export const Figure = Node.create({
+  name: 'figure',
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  group: 'block',
+
+  content: 'block figcaption',
+
+  draggable: true,
+
+  isolating: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: `figure[data-type="${this.name}"]`,
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figure', mergeAttributes(HTMLAttributes, { 'data-type': this.name }), 0]
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            // prevent dragging nodes out of the figure
+            dragstart: (view, event) => {
+              if (!event.target) {
+                return false
+              }
+
+              const pos = view.posAtDOM(event.target as HTMLElement, 0)
+              const $pos = view.state.doc.resolve(pos)
+
+              if ($pos.parent.type === this.type) {
+                event.preventDefault()
+              }
+
+              return false
+            },
+          },
+        },
+      }),
+    ]
+  },
+})