From a1f1125c1a903e804925cd5c527523f99944f20d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 28 Jul 2021 11:22:57 +0200
Subject: [PATCH] docs: add buttons for adding and removing generic figures

---
 .../demos/Experiments/GenericFigure/index.vue | 120 +++++++++++++++++-
 1 file changed, 119 insertions(+), 1 deletion(-)

diff --git a/docs/src/demos/Experiments/GenericFigure/index.vue b/docs/src/demos/Experiments/GenericFigure/index.vue
index ff3e80bb..ad20d24e 100644
--- a/docs/src/demos/Experiments/GenericFigure/index.vue
+++ b/docs/src/demos/Experiments/GenericFigure/index.vue
@@ -1,5 +1,19 @@
 <template>
-  <editor-content :editor="editor" />
+  <div v-if="editor">
+    <button @click="addCapturedTable">
+      add table
+    </button>
+    <button @click="addCapturedImage">
+      add image
+    </button>
+    <button @click="removeCapturedTable">
+      remove table
+    </button>
+    <button @click="removeCapturedImage">
+      remove image
+    </button>
+    <editor-content :editor="editor" />
+  </div>
 </template>
 
 <script>
@@ -34,6 +48,110 @@ export default {
     }
   },
 
+  methods: {
+    addCapturedImage() {
+      this.editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: 'capturedImage',
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                src: 'https://source.unsplash.com/K9QHL52rE2k/800x400',
+              },
+            },
+            {
+              type: 'figcaption',
+              content: [
+                {
+                  type: 'text',
+                  text: 'image caption',
+                },
+              ],
+            },
+          ],
+        })
+        .run()
+    },
+
+    addCapturedTable() {
+      this.editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: 'capturedTable',
+          content: [
+            {
+              type: 'table',
+              content: [
+                {
+                  type: 'tableRow',
+                  content: [
+                    {
+                      type: 'tableCell',
+                      content: [
+                        {
+                          type: 'paragraph',
+                          content: [
+                            {
+                              type: 'text',
+                              text: 'cell 1',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                    {
+                      type: 'tableCell',
+                      content: [
+                        {
+                          type: 'paragraph',
+                          content: [
+                            {
+                              type: 'text',
+                              text: 'cell 2',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'figcaption',
+              content: [
+                {
+                  type: 'text',
+                  text: 'table caption',
+                },
+              ],
+            },
+          ],
+        })
+        .run()
+    },
+
+    removeCapturedTable() {
+      this.editor
+        .chain()
+        .focus()
+        .deleteNode('capturedTable')
+        .run()
+    },
+
+    removeCapturedImage() {
+      this.editor
+        .chain()
+        .focus()
+        .deleteNode('capturedImage')
+        .run()
+    },
+  },
+
   mounted() {
     this.editor = new Editor({
       extensions: [