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 hlight from 'highlight.js';
import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
import { PROGRAMMING_LANGUAGES } from '../../wysiwyg.constants.js';
/**
* CodeBlockHandler with improved architecture
@ -21,7 +22,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
private highlightTimer: any = null;
render(block: IBlock, isSelected: boolean): string {
const language = block.metadata?.language || 'javascript';
const language = block.metadata?.language || 'typescript';
const content = block.content || '';
const lineCount = content.split('\n').length;
@ -31,10 +32,18 @@ export class CodeBlockHandler extends BaseBlockHandler {
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 `
<div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
<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">
<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>
@ -61,9 +70,29 @@ export class CodeBlockHandler extends BaseBlockHandler {
const editor = element.querySelector('.code-editor') as HTMLElement;
const container = element.querySelector('.code-block-container') as HTMLElement;
const copyButton = element.querySelector('.copy-button') as HTMLButtonElement;
const languageSelector = element.querySelector('.language-selector') as HTMLSelectElement;
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
if (copyButton) {
copyButton.addEventListener('click', async () => {
@ -286,7 +315,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
// Get plain text content
const content = editor.textContent || '';
const language = block.metadata?.language || 'javascript';
const language = block.metadata?.language || 'typescript';
// Apply highlighting
try {
@ -337,7 +366,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
type: 'code',
content: content,
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);
@ -441,13 +470,30 @@ export class CodeBlockHandler extends BaseBlockHandler {
align-items: center;
}
.language-label {
.language-selector {
font-size: 12px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
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 */

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

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

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

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

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

