feat(editor): Add wysiwyg editor
This commit is contained in:
564
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
Normal file
564
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
Normal file
@@ -0,0 +1,564 @@
|
||||
import { DeesInputBase } from '../dees-input-base.js';
|
||||
import { demoFunc } from '../dees-input-wysiwyg.demo.js';
|
||||
|
||||
import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import {
|
||||
type IBlock,
|
||||
type OutputFormat,
|
||||
wysiwygStyles,
|
||||
WysiwygConverters,
|
||||
WysiwygShortcuts,
|
||||
WysiwygBlocks,
|
||||
type ISlashMenuItem
|
||||
} from './index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-wysiwyg': DeesInputWysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-wysiwyg')
|
||||
export class DeesInputWysiwyg extends DeesInputBase<string> {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: String })
|
||||
public value: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public outputFormat: OutputFormat = 'html';
|
||||
|
||||
@state()
|
||||
private blocks: IBlock[] = [
|
||||
{
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
}
|
||||
];
|
||||
|
||||
@state()
|
||||
private selectedBlockId: string | null = null;
|
||||
|
||||
@state()
|
||||
private showSlashMenu: boolean = false;
|
||||
|
||||
@state()
|
||||
private slashMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
|
||||
|
||||
@state()
|
||||
private slashMenuFilter: string = '';
|
||||
|
||||
@state()
|
||||
private slashMenuSelectedIndex: number = 0;
|
||||
|
||||
private editorContentRef: HTMLDivElement;
|
||||
private isComposing: boolean = false;
|
||||
private saveTimeout: any = null;
|
||||
|
||||
public static styles = [
|
||||
...DeesInputBase.baseStyles,
|
||||
cssManager.defaultStyles,
|
||||
wysiwygStyles
|
||||
];
|
||||
|
||||
async firstUpdated() {
|
||||
this.updateValue();
|
||||
this.editorContentRef = this.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
|
||||
// Set initial content for blocks
|
||||
this.setBlockContents();
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, any>) {
|
||||
// When blocks change (e.g., from setValue), update DOM content
|
||||
if (changedProperties.has('blocks')) {
|
||||
this.setBlockContents();
|
||||
}
|
||||
}
|
||||
|
||||
private setBlockContents() {
|
||||
// Only set content for blocks that aren't being edited
|
||||
this.blocks.forEach(block => {
|
||||
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
|
||||
if (blockElement && document.activeElement !== blockElement && block.type !== 'divider') {
|
||||
if (block.type === 'list') {
|
||||
blockElement.innerHTML = WysiwygBlocks.renderListContent(block.content, block.metadata);
|
||||
} else {
|
||||
blockElement.textContent = block.content;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<dees-label
|
||||
.label="${this.label}"
|
||||
.description="${this.description}"
|
||||
.required="${this.required}"
|
||||
></dees-label>
|
||||
<div class="wysiwyg-container">
|
||||
<div
|
||||
class="editor-content"
|
||||
@click="${this.handleEditorClick}"
|
||||
>
|
||||
${this.blocks.map(block => this.renderBlock(block))}
|
||||
</div>
|
||||
${this.showSlashMenu ? this.renderSlashMenu() : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderBlock(block: IBlock): TemplateResult {
|
||||
const isSelected = this.selectedBlockId === block.id;
|
||||
|
||||
return WysiwygBlocks.renderBlock(block, isSelected, {
|
||||
onInput: (e: InputEvent) => this.handleBlockInput(e, block),
|
||||
onKeyDown: (e: KeyboardEvent) => this.handleBlockKeyDown(e, block),
|
||||
onFocus: () => this.handleBlockFocus(block),
|
||||
onBlur: () => this.handleBlockBlur(block),
|
||||
onCompositionStart: () => this.isComposing = true,
|
||||
onCompositionEnd: () => this.isComposing = false,
|
||||
});
|
||||
}
|
||||
|
||||
private getFilteredMenuItems(): ISlashMenuItem[] {
|
||||
const allItems = WysiwygShortcuts.getSlashMenuItems();
|
||||
return allItems.filter(item =>
|
||||
this.slashMenuFilter === '' ||
|
||||
item.label.toLowerCase().includes(this.slashMenuFilter.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
private renderSlashMenu(): TemplateResult {
|
||||
const menuItems = this.getFilteredMenuItems();
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="slash-menu"
|
||||
style="top: ${this.slashMenuPosition.y}px; left: ${this.slashMenuPosition.x}px;"
|
||||
>
|
||||
${menuItems.map((item, index) => html`
|
||||
<div
|
||||
class="slash-menu-item ${index === this.slashMenuSelectedIndex ? 'selected' : ''}"
|
||||
@click="${() => this.insertBlock(item.type as IBlock['type'])}"
|
||||
@mouseenter="${() => this.slashMenuSelectedIndex = index}"
|
||||
>
|
||||
<span class="icon">${item.icon}</span>
|
||||
<span>${item.label}</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleBlockInput(e: InputEvent, block: IBlock) {
|
||||
if (this.isComposing) return;
|
||||
|
||||
const target = e.target as HTMLDivElement;
|
||||
|
||||
if (block.type === 'list') {
|
||||
// Extract text from list items
|
||||
const listItems = target.querySelectorAll('li');
|
||||
block.content = Array.from(listItems).map(li => li.textContent || '').join('\n');
|
||||
// Preserve list type
|
||||
const listElement = target.querySelector('ol, ul');
|
||||
if (listElement) {
|
||||
block.metadata = { listType: listElement.tagName.toLowerCase() === 'ol' ? 'ordered' : 'bullet' };
|
||||
}
|
||||
} else {
|
||||
block.content = target.textContent || '';
|
||||
}
|
||||
|
||||
// Check for block type change intents
|
||||
const detectedType = this.detectBlockTypeIntent(block.content);
|
||||
|
||||
// Only process if the detected type is different from current type
|
||||
if (detectedType && detectedType.type !== block.type) {
|
||||
e.preventDefault();
|
||||
|
||||
// Handle special cases
|
||||
if (detectedType.type === 'list') {
|
||||
block.type = 'list';
|
||||
block.content = '';
|
||||
block.metadata = { listType: detectedType.listType };
|
||||
|
||||
// Update list structure immediately
|
||||
const listTag = detectedType.listType === 'ordered' ? 'ol' : 'ul';
|
||||
target.innerHTML = `<${listTag}><li></li></${listTag}>`;
|
||||
|
||||
// Force update and focus
|
||||
this.updateValue();
|
||||
this.requestUpdate();
|
||||
|
||||
setTimeout(() => {
|
||||
WysiwygBlocks.focusListItem(target);
|
||||
}, 0);
|
||||
|
||||
return;
|
||||
} else if (detectedType.type === 'divider') {
|
||||
block.type = 'divider';
|
||||
block.content = ' ';
|
||||
|
||||
// Create a new paragraph block after the divider
|
||||
const blockIndex = this.blocks.findIndex(b => b.id === block.id);
|
||||
const newBlock: IBlock = {
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
};
|
||||
this.blocks = [...this.blocks.slice(0, blockIndex + 1), newBlock, ...this.blocks.slice(blockIndex + 1)];
|
||||
|
||||
setTimeout(() => {
|
||||
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
|
||||
if (newBlockElement) {
|
||||
newBlockElement.focus();
|
||||
}
|
||||
});
|
||||
|
||||
this.updateValue();
|
||||
this.requestUpdate();
|
||||
return;
|
||||
} else {
|
||||
// For all other block types
|
||||
block.type = detectedType.type;
|
||||
block.content = '';
|
||||
|
||||
// Clear the DOM element immediately
|
||||
target.textContent = '';
|
||||
|
||||
// Force update
|
||||
this.updateValue();
|
||||
this.requestUpdate();
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for slash commands at the beginning of any block
|
||||
if (block.content === '/' || (block.content.startsWith('/') && this.showSlashMenu)) {
|
||||
// Only show menu on initial '/', or update filter if already showing
|
||||
if (!this.showSlashMenu && block.content === '/') {
|
||||
this.showSlashMenu = true;
|
||||
this.slashMenuSelectedIndex = 0;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const containerRect = this.shadowRoot!.querySelector('.wysiwyg-container')!.getBoundingClientRect();
|
||||
this.slashMenuPosition = {
|
||||
x: rect.left - containerRect.left,
|
||||
y: rect.bottom - containerRect.top + 4
|
||||
};
|
||||
}
|
||||
this.slashMenuFilter = block.content.slice(1);
|
||||
} else if (!block.content.startsWith('/')) {
|
||||
this.closeSlashMenu();
|
||||
}
|
||||
|
||||
// Don't update value on every input - let the browser handle typing normally
|
||||
// But schedule a save after a delay
|
||||
if (this.saveTimeout) {
|
||||
clearTimeout(this.saveTimeout);
|
||||
}
|
||||
this.saveTimeout = setTimeout(() => {
|
||||
this.updateValue();
|
||||
}, 1000); // Save after 1 second of inactivity
|
||||
}
|
||||
|
||||
private handleBlockKeyDown(e: KeyboardEvent, block: IBlock) {
|
||||
if (this.showSlashMenu && ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) {
|
||||
this.handleSlashMenuKeyboard(e);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle Tab key for indentation
|
||||
if (e.key === 'Tab') {
|
||||
if (block.type === 'code') {
|
||||
// Allow tab in code blocks
|
||||
e.preventDefault();
|
||||
document.execCommand('insertText', false, ' ');
|
||||
return;
|
||||
} else if (block.type === 'list') {
|
||||
// Future: implement list indentation
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (block.type === 'list') {
|
||||
// Handle Enter in lists differently
|
||||
const target = e.target as HTMLDivElement;
|
||||
const selection = window.getSelection();
|
||||
if (selection && selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const currentLi = range.startContainer.parentElement?.closest('li');
|
||||
|
||||
if (currentLi && currentLi.textContent === '') {
|
||||
// Empty list item - exit list mode
|
||||
e.preventDefault();
|
||||
const blockIndex = this.blocks.findIndex(b => b.id === block.id);
|
||||
const newBlock: IBlock = {
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
};
|
||||
|
||||
this.blocks = [...this.blocks.slice(0, blockIndex + 1), newBlock, ...this.blocks.slice(blockIndex + 1)];
|
||||
|
||||
setTimeout(() => {
|
||||
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
|
||||
if (newBlockElement) {
|
||||
newBlockElement.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
// Otherwise, let the browser handle creating new list items
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const blockIndex = this.blocks.findIndex(b => b.id === block.id);
|
||||
const newBlock: IBlock = {
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
};
|
||||
|
||||
this.blocks = [...this.blocks.slice(0, blockIndex + 1), newBlock, ...this.blocks.slice(blockIndex + 1)];
|
||||
|
||||
this.updateValue();
|
||||
|
||||
setTimeout(() => {
|
||||
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
|
||||
if (newBlockElement) {
|
||||
newBlockElement.focus();
|
||||
}
|
||||
});
|
||||
} else if (e.key === 'Backspace' && block.content === '' && this.blocks.length > 1) {
|
||||
e.preventDefault();
|
||||
const blockIndex = this.blocks.findIndex(b => b.id === block.id);
|
||||
if (blockIndex > 0) {
|
||||
const prevBlock = this.blocks[blockIndex - 1];
|
||||
this.blocks = this.blocks.filter(b => b.id !== block.id);
|
||||
|
||||
this.updateValue();
|
||||
|
||||
setTimeout(() => {
|
||||
const prevBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${prevBlock.id}"]`) as HTMLDivElement;
|
||||
if (prevBlockElement && prevBlock.type !== 'divider') {
|
||||
prevBlockElement.focus();
|
||||
WysiwygBlocks.setCursorToEnd(prevBlockElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private handleSlashMenuKeyboard(e: KeyboardEvent) {
|
||||
const menuItems = this.getFilteredMenuItems();
|
||||
|
||||
switch(e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
this.slashMenuSelectedIndex = (this.slashMenuSelectedIndex + 1) % menuItems.length;
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
this.slashMenuSelectedIndex = this.slashMenuSelectedIndex === 0
|
||||
? menuItems.length - 1
|
||||
: this.slashMenuSelectedIndex - 1;
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (menuItems[this.slashMenuSelectedIndex]) {
|
||||
this.insertBlock(menuItems[this.slashMenuSelectedIndex].type as IBlock['type']);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
this.closeSlashMenu();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private closeSlashMenu() {
|
||||
if (this.showSlashMenu && this.selectedBlockId) {
|
||||
// Clear the slash command from the content if menu is closing without selection
|
||||
const currentBlock = this.blocks.find(b => b.id === this.selectedBlockId);
|
||||
if (currentBlock && currentBlock.content.startsWith('/')) {
|
||||
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${currentBlock.id}"]`) as HTMLDivElement;
|
||||
if (blockElement) {
|
||||
// Clear the slash command text
|
||||
blockElement.textContent = '';
|
||||
currentBlock.content = '';
|
||||
// Ensure cursor stays in the block
|
||||
blockElement.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.showSlashMenu = false;
|
||||
this.slashMenuFilter = '';
|
||||
this.slashMenuSelectedIndex = 0;
|
||||
}
|
||||
|
||||
private detectBlockTypeIntent(content: string): { type: IBlock['type'], listType?: 'bullet' | 'ordered' } | null {
|
||||
// Check heading patterns
|
||||
const headingResult = WysiwygShortcuts.checkHeadingShortcut(content);
|
||||
if (headingResult) {
|
||||
return headingResult;
|
||||
}
|
||||
|
||||
// Check list patterns
|
||||
const listResult = WysiwygShortcuts.checkListShortcut(content);
|
||||
if (listResult) {
|
||||
return listResult;
|
||||
}
|
||||
|
||||
// Check quote pattern
|
||||
if (WysiwygShortcuts.checkQuoteShortcut(content)) {
|
||||
return { type: 'quote' };
|
||||
}
|
||||
|
||||
// Check code pattern
|
||||
if (WysiwygShortcuts.checkCodeShortcut(content)) {
|
||||
return { type: 'code' };
|
||||
}
|
||||
|
||||
// Check divider pattern
|
||||
if (WysiwygShortcuts.checkDividerShortcut(content)) {
|
||||
return { type: 'divider' };
|
||||
}
|
||||
|
||||
// Don't automatically revert to paragraph - blocks should keep their type
|
||||
// unless explicitly changed by the user
|
||||
return null;
|
||||
}
|
||||
|
||||
private handleBlockFocus(block: IBlock) {
|
||||
if (block.type !== 'divider') {
|
||||
this.selectedBlockId = block.id;
|
||||
}
|
||||
}
|
||||
|
||||
private handleBlockBlur(block: IBlock) {
|
||||
// Update value on blur to ensure it's saved
|
||||
this.updateValue();
|
||||
|
||||
setTimeout(() => {
|
||||
if (this.selectedBlockId === block.id) {
|
||||
this.selectedBlockId = null;
|
||||
}
|
||||
// Don't close slash menu on blur if clicking on menu item
|
||||
const activeElement = document.activeElement;
|
||||
const slashMenu = this.shadowRoot?.querySelector('.slash-menu');
|
||||
if (!slashMenu?.contains(activeElement as Node)) {
|
||||
this.closeSlashMenu();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
private handleEditorClick(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('editor-content')) {
|
||||
const lastBlock = this.blocks[this.blocks.length - 1];
|
||||
const lastBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${lastBlock.id}"]`) as HTMLDivElement;
|
||||
if (lastBlockElement && lastBlock.type !== 'divider') {
|
||||
lastBlockElement.focus();
|
||||
WysiwygBlocks.setCursorToEnd(lastBlockElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private insertBlock(type: IBlock['type']) {
|
||||
const currentBlockIndex = this.blocks.findIndex(b => b.id === this.selectedBlockId);
|
||||
const currentBlock = this.blocks[currentBlockIndex];
|
||||
|
||||
if (currentBlock && currentBlock.content.startsWith('/')) {
|
||||
currentBlock.type = type;
|
||||
currentBlock.content = '';
|
||||
|
||||
if (type === 'divider') {
|
||||
currentBlock.content = ' ';
|
||||
const newBlock: IBlock = {
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
};
|
||||
this.blocks = [...this.blocks.slice(0, currentBlockIndex + 1), newBlock, ...this.blocks.slice(currentBlockIndex + 1)];
|
||||
|
||||
setTimeout(() => {
|
||||
const newBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${newBlock.id}"]`) as HTMLDivElement;
|
||||
if (newBlockElement) {
|
||||
newBlockElement.focus();
|
||||
}
|
||||
});
|
||||
} else if (type === 'list') {
|
||||
// Handle list type specially
|
||||
currentBlock.metadata = { listType: 'bullet' }; // Default to bullet list
|
||||
setTimeout(() => {
|
||||
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${currentBlock.id}"]`) as HTMLDivElement;
|
||||
if (blockElement) {
|
||||
blockElement.innerHTML = '<ul><li></li></ul>';
|
||||
WysiwygBlocks.focusListItem(blockElement);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Force update the contenteditable element
|
||||
setTimeout(() => {
|
||||
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${currentBlock.id}"]`) as HTMLDivElement;
|
||||
if (blockElement) {
|
||||
blockElement.textContent = '';
|
||||
blockElement.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.closeSlashMenu();
|
||||
this.updateValue();
|
||||
}
|
||||
|
||||
private updateValue() {
|
||||
if (this.outputFormat === 'html') {
|
||||
this.value = WysiwygConverters.getHtmlOutput(this.blocks);
|
||||
} else {
|
||||
this.value = WysiwygConverters.getMarkdownOutput(this.blocks);
|
||||
}
|
||||
this.changeSubject.next(this.value);
|
||||
}
|
||||
|
||||
public getValue(): string {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
public setValue(value: string): void {
|
||||
this.value = value;
|
||||
|
||||
if (this.outputFormat === 'html') {
|
||||
this.blocks = WysiwygConverters.parseHtmlToBlocks(value);
|
||||
} else {
|
||||
this.blocks = WysiwygConverters.parseMarkdownToBlocks(value);
|
||||
}
|
||||
|
||||
if (this.blocks.length === 0) {
|
||||
this.blocks = [{
|
||||
id: WysiwygShortcuts.generateBlockId(),
|
||||
type: 'paragraph',
|
||||
content: '',
|
||||
}];
|
||||
}
|
||||
|
||||
this.changeSubject.next(this.value);
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user