feat(editor): align selection popup and all editor control elements styling with Reader #81
@@ -5,11 +5,14 @@
|
|||||||
|
|
||||||
<div class="markdown-editor-container" style="height: @Height; width: @Width;">
|
<div class="markdown-editor-container" style="height: @Height; width: @Width;">
|
||||||
<div id="@EditorId" class="milkdown-editor-wrapper"></div>
|
<div id="@EditorId" class="milkdown-editor-wrapper"></div>
|
||||||
<div class="editor-actions">
|
@if (ShowFetchButton)
|
||||||
<button type="button" @onclick="FetchContentAsync" class="nexus-btn">
|
{
|
||||||
Fetch Markdown Content
|
<div class="editor-actions">
|
||||||
</button>
|
<button type="button" @onclick="FetchContentAsync" class="nexus-btn">
|
||||||
</div>
|
Fetch Markdown Content
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
@@ -17,6 +20,9 @@
|
|||||||
private IJSObjectReference? _module;
|
private IJSObjectReference? _module;
|
||||||
private DotNetObjectReference<MarkdownEditor>? _dotNetHelper;
|
private DotNetObjectReference<MarkdownEditor>? _dotNetHelper;
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public bool ShowFetchButton { get; set; } = true;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string InitialMarkdown { get; set; } = string.Empty;
|
public string InitialMarkdown { get; set; } = string.Empty;
|
||||||
|
|
||||||
@@ -53,7 +59,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task FetchContentAsync()
|
public async Task FetchContentAsync()
|
||||||
{
|
{
|
||||||
if (_module is not null)
|
if (_module is not null)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,257 @@
|
|||||||
|
/* ==========================================================================
|
||||||
Antigravity
commented
Review ::deep selectors to ensure they don't leak into other components; keep them scoped. Review ::deep selectors to ensure they don't leak into other components; keep them scoped.
|
|||||||
|
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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user
Page is marked [AllowAnonymous]; change to [Authorize] if creator should be restricted.