From 4a26307e1bb5569ef092ae15ce1fa3863ccbf149 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Wed, 25 Jun 2025 05:30:20 +0000 Subject: [PATCH] update --- .../wysiwyg/blocks/text/code.block.ts | 11 --- .../wysiwyg/blocks/text/heading.block.ts | 77 ----------------- .../wysiwyg/blocks/text/list.block.ts | 10 --- .../wysiwyg/blocks/text/paragraph.block.ts | 85 +------------------ .../wysiwyg/blocks/text/quote.block.ts | 84 ------------------ .../wysiwyg/wysiwyg.keyboardhandler.ts | 29 +------ 6 files changed, 3 insertions(+), 293 deletions(-) diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.ts index 11ee974..9c94b8f 100644 --- a/ts_web/elements/wysiwyg/blocks/text/code.block.ts +++ b/ts_web/elements/wysiwyg/blocks/text/code.block.ts @@ -14,8 +14,6 @@ export class CodeBlockHandler extends BaseBlockHandler { const language = block.metadata?.language || 'plain text'; const selectedClass = isSelected ? ' selected' : ''; - console.log('CodeBlockHandler.render:', { blockId: block.id, isSelected, content: block.content, language }); - return `
${language}
@@ -37,8 +35,6 @@ export class CodeBlockHandler extends BaseBlockHandler { return; } - console.log('CodeBlockHandler.setup: Setting up code block', { blockId: block.id }); - // Set initial content if needed - use textContent for code blocks if (block.content && !codeBlock.textContent) { codeBlock.textContent = block.content; @@ -46,7 +42,6 @@ export class CodeBlockHandler extends BaseBlockHandler { // Input handler codeBlock.addEventListener('input', (e) => { - console.log('CodeBlockHandler: Input event', { blockId: block.id }); handlers.onInput(e as InputEvent); // Track cursor position after input @@ -90,24 +85,20 @@ export class CodeBlockHandler extends BaseBlockHandler { // Focus handler codeBlock.addEventListener('focus', () => { - console.log('CodeBlockHandler: Focus event', { blockId: block.id }); handlers.onFocus(); }); // Blur handler codeBlock.addEventListener('blur', () => { - console.log('CodeBlockHandler: Blur event', { blockId: block.id }); handlers.onBlur(); }); // Composition handlers for IME support codeBlock.addEventListener('compositionstart', () => { - console.log('CodeBlockHandler: Composition start', { blockId: block.id }); handlers.onCompositionStart(); }); codeBlock.addEventListener('compositionend', () => { - console.log('CodeBlockHandler: Composition end', { blockId: block.id }); handlers.onCompositionEnd(); }); @@ -210,7 +201,6 @@ export class CodeBlockHandler extends BaseBlockHandler { // Get the actual code element const codeBlock = element.querySelector('.block.code') as HTMLDivElement; if (!codeBlock) { - console.log('CodeBlockHandler.getCursorPosition: No code element found'); return null; } @@ -252,7 +242,6 @@ export class CodeBlockHandler extends BaseBlockHandler { // For code blocks, get textContent to avoid HTML formatting const content = codeBlock.textContent || ''; - console.log('CodeBlockHandler.getContent:', content); return content; } diff --git a/ts_web/elements/wysiwyg/blocks/text/heading.block.ts b/ts_web/elements/wysiwyg/blocks/text/heading.block.ts index 7eaa2a5..7495e6b 100644 --- a/ts_web/elements/wysiwyg/blocks/text/heading.block.ts +++ b/ts_web/elements/wysiwyg/blocks/text/heading.block.ts @@ -23,7 +23,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { const selectedClass = isSelected ? ' selected' : ''; const placeholder = this.getPlaceholder(); - console.log('HeadingBlockHandler.render:', { blockId: block.id, isSelected, content: block.content, level: this.level }); return `
{ - console.log('HeadingBlockHandler: Input event', { blockId: block.id }); handlers.onInput(e as InputEvent); // Track cursor position after input const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('HeadingBlockHandler: Updated cursor position after input', { pos }); } }); @@ -69,7 +65,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('HeadingBlockHandler: Cursor position before keydown', { pos, key: e.key }); } handlers.onKeyDown(e); @@ -77,24 +72,20 @@ export class HeadingBlockHandler extends BaseBlockHandler { // Focus handler headingBlock.addEventListener('focus', () => { - console.log('HeadingBlockHandler: Focus event', { blockId: block.id }); handlers.onFocus(); }); // Blur handler headingBlock.addEventListener('blur', () => { - console.log('HeadingBlockHandler: Blur event', { blockId: block.id }); handlers.onBlur(); }); // Composition handlers for IME support headingBlock.addEventListener('compositionstart', () => { - console.log('HeadingBlockHandler: Composition start', { blockId: block.id }); handlers.onCompositionStart(); }); headingBlock.addEventListener('compositionend', () => { - console.log('HeadingBlockHandler: Composition end', { blockId: block.id }); handlers.onCompositionEnd(); }); @@ -103,7 +94,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('HeadingBlockHandler: Cursor position after mouseup', { pos }); } // Selection will be handled by selectionchange event @@ -117,7 +107,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('HeadingBlockHandler: Cursor position after click', { pos }); } }, 0); }); @@ -127,7 +116,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('HeadingBlockHandler: Cursor position after keyup', { pos, key: e.key }); } }); @@ -178,11 +166,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { if (selectedText !== this.lastSelectedText) { this.lastSelectedText = selectedText; - console.log('HeadingBlockHandler: Text selected', { - text: selectedText, - blockId: block.id - }); - // Create range and get rect const range = WysiwygSelection.createRangeFromInfo(selectionInfo); const rect = range.getBoundingClientRect(); @@ -302,7 +285,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { // Get the actual heading element const headingBlock = element.querySelector(`.block.heading-${this.level}`) as HTMLDivElement; if (!headingBlock) { - console.log('HeadingBlockHandler.getCursorPosition: No heading element found'); return null; } @@ -318,25 +300,12 @@ export class HeadingBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('HeadingBlockHandler.getCursorPosition: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length - }); if (!selectionInfo) { - console.log('HeadingBlockHandler.getCursorPosition: No selection found'); return null; } - console.log('HeadingBlockHandler.getCursorPosition: Range info:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - collapsed: selectionInfo.collapsed, - startContainerText: selectionInfo.startContainer.textContent - }); - if (!WysiwygSelection.containsAcrossShadowDOM(headingBlock, selectionInfo.startContainer)) { - console.log('HeadingBlockHandler.getCursorPosition: Range not in element'); return null; } @@ -347,12 +316,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { // Get the text content length up to cursor const position = preCaretRange.toString().length; - console.log('HeadingBlockHandler.getCursorPosition: Calculated position:', { - position, - preCaretText: preCaretRange.toString(), - elementText: headingBlock.textContent, - elementTextLength: headingBlock.textContent?.length - }); return position; } @@ -363,7 +326,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { // For headings, get the innerHTML which includes formatting tags const content = headingBlock.innerHTML || ''; - console.log('HeadingBlockHandler.getContent:', content); return content; } @@ -482,20 +444,11 @@ export class HeadingBlockHandler extends BaseBlockHandler { } getSplitContent(element: HTMLElement, context?: any): { before: string; after: string } | null { - console.log('HeadingBlockHandler.getSplitContent: Starting...'); - const headingBlock = element.querySelector(`.block.heading-${this.level}`) as HTMLDivElement; if (!headingBlock) { - console.log('HeadingBlockHandler.getSplitContent: No heading element found'); return null; } - console.log('HeadingBlockHandler.getSplitContent: Element info:', { - innerHTML: headingBlock.innerHTML, - textContent: headingBlock.textContent, - textLength: headingBlock.textContent?.length - }); - // Get shadow roots from context const wysiwygBlock = context?.component; const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg'); @@ -508,23 +461,12 @@ export class HeadingBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('HeadingBlockHandler.getSplitContent: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length - }); if (!selectionInfo) { - console.log('HeadingBlockHandler.getSplitContent: No selection, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = headingBlock.textContent || ''; const pos = Math.min(this.lastKnownCursorPosition, fullText.length); - console.log('HeadingBlockHandler.getSplitContent: Splitting with last known position:', { - pos, - fullTextLength: fullText.length, - before: fullText.substring(0, pos), - after: fullText.substring(pos) - }); return { before: fullText.substring(0, pos), after: fullText.substring(pos) @@ -533,15 +475,8 @@ export class HeadingBlockHandler extends BaseBlockHandler { return null; } - console.log('HeadingBlockHandler.getSplitContent: Selection range:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - startContainerInElement: headingBlock.contains(selectionInfo.startContainer) - }); - // Make sure the selection is within this block if (!WysiwygSelection.containsAcrossShadowDOM(headingBlock, selectionInfo.startContainer)) { - console.log('HeadingBlockHandler.getSplitContent: Selection not in this block, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = headingBlock.textContent || ''; @@ -556,11 +491,9 @@ export class HeadingBlockHandler extends BaseBlockHandler { // Get cursor position first const cursorPos = this.getCursorPosition(element, context); - console.log('HeadingBlockHandler.getSplitContent: Cursor position for HTML split:', cursorPos); if (cursorPos === null || cursorPos === 0) { // If cursor is at start or can't determine position, move all content - console.log('HeadingBlockHandler.getSplitContent: Cursor at start or null, moving all content'); return { before: '', after: headingBlock.innerHTML @@ -592,16 +525,6 @@ export class HeadingBlockHandler extends BaseBlockHandler { tempDiv.appendChild(afterFragment); const afterHtml = tempDiv.innerHTML; - console.log('HeadingBlockHandler.getSplitContent: Final split result:', { - cursorPos, - beforeHtml, - beforeLength: beforeHtml.length, - beforeHtmlPreview: beforeHtml.substring(0, 100) + (beforeHtml.length > 100 ? '...' : ''), - afterHtml, - afterLength: afterHtml.length, - afterHtmlPreview: afterHtml.substring(0, 100) + (afterHtml.length > 100 ? '...' : '') - }); - return { before: beforeHtml, after: afterHtml diff --git a/ts_web/elements/wysiwyg/blocks/text/list.block.ts b/ts_web/elements/wysiwyg/blocks/text/list.block.ts index 8ef20f3..c995eff 100644 --- a/ts_web/elements/wysiwyg/blocks/text/list.block.ts +++ b/ts_web/elements/wysiwyg/blocks/text/list.block.ts @@ -17,8 +17,6 @@ export class ListBlockHandler extends BaseBlockHandler { const listType = block.metadata?.listType || 'unordered'; const listTag = listType === 'ordered' ? 'ol' : 'ul'; - console.log('ListBlockHandler.render:', { blockId: block.id, isSelected, content: block.content, listType }); - // Render list content const listContent = this.renderListContent(block.content, block.metadata); @@ -55,8 +53,6 @@ export class ListBlockHandler extends BaseBlockHandler { return; } - console.log('ListBlockHandler.setup: Setting up list block', { blockId: block.id }); - // Set initial content if needed if (block.content && !listBlock.innerHTML) { listBlock.innerHTML = this.renderListContent(block.content, block.metadata); @@ -64,7 +60,6 @@ export class ListBlockHandler extends BaseBlockHandler { // Input handler listBlock.addEventListener('input', (e) => { - console.log('ListBlockHandler: Input event', { blockId: block.id }); handlers.onInput(e as InputEvent); // Track cursor position after input @@ -104,24 +99,20 @@ export class ListBlockHandler extends BaseBlockHandler { // Focus handler listBlock.addEventListener('focus', () => { - console.log('ListBlockHandler: Focus event', { blockId: block.id }); handlers.onFocus(); }); // Blur handler listBlock.addEventListener('blur', () => { - console.log('ListBlockHandler: Blur event', { blockId: block.id }); handlers.onBlur(); }); // Composition handlers for IME support listBlock.addEventListener('compositionstart', () => { - console.log('ListBlockHandler: Composition start', { blockId: block.id }); handlers.onCompositionStart(); }); listBlock.addEventListener('compositionend', () => { - console.log('ListBlockHandler: Composition end', { blockId: block.id }); handlers.onCompositionEnd(); }); @@ -311,7 +302,6 @@ export class ListBlockHandler extends BaseBlockHandler { .map(li => li.textContent || '') .join('\n'); - console.log('ListBlockHandler.getContent:', content); return content; } diff --git a/ts_web/elements/wysiwyg/blocks/text/paragraph.block.ts b/ts_web/elements/wysiwyg/blocks/text/paragraph.block.ts index 47cfb3a..c79f61d 100644 --- a/ts_web/elements/wysiwyg/blocks/text/paragraph.block.ts +++ b/ts_web/elements/wysiwyg/blocks/text/paragraph.block.ts @@ -16,7 +16,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const selectedClass = isSelected ? ' selected' : ''; const placeholder = this.getPlaceholder(); - console.log('ParagraphBlockHandler.render:', { blockId: block.id, isSelected, content: block.content }); return `
{ - console.log('ParagraphBlockHandler: Input event', { blockId: block.id }); handlers.onInput(e as InputEvent); // Track cursor position after input const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('ParagraphBlockHandler: Updated cursor position after input', { pos }); } }); @@ -62,7 +58,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('ParagraphBlockHandler: Cursor position before keydown', { pos, key: e.key }); } handlers.onKeyDown(e); @@ -70,24 +65,20 @@ export class ParagraphBlockHandler extends BaseBlockHandler { // Focus handler paragraphBlock.addEventListener('focus', () => { - console.log('ParagraphBlockHandler: Focus event', { blockId: block.id }); handlers.onFocus(); }); // Blur handler paragraphBlock.addEventListener('blur', () => { - console.log('ParagraphBlockHandler: Blur event', { blockId: block.id }); handlers.onBlur(); }); // Composition handlers for IME support paragraphBlock.addEventListener('compositionstart', () => { - console.log('ParagraphBlockHandler: Composition start', { blockId: block.id }); handlers.onCompositionStart(); }); paragraphBlock.addEventListener('compositionend', () => { - console.log('ParagraphBlockHandler: Composition end', { blockId: block.id }); handlers.onCompositionEnd(); }); @@ -96,8 +87,7 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('ParagraphBlockHandler: Cursor position after mouseup', { pos }); - } + } // Selection will be handled by selectionchange event handlers.onMouseUp?.(e); @@ -110,7 +100,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('ParagraphBlockHandler: Cursor position after click', { pos }); } }, 0); }); @@ -120,7 +109,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('ParagraphBlockHandler: Cursor position after keyup', { pos, key: e.key }); } }); @@ -171,11 +159,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { if (selectedText !== this.lastSelectedText) { this.lastSelectedText = selectedText; - console.log('ParagraphBlockHandler: Text selected', { - text: selectedText, - blockId: block.id - }); - // Create range and get rect const range = WysiwygSelection.createRangeFromInfo(selectionInfo); const rect = range.getBoundingClientRect(); @@ -265,14 +248,9 @@ export class ParagraphBlockHandler extends BaseBlockHandler { // Helper methods for paragraph functionality getCursorPosition(element: HTMLElement, context?: any): number | null { - console.log('ParagraphBlockHandler.getCursorPosition: Called with element:', element, 'context:', context); - // Get the actual paragraph element const paragraphBlock = element.querySelector('.block.paragraph') as HTMLDivElement; if (!paragraphBlock) { - console.log('ParagraphBlockHandler.getCursorPosition: No paragraph element found'); - console.log('Element innerHTML:', element.innerHTML); - console.log('Element tagName:', element.tagName); return null; } @@ -288,27 +266,12 @@ export class ParagraphBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('ParagraphBlockHandler.getCursorPosition: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length, - element: element, - paragraphBlock: paragraphBlock - }); if (!selectionInfo) { - console.log('ParagraphBlockHandler.getCursorPosition: No selection found'); return null; } - console.log('ParagraphBlockHandler.getCursorPosition: Range info:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - collapsed: selectionInfo.collapsed, - startContainerText: selectionInfo.startContainer.textContent - }); - if (!WysiwygSelection.containsAcrossShadowDOM(paragraphBlock, selectionInfo.startContainer)) { - console.log('ParagraphBlockHandler.getCursorPosition: Range not in element'); return null; } @@ -319,12 +282,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { // Get the text content length up to cursor const position = preCaretRange.toString().length; - console.log('ParagraphBlockHandler.getCursorPosition: Calculated position:', { - position, - preCaretText: preCaretRange.toString(), - elementText: paragraphBlock.textContent, - elementTextLength: paragraphBlock.textContent?.length - }); return position; } @@ -335,7 +292,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { // For paragraphs, get the innerHTML which includes formatting tags const content = paragraphBlock.innerHTML || ''; - console.log('ParagraphBlockHandler.getContent:', content); return content; } @@ -454,20 +410,11 @@ export class ParagraphBlockHandler extends BaseBlockHandler { } getSplitContent(element: HTMLElement, context?: any): { before: string; after: string } | null { - console.log('ParagraphBlockHandler.getSplitContent: Starting...'); - const paragraphBlock = element.querySelector('.block.paragraph') as HTMLDivElement; if (!paragraphBlock) { - console.log('ParagraphBlockHandler.getSplitContent: No paragraph element found'); return null; } - console.log('ParagraphBlockHandler.getSplitContent: Element info:', { - innerHTML: paragraphBlock.innerHTML, - textContent: paragraphBlock.textContent, - textLength: paragraphBlock.textContent?.length - }); - // Get shadow roots from context const wysiwygBlock = context?.component; const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg'); @@ -480,23 +427,12 @@ export class ParagraphBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('ParagraphBlockHandler.getSplitContent: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length - }); if (!selectionInfo) { - console.log('ParagraphBlockHandler.getSplitContent: No selection, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = paragraphBlock.textContent || ''; const pos = Math.min(this.lastKnownCursorPosition, fullText.length); - console.log('ParagraphBlockHandler.getSplitContent: Splitting with last known position:', { - pos, - fullTextLength: fullText.length, - before: fullText.substring(0, pos), - after: fullText.substring(pos) - }); return { before: fullText.substring(0, pos), after: fullText.substring(pos) @@ -505,15 +441,8 @@ export class ParagraphBlockHandler extends BaseBlockHandler { return null; } - console.log('ParagraphBlockHandler.getSplitContent: Selection range:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - startContainerInElement: paragraphBlock.contains(selectionInfo.startContainer) - }); - // Make sure the selection is within this block if (!WysiwygSelection.containsAcrossShadowDOM(paragraphBlock, selectionInfo.startContainer)) { - console.log('ParagraphBlockHandler.getSplitContent: Selection not in this block, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = paragraphBlock.textContent || ''; @@ -528,11 +457,9 @@ export class ParagraphBlockHandler extends BaseBlockHandler { // Get cursor position first const cursorPos = this.getCursorPosition(element, context); - console.log('ParagraphBlockHandler.getSplitContent: Cursor position for HTML split:', cursorPos); if (cursorPos === null || cursorPos === 0) { // If cursor is at start or can't determine position, move all content - console.log('ParagraphBlockHandler.getSplitContent: Cursor at start or null, moving all content'); return { before: '', after: paragraphBlock.innerHTML @@ -564,16 +491,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler { tempDiv.appendChild(afterFragment); const afterHtml = tempDiv.innerHTML; - console.log('ParagraphBlockHandler.getSplitContent: Final split result:', { - cursorPos, - beforeHtml, - beforeLength: beforeHtml.length, - beforeHtmlPreview: beforeHtml.substring(0, 100) + (beforeHtml.length > 100 ? '...' : ''), - afterHtml, - afterLength: afterHtml.length, - afterHtmlPreview: afterHtml.substring(0, 100) + (afterHtml.length > 100 ? '...' : '') - }); - return { before: beforeHtml, after: afterHtml diff --git a/ts_web/elements/wysiwyg/blocks/text/quote.block.ts b/ts_web/elements/wysiwyg/blocks/text/quote.block.ts index 6ab2110..79b929a 100644 --- a/ts_web/elements/wysiwyg/blocks/text/quote.block.ts +++ b/ts_web/elements/wysiwyg/blocks/text/quote.block.ts @@ -16,7 +16,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { const selectedClass = isSelected ? ' selected' : ''; const placeholder = this.getPlaceholder(); - console.log('QuoteBlockHandler.render:', { blockId: block.id, isSelected, content: block.content }); return `
{ - console.log('QuoteBlockHandler: Input event', { blockId: block.id }); handlers.onInput(e as InputEvent); // Track cursor position after input const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('QuoteBlockHandler: Updated cursor position after input', { pos }); } }); @@ -62,7 +57,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('QuoteBlockHandler: Cursor position before keydown', { pos, key: e.key }); } handlers.onKeyDown(e); @@ -70,24 +64,20 @@ export class QuoteBlockHandler extends BaseBlockHandler { // Focus handler quoteBlock.addEventListener('focus', () => { - console.log('QuoteBlockHandler: Focus event', { blockId: block.id }); handlers.onFocus(); }); // Blur handler quoteBlock.addEventListener('blur', () => { - console.log('QuoteBlockHandler: Blur event', { blockId: block.id }); handlers.onBlur(); }); // Composition handlers for IME support quoteBlock.addEventListener('compositionstart', () => { - console.log('QuoteBlockHandler: Composition start', { blockId: block.id }); handlers.onCompositionStart(); }); quoteBlock.addEventListener('compositionend', () => { - console.log('QuoteBlockHandler: Composition end', { blockId: block.id }); handlers.onCompositionEnd(); }); @@ -96,7 +86,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('QuoteBlockHandler: Cursor position after mouseup', { pos }); } // Selection will be handled by selectionchange event @@ -110,7 +99,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('QuoteBlockHandler: Cursor position after click', { pos }); } }, 0); }); @@ -120,7 +108,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { const pos = this.getCursorPosition(element); if (pos !== null) { this.lastKnownCursorPosition = pos; - console.log('QuoteBlockHandler: Cursor position after keyup', { pos, key: e.key }); } }); @@ -171,11 +158,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { if (selectedText !== this.lastSelectedText) { this.lastSelectedText = selectedText; - console.log('QuoteBlockHandler: Text selected', { - text: selectedText, - blockId: block.id - }); - // Create range and get rect const range = WysiwygSelection.createRangeFromInfo(selectionInfo); const rect = range.getBoundingClientRect(); @@ -252,14 +234,9 @@ export class QuoteBlockHandler extends BaseBlockHandler { // Helper methods for quote functionality getCursorPosition(element: HTMLElement, context?: any): number | null { - console.log('QuoteBlockHandler.getCursorPosition: Called with element:', element, 'context:', context); - // Get the actual quote element const quoteBlock = element.querySelector('.block.quote') as HTMLDivElement; if (!quoteBlock) { - console.log('QuoteBlockHandler.getCursorPosition: No quote element found'); - console.log('Element innerHTML:', element.innerHTML); - console.log('Element tagName:', element.tagName); return null; } @@ -275,27 +252,12 @@ export class QuoteBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('QuoteBlockHandler.getCursorPosition: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length, - element: element, - quoteBlock: quoteBlock - }); if (!selectionInfo) { - console.log('QuoteBlockHandler.getCursorPosition: No selection found'); return null; } - console.log('QuoteBlockHandler.getCursorPosition: Range info:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - collapsed: selectionInfo.collapsed, - startContainerText: selectionInfo.startContainer.textContent - }); - if (!WysiwygSelection.containsAcrossShadowDOM(quoteBlock, selectionInfo.startContainer)) { - console.log('QuoteBlockHandler.getCursorPosition: Range not in element'); return null; } @@ -306,12 +268,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { // Get the text content length up to cursor const position = preCaretRange.toString().length; - console.log('QuoteBlockHandler.getCursorPosition: Calculated position:', { - position, - preCaretText: preCaretRange.toString(), - elementText: quoteBlock.textContent, - elementTextLength: quoteBlock.textContent?.length - }); return position; } @@ -322,7 +278,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { // For quotes, get the innerHTML which includes formatting tags const content = quoteBlock.innerHTML || ''; - console.log('QuoteBlockHandler.getContent:', content); return content; } @@ -413,20 +368,11 @@ export class QuoteBlockHandler extends BaseBlockHandler { } getSplitContent(element: HTMLElement, context?: any): { before: string; after: string } | null { - console.log('QuoteBlockHandler.getSplitContent: Starting...'); - const quoteBlock = element.querySelector('.block.quote') as HTMLDivElement; if (!quoteBlock) { - console.log('QuoteBlockHandler.getSplitContent: No quote element found'); return null; } - console.log('QuoteBlockHandler.getSplitContent: Element info:', { - innerHTML: quoteBlock.innerHTML, - textContent: quoteBlock.textContent, - textLength: quoteBlock.textContent?.length - }); - // Get shadow roots from context const wysiwygBlock = context?.component; const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg'); @@ -439,23 +385,12 @@ export class QuoteBlockHandler extends BaseBlockHandler { if (blockShadowRoot) shadowRoots.push(blockShadowRoot); const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots); - console.log('QuoteBlockHandler.getSplitContent: Selection info from shadow DOMs:', { - selectionInfo, - shadowRootsCount: shadowRoots.length - }); if (!selectionInfo) { - console.log('QuoteBlockHandler.getSplitContent: No selection, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = quoteBlock.textContent || ''; const pos = Math.min(this.lastKnownCursorPosition, fullText.length); - console.log('QuoteBlockHandler.getSplitContent: Splitting with last known position:', { - pos, - fullTextLength: fullText.length, - before: fullText.substring(0, pos), - after: fullText.substring(pos) - }); return { before: fullText.substring(0, pos), after: fullText.substring(pos) @@ -464,15 +399,8 @@ export class QuoteBlockHandler extends BaseBlockHandler { return null; } - console.log('QuoteBlockHandler.getSplitContent: Selection range:', { - startContainer: selectionInfo.startContainer, - startOffset: selectionInfo.startOffset, - startContainerInElement: quoteBlock.contains(selectionInfo.startContainer) - }); - // Make sure the selection is within this block if (!WysiwygSelection.containsAcrossShadowDOM(quoteBlock, selectionInfo.startContainer)) { - console.log('QuoteBlockHandler.getSplitContent: Selection not in this block, using last known position:', this.lastKnownCursorPosition); // Try using last known cursor position if (this.lastKnownCursorPosition !== null) { const fullText = quoteBlock.textContent || ''; @@ -487,11 +415,9 @@ export class QuoteBlockHandler extends BaseBlockHandler { // Get cursor position first const cursorPos = this.getCursorPosition(element, context); - console.log('QuoteBlockHandler.getSplitContent: Cursor position for HTML split:', cursorPos); if (cursorPos === null || cursorPos === 0) { // If cursor is at start or can't determine position, move all content - console.log('QuoteBlockHandler.getSplitContent: Cursor at start or null, moving all content'); return { before: '', after: quoteBlock.innerHTML @@ -523,16 +449,6 @@ export class QuoteBlockHandler extends BaseBlockHandler { tempDiv.appendChild(afterFragment); const afterHtml = tempDiv.innerHTML; - console.log('QuoteBlockHandler.getSplitContent: Final split result:', { - cursorPos, - beforeHtml, - beforeLength: beforeHtml.length, - beforeHtmlPreview: beforeHtml.substring(0, 100) + (beforeHtml.length > 100 ? '...' : ''), - afterHtml, - afterLength: afterHtml.length, - afterHtmlPreview: afterHtml.substring(0, 100) + (afterHtml.length > 100 ? '...' : '') - }); - return { before: beforeHtml, after: afterHtml diff --git a/ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts b/ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts index 7f4d79e..4740c14 100644 --- a/ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts +++ b/ts_web/elements/wysiwyg/wysiwyg.keyboardhandler.ts @@ -120,7 +120,8 @@ export class WysiwygKeyboardHandler { const blockOps = this.component.blockOperations; // For non-editable blocks, create a new paragraph after - if (block.type === 'divider' || block.type === 'image') { + const nonEditableTypes = ['divider', 'image', 'youtube', 'markdown', 'html', 'attachment']; + if (nonEditableTypes.includes(block.type)) { e.preventDefault(); const newBlock = blockOps.createBlock(); await blockOps.insertBlockAfter(block, newBlock); @@ -145,59 +146,33 @@ export class WysiwygKeyboardHandler { // Split content at cursor position e.preventDefault(); - 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); }