From 5a3f48926397d1d60a14db4e68be94a6c2379ea0 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 27 Nov 2023 10:42:06 +1000
Subject: [PATCH] added tiptap

---
 resources/js/bootstrap.ts | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/resources/js/bootstrap.ts b/resources/js/bootstrap.ts
index 6b455bc..bbb35c2 100644
--- a/resources/js/bootstrap.ts
+++ b/resources/js/bootstrap.ts
@@ -1,5 +1,7 @@
 import axios, { AxiosStatic } from "axios";
 import stemmech, { StemmechStatic } from "./stemmech";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
 
 // Attach axios to the window object
 declare global {
@@ -7,6 +9,7 @@ declare global {
         axios: AxiosStatic;
         stemmech: StemmechStatic;
         SVGInject: any;
+        setupEditor: any;
     }
 }
 
@@ -27,3 +30,38 @@ window.stemmech.ready(() => {
 
     window.SVGInject(document.querySelectorAll("img.injectable"));
 });
+
+window.setupEditor = function (content) {
+    let editor;
+
+    return {
+        content: content,
+
+        init(element) {
+            editor = new Editor({
+                element: element,
+                extensions: [StarterKit],
+                content: this.content,
+                onUpdate: ({ editor }) => {
+                    this.content = editor.getHTML();
+                },
+            });
+
+            this.$watch("content", (content) => {
+                // If the new content matches TipTap's then we just skip.
+                if (content === editor.getHTML()) return;
+
+                /*
+    Otherwise, it means that a force external to TipTap
+    is modifying the data on this Alpine component,
+    which could be Livewire itself.
+    In this case, we just need to update TipTap's
+    content and we're good to do.
+    For more information on the `setContent()` method, see:
+      https://www.tiptap.dev/api/commands/set-content
+  */
+                editor.commands.setContent(content, false);
+            });
+        },
+    };
+};