feat: implement premium Zen-mode Creator workspace page at /creator

2026-06-08 19:47:55 +02:00
parent 069b29a57f
commit c8d9646110
3 changed files with 343 additions and 6 deletions
@@ -0,0 +1,74 @@
+@page "/creator"
+@using Microsoft.AspNetCore.Authorization
+@attribute [AllowAnonymous]
+
+<PageTitle>Kreator Treści (Zen Mode)</PageTitle>
+
+<div class="creator-fullscreen-wrapper">
+    <div class="creator-header">
+        <h1>Kreator Treści</h1>
+        <p class="subtitle">Zen publishing workspace mapping standard Markdown into clean visual blocks.</p>
+    </div>
+
+    <div class="milkdown-premium-container" spellcheck="false">
+        <MarkdownEditor @ref="_editorRef" InitialMarkdown="@_initialMarkdown" OnSave="HandleSave" ShowFetchButton="false" Height="450px" />
+    </div>
+
+    <div class="creator-actions-bar">
+        <button type="button" @onclick="TriggerFetchAsync" class="nexus-btn premium-fetch-btn">
+            <span>Fetch Markdown Content</span>
+            <svg class="arrow-icon" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    @if (!string.IsNullOrEmpty(_savedMarkdown))
+    {
+        <div class="creator-preview-card">
+            <div class="preview-header">
+                <h3>Retrieved Markdown Preview</h3>
+            </div>
+            <div class="pre-wrapper">
+                <pre class="code-preview-block"><code>@_savedMarkdown</code></pre>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    private MarkdownEditor? _editorRef;
+    private string _savedMarkdown = string.Empty;
+
+    private readonly string _initialMarkdown = @"# Zen Mode Editor
+
+Welcome to your dedicated workspace. This premium panel supports Notion-like WYSIWYG editing.
+
+## Features:
+- **Zero Distraction**: Simple elevation and border framing.
+- **GFM Tables**: Consistent cell padding and hover striping.
+- **Clean Code Blocks**: Pre-rendered base64 font-loaded code-preview blocks.
+
+| Option | Active | Value |
+| :--- | :---: | :--- |
+| Zen Mode | Yes | High Focus |
+| Responsive | Yes | 1200px Max |
+| Theme Sync | Yes | Automatic |
+
+Start writing your masterpiece...";
+
+    private async Task TriggerFetchAsync()
+    {
+        if (_editorRef is not null)
+        {
+            await _editorRef.FetchContentAsync();
+        }
+    }
+
+    private void HandleSave(string markdown)
+    {
+        _savedMarkdown = markdown;
+        StateHasChanged();
+    }
+}