wip

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",

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>

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>

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>

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>