Merge branch 'main' into feature/phase-1-templates-feedback

Author: MujahidAbbas

README.md

@@ -15,6 +15,7 @@ PlanForge is a self-hosted project planning tool that uses AI to generate compre
 - **Tech Spec Generation** - Detailed technical specifications based on the PRD
 - **Task Generation** - Break down tech specs into actionable development tasks
 - **Version History** - Browse, preview, and restore previous document versions
+- **Markdown Preview** - Write/Preview/Split editor modes with syntax highlighting
 - **Kanban Board** - Drag-and-drop task management with Flowforge
 - **User Authentication** - Secure login with email/password
 - **Regeneration** - Regenerate individual documents or the entire pipeline
@@ -149,6 +150,7 @@ REDIS_HOST=127.0.0.1
 - [x] ~~User authentication~~ (v0.4.0)
 - [x] ~~Version history~~ (v0.5.0)
 - [x] ~~GitHub Issues integration~~ (v0.6.0)
+- [x] ~~Markdown preview with syntax highlighting~~ (v0.7.0)
 - [ ] Team collaboration
 - [ ] Project templates
 - [ ] Diff comparison for versions

app/Livewire/Concerns/HasMarkdownPreview.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Livewire\Concerns;
+
+use App\Services\MarkdownService;
+use Livewire\Attributes\Computed;
+
+trait HasMarkdownPreview
+{
+    public string $editorMode = 'write';
+
+    public function setEditorMode(string $mode): void
+    {
+        if (! in_array($mode, ['write', 'preview', 'split'])) {
+            return;
+        }
+
+        $this->editorMode = $mode;
+        unset($this->previewHtml);
+    }
+
+    #[Computed]
+    public function previewHtml(): string
+    {
+        return app(MarkdownService::class)->render($this->content);
+    }
+
+    protected function clearPreviewCache(): void
+    {
+        unset($this->previewHtml);
+    }
+}

app/Livewire/Projects/Tabs/Prd.php

@@ -3,6 +3,7 @@
 namespace App\Livewire\Projects\Tabs;
 
 use App\Enums\DocumentType;
+use App\Livewire\Concerns\HasMarkdownPreview;
 use App\Livewire\Concerns\HasVersionHistory;
 use App\Models\Document;
 use App\Models\DocumentVersion;
@@ -15,6 +16,7 @@
 class Prd extends Component
 {
     use AuthorizesRequests;
+    use HasMarkdownPreview;
     use HasVersionHistory;
 
     public string $projectId;
@@ -52,6 +54,7 @@ public function loadContent(): void
     public function updatedContent(): void
     {
         $this->isDirty = true;
+        $this->clearPreviewCache();
     }
 
     public function save(): void

app/Livewire/Projects/Tabs/Tech.php

@@ -5,6 +5,7 @@
 use App\Actions\GenerateTasksFromTechSpec;
 use App\Enums\DocumentType;
 use App\Enums\PlanRunStepStatus;
+use App\Livewire\Concerns\HasMarkdownPreview;
 use App\Livewire\Concerns\HasVersionHistory;
 use App\Models\Document;
 use App\Models\DocumentVersion;
@@ -18,6 +19,7 @@
 class Tech extends Component
 {
     use AuthorizesRequests;
+    use HasMarkdownPreview;
     use HasVersionHistory;
 
     public string $projectId;
@@ -55,6 +57,7 @@ public function loadContent(): void
     public function updatedContent(): void
     {
         $this->isDirty = true;
+        $this->clearPreviewCache();
     }
 
     public function save(): void

app/Providers/AppServiceProvider.php

@@ -4,6 +4,7 @@
 
 use App\Events\TasksChanged;
 use App\Listeners\QueueGitHubSync;
+use App\Services\MarkdownService;
 use Illuminate\Cache\RateLimiting\Limit;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\RateLimiter;
@@ -16,7 +17,7 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        $this->app->singleton(MarkdownService::class);
     }
 
     /**

app/Services/MarkdownService.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Services;
+
+use League\CommonMark\Environment\Environment;
+use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
+use League\CommonMark\Extension\DisallowedRawHtml\DisallowedRawHtmlExtension;
+use League\CommonMark\Extension\GithubFlavoredMarkdownExtension;
+use League\CommonMark\MarkdownConverter;
+
+class MarkdownService
+{
+    private MarkdownConverter $converter;
+
+    public function __construct()
+    {
+        $environment = new Environment([
+            'html_input' => 'strip',
+            'allow_unsafe_links' => false,
+        ]);
+
+        $environment->addExtension(new CommonMarkCoreExtension);
+        $environment->addExtension(new GithubFlavoredMarkdownExtension);
+        $environment->addExtension(new DisallowedRawHtmlExtension);
+
+        $this->converter = new MarkdownConverter($environment);
+    }
+
+    public function render(string $markdown): string
+    {
+        if (empty(trim($markdown))) {
+            return '';
+        }
+
+        return $this->converter->convert($markdown)->getContent();
+    }
+}

composer.json

@@ -11,6 +11,7 @@
         "firebase/php-jwt": "^7.0",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
+        "league/commonmark": "^2.8",
         "livewire/livewire": "^3.6.4",
         "livewire/volt": "^1.7.0",
         "prism-php/prism": "^0.99.7",

composer.lock

@@ -18,6 +18,8 @@
     },
     "dependencies": {
         "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/typography": "^0.5.19",
+        "highlight.js": "^11.11.1",
         "sortablejs": "^1.15.6"
     }
 }