docs: add figure button

docs/src/demos/Experiments/Figure/figure.ts

@@ -15,7 +15,12 @@ declare module '@tiptap/core' {
       /**
        * Add a figure element
        */
-      setFigure: (options: { src: string, alt?: string, title?: string }) => Command,
+      setFigure: (options: {
+        src: string,
+        alt?: string,
+        title?: string,
+        caption?: string,
+      }) => Command,
     }
   }
 }
@@ -86,11 +91,24 @@ export const Figure = Node.create<FigureOptions>({
 
   addCommands() {
     return {
-      setFigure: options => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options,
-        })
+      setFigure: ({ caption, ...attrs }) => ({ chain }) => {
+        return chain()
+          .insertContent({
+            type: this.name,
+            attrs,
+            content: [
+              {
+                type: 'text',
+                text: caption,
+              },
+            ],
+          })
+          // try to set cursor within caption field
+          // but this fails when inserting at an empty document
+          // .command(({ tr, commands }) => {
+          //   return commands.setTextSelection(tr.selection.$from.before() - 1)
+          // })
+          .run()
       },
     }
   },

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

@@ -1,5 +1,8 @@
 <template>
   <div v-if="editor">
+    <button @click="addFigure">
+      figure
+    </button>
     <editor-content :editor="editor" />
 
     <h2>HTML</h2>
@@ -23,6 +26,21 @@ export default {
     }
   },
 
+  methods: {
+    addFigure() {
+      const url = window.prompt('URL')
+      const caption = window.prompt('caption')
+
+      if (url) {
+        this.editor
+          .chain()
+          .focus()
+          .setFigure({ src: url, caption })
+          .run()
+      }
+    },
+  },
+
   mounted() {
     this.editor = new Editor({
       extensions: [