From 342bd7d7c24e5938e6cf946a6e8c825c76c98d06 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Thu, 26 Jun 2025 13:18:34 +0000 Subject: [PATCH] update --- ts_web/elements/wysiwyg/MIGRATION-STATUS.md | 45 +- ts_web/elements/wysiwyg/blocks/block.base.ts | 13 +- .../wysiwyg/blocks/content/html.block.ts | 519 ++++++++ .../wysiwyg/blocks/content/markdown.block.ts | 562 ++++++++ ts_web/elements/wysiwyg/blocks/index.ts | 19 +- .../wysiwyg/blocks/media/attachment.block.ts | 477 +++++++ .../wysiwyg/blocks/media/image.block.ts | 406 ++++++ .../wysiwyg/blocks/media/youtube.block.ts | 337 +++++ ts_web/elements/wysiwyg/dees-input-wysiwyg.ts | 1 + ts_web/elements/wysiwyg/dees-wysiwyg-block.ts | 1159 +---------------- .../wysiwyg/wysiwyg.blockregistration.ts | 38 +- ts_web/elements/wysiwyg/wysiwyg.interfaces.ts | 1 + 12 files changed, 2369 insertions(+), 1208 deletions(-) create mode 100644 ts_web/elements/wysiwyg/blocks/content/html.block.ts create mode 100644 ts_web/elements/wysiwyg/blocks/content/markdown.block.ts create mode 100644 ts_web/elements/wysiwyg/blocks/media/attachment.block.ts create mode 100644 ts_web/elements/wysiwyg/blocks/media/image.block.ts create mode 100644 ts_web/elements/wysiwyg/blocks/media/youtube.block.ts diff --git a/ts_web/elements/wysiwyg/MIGRATION-STATUS.md b/ts_web/elements/wysiwyg/MIGRATION-STATUS.md index b020ced..6b9e2d9 100644 --- a/ts_web/elements/wysiwyg/MIGRATION-STATUS.md +++ b/ts_web/elements/wysiwyg/MIGRATION-STATUS.md @@ -23,14 +23,14 @@ This document tracks the progress of migrating all WYSIWYG blocks to the new blo - All three heading levels (h1, h2, h3) using unified handler - See `phase4-summary.md` for details -### 🔄 Phase 5: Other Text Blocks (In Progress) -- [ ] Quote block -- [ ] Code block -- [ ] List block +### ✅ Phase 5: Other Text Blocks +- [x] Quote block - Completed with custom styling +- [x] Code block - Completed with syntax highlighting, line numbers, and copy button +- [x] List block - Completed with bullet and numbered list support -### 📋 Phase 6: Media Blocks (Planned) -- [ ] Image block -- [ ] YouTube block +### 🔄 Phase 6: Media Blocks (In Progress) +- [x] Image block - Completed with click upload, drag-drop, and base64 encoding +- [x] YouTube block - Completed with URL parsing and video embedding - [ ] Attachment block ### 📋 Phase 7: Content Blocks (Planned) @@ -46,14 +46,14 @@ This document tracks the progress of migrating all WYSIWYG blocks to the new blo | heading-1 | ✅ | ✅ | ✅ | Using HeadingBlockHandler | | heading-2 | ✅ | ✅ | ✅ | Using HeadingBlockHandler | | heading-3 | ✅ | ✅ | ✅ | Using HeadingBlockHandler | -| quote | ❌ | ❌ | ❌ | | -| code | ❌ | ❌ | ❌ | | -| list | ❌ | ❌ | ❌ | | -| image | ❌ | ❌ | ❌ | | -| youtube | ❌ | ❌ | ❌ | | -| markdown | ❌ | ❌ | ❌ | | -| html | ❌ | ❌ | ❌ | | -| attachment | ❌ | ❌ | ❌ | | +| quote | ✅ | ✅ | ✅ | Complete with custom styling | +| code | ✅ | ✅ | ✅ | Complete with highlighting, line numbers, copy | +| list | ✅ | ✅ | ✅ | Complete with bullet/numbered support | +| image | ✅ | ✅ | ✅ | Complete with upload, drag-drop support | +| youtube | ✅ | ✅ | ✅ | Complete with URL parsing, video embedding | +| attachment | ❌ | ❌ | ❌ | Phase 6 | +| markdown | ❌ | ❌ | ❌ | Phase 7 | +| html | ❌ | ❌ | ❌ | Phase 7 | ## Files Modified During Migration @@ -68,11 +68,20 @@ This document tracks the progress of migrating all WYSIWYG blocks to the new blo - `blocks/content/divider.block.ts` - `blocks/text/paragraph.block.ts` - `blocks/text/heading.block.ts` +- `blocks/text/quote.block.ts` +- `blocks/text/code.block.ts` +- `blocks/text/list.block.ts` +- `blocks/media/image.block.ts` +- `blocks/media/youtube.block.ts` ### Main Component Updates - `dees-wysiwyg-block.ts` - Updated to use registry pattern ## Next Steps -1. Continue with quote block migration -2. Follow established patterns from paragraph/heading handlers -3. Test thoroughly after each migration \ No newline at end of file +1. Begin Phase 6: Media blocks migration + - Start with image block (most common media type) + - Implement YouTube block for video embedding + - Create attachment block for file uploads +2. Follow established patterns from existing handlers +3. Test thoroughly after each migration +4. Update documentation as blocks are completed \ No newline at end of file diff --git a/ts_web/elements/wysiwyg/blocks/block.base.ts b/ts_web/elements/wysiwyg/blocks/block.base.ts index c631319..480c77d 100644 --- a/ts_web/elements/wysiwyg/blocks/block.base.ts +++ b/ts_web/elements/wysiwyg/blocks/block.base.ts @@ -1,4 +1,8 @@ import type { IBlock } from '../wysiwyg.types.js'; +import type { IBlockEventHandlers } from '../wysiwyg.interfaces.js'; + +// Re-export types from the interfaces +export type { IBlockEventHandlers } from '../wysiwyg.interfaces.js'; export interface IBlockContext { shadowRoot: ShadowRoot; @@ -23,15 +27,6 @@ export interface IBlockHandler { getSplitContent?(element: HTMLElement, context?: IBlockContext): { before: string; after: string } | null; } -export interface IBlockEventHandlers { - onInput: (e: InputEvent) => void; - onKeyDown: (e: KeyboardEvent) => void; - onFocus: () => void; - onBlur: () => void; - onCompositionStart: () => void; - onCompositionEnd: () => void; - onMouseUp?: (e: MouseEvent) => void; -} export abstract class BaseBlockHandler implements IBlockHandler { abstract type: string; diff --git a/ts_web/elements/wysiwyg/blocks/content/html.block.ts b/ts_web/elements/wysiwyg/blocks/content/html.block.ts new file mode 100644 index 0000000..a79e918 --- /dev/null +++ b/ts_web/elements/wysiwyg/blocks/content/html.block.ts @@ -0,0 +1,519 @@ +import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js'; +import type { IBlock } from '../../wysiwyg.types.js'; +import { cssManager } from '@design.estate/dees-element'; + +/** + * HTMLBlockHandler - Handles raw HTML content with preview/edit toggle + * + * Features: + * - Live HTML preview (sandboxed) + * - Edit/preview mode toggle + * - Syntax highlighting in edit mode + * - HTML validation hints + * - Auto-save on mode switch + */ +export class HtmlBlockHandler extends BaseBlockHandler { + type = 'html'; + + render(block: IBlock, isSelected: boolean): string { + const isEditMode = block.metadata?.isEditMode ?? true; + const content = block.content || ''; + + return ` +
+
+
</>
+
HTML
+ +
+
+ ${isEditMode ? this.renderEditor(content) : this.renderPreview(content)} +
+
+ `; + } + + private renderEditor(content: string): string { + return ` + + `; + } + + private renderPreview(content: string): string { + return ` +
+ ${content || '
No content to preview
'} +
+ `; + } + + setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const container = element.querySelector('.html-block-container') as HTMLElement; + const toggleBtn = element.querySelector('.html-toggle-mode') as HTMLButtonElement; + + if (!container || !toggleBtn) { + console.error('HtmlBlockHandler: Could not find required elements'); + return; + } + + // Initialize metadata + if (!block.metadata) block.metadata = {}; + if (block.metadata.isEditMode === undefined) block.metadata.isEditMode = true; + + // Toggle mode button + toggleBtn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + // Save current content if in edit mode + if (block.metadata.isEditMode) { + const editor = container.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + block.content = editor.value; + } + } + + // Toggle mode + block.metadata.isEditMode = !block.metadata.isEditMode; + + // Request UI update + handlers.onRequestUpdate?.(); + }); + + // Setup based on mode + if (block.metadata.isEditMode) { + this.setupEditor(element, block, handlers); + } else { + this.setupPreview(element, block, handlers); + } + } + + private setupEditor(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (!editor) return; + + // Focus handling + editor.addEventListener('focus', () => handlers.onFocus()); + editor.addEventListener('blur', () => handlers.onBlur()); + + // Content changes + editor.addEventListener('input', () => { + block.content = editor.value; + this.validateHtml(editor.value); + }); + + // Keyboard shortcuts + editor.addEventListener('keydown', (e) => { + // Tab handling for indentation + if (e.key === 'Tab') { + e.preventDefault(); + const start = editor.selectionStart; + const end = editor.selectionEnd; + const value = editor.value; + + if (e.shiftKey) { + // Unindent + const beforeCursor = value.substring(0, start); + const lastNewline = beforeCursor.lastIndexOf('\n'); + const lineStart = lastNewline + 1; + const lineContent = value.substring(lineStart, start); + + if (lineContent.startsWith(' ')) { + editor.value = value.substring(0, lineStart) + lineContent.substring(2) + value.substring(start); + editor.selectionStart = editor.selectionEnd = start - 2; + } + } else { + // Indent + editor.value = value.substring(0, start) + ' ' + value.substring(end); + editor.selectionStart = editor.selectionEnd = start + 2; + } + + block.content = editor.value; + return; + } + + // Auto-close tags (Ctrl/Cmd + /) + if ((e.ctrlKey || e.metaKey) && e.key === '/') { + e.preventDefault(); + this.autoCloseTag(editor); + block.content = editor.value; + return; + } + + // Pass other key events to handlers + handlers.onKeyDown(e); + }); + + // Auto-resize + this.autoResize(editor); + editor.addEventListener('input', () => this.autoResize(editor)); + } + + private setupPreview(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const container = element.querySelector('.html-block-container') as HTMLElement; + const preview = element.querySelector('.html-preview') as HTMLElement; + + if (!container || !preview) return; + + // Make preview focusable + preview.setAttribute('tabindex', '0'); + + // Focus handling + preview.addEventListener('focus', () => handlers.onFocus()); + preview.addEventListener('blur', () => handlers.onBlur()); + + // Keyboard navigation + preview.addEventListener('keydown', (e) => { + // Switch to edit mode on Enter + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + block.metadata.isEditMode = true; + handlers.onRequestUpdate?.(); + return; + } + + handlers.onKeyDown(e); + }); + + // Sandbox styles and scripts in preview + this.sandboxContent(preview); + } + + private autoCloseTag(editor: HTMLTextAreaElement): void { + const cursorPos = editor.selectionStart; + const text = editor.value; + + // Find the opening tag + let tagStart = cursorPos; + while (tagStart > 0 && text[tagStart - 1] !== '<') { + tagStart--; + } + + if (tagStart > 0) { + const tagContent = text.substring(tagStart, cursorPos); + const tagMatch = tagContent.match(/^(\w+)/); + + if (tagMatch) { + const tagName = tagMatch[1]; + const closingTag = ``; + + // Insert closing tag + editor.value = text.substring(0, cursorPos) + '>' + closingTag + text.substring(cursorPos); + editor.selectionStart = editor.selectionEnd = cursorPos + 1; + } + } + } + + private autoResize(editor: HTMLTextAreaElement): void { + editor.style.height = 'auto'; + editor.style.height = editor.scrollHeight + 'px'; + } + + private validateHtml(html: string): boolean { + // Basic HTML validation + const openTags: string[] = []; + const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g; + let match; + + while ((match = tagRegex.exec(html)) !== null) { + const isClosing = match[0].startsWith('')) { + // Not a self-closing tag + openTags.push(tagName); + } + } + + if (openTags.length > 0) { + console.warn(`Unclosed tags: ${openTags.join(', ')}`); + return false; + } + + return true; + } + + private sandboxContent(preview: HTMLElement): void { + // Remove any script tags + const scripts = preview.querySelectorAll('script'); + scripts.forEach(script => script.remove()); + + // Remove event handlers + const allElements = preview.querySelectorAll('*'); + allElements.forEach(el => { + // Remove all on* attributes + Array.from(el.attributes).forEach(attr => { + if (attr.name.startsWith('on')) { + el.removeAttribute(attr.name); + } + }); + }); + + // Prevent forms from submitting + const forms = preview.querySelectorAll('form'); + forms.forEach(form => { + form.addEventListener('submit', (e) => { + e.preventDefault(); + e.stopPropagation(); + }); + }); + } + + private escapeHtml(text: string): string { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + getContent(element: HTMLElement): string { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + return editor.value; + } + + // If in preview mode, return the stored content + const container = element.querySelector('.html-block-container'); + const blockId = container?.getAttribute('data-block-id'); + // In real implementation, would need access to block data + return ''; + } + + setContent(element: HTMLElement, content: string): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + editor.value = content; + this.autoResize(editor); + } + } + + getCursorPosition(element: HTMLElement): number | null { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + return editor ? editor.selectionStart : null; + } + + setCursorToStart(element: HTMLElement): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + editor.selectionStart = editor.selectionEnd = 0; + editor.focus(); + } else { + this.focus(element); + } + } + + setCursorToEnd(element: HTMLElement): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + const length = editor.value.length; + editor.selectionStart = editor.selectionEnd = length; + editor.focus(); + } else { + this.focus(element); + } + } + + focus(element: HTMLElement): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + editor.focus(); + } else { + const preview = element.querySelector('.html-preview') as HTMLElement; + preview?.focus(); + } + } + + focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end'): void { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (editor) { + if (position === 'start') { + this.setCursorToStart(element); + } else if (position === 'end') { + this.setCursorToEnd(element); + } else if (typeof position === 'number') { + editor.selectionStart = editor.selectionEnd = position; + editor.focus(); + } + } else { + this.focus(element); + } + } + + getSplitContent(element: HTMLElement): { before: string; after: string } | null { + const editor = element.querySelector('.html-editor') as HTMLTextAreaElement; + if (!editor) return null; + + const cursorPos = editor.selectionStart; + return { + before: editor.value.substring(0, cursorPos), + after: editor.value.substring(cursorPos) + }; + } + + getStyles(): string { + return ` + /* HTML Block Container */ + .html-block-container { + position: relative; + margin: 12px 0; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')}; + border-radius: 6px; + overflow: hidden; + transition: all 0.15s ease; + background: ${cssManager.bdTheme('#ffffff', '#111827')}; + } + + .html-block-container.selected { + border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')}; + } + + /* Header */ + .html-header { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')}; + background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')}; + } + + .html-icon { + font-size: 14px; + font-weight: 600; + opacity: 0.8; + font-family: 'Monaco', 'Consolas', 'Courier New', monospace; + } + + .html-title { + flex: 1; + font-size: 13px; + font-weight: 500; + color: ${cssManager.bdTheme('#374151', '#e5e7eb')}; + } + + .html-toggle-mode { + padding: 4px 8px; + background: transparent; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')}; + border-radius: 4px; + font-size: 14px; + cursor: pointer; + transition: all 0.15s ease; + } + + .html-toggle-mode:hover { + background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')}; + border-color: ${cssManager.bdTheme('#d1d5db', '#4b5563')}; + } + + /* Content */ + .html-content { + position: relative; + min-height: 120px; + } + + /* Editor */ + .html-editor { + width: 100%; + min-height: 120px; + padding: 12px; + background: transparent; + border: none; + outline: none; + resize: none; + font-family: 'Monaco', 'Consolas', 'Courier New', monospace; + font-size: 13px; + line-height: 1.6; + color: ${cssManager.bdTheme('#1f2937', '#f3f4f6')}; + overflow: hidden; + } + + .html-editor::placeholder { + color: ${cssManager.bdTheme('#9ca3af', '#6b7280')}; + } + + /* Preview */ + .html-preview { + padding: 12px; + min-height: 96px; + outline: none; + font-size: 14px; + line-height: 1.6; + color: ${cssManager.bdTheme('#1f2937', '#f3f4f6')}; + } + + .preview-empty { + color: ${cssManager.bdTheme('#9ca3af', '#6b7280')}; + font-style: italic; + } + + /* Sandboxed HTML preview styles */ + .html-preview * { + max-width: 100%; + } + + .html-preview img { + height: auto; + } + + .html-preview a { + color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')}; + text-decoration: none; + } + + .html-preview a:hover { + text-decoration: underline; + } + + .html-preview table { + border-collapse: collapse; + width: 100%; + margin: 8px 0; + } + + .html-preview th, + .html-preview td { + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')}; + padding: 8px; + text-align: left; + } + + .html-preview th { + background: ${cssManager.bdTheme('#f9fafb', '#1f2937')}; + font-weight: 600; + } + + .html-preview pre { + background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')}; + padding: 12px; + border-radius: 4px; + overflow-x: auto; + margin: 8px 0; + } + + .html-preview code { + background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')}; + padding: 2px 4px; + border-radius: 3px; + font-family: 'Monaco', 'Consolas', 'Courier New', monospace; + font-size: 0.9em; + } + + .html-preview pre code { + background: transparent; + padding: 0; + } + `; + } +} \ No newline at end of file diff --git a/ts_web/elements/wysiwyg/blocks/content/markdown.block.ts b/ts_web/elements/wysiwyg/blocks/content/markdown.block.ts new file mode 100644 index 0000000..d508764 --- /dev/null +++ b/ts_web/elements/wysiwyg/blocks/content/markdown.block.ts @@ -0,0 +1,562 @@ +import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js'; +import type { IBlock } from '../../wysiwyg.types.js'; +import { cssManager } from '@design.estate/dees-element'; + +/** + * MarkdownBlockHandler - Handles markdown content with preview/edit toggle + * + * Features: + * - Live markdown preview + * - Edit/preview mode toggle + * - Syntax highlighting in edit mode + * - Common markdown shortcuts + * - Auto-save on mode switch + */ +export class MarkdownBlockHandler extends BaseBlockHandler { + type = 'markdown'; + + render(block: IBlock, isSelected: boolean): string { + const isEditMode = block.metadata?.isEditMode ?? true; + const content = block.content || ''; + + return ` +
+
+
M↓
+
Markdown
+ +
+
+ ${isEditMode ? this.renderEditor(content) : this.renderPreview(content)} +
+
+ `; + } + + private renderEditor(content: string): string { + return ` + + `; + } + + private renderPreview(content: string): string { + const html = this.parseMarkdown(content); + return ` +
+ ${html || '
No content to preview
'} +
+ `; + } + + setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const container = element.querySelector('.markdown-block-container') as HTMLElement; + const toggleBtn = element.querySelector('.markdown-toggle-mode') as HTMLButtonElement; + + if (!container || !toggleBtn) { + console.error('MarkdownBlockHandler: Could not find required elements'); + return; + } + + // Initialize metadata + if (!block.metadata) block.metadata = {}; + if (block.metadata.isEditMode === undefined) block.metadata.isEditMode = true; + + // Toggle mode button + toggleBtn.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + + // Save current content if in edit mode + if (block.metadata.isEditMode) { + const editor = container.querySelector('.markdown-editor') as HTMLTextAreaElement; + if (editor) { + block.content = editor.value; + } + } + + // Toggle mode + block.metadata.isEditMode = !block.metadata.isEditMode; + + // Request UI update + handlers.onRequestUpdate?.(); + }); + + // Setup based on mode + if (block.metadata.isEditMode) { + this.setupEditor(element, block, handlers); + } else { + this.setupPreview(element, block, handlers); + } + } + + private setupEditor(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const editor = element.querySelector('.markdown-editor') as HTMLTextAreaElement; + if (!editor) return; + + // Focus handling + editor.addEventListener('focus', () => handlers.onFocus()); + editor.addEventListener('blur', () => handlers.onBlur()); + + // Content changes + editor.addEventListener('input', () => { + block.content = editor.value; + }); + + // Keyboard shortcuts + editor.addEventListener('keydown', (e) => { + // Tab handling for indentation + if (e.key === 'Tab') { + e.preventDefault(); + const start = editor.selectionStart; + const end = editor.selectionEnd; + const value = editor.value; + + if (e.shiftKey) { + // Unindent + const beforeCursor = value.substring(0, start); + const lastNewline = beforeCursor.lastIndexOf('\n'); + const lineStart = lastNewline + 1; + const lineContent = value.substring(lineStart, start); + + if (lineContent.startsWith(' ')) { + editor.value = value.substring(0, lineStart) + lineContent.substring(2) + value.substring(start); + editor.selectionStart = editor.selectionEnd = start - 2; + } + } else { + // Indent + editor.value = value.substring(0, start) + ' ' + value.substring(end); + editor.selectionStart = editor.selectionEnd = start + 2; + } + + block.content = editor.value; + return; + } + + // Bold shortcut (Ctrl/Cmd + B) + if ((e.ctrlKey || e.metaKey) && e.key === 'b') { + e.preventDefault(); + this.wrapSelection(editor, '**', '**'); + block.content = editor.value; + return; + } + + // Italic shortcut (Ctrl/Cmd + I) + if ((e.ctrlKey || e.metaKey) && e.key === 'i') { + e.preventDefault(); + this.wrapSelection(editor, '_', '_'); + block.content = editor.value; + return; + } + + // Link shortcut (Ctrl/Cmd + K) + if ((e.ctrlKey || e.metaKey) && e.key === 'k') { + e.preventDefault(); + this.insertLink(editor); + block.content = editor.value; + return; + } + + // Pass other key events to handlers + handlers.onKeyDown(e); + }); + + // Auto-resize + this.autoResize(editor); + editor.addEventListener('input', () => this.autoResize(editor)); + } + + private setupPreview(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void { + const container = element.querySelector('.markdown-block-container') as HTMLElement; + const preview = element.querySelector('.markdown-preview') as HTMLElement; + + if (!container || !preview) return; + + // Make preview focusable + preview.setAttribute('tabindex', '0'); + + // Focus handling + preview.addEventListener('focus', () => handlers.onFocus()); + preview.addEventListener('blur', () => handlers.onBlur()); + + // Keyboard navigation + preview.addEventListener('keydown', (e) => { + // Switch to edit mode on Enter + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + block.metadata.isEditMode = true; + handlers.onRequestUpdate?.(); + return; + } + + handlers.onKeyDown(e); + }); + } + + private wrapSelection(editor: HTMLTextAreaElement, before: string, after: string): void { + const start = editor.selectionStart; + const end = editor.selectionEnd; + const selectedText = editor.value.substring(start, end); + const replacement = before + (selectedText || 'text') + after; + + editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end); + + if (selectedText) { + editor.selectionStart = start; + editor.selectionEnd = start + replacement.length; + } else { + editor.selectionStart = start + before.length; + editor.selectionEnd = start + before.length + 4; // 'text'.length + } + + editor.focus(); + } + + private insertLink(editor: HTMLTextAreaElement): void { + const start = editor.selectionStart; + const end = editor.selectionEnd; + const selectedText = editor.value.substring(start, end); + const linkText = selectedText || 'link text'; + const replacement = `[${linkText}](url)`; + + editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end); + + // Select the URL part + editor.selectionStart = start + linkText.length + 3; // '[linktext]('.length + editor.selectionEnd = start + linkText.length + 6; // '[linktext](url'.length + + editor.focus(); + } + + private autoResize(editor: HTMLTextAreaElement): void { + editor.style.height = 'auto'; + editor.style.height = editor.scrollHeight + 'px'; + } + + private parseMarkdown(markdown: string): string { + // Basic markdown parsing - in production, use a proper markdown parser + let html = this.escapeHtml(markdown); + + // Headers + html = html.replace(/^### (.+)$/gm, '

$1

'); + html = html.replace(/^## (.+)$/gm, '

$1

'); + html = html.replace(/^# (.+)$/gm, '

$1

'); + + // Bold + html = html.replace(/\*\*(.+?)\*\*/g, '$1'); + html = html.replace(/__(.+?)__/g, '$1'); + + // Italic + html = html.replace(/\*(.+?)\*/g, '$1'); + html = html.replace(/_(.+?)_/g, '$1'); + + // Code blocks + html = html.replace(/```([\s\S]*?)```/g, '
$1
'); + + // Inline code + html = html.replace(/`(.+?)`/g, '$1'); + + // Links + html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1'); + + // Lists + html = html.replace(/^\* (.+)$/gm, '
  • $1
    • '); + html = html.replace(/^- (.+)$/gm, '
  • $1
    • '); + html = html.replace(/^\d+\. (.+)$/gm, '
  • $1
    • '); + + // Wrap consecutive list items + html = html.replace(/(
  • .*<\/li>\n?)+/g, (match) => { + return ''; + }); + + // Paragraphs + html = html.replace(/\n\n/g, '

    '); + html = '

    ' + html + '

    '; + + // Clean up empty paragraphs + html = html.replace(/

    <\/p>/g, ''); + html = html.replace(/

    ()/g, '$1'); + html = html.replace(/(<\/h[1-3]>)<\/p>/g, '$1'); + html = html.replace(/

    (