From b13d814ed620c87d26497f1d177d8f1c46bb38e6 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Sat, 3 Feb 2024 19:41:31 +1000
Subject: [PATCH] wip

---
 package-lock.json                             |  5 +++
 package.json                                  |  5 +++
 .../js/Components/Blogs/CreateEditForm.vue    |  5 ++-
 resources/js/Components/Editor/BubbleMenu.vue |  2 +-
 .../js/Components/Editor/ComponentMenu.vue    | 34 +++++++++++++++++++
 resources/js/Components/Editor/Editor.vue     | 24 ++++++++++---
 6 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/Components/Editor/ComponentMenu.vue

diff --git a/package-lock.json b/package-lock.json
index 44ca2d8c..75e69ca7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,11 @@
                 "@headlessui/vue": "^1.7.16",
                 "@heroicons/vue": "^2.0.18",
                 "@tiptap/extension-bubble-menu": "^2.2.1",
+                "@tiptap/extension-document": "^2.2.1",
+                "@tiptap/extension-list-item": "^2.2.1",
+                "@tiptap/extension-ordered-list": "^2.2.1",
+                "@tiptap/extension-paragraph": "^2.2.1",
+                "@tiptap/extension-text": "^2.2.1",
                 "@tiptap/pm": "^2.2.1",
                 "@tiptap/starter-kit": "^2.2.1",
                 "@tiptap/vue-3": "^2.2.1",
diff --git a/package.json b/package.json
index 437203ff..bbc38b62 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,11 @@
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
         "@tiptap/extension-bubble-menu": "^2.2.1",
+        "@tiptap/extension-document": "^2.2.1",
+        "@tiptap/extension-list-item": "^2.2.1",
+        "@tiptap/extension-ordered-list": "^2.2.1",
+        "@tiptap/extension-paragraph": "^2.2.1",
+        "@tiptap/extension-text": "^2.2.1",
         "@tiptap/pm": "^2.2.1",
         "@tiptap/starter-kit": "^2.2.1",
         "@tiptap/vue-3": "^2.2.1",
diff --git a/resources/js/Components/Blogs/CreateEditForm.vue b/resources/js/Components/Blogs/CreateEditForm.vue
index 0422a37e..303fb39d 100644
--- a/resources/js/Components/Blogs/CreateEditForm.vue
+++ b/resources/js/Components/Blogs/CreateEditForm.vue
@@ -43,13 +43,16 @@ const form = useForm({
 })
 
 const submit = () => {
-    console.log(form.content)
     if (props.blog) {
         form.put(route('dashboard.blogs.update', props.blog))
     } else {
         form.post(route('dashboard.blogs.store'))
     }
 }
+
+watch(content, (newValue) => {
+    console.log(newValue)
+})
 </script>
 
 <template>
diff --git a/resources/js/Components/Editor/BubbleMenu.vue b/resources/js/Components/Editor/BubbleMenu.vue
index 19ab2e21..042a571a 100644
--- a/resources/js/Components/Editor/BubbleMenu.vue
+++ b/resources/js/Components/Editor/BubbleMenu.vue
@@ -29,7 +29,7 @@ defineProps({
             <BubbleButton
                 @click="editor.chain().focus().toggleStrike().run()"
                 :class="{ 'bg-gray-300': editor.isActive('strike') }"
-                class="line-through rounded-r-xl"
+                class="line-through"
             >
                 strike
             </BubbleButton>
diff --git a/resources/js/Components/Editor/ComponentMenu.vue b/resources/js/Components/Editor/ComponentMenu.vue
new file mode 100644
index 00000000..920fafb0
--- /dev/null
+++ b/resources/js/Components/Editor/ComponentMenu.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+    editor: Object,
+})
+</script>
+
+<template>
+    <div v-if="editor" class="w-full">
+        <button
+            @click="editor.chain().focus().toggleOrderedList().run()"
+            :class="{ 'is-active': editor.isActive('orderedList') }"
+        >
+            toggleOrderedList
+        </button>
+        <button
+            @click="editor.chain().focus().splitListItem('listItem').run()"
+            :disabled="!editor.can().splitListItem('listItem')"
+        >
+            splitListItem
+        </button>
+        <button
+            @click="editor.chain().focus().sinkListItem('listItem').run()"
+            :disabled="!editor.can().sinkListItem('listItem')"
+        >
+            sinkListItem
+        </button>
+        <button
+            @click="editor.chain().focus().liftListItem('listItem').run()"
+            :disabled="!editor.can().liftListItem('listItem')"
+        >
+            liftListItem
+        </button>
+    </div>
+</template>
diff --git a/resources/js/Components/Editor/Editor.vue b/resources/js/Components/Editor/Editor.vue
index d925ea71..27210400 100644
--- a/resources/js/Components/Editor/Editor.vue
+++ b/resources/js/Components/Editor/Editor.vue
@@ -2,6 +2,13 @@
 import StarterKit from '@tiptap/starter-kit'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import BubbleMenu from '@/Components/Editor/BubbleMenu.vue'
+import ListItem from '@tiptap/extension-list-item'
+import Document from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import OrderedList from '@tiptap/extension-ordered-list'
+
+import ComponentMenu from '@/Components/Editor/ComponentMenu.vue'
+import { Text } from '@tiptap/extension-text'
 
 const props = defineProps({
     modelValue: {
@@ -13,17 +20,26 @@ const emits = defineEmits(['update:modelValue'])
 
 const editor = useEditor({
     content: props.modelValue,
-    extensions: [StarterKit],
-    onUpdate: (value) => {
+    extensions: [StarterKit, Document, OrderedList, ListItem, Paragraph, Text],
+    editorProps: {
+        attributes: {
+            class: 'prose dark:prose-invert bg-red-50 p-6 prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+        },
+    },
+    onUpdate: () => {
         emits('update:modelValue', editor.value.getHTML())
     },
 })
 </script>
 
 <template>
-    <div class="border shadow rounded-2xl border-gray-200 p-3">
+    <div>
         <BubbleMenu :editor="editor" />
 
-        <EditorContent :editor="editor" />
+        <ComponentMenu :editor="editor" />
+
+        <div class="border-gray-400">
+            <EditorContent :editor="editor" />
+        </div>
     </div>
 </template>