diff --git a/readme.hints.md b/readme.hints.md
index 044bfdc..4d1a36d 100644
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -409,4 +409,61 @@ Created `wysiwyg.interfaces.ts` with proper typing:
4. Arrow keys handle block navigation without focus loss
5. All timing is handled via proper async/await patterns
-The refactoring eliminates race conditions and timing issues that were causing focus loss and content duplication problems.
\ No newline at end of file
+The refactoring eliminates race conditions and timing issues that were causing focus loss and content duplication problems.
+
+### Programmatic Rendering Solution (2025-06-24 - Part 10)
+
+Fixed persistent focus loss issue by implementing fully programmatic rendering:
+
+#### The Problem:
+- User would click in a block, type text, then press arrow keys and lose focus
+- Root cause: Lit was re-rendering components when block content was mutated
+- Even with shouldUpdate() preventing re-renders, parent re-evaluation caused focus loss
+
+#### The Solution:
+
+1. **Static Parent Rendering**:
+ - Parent component renders only once with empty editor content div
+ - All blocks are created and managed programmatically via DOM manipulation
+ - No Lit re-renders triggered by state changes
+
+2. **Manual Block Management**:
+ - `renderBlocksProgrammatically()` creates all block elements manually
+ - `createBlockElement()` builds block wrapper with all event handlers
+ - `updateBlockElement()` replaces individual blocks when needed
+ - No reactive properties trigger parent re-renders
+
+3. **Content Update Strategy**:
+ - During typing, content is NOT immediately synced to data model
+ - Auto-save delayed to 2 seconds to avoid interference
+ - Content synced from DOM only on blur or before save
+ - `syncAllBlockContent()` reads from DOM when needed
+
+4. **Focus Preservation**:
+ - Block components prevent re-renders with `shouldUpdate()`
+ - Parent never re-renders after initial load
+ - Focus remains stable during all editing operations
+ - Arrow key navigation works without focus loss
+
+5. **Implementation Details**:
+ ```typescript
+ // Parent render method - static after first render
+ render(): TemplateResult {
+ return html`
+
+
+
+ `;
+ }
+
+ // All block operations use DOM manipulation
+ private renderBlocksProgrammatically() {
+ this.editorContentRef.innerHTML = '';
+ this.blocks.forEach(block => {
+ const blockWrapper = this.createBlockElement(block);
+ this.editorContentRef.appendChild(blockWrapper);
+ });
+ }
+ ```
+
+This approach completely eliminates focus loss by taking full control of the DOM and preventing any framework-induced re-renders during editing.
\ No newline at end of file
diff --git a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
index 29d74cb..71384a6 100644
--- a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
+++ b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
@@ -54,7 +54,7 @@ export class DeesInputWysiwyg extends DeesInputBase {
}
];
- @state()
+ // Not using @state to avoid re-renders when selection changes
private selectedBlockId: string | null = null;
// Slash menu is now globally rendered
@@ -84,6 +84,9 @@ export class DeesInputWysiwyg extends DeesInputBase {
private inputHandler: WysiwygInputHandler;
private keyboardHandler: WysiwygKeyboardHandler;
private dragDropHandler: WysiwygDragDropHandler;
+
+ // Content cache to avoid triggering re-renders during typing
+ private contentCache: Map = new Map();
public static styles = [
...DeesInputBase.baseStyles,
@@ -110,6 +113,11 @@ export class DeesInputWysiwyg extends DeesInputBase {
document.removeEventListener('selectionchange', this.selectionChangeHandler);
// Clean up handlers
this.inputHandler?.destroy();
+ // Clean up blur timeout
+ if (this.blurTimeout) {
+ clearTimeout(this.blurTimeout);
+ this.blurTimeout = null;
+ }
}
async firstUpdated() {
@@ -127,6 +135,104 @@ export class DeesInputWysiwyg extends DeesInputBase {
this.updateFormattingMenuPosition();
}
});
+
+ // Render blocks programmatically
+ this.renderBlocksProgrammatically();
+ }
+
+ /**
+ * Renders all blocks programmatically without triggering re-renders
+ */
+ private renderBlocksProgrammatically() {
+ if (!this.editorContentRef) return;
+
+ // Clear existing blocks
+ this.editorContentRef.innerHTML = '';
+
+ // Create and append block elements
+ this.blocks.forEach(block => {
+ const blockWrapper = this.createBlockElement(block);
+ this.editorContentRef.appendChild(blockWrapper);
+ });
+ }
+
+ /**
+ * Creates a block element programmatically
+ */
+ private createBlockElement(block: IBlock): HTMLElement {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'block-wrapper';
+ wrapper.setAttribute('data-block-id', block.id);
+
+ // Add drag handle for non-divider blocks
+ if (block.type !== 'divider') {
+ const dragHandle = document.createElement('div');
+ dragHandle.className = 'drag-handle';
+ dragHandle.draggable = true;
+ dragHandle.addEventListener('dragstart', (e) => this.dragDropHandler.handleDragStart(e, block));
+ dragHandle.addEventListener('dragend', () => this.dragDropHandler.handleDragEnd());
+ wrapper.appendChild(dragHandle);
+ }
+
+ // Create the block component
+ const blockComponent = document.createElement('dees-wysiwyg-block') as any;
+ blockComponent.block = block;
+ blockComponent.isSelected = this.selectedBlockId === block.id;
+ blockComponent.handlers = {
+ onInput: (e: InputEvent) => this.inputHandler.handleBlockInput(e, block),
+ onKeyDown: (e: KeyboardEvent) => this.keyboardHandler.handleBlockKeyDown(e, block),
+ onFocus: () => this.handleBlockFocus(block),
+ onBlur: () => this.handleBlockBlur(block),
+ onCompositionStart: () => this.isComposing = true,
+ onCompositionEnd: () => this.isComposing = false,
+ onMouseUp: (e: MouseEvent) => this.handleTextSelection(e),
+ };
+ wrapper.appendChild(blockComponent);
+
+ // Add settings button for non-divider blocks
+ if (block.type !== 'divider') {
+ const settings = document.createElement('div');
+ settings.className = 'block-settings';
+ settings.innerHTML = `
+
+ `;
+ settings.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ WysiwygModalManager.showBlockSettingsModal(block, (updatedBlock) => {
+ this.updateValue();
+ // Re-render only the updated block
+ this.updateBlockElement(block.id);
+ });
+ });
+ wrapper.appendChild(settings);
+ }
+
+ // Add drag event listeners
+ wrapper.addEventListener('dragover', (e) => this.dragDropHandler.handleDragOver(e, block));
+ wrapper.addEventListener('drop', (e) => this.dragDropHandler.handleDrop(e, block));
+ wrapper.addEventListener('dragleave', () => this.dragDropHandler.handleDragLeave(block));
+
+ return wrapper;
+ }
+
+ /**
+ * Updates a specific block element
+ */
+ private updateBlockElement(blockId: string) {
+ const block = this.blocks.find(b => b.id === blockId);
+ if (!block) return;
+
+ const wrapper = this.editorContentRef.querySelector(`[data-block-id="${blockId}"]`);
+ if (!wrapper) return;
+
+ // Replace with new element
+ const newWrapper = this.createBlockElement(block);
+ wrapper.replaceWith(newWrapper);
}
@@ -141,70 +247,15 @@ export class DeesInputWysiwyg extends DeesInputBase {