From d21d556150346f2faafb44e11b23d0d66b67b1e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 3 Jun 2021 15:10:27 +0200
Subject: [PATCH] docs: add figure button

---
 docs/src/demos/Experiments/Figure/figure.ts | 30 ++++++++++++++++-----
 docs/src/demos/Experiments/Figure/index.vue | 18 +++++++++++++
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/docs/src/demos/Experiments/Figure/figure.ts b/docs/src/demos/Experiments/Figure/figure.ts
index 22aee5b2..ceb227dc 100644
--- a/docs/src/demos/Experiments/Figure/figure.ts
+++ b/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()
       },
     }
   },
diff --git a/docs/src/demos/Experiments/Figure/index.vue b/docs/src/demos/Experiments/Figure/index.vue
index 6e593e84..1319f19b 100644
--- a/docs/src/demos/Experiments/Figure/index.vue
+++ b/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: [