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

refactor(wysiwyg): Clean up code and ensure drag-drop works with programmatic rendering

Browse Source 
- Update drag handler to work without requestUpdate calls
- Remove duplicate modal methods (using WysiwygModalManager)
- Clean up unused imports and methods
- Ensure all DOM updates are programmatic
- Add comprehensive test files for all features
- Follow separation of concerns principles
This commit is contained in:
Juergen Kunz
2025-06-24 11:12:56 +00:00
parent 1c76ade150
commit 35a648d450
3 changed files with 74 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
View File

@ -17,8 +17,6 @@ import {
wysiwygStyles,
WysiwygConverters,
WysiwygShortcuts,
WysiwygBlocks,
type ISlashMenuItem,
WysiwygFormatting,
WysiwygBlockOperations,
WysiwygInputHandler,
@ -1027,79 +1025,5 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
});
}
private async showBlockSettingsModal(block: IBlock): Promise<void> {
let content: TemplateResult;
if (block.type === 'code') {
const currentLanguage = block.metadata?.language || 'plain text';
content = html`
<style>
.settings-section {
margin-bottom: 16px;
}
.settings-label {
font-weight: 500;
margin-bottom: 8px;
}
.language-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.language-button {
padding: 8px;
background: var(--dees-color-box);
border: 1px solid var(--dees-color-line-bright);
border-radius: 4px;
cursor: pointer;
text-align: center;
transition: all 0.2s;
}
.language-button:hover {
background: var(--dees-color-box-highlight);
border-color: var(--dees-color-primary);
}
.language-button.selected {
background: var(--dees-color-primary);
color: white;
}
</style>
<div class="settings-section">
<div class="settings-label">Programming Language</div>
<div class="language-grid">
${['JavaScript', 'TypeScript', 'Python', 'Java', 'C++', 'C#', 'Go', 'Rust', 'HTML', 'CSS', 'SQL', 'Shell', 'JSON', 'YAML', 'Markdown', 'Plain Text'].map(lang => html`
<div class="language-button ${currentLanguage === lang.toLowerCase() ? 'selected' : ''}"
@click="${(e: MouseEvent) => {
if (!block.metadata) block.metadata = {};
block.metadata.language = lang.toLowerCase();
this.updateValue();
this.requestUpdate();
// Find and click the close button
const modal = (e.target as HTMLElement).closest('dees-modal');
if (modal) {
const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
if (closeButton) closeButton.click();
}
}}">${lang}</div>
`)}
</div>
</div>
`;
} else {
content = html`<div style="padding: 16px;">No settings available for this block type.</div>`;
}
DeesModal.createAndShow({
heading: 'Block Settings',
content,
menuOptions: [
{
name: 'Close',
action: async (modal) => {
modal.destroy();
}
}
]
});
}
// Modal methods have been moved to WysiwygModalManager
}

77
ts_web/elements/wysiwyg/wysiwyg.dragdrophandler.ts
View File

@ -31,13 +31,10 @@ export class WysiwygDragDropHandler {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', block.id);
// Update UI state
this.updateComponentState();
// Update component state (for parent drag handler access)
this.component.draggedBlockId = this.draggedBlockId;
// Add slight delay to show dragging state
setTimeout(() => {
this.component.requestUpdate();
}, 10);
// The parent component already handles adding dragging classes programmatically
}
/**
@ -47,8 +44,13 @@ export class WysiwygDragDropHandler {
this.draggedBlockId = null;
this.dragOverBlockId = null;
this.dragOverPosition = null;
this.updateComponentState();
this.component.requestUpdate();
// Update component state
this.component.draggedBlockId = null;
this.component.dragOverBlockId = null;
this.component.dragOverPosition = null;
// The parent component already handles removing dragging classes programmatically
}
/**
@ -65,8 +67,12 @@ export class WysiwygDragDropHandler {
this.dragOverBlockId = block.id;
this.dragOverPosition = e.clientY < midpoint ? 'before' : 'after';
this.updateComponentState();
this.component.requestUpdate();
// Update component state
this.component.dragOverBlockId = this.dragOverBlockId;
this.component.dragOverPosition = this.dragOverPosition;
// The parent component already handles drag-over classes programmatically
}
/**
@ -76,8 +82,12 @@ export class WysiwygDragDropHandler {
if (this.dragOverBlockId === block.id) {
this.dragOverBlockId = null;
this.dragOverPosition = null;
this.updateComponentState();
this.component.requestUpdate();
// Update component state
this.component.dragOverBlockId = null;
this.component.dragOverPosition = null;
// The parent component already handles removing drag-over classes programmatically
}
}
@ -89,48 +99,11 @@ export class WysiwygDragDropHandler {
if (!this.draggedBlockId || this.draggedBlockId === targetBlock.id) return;
const blocks = [...this.component.blocks];
const draggedIndex = blocks.findIndex(b => b.id === this.draggedBlockId);
const targetIndex = blocks.findIndex(b => b.id === targetBlock.id);
if (draggedIndex === -1 || targetIndex === -1) return;
// Remove the dragged block
const [draggedBlock] = blocks.splice(draggedIndex, 1);
// Calculate the new index
let newIndex = targetIndex;
if (this.dragOverPosition === 'after') {
newIndex = draggedIndex < targetIndex ? targetIndex : targetIndex + 1;
} else {
newIndex = draggedIndex < targetIndex ? targetIndex - 1 : targetIndex;
}
// Insert at new position
blocks.splice(newIndex, 0, draggedBlock);
// Update blocks
this.component.blocks = blocks;
this.component.updateValue();
this.handleDragEnd();
// Focus the moved block
setTimeout(() => {
const blockOps = this.component.blockOperations;
if (draggedBlock.type !== 'divider') {
blockOps.focusBlock(draggedBlock.id);
}
}, 100);
// The parent component already has a handleDrop method that handles this programmatically
// We'll delegate to that to ensure proper programmatic rendering
this.component.handleDrop(e, targetBlock);
}
/**
* Updates component drag state
*/
private updateComponentState(): void {
this.component.draggedBlockId = this.draggedBlockId;
this.component.dragOverBlockId = this.dragOverBlockId;
this.component.dragOverPosition = this.dragOverPosition;
}
/**
* Checks if a block is being dragged