design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): Add wysiwyg editor

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-23 21:15:04 +00:00
parent f2e6342a61
commit cdcd4f79c8
6 changed files with 526 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
View File

@ -17,7 +17,8 @@ import {
WysiwygConverters,
WysiwygShortcuts,
WysiwygBlocks,
type ISlashMenuItem
type ISlashMenuItem,
WysiwygFormatting
} from './index.js';
declare global {
@ -69,9 +70,19 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
@state()
private dragOverPosition: 'before' | 'after' | null = null;
@state()
private showFormattingMenu: boolean = false;
@state()
private formattingMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
@state()
private selectedText: string = '';
private editorContentRef: HTMLDivElement;
private isComposing: boolean = false;
private saveTimeout: any = null;
private selectionChangeHandler = () => this.handleSelectionChange();
public static styles = [
...DeesInputBase.baseStyles,
@ -79,9 +90,24 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
wysiwygStyles
];
async connectedCallback() {
await super.connectedCallback();
}
async disconnectedCallback() {
await super.disconnectedCallback();
// Remove selection listener
document.removeEventListener('selectionchange', this.selectionChangeHandler);
}
async firstUpdated() {
this.updateValue();
this.editorContentRef = this.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
// Add global selection listener
console.log('Adding selectionchange listener');
document.addEventListener('selectionchange', this.selectionChangeHandler);
// Set initial content for blocks after a brief delay to ensure DOM is ready
await this.updateComplete;
setTimeout(() => {
@ -116,6 +142,9 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
if (isEmpty && block.content) {
if (block.type === 'list') {
blockElement.innerHTML = WysiwygBlocks.renderListContent(block.content, block.metadata);
} else if (block.content.includes('<') && block.content.includes('>')) {
// Content contains HTML formatting
blockElement.innerHTML = block.content;
} else {
blockElement.textContent = block.content;
}
@ -140,6 +169,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
${this.blocks.map(block => this.renderBlock(block))}
</div>
${this.showSlashMenu ? this.renderSlashMenu() : ''}
${this.showFormattingMenu ? this.renderFormattingMenu() : ''}
</div>
`;
}
@ -172,6 +202,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
onBlur: () => this.handleBlockBlur(block),
onCompositionStart: () => this.isComposing = true,
onCompositionEnd: () => this.isComposing = false,
onMouseUp: (e: MouseEvent) => this.handleTextSelection(e),
})}
</div>
`;
@ -207,6 +238,13 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
`;
}
private renderFormattingMenu(): TemplateResult {
return WysiwygFormatting.renderFormattingMenu(
this.formattingMenuPosition,
(command) => this.applyFormat(command)
);
}
private handleBlockInput(e: InputEvent, block: IBlock) {
if (this.isComposing) return;
@ -327,6 +365,28 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
return;
}
// Handle formatting shortcuts
if (e.metaKey || e.ctrlKey) {
switch (e.key.toLowerCase()) {
case 'b':
e.preventDefault();
this.applyFormat('bold');
return;
case 'i':
e.preventDefault();
this.applyFormat('italic');
return;
case 'u':
e.preventDefault();
this.applyFormat('underline');
return;
case 'k':
e.preventDefault();
this.applyFormat('link');
return;
}
}
// Handle Tab key for indentation
if (e.key === 'Tab') {
if (block.type === 'code') {
@ -756,4 +816,172 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
}
}, 100);
}
private handleTextSelection(e: MouseEvent): void {
// Stop event to prevent it from bubbling up
e.stopPropagation();
console.log('handleTextSelection called from mouseup on contenteditable');
// Small delay to ensure selection is complete
setTimeout(() => {
// Alternative approach: check selection directly within the target element
const target = e.target as HTMLElement;
const selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
const selectedText = selection.toString();
console.log('Direct selection check in handleTextSelection:', {
selectedText: selectedText.substring(0, 50),
hasText: selectedText.length > 0,
target: target.tagName + '.' + target.className
});
if (selectedText.length > 0) {
// We know this came from a mouseup on our contenteditable, so it's definitely our selection
console.log('✅ Text selected via mouseup:', selectedText);
this.selectedText = selectedText;
this.updateFormattingMenuPosition();
} else if (this.showFormattingMenu) {
this.hideFormattingMenu();
}
}
}, 50);
}
private handleSelectionChange(): void {
// Try to get selection from shadow root first, then fall back to window
const shadowSelection = (this.shadowRoot as any).getSelection ? (this.shadowRoot as any).getSelection() : null;
const windowSelection = window.getSelection();
const editorContent = this.shadowRoot?.querySelector('.editor-content') as HTMLElement;
// Check both shadow and window selections
let selection = shadowSelection;
let selectedText = shadowSelection?.toString() || '';
// If no shadow selection, check window selection
if (!selectedText && windowSelection) {
selection = windowSelection;
selectedText = windowSelection.toString() || '';
}
console.log('Selection change:', {
hasText: selectedText.length > 0,
selectedText: selectedText.substring(0, 50),
shadowSelection: !!shadowSelection,
windowSelection: !!windowSelection,
rangeCount: selection?.rangeCount,
editorContent: !!editorContent
});
if (!selection || selection.rangeCount === 0 || !editorContent) {
console.log('No selection or editor content');
return;
}
// If we have selected text, show the formatting menu
if (selectedText.length > 0) {
console.log('✅ Text selected:', selectedText);
if (selectedText !== this.selectedText) {
this.selectedText = selectedText;
this.updateFormattingMenuPosition();
}
} else if (this.showFormattingMenu) {
console.log('No text selected, hiding menu');
this.hideFormattingMenu();
}
}
private getRootNodeOfNode(node: Node): Node {
let current: Node = node;
while (current.parentNode) {
current = current.parentNode;
}
return current;
}
private updateFormattingMenuPosition(): void {
console.log('updateFormattingMenuPosition called');
const coords = WysiwygFormatting.getSelectionCoordinates(this.shadowRoot as ShadowRoot);
console.log('Selection coordinates:', coords);
if (coords) {
const container = this.shadowRoot!.querySelector('.wysiwyg-container');
if (!container) {
console.error('Container not found!');
return;
}
const containerRect = container.getBoundingClientRect();
this.formattingMenuPosition = {
x: coords.x - containerRect.left,
y: coords.y - containerRect.top
};
console.log('Setting menu position:', this.formattingMenuPosition);
this.showFormattingMenu = true;
console.log('showFormattingMenu set to:', this.showFormattingMenu);
// Force update
this.requestUpdate();
// Check if menu exists in DOM after update
setTimeout(() => {
const menu = this.shadowRoot?.querySelector('.formatting-menu');
console.log('Menu in DOM after update:', menu);
if (menu) {
console.log('Menu style:', menu.getAttribute('style'));
}
}, 100);
} else {
console.log('No coordinates found');
}
}
private hideFormattingMenu(): void {
this.showFormattingMenu = false;
this.selectedText = '';
}
private applyFormat(command: string): void {
// Save current selection before applying format
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) return;
// Get the current block to update its content
const anchorNode = selection.anchorNode;
const blockElement = anchorNode?.nodeType === Node.TEXT_NODE
? anchorNode.parentElement?.closest('.block')
: (anchorNode as Element)?.closest('.block');
if (!blockElement) return;
const blockId = blockElement.closest('.block-wrapper')?.getAttribute('data-block-id');
const block = this.blocks.find(b => b.id === blockId);
if (!block) return;
// Apply the format
WysiwygFormatting.applyFormat(command);
// Update block content after format is applied
setTimeout(() => {
if (block.type === 'list') {
const listItems = blockElement.querySelectorAll('li');
block.content = Array.from(listItems).map(li => li.textContent || '').join('\n');
} else {
// For other blocks, preserve HTML formatting
block.content = blockElement.innerHTML;
}
this.updateValue();
// Keep selection active
if (command !== 'link') {
this.updateFormattingMenuPosition();
}
}, 10);
}
}

3
ts_web/elements/wysiwyg/index.ts
View File

@ -2,4 +2,5 @@ export * from './wysiwyg.types.js';
export * from './wysiwyg.styles.js';
export * from './wysiwyg.converters.js';
export * from './wysiwyg.shortcuts.js';
export * from './wysiwyg.blocks.js';
export * from './wysiwyg.blocks.js';
export * from './wysiwyg.formatting.js';

9
ts_web/elements/wysiwyg/wysiwyg.blocks.ts
View File

@ -20,6 +20,7 @@ export class WysiwygBlocks {
onBlur: () => void;
onCompositionStart: () => void;
onCompositionEnd: () => void;
onMouseUp?: (e: MouseEvent) => void;
}
): TemplateResult {
if (block.type === 'divider') {
@ -45,6 +46,10 @@ export class WysiwygBlocks {
@blur="${handlers.onBlur}"
@compositionstart="${handlers.onCompositionStart}"
@compositionend="${handlers.onCompositionEnd}"
@mouseup="${(e: MouseEvent) => {
console.log('Block mouseup event fired');
if (handlers.onMouseUp) handlers.onMouseUp(e);
}}"
.innerHTML="${this.renderListContent(block.content, block.metadata)}"
></div>
`;
@ -60,6 +65,10 @@ export class WysiwygBlocks {
@blur="${handlers.onBlur}"
@compositionstart="${handlers.onCompositionStart}"
@compositionend="${handlers.onCompositionEnd}"
@mouseup="${(e: MouseEvent) => {
console.log('Block mouseup event fired');
if (handlers.onMouseUp) handlers.onMouseUp(e);
}}"
></div>
`;
}

27
ts_web/elements/wysiwyg/wysiwyg.converters.ts
View File

@ -9,17 +9,22 @@ export class WysiwygConverters {
static getHtmlOutput(blocks: IBlock[]): string {
return blocks.map(block => {
// Check if content already contains HTML formatting
const content = block.content.includes('<') && block.content.includes('>')
? block.content // Already contains HTML formatting
: this.escapeHtml(block.content);
switch (block.type) {
case 'paragraph':
return block.content ? `<p>${this.escapeHtml(block.content)}</p>` : '';
return block.content ? `<p>${content}</p>` : '';
case 'heading-1':
return `<h1>${this.escapeHtml(block.content)}</h1>`;
return `<h1>${content}</h1>`;
case 'heading-2':
return `<h2>${this.escapeHtml(block.content)}</h2>`;
return `<h2>${content}</h2>`;
case 'heading-3':
return `<h3>${this.escapeHtml(block.content)}</h3>`;
return `<h3>${content}</h3>`;
case 'quote':
return `<blockquote>${this.escapeHtml(block.content)}</blockquote>`;
return `<blockquote>${content}</blockquote>`;
case 'code':
return `<pre><code>${this.escapeHtml(block.content)}</code></pre>`;
case 'list':
@ -32,7 +37,7 @@ export class WysiwygConverters {
case 'divider':
return '<hr>';
default:
return `<p>${this.escapeHtml(block.content)}</p>`;
return `<p>${content}</p>`;
}
}).filter(html => html !== '').join('\n');
}
@ -88,35 +93,35 @@ export class WysiwygConverters {
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'paragraph',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h1':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-1',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h2':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-2',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'h3':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'heading-3',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'blockquote':
blocks.push({
id: `block-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
type: 'quote',
content: element.textContent || '',
content: element.innerHTML || '',
});
break;
case 'pre':

149
ts_web/elements/wysiwyg/wysiwyg.formatting.ts Normal file
View File

@ -0,0 +1,149 @@
import { html, type TemplateResult } from '@design.estate/dees-element';
export interface IFormatButton {
command: string;
icon: string;
label: string;
shortcut?: string;
action?: () => void;
}
export class WysiwygFormatting {
static readonly formatButtons: IFormatButton[] = [
{ command: 'bold', icon: 'B', label: 'Bold', shortcut: '⌘B' },
{ command: 'italic', icon: 'I', label: 'Italic', shortcut: '⌘I' },
{ command: 'underline', icon: 'U', label: 'Underline', shortcut: '⌘U' },
{ command: 'strikeThrough', icon: 'S̶', label: 'Strikethrough' },
{ command: 'code', icon: '{ }', label: 'Inline Code' },
{ command: 'link', icon: '🔗', label: 'Link', shortcut: '⌘K' },
];
static renderFormattingMenu(
position: { x: number; y: number },
onFormat: (command: string) => void
): TemplateResult {
return html`
<div
class="formatting-menu"
style="top: ${position.y}px; left: ${position.x}px;"
@mousedown="${(e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); }}"
@click="${(e: MouseEvent) => e.stopPropagation()}"
>
${this.formatButtons.map(button => html`
<button
class="format-button ${button.command}"
@click="${() => onFormat(button.command)}"
title="${button.label}${button.shortcut ? ` (${button.shortcut})` : ''}"
>
<span class="${button.command === 'code' ? 'code-icon' : ''}">${button.icon}</span>
</button>
`)}
</div>
`;
}
static applyFormat(command: string, value?: string): void {
// Save current selection
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
// Apply format based on command
switch (command) {
case 'bold':
case 'italic':
case 'underline':
case 'strikeThrough':
document.execCommand(command, false);
break;
case 'code':
// For inline code, wrap selection in <code> tags
const codeElement = document.createElement('code');
try {
codeElement.appendChild(range.extractContents());
range.insertNode(codeElement);
// Select the newly created code element
range.selectNodeContents(codeElement);
selection.removeAllRanges();
selection.addRange(range);
} catch (e) {
// Fallback to execCommand if range manipulation fails
document.execCommand('fontName', false, 'monospace');
}
break;
case 'link':
const url = value || prompt('Enter URL:');
if (url) {
document.execCommand('createLink', false, url);
}
break;
}
}
static getSelectionCoordinates(shadowRoot?: ShadowRoot): { x: number, y: number } | null {
// Try shadow root selection first, then window
let selection = shadowRoot && (shadowRoot as any).getSelection ? (shadowRoot as any).getSelection() : null;
if (!selection || selection.rangeCount === 0) {
selection = window.getSelection();
}
console.log('getSelectionCoordinates - selection:', selection);
if (!selection || selection.rangeCount === 0) {
console.log('No selection or no ranges');
return null;
}
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
console.log('Range rect:', rect);
if (rect.width === 0) {
console.log('Rect width is 0');
return null;
}
const coords = {
x: rect.left + (rect.width / 2),
y: Math.max(45, rect.top - 45) // Position above selection, but ensure it's not negative
};
console.log('Returning coords:', coords);
return coords;
}
static isFormattingApplied(command: string): boolean {
try {
return document.queryCommandState(command);
} catch {
return false;
}
}
static hasSelection(): boolean {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
console.log('No selection or no ranges');
return false;
}
// Check if we actually have selected text (not just collapsed cursor)
const selectedText = selection.toString();
if (!selectedText || selectedText.length === 0) {
console.log('No text selected');
return false;
}
return true;
}
static getSelectedText(): string {
const selection = window.getSelection();
return selection ? selection.toString() : '';
}
}

121
ts_web/elements/wysiwyg/wysiwyg.styles.ts
View File

@ -26,6 +26,11 @@ export const wysiwygStyles = css`
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')};
}
/* Visual hint for text selection */
.editor-content:hover {
cursor: text;
}
.editor-content {
outline: none;
min-height: 160px;
@ -388,4 +393,120 @@ export const wysiwygStyles = css`
.editor-content.dragging * {
user-select: none;
}
/* Text Selection Styles */
.block ::selection {
background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')};
color: inherit;
}
/* Formatting Menu */
.formatting-menu {
position: absolute;
background: ${cssManager.bdTheme('#ffffff', '#262626')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
border-radius: 6px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
padding: 4px;
display: flex;
gap: 2px;
z-index: 1001;
animation: fadeInScale 0.15s ease-out;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95) translateY(5px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.format-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')};
font-weight: 600;
font-size: 14px;
position: relative;
}
.format-button:hover {
background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
}
.format-button:active {
transform: scale(0.95);
}
.format-button.bold {
font-weight: 700;
}
.format-button.italic {
font-style: italic;
}
.format-button.underline {
text-decoration: underline;
}
.format-button .code-icon {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 12px;
}
/* Applied format styles in content */
.block strong,
.block b {
font-weight: 600;
color: ${cssManager.bdTheme('#000000', '#ffffff')};
}
.block em,
.block i {
font-style: italic;
}
.block u {
text-decoration: underline;
}
.block strike,
.block s {
text-decoration: line-through;
opacity: 0.7;
}
.block code {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
padding: 2px 6px;
border-radius: 3px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
font-size: 0.9em;
color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
}
.block a {
color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.block a:hover {
border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
}
`;