From 3a776a970422427cdc76cbf1a82f8a1be216dc78 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Sun, 26 Sep 2021 16:40:11 +0100
Subject: [PATCH 1/9] Support replacing built-in Bard TipTap extensions

---
 resources/js/components/Bard.js               | 25 +++++++++++++++++--
 .../fieldtypes/bard/BardFieldtype.vue         | 20 ++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js
index 0c9714b0fc2..6078fc79ada 100644
--- a/resources/js/components/Bard.js
+++ b/resources/js/components/Bard.js
@@ -1,24 +1,45 @@
 import * as core from 'tiptap';
 import * as commands from 'tiptap-commands';
 import * as utils from 'tiptap-utils';
+import * as extensions from 'tiptap-extensions';
+import Link from './fieldtypes/bard/Link';
+import Image from './fieldtypes/bard/Image';
+import Subscript from './fieldtypes/bard/Subscript';
+import Superscript from './fieldtypes/bard/Superscript';
 
 class Bard {
     constructor(instance) {
         this.instance = instance;
         this.extensionCallbacks = [];
-        this.buttonCallbacks = [];
+        this.extensionReplacementCallbacks = [];
+        this.buttonCallbacks = [];        
     }
 
     extend(callback) {
         this.extensionCallbacks.push(callback);
     }
 
+    extendReplace(callback) {
+        this.extensionReplacementCallbacks.push(callback);
+    }
+
     buttons(callback) {
         this.buttonCallbacks.push(callback);
     }
 
     get tiptap() {
-        return { core, commands, utils };
+        return {
+            core,
+            commands,
+            utils,
+            extensions: {
+                ...extensions,
+                Link,
+                Image,
+                Subscript,
+                Superscript,
+            },
+         };
     }
 }
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index cdcbd01da2d..25d1d84f4a6 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -89,7 +89,7 @@
 
 <script>
 import uniqid from 'uniqid';
