update codeblock
This commit is contained in:
608
ts_web/elements/wysiwyg/blocks/text/code.block.old.ts
Normal file
608
ts_web/elements/wysiwyg/blocks/text/code.block.old.ts
Normal file
@ -0,0 +1,608 @@
|
||||
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';
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
export class CodeBlockHandler extends BaseBlockHandler {
|
||||
type = 'code';
|
||||
|
||||
// Track cursor position
|
||||
private lastKnownCursorPosition: number = 0;
|
||||
|
||||
// Debounce timer for highlighting
|
||||
private highlightingTimer: any = null;
|
||||
|
||||
render(block: IBlock, isSelected: boolean): string {
|
||||
const language = block.metadata?.language || 'javascript';
|
||||
const selectedClass = isSelected ? ' selected' : '';
|
||||
|
||||
return `
|
||||
<div class="code-block-container${selectedClass}">
|
||||
<div class="code-language">${language}</div>
|
||||
<div class="code-grid">
|
||||
<div class="line-numbers"></div>
|
||||
<div
|
||||
class="block code"
|
||||
contenteditable="true"
|
||||
data-block-id="${block.id}"
|
||||
data-block-type="${block.type}"
|
||||
spellcheck="false"
|
||||
></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
// Set initial content if needed - use textContent for code blocks
|
||||
if (block.content && !codeBlock.textContent) {
|
||||
codeBlock.textContent = block.content;
|
||||
}
|
||||
|
||||
// Apply initial highlighting
|
||||
this.applyHighlighting(element, block);
|
||||
|
||||
// Variable to track if we're in composition mode
|
||||
let isComposing = false;
|
||||
|
||||
// Input handler
|
||||
codeBlock.addEventListener('input', (e) => {
|
||||
handlers.onInput(e as InputEvent);
|
||||
|
||||
// Track cursor position after input
|
||||
const pos = this.getCursorPosition(element);
|
||||
if (pos !== null) {
|
||||
this.lastKnownCursorPosition = pos;
|
||||
}
|
||||
|
||||
// Update line numbers immediately
|
||||
const lineNumbersContainer = element.querySelector('.line-numbers') as HTMLDivElement;
|
||||
if (lineNumbersContainer) {
|
||||
this.updateLineNumbers(codeBlock.textContent || '', lineNumbersContainer);
|
||||
}
|
||||
|
||||
// Debounce highlighting to avoid performance issues while typing
|
||||
if (!isComposing) {
|
||||
clearTimeout(this.highlightingTimer);
|
||||
this.highlightingTimer = setTimeout(() => {
|
||||
// Store cursor position before highlighting
|
||||
const currentPos = this.getCursorPosition(element);
|
||||
|
||||
// Get plain text before highlighting
|
||||
const plainText = codeBlock.textContent || '';
|
||||
|
||||
// Apply highlighting
|
||||
const language = block.metadata?.language || 'javascript';
|
||||
try {
|
||||
const result = hlight.highlight(plainText, {
|
||||
language: language,
|
||||
ignoreIllegals: true
|
||||
});
|
||||
codeBlock.innerHTML = result.value;
|
||||
} catch (error) {
|
||||
// Keep plain text if highlighting fails
|
||||
}
|
||||
|
||||
// Restore cursor position
|
||||
if (currentPos !== null && document.activeElement === codeBlock) {
|
||||
WysiwygSelection.setCursorPosition(codeBlock, currentPos);
|
||||
}
|
||||
}, 500); // Wait 500ms after user stops typing
|
||||
}
|
||||
});
|
||||
|
||||
// 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', () => {
|
||||
handlers.onFocus();
|
||||
});
|
||||
|
||||
// Blur handler
|
||||
codeBlock.addEventListener('blur', () => {
|
||||
handlers.onBlur();
|
||||
});
|
||||
|
||||
// Composition handlers for IME support
|
||||
codeBlock.addEventListener('compositionstart', () => {
|
||||
isComposing = true;
|
||||
handlers.onCompositionStart();
|
||||
});
|
||||
|
||||
codeBlock.addEventListener('compositionend', () => {
|
||||
isComposing = false;
|
||||
handlers.onCompositionEnd();
|
||||
|
||||
// Apply highlighting after composition ends
|
||||
setTimeout(() => {
|
||||
this.applyHighlighting(element, block);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 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;
|
||||
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.code-block-container.selected {
|
||||
border-color: ${cssManager.bdTheme('#0066ff', '#4d9fff')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 255, 0.1)', 'rgba(77, 159, 255, 0.1)')};
|
||||
}
|
||||
|
||||
.code-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
background: ${cssManager.bdTheme('#f3f3f3', '#0a0a0a')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
|
||||
padding: 16px 12px 16px 0;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
color: ${cssManager.bdTheme('#999999', '#666666')};
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.line-number:last-child {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.block.code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
padding: 16px 20px;
|
||||
padding-top: 32px;
|
||||
white-space: pre-wrap;
|
||||
color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
min-height: 100px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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 0 0 6px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
text-transform: lowercase;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Highlight.js theme overrides */
|
||||
.block.code .hljs-keyword {
|
||||
color: ${cssManager.bdTheme('#d73a49', '#ff65ec')};
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.block.code .hljs-string {
|
||||
color: ${cssManager.bdTheme('#032f62', '#ffa465')};
|
||||
}
|
||||
|
||||
.block.code .hljs-number {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#65d5ff')};
|
||||
}
|
||||
|
||||
.block.code .hljs-function {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#6596ff')};
|
||||
}
|
||||
|
||||
.block.code .hljs-comment {
|
||||
color: ${cssManager.bdTheme('#6a737d', '#ffd765')};
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.block.code .hljs-variable,
|
||||
.block.code .hljs-attr {
|
||||
color: ${cssManager.bdTheme('#e36209', '#65ff6a')};
|
||||
}
|
||||
|
||||
.block.code .hljs-class,
|
||||
.block.code .hljs-title {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#65d5ff')};
|
||||
}
|
||||
|
||||
.block.code .hljs-params {
|
||||
color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
|
||||
}
|
||||
|
||||
.block.code .hljs-built_in {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#65ff6a')};
|
||||
}
|
||||
|
||||
.block.code .hljs-literal {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#ff65ec')};
|
||||
}
|
||||
|
||||
.block.code .hljs-meta {
|
||||
color: ${cssManager.bdTheme('#735c0f', '#ffa465')};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
getPlaceholder(): string {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Helper methods for code functionality
|
||||
|
||||
private applyHighlighting(element: HTMLElement, block: IBlock): void {
|
||||
const codeBlock = element.querySelector('.block.code') as HTMLDivElement;
|
||||
const lineNumbersContainer = element.querySelector('.line-numbers') as HTMLDivElement;
|
||||
|
||||
if (!codeBlock || !lineNumbersContainer) return;
|
||||
|
||||
// Store current cursor position
|
||||
const cursorPos = this.getCursorPosition(element);
|
||||
|
||||
// Get the plain text content
|
||||
const plainText = codeBlock.textContent || '';
|
||||
|
||||
// Apply syntax highlighting
|
||||
const language = block.metadata?.language || 'javascript';
|
||||
let highlightedHtml: string;
|
||||
|
||||
try {
|
||||
const result = hlight.highlight(plainText, {
|
||||
language: language,
|
||||
ignoreIllegals: true
|
||||
});
|
||||
highlightedHtml = result.value;
|
||||
} catch (error) {
|
||||
// Fallback to plain text if highlighting fails
|
||||
highlightedHtml = this.escapeHtml(plainText);
|
||||
}
|
||||
|
||||
// Update the code block with highlighted content
|
||||
codeBlock.innerHTML = highlightedHtml;
|
||||
|
||||
// Update line numbers
|
||||
this.updateLineNumbers(plainText, lineNumbersContainer);
|
||||
|
||||
// Restore cursor position if we had one
|
||||
if (cursorPos !== null && document.activeElement === codeBlock) {
|
||||
WysiwygSelection.setCursorPosition(codeBlock, cursorPos);
|
||||
}
|
||||
}
|
||||
|
||||
private updateLineNumbers(content: string, container: HTMLDivElement): void {
|
||||
const lines = content.split('\n');
|
||||
const lineCount = lines.length;
|
||||
|
||||
// Generate line numbers HTML
|
||||
let lineNumbersHtml = '';
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
lineNumbersHtml += `<div class="line-number">${i}</div>`;
|
||||
}
|
||||
|
||||
container.innerHTML = lineNumbersHtml;
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getCursorPosition(element: HTMLElement, context?: any): number | null {
|
||||
// Get the actual code element
|
||||
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) {
|
||||
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 || '';
|
||||
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;
|
||||
|
||||
// Apply highlighting
|
||||
const block: IBlock = {
|
||||
id: codeBlock.dataset.blockId || '',
|
||||
type: 'code',
|
||||
content: content,
|
||||
metadata: context?.block?.metadata || {}
|
||||
};
|
||||
this.applyHighlighting(element, block);
|
||||
|
||||
// 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)
|
||||
};
|
||||
}
|
||||
}
|
@ -1,81 +1,112 @@
|
||||
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';
|
||||
import hlight from 'highlight.js';
|
||||
|
||||
/**
|
||||
* New CodeBlockHandler with improved architecture
|
||||
*
|
||||
* Key improvements:
|
||||
* 1. Simpler DOM structure
|
||||
* 2. Better line number handling
|
||||
* 3. Non-intrusive syntax highlighting
|
||||
* 4. Cleaner event handling
|
||||
*/
|
||||
export class CodeBlockHandler extends BaseBlockHandler {
|
||||
type = 'code';
|
||||
|
||||
// Track cursor position
|
||||
private lastKnownCursorPosition: number = 0;
|
||||
private highlightTimer: any = null;
|
||||
|
||||
render(block: IBlock, isSelected: boolean): string {
|
||||
const language = block.metadata?.language || 'plain text';
|
||||
const selectedClass = isSelected ? ' selected' : '';
|
||||
const language = block.metadata?.language || 'javascript';
|
||||
const content = block.content || '';
|
||||
const lineCount = content.split('\n').length;
|
||||
|
||||
// Generate line numbers
|
||||
let lineNumbersHtml = '';
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
lineNumbersHtml += `<div class="line-number">${i}</div>`;
|
||||
}
|
||||
|
||||
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"
|
||||
></div>
|
||||
<div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
|
||||
<div class="code-header">
|
||||
<span class="language-label">${language}</span>
|
||||
</div>
|
||||
<div class="code-body">
|
||||
<div class="line-numbers">${lineNumbersHtml}</div>
|
||||
<div class="code-content">
|
||||
<pre class="code-pre"><code class="code-editor"
|
||||
contenteditable="true"
|
||||
data-block-id="${block.id}"
|
||||
data-block-type="${block.type}"
|
||||
spellcheck="false">${this.escapeHtml(content)}</code></pre>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
const container = element.querySelector('.code-block-container') as HTMLElement;
|
||||
|
||||
// Set initial content if needed - use textContent for code blocks
|
||||
if (block.content && !codeBlock.textContent) {
|
||||
codeBlock.textContent = block.content;
|
||||
}
|
||||
if (!editor || !container) return;
|
||||
|
||||
// Track if we're currently editing
|
||||
let isEditing = false;
|
||||
|
||||
// Focus handler
|
||||
editor.addEventListener('focus', () => {
|
||||
isEditing = true;
|
||||
container.classList.add('editing');
|
||||
handlers.onFocus();
|
||||
});
|
||||
|
||||
// Blur handler
|
||||
editor.addEventListener('blur', () => {
|
||||
isEditing = false;
|
||||
container.classList.remove('editing');
|
||||
// Apply final highlighting on blur
|
||||
this.applyHighlighting(element, block);
|
||||
handlers.onBlur();
|
||||
});
|
||||
|
||||
// Input handler
|
||||
codeBlock.addEventListener('input', (e) => {
|
||||
editor.addEventListener('input', (e) => {
|
||||
handlers.onInput(e as InputEvent);
|
||||
|
||||
// Track cursor position after input
|
||||
const pos = this.getCursorPosition(element);
|
||||
if (pos !== null) {
|
||||
this.lastKnownCursorPosition = pos;
|
||||
// Update line numbers
|
||||
this.updateLineNumbers(element);
|
||||
|
||||
// Clear any pending highlight
|
||||
clearTimeout(this.highlightTimer);
|
||||
|
||||
// Schedule highlighting (only if not actively editing)
|
||||
if (!isEditing) {
|
||||
this.highlightTimer = setTimeout(() => {
|
||||
this.applyHighlighting(element, block);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
editor.addEventListener('keydown', (e) => {
|
||||
// Handle Tab
|
||||
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'));
|
||||
this.updateLineNumbers(element);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@ -83,54 +114,8 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
handlers.onKeyDown(e);
|
||||
});
|
||||
|
||||
// Focus handler
|
||||
codeBlock.addEventListener('focus', () => {
|
||||
handlers.onFocus();
|
||||
});
|
||||
|
||||
// Blur handler
|
||||
codeBlock.addEventListener('blur', () => {
|
||||
handlers.onBlur();
|
||||
});
|
||||
|
||||
// Composition handlers for IME support
|
||||
codeBlock.addEventListener('compositionstart', () => {
|
||||
handlers.onCompositionStart();
|
||||
});
|
||||
|
||||
codeBlock.addEventListener('compositionend', () => {
|
||||
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) => {
|
||||
// Paste handler - plain text only
|
||||
editor.addEventListener('paste', (e) => {
|
||||
e.preventDefault();
|
||||
const text = e.clipboardData?.getData('text/plain');
|
||||
if (text) {
|
||||
@ -144,257 +129,373 @@ export class CodeBlockHandler extends BaseBlockHandler {
|
||||
range.setEndAfter(textNode);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
// Trigger input event
|
||||
handlers.onInput(new InputEvent('input'));
|
||||
this.updateLineNumbers(element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Composition handlers
|
||||
editor.addEventListener('compositionstart', () => handlers.onCompositionStart());
|
||||
editor.addEventListener('compositionend', () => handlers.onCompositionEnd());
|
||||
|
||||
// Initial syntax highlighting if content exists
|
||||
if (block.content && !isEditing) {
|
||||
requestAnimationFrame(() => {
|
||||
this.applyHighlighting(element, block);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private updateLineNumbers(element: HTMLElement): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
const lineNumbersContainer = element.querySelector('.line-numbers') as HTMLElement;
|
||||
|
||||
if (!editor || !lineNumbersContainer) return;
|
||||
|
||||
const content = editor.textContent || '';
|
||||
const lines = content.split('\n');
|
||||
const lineCount = lines.length || 1;
|
||||
|
||||
let lineNumbersHtml = '';
|
||||
for (let i = 1; i <= lineCount; i++) {
|
||||
lineNumbersHtml += `<div class="line-number">${i}</div>`;
|
||||
}
|
||||
|
||||
lineNumbersContainer.innerHTML = lineNumbersHtml;
|
||||
}
|
||||
|
||||
private applyHighlighting(element: HTMLElement, block: IBlock): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (!editor) return;
|
||||
|
||||
// Store cursor position
|
||||
const cursorPos = this.getCursorPosition(element);
|
||||
|
||||
// Get plain text content
|
||||
const content = editor.textContent || '';
|
||||
const language = block.metadata?.language || 'javascript';
|
||||
|
||||
// Apply highlighting
|
||||
try {
|
||||
const result = hlight.highlight(content, {
|
||||
language: language,
|
||||
ignoreIllegals: true
|
||||
});
|
||||
|
||||
// Only update if we have valid highlighted content
|
||||
if (result.value) {
|
||||
editor.innerHTML = result.value;
|
||||
|
||||
// Restore cursor position if editor is focused
|
||||
if (document.activeElement === editor && cursorPos !== null) {
|
||||
requestAnimationFrame(() => {
|
||||
WysiwygSelection.setCursorPosition(editor, cursorPos);
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// If highlighting fails, keep plain text
|
||||
console.warn('Syntax highlighting failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getContent(element: HTMLElement): string {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
return editor?.textContent || '';
|
||||
}
|
||||
|
||||
setContent(element: HTMLElement, content: string): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (!editor) return;
|
||||
|
||||
editor.textContent = content;
|
||||
this.updateLineNumbers(element);
|
||||
|
||||
// Apply highlighting if not focused
|
||||
if (document.activeElement !== editor) {
|
||||
const block: IBlock = {
|
||||
id: editor.dataset.blockId || '',
|
||||
type: 'code',
|
||||
content: content,
|
||||
metadata: {
|
||||
language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'javascript'
|
||||
}
|
||||
};
|
||||
this.applyHighlighting(element, block);
|
||||
}
|
||||
}
|
||||
|
||||
getCursorPosition(element: HTMLElement): number | null {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (!editor) return null;
|
||||
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return null;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
if (!editor.contains(range.startContainer)) return null;
|
||||
|
||||
const preCaretRange = document.createRange();
|
||||
preCaretRange.selectNodeContents(editor);
|
||||
preCaretRange.setEnd(range.startContainer, range.startOffset);
|
||||
|
||||
return preCaretRange.toString().length;
|
||||
}
|
||||
|
||||
setCursorToStart(element: HTMLElement): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (editor) {
|
||||
WysiwygSelection.setCursorPosition(editor, 0);
|
||||
}
|
||||
}
|
||||
|
||||
setCursorToEnd(element: HTMLElement): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (editor) {
|
||||
const length = editor.textContent?.length || 0;
|
||||
WysiwygSelection.setCursorPosition(editor, length);
|
||||
}
|
||||
}
|
||||
|
||||
focus(element: HTMLElement): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
editor?.focus();
|
||||
}
|
||||
|
||||
focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end'): void {
|
||||
const editor = element.querySelector('.code-editor') as HTMLElement;
|
||||
if (!editor) return;
|
||||
|
||||
editor.focus();
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (position === 'start') {
|
||||
this.setCursorToStart(element);
|
||||
} else if (position === 'end') {
|
||||
this.setCursorToEnd(element);
|
||||
} else if (typeof position === 'number') {
|
||||
WysiwygSelection.setCursorPosition(editor, position);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getSplitContent(element: HTMLElement): { before: string; after: string } | null {
|
||||
const position = this.getCursorPosition(element);
|
||||
if (position === null) return null;
|
||||
|
||||
const content = this.getContent(element);
|
||||
return {
|
||||
before: content.substring(0, position),
|
||||
after: content.substring(position)
|
||||
};
|
||||
}
|
||||
|
||||
getStyles(): string {
|
||||
return `
|
||||
/* Code block specific styles */
|
||||
/* Code Block Container */
|
||||
.code-block-container {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
margin: 16px 0;
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#0d1117')};
|
||||
border: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.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-block-container.selected {
|
||||
border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(9, 105, 218, 0.15)', 'rgba(88, 166, 255, 0.15)')};
|
||||
}
|
||||
|
||||
.code-language {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
|
||||
color: ${cssManager.bdTheme('#586069', '#8b949e')};
|
||||
padding: 4px 12px;
|
||||
.code-block-container.editing {
|
||||
border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.code-header {
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-label {
|
||||
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;
|
||||
color: ${cssManager.bdTheme('#57606a', '#8b949e')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0d1117')};
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Code Body */
|
||||
.code-body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Line Numbers */
|
||||
.line-numbers {
|
||||
flex-shrink: 0;
|
||||
padding: 16px 0;
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#010409')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
padding: 0 12px;
|
||||
color: ${cssManager.bdTheme('#57606a', '#484f58')};
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
/* Code Content */
|
||||
.code-content {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
min-height: 84px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.code-editor:empty::before {
|
||||
content: "// Type or paste code here...";
|
||||
color: ${cssManager.bdTheme('#6a737d', '#484f58')};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Colors */
|
||||
.code-editor .hljs-keyword {
|
||||
color: ${cssManager.bdTheme('#d73a49', '#ff7b72')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-string {
|
||||
color: ${cssManager.bdTheme('#032f62', '#a5d6ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-number {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-function {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-comment {
|
||||
color: ${cssManager.bdTheme('#6a737d', '#8b949e')};
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.code-editor .hljs-variable,
|
||||
.code-editor .hljs-attr {
|
||||
color: ${cssManager.bdTheme('#e36209', '#ffa657')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-class,
|
||||
.code-editor .hljs-title {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-params {
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-built_in {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-literal {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-meta {
|
||||
color: ${cssManager.bdTheme('#735c0f', '#f2cc60')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-punctuation {
|
||||
color: ${cssManager.bdTheme('#24292f', '#c9d1d9')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-tag {
|
||||
color: ${cssManager.bdTheme('#22863a', '#7ee83f')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-attribute {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-tag {
|
||||
color: ${cssManager.bdTheme('#22863a', '#7ee83f')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-class {
|
||||
color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
|
||||
}
|
||||
|
||||
.code-editor .hljs-selector-id {
|
||||
color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.code-editor::selection,
|
||||
.code-editor *::selection {
|
||||
background: ${cssManager.bdTheme('rgba(9, 105, 218, 0.3)', 'rgba(88, 166, 255, 0.3)')};
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.code-content::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-track {
|
||||
background: ${cssManager.bdTheme('#f6f8fa', '#010409')};
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('#d1d5da', '#30363d')};
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.code-content::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('#c8c8c8', '#484f58')};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
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) {
|
||||
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 || '';
|
||||
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)
|
||||
};
|
||||
}
|
||||
}
|
@ -48,12 +48,12 @@ export class DeesWysiwygBlock extends DeesElement {
|
||||
private lastKnownCursorPosition: number = 0;
|
||||
private lastSelectedText: string = '';
|
||||
|
||||
private static handlerStylesInjected = false;
|
||||
private handlerStylesInjected = false;
|
||||
|
||||
private injectHandlerStyles(): void {
|
||||
// Only inject once per component class
|
||||
if (DeesWysiwygBlock.handlerStylesInjected) return;
|
||||
DeesWysiwygBlock.handlerStylesInjected = true;
|
||||
// Only inject once per instance
|
||||
if (this.handlerStylesInjected) return;
|
||||
this.handlerStylesInjected = true;
|
||||
|
||||
// Get styles from all registered block handlers
|
||||
let styles = '';
|
||||
@ -131,20 +131,7 @@ export class DeesWysiwygBlock extends DeesElement {
|
||||
margin: 16px 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: 20px 0;
|
||||
}
|
||||
/* Code block styles moved to handler */
|
||||
|
||||
.block.list {
|
||||
padding: 0;
|
||||
@ -200,24 +187,7 @@ export class DeesWysiwygBlock extends DeesElement {
|
||||
border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.code-block-container {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* Code block container and language styles moved to handler */
|
||||
|
||||
/* Selection styles */
|
||||
.block ::selection {
|
||||
|
Reference in New Issue
Block a user