1113 lines
34 KiB
TypeScript
1113 lines
34 KiB
TypeScript
import * as colors from './00colors.js';
|
|
import { DeesInputBase } from './dees-input-base.js';
|
|
import { demoFunc } from './dees-input-wysiwyg.demo.js';
|
|
|
|
import {
|
|
customElement,
|
|
type TemplateResult,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
css,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-input-wysiwyg': DeesInputWysiwyg;
|
|
}
|
|
}
|
|
|
|
interface IBlock {
|
|
id: string;
|
|
type: 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'image' | 'code' | 'quote' | 'list' | 'divider';
|
|
content: string;
|
|
metadata?: any;
|
|
}
|
|
|
|
@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: 'html' | 'markdown' = 'html';
|
|
|
|
@state()
|
|
private blocks: IBlock[] = [
|
|
{
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
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;
|
|
|
|
public static styles = [
|
|
...DeesInputBase.baseStyles,
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.wysiwyg-container {
|
|
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
padding: 20px;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.wysiwyg-container:hover {
|
|
border-color: ${cssManager.bdTheme('#d0d0d0', '#444')};
|
|
}
|
|
|
|
.wysiwyg-container:focus-within {
|
|
border-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')};
|
|
}
|
|
|
|
.editor-content {
|
|
outline: none;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.block {
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
transition: all 0.15s ease;
|
|
min-height: 1.6em;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
}
|
|
|
|
.block:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.block.selected {
|
|
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.12)')};
|
|
margin-left: -12px;
|
|
margin-right: -12px;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.block[contenteditable] {
|
|
outline: none;
|
|
}
|
|
|
|
.block.paragraph {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.paragraph:empty::before {
|
|
content: "Type '/' for commands...";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.heading-1 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-1:empty::before {
|
|
content: "Heading 1";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 32px;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.block.heading-2 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: 14px;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-2:empty::before {
|
|
content: "Heading 2";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 24px;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block.heading-3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 12px;
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.block.heading-3:empty::before {
|
|
content: "Heading 3";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block.quote {
|
|
border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
padding-left: 16px;
|
|
font-style: italic;
|
|
color: ${cssManager.bdTheme('#555', '#b0b0b0')};
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.block.quote:empty::before {
|
|
content: "Quote";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
.block.code {
|
|
background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 14px;
|
|
white-space: pre-wrap;
|
|
color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.block.code:empty::before {
|
|
content: "// Code block";
|
|
color: ${cssManager.bdTheme('#999', '#666')};
|
|
pointer-events: none;
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.block.list {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.block.list ul,
|
|
.block.list ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.block.list ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.block.list ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.block.list li {
|
|
margin-bottom: 4px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.block.divider {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.block.divider hr {
|
|
border: none;
|
|
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
margin: 0;
|
|
}
|
|
|
|
.slash-menu {
|
|
position: absolute;
|
|
background: ${cssManager.bdTheme('#ffffff', '#262626')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
padding: 4px;
|
|
z-index: 1000;
|
|
min-width: 220px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.slash-menu-item {
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-radius: 4px;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
font-size: 14px;
|
|
}
|
|
|
|
.slash-menu-item:hover,
|
|
.slash-menu-item.selected {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
|
|
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
|
}
|
|
|
|
.slash-menu-item .icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
font-weight: 600;
|
|
}
|
|
|
|
.slash-menu-item:hover .icon,
|
|
.slash-menu-item.selected .icon {
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
|
|
.toolbar {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: ${cssManager.bdTheme('#ffffff', '#262626')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
padding: 4px;
|
|
display: none;
|
|
gap: 4px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toolbar.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.toolbar-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
|
|
}
|
|
|
|
.toolbar-button:hover {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
|
|
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
async firstUpdated() {
|
|
this.updateValue();
|
|
this.editorContentRef = this.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
|
|
}
|
|
|
|
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;
|
|
|
|
if (block.type === 'divider') {
|
|
return html`
|
|
<div
|
|
class="block divider"
|
|
data-block-id="${block.id}"
|
|
>
|
|
<hr>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (block.type === 'list') {
|
|
return html`
|
|
<div
|
|
class="block list ${isSelected ? 'selected' : ''}"
|
|
data-block-id="${block.id}"
|
|
contenteditable="true"
|
|
@input="${(e: InputEvent) => this.handleBlockInput(e, block)}"
|
|
@keydown="${(e: KeyboardEvent) => this.handleBlockKeyDown(e, block)}"
|
|
@focus="${() => this.handleBlockFocus(block)}"
|
|
@blur="${() => this.handleBlockBlur(block)}"
|
|
@compositionstart="${() => this.isComposing = true}"
|
|
@compositionend="${() => this.isComposing = false}"
|
|
.innerHTML="${this.renderListContent(block.content, block.metadata)}"
|
|
></div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div
|
|
class="block ${block.type} ${isSelected ? 'selected' : ''}"
|
|
data-block-id="${block.id}"
|
|
contenteditable="true"
|
|
@input="${(e: InputEvent) => this.handleBlockInput(e, block)}"
|
|
@keydown="${(e: KeyboardEvent) => this.handleBlockKeyDown(e, block)}"
|
|
@focus="${() => this.handleBlockFocus(block)}"
|
|
@blur="${() => this.handleBlockBlur(block)}"
|
|
@compositionstart="${() => this.isComposing = true}"
|
|
@compositionend="${() => this.isComposing = false}"
|
|
.textContent="${block.content}"
|
|
></div>
|
|
`;
|
|
}
|
|
|
|
private renderListContent(content: string, metadata?: any): string {
|
|
const items = content.split('\n').filter(item => item.trim());
|
|
if (items.length === 0) return '';
|
|
const listTag = metadata?.listType === 'ordered' ? 'ol' : 'ul';
|
|
return `<${listTag}>${items.map(item => `<li>${this.escapeHtml(item)}</li>`).join('')}</${listTag}>`;
|
|
}
|
|
|
|
private getFilteredMenuItems() {
|
|
const allItems = [
|
|
{ type: 'paragraph', label: 'Paragraph', icon: '¶' },
|
|
{ type: 'heading-1', label: 'Heading 1', icon: 'H₁' },
|
|
{ type: 'heading-2', label: 'Heading 2', icon: 'H₂' },
|
|
{ type: 'heading-3', label: 'Heading 3', icon: 'H₃' },
|
|
{ type: 'quote', label: 'Quote', icon: '"' },
|
|
{ type: 'code', label: 'Code', icon: '<>' },
|
|
{ type: 'list', label: 'List', icon: '•' },
|
|
{ type: 'divider', label: 'Divider', icon: '—' },
|
|
];
|
|
|
|
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 shortcuts at the beginning of a paragraph
|
|
if (block.type === 'paragraph') {
|
|
// Check for heading shortcuts
|
|
const headingPatterns = [
|
|
{ pattern: /^# $/, type: 'heading-1' },
|
|
{ pattern: /^## $/, type: 'heading-2' },
|
|
{ pattern: /^### $/, type: 'heading-3' }
|
|
];
|
|
|
|
for (const { pattern, type } of headingPatterns) {
|
|
if (pattern.test(block.content)) {
|
|
e.preventDefault();
|
|
block.type = type as IBlock['type'];
|
|
block.content = '';
|
|
|
|
// Force update the block
|
|
setTimeout(() => {
|
|
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
|
|
if (blockElement) {
|
|
blockElement.textContent = '';
|
|
blockElement.focus();
|
|
}
|
|
});
|
|
|
|
this.updateValue();
|
|
this.requestUpdate();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Check for list shortcuts
|
|
const listPatterns = [
|
|
{ pattern: /^(\*|-) $/, type: 'bullet' },
|
|
{ pattern: /^(\d+)\. $/, type: 'ordered' },
|
|
{ pattern: /^(\d+)\) $/, type: 'ordered' }
|
|
];
|
|
|
|
for (const { pattern, type } of listPatterns) {
|
|
if (pattern.test(block.content)) {
|
|
e.preventDefault();
|
|
block.type = 'list';
|
|
block.content = '';
|
|
block.metadata = { listType: type };
|
|
|
|
// Force update the block to be a list
|
|
setTimeout(() => {
|
|
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
|
|
if (blockElement) {
|
|
const listTag = type === 'ordered' ? 'ol' : 'ul';
|
|
blockElement.innerHTML = `<${listTag}><li></li></${listTag}>`;
|
|
// Focus the first list item
|
|
const firstLi = blockElement.querySelector('li');
|
|
if (firstLi) {
|
|
const range = document.createRange();
|
|
const sel = window.getSelection();
|
|
range.selectNodeContents(firstLi);
|
|
range.collapse(true);
|
|
sel!.removeAllRanges();
|
|
sel!.addRange(range);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.updateValue();
|
|
this.requestUpdate();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Check for quote shortcut
|
|
if (block.content === '> ') {
|
|
e.preventDefault();
|
|
block.type = 'quote';
|
|
block.content = '';
|
|
|
|
setTimeout(() => {
|
|
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
|
|
if (blockElement) {
|
|
blockElement.textContent = '';
|
|
blockElement.focus();
|
|
}
|
|
});
|
|
|
|
this.updateValue();
|
|
this.requestUpdate();
|
|
return;
|
|
}
|
|
|
|
// Check for code block shortcut
|
|
if (block.content === '```') {
|
|
e.preventDefault();
|
|
block.type = 'code';
|
|
block.content = '';
|
|
|
|
setTimeout(() => {
|
|
const blockElement = this.shadowRoot!.querySelector(`[data-block-id="${block.id}"]`) as HTMLDivElement;
|
|
if (blockElement) {
|
|
blockElement.textContent = '';
|
|
blockElement.focus();
|
|
}
|
|
});
|
|
|
|
this.updateValue();
|
|
this.requestUpdate();
|
|
return;
|
|
}
|
|
|
|
// Check for divider shortcut
|
|
if (block.content === '---' || block.content === '***' || block.content === '___') {
|
|
e.preventDefault();
|
|
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: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
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;
|
|
}
|
|
}
|
|
|
|
// Check for slash commands (should be last to allow other shortcuts to take precedence)
|
|
if (block.content.startsWith('/') && block.type === 'paragraph') {
|
|
this.slashMenuFilter = block.content.slice(1);
|
|
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
|
|
};
|
|
} else {
|
|
this.closeSlashMenu();
|
|
}
|
|
|
|
this.updateValue();
|
|
}
|
|
|
|
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: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
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: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
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();
|
|
}
|
|
});
|
|
} 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);
|
|
|
|
setTimeout(() => {
|
|
const prevBlockElement = this.shadowRoot!.querySelector(`[data-block-id="${prevBlock.id}"]`) as HTMLDivElement;
|
|
if (prevBlockElement && prevBlock.type !== 'divider') {
|
|
prevBlockElement.focus();
|
|
this.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() {
|
|
this.showSlashMenu = false;
|
|
this.slashMenuFilter = '';
|
|
this.slashMenuSelectedIndex = 0;
|
|
}
|
|
|
|
private setCursorToEnd(element: HTMLElement) {
|
|
const range = document.createRange();
|
|
const sel = window.getSelection();
|
|
range.selectNodeContents(element);
|
|
range.collapse(false);
|
|
sel!.removeAllRanges();
|
|
sel!.addRange(range);
|
|
}
|
|
|
|
private handleBlockFocus(block: IBlock) {
|
|
if (block.type !== 'divider') {
|
|
this.selectedBlockId = block.id;
|
|
}
|
|
}
|
|
|
|
private handleBlockBlur(block: IBlock) {
|
|
setTimeout(() => {
|
|
if (this.selectedBlockId === block.id) {
|
|
this.selectedBlockId = null;
|
|
}
|
|
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();
|
|
this.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: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
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 {
|
|
// 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 = this.getHtmlOutput();
|
|
} else {
|
|
this.value = this.getMarkdownOutput();
|
|
}
|
|
this.changeSubject.next(this.value);
|
|
}
|
|
|
|
private getHtmlOutput(): string {
|
|
return this.blocks.map(block => {
|
|
switch (block.type) {
|
|
case 'paragraph':
|
|
return block.content ? `<p>${this.escapeHtml(block.content)}</p>` : '';
|
|
case 'heading-1':
|
|
return `<h1>${this.escapeHtml(block.content)}</h1>`;
|
|
case 'heading-2':
|
|
return `<h2>${this.escapeHtml(block.content)}</h2>`;
|
|
case 'heading-3':
|
|
return `<h3>${this.escapeHtml(block.content)}</h3>`;
|
|
case 'quote':
|
|
return `<blockquote>${this.escapeHtml(block.content)}</blockquote>`;
|
|
case 'code':
|
|
return `<pre><code>${this.escapeHtml(block.content)}</code></pre>`;
|
|
case 'list':
|
|
const items = block.content.split('\n').filter(item => item.trim());
|
|
if (items.length > 0) {
|
|
const listTag = block.metadata?.listType === 'ordered' ? 'ol' : 'ul';
|
|
return `<${listTag}>${items.map(item => `<li>${this.escapeHtml(item)}</li>`).join('')}</${listTag}>`;
|
|
}
|
|
return '';
|
|
case 'divider':
|
|
return '<hr>';
|
|
default:
|
|
return `<p>${this.escapeHtml(block.content)}</p>`;
|
|
}
|
|
}).filter(html => html !== '').join('\n');
|
|
}
|
|
|
|
private getMarkdownOutput(): string {
|
|
return this.blocks.map(block => {
|
|
switch (block.type) {
|
|
case 'paragraph':
|
|
return block.content;
|
|
case 'heading-1':
|
|
return `# ${block.content}`;
|
|
case 'heading-2':
|
|
return `## ${block.content}`;
|
|
case 'heading-3':
|
|
return `### ${block.content}`;
|
|
case 'quote':
|
|
return `> ${block.content}`;
|
|
case 'code':
|
|
return `\`\`\`\n${block.content}\n\`\`\``;
|
|
case 'list':
|
|
const items = block.content.split('\n').filter(item => item.trim());
|
|
if (block.metadata?.listType === 'ordered') {
|
|
return items.map((item, index) => `${index + 1}. ${item}`).join('\n');
|
|
} else {
|
|
return items.map(item => `- ${item}`).join('\n');
|
|
}
|
|
case 'divider':
|
|
return '---';
|
|
default:
|
|
return block.content;
|
|
}
|
|
}).filter(md => md !== '').join('\n\n');
|
|
}
|
|
|
|
private escapeHtml(text: string): string {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
public getValue(): string {
|
|
return this.value;
|
|
}
|
|
|
|
public setValue(value: string): void {
|
|
this.value = value;
|
|
|
|
if (this.outputFormat === 'html') {
|
|
this.blocks = this.parseHtmlToBlocks(value);
|
|
} else {
|
|
this.blocks = this.parseMarkdownToBlocks(value);
|
|
}
|
|
|
|
if (this.blocks.length === 0) {
|
|
this.blocks = [{
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'paragraph',
|
|
content: '',
|
|
}];
|
|
}
|
|
|
|
this.changeSubject.next(this.value);
|
|
this.requestUpdate();
|
|
}
|
|
|
|
private parseHtmlToBlocks(html: string): IBlock[] {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
const blocks: IBlock[] = [];
|
|
|
|
const processNode = (node: Node) => {
|
|
if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'paragraph',
|
|
content: node.textContent.trim(),
|
|
});
|
|
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
const element = node as Element;
|
|
const tagName = element.tagName.toLowerCase();
|
|
|
|
switch (tagName) {
|
|
case 'p':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'paragraph',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'h1':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-1',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'h2':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-2',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'h3':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-3',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'blockquote':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'quote',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'pre':
|
|
case 'code':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'code',
|
|
content: element.textContent || '',
|
|
});
|
|
break;
|
|
case 'ul':
|
|
case 'ol':
|
|
const listItems = Array.from(element.querySelectorAll('li'));
|
|
const content = listItems.map(li => li.textContent || '').join('\n');
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'list',
|
|
content: content,
|
|
metadata: { listType: tagName === 'ol' ? 'ordered' : 'bullet' }
|
|
});
|
|
break;
|
|
case 'hr':
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'divider',
|
|
content: ' ',
|
|
});
|
|
break;
|
|
default:
|
|
// Process children for other elements
|
|
element.childNodes.forEach(child => processNode(child));
|
|
}
|
|
}
|
|
};
|
|
|
|
doc.body.childNodes.forEach(node => processNode(node));
|
|
return blocks;
|
|
}
|
|
|
|
private parseMarkdownToBlocks(markdown: string): IBlock[] {
|
|
const lines = markdown.split('\n');
|
|
const blocks: IBlock[] = [];
|
|
let currentListItems: string[] = [];
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i];
|
|
|
|
if (line.startsWith('# ')) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-1',
|
|
content: line.substring(2),
|
|
});
|
|
} else if (line.startsWith('## ')) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-2',
|
|
content: line.substring(3),
|
|
});
|
|
} else if (line.startsWith('### ')) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'heading-3',
|
|
content: line.substring(4),
|
|
});
|
|
} else if (line.startsWith('> ')) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'quote',
|
|
content: line.substring(2),
|
|
});
|
|
} else if (line.startsWith('```')) {
|
|
const codeLines: string[] = [];
|
|
i++;
|
|
while (i < lines.length && !lines[i].startsWith('```')) {
|
|
codeLines.push(lines[i]);
|
|
i++;
|
|
}
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'code',
|
|
content: codeLines.join('\n'),
|
|
});
|
|
} else if (line.match(/^(\*|-) /)) {
|
|
currentListItems.push(line.substring(2));
|
|
// Check if next line is not a list item
|
|
if (i === lines.length - 1 || (!lines[i + 1].match(/^(\*|-) /))) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'list',
|
|
content: currentListItems.join('\n'),
|
|
metadata: { listType: 'bullet' }
|
|
});
|
|
currentListItems = [];
|
|
}
|
|
} else if (line.match(/^\d+\. /)) {
|
|
currentListItems.push(line.replace(/^\d+\. /, ''));
|
|
// Check if next line is not a numbered list item
|
|
if (i === lines.length - 1 || (!lines[i + 1].match(/^\d+\. /))) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'list',
|
|
content: currentListItems.join('\n'),
|
|
metadata: { listType: 'ordered' }
|
|
});
|
|
currentListItems = [];
|
|
}
|
|
} else if (line === '---' || line === '***' || line === '___') {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'divider',
|
|
content: ' ',
|
|
});
|
|
} else if (line.trim()) {
|
|
blocks.push({
|
|
id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
type: 'paragraph',
|
|
content: line,
|
|
});
|
|
}
|
|
}
|
|
|
|
return blocks;
|
|
}
|
|
} |