fix(wysiwyg): Implement programmatic rendering to eliminate focus loss during typing

- Convert parent component to use static rendering with programmatic DOM manipulation
- Remove all reactive state that could trigger re-renders during editing
- Delay content sync to avoid interference with typing (2s auto-save)
- Update all block operations to use manual DOM updates instead of Lit re-renders
- Fix specific issue where typing + arrow keys caused focus loss
- Add comprehensive focus management documentation
This commit is contained in:
Juergen Kunz
2025-06-24 11:06:02 +00:00
parent 8b02c5aea3
commit 1c76ade150
6 changed files with 401 additions and 95 deletions

View File

@ -41,6 +41,9 @@ export class DeesWysiwygBlock extends DeesElement {
@query('.block')
private blockElement: HTMLDivElement;
// Track if we've initialized the content
private contentInitialized: boolean = false;
public static styles = [
cssManager.defaultStyles,
@ -250,11 +253,30 @@ export class DeesWysiwygBlock extends DeesElement {
`,
];
protected shouldUpdate(): boolean {
protected shouldUpdate(changedProperties: Map<string, any>): boolean {
// Never update if only the block content changed
if (changedProperties.has('block') && this.block) {
const oldBlock = changedProperties.get('block');
if (oldBlock && oldBlock.id === this.block.id && oldBlock.type === this.block.type) {
// Only content or metadata changed, don't re-render
return false;
}
}
// Only update if the block type or id changes
// Content changes are handled directly in the DOM
return !this.blockElement || this.block?.type !== this.blockElement.dataset.blockType;
}
public firstUpdated(): void {
// Mark that content has been initialized
this.contentInitialized = true;
// Ensure the block element maintains its content
if (this.blockElement) {
this.blockElement.setAttribute('data-block-id', this.block.id);
this.blockElement.setAttribute('data-block-type', this.block.type);
}
}
render(): TemplateResult {
if (!this.block) return html``;