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

fix(wysiwyg):Improve Wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-24 13:41:12 +00:00
parent 08a4c361fa
commit 4b2178cedd
13 changed files with 581 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts
View File

@ -1,9 +1,10 @@
import { type IBlock } from './wysiwyg.types.js';
import { type IWysiwygComponent } from './wysiwyg.interfaces.js';
export class WysiwygKeyboardHandler {
private component: any;
private component: IWysiwygComponent;
constructor(component: any) {
constructor(component: IWysiwygComponent) {
this.component = component;
}
@ -132,34 +133,59 @@ export class WysiwygKeyboardHandler {
// Split content at cursor position
e.preventDefault();
// Get the block component
const target = e.target as HTMLElement;
const blockWrapper = target.closest('.block-wrapper');
console.log('Enter key pressed in block:', {
blockId: block.id,
blockType: block.type,
blockContent: block.content,
blockContentLength: block.content?.length || 0,
eventTarget: e.target,
eventTargetTagName: (e.target as HTMLElement).tagName
});
// Get the block component - need to search in the wysiwyg component's shadow DOM
const blockWrapper = this.component.shadowRoot?.querySelector(`[data-block-id="${block.id}"]`);
console.log('Found block wrapper:', blockWrapper);
const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as any;
console.log('Found block component:', blockComponent, 'has getSplitContent:', !!blockComponent?.getSplitContent);
if (blockComponent && blockComponent.getSplitContent) {
console.log('Calling getSplitContent...');
const splitContent = blockComponent.getSplitContent();
console.log('Enter key split content result:', {
hasSplitContent: !!splitContent,
beforeLength: splitContent?.before?.length || 0,
afterLength: splitContent?.after?.length || 0,
splitContent
});
if (splitContent) {
console.log('Updating current block with before content...');
// Update current block with content before cursor
blockComponent.setContent(splitContent.before);
block.content = splitContent.before;
console.log('Creating new block with after content...');
// Create new block with content after cursor
const newBlock = blockOps.createBlock('paragraph', splitContent.after);
console.log('Inserting new block...');
// Insert the new block
await blockOps.insertBlockAfter(block, newBlock);
// Update the value after both blocks are set
this.component.updateValue();
console.log('Enter key handling complete');
} else {
// Fallback - just create empty block
console.log('No split content returned, creating empty block');
const newBlock = blockOps.createBlock();
await blockOps.insertBlockAfter(block, newBlock);
}
} else {
// No block component or method, just create empty block
console.log('No getSplitContent method, creating empty block');
const newBlock = blockOps.createBlock();
await blockOps.insertBlockAfter(block, newBlock);
}