update
This commit is contained in:
@ -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 `
|
||||
<div class="code-block-container">
|
||||
<div class="code-language">${language}</div>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 `
|
||||
<div
|
||||
@ -43,7 +42,6 @@ export class HeadingBlockHandler extends BaseBlockHandler {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('HeadingBlockHandler.setup: Setting up heading block', { blockId: block.id, level: this.level });
|
||||
|
||||
// Set initial content if needed
|
||||
if (block.content && !headingBlock.innerHTML) {
|
||||
@ -52,14 +50,12 @@ export class HeadingBlockHandler extends BaseBlockHandler {
|
||||
|
||||
// Input handler with cursor tracking
|
||||
headingBlock.addEventListener('input', (e) => {
|
||||
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
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 `
|
||||
<div
|
||||
@ -36,7 +35,6 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('ParagraphBlockHandler.setup: Setting up paragraph block', { blockId: block.id });
|
||||
|
||||
// Set initial content if needed
|
||||
if (block.content && !paragraphBlock.innerHTML) {
|
||||
@ -45,14 +43,12 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
|
||||
|
||||
// Input handler with cursor tracking
|
||||
paragraphBlock.addEventListener('input', (e) => {
|
||||
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
|
||||
|
@ -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 `
|
||||
<div
|
||||
@ -36,8 +35,6 @@ export class QuoteBlockHandler extends BaseBlockHandler {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('QuoteBlockHandler.setup: Setting up quote block', { blockId: block.id });
|
||||
|
||||
// Set initial content if needed
|
||||
if (block.content && !quoteBlock.innerHTML) {
|
||||
quoteBlock.innerHTML = block.content;
|
||||
@ -45,14 +42,12 @@ export class QuoteBlockHandler extends BaseBlockHandler {
|
||||
|
||||
// Input handler with cursor tracking
|
||||
quoteBlock.addEventListener('input', (e) => {
|
||||
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
|
||||
|
@ -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);
|
||||
}
|
||||
|
Reference in New Issue
Block a user