411 lines
13 KiB
TypeScript
411 lines
13 KiB
TypeScript
import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
|
|
import type { IBlock } from '../../wysiwyg.types.js';
|
|
import { cssManager } from '@design.estate/dees-element';
|
|
import { WysiwygBlocks } from '../../wysiwyg.blocks.js';
|
|
import { WysiwygSelection } from '../../wysiwyg.selection.js';
|
|
|
|
export class CodeBlockHandler extends BaseBlockHandler {
|
|
type = 'code';
|
|
|
|
// Track cursor position
|
|
private lastKnownCursorPosition: number = 0;
|
|
|
|
render(block: IBlock, isSelected: boolean): string {
|
|
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>
|
|
<div
|
|
class="block code${selectedClass}"
|
|
contenteditable="true"
|
|
data-block-id="${block.id}"
|
|
data-block-type="${block.type}"
|
|
spellcheck="false"
|
|
>${block.content || ''}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) {
|
|
console.error('CodeBlockHandler.setup: No code block element found');
|
|
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;
|
|
}
|
|
|
|
// Input handler
|
|
codeBlock.addEventListener('input', (e) => {
|
|
console.log('CodeBlockHandler: 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;
|
|
}
|
|
});
|
|
|
|
// Keydown handler
|
|
codeBlock.addEventListener('keydown', (e) => {
|
|
// Track cursor position before keydown
|
|
const pos = this.getCursorPosition(element);
|
|
if (pos !== null) {
|
|
this.lastKnownCursorPosition = pos;
|
|
}
|
|
|
|
// Special handling for Tab key in code blocks
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
// Insert two spaces for tab
|
|
const selection = window.getSelection();
|
|
if (selection && selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0);
|
|
range.deleteContents();
|
|
const textNode = document.createTextNode(' ');
|
|
range.insertNode(textNode);
|
|
range.setStartAfter(textNode);
|
|
range.setEndAfter(textNode);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
|
|
// Trigger input event
|
|
handlers.onInput(new InputEvent('input'));
|
|
}
|
|
return;
|
|
}
|
|
|
|
handlers.onKeyDown(e);
|
|
});
|
|
|
|
// 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();
|
|
});
|
|
|
|
// Mouse up handler
|
|
codeBlock.addEventListener('mouseup', (e) => {
|
|
const pos = this.getCursorPosition(element);
|
|
if (pos !== null) {
|
|
this.lastKnownCursorPosition = pos;
|
|
}
|
|
handlers.onMouseUp?.(e);
|
|
});
|
|
|
|
// Click handler with delayed cursor tracking
|
|
codeBlock.addEventListener('click', (e: MouseEvent) => {
|
|
setTimeout(() => {
|
|
const pos = this.getCursorPosition(element);
|
|
if (pos !== null) {
|
|
this.lastKnownCursorPosition = pos;
|
|
}
|
|
}, 0);
|
|
});
|
|
|
|
// Keyup handler for cursor tracking
|
|
codeBlock.addEventListener('keyup', (e) => {
|
|
const pos = this.getCursorPosition(element);
|
|
if (pos !== null) {
|
|
this.lastKnownCursorPosition = pos;
|
|
}
|
|
});
|
|
|
|
// Paste handler - handle as plain text
|
|
codeBlock.addEventListener('paste', (e) => {
|
|
e.preventDefault();
|
|
const text = e.clipboardData?.getData('text/plain');
|
|
if (text) {
|
|
const selection = window.getSelection();
|
|
if (selection && selection.rangeCount > 0) {
|
|
const range = selection.getRangeAt(0);
|
|
range.deleteContents();
|
|
const textNode = document.createTextNode(text);
|
|
range.insertNode(textNode);
|
|
range.setStartAfter(textNode);
|
|
range.setEndAfter(textNode);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
|
|
// Trigger input event
|
|
handlers.onInput(new InputEvent('input'));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
getStyles(): string {
|
|
return `
|
|
/* Code block specific styles */
|
|
.code-block-container {
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.block.code {
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 14px;
|
|
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
|
|
padding: 16px 20px;
|
|
padding-top: 32px;
|
|
border-radius: 6px;
|
|
white-space: pre-wrap;
|
|
color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.code-language {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
|
|
color: ${cssManager.bdTheme('#586069', '#8b949e')};
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
border-radius: 0 6px 0 6px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
text-transform: lowercase;
|
|
z-index: 1;
|
|
}
|
|
`;
|
|
}
|
|
|
|
getPlaceholder(): string {
|
|
return '';
|
|
}
|
|
|
|
// Helper methods for code functionality
|
|
|
|
getCursorPosition(element: HTMLElement, context?: any): number | null {
|
|
// 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;
|
|
}
|
|
|
|
// Get shadow roots from context
|
|
const wysiwygBlock = context?.component;
|
|
const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg');
|
|
const parentShadowRoot = parentComponent?.shadowRoot;
|
|
const blockShadowRoot = context?.shadowRoot;
|
|
|
|
// Get selection info with both shadow roots for proper traversal
|
|
const shadowRoots: ShadowRoot[] = [];
|
|
if (parentShadowRoot) shadowRoots.push(parentShadowRoot);
|
|
if (blockShadowRoot) shadowRoots.push(blockShadowRoot);
|
|
|
|
const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots);
|
|
|
|
if (!selectionInfo) {
|
|
return null;
|
|
}
|
|
|
|
if (!WysiwygSelection.containsAcrossShadowDOM(codeBlock, selectionInfo.startContainer)) {
|
|
return null;
|
|
}
|
|
|
|
// Create a range from start of element to cursor position
|
|
const preCaretRange = document.createRange();
|
|
preCaretRange.selectNodeContents(codeBlock);
|
|
preCaretRange.setEnd(selectionInfo.startContainer, selectionInfo.startOffset);
|
|
|
|
// Get the text content length up to cursor
|
|
const position = preCaretRange.toString().length;
|
|
|
|
return position;
|
|
}
|
|
|
|
getContent(element: HTMLElement, context?: any): string {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) return '';
|
|
|
|
// For code blocks, get textContent to avoid HTML formatting
|
|
const content = codeBlock.textContent || '';
|
|
console.log('CodeBlockHandler.getContent:', content);
|
|
return content;
|
|
}
|
|
|
|
setContent(element: HTMLElement, content: string, context?: any): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) return;
|
|
|
|
// Store if we have focus
|
|
const hadFocus = document.activeElement === codeBlock ||
|
|
element.shadowRoot?.activeElement === codeBlock;
|
|
|
|
// Use textContent for code blocks
|
|
codeBlock.textContent = content;
|
|
|
|
// Restore focus if we had it
|
|
if (hadFocus) {
|
|
codeBlock.focus();
|
|
}
|
|
}
|
|
|
|
setCursorToStart(element: HTMLElement, context?: any): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (codeBlock) {
|
|
WysiwygBlocks.setCursorToStart(codeBlock);
|
|
}
|
|
}
|
|
|
|
setCursorToEnd(element: HTMLElement, context?: any): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (codeBlock) {
|
|
WysiwygBlocks.setCursorToEnd(codeBlock);
|
|
}
|
|
}
|
|
|
|
focus(element: HTMLElement, context?: any): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) return;
|
|
|
|
// Ensure the element is focusable
|
|
if (!codeBlock.hasAttribute('contenteditable')) {
|
|
codeBlock.setAttribute('contenteditable', 'true');
|
|
}
|
|
|
|
codeBlock.focus();
|
|
|
|
// If focus failed, try again after a microtask
|
|
if (document.activeElement !== codeBlock && element.shadowRoot?.activeElement !== codeBlock) {
|
|
Promise.resolve().then(() => {
|
|
codeBlock.focus();
|
|
});
|
|
}
|
|
}
|
|
|
|
focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end', context?: any): void {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) return;
|
|
|
|
// Ensure element is focusable first
|
|
if (!codeBlock.hasAttribute('contenteditable')) {
|
|
codeBlock.setAttribute('contenteditable', 'true');
|
|
}
|
|
|
|
// Focus the element
|
|
codeBlock.focus();
|
|
|
|
// Set cursor position after focus is established
|
|
const setCursor = () => {
|
|
if (position === 'start') {
|
|
this.setCursorToStart(element, context);
|
|
} else if (position === 'end') {
|
|
this.setCursorToEnd(element, context);
|
|
} else if (typeof position === 'number') {
|
|
// Use the selection utility to set cursor position
|
|
WysiwygSelection.setCursorPosition(codeBlock, position);
|
|
}
|
|
};
|
|
|
|
// Ensure cursor is set after focus
|
|
if (document.activeElement === codeBlock || element.shadowRoot?.activeElement === codeBlock) {
|
|
setCursor();
|
|
} else {
|
|
// Wait for focus to be established
|
|
Promise.resolve().then(() => {
|
|
if (document.activeElement === codeBlock || element.shadowRoot?.activeElement === codeBlock) {
|
|
setCursor();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
getSplitContent(element: HTMLElement, context?: any): { before: string; after: string } | null {
|
|
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
|
if (!codeBlock) {
|
|
return null;
|
|
}
|
|
|
|
// Get shadow roots from context
|
|
const wysiwygBlock = context?.component;
|
|
const parentComponent = wysiwygBlock?.closest('dees-input-wysiwyg');
|
|
const parentShadowRoot = parentComponent?.shadowRoot;
|
|
const blockShadowRoot = context?.shadowRoot;
|
|
|
|
// Get selection info with both shadow roots for proper traversal
|
|
const shadowRoots: ShadowRoot[] = [];
|
|
if (parentShadowRoot) shadowRoots.push(parentShadowRoot);
|
|
if (blockShadowRoot) shadowRoots.push(blockShadowRoot);
|
|
|
|
const selectionInfo = WysiwygSelection.getSelectionInfo(...shadowRoots);
|
|
|
|
if (!selectionInfo) {
|
|
// Try using last known cursor position
|
|
if (this.lastKnownCursorPosition !== null) {
|
|
const fullText = codeBlock.textContent || '';
|
|
const pos = Math.min(this.lastKnownCursorPosition, fullText.length);
|
|
return {
|
|
before: fullText.substring(0, pos),
|
|
after: fullText.substring(pos)
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// Make sure the selection is within this block
|
|
if (!WysiwygSelection.containsAcrossShadowDOM(codeBlock, selectionInfo.startContainer)) {
|
|
// Try using last known cursor position
|
|
if (this.lastKnownCursorPosition !== null) {
|
|
const fullText = codeBlock.textContent || '';
|
|
const pos = Math.min(this.lastKnownCursorPosition, fullText.length);
|
|
return {
|
|
before: fullText.substring(0, pos),
|
|
after: fullText.substring(pos)
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// Get cursor position
|
|
const cursorPos = this.getCursorPosition(element, context);
|
|
|
|
if (cursorPos === null || cursorPos === 0) {
|
|
// If cursor is at start or can't determine position, move all content
|
|
return {
|
|
before: '',
|
|
after: codeBlock.textContent || ''
|
|
};
|
|
}
|
|
|
|
// For code blocks, split based on text content only
|
|
const fullText = codeBlock.textContent || '';
|
|
|
|
return {
|
|
before: fullText.substring(0, cursorPos),
|
|
after: fullText.substring(cursorPos)
|
|
};
|
|
}
|
|
} |