diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
index 19880ad..fb9d039 100644
--- a/ts_web/elements/wysiwyg/blocks/text/code.block.ts
+++ b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
@@ -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 += `
${i}
`;
}
+ // Generate language options
+ const languageOptions = PROGRAMMING_LANGUAGES.map(lang => {
+ const value = lang.toLowerCase();
+ return ``;
+ }).join('');
+
return `
`)}
diff --git a/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts b/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
index 09de756..ef358ba 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
@@ -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' },
];
}
diff --git a/ts_web/elements/wysiwyg/wysiwyg.styles.ts b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
index 5afddfd..fc2e263 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.styles.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
@@ -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')};
}
`;
\ No newline at end of file