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

feat(editor): Add wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-23 18:12:24 +00:00
parent 0f02e7d00f
commit f2e6342a61
1 changed files with 66 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ export const wysiwygStyles = css`
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
border-radius: 8px; border-radius: 8px;
min-height: 200px; min-height: 200px;
padding: 20px; padding: 32px 40px;
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#000000', '#ffffff')};
@ -29,26 +29,36 @@ export const wysiwygStyles = css`
.editor-content { .editor-content {
outline: none; outline: none;
min-height: 160px; min-height: 160px;
margin: 0 -8px;
padding: 0 8px;
} }
.block { .block {
margin-bottom: 12px; margin: 0;
padding: 4px 0;
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('#000000', '#e0e0e0')};
} }
.block:last-child { /* 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; margin-bottom: 0;
} }
.block.selected { .block.selected {
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.12)')}; background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
margin-left: -12px; box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
margin-right: -12px; border-radius: 4px;
padding: 8px 12px; margin-left: -8px;
border-radius: 6px; margin-right: -8px;
padding-left: 8px;
padding-right: 8px;
} }
.block[contenteditable] { .block[contenteditable] {
@ -74,7 +84,6 @@ export const wysiwygStyles = css`
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
margin-bottom: 16px;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#000000', '#ffffff')};
} }
@ -91,7 +100,6 @@ export const wysiwygStyles = css`
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-bottom: 14px;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#000000', '#ffffff')};
} }
@ -108,7 +116,6 @@ export const wysiwygStyles = css`
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
margin-bottom: 12px;
color: ${cssManager.bdTheme('#000000', '#ffffff')}; color: ${cssManager.bdTheme('#000000', '#ffffff')};
} }
@ -123,11 +130,12 @@ export const wysiwygStyles = css`
.block.quote { .block.quote {
border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')}; border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
padding-left: 16px; padding-left: 20px;
font-style: italic; font-style: italic;
color: ${cssManager.bdTheme('#555', '#b0b0b0')}; color: ${cssManager.bdTheme('#555', '#b0b0b0')};
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
line-height: 1.6;
} }
.block.quote:empty::before { .block.quote:empty::before {
@ -144,9 +152,10 @@ export const wysiwygStyles = css`
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')}; background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')}; border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
border-radius: 6px; border-radius: 6px;
padding: 12px 16px; padding: 16px 20px;
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;
white-space: pre-wrap; white-space: pre-wrap;
color: ${cssManager.bdTheme('#d14', '#ff6b6b')}; color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
overflow-x: auto; overflow-x: auto;
@ -163,14 +172,14 @@ export const wysiwygStyles = css`
} }
.block.list { .block.list {
padding-left: 24px; padding-left: 0;
} }
.block.list ul, .block.list ul,
.block.list ol { .block.list ol {
margin: 0; margin: 0;
padding: 0; padding: 0 0 0 24px;
list-style-position: inside; list-style-position: outside;
} }
.block.list ul { .block.list ul {
@ -182,10 +191,14 @@ export const wysiwygStyles = css`
} }
.block.list li { .block.list li {
margin-bottom: 4px; margin-bottom: 8px;
line-height: 1.6; line-height: 1.6;
} }
.block.list li:last-child {
margin-bottom: 0;
}
.block.divider { .block.divider {
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
@ -289,13 +302,31 @@ export const wysiwygStyles = css`
transition: all 0.2s ease; 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 { .drag-handle {
position: absolute; position: absolute;
left: -30px; left: -28px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 20px; width: 24px;
height: 20px; height: 24px;
cursor: grab; cursor: grab;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
@ -303,6 +334,7 @@ export const wysiwygStyles = css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('#999', '#666')};
border-radius: 4px;
} }
.drag-handle::before { .drag-handle::before {
@ -317,10 +349,12 @@ export const wysiwygStyles = css`
.drag-handle:hover { .drag-handle:hover {
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('#666', '#999')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
} }
.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)')};
} }
.block-wrapper.dragging { .block-wrapper.dragging {
@ -330,23 +364,25 @@ export const wysiwygStyles = css`
.block-wrapper.drag-over-before::before { .block-wrapper.drag-over-before::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -2px; top: -8px;
left: 0; left: -8px;
right: 0; right: -8px;
height: 3px; height: 2px;
background: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
border-radius: 2px; 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 { .block-wrapper.drag-over-after::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -2px; bottom: -8px;
left: 0; left: -8px;
right: 0; right: -8px;
height: 3px; height: 2px;
background: ${cssManager.bdTheme('#0066cc', '#4d94ff')}; background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
border-radius: 2px; 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 * { .editor-content.dragging * {