diff --git a/src/NexusReader.UI.Shared/Components/MarkdownEditor.razor b/src/NexusReader.UI.Shared/Components/MarkdownEditor.razor index 5d12ed5..1f0b944 100644 --- a/src/NexusReader.UI.Shared/Components/MarkdownEditor.razor +++ b/src/NexusReader.UI.Shared/Components/MarkdownEditor.razor @@ -5,11 +5,14 @@
-
- -
+ @if (ShowFetchButton) + { +
+ +
+ }
@code { @@ -17,6 +20,9 @@ private IJSObjectReference? _module; private DotNetObjectReference? _dotNetHelper; + [Parameter] + public bool ShowFetchButton { get; set; } = true; + [Parameter] public string InitialMarkdown { get; set; } = string.Empty; @@ -53,7 +59,7 @@ } } - private async Task FetchContentAsync() + public async Task FetchContentAsync() { if (_module is not null) { diff --git a/src/NexusReader.UI.Shared/Pages/Creator.razor b/src/NexusReader.UI.Shared/Pages/Creator.razor new file mode 100644 index 0000000..85acbba --- /dev/null +++ b/src/NexusReader.UI.Shared/Pages/Creator.razor @@ -0,0 +1,74 @@ +@page "/creator" +@using Microsoft.AspNetCore.Authorization +@attribute [AllowAnonymous] + +Kreator Treści (Zen Mode) + +
+
+

Kreator Treści

+

Zen publishing workspace mapping standard Markdown into clean visual blocks.

+
+ +
+ +
+ +
+ +
+ + @if (!string.IsNullOrEmpty(_savedMarkdown)) + { +
+
+

Retrieved Markdown Preview

+
+
+ 
@_savedMarkdown
+
+
+ } +
+ +@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(); + } +} diff --git a/src/NexusReader.UI.Shared/Pages/Creator.razor.css b/src/NexusReader.UI.Shared/Pages/Creator.razor.css new file mode 100644 index 0000000..793551a --- /dev/null +++ b/src/NexusReader.UI.Shared/Pages/Creator.razor.css @@ -0,0 +1,257 @@ +/* ========================================================================== + Creator.razor.css - Isolated Styles for Zen Mode Creator Workspace + ========================================================================== */ + +.creator-fullscreen-wrapper { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.creator-header h1 { + font-size: 2rem; + font-weight: 700; + color: var(--text-main); + margin: 0 0 0.5rem 0; +} + +.creator-header .subtitle { + font-size: 1rem; + color: var(--text-muted); + margin: 0; +} + +/* 1. Main Workspace Card Layer Elevation */ +.milkdown-premium-container { + background-color: var(--bg-surface) !important; + border: 1px solid var(--border) !important; + border-radius: var(--radius-lg); + padding: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); + position: relative; + overflow: hidden; +} + +/* 2. Deep Component Style Isolation */ + +/* Fix Top Text Clipping & padding context on the ProseMirror surface */ +::deep .ProseMirror, +::deep .crepe .editor, +::deep .milkdown .editor { + position: relative !important; + top: 0 !important; + transform: none !important; + padding: 2rem !important; + background-color: var(--bg-surface) !important; + color: var(--text-main) !important; + font-size: 1.1rem !important; + line-height: 1.7 !important; + outline: none !important; +} + +/* Base Editorial Typography flow inside the dynamic DOM */ +::deep .crepe, +::deep .milkdown { + background-color: var(--bg-surface) !important; + background: var(--bg-surface) !important; + color: var(--text-main) !important; +} + +::deep .milkdown .editor h1, +::deep .crepe h1, +::deep .ProseMirror h1 { + margin-top: 1.8rem !important; + margin-bottom: 1rem !important; + font-size: 2.2rem !important; + font-weight: 700 !important; + color: var(--text-main) !important; + line-height: 1.25 !important; +} + +::deep .milkdown .editor h2, +::deep .crepe h2, +::deep .ProseMirror h2 { + margin-top: 1.5rem !important; + margin-bottom: 0.8rem !important; + font-size: 1.6rem !important; + font-weight: 700 !important; + color: var(--text-main) !important; + line-height: 1.3 !important; +} + +::deep .milkdown .editor h3, +::deep .crepe h3, +::deep .ProseMirror h3 { + margin-top: 1.3rem !important; + margin-bottom: 0.7rem !important; + font-size: 1.3rem !important; + font-weight: 700 !important; + color: var(--text-main) !important; + line-height: 1.35 !important; +} + +::deep .milkdown .editor code, +::deep .crepe code, +::deep .ProseMirror code { + background-color: rgba(16, 185, 129, 0.1) !important; + color: var(--accent) !important; + padding: 0.2rem 0.4rem !important; + border-radius: var(--radius-sm, 4px) !important; + font-family: 'Azeret Mono', monospace !important; + font-size: 0.85em !important; +} + +/* Toolbar Styling Overrides */ +::deep .crepe .toolbar, +::deep .milkdown-menu, +::deep .crepe-menu-wrapper { + background-color: var(--bg-base) !important; + border: 1px solid var(--border) !important; + border-radius: 12px !important; + padding: 0.5rem !important; + margin-bottom: 1rem !important; +} + +::deep .crepe .toolbar button:hover, +::deep .milkdown-menu button:hover, +::deep .crepe-menu-wrapper button:hover, +::deep .crepe .toolbar .button:hover, +::deep .milkdown-menu .button:hover { + color: var(--accent) !important; + background-color: rgba(16, 185, 129, 0.1) !important; + border-radius: var(--radius-sm, 4px) !important; +} + +/* Premium GFM Table Layouts */ +::deep .milkdown-premium-container table, +::deep .crepe table, +::deep .milkdown table, +::deep .ProseMirror table { + width: 100% !important; + border-collapse: collapse !important; + margin: 2rem 0 !important; +} + +::deep .milkdown-premium-container th, +::deep .crepe th, +::deep .milkdown th, +::deep .ProseMirror th, +::deep .milkdown-premium-container td, +::deep .crepe td, +::deep .milkdown td, +::deep .ProseMirror td { + padding: 14px 18px !important; + border: 1px solid var(--border) !important; +} + +::deep .milkdown-premium-container th, +::deep .crepe th, +::deep .milkdown th, +::deep .ProseMirror th { + background-color: var(--bg-base) !important; + color: var(--text-main) !important; + font-weight: 700 !important; + text-align: left !important; +} + +::deep .milkdown-premium-container td, +::deep .crepe td, +::deep .milkdown td, +::deep .ProseMirror td { + color: var(--text-main) !important; +} + +/* Zebra row background tints (Dark Mode default) */ +::deep .milkdown-premium-container tr:nth-child(even), +::deep .crepe tr:nth-child(even), +::deep .milkdown tr:nth-child(even), +::deep .ProseMirror tr:nth-child(even) { + background-color: rgba(255, 255, 255, 0.01) !important; +} + +/* Zebra row background tints (Light Mode override) */ +.theme-light ::deep .milkdown-premium-container tr:nth-child(even), +.theme-light ::deep .crepe tr:nth-child(even), +.theme-light ::deep .milkdown tr:nth-child(even), +.theme-light ::deep .ProseMirror tr:nth-child(even) { + background-color: rgba(0, 0, 0, 0.015) !important; +} + +/* Lists and Task Lists */ +::deep .crepe ul, +::deep .crepe ol, +::deep .milkdown ul, +::deep .milkdown ol, +::deep .ProseMirror ul, +::deep .ProseMirror ol { + line-height: 1.7 !important; +} + +/* 3. Bottom Actions Panel styling */ +.creator-actions-bar { + display: flex; + justify-content: flex-end; + padding: 1rem 0 0 0; + margin-top: 1rem; + border-top: 1px solid var(--border); +} + +.premium-fetch-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + background: var(--accent); + color: #000000; +} + +.premium-fetch-btn:hover { + transform: translateY(-2px); + filter: brightness(1.1); + box-shadow: 0 4px 15px var(--accent-glow); +} + +.premium-fetch-btn:hover .arrow-icon { + transform: translateX(4px); +} + +.arrow-icon { + transition: transform 0.2s ease; +} + +/* 4. Dedicated Preview Module */ +.creator-preview-card { + background: #121214; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: var(--radius-lg); + padding: 1.5rem; + margin-top: 2rem; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); +} + +.preview-header h3 { + margin: 0 0 1rem 0; + font-size: 1.25rem; + font-weight: 600; + color: #ffffff; + font-family: var(--nexus-font-sans); +} + +.pre-wrapper { + max-height: 400px; + overflow-y: auto; + overflow-x: auto; +} + +.code-preview-block { + margin: 0; + white-space: pre-wrap; + word-break: break-all; + font-family: 'Azeret Mono', SFMono-Regular, Consolas, Menlo, monospace; + font-size: 0.85rem; + color: #e4e4e7; + line-height: 1.6; +}