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