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:
@ -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``;
|
||||
|
Reference in New Issue
Block a user