feat: implement stage 1 of Milkdown WYSIWYG editor integration

2026-06-08 13:47:06 +02:00
parent 9fddafa423
commit 79fc43d592
5 changed files with 411 additions and 0 deletions
@@ -0,0 +1,72 @@
+@page "/dev/creator-test"
+@using Microsoft.AspNetCore.Authorization
+@attribute [AllowAnonymous]
+
+<PageTitle>Markdown Creator Test</PageTitle>
+
+<div class="creator-test-container glass-panel">
+    <div class="test-header">
+        <h1>Milkdown WYSIWYG Integration (Stage 1)</h1>
+        <p class="subtitle">Verifying bi-directional Markdown flow and GFM rendering.</p>
+    </div>
+
+    <div class="editor-section">
+        <MarkdownEditor InitialMarkdown="@_initialMarkdown" OnSave="HandleSave" Height="400px" />
+    </div>
+
+    <div class="result-section">
+        <h3>Retrieved Markdown Content</h3>
+        <p class="description">This block shows the content received from the editor when you click "Fetch Markdown Content".</p>
+        <div class="pre-wrapper">
+            @if (string.IsNullOrEmpty(_savedMarkdown))
+            {
+                <span class="placeholder">No content fetched yet. Click "Fetch Markdown Content" above to retrieve data.</span>
+            }
+            else
+            {
+                <pre><code>@_savedMarkdown</code></pre>
+            }
+        </div>
+    </div>
+</div>
+
+@code {
+    private readonly string _initialMarkdown = @"# Milkdown WYSIWYG Test Page
+
+This is a demonstration of the **Milkdown** editor embedded inside a Blazor WASM component.
+
+## GFM Features Support
+
+The editor supports Github Flavored Markdown out-of-the-box:
+
+1. **Task Lists**
+   - [x] Create reusable Blazor component
+   - [x] Configure ESM dynamic wrapper
+   - [ ] Implement stage 2 features
+
+2. **Tables**
+
+| Feature | Stage 1 Status | Stage 2 Plan |
+| :--- | :---: | :---: |
+| WYSIWYG Mode | Active | Polish UI |
+| C# Interop | Done | Auto-Sync |
+| GFM Support | Verified | Custom Nodes |
+
+3. **Code Formatting**
+```csharp
+public class MarkdownEditor : ComponentBase
+{
+    // C# interop logic
+}
+```
+
+Feel free to edit this text and click **Fetch Markdown Content** below!";
+
+    private string _savedMarkdown = string.Empty;
+
+    private void HandleSave(string markdown)
+    {
+        _savedMarkdown = markdown;
+        StateHasChanged();
+    }
+}