design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update wysiwyg

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 19:29:26 +00:00
parent 24957f02d4
commit 03f25b7f10
3 changed files with 7 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
View File

@ -235,6 +235,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
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),

18
ts_web/elements/wysiwyg/dees-wysiwyg-block.ts
View File

@ -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 || '';