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

feat(editor): Add wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-23 21:18:03 +00:00
parent cdcd4f79c8
commit 302777feff
1 changed files with 88 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -401,7 +401,41 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
}
}
if (e.key === 'Enter' && !e.shiftKey) {
if (e.key === 'Enter') {
// Handle code blocks specially
if (block.type === 'code') {
if (e.shiftKey) {
// Shift+Enter in code blocks creates a new block
e.preventDefault();
const blockIndex = this.blocks.findIndex(b => b.id === block.id);
const newBlock: IBlock = {
id: WysiwygShortcuts.generateBlockId(),
type: 'paragraph',
content: '',
};
this.blocks = [...this.blocks.slice(0, blockIndex + 1), newBlock, ...this.blocks.slice(blockIndex + 1)];
this.updateValue();
setTimeout(() => {
const wrapperElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`);
if (wrapperElement) {
const blockElement = wrapperElement.querySelector('.block') as HTMLDivElement;
if (blockElement) {
blockElement.focus();
WysiwygBlocks.setCursorToStart(blockElement);
}
}
});
}
// For normal Enter in code blocks, let the browser handle it (creates new line)
return;
}
// For other block types, handle Enter normally (without shift)
if (!e.shiftKey) {
if (block.type === 'list') {
// Handle Enter in lists differently
const target = e.target as HTMLDivElement;
@ -423,9 +457,13 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
this.blocks = [...this.blocks.slice(0, blockIndex + 1), newBlock, ...this.blocks.slice(blockIndex + 1)];
setTimeout(() => {
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
if (newBlockElement) {
newBlockElement.focus();
const wrapperElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`);
if (wrapperElement) {
const blockElement = wrapperElement.querySelector('.block') as HTMLDivElement;
if (blockElement) {
blockElement.focus();
WysiwygBlocks.setCursorToStart(blockElement);
}
}
});
}
@ -448,11 +486,16 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
this.updateValue();
setTimeout(() => {
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
if (newBlockElement) {
newBlockElement.focus();
const wrapperElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`);
if (wrapperElement) {
const blockElement = wrapperElement.querySelector('.block') as HTMLDivElement;
if (blockElement) {
blockElement.focus();
WysiwygBlocks.setCursorToStart(blockElement);
}
}
});
}
} else if (e.key === 'Backspace' && block.content === '' && this.blocks.length > 1) {
e.preventDefault();
const blockIndex = this.blocks.findIndex(b => b.id === block.id);