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