design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 18:38:39 +00:00
parent 56f5f5887b
commit fe3cd0591f
5 changed files with 161 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
ts_web/elements/wysiwyg/blocks/text/code.block.ts
View File

@ -4,6 +4,7 @@ import { cssManager } from '@design.estate/dees-element';
import { WysiwygSelection } from '../../wysiwyg.selection.js'; import { WysiwygSelection } from '../../wysiwyg.selection.js';
import hlight from 'highlight.js'; import hlight from 'highlight.js';
import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js'; import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
import { PROGRAMMING_LANGUAGES } from '../../wysiwyg.constants.js';
/** /**
* CodeBlockHandler with improved architecture * CodeBlockHandler with improved architecture
@ -21,7 +22,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
private highlightTimer: any = null; private highlightTimer: any = null;
render(block: IBlock, isSelected: boolean): string { render(block: IBlock, isSelected: boolean): string {
const language = block.metadata?.language || 'javascript'; const language = block.metadata?.language || 'typescript';
const content = block.content || ''; const content = block.content || '';
const lineCount = content.split('\n').length; const lineCount = content.split('\n').length;
@ -31,10 +32,18 @@ export class CodeBlockHandler extends BaseBlockHandler {
lineNumbersHtml += `<div class="line-number">${i}</div>`; lineNumbersHtml += `<div class="line-number">${i}</div>`;
} }
// Generate language options
const languageOptions = PROGRAMMING_LANGUAGES.map(lang => {
const value = lang.toLowerCase();
return `<option value="${value}" ${value === language ? 'selected' : ''}>${lang}</option>`;
}).join('');
return ` return `
<div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}"> <div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
<div class="code-header"> <div class="code-header">
<span class="language-label">${language}</span> <select class="language-selector" data-block-id="${block.id}">
${languageOptions}
</select>
<button class="copy-button" title="Copy code"> <button class="copy-button" title="Copy code">
<svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
@ -61,9 +70,29 @@ export class CodeBlockHandler extends BaseBlockHandler {
const editor = element.querySelector('.code-editor') as HTMLElement; const editor = element.querySelector('.code-editor') as HTMLElement;
const container = element.querySelector('.code-block-container') as HTMLElement; const container = element.querySelector('.code-block-container') as HTMLElement;
const copyButton = element.querySelector('.copy-button') as HTMLButtonElement; const copyButton = element.querySelector('.copy-button') as HTMLButtonElement;
const languageSelector = element.querySelector('.language-selector') as HTMLSelectElement;
if (!editor || !container) return; if (!editor || !container) return;
// Setup language selector
if (languageSelector) {
languageSelector.addEventListener('change', (e) => {
const newLanguage = (e.target as HTMLSelectElement).value;
block.metadata = { ...block.metadata, language: newLanguage };
container.setAttribute('data-language', newLanguage);
// Update the syntax highlighting if content exists and not focused
if (block.content && document.activeElement !== editor) {
this.applyHighlighting(element, block);
}
// Notify about the change
if (handlers.onInput) {
handlers.onInput(new InputEvent('input'));
}
});
}
// Setup copy button // Setup copy button
if (copyButton) { if (copyButton) {
copyButton.addEventListener('click', async () => { copyButton.addEventListener('click', async () => {
@ -286,7 +315,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
// Get plain text content // Get plain text content
const content = editor.textContent || ''; const content = editor.textContent || '';
const language = block.metadata?.language || 'javascript'; const language = block.metadata?.language || 'typescript';
// Apply highlighting // Apply highlighting
try { try {
@ -337,7 +366,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
type: 'code', type: 'code',
content: content, content: content,
metadata: { metadata: {
language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'javascript' language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'typescript'
} }
}; };
this.applyHighlighting(element, block); this.applyHighlighting(element, block);
@ -441,13 +470,30 @@ export class CodeBlockHandler extends BaseBlockHandler {
align-items: center; align-items: center;
} }
.language-label { .language-selector {
font-size: 12px; font-size: 12px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
transition: all 0.15s ease;
outline: none;
}
.language-selector:hover {
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
border-color: ${cssManager.bdTheme('#e5e7eb', '#374151')};
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
}
.language-selector:focus {
border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
} }
/* Copy Button - Minimal */ /* Copy Button - Minimal */

8
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
View File

