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

fix(wysiwyg):Improve Wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-24 12:24:02 +00:00
parent 35a648d450
commit 08a4c361fa
4 changed files with 311 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -326,7 +326,7 @@ export const wysiwygStyles = css`
/* Drag and Drop Styles */
.block-wrapper {
position: relative;
transition: all 0.2s ease;
transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Ensure proper spacing context for blocks */
@ -385,31 +385,41 @@ export const wysiwygStyles = css`
}
.block-wrapper.dragging {
opacity: 0.5;
opacity: 0.8;
pointer-events: none;
position: relative;
z-index: 2001;
transition: none !important;
}
.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)')};
/* Blocks that should move out of the way */
.block-wrapper.move-down {
transform: translateY(var(--drag-offset, 0px));
}
.block-wrapper.drag-over-after::after {
content: '';
.block-wrapper.move-up {
transform: translateY(calc(-1 * var(--drag-offset, 0px)));
}
/* Drop indicator */
.drop-indicator {
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)')};
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;
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 * {