diff --git a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts index 6023602..11cc30d 100644 --- a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts +++ b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts @@ -401,58 +401,101 @@ export class DeesInputWysiwyg extends DeesInputBase { } } - if (e.key === 'Enter' && !e.shiftKey) { - if (block.type === 'list') { - // Handle Enter in lists differently - const target = e.target as HTMLDivElement; - const selection = window.getSelection(); - if (selection && selection.rangeCount > 0) { - const range = selection.getRangeAt(0); - const currentLi = range.startContainer.parentElement?.closest('li'); + 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(); - if (currentLi && currentLi.textContent === '') { - // Empty list item - exit list mode - 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)]; - - setTimeout(() => { - const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement; - if (newBlockElement) { - newBlockElement.focus(); + 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); } - }); - } - // Otherwise, let the browser handle creating new list items + } + }); } + // For normal Enter in code blocks, let the browser handle it (creates new line) return; } - 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 newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement; - if (newBlockElement) { - newBlockElement.focus(); + // 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; + const selection = window.getSelection(); + if (selection && selection.rangeCount > 0) { + const range = selection.getRangeAt(0); + const currentLi = range.startContainer.parentElement?.closest('li'); + + if (currentLi && currentLi.textContent === '') { + // Empty list item - exit list mode + 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)]; + + 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); + } + } + }); + } + // Otherwise, let the browser handle creating new list items + } + return; } - }); + + 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); + } + } + }); + } } else if (e.key === 'Backspace' && block.content === '' && this.blocks.length > 1) { e.preventDefault(); const blockIndex = this.blocks.findIndex(b => b.id === block.id);