diff --git a/test/test.wysiwyg-blocktype-change.browser.ts b/test/test.wysiwyg-blocktype-change.browser.ts index 97a43ad..44ef883 100644 --- a/test/test.wysiwyg-blocktype-change.browser.ts +++ b/test/test.wysiwyg-blocktype-change.browser.ts @@ -72,22 +72,11 @@ tap.test('should change block type via context menu', async () => { ); expect(heading1Item).toBeTruthy(); - // Add debug logging - console.log('Before click:', { - blockType: wysiwygEditor.blocks[0].type, - blockId: wysiwygEditor.blocks[0].id - }); - // Click on "Heading 1" (heading1Item as HTMLElement).click(); // Wait for menu to close and block to update - await new Promise(resolve => setTimeout(resolve, 500)); - - console.log('After click:', { - blockType: wysiwygEditor.blocks[0].type, - blockId: wysiwygEditor.blocks[0].id - }); + await new Promise(resolve => setTimeout(resolve, 300)); // Verify block type has changed expect(wysiwygEditor.blocks[0].type).toEqual('heading-1'); diff --git a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts index 17ad3ee..261a386 100644 --- a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts +++ b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts @@ -235,6 +235,7 @@ export class DeesInputWysiwyg extends DeesInputBase { const blockComponent = document.createElement('dees-wysiwyg-block') as any; blockComponent.block = block; blockComponent.isSelected = this.selectedBlockId === block.id; + blockComponent.wysiwygComponent = this; // Pass parent reference blockComponent.handlers = { onInput: (e: InputEvent) => this.inputHandler.handleBlockInput(e, block), onKeyDown: (e: KeyboardEvent) => this.keyboardHandler.handleBlockKeyDown(e, block), diff --git a/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts b/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts index 59dab42..5a1eec2 100644 --- a/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts +++ b/ts_web/elements/wysiwyg/dees-wysiwyg-block.ts @@ -39,6 +39,9 @@ export class DeesWysiwygBlock extends DeesElement { @property({ type: Object }) public handlers: IBlockEventHandlers; + + @property({ type: Object }) + public wysiwygComponent: any; // Reference to parent dees-input-wysiwyg // Reference to the editable block element private blockElement: HTMLDivElement | null = null; @@ -698,11 +701,10 @@ export class DeesWysiwygBlock extends DeesElement { const blockTypes = WysiwygShortcuts.getSlashMenuItems(); const currentType = this.block.type; - // Capture the wysiwyg component reference now, not in the action - const wysiwygComponent = this.closest('dees-input-wysiwyg') as any; + // Use the parent reference passed from dees-input-wysiwyg + const wysiwygComponent = this.wysiwygComponent; const blockId = this.block.id; - console.log('getContextMenuItems - captured wysiwygComponent:', !!wysiwygComponent, 'blockId:', blockId); // Create submenu items for block type change const blockTypeItems = blockTypes @@ -711,20 +713,10 @@ export class DeesWysiwygBlock extends DeesElement { name: item.label, iconName: item.icon.replace('lucide:', ''), action: async () => { - console.log('Block type change action called:', { - targetType: item.type, - currentBlockId: blockId - }); - - console.log('Using captured wysiwyg component:', !!wysiwygComponent); - if (wysiwygComponent && wysiwygComponent.blockOperations) { // Transform the block type const blockToTransform = wysiwygComponent.blocks.find((b: IBlock) => b.id === blockId); - console.log('Found block to transform:', !!blockToTransform, blockToTransform?.id); - if (blockToTransform) { - console.log('Changing type from', blockToTransform.type, 'to', item.type); blockToTransform.type = item.type; blockToTransform.content = blockToTransform.content || '';