Zen publishing workspace mapping standard Markdown into clean visual blocks.
-
-
-
-
-
+ Markdown Creator Test
-
-
-
-## 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
- - [x] 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 |
-
-Feel free to edit this text and click **Fetch Markdown Content** below!";
-
- private string _savedMarkdown = string.Empty;
- private string _sanitizedMarkdown = string.Empty;
-
- private void HandleSave(string markdown)
- {
- _savedMarkdown = markdown;
- _sanitizedMarkdown = string.Empty; // Reset sanitization result
- StateHasChanged();
- }
-
- private async Task SanitizeContentAsync()
- {
- if (string.IsNullOrEmpty(_savedMarkdown)) return;
-
- try
- {
- var request = new NexusReader.Application.DTOs.Media.ValidateChapterRequest(_savedMarkdown);
- var response = await Http.PostAsJsonAsync(
- "/api/chapters/validate",
- request,
- NexusReader.Application.Common.AppJsonContext.Default.ValidateChapterRequest
- );
-
- if (response.IsSuccessStatusCode)
- {
- var result = await response.Content.ReadFromJsonAsync(
- NexusReader.Application.Common.AppJsonContext.Default.ValidateChapterResponse
- );
- _sanitizedMarkdown = result?.SanitizedContent ?? string.Empty;
- }
- else
- {
- _sanitizedMarkdown = $"Error: {response.StatusCode}";
- }
- }
- catch (Exception ex)
- {
- _sanitizedMarkdown = $"Exception: {ex.Message}";
- }
- StateHasChanged();
- }
-}
diff --git a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css b/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css
deleted file mode 100644
index 43f8ae6..0000000
--- a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css
+++ /dev/null
@@ -1,257 +0,0 @@
-/* ==========================================================================
- CreatorTest.razor.css - Isolated Styles for WYSIWYG Text Editor Test
- ========================================================================== */
-
-/* 1. BOUNDARY & SCROLLING RE-ENGINEERING */
-
-/* Stable height boundary and scrolling behavior on the editor wrapper */
-::deep .milkdown-editor-wrapper {
- min-height: 350px !important;
- max-height: 600px !important;
- overflow-y: auto !important;
- background-color: var(--bg-base) !important;
- border: 1px solid var(--border) !important;
- border-radius: var(--radius-md) !important;
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-::deep .milkdown-editor-wrapper:focus-within {
- border-color: var(--accent) !important;
- box-shadow: 0 0 0 1px var(--accent-glow) !important;
-}
-
-/* Fix Top Text Clipping on the ProseMirror editable surface */
-::deep .ProseMirror,
-::deep .crepe .editor,
-::deep .milkdown .editor {
- position: relative !important;
- top: 0 !important;
- transform: none !important;
- padding: 1.5rem !important;
- background-color: var(--bg-base) !important;
- color: var(--text-main) !important;
- outline: none !important;
-}
-
-/* Encapsulate Milkdown editor wrapper & ProseMirror container */
-::deep .crepe,
-::deep .milkdown {
- background-color: var(--bg-base) !important;
- background: var(--bg-base) !important;
- color: var(--text-main) !important;
-}
-
-/* Headings and inline typography styles */
-::deep .milkdown .editor h1,
-::deep .crepe h1,
-::deep .ProseMirror h1 {
- margin-top: 1.5rem !important;
- margin-bottom: 1rem !important;
- font-size: 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.25rem !important;
- margin-bottom: 0.75rem !important;
- font-size: 1.5rem !important;
- font-weight: 600 !important;
- color: var(--text-main) !important;
- line-height: 1.3 !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;
-}
-
-/* 2. HIGH-FIDELITY GFM TABLE FORMATTING */
-::deep .crepe table,
-::deep .milkdown table,
-::deep .ProseMirror table {
- width: 100% !important;
- border-collapse: separate !important;
- border-spacing: 0 !important;
- margin: 1.5rem 0 !important;
- border-radius: 8px !important;
- overflow: hidden !important;
- border: 1px solid var(--border) !important;
- background-color: rgba(255, 255, 255, 0.01) !important;
-}
-
-::deep .crepe th,
-::deep .milkdown th,
-::deep .ProseMirror th {
- background-color: rgba(255, 255, 255, 0.02) !important;
- font-weight: 600 !important;
- color: var(--text-main) !important;
- padding: 10px 14px !important;
- border-bottom: 2px solid var(--border) !important;
- text-align: left !important;
-}
-
-::deep .crepe td,
-::deep .milkdown td,
-::deep .ProseMirror td {
- padding: 12px 14px !important;
- color: var(--text-main) !important;
- border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
-}
-
-::deep .crepe tr:last-child td,
-::deep .milkdown tr:last-child td,
-::deep .ProseMirror tr:last-child td {
- border-bottom: none !important;
-}
-
-::deep .crepe tr:hover,
-::deep .milkdown tr:hover,
-::deep .ProseMirror tr:hover {
- background-color: rgba(16, 185, 129, 0.03) !important;
-}
-
-/* 3. ACCENT SCHEME UNIFICATION */
-
-/* Line-height specifications for GFM lists & task lists */
-::deep .crepe ul,
-::deep .crepe ol,
-::deep .milkdown ul,
-::deep .milkdown ol,
-::deep .ProseMirror ul,
-::deep .ProseMirror ol {
- line-height: 1.6 !important;
-}
-
-/* Bottom action toolbar extraction & styling */
-::deep .editor-actions {
- display: flex !important;
- justify-content: flex-end !important;
- padding: 1rem 0 0 0 !important;
- margin-top: 1rem !important;
- border-top: 1px solid var(--border) !important;
-}
-
-
-/* ==========================================================================
- Page Layout & Output Panel Styles
- ========================================================================== */
-
-.creator-test-container {
- max-width: 1000px;
- margin: 2rem auto;
- padding: 2rem;
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-}
-
-.test-header h1 {
- font-size: 1.75rem;
- color: var(--text-main);
- margin: 0 0 0.5rem 0;
-}
-
-.test-header .subtitle {
- font-size: 0.95rem;
- color: var(--text-muted);
- margin: 0;
-}
-
-.editor-section {
- background: var(--bg-surface);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- padding: 1.5rem;
- overflow: hidden;
-}
-
-.result-section {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- background: rgba(255, 255, 255, 0.02);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- padding: 1.5rem;
-}
-
-.result-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 1rem;
- margin-bottom: 0.5rem;
-}
-
-.result-section h3 {
- margin: 0;
- font-size: 1.2rem;
- color: var(--text-main);
-}
-
-.sanitized-container {
- margin-top: 1.5rem;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- border-top: 1px dashed var(--border);
- padding-top: 1.5rem;
-}
-
-.sanitized-wrapper {
- border-color: rgba(0, 255, 153, 0.25);
- box-shadow: 0 0 10px rgba(0, 255, 153, 0.05);
-}
-
-.nexus-btn.secondary-btn {
- background: rgba(255, 255, 255, 0.05);
- border: 1px solid rgba(255, 255, 255, 0.1);
- color: #ffffff;
-}
-
-.nexus-btn.secondary-btn:hover {
- background: rgba(255, 255, 255, 0.1);
- box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
-}
-
-.result-section .description {
- font-size: 0.85rem;
- color: var(--text-muted);
- margin: 0 0 0.5rem 0;
-}
-
-.pre-wrapper {
- background: #121214;
- border: 1px solid rgba(255, 255, 255, 0.08);
- border-radius: var(--radius-md);
- padding: 1.2rem;
- max-height: 300px;
- overflow-y: auto;
- overflow-x: auto;
-}
-
-.pre-wrapper pre {
- 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;
-}
-
-.placeholder {
- color: var(--text-muted);
- font-size: 0.9rem;
- font-style: italic;
-}
diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css
index f9b834e..35d5c56 100644
--- a/src/NexusReader.UI.Shared/wwwroot/app.css
+++ b/src/NexusReader.UI.Shared/wwwroot/app.css
@@ -60,9 +60,12 @@
--nexus-node-concept-text: #e0e0e0;
}
-::selection {
- background-color: var(--nexus-selection);
- color: inherit;
+::selection,
+.ProseMirror ::selection,
+.ProseMirror::selection,
+.ProseMirror *::selection {
+ background-color: var(--nexus-selection) !important;
+ color: inherit !important;
}
@@ -444,4 +447,547 @@ h1:focus {
opacity: 0.5;
transform: scale(0.95);
}
-}
\ No newline at end of file
+}
+
+/* ==========================================================================
+ Selection Pop-up Menu & Crepe Toolbar Unification (SelectionAiPanel Style)
+ ========================================================================== */
+
+/* 1. Pop-up Containers (Glassmorphism Capsule) */
+.milkdown-popover,
+.popover,
+.prosemirror-bubble-menu,
+.milkdown .popover,
+.milkdown-popover.popover,
+.milkdown-toolbar {
+ background: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ border-radius: 8px !important;
+ padding: 4px 6px !important;
+ margin: 0 !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4) !important;
+ display: inline-flex; /* Removed !important to allow Tippy.js to hide popovers via inline style */
+ align-items: center !important;
+ gap: 4px !important;
+ z-index: 10000 !important;
+ box-sizing: border-box !important;
+ animation: fadeInScaleGlobal 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+/* Light Theme (Warm Paper) Overrides for Container */
+.theme-light .milkdown-popover,
+.theme-light .popover,
+.theme-light .prosemirror-bubble-menu,
+.theme-light .milkdown .popover,
+.theme-light .milkdown-popover.popover,
+.theme-light .milkdown-toolbar {
+ background: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.04) !important;
+}
+
+/* 2. Button & Item Formatting (Reader Selection Toolbar Style) */
+.milkdown-popover button,
+.popover button,
+.prosemirror-bubble-menu button,
+.milkdown .popover button,
+.milkdown-toolbar button {
+ text-transform: none !important;
+ font-size: 0.8rem !important;
+ font-weight: 500 !important;
+ color: #e4e4e7 !important; /* zinc-200 */
+ background: transparent !important;
+ border: none !important;
+ padding: 6px 12px !important;
+ margin: 0 !important;
+ border-radius: 6px !important;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ cursor: pointer !important;
+ gap: 6px !important;
+}
+
+/* Crepe's Specific Square Icon-Only Toolbar Items */
+.milkdown-toolbar .toolbar-item {
+ text-transform: none !important;
+ color: #e4e4e7 !important; /* zinc-200 */
+ background: transparent !important;
+ border: none !important;
+ margin: 0 !important;
+ border-radius: 6px !important;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ cursor: pointer !important;
+ width: 28px !important;
+ height: 28px !important;
+ padding: 6px !important;
+ display: inline-flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ box-sizing: border-box !important;
+}
+
+/* Icon overrides inside buttons */
+.milkdown-popover button svg,
+.popover button svg,
+.prosemirror-bubble-menu button svg,
+.milkdown .popover button svg,
+.milkdown-popover button i,
+.popover button i,
+.prosemirror-bubble-menu button i,
+.milkdown .popover button i,
+.milkdown-toolbar button svg,
+.milkdown-toolbar .toolbar-item svg,
+.milkdown-toolbar button i,
+.milkdown-toolbar .toolbar-item i {
+ color: currentColor !important;
+ fill: currentColor !important;
+ width: 14px !important;
+ height: 14px !important;
+}
+
+/* Hover effects (zinc-200 / zinc-100 highlight) */
+.milkdown-popover button:hover:not(.active),
+.popover button:hover:not(.active),
+.prosemirror-bubble-menu button:hover:not(.active),
+.milkdown-toolbar button:hover:not(.active),
+.milkdown-toolbar .toolbar-item:hover:not(.active) {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #ffffff !important;
+}
+
+/* Active formatting state colors (var(--accent, #00ff99)) */
+.milkdown-popover button.active,
+.popover button.active,
+.prosemirror-bubble-menu button.active,
+.milkdown-popover button[aria-pressed="true"],
+.popover button[aria-pressed="true"],
+.prosemirror-bubble-menu button[aria-pressed="true"],
+.milkdown-toolbar button.active,
+.milkdown-toolbar .toolbar-item.active,
+.milkdown-toolbar button[aria-pressed="true"],
+.milkdown-toolbar .toolbar-item[aria-pressed="true"] {
+ color: var(--accent, #00ff99) !important;
+}
+
+.milkdown-popover button.active:hover,
+.popover button.active:hover,
+.prosemirror-bubble-menu button.active:hover,
+.milkdown-popover button[aria-pressed="true"]:hover,
+.popover button[aria-pressed="true"]:hover,
+.prosemirror-bubble-menu button[aria-pressed="true"]:hover,
+.milkdown-toolbar button.active:hover,
+.milkdown-toolbar .toolbar-item.active:hover,
+.milkdown-toolbar button[aria-pressed="true"]:hover,
+.milkdown-toolbar .toolbar-item[aria-pressed="true"]:hover {
+ background: rgba(0, 255, 153, 0.08) !important;
+ box-shadow: 0 0 12px rgba(0, 255, 153, 0.15) !important;
+ color: var(--accent, #00ff99) !important;
+}
+
+/* 3. Light Theme Overrides for Buttons */
+.theme-light .milkdown-popover button,
+.theme-light .popover button,
+.theme-light .prosemirror-bubble-menu button,
+.theme-light .milkdown-toolbar button,
+.theme-light .milkdown-toolbar .toolbar-item {
+ color: #57524e !important;
+}
+
+.theme-light .milkdown-popover button:hover:not(.active),
+.theme-light .popover button:hover:not(.active),
+.theme-light .prosemirror-bubble-menu button:hover:not(.active),
+.theme-light .milkdown-toolbar button:hover:not(.active),
+.theme-light .milkdown-toolbar .toolbar-item:hover:not(.active) {
+ background: rgba(0, 0, 0, 0.04) !important;
+ color: #1c1917 !important;
+}
+
+.theme-light .milkdown-popover button.active,
+.theme-light .popover button.active,
+.theme-light .prosemirror-bubble-menu button.active,
+.theme-light .milkdown-popover button[aria-pressed="true"],
+.theme-light .popover button[aria-pressed="true"],
+.theme-light .prosemirror-bubble-menu button[aria-pressed="true"],
+.theme-light .milkdown-toolbar button.active,
+.theme-light .milkdown-toolbar .toolbar-item.active,
+.theme-light .milkdown-toolbar button[aria-pressed="true"],
+.theme-light .milkdown-toolbar .toolbar-item[aria-pressed="true"] {
+ color: #10b981 !important;
+}
+
+.theme-light .milkdown-popover button.active:hover,
+.theme-light .popover button.active:hover,
+.theme-light .prosemirror-bubble-menu button.active:hover,
+.theme-light .milkdown-popover button[aria-pressed="true"]:hover,
+.theme-light .popover button[aria-pressed="true"]:hover,
+.theme-light .prosemirror-bubble-menu button[aria-pressed="true"]:hover,
+.theme-light .milkdown-toolbar button.active:hover,
+.theme-light .milkdown-toolbar .toolbar-item.active:hover,
+.theme-light .milkdown-toolbar button[aria-pressed="true"]:hover,
+.theme-light .milkdown-toolbar .toolbar-item[aria-pressed="true"]:hover {
+ background: rgba(16, 185, 129, 0.06) !important;
+ box-shadow: 0 0 12px rgba(16, 185, 129, 0.1) !important;
+ color: #10b981 !important;
+}
+
+/* 4. Dividers Alignment */
+.milkdown-popover .divider,
+.popover .divider,
+.prosemirror-bubble-menu .divider,
+.milkdown .popover .divider,
+.milkdown-toolbar .divider {
+ width: 1px !important;
+ height: 16px !important;
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ margin: 0 4px !important;
+ border: none !important;
+}
+
+.theme-light .milkdown-popover .divider,
+.theme-light .popover .divider,
+.theme-light .prosemirror-bubble-menu .divider,
+.theme-light .milkdown-toolbar .divider {
+ background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* ==========================================================================
+ Editor Table & General Control Elements Theming (SelectionAiPanel Style)
+ ========================================================================== */
+
+/* 1. Cell Drag Handles (Column and Row Drag Handles) */
+.milkdown .milkdown-table-block .cell-handle {
+ background-color: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+ color: #e4e4e7 !important;
+ transition: all 0.2s ease !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle {
+ background-color: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ color: #57524e !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle:hover {
+ background-color: rgba(255, 255, 255, 0.15) !important;
+ color: #ffffff !important;
+ border-color: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle:hover {
+ background-color: rgba(0, 0, 0, 0.08) !important;
+ color: #1c1917 !important;
+ border-color: #10b981 !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle svg {
+ fill: currentColor !important;
+ color: currentColor !important;
+}
+
+/* 2. Drag Handle Options Popup Menu (.button-group) */
+.milkdown .milkdown-table-block .cell-handle .button-group {
+ background: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ border-radius: 8px !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4) !important;
+ padding: 4px !important;
+ gap: 4px !important;
+ display: flex; /* Removed !important to allow toggling via data-show attribute */
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle .button-group {
+ background: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.04) !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle .button-group button {
+ background: transparent !important;
+ border: none !important;
+ margin: 0 !important;
+ border-radius: 6px !important;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ cursor: pointer !important;
+ width: 28px !important;
+ height: 28px !important;
+ padding: 6px !important;
+ display: inline-flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ box-sizing: border-box !important;
+ color: #e4e4e7 !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle .button-group button {
+ color: #57524e !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:hover {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #ffffff !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle .button-group button:hover {
+ background: rgba(0, 0, 0, 0.04) !important;
+ color: #1c1917 !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle .button-group button:active {
+ background: rgba(0, 255, 153, 0.08) !important;
+ color: var(--accent, #00ff99) !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .cell-handle .button-group button:active {
+ background: rgba(16, 185, 129, 0.06) !important;
+ color: #10b981 !important;
+}
+
+.milkdown .milkdown-table-block .cell-handle .button-group button svg {
+ color: currentColor !important;
+ fill: currentColor !important;
+ width: 14px !important;
+ height: 14px !important;
+}
+
+/* 3. Table Column/Row Insertion Lines & Add Buttons */
+.milkdown .milkdown-table-block .line-handle {
+ background-color: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .line-handle {
+ background-color: #10b981 !important;
+}
+
+.milkdown .milkdown-table-block .line-handle .add-button {
+ background-color: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ color: #e4e4e7 !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .line-handle .add-button {
+ background-color: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ color: #57524e !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+}
+
+.milkdown .milkdown-table-block .line-handle .add-button:hover {
+ background-color: rgba(255, 255, 255, 0.15) !important;
+ color: #ffffff !important;
+ border-color: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-table-block .line-handle .add-button:hover {
+ background-color: rgba(0, 0, 0, 0.08) !important;
+ color: #1c1917 !important;
+ border-color: #10b981 !important;
+}
+
+.milkdown .milkdown-table-block .line-handle .add-button svg {
+ width: 12px !important;
+ height: 12px !important;
+ color: currentColor !important;
+ fill: currentColor !important;
+}
+
+/* 4. Paragraph Block Drag Handles */
+.milkdown .milkdown-block-handle {
+ background-color: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ border-radius: 6px !important;
+ padding: 2px !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+ display: flex; /* Removed !important to allow toggling */
+ gap: 2px !important;
+}
+
+.theme-light .milkdown .milkdown-block-handle {
+ background-color: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+}
+
+.milkdown .milkdown-block-handle .operation-item {
+ border-radius: 4px !important;
+ width: 24px !important;
+ height: 24px !important;
+ padding: 4px !important;
+ display: inline-flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ color: #e4e4e7 !important;
+ transition: all 0.2s ease !important;
+}
+
+.theme-light .milkdown .milkdown-block-handle .operation-item {
+ color: #57524e !important;
+}
+
+.milkdown .milkdown-block-handle .operation-item:hover {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #ffffff !important;
+}
+
+.theme-light .milkdown .milkdown-block-handle .operation-item:hover {
+ background: rgba(0, 0, 0, 0.04) !important;
+ color: #1c1917 !important;
+}
+
+.milkdown .milkdown-block-handle .operation-item.active {
+ background: rgba(0, 255, 153, 0.08) !important;
+ color: var(--accent, #00ff99) !important;
+}
+
+.theme-light .milkdown .milkdown-block-handle .operation-item.active {
+ background: rgba(16, 185, 129, 0.06) !important;
+ color: #10b981 !important;
+}
+
+.milkdown .milkdown-block-handle .operation-item svg {
+ width: 14px !important;
+ height: 14px !important;
+ fill: currentColor !important;
+ color: currentColor !important;
+}
+
+/* 5. Slash Commands Menu */
+.milkdown .milkdown-slash-menu {
+ background: rgba(24, 24, 28, 0.85) !important;
+ backdrop-filter: blur(12px) !important;
+ -webkit-backdrop-filter: blur(12px) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ border-radius: 8px !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4) !important;
+ font-family: var(--nexus-font-sans) !important;
+ color: #ffffff !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu {
+ background: rgba(254, 254, 254, 0.95) !important;
+ border: 1px solid rgba(0, 0, 0, 0.08) !important;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.04) !important;
+ color: #2d2a26 !important;
+}
+
+.milkdown .milkdown-slash-menu .tab-group ul li {
+ color: #a1a1aa !important;
+ border-radius: 6px !important;
+ transition: all 0.2s ease !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .tab-group ul li {
+ color: #78716c !important;
+}
+
+.milkdown .milkdown-slash-menu .tab-group ul li:hover {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #ffffff !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .tab-group ul li:hover {
+ background: rgba(0, 0, 0, 0.04) !important;
+ color: #1c1917 !important;
+}
+
+.milkdown .milkdown-slash-menu .tab-group ul li.selected {
+ background: rgba(0, 255, 153, 0.08) !important;
+ color: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .tab-group ul li.selected {
+ background: rgba(16, 185, 129, 0.06) !important;
+ color: #10b981 !important;
+}
+
+.milkdown .milkdown-slash-menu .menu-groups .menu-group li {
+ color: #e4e4e7 !important;
+ border-radius: 6px !important;
+ transition: all 0.2s ease !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .menu-groups .menu-group li {
+ color: #57524e !important;
+}
+
+.milkdown .milkdown-slash-menu .menu-groups .menu-group li svg {
+ color: #a1a1aa !important;
+ fill: #a1a1aa !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .menu-groups .menu-group li svg {
+ color: #78716c !important;
+ fill: #78716c !important;
+}
+
+.milkdown .milkdown-slash-menu .menu-groups .menu-group li.hover {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #ffffff !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .menu-groups .menu-group li.hover {
+ background: rgba(0, 0, 0, 0.04) !important;
+ color: #1c1917 !important;
+}
+
+.milkdown .milkdown-slash-menu .menu-groups .menu-group li.active {
+ background: rgba(0, 255, 153, 0.08) !important;
+ color: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .menu-groups .menu-group li.active {
+ background: rgba(16, 185, 129, 0.06) !important;
+ color: #10b981 !important;
+}
+
+.milkdown .milkdown-slash-menu .menu-groups .menu-group li.active svg {
+ color: var(--accent) !important;
+ fill: var(--accent) !important;
+}
+
+.theme-light .milkdown .milkdown-slash-menu .menu-groups .menu-group li.active svg {
+ color: #10b981 !important;
+ fill: #10b981 !important;
+}
+
+/* 6. Explicit Visibility State Overrides */
+.milkdown-popover[data-show="false"],
+.popover[data-show="false"],
+.prosemirror-bubble-menu[data-show="false"],
+.milkdown-toolbar[data-show="false"],
+.milkdown-slash-menu[data-show="false"],
+.milkdown-table-block .cell-handle .button-group[data-show="false"],
+.milkdown-link-preview[data-show="false"],
+.milkdown-link-edit[data-show="false"] {
+ display: none !important;
+ opacity: 0 !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+}
+
+/* 7. Table Overflow Clipping Fix for Handles */
+.milkdown .tableWrapper {
+ overflow: visible !important;
+}
+
\ No newline at end of file
+
@if (!string.IsNullOrEmpty(_savedMarkdown))
diff --git a/src/NexusReader.UI.Shared/Pages/Creator.razor.css b/src/NexusReader.UI.Shared/Pages/Creator.razor.css
index 793551a..716c571 100644
--- a/src/NexusReader.UI.Shared/Pages/Creator.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Creator.razor.css
@@ -2,70 +2,168 @@
Creator.razor.css - Isolated Styles for Zen Mode Creator Workspace
========================================================================== */
+/* 1. BOUNDARY & SCROLLING RE-ENGINEERING */
+
+/* Strict flexbox layout context eliminating global browser scrollbars */
.creator-fullscreen-wrapper {
- max-width: 1200px;
- margin: 2rem auto;
- padding: 0 1.5rem;
+ width: 100% !important;
+ max-width: 100% !important; /* Likwidujemy sztuczne ograniczenia szerokości */
+ margin: 0;
+ padding: 1.5rem; /* Elastyczny, bezpieczny margines od krawędzi bocznych menu i ekranu */
display: flex;
flex-direction: column;
- gap: 1.5rem;
+ height: calc(100vh - 4rem);
+ box-sizing: border-box;
+ overflow: hidden;
+ gap: 1.25rem;
+}
+
+.creator-header {
+ flex-shrink: 0;
+ padding-left: 0.5rem;
}
.creator-header h1 {
- font-size: 2rem;
+ font-size: 1.75rem;
font-weight: 700;
color: var(--text-main);
- margin: 0 0 0.5rem 0;
+ margin: 0 0 0.25rem 0;
}
.creator-header .subtitle {
- font-size: 1rem;
+ font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
-/* 1. Main Workspace Card Layer Elevation */
-.milkdown-premium-container {
+/* 2. Full Viewport Workspace Card stretching smoothly */
+.creator-workspace-card {
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;
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ width: 100% !important;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.editor-growing-area {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
overflow: hidden;
}
-/* 2. Deep Component Style Isolation */
+/* 3. Deep Cascading Overrides to target dynamic editor components */
-/* Fix Top Text Clipping & padding context on the ProseMirror surface */
+::deep .markdown-editor-container {
+ height: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ flex-grow: 1 !important;
+ overflow: hidden !important;
+}
+
+::deep .milkdown-editor-wrapper {
+ display: flex !important;
+ flex-direction: column !important;
+ flex-grow: 1 !important;
+ overflow: hidden !important;
+}
+
+/* Force crepe and milkdown inner wrappers to stretch */
+::deep .crepe,
+::deep .milkdown {
+ width: 100% !important;
+ max-width: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ flex-grow: 1 !important;
+ overflow: hidden !important;
+ background-color: transparent !important;
+ background: transparent !important;
+}
+
+/* Pin the toolbar at the top */
+::deep .crepe .toolbar,
+::deep .milkdown-menu,
+::deep .crepe-menu-wrapper {
+ flex-shrink: 0 !important;
+ 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;
+}
+
+/* Relocate scrolling directly to ProseMirror editor layer and fix text clipping */
::deep .ProseMirror,
::deep .crepe .editor,
::deep .milkdown .editor {
position: relative !important;
top: 0 !important;
transform: none !important;
- padding: 2rem !important;
+ flex-grow: 1 !important;
+ overflow-y: auto !important;
+ padding: 1.5rem !important;
+ padding-right: 15px !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;
+ width: 100% !important;
+ max-width: 100% !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;
+/* Custom narrow scrollbar mapped to var(--border) */
+::deep .ProseMirror::-webkit-scrollbar,
+::deep .crepe .editor::-webkit-scrollbar,
+::deep .milkdown .editor::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
}
+::deep .ProseMirror::-webkit-scrollbar-track,
+::deep .crepe .editor::-webkit-scrollbar-track,
+::deep .milkdown .editor::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::deep .ProseMirror::-webkit-scrollbar-thumb,
+::deep .crepe .editor::-webkit-scrollbar-thumb,
+::deep .milkdown .editor::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 3px;
+}
+
+::deep .ProseMirror::-webkit-scrollbar-thumb:hover,
+::deep .crepe .editor::-webkit-scrollbar-thumb:hover,
+::deep .milkdown .editor::-webkit-scrollbar-thumb:hover {
+ background: var(--text-muted);
+}
+
+/* Editorial Typography */
::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-size: 2.25rem !important;
font-weight: 700 !important;
color: var(--text-main) !important;
line-height: 1.25 !important;
@@ -104,35 +202,15 @@
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;
+ max-width: 100% !important;
border-collapse: collapse !important;
- margin: 2rem 0 !important;
+ margin: 1.5rem 0 !important;
}
::deep .milkdown-premium-container th,
@@ -190,31 +268,42 @@
line-height: 1.7 !important;
}
-/* 3. Bottom Actions Panel styling */
+/* 4. Bottom Actions Panel locked at floor zone of the card structure */
.creator-actions-bar {
display: flex;
- justify-content: flex-end;
+ justify-content: flex-end;
+ margin-top: 1.5rem;
padding: 1rem 0 0 0;
- margin-top: 1rem;
border-top: 1px solid var(--border);
+ flex-shrink: 0;
+ width: 100%;
}
-.premium-fetch-btn {
+.btn-nexus-premium {
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;
+ background-color: var(--accent) !important;
+ background: var(--accent) !important;
+ color: #000000 !important;
+ border: none;
+ border-radius: var(--radius-md);
+ padding: 8px 16px;
+ font-weight: 600;
+ cursor: pointer;
+ font-family: var(--nexus-font-sans);
+ font-size: 0.9rem;
+ min-height: 36px;
}
-.premium-fetch-btn:hover {
+.btn-nexus-premium:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 4px 15px var(--accent-glow);
}
-.premium-fetch-btn:hover .arrow-icon {
+.btn-nexus-premium:hover .arrow-icon {
transform: translateX(4px);
}
@@ -222,28 +311,31 @@
transition: transform 0.2s ease;
}
-/* 4. Dedicated Preview Module */
+/* 5. Dedicated Preview Card */
.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;
+ padding: 1.25rem;
+ flex-shrink: 0;
+ max-height: 180px;
+ display: flex;
+ flex-direction: column;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
.preview-header h3 {
- margin: 0 0 1rem 0;
- font-size: 1.25rem;
+ margin: 0 0 0.75rem 0;
+ font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
font-family: var(--nexus-font-sans);
}
.pre-wrapper {
- max-height: 400px;
overflow-y: auto;
overflow-x: auto;
+ flex-grow: 1;
}
.code-preview-block {
diff --git a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor b/src/NexusReader.UI.Shared/Pages/CreatorTest.razor
deleted file mode 100644
index df100b5..0000000
--- a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor
+++ /dev/null
@@ -1,128 +0,0 @@
-@page "/dev/creator-test"
-@using Microsoft.AspNetCore.Authorization
-@attribute [AllowAnonymous]
-@inject HttpClient Http
-
-
+
+
+
-
-
-@code {
- private readonly string _initialMarkdown = @"# Milkdown WYSIWYG Test Page (Stage 2)
-
-This is a demonstration of the **Milkdown** editor embedded inside a Blazor WASM component.
-
-## Secure Image Upload (Drag & Drop / Paste)
-
-You can drag and drop or copy-paste an image (JPEG, PNG, WEBP) directly into this editor area. The file will be intercepted, sent as a byte stream to the backend `/api/media/upload` endpoint, validated for magic numbers and file size limits (max 5MB), saved locally, and rendered inside the editor.
-
-## XSS Security Test
-
-Here is some malicious HTML to test the backend XSS Guard:
-
-
-
-
- Milkdown WYSIWYG Integration (Stage 2)
-Verifying secure image upload (drag & drop / paste) and backend XSS sanitization.
-
-
-
-
-
-
-
- Retrieved Markdown Content
- @if (!string.IsNullOrEmpty(_savedMarkdown)) - { - - } -This block shows the content received from the editor when you click "Fetch Markdown Content".
-
- @if (string.IsNullOrEmpty(_savedMarkdown))
- {
- No content fetched yet. Click "Fetch Markdown Content" above to retrieve data.
- }
- else
- {
-
-
- @if (!string.IsNullOrEmpty(_sanitizedMarkdown))
- {
- @_savedMarkdown
-
- }
- Sanitized Content (XSS Shielded)
-This block shows the content after passing through the backend `HtmlSanitizer` API.
-
-
- @_sanitizedMarkdown