@ -507,13 +507,9 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
// Close menu // Close menu
this.closeSlashMenu(false); this.closeSlashMenu(false);
// If it's a code block, ask for language // If it's a code block, default to TypeScript
if (type === 'code') { if (type === 'code') {
const language = await WysiwygModalManager.showLanguageSelectionModal(); currentBlock.metadata = { language: 'typescript' };
if (!language) {
return; // User cancelled
}
currentBlock.metadata = { language };
} }
// Transform the current block // Transform the current block

33
ts_web/elements/wysiwyg/dees-slash-menu.ts
View File

@ -8,6 +8,7 @@ import {
state, state,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { zIndexRegistry } from '../00zindex.js'; import { zIndexRegistry } from '../00zindex.js';
import '../dees-icon.js';
import { type ISlashMenuItem } from './wysiwyg.types.js'; import { type ISlashMenuItem } from './wysiwyg.types.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js'; import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@ -61,10 +62,10 @@ export class DeesSlashMenu extends DeesElement {
.slash-menu { .slash-menu {
position: fixed; position: fixed;
background: ${cssManager.bdTheme('#ffffff', '#262626')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px; border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px; padding: 4px;
min-width: 220px; min-width: 220px;
max-height: 300px; max-height: 300px;
@ -77,7 +78,7 @@ export class DeesSlashMenu extends DeesElement {
@keyframes fadeInScale { @keyframes fadeInScale {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.95) translateY(-10px); transform: scale(0.98) translateY(-2px);
} }
to { to {
opacity: 1; opacity: 1;
@ -86,37 +87,35 @@ export class DeesSlashMenu extends DeesElement {
} }
.slash-menu-item { .slash-menu-item {
padding: 10px 12px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
border-radius: 4px; border-radius: 3px;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
font-size: 14px; font-size: 14px;
} }
.slash-menu-item:hover, .slash-menu-item:hover,
.slash-menu-item.selected { .slash-menu-item.selected {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.slash-menu-item .icon { .slash-menu-item .icon {
width: 24px; width: 20px;
height: 24px; height: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
color: ${cssManager.bdTheme('#666', '#999')};
font-weight: 600;
} }
.slash-menu-item:hover .icon, .slash-menu-item:hover .icon,
.slash-menu-item.selected .icon { .slash-menu-item.selected .icon {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
`, `,
]; ];
@ -142,7 +141,7 @@ export class DeesSlashMenu extends DeesElement {
data-item-type="${item.type}" data-item-type="${item.type}"
data-item-index="${index}" data-item-index="${index}"
> >
<span class="icon">${item.icon}</span> <dees-icon class="icon" .icon="${item.icon}" iconSize="16"></dees-icon>
<span>${item.label}</span> <span>${item.label}</span>
</div> </div>
`)} `)}

26
ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
View File

@ -49,19 +49,19 @@ export class WysiwygShortcuts {
static getSlashMenuItems(): ISlashMenuItem[] { static getSlashMenuItems(): ISlashMenuItem[] {
return [ return [
{ type: 'paragraph', label: 'Paragraph', icon: '' }, { type: 'paragraph', label: 'Paragraph', icon: 'lucide:pilcrow' },
{ type: 'heading-1', label: 'Heading 1', icon: 'H₁' }, { type: 'heading-1', label: 'Heading 1', icon: 'lucide:heading1' },
{ type: 'heading-2', label: 'Heading 2', icon: 'H₂' }, { type: 'heading-2', label: 'Heading 2', icon: 'lucide:heading2' },
{ type: 'heading-3', label: 'Heading 3', icon: 'H₃' }, { type: 'heading-3', label: 'Heading 3', icon: 'lucide:heading3' },
{ type: 'quote', label: 'Quote', icon: '"' }, { type: 'quote', label: 'Quote', icon: 'lucide:quote' },
{ type: 'code', label: 'Code', icon: '<>' }, { type: 'code', label: 'Code Block', icon: 'lucide:fileCode' },
{ type: 'list', label: 'List', icon: '•' }, { type: 'list', label: 'Bullet List', icon: 'lucide:list' },
{ type: 'image', label: 'Image', icon: '🖼' }, { type: 'image', label: 'Image', icon: 'lucide:image' },
{ type: 'divider', label: 'Divider', icon: '—' }, { type: 'divider', label: 'Divider', icon: 'lucide:minus' },
{ type: 'youtube', label: 'YouTube', icon: '▶️' }, { type: 'youtube', label: 'YouTube', icon: 'lucide:youtube' },
{ type: 'markdown', label: 'Markdown', icon: 'M↓' }, { type: 'markdown', label: 'Markdown', icon: 'lucide:fileText' },
{ type: 'html', label: 'HTML', icon: '</>' }, { type: 'html', label: 'HTML', icon: 'lucide:code' },
{ type: 'attachment', label: 'File Attachment', icon: '📎' }, { type: 'attachment', label: 'File Attachment', icon: 'lucide:paperclip' },
]; ];
} }

155
ts_web/elements/wysiwyg/wysiwyg.styles.ts
View File

@ -7,23 +7,25 @@ export const wysiwygStyles = css`
} }
.wysiwyg-container { .wysiwyg-container {
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px; border-radius: 6px;
min-height: 200px; min-height: 200px;
padding: 32px 40px; padding: 24px;
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.wysiwyg-container:hover { .wysiwyg-container:hover {
border-color: ${cssManager.bdTheme('#d0d0d0', '#444')}; border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
} }
.wysiwyg-container:focus-within { .wysiwyg-container:focus-within {
border-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; outline: 2px solid transparent;
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')}; outline-offset: 2px;
box-shadow: 0 0 0 2px ${cssManager.bdTheme('#f4f4f5', '#18181b')}, 0 0 0 4px ${cssManager.bdTheme('rgba(59, 130, 246, 0.5)', 'rgba(59, 130, 246, 0.5)')};
border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
/* Visual hint for text selection */ /* Visual hint for text selection */
@ -44,7 +46,7 @@ export const wysiwygStyles = css`
position: relative; position: relative;
transition: all 0.15s ease; transition: all 0.15s ease;
min-height: 1.6em; min-height: 1.6em;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
/* First and last blocks don't need extra spacing */ /* First and last blocks don't need extra spacing */
@ -57,8 +59,9 @@ export const wysiwygStyles = css`
} }
.block.selected { .block.selected {
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')}; background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')}; outline: 2px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
outline-offset: -2px;
border-radius: 4px; border-radius: 4px;
margin-left: -8px; margin-left: -8px;
margin-right: -8px; margin-right: -8px;
@ -78,7 +81,7 @@ export const wysiwygStyles = css`
.block.paragraph:empty::before { .block.paragraph:empty::before {
content: "Type '/' for commands..."; content: "Type '/' for commands...";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
@ -89,12 +92,12 @@ export const wysiwygStyles = css`
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.block.heading-1:empty::before { .block.heading-1:empty::before {
content: "Heading 1"; content: "Heading 1";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
@ -105,12 +108,12 @@ export const wysiwygStyles = css`
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.block.heading-2:empty::before { .block.heading-2:empty::before {
content: "Heading 2"; content: "Heading 2";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-size: 24px; font-size: 24px;
line-height: 1.3; line-height: 1.3;
@ -121,12 +124,12 @@ export const wysiwygStyles = css`
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.block.heading-3:empty::before { .block.heading-3:empty::before {
content: "Heading 3"; content: "Heading 3";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-size: 20px; font-size: 20px;
line-height: 1.4; line-height: 1.4;
@ -134,10 +137,10 @@ export const wysiwygStyles = css`
} }
.block.quote { .block.quote {
border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')}; border-left: 2px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
padding-left: 20px; padding-left: 20px;
font-style: italic; font-style: italic;
color: ${cssManager.bdTheme('#555', '#b0b0b0')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
line-height: 1.6; line-height: 1.6;
@ -145,7 +148,7 @@ export const wysiwygStyles = css`
.block.quote:empty::before { .block.quote:empty::before {
content: "Quote"; content: "Quote";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
@ -162,33 +165,33 @@ export const wysiwygStyles = css`
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
background: ${cssManager.bdTheme('#e1e4e8', '#333333')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#586069', '#8b949e')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
padding: 4px 12px; padding: 4px 12px;
font-size: 12px; font-size: 12px;
border-radius: 0 6px 0 6px; border-radius: 0 4px 0 4px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
text-transform: lowercase; text-transform: lowercase;
z-index: 1; z-index: 1;
} }
.block.code { .block.code {
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')}; background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px; border-radius: 4px;
padding: 16px 20px; padding: 16px;
padding-top: 32px; /* Make room for language indicator */ padding-top: 32px; /* Make room for language indicator */
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
white-space: pre-wrap; white-space: pre-wrap;
color: ${cssManager.bdTheme('#24292e', '#e1e4e8')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
overflow-x: auto; overflow-x: auto;
} }
.block.code:empty::before { .block.code:empty::before {
content: "// Code block"; content: "// Code block";
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none; pointer-events: none;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 14px; font-size: 14px;
@ -233,16 +236,16 @@ export const wysiwygStyles = css`
.block.divider hr { .block.divider hr {
border: none; border: none;
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
margin: 0; margin: 0;
} }
.slash-menu { .slash-menu {
position: absolute; position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#262626')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 8px; border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px; padding: 4px;
z-index: 1000; z-index: 1000;
min-width: 220px; min-width: 220px;
@ -253,21 +256,21 @@ export const wysiwygStyles = css`
} }
.slash-menu-item { .slash-menu-item {
padding: 10px 12px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
border-radius: 4px; border-radius: 3px;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
font-size: 14px; font-size: 14px;
} }
.slash-menu-item:hover, .slash-menu-item:hover,
.slash-menu-item.selected { .slash-menu-item.selected {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.slash-menu-item .icon { .slash-menu-item .icon {
@ -277,23 +280,23 @@ export const wysiwygStyles = css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-weight: 600; font-weight: 600;
} }
.slash-menu-item:hover .icon, .slash-menu-item:hover .icon,
.slash-menu-item.selected .icon { .slash-menu-item.selected .icon {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
.toolbar { .toolbar {
position: absolute; position: absolute;
top: -40px; top: -40px;
left: 0; left: 0;
background: ${cssManager.bdTheme('#ffffff', '#262626')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px; border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px; padding: 4px;
display: none; display: none;
gap: 4px; gap: 4px;
@ -310,17 +313,17 @@ export const wysiwygStyles = css`
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 3px;
transition: all 0.15s ease; transition: all 0.15s ease;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.toolbar-button:hover { .toolbar-button:hover {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
/* Drag and Drop Styles */ /* Drag and Drop Styles */
@ -360,7 +363,7 @@ export const wysiwygStyles = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
border-radius: 4px; border-radius: 4px;
} }
@ -375,13 +378,13 @@ export const wysiwygStyles = css`
} }
.drag-handle:hover { .drag-handle:hover {
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
} }
.drag-handle:active { .drag-handle:active {
cursor: grabbing; cursor: grabbing;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
} }
.block-wrapper.dragging { .block-wrapper.dragging {
@ -407,9 +410,9 @@ export const wysiwygStyles = css`
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.08)')}; background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
border: 2px dashed ${cssManager.bdTheme('#0066cc', '#4d94ff')}; border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
border-radius: 8px; border-radius: 4px;
transition: top 0.2s ease, height 0.2s ease; transition: top 0.2s ease, height 0.2s ease;
pointer-events: none; pointer-events: none;
z-index: 1999; z-index: 1999;
@ -440,7 +443,7 @@ export const wysiwygStyles = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#71717a', '#71717a')};
border-radius: 4px; border-radius: 4px;
} }
@ -449,27 +452,27 @@ export const wysiwygStyles = css`
} }
.block-settings:hover { .block-settings:hover {
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
} }
.block-settings:active { .block-settings:active {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
} }
/* Text Selection Styles */ /* Text Selection Styles */
.block ::selection { .block ::selection {
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')}; background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
color: inherit; color: inherit;
} }
/* Formatting Menu */ /* Formatting Menu */
.formatting-menu { .formatting-menu {
position: absolute; position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#262626')}; background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px; border-radius: 4px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px; padding: 4px;
display: flex; display: flex;
gap: 2px; gap: 2px;
@ -480,7 +483,7 @@ export const wysiwygStyles = css`
@keyframes fadeInScale { @keyframes fadeInScale {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.95) translateY(5px); transform: scale(0.98) translateY(2px);
} }
to { to {
opacity: 1; opacity: 1;
@ -494,20 +497,20 @@ export const wysiwygStyles = css`
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 3px;
transition: all 0.15s ease; transition: all 0.15s ease;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
} }
.format-button:hover { .format-button:hover {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
.format-button:active { .format-button:active {
@ -535,7 +538,7 @@ export const wysiwygStyles = css`
.block strong, .block strong,
.block b { .block b {
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.block em, .block em,
@ -554,22 +557,22 @@ export const wysiwygStyles = css`
} }
.block code { .block code {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
padding: 2px 6px; padding: 2px 6px;
border-radius: 3px; border-radius: 3px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 0.9em; font-size: 0.9em;
color: ${cssManager.bdTheme('#d14', '#ff6b6b')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.block a { .block a {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
text-decoration: none; text-decoration: none;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: border-color 0.15s ease; transition: border-color 0.15s ease;
} }
.block a:hover { .block a:hover {
border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; border-bottom-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
} }
`; `;