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 id="@EditorId" class="milkdown-editor-wrapper"></div>
|
||||
@if (ShowFetchButton)
|
||||
{
|
||||
<div class="editor-actions">
|
||||
<button type="button" @onclick="FetchContentAsync" class="nexus-btn">
|
||||
Fetch Markdown Content
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
@@ -17,6 +20,9 @@
|
||||
private IJSObjectReference? _module;
|
||||
private DotNetObjectReference<MarkdownEditor>? _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)
|
||||
{
|
||||
|
||||
@@ -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.