@ -49,19 +49,19 @@ export class WysiwygShortcuts {
static getSlashMenuItems(): ISlashMenuItem[] {
return [
{ type: 'paragraph', label: 'Paragraph', icon: '' },
{ type: 'heading-1', label: 'Heading 1', icon: 'H₁' },
{ type: 'heading-2', label: 'Heading 2', icon: 'H₂' },
{ type: 'heading-3', label: 'Heading 3', icon: 'H₃' },
{ type: 'quote', label: 'Quote', icon: '"' },
{ type: 'code', label: 'Code', icon: '<>' },
{ type: 'list', label: 'List', icon: '•' },
{ type: 'image', label: 'Image', icon: '🖼' },
{ type: 'divider', label: 'Divider', icon: '—' },
{ type: 'youtube', label: 'YouTube', icon: '▶️' },
{ type: 'markdown', label: 'Markdown', icon: 'M↓' },
{ type: 'html', label: 'HTML', icon: '</>' },
{ type: 'attachment', label: 'File Attachment', icon: '📎' },
{ type: 'paragraph', label: 'Paragraph', icon: 'lucide:pilcrow' },
{ type: 'heading-1', label: 'Heading 1', icon: 'lucide:heading1' },
{ type: 'heading-2', label: 'Heading 2', icon: 'lucide:heading2' },
{ type: 'heading-3', label: 'Heading 3', icon: 'lucide:heading3' },
{ type: 'quote', label: 'Quote', icon: 'lucide:quote' },
{ type: 'code', label: 'Code Block', icon: 'lucide:fileCode' },
{ type: 'list', label: 'Bullet List', icon: 'lucide:list' },
{ type: 'image', label: 'Image', icon: 'lucide:image' },
{ type: 'divider', label: 'Divider', icon: 'lucide:minus' },
{ type: 'youtube', label: 'YouTube', icon: 'lucide:youtube' },
{ type: 'markdown', label: 'Markdown', icon: 'lucide:fileText' },
{ type: 'html', label: 'HTML', icon: 'lucide:code' },
{ 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 {
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
border-radius: 8px;
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px;
min-height: 200px;
padding: 32px 40px;
padding: 24px;
position: relative;
transition: all 0.2s ease;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.wysiwyg-container:hover {
border-color: ${cssManager.bdTheme('#d0d0d0', '#444')};
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
}
.wysiwyg-container:focus-within {
border-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')};
outline: 2px solid transparent;
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 */
@ -44,7 +46,7 @@ export const wysiwygStyles = css`
position: relative;
transition: all 0.15s ease;
min-height: 1.6em;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
/* First and last blocks don't need extra spacing */
@ -57,8 +59,9 @@ export const wysiwygStyles = css`
}
.block.selected {
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
outline: 2px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
outline-offset: -2px;
border-radius: 4px;
margin-left: -8px;
margin-right: -8px;
@ -78,7 +81,7 @@ export const wysiwygStyles = css`
.block.paragraph:empty::before {
content: "Type '/' for commands...";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-size: 16px;
line-height: 1.6;
@ -89,12 +92,12 @@ export const wysiwygStyles = css`
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.block.heading-1:empty::before {
content: "Heading 1";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-size: 32px;
line-height: 1.2;
@ -105,12 +108,12 @@ export const wysiwygStyles = css`
font-size: 24px;
font-weight: 600;
line-height: 1.3;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.block.heading-2:empty::before {
content: "Heading 2";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-size: 24px;
line-height: 1.3;
@ -121,12 +124,12 @@ export const wysiwygStyles = css`
font-size: 20px;
font-weight: 600;
line-height: 1.4;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.block.heading-3:empty::before {
content: "Heading 3";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-size: 20px;
line-height: 1.4;
@ -134,10 +137,10 @@ export const wysiwygStyles = css`
}
.block.quote {
border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
border-left: 2px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
padding-left: 20px;
font-style: italic;
color: ${cssManager.bdTheme('#555', '#b0b0b0')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-left: 0;
margin-right: 0;
line-height: 1.6;
@ -145,7 +148,7 @@ export const wysiwygStyles = css`
.block.quote:empty::before {
content: "Quote";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-size: 16px;
line-height: 1.6;
@ -162,33 +165,33 @@ export const wysiwygStyles = css`
position: absolute;
top: 0;
right: 0;
background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
color: ${cssManager.bdTheme('#586069', '#8b949e')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
padding: 4px 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;
text-transform: lowercase;
z-index: 1;
}
.block.code {
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
border-radius: 6px;
padding: 16px 20px;
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 4px;
padding: 16px;
padding-top: 32px; /* Make room for language indicator */
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
overflow-x: auto;
}
.block.code:empty::before {
content: "// Code block";
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
pointer-events: none;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 14px;
@ -233,16 +236,16 @@ export const wysiwygStyles = css`
.block.divider hr {
border: none;
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
margin: 0;
}
.slash-menu {
position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#262626')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px;
z-index: 1000;
min-width: 220px;
@ -253,21 +256,21 @@ export const wysiwygStyles = css`
}
.slash-menu-item {
padding: 10px 12px;
padding: 8px 10px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
gap: 12px;
border-radius: 4px;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
border-radius: 3px;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
font-size: 14px;
}
.slash-menu-item:hover,
.slash-menu-item.selected {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
color: ${cssManager.bdTheme('#000000', '#ffffff')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.slash-menu-item .icon {
@ -277,23 +280,23 @@ export const wysiwygStyles = css`
align-items: center;
justify-content: center;
font-size: 16px;
color: ${cssManager.bdTheme('#666', '#999')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-weight: 600;
}
.slash-menu-item:hover .icon,
.slash-menu-item.selected .icon {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
}
.toolbar {
position: absolute;
top: -40px;
left: 0;
background: ${cssManager.bdTheme('#ffffff', '#262626')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px;
display: none;
gap: 4px;
@ -310,17 +313,17 @@ export const wysiwygStyles = css`
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
border-radius: 3px;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.toolbar-button:hover {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
}
/* Drag and Drop Styles */
@ -360,7 +363,7 @@ export const wysiwygStyles = css`
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
border-radius: 4px;
}
@ -375,13 +378,13 @@ export const wysiwygStyles = css`
}
.drag-handle:hover {
color: ${cssManager.bdTheme('#666', '#999')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
}
.drag-handle:active {
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 {
@ -407,9 +410,9 @@ export const wysiwygStyles = css`
position: absolute;
left: 0;
right: 0;
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.08)')};
border: 2px dashed ${cssManager.bdTheme('#0066cc', '#4d94ff')};
border-radius: 8px;
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
border-radius: 4px;
transition: top 0.2s ease, height 0.2s ease;
pointer-events: none;
z-index: 1999;
@ -440,7 +443,7 @@ export const wysiwygStyles = css`
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('#999', '#666')};
color: ${cssManager.bdTheme('#71717a', '#71717a')};
border-radius: 4px;
}
@ -449,27 +452,27 @@ export const wysiwygStyles = css`
}
.block-settings:hover {
color: ${cssManager.bdTheme('#666', '#999')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
}
.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 */
.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;
}
/* Formatting Menu */
.formatting-menu {
position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#262626')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
border-radius: 6px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 4px;
display: flex;
gap: 2px;
@ -480,7 +483,7 @@ export const wysiwygStyles = css`
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95) translateY(5px);
transform: scale(0.98) translateY(2px);
}
to {
opacity: 1;
@ -494,20 +497,20 @@ export const wysiwygStyles = css`
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
border-radius: 3px;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
font-weight: 600;
font-size: 14px;
position: relative;
}
.format-button:hover {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
}
.format-button:active {
@ -535,7 +538,7 @@ export const wysiwygStyles = css`
.block strong,
.block b {
font-weight: 600;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.block em,
@ -554,22 +557,22 @@ export const wysiwygStyles = css`
}
.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;
border-radius: 3px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 0.9em;
color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.block a {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.block a:hover {
border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
border-bottom-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
}
`;