549 lines
13 KiB
TypeScript
549 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', '#09090b')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
border-radius: 6px;
|
|
min-height: 200px;
|
|
padding: 24px;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.wysiwyg-container:hover {
|
|
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
|
}
|
|
|
|
.wysiwyg-container:focus-within {
|
|
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 */
|
|
.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('#09090b', '#fafafa')};
|
|
}
|
|
|
|
/* 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(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;
|
|
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('#71717a', '#71717a')};
|
|
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('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.block.heading-1:empty::before {
|
|
content: "Heading 1";
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
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('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.block.heading-2:empty::before {
|
|
content: "Heading 2";
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
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('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.block.heading-3:empty::before {
|
|
content: "Heading 3";
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
pointer-events: none;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block.quote {
|
|
border-left: 2px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
padding-left: 20px;
|
|
font-style: italic;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.block.quote:empty::before {
|
|
content: "Quote";
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
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('#f4f4f5', '#27272a')};
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
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('#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('#09090b', '#fafafa')};
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.block.code:empty::before {
|
|
content: "// Code block";
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
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('#e5e7eb', '#27272a')};
|
|
margin: 0;
|
|
}
|
|
|
|
.slash-menu {
|
|
position: absolute;
|
|
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;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
pointer-events: auto;
|
|
user-select: none;
|
|
}
|
|
|
|
.slash-menu-item {
|
|
padding: 8px 10px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-radius: 3px;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
font-size: 14px;
|
|
}
|
|
|
|
.slash-menu-item:hover,
|
|
.slash-menu-item.selected {
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.slash-menu-item .icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
font-weight: 600;
|
|
}
|
|
|
|
.slash-menu-item:hover .icon,
|
|
.slash-menu-item.selected .icon {
|
|
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
}
|
|
|
|
.toolbar {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
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;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toolbar.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.toolbar-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.toolbar-button:hover {
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
}
|
|
|
|
/* Drag and Drop Styles */
|
|
.block-wrapper {
|
|
position: relative;
|
|
transition: transform 0.3s ease, opacity 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('#71717a', '#71717a')};
|
|
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('#71717a', '#a1a1aa')};
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
}
|
|
|
|
.drag-handle:active {
|
|
cursor: grabbing;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
|
|
}
|
|
|
|
.block-wrapper.dragging {
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
position: relative;
|
|
z-index: 2001;
|
|
transition: none !important;
|
|
}
|
|
|
|
|
|
/* Blocks that should move out of the way */
|
|
.block-wrapper.move-down {
|
|
transform: translateY(var(--drag-offset, 0px));
|
|
}
|
|
|
|
.block-wrapper.move-up {
|
|
transform: translateY(calc(-1 * var(--drag-offset, 0px)));
|
|
}
|
|
|
|
/* Drop indicator */
|
|
.drop-indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
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;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove old drag-over styles */
|
|
.block-wrapper.drag-over-before,
|
|
.block-wrapper.drag-over-after {
|
|
/* No longer needed, using drop indicator instead */
|
|
}
|
|
|
|
.editor-content.dragging * {
|
|
user-select: none;
|
|
}
|
|
|
|
/* Block Settings Button - Removed in favor of context menu */
|
|
|
|
/* Text Selection Styles */
|
|
.block ::selection {
|
|
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', '#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;
|
|
z-index: 1001;
|
|
animation: fadeInScale 0.15s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.98) translateY(2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.format-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.format-button:hover {
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
}
|
|
|
|
.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('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.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('#f4f4f5', '#27272a')};
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 0.9em;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.block a {
|
|
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('#3b82f6', '#3b82f6')};
|
|
}
|
|
`; |