add generic figure experiment

docs/src/demos/Experiments/GenericFigure/figcaption.ts

@@ -0,0 +1,27 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export const Figcaption = Node.create({
+  name: 'figcaption',
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  content: 'inline*',
+
+  selectable: false,
+
+  draggable: false,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figcaption',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figcaption', mergeAttributes(HTMLAttributes), 0]
+  },
+})

docs/src/demos/Experiments/GenericFigure/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
+            },
+          },
+        },
+      }),
+    ]
+  },
+})

docs/src/demos/Experiments/GenericFigure/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+import Image from '@tiptap/extension-image'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import { Figure } from './figure'
+import { Figcaption } from './figcaption'
+
+const ImageFigure = Figure.extend({
+  name: 'capturedImage',
+  content: 'image figcaption',
+})
+
+const TableFigure = Figure.extend({
+  name: 'capturedTable',
+  content: 'table figcaption',
+})
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        Table,
+        TableRow,
+        TableHeader,
+        TableCell,
+        ImageFigure,
+        TableFigure,
+        Figcaption,
+        Image,
+      ],
+      content: `
+        <p>Some text</p>
+        <figure data-type="capturedImage">
+          <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
+          <figcaption>
+            Image caption
+          </figcaption>
+        </figure>
+        <p>Some text</p>
+        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
+        <p>Some text</p>
+        <figure data-type="capturedTable">
+          <table>
+            <tbody>
+              <tr>
+                <th>Name</th>
+                <th colspan="3">Description</th>
+              </tr>
+              <tr>
+                <td>Cyndi Lauper</td>
+                <td>singer</td>
+                <td>songwriter</td>
+                <td>actress</td>
+              </tr>
+              <tr>
+                <td>Philipp Kühn</td>
+                <td>designer</td>
+                <td>developer</td>
+                <td>maker</td>
+              </tr>
+              <tr>
+                <td>Hans Pagel</td>
+                <td>wrote this</td>
+                <td colspan="2">that’s it</td>
+              </tr>
+            </tbody>
+          </table>
+          <figcaption>
+            Table caption
+          </figcaption>
+        </figure>
+        <p>Some text</p>
+        <table>
+          <tbody>
+            <tr>
+              <th>Name</th>
+              <th colspan="3">Description</th>
+            </tr>
+            <tr>
+              <td>Cyndi Lauper</td>
+              <td>singer</td>
+              <td>songwriter</td>
+              <td>actress</td>
+            </tr>
+            <tr>
+              <td>Philipp Kühn</td>
+              <td>designer</td>
+              <td>developer</td>
+              <td>maker</td>
+            </tr>
+            <tr>
+              <td>Hans Pagel</td>
+              <td>wrote this</td>
+              <td colspan="2">that’s it</td>
+            </tr>
+          </tbody>
+        </table>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+
+    figure {
+      max-width: 25rem;
+      border: 3px solid #0D0D0D;
+      border-radius: 0.5rem;
+      margin: 1rem 0;
+      padding: 0.5rem;
+    }
+
+    figcaption {
+      margin-top: 0.25rem;
+      text-align: center;
+      padding: 0.5rem;
+      border: 2px dashed #0D0D0D20;
+      border-radius: 0.5rem;
+    }
+
+    img {
+      display: block;
+      max-width: min(100%, 25rem);
+      height: auto;
+      border-radius: 0.5rem;
+    }
+
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+
+      td,
+      th {
+        min-width: 1em;
+        border: 2px solid #ced4da;
+        padding: 3px 5px;
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        font-weight: bold;
+        text-align: left;
+        background-color: #f1f3f5;
+      }
+
+      .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: "";
+        left: 0; right: 0; top: 0; bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+      }
+
+      .column-resize-handle {
+        position: absolute;
+        right: -2px;
+        top: 0;
+        bottom: -2px;
+        width: 4px;
+        background-color: #adf;
+        pointer-events: none;
+      }
+    }
+  }
+}
+</style>

docs/src/docPages/experiments.md

@@ -5,6 +5,7 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
 * [Linter](/experiments/linter)
 * [Content of multiple editors in a single Y.js](/experiments/multiple-editors)
 * [Global drag handle](/experiments/global-drag-handle)
+* [Generic Figure](/experiments/generic-figure)
 
 ## Experimental extensions
 * [@tiptap/extension-command-menu](/experiments/commands)

docs/src/docPages/experiments/generic-figure.md

@@ -0,0 +1,5 @@
+# GenericFigure
+
+⚠️ Experiment
+
+<demo name="Experiments/GenericFigure" />