-import { Editor, EditorContent, EditorMenuBar, EditorFloatingMenu, EditorMenuBubble } from 'tiptap';
+import { Editor, EditorContent, EditorMenuBar, EditorFloatingMenu, EditorMenuBubble, Paragraph } from 'tiptap';
 import {
     Blockquote,
     CodeBlock,
@@ -469,11 +469,15 @@ export default {
             let exts = [
                 new Doc(),
                 new Set({ bard: this }),
+                new Paragraph(),
                 new HardBreak(),
                 new History()
             ];
 
             let btns = this.buttons.map(button => button.name);
+            
+            let languages = { javascript, css };
+            let levels = [];
 
             if (btns.includes('anchor')) exts.push(new Link({ vm: this }));
             if (btns.includes('quote')) exts.push(new Blockquote());
@@ -496,7 +500,7 @@ export default {
             if (btns.includes('codeblock') || btns.includes('code')) {
                 if (btns.includes('code')) exts.push(new Code());
                 if (btns.includes('codeblock')) exts.push(new CodeBlock());
-                exts.push(new CodeBlockHighlight({ languages: { javascript, css }}));
+                exts.push(new CodeBlockHighlight({ languages }));
             }
 
             if (btns.includes('table')) {
@@ -515,7 +519,6 @@ export default {
                 btns.includes('h5') ||
                 btns.includes('h6')
             ) {
-                let levels = [];
                 if (btns.includes('h1')) levels.push(1);
                 if (btns.includes('h2')) levels.push(2);
                 if (btns.includes('h3')) levels.push(3);
@@ -525,6 +528,17 @@ export default {
                 exts.push(new Heading({ levels }));
             }
 
+            this.$bard.extensionReplacementCallbacks.forEach(callback => {
+                let returned = callback({ bard: this, mark, node, languages, levels });
+                let replaceExts = Array.isArray(returned[0]) ? returned : [returned];
+                replaceExts.forEach(([searchExt, replaceExt]) => {
+                    const index = exts.findIndex(ext => ext instanceof searchExt);
+                    if (index !== -1) {
+                        exts[index] = replaceExt;
+                    }
+                });
+            });
+            
             this.$bard.extensionCallbacks.forEach(callback => {
                 let returned = callback({ bard: this, mark, node });
                 exts = exts.concat(

From 574aa3896bd22fa6ac3054afb82c054828250c81 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Sun, 26 Sep 2021 18:49:12 +0100
Subject: [PATCH 2/9] Apply replacements after additions

---
 .../components/fieldtypes/bard/BardFieldtype.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 25d1d84f4a6..b9a8bb080a9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -527,10 +527,17 @@ export default {
                 if (btns.includes('h6')) levels.push(6);
                 exts.push(new Heading({ levels }));
             }
+            
+            this.$bard.extensionCallbacks.forEach(callback => {
+                let returned = callback({ bard: this, mark, node });
+                exts = exts.concat(
+                    Array.isArray(returned) ? returned : [returned]
+                );
+            });
 
             this.$bard.extensionReplacementCallbacks.forEach(callback => {
                 let returned = callback({ bard: this, mark, node, languages, levels });
-                let replaceExts = Array.isArray(returned[0]) ? returned : [returned];
+                let replaceExts = Array.isArray(returned[0] || []) ? returned : [returned];
                 replaceExts.forEach(([searchExt, replaceExt]) => {
                     const index = exts.findIndex(ext => ext instanceof searchExt);
                     if (index !== -1) {
@@ -538,13 +545,6 @@ export default {
                     }
                 });
             });
-            
-            this.$bard.extensionCallbacks.forEach(callback => {
-                let returned = callback({ bard: this, mark, node });
-                exts = exts.concat(
-                    Array.isArray(returned) ? returned : [returned]
-                );
-            });
 
             return exts;
         },

From 29c12bad466e2155a69ac6155585b8d72b8dd79b Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 27 Sep 2021 09:11:34 +0100
Subject: [PATCH 3/9] Remove whitespace

---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index b9a8bb080a9..573a8c78517 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -527,7 +527,7 @@ export default {
                 if (btns.includes('h6')) levels.push(6);
                 exts.push(new Heading({ levels }));
             }
-            
+
             this.$bard.extensionCallbacks.forEach(callback => {
                 let returned = callback({ bard: this, mark, node });
                 exts = exts.concat(

From 426a6d179e7df9f6fa70e6840d0ec07a9ad73b95 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 27 Sep 2021 09:16:47 +0100
Subject: [PATCH 4/9] Tidy up

---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 573a8c78517..21af91c3b8b 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -473,12 +473,12 @@ export default {
                 new HardBreak(),
                 new History()
             ];
-
-            let btns = this.buttons.map(button => button.name);
             
             let languages = { javascript, css };
             let levels = [];
 
+            let btns = this.buttons.map(button => button.name);
+
             if (btns.includes('anchor')) exts.push(new Link({ vm: this }));
             if (btns.includes('quote')) exts.push(new Blockquote());
             if (btns.includes('bold')) exts.push(new Bold());

From a191e65cf4220e7709beeb0cfd6c7dd28f258a87 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 23 Nov 2021 15:58:37 -0500
Subject: [PATCH 5/9] accept the extension name and provide it to the callback
 instead

---
 resources/js/components/Bard.js                   |  4 ++--
 .../components/fieldtypes/bard/BardFieldtype.vue  | 15 ++++++---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js
index 6078fc79ada..24c1ac88fa1 100644
--- a/resources/js/components/Bard.js
+++ b/resources/js/components/Bard.js
@@ -19,8 +19,8 @@ class Bard {
         this.extensionCallbacks.push(callback);
     }
 
-    extendReplace(callback) {
-        this.extensionReplacementCallbacks.push(callback);
+    replaceExtension(name, callback) {
+        this.extensionReplacementCallbacks.push({ name, callback });
     }
 
     buttons(callback) {
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index ce038d2a85c..c71332c6ce9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -536,15 +536,12 @@ export default {
                 );
             });
 
-            this.$bard.extensionReplacementCallbacks.forEach(callback => {
-                let returned = callback({ bard: this, mark, node, languages, levels });
-                let replaceExts = Array.isArray(returned[0] || []) ? returned : [returned];
-                replaceExts.forEach(([searchExt, replaceExt]) => {
-                    const index = exts.findIndex(ext => ext instanceof searchExt);
-                    if (index !== -1) {
-                        exts[index] = replaceExt;
-                    }
-                });
+            this.$bard.extensionReplacementCallbacks.forEach(({callback, name}) => {
+                let index = exts.findIndex(ext => ext.name === name);
+                if (index === -1) return;
+                let extension = exts[index];
+                let newExtension = callback({ bard: this, mark, node, extension });
+                exts[index] = newExtension;
             });
 
             return exts;

From c906ddfcd0a3747be2fa500d7ce924c93e1bd451 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 23 Nov 2021 15:58:54 -0500
Subject: [PATCH 6/9] revert a couple of things to make the pr diff smaller

---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index c71332c6ce9..1383e31416d 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -474,9 +474,6 @@ export default {
                 new HardBreak(),
                 new History()
             ];
-            
-            let languages = { javascript, css };
-            let levels = [];
 
             let btns = this.buttons.map(button => button.name);
 
@@ -501,7 +498,7 @@ export default {
             if (btns.includes('codeblock') || btns.includes('code')) {
                 if (btns.includes('code')) exts.push(new Code());
                 if (btns.includes('codeblock')) exts.push(new CodeBlock());
-                exts.push(new CodeBlockHighlight({ languages }));
+                exts.push(new CodeBlockHighlight({ languages: { javascript, css }}));
             }
 
             if (btns.includes('table')) {
@@ -520,6 +517,7 @@ export default {
                 btns.includes('h5') ||
                 btns.includes('h6')
             ) {
+                let levels = [];
                 if (btns.includes('h1')) levels.push(1);
                 if (btns.includes('h2')) levels.push(2);
                 if (btns.includes('h3')) levels.push(3);

From dc21762c7198137b872627da384d28efb2bd13ba Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 23 Nov 2021 15:59:38 -0500
Subject: [PATCH 7/9] rename extend to addExtension but keep it as an alias

---
 resources/js/components/Bard.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js
index 24c1ac88fa1..13c928c7d75 100644
--- a/resources/js/components/Bard.js
+++ b/resources/js/components/Bard.js
@@ -15,7 +15,12 @@ class Bard {
         this.buttonCallbacks = [];        
     }
 
+    /** @deprecated */
     extend(callback) {
+        this.addExtension(callback);
+    }
+
+    addExtension(callback) {
         this.extensionCallbacks.push(callback);
     }
 

From a0f83b36872194d038fc347bf76f2a3667e35976 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 23 Nov 2021 15:59:42 -0500
Subject: [PATCH 8/9] whitespace

---
 resources/js/components/Bard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Bard.js b/resources/js/components/Bard.js
index 13c928c7d75..d9b59ccb91a 100644
--- a/resources/js/components/Bard.js
+++ b/resources/js/components/Bard.js
@@ -12,7 +12,7 @@ class Bard {
         this.instance = instance;
         this.extensionCallbacks = [];
         this.extensionReplacementCallbacks = [];
-        this.buttonCallbacks = [];        
+        this.buttonCallbacks = [];
     }
 
     /** @deprecated */

From 3877bfb640097e706634940212b24ad5c5b532a8 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Tue, 23 Nov 2021 22:13:38 +0000
Subject: [PATCH 9/9] Add all TipTap extensions manually

---
 resources/js/components/fieldtypes/bard/BardFieldtype.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 1383e31416d..929855eef47 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -89,7 +89,7 @@
 
 <script>
 import uniqid from 'uniqid';
-import { Editor, EditorContent, EditorMenuBar, EditorFloatingMenu, EditorMenuBubble, Paragraph } from 'tiptap';
+import { Editor, EditorContent, EditorMenuBar, EditorFloatingMenu, EditorMenuBubble, Paragraph, Text } from 'tiptap';
 import {
     Blockquote,
     CodeBlock,
@@ -242,6 +242,7 @@ export default {
         this.initToolbarButtons();
 
         this.editor = new Editor({
+            useBuiltInExtensions: false,
             extensions: this.getExtensions(),
             content: this.valueToContent(clone(this.value)),
             editable: !this.readOnly,
@@ -470,6 +471,7 @@ export default {
             let exts = [
                 new Doc(),
                 new Set({ bard: this }),
+                new Text(),
                 new Paragraph(),
                 new HardBreak(),
                 new History()