From be776e09f9d4300f63ec8ce76bde5124988c50d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 4 Jun 2021 15:06:36 +0200
Subject: [PATCH] add imageToFigure command for figure experiment

---
 docs/src/demos/Experiments/Figure/figure.ts | 55 +++++++++++++++++++++
 docs/src/demos/Experiments/Figure/index.vue | 14 +++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/docs/src/demos/Experiments/Figure/figure.ts b/docs/src/demos/Experiments/Figure/figure.ts
index e5628295..8ed8db80 100644
--- a/docs/src/demos/Experiments/Figure/figure.ts
+++ b/docs/src/demos/Experiments/Figure/figure.ts
@@ -3,6 +3,10 @@ import {
   Node,
   nodeInputRule,
   mergeAttributes,
+  findChildrenInRange,
+  isNodeSelection,
+  Predicate,
+  NodeWithPos,
 } from '@tiptap/core'
 
 export interface FigureOptions {
@@ -21,6 +25,16 @@ declare module '@tiptap/core' {
         title?: string,
         caption?: string,
       }) => Command,
+
+      /**
+       * Converts an image to a figure
+       */
+      imageToFigure: () => Command,
+
+      /**
+       * Converts a figure to an image
+       */
+      figureToImage: () => Command,
     }
   }
 }
@@ -52,6 +66,7 @@ export const Figure = Node.create<FigureOptions>({
           }
         },
       },
+
       alt: {
         default: null,
         parseHTML: element => {
@@ -60,6 +75,7 @@ export const Figure = Node.create<FigureOptions>({
           }
         },
       },
+
       title: {
         default: null,
         parseHTML: element => {
@@ -108,6 +124,45 @@ export const Figure = Node.create<FigureOptions>({
           })
           .run()
       },
+
+      imageToFigure: () => ({ tr }) => {
+        const { doc, selection } = tr
+        const nodes: NodeWithPos[] = []
+        const predicate: Predicate = node => node.type.name === 'image'
+
+        if (isNodeSelection(selection)) {
+          const node = doc.nodeAt(selection.from)
+
+          if (!node || !predicate(node)) {
+            return false
+          }
+
+          nodes.push({ node, pos: selection.from })
+        } else {
+          const range = {
+            from: selection.from,
+            to: selection.to,
+          }
+
+          nodes.push(...findChildrenInRange(doc, range, predicate))
+        }
+
+        nodes.forEach(({ node, pos }, index) => {
+          const mappedPos = tr.steps
+            .slice(tr.steps.length - index)
+            .reduce((newPos, step) => step.getMap().map(newPos), pos)
+
+          tr.replaceRangeWith(mappedPos, mappedPos + node.nodeSize, this.type.create({
+            src: node.attrs.src,
+          }))
+        })
+
+        return true
+      },
+
+      figureToImage: () => () => {
+        return true
+      },
     }
   },
 
diff --git a/docs/src/demos/Experiments/Figure/index.vue b/docs/src/demos/Experiments/Figure/index.vue
index 1319f19b..37af2a68 100644
--- a/docs/src/demos/Experiments/Figure/index.vue
+++ b/docs/src/demos/Experiments/Figure/index.vue
@@ -3,6 +3,12 @@
     <button @click="addFigure">
       figure
     </button>
+    <button @click="editor.chain().focus().imageToFigure().run()">
+      image to figure
+    </button>
+    <button @click="editor.chain().focus().figureToImage().run()">
+      figure to image
+    </button>
     <editor-content :editor="editor" />
 
     <h2>HTML</h2>
@@ -13,6 +19,7 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import StarterKit from '@tiptap/starter-kit'
+import Image from '@tiptap/extension-image'
 import { Figure } from './figure'
 
 export default {
@@ -46,6 +53,7 @@ export default {
       extensions: [
         StarterKit,
         Figure,
+        Image,
       ],
       content: `
         <p>Figure + Figcaption</p>
@@ -55,6 +63,9 @@ export default {
             <p>Amazing caption</p>
           </figcaption>
         </figure>
+        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
+        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400">
+        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
         <p>That’s it.</p>
       `,
     })
@@ -90,7 +101,8 @@ export default {
     }
 
     img {
-      max-width: 100%;
+      display: block;
+      max-width: min(100%, 25rem);
       height: auto;
       border-radius: 0.5rem;
     }