From 994e61b8d1a08140b4e9c2e091b3d998af2d152e Mon Sep 17 00:00:00 2001
From: raccoon254 <tomsteve187@gmail.com>
Date: Fri, 9 Aug 2024 07:31:39 +0300
Subject: [PATCH] Added customization option

---
 app/Livewire/BlogMaker.php             |  53 ++-------
 resources/views/blogs/create.blade.php | 145 ++++++++-----------------
 resources/views/blogs/layout.blade.php |   6 +-
 3 files changed, 61 insertions(+), 143 deletions(-)

diff --git a/app/Livewire/BlogMaker.php b/app/Livewire/BlogMaker.php
index 53e058a..caac560 100644
--- a/app/Livewire/BlogMaker.php
+++ b/app/Livewire/BlogMaker.php
@@ -2,62 +2,33 @@
 
 namespace App\Livewire;
 
-use App\Services\MarkdownParser;
-use Illuminate\Http\RedirectResponse;
-use Illuminate\View\View;
+use Livewire\Attributes\On;
+use Livewire\Attributes\Validate;
 use Livewire\Component;
-use Livewire\WithFileUploads;
 use App\Models\Blog;
-use App\Models\User;
-use App\Models\Image;
 use Illuminate\Support\Str;
-use Illuminate\Support\Facades\Storage;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\View\View;
+use Illuminate\Support\Facades\Auth;
 
 class BlogMaker extends Component
 {
-    use WithFileUploads;
-
     public $title;
     public $content = '';
-    public $markdownContent = '';
-    public $tempImage;
-
-    protected $rules = [
-        'title' => 'required|min:6',
-        'content' => 'required',
-    ];
-
-    public function updatedContent(): void
-    {
-        $this->parseTextToMarkdown($this->content);
-    }
-
-    public function parseTextToMarkdown($content): void
-    {
-        $parser = new MarkdownParser();
-        $this->markdownContent = $parser->parse($content);
-    }
-
-
-    public function uploadImage()
-    {
-        // Implement image upload logic here
-        Image::create([
-           //TODO: Get the blog ID,
-            'blog_id' => 1,
-            'path' => $this->tempImage->store('images', 'public'),
-        ]);
-    }
+    public $contentHtml;
 
     public function saveBlog(): RedirectResponse
     {
-        $this->validate();
+        $this->validate([
+            'title' => 'required|min:6',
+            'content' => 'required|min:6',
+        ]);
 
         $blogData = [
             'title' => $this->title,
-            'content' => $this->markdownContent,
+            'content' => $this->content, // Storing HTML content directly
             'slug' => Str::slug($this->title),
-            'user_id' => auth()->id(),
+            'user_id' => Auth::id(),
         ];
 
         $blog = Blog::create($blogData);
diff --git a/resources/views/blogs/create.blade.php b/resources/views/blogs/create.blade.php
index e7bbaa9..15bf2a0 100644
--- a/resources/views/blogs/create.blade.php
+++ b/resources/views/blogs/create.blade.php
@@ -1,108 +1,55 @@
-<div class="p-4 flex gap-4">
-    <div class="w-1/2 flex flex-col">
-        <div class="flex gap-[1px] mb-2">
-            <button id="addHeading1" class="control-btn">
-                H1
-            </button>
-            <button id="addHeading2" class="control-btn">
-                H2
-            </button>
-            <button id="addHeading3" class="control-btn">
-                H3
-            </button>
-            <button id="addParagraph" class="control-btn">
-                <i class="fas fa-paragraph"></i> P
-            </button>
-            <button id="addBold" class="control-btn">
-                <i class="fas fa-bold"></i>
-            </button>
-            <button id="addList" class="control-btn">
-                <i class="fas fa-list"></i>
-            </button>
-            <button id="addLink" class="control-btn">
-                <i class="fas fa-link"></i>
-            </button>
-            <button id="addImage" class="control-btn">
-                <i class="fas fa-image"></i>
-            </button>
-            <div class="hidden">
-                <input type="file" accept="image/*" id="image" wire:model="image">
-            </div>
-        </div>
-        <textarea
-            id="content"
-            wire:model.live="content"
-            type="text" class="border w-full border-gray-300 p-2"
-            rows="10"></textarea>
+<div>
+    <div>
+        <input wire:model="title" type="text" placeholder="Enter title">
+        @error('title') <span>{{ $message }}</span> @enderror
     </div>
 
-    <!-- Preview -->
-    <div class="w-1/2">
-        <h3>Preview:</h3>
-        <div id="preview" class="markdown-content hidden text-black">
-            {{ $markdownContent }}
-        </div>
-        {{--        AS inner html
-        --}}
-        <div id="render" class="markdown-content-render text-black" wire:ignore>
-        </div>
+    <div>
+        <div id="editor"></div>
+        @error('content') <span>{{ $message }}</span> @enderror
     </div>
-</div>
 
-<script>
-    document.getElementById('addHeading1').addEventListener('click', function () {
-        addToContent("\n# H1 ");
-    });
-    document.getElementById('addHeading2').addEventListener('click', function () {
-        addToContent("\n## H2 ");
-    });
-    document.getElementById('addHeading3').addEventListener('click', function () {
-        addToContent("\n### H3 ");
-    });
-    document.getElementById('addParagraph').addEventListener('click', function () {
-        addToContent("\n");
-    });
-    document.getElementById('addBold').addEventListener('click', function () {
-        addToContent("\n**bold text** ");
-    });
-    document.getElementById('addList').addEventListener('click', function () {
-        addToContent("\n- list item");
-    });
-    document.getElementById('addLink').addEventListener('click', function () {
-        addToContent("\n[link text](url) ");
-    });
-    document.getElementById('addImage').addEventListener('click', function () {
-        document.getElementById('image').click();
-        setTimeout(() => {
-                addToContent("\n![alt text](image_url) ");
-            }, 100)
-    });
+    <button id="save_button" class="btn">Save Blog</button>
+
+    @script
+    <script>
+        const textArea = document.querySelector('#content');
+        const saveButton = document.querySelector('#save_button');
+
+        const toolbarOptions = [
+            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+            ['blockquote', 'code-block'],
 
-    function addToContent(text) {
-        let contentElement = document.getElementById('content');
+            [{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }],  // custom button values
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+            [{ 'direction': 'rtl' }],                         // text direction
 
-        //if we have nothing remove the new line
-        if (contentElement.value === '') {
-            text = text.trim();
-        }
+            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 
-        //if we have a previous list and we are adding a new item
-        if (text.includes('-') && contentElement.value.endsWith('-')) {
-            text = text.trim();
-        }
+            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+            [{ 'font': [] }],
+            [{ 'align': [] }],
 
-        contentElement.value += text;
-        contentElement.dispatchEvent(new Event('input')); // To trigger Livewire update
-    }
+            ['clean']                                         // remove formatting button
+        ];
 
-    // on content change
-    document.getElementById('content').addEventListener('input', function () {
-        setTimeout(
-            function () {
-                let content = document.getElementById('preview').innerText
-                let render = document.getElementById('render');
-                render.innerHTML = content;
-            }, 20
-        )
-    });
-</script>
+        const quill = new Quill('#editor', {
+            theme: 'snow',
+            modules: {
+                toolbar: toolbarOptions
+            }
+        });
+
+        saveButton.addEventListener('click', () => {
+            @this.
+            set('content', quill.root.innerHTML);
+            @this.
+            saveBlog();
+        });
+
+    </script>
+    @endscript
+</div>
diff --git a/resources/views/blogs/layout.blade.php b/resources/views/blogs/layout.blade.php
index f402dd1..45343e6 100644
--- a/resources/views/blogs/layout.blade.php
+++ b/resources/views/blogs/layout.blade.php
@@ -15,8 +15,8 @@
 
     <!-- Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-
+    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
 </head>
 <body class="font-sans antialiased">
 <div class="min-h-screen bg-white">
@@ -26,7 +26,7 @@
     <livewire:alerts/>
     <div class="flex relative z-40 gap-2 p-2">
         <!-- Page Content -->
-        <main class="w-full bg-gray-100 text-black/80 overflow-clip rounded-[16px]">
+        <main class="w-full bg-gray-100 p-4 text-black/80 overflow-clip rounded-[16px]">
             {{ $slot }}
         </main>
     </div>