add: tiptap editor + storing html + frontmatter definition table

app/Livewire/Articles/Editor.php

@@ -6,37 +6,35 @@
 use Flux\Flux;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
+use League\HTMLToMarkdown\HtmlConverter;
 use Livewire\Attributes\Computed;
+use Livewire\Attributes\Locked;
 use Livewire\Component;
 use Spatie\YamlFrontMatter\YamlFrontMatter;
 
 class Editor extends Component
 {
-    public string $content = 'write your article here';
+    public string $content = '<p>write your article here</p>';
+    public array $fm = [];
 
-    protected ?Article $article = null;
+    #[Locked]
+    public ?Article $article = null;
 
-    #[Computed]
-    public function frontmatter(): array
-    {
-        return [];
-    }
 
     public function mount(?Article $article): void
     {
         $this->article = $article ?? null;
-        $this->content = $this->article->content ?? 'write your article here';
+        $this->content = $this->article->content ?? '<p>write your article here</p>';
+        $this->fm = $this->article?->fm ?? [];
     }
 
-    public function save(string $content): void
+    public function save(string $content, array $state): void
     {
-        $parsed = YamlFrontMatter::parse($content);
-        $title = $parsed->matter('title');
+        $title = $state['title'] ?? fake()->unique()->realText(16);;
         if ($this->article) {
-            $this->article->update(['content' => $content, 'fm' => $parsed->matter(), 'title' => $title]);
+            $this->article->update(['content' => $content, 'fm' => $state, 'title' => $title]);
         } else {
-            $title = $title ? $title : fake()->unique()->realText(16);
-            $this->article = Auth::user()->articles()->create(['content' => $content, 'fm' => $parsed->matter(), 'title' => $title]);
+            $this->article = Auth::user()->articles()->create(['content' => $content, 'fm' => $state, 'title' => $title]);
         }
         Flux::toast('article saved');
     }

composer.json

@@ -10,6 +10,7 @@
         "laravel/framework": "^11.9",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^2.9",
+        "league/html-to-markdown": "^5.1",
         "livewire/flux": "^1.0",
         "livewire/flux-pro": "^1.0",
         "livewire/livewire": "^3.5",

package.json

@@ -21,14 +21,37 @@
         "@codemirror/view": "^6.34.1",
         "@shikijs/rehype": "^1.22.0",
         "@tailwindcss/typography": "^0.5.15",
+        "@tiptap/core": "^2.8.0",
+        "@tiptap/extension-blockquote": "^2.8.0",
+        "@tiptap/extension-bold": "^2.8.0",
+        "@tiptap/extension-bullet-list": "^2.8.0",
+        "@tiptap/extension-code": "^2.8.0",
+        "@tiptap/extension-code-block": "^2.8.0",
+        "@tiptap/extension-document": "^2.8.0",
+        "@tiptap/extension-dropcursor": "^2.8.0",
+        "@tiptap/extension-gapcursor": "^2.8.0",
+        "@tiptap/extension-hard-break": "^2.8.0",
+        "@tiptap/extension-heading": "^2.8.0",
+        "@tiptap/extension-horizontal-rule": "^2.8.0",
+        "@tiptap/extension-italic": "^2.8.0",
+        "@tiptap/extension-list-item": "^2.8.0",
+        "@tiptap/extension-ordered-list": "^2.8.0",
+        "@tiptap/extension-paragraph": "^2.8.0",
+        "@tiptap/extension-strike": "^2.8.0",
+        "@tiptap/extension-text": "^2.8.0",
+        "@tiptap/starter-kit": "^2.8.0",
         "codemirror": "^6.0.1",
         "rehype-add-classes": "^1.0.0",
+        "rehype-parse": "^9.0.1",
+        "rehype-remark": "^10.0.0",
         "rehype-stringify": "^10.0.1",
         "remark-extract-frontmatter": "^3.2.0",
         "remark-frontmatter": "^5.0.0",
         "remark-gfm": "^4.0.0",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.1.1",
+        "remark-stringify": "^11.0.0",
+        "shiki": "^1.22.0",
         "thememirror": "^2.0.1",
         "unified": "^11.0.5",
         "yaml": "^2.6.0"