7ce282c500
- Added modal to select programming language when creating code blocks - Added settings button (3 dots) on each block for configuration - Fixed cursor not jumping to new block after pressing Enter - Special handling for code blocks: Enter creates new line, Shift+Enter creates new block - Display language indicator on code blocks - Updated demo to use dees-panel instead of demo-section divs - Added language selection in block settings modal for existing code blocks
563 lines
13 KiB
TypeScript
563 lines
13 KiB
TypeScript
import { css, cssManager } from '@design.estate/dees-element';
|
|
|
|
export const wysiwygStyles = css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.wysiwyg-container {
|
|
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
padding: 32px 40px;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.wysiwyg-container:hover {
|
|
border-color: ${cssManager.bdTheme('#d0d0d0', '#444')};
|
|
}
|
|
|
|
.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)')};
|
|
}
|
|
|
|
/* Visual hint for text selection */
|
|
.editor-content:hover {
|
|
cursor: text;
|
|
}
|
|
|
|
.editor-content {
|
|
outline: none;
|
|
min-height: 160px;
|
|
margin: 0 -8px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.block {
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
position: relative;
|
|
transition: all 0.15s ease;
|
|
min-height: 1.6em;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
}
|
|
|
|
/* First and last blocks don't need extra spacing */
|
|
.block-wrapper:first-child .block {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.block-wrapper:last-child .block {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.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)')};
|
|
border-radius: 4px;
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.block[contenteditable] {
|
|
outline: none;
|
|
}
|
|
|
|
.block.paragraph {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.paragraph:empty::before {
|
|
content: "Type '/' for commands...";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.heading-1 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-1:empty::before {
|
|
content: "Heading 1";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 32px;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.block.heading-2 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-2:empty::before {
|
|
content: "Heading 2";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 24px;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block.heading-3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-3:empty::before {
|
|
content: "Heading 3";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block.quote {
|
|
border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
padding-left: 20px;
|
|
font-style: italic;
|
|
color: ${cssManager.bdTheme('#555', '#b0b0b0')};
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.block.quote:empty::before {
|
|
content: "Quote";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
.code-block-container {
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.code-language {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
|
|
color: ${cssManager.bdTheme('#586069', '#8b949e')};
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
border-radius: 0 6px 0 6px;
|
|
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;
|
|
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')};
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.block.code:empty::before {
|
|
content: "// Code block";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.list {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.block.list ul,
|
|
.block.list ol {
|
|
margin: 0;
|
|
padding: 0 0 0 24px;
|
|
list-style-position: outside;
|
|
}
|
|
|
|
.block.list ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.block.list ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.block.list li {
|
|
margin-bottom: 8px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.block.list li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.block.divider {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.block.divider hr {
|
|
border: none;
|
|
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
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);
|
|
padding: 4px;
|
|
z-index: 1000;
|
|
min-width: 220px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.slash-menu-item {
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-radius: 4px;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
font-size: 14px;
|
|
}
|
|
|
|
.slash-menu-item:hover,
|
|
.slash-menu-item.selected {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.slash-menu-item .icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
font-weight: 600;
|
|
}
|
|
|
|
.slash-menu-item:hover .icon,
|
|
.slash-menu-item.selected .icon {
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
|
|
.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);
|
|
padding: 4px;
|
|
display: none;
|
|
gap: 4px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toolbar.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.toolbar-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
}
|
|
|
|
.toolbar-button:hover {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
|
|
/* Drag and Drop Styles */
|
|
.block-wrapper {
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Ensure proper spacing context for blocks */
|
|
.block-wrapper + .block-wrapper .block {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* Override for headings following other blocks */
|
|
.block-wrapper + .block-wrapper .block.heading-1,
|
|
.block-wrapper + .block-wrapper .block.heading-2,
|
|
.block-wrapper + .block-wrapper .block.heading-3 {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
/* Code and quote blocks need consistent spacing */
|
|
.block-wrapper + .block-wrapper .block.code,
|
|
.block-wrapper + .block-wrapper .block.quote {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.drag-handle {
|
|
position: absolute;
|
|
left: -28px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: grab;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.drag-handle::before {
|
|
content: "⋮⋮";
|
|
font-size: 12px;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.block-wrapper:hover .drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.drag-handle:hover {
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
|
}
|
|
|
|
.block-wrapper.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.block-wrapper.drag-over-before::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
right: -8px;
|
|
height: 2px;
|
|
background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
border-radius: 1px;
|
|
box-shadow: 0 0 8px ${cssManager.bdTheme('rgba(0, 102, 204, 0.4)', 'rgba(77, 148, 255, 0.4)')};
|
|
}
|
|
|
|
.block-wrapper.drag-over-after::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: -8px;
|
|
right: -8px;
|
|
height: 2px;
|
|
background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
border-radius: 1px;
|
|
box-shadow: 0 0 8px ${cssManager.bdTheme('rgba(0, 102, 204, 0.4)', 'rgba(77, 148, 255, 0.4)')};
|
|
}
|
|
|
|
.editor-content.dragging * {
|
|
user-select: none;
|
|
}
|
|
|
|
/* Block Settings Button */
|
|
.block-settings {
|
|
position: absolute;
|
|
right: -40px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 28px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.block-wrapper:hover .block-settings {
|
|
opacity: 1;
|
|
}
|
|
|
|
.block-settings:hover {
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
|
|
}
|
|
|
|
.block-settings:active {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
|
}
|
|
|
|
/* Text Selection Styles */
|
|
.block ::selection {
|
|
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')};
|
|
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);
|
|
padding: 4px;
|
|
display: flex;
|
|
gap: 2px;
|
|
z-index: 1001;
|
|
animation: fadeInScale 0.15s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.format-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.format-button:hover {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
|
|
.format-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.format-button.bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.format-button.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.format-button.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.format-button .code-icon {
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Applied format styles in content */
|
|
.block strong,
|
|
.block b {
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block em,
|
|
.block i {
|
|
font-style: italic;
|
|
}
|
|
|
|
.block u {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.block strike,
|
|
.block s {
|
|
text-decoration: line-through;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.block code {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 0.9em;
|
|
color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
|
|
}
|
|
|
|
.block a {
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.block a:hover {
|
|
border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
`; |