Fix UI layout

Raccoon254 · Aug 8, 2024 · a4af11e · a4af11e
1 parent 6fe7560
commit a4af11e
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 17 deletions.
diff --git a/app/Livewire/BlogMaker.php b/app/Livewire/BlogMaker.php
@@ -2,6 +2,7 @@
 
 namespace App\Livewire;
 
+use App\Services\MarkdownParser;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\View\View;
 use Livewire\Component;
@@ -31,16 +32,21 @@ public function updatedContent(): void
         $this->parseTextToMarkdown($this->content);
     }
 
-    function parseTextToMarkdown($content): void
+    public function parseTextToMarkdown($content): void
     {
-        //parse markdown
-        $parsed_content = app('markdown')->parse($this->content);
-        $this->markdownContent = $parsed_content;
+        $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 function saveBlog(): RedirectResponse

diff --git a/app/Services/MarkdownParser.php b/app/Services/MarkdownParser.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Services;
+
+use League\CommonMark\CommonMarkConverter;
+use League\CommonMark\Environment\Environment;
+use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
+use League\CommonMark\Extension\Attributes\AttributesExtension;
+use League\CommonMark\Extension\Table\TableExtension;
+
+class MarkdownParser
+{
+    protected CommonMarkConverter $converter;
+
+    public function __construct()
+    {
+        $environment = new Environment();
+        $environment->addExtension(new CommonMarkCoreExtension());
+        $environment->addExtension(new AttributesExtension());
+        $environment->addExtension(new TableExtension());
+
+        $this->converter = new CommonMarkConverter([
+            'html_input' => 'strip',
+            'allow_unsafe_links' => false,
+        ], $environment);
+    }
+
+    public function parse(string $markdown): string
+    {
+        $html = $this->converter->convert($markdown);
+
+        // Apply Tailwind CSS styles
+        return $this->applyTailwindStyles($html);
+    }
+
+    protected function applyTailwindStyles(string $html): string
+    {
+        $styles = [
+            'h1' => 'text-4xl font-bold mb-4',
+            'h2' => 'text-3xl font-bold mb-3',
+            'h3' => 'text-2xl font-bold mb-2',
+            'p' => 'text-base mb-4',
+            'ul' => 'list-disc pl-5 mb-4',
+            'ol' => 'list-decimal pl-5 mb-4',
+            'li' => 'mb-1',
+            'a' => 'text-blue-500 underline',
+            'img' => 'max-w-full h-auto',
+            'strong' => 'font-bold',
+            'table' => 'min-w-full divide-y divide-gray-200',
+            'thead' => 'bg-gray-50',
+            'th' => 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider',
+            'tbody' => 'bg-white divide-y divide-gray-200',
+            'td' => 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900',
+        ];
+
+        foreach ($styles as $tag => $class) {
+            $html = preg_replace(
+                "/(<{$tag}[^>]*>)/i",
+                "$1<span class=\"{$class}\">",
+                $html
+            );
+            $html = preg_replace(
+                "/(<\/{$tag}>)/i",
+                "</span>$1",
+                $html
+            );
+        }
+
+        return $html;
+    }
+}
diff --git a/resources/views/blogs/create.blade.php b/resources/views/blogs/create.blade.php
@@ -25,6 +25,9 @@
             <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"
@@ -34,43 +37,72 @@
     </div>
 
     <!-- Preview -->
-    <div>
+    <div class="w-1/2">
         <h3>Preview:</h3>
-        {{ $content }}
-        <br>
-        {{ $markdownContent }}
+        <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>
 
 <script>
-    document.getElementById('addHeading1').addEventListener('click', function() {
+    document.getElementById('addHeading1').addEventListener('click', function () {
         addToContent("\n# H1 ");
     });
-    document.getElementById('addHeading2').addEventListener('click', function() {
+    document.getElementById('addHeading2').addEventListener('click', function () {
         addToContent("\n## H2 ");
     });
-    document.getElementById('addHeading3').addEventListener('click', function() {
+    document.getElementById('addHeading3').addEventListener('click', function () {
         addToContent("\n### H3 ");
     });
-    document.getElementById('addParagraph').addEventListener('click', function() {
+    document.getElementById('addParagraph').addEventListener('click', function () {
         addToContent("\n");
     });
-    document.getElementById('addBold').addEventListener('click', function() {
+    document.getElementById('addBold').addEventListener('click', function () {
         addToContent("\n**bold text** ");
     });
-    document.getElementById('addList').addEventListener('click', function() {
+    document.getElementById('addList').addEventListener('click', function () {
         addToContent("\n- list item");
     });
-    document.getElementById('addLink').addEventListener('click', function() {
+    document.getElementById('addLink').addEventListener('click', function () {
         addToContent("\n[link text](url) ");
     });
-    document.getElementById('addImage').addEventListener('click', function() {
-        addToContent("\n![alt text](image_url) ");
+    document.getElementById('addImage').addEventListener('click', function () {
+        document.getElementById('image').click();
+        setTimeout(() => {
+                addToContent("\n![alt text](image_url) ");
+            }, 100)
     });
 
     function addToContent(text) {
         let contentElement = document.getElementById('content');
+
+        //if we have nothing remove the new line
+        if (contentElement.value === '') {
+            text = text.trim();
+        }
+
+        //if we have a previous list and we are adding a new item
+        if (text.includes('-') && contentElement.value.endsWith('-')) {
+            text = text.trim();
+        }
+
         contentElement.value += text;
         contentElement.dispatchEvent(new Event('input')); // To trigger Livewire update
     }
+
+    // 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>