@wonderwhy-er/desktop-commander 0.2.38 → 0.2.39

package/dist/ui/file-preview/src/components/markdown-editor.js

@@ -0,0 +1,535 @@
+/**
+ * WYSIWYG markdown editor for the file preview. Makes rendered markdown
+ * blocks contentEditable and translates user changes back to markdown
+ * source, calling edit_block for surgical file updates.
+ */
+import { renderMarkdown } from './markdown-renderer.js';
+import { createEditorToolbar, handleFormatKeydown } from './editor-toolbar.js';
+// ---------------------------------------------------------------------------
+// Markdown source → blocks parser
+// ---------------------------------------------------------------------------
+export function parseMarkdownBlocks(source) {
+    const lines = source.split('\n');
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Blank line — skip
+        if (line.trim() === '') {
+            i++;
+            continue;
+        }
+        // Fenced code block (``` or ~~~)
+        const fenceMatch = line.match(/^(`{3,}|~{3,})/);
+        if (fenceMatch) {
+            const fence = fenceMatch[1];
+            const start = i;
+            i++;
+            while (i < lines.length && !lines[i].startsWith(fence))
+                i++;
+            if (i < lines.length)
+                i++; // closing fence
+            blocks.push({
+                type: 'code',
+                source: lines.slice(start, i).join('\n'),
+                startLine: start + 1,
+                endLine: i,
+                editable: false,
+            });
+            continue;
+        }
+        // Setext heading (underline with = or -)
+        if (i + 1 < lines.length &&
+            /^[=-]+\s*$/.test(lines[i + 1]) &&
+            line.trim() !== '') {
+            const level = lines[i + 1].startsWith('=') ? 1 : 2;
+            blocks.push({
+                type: 'heading',
+                source: lines.slice(i, i + 2).join('\n'),
+                startLine: i + 1,
+                endLine: i + 2,
+                level,
+                editable: true,
+            });
+            i += 2;
+            continue;
+        }
+        // ATX heading
+        const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
+        if (headingMatch) {
+            blocks.push({
+                type: 'heading',
+                source: line,
+                startLine: i + 1,
+                endLine: i + 1,
+                level: headingMatch[1].length,
+                editable: true,
+            });
+            i++;
+            continue;
+        }
+        // Horizontal rule
+        if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+            blocks.push({
+                type: 'hr',
+                source: line,
+                startLine: i + 1,
+                endLine: i + 1,
+                editable: false,
+            });
+            i++;
+            continue;
+        }
+        // Blockquote
+        if (line.startsWith('>')) {
+            const start = i;
+            while (i < lines.length &&
+                (lines[i].startsWith('>') ||
+                    (lines[i].trim() !== '' && !isBlockStart(lines[i]) && i > start))) {
+                i++;
+                if (i < lines.length && lines[i].trim() === '')
+                    break;
+            }
+            blocks.push({
+                type: 'blockquote',
+                source: lines.slice(start, i).join('\n'),
+                startLine: start + 1,
+                endLine: i,
+                editable: true,
+            });
+            continue;
+        }
+        // List (unordered or ordered)
+        const listMatch = line.match(/^(\s*)([-*+]|\d+\.)\s/);
+        if (listMatch) {
+            const start = i;
+            const isOrdered = /\d+\./.test(listMatch[2]);
+            i++;
+            while (i < lines.length) {
+                const l = lines[i];
+                if (l.trim() === '') {
+                    // Blank inside list — check if next line continues the list
+                    if (i + 1 < lines.length && /^(\s*)([-*+]|\d+\.)\s/.test(lines[i + 1])) {
+                        i++;
+                        continue;
+                    }
+                    break;
+                }
+                if (/^(\s*)([-*+]|\d+\.)\s/.test(l) || /^\s+\S/.test(l)) {
+                    i++;
+                }
+                else {
+                    break;
+                }
+            }
+            blocks.push({
+                type: 'list',
+                source: lines.slice(start, i).join('\n'),
+                startLine: start + 1,
+                endLine: i,
+                listType: isOrdered ? 'ol' : 'ul',
+                editable: true,
+            });
+            continue;
+        }
+        // Table (pipe-delimited with separator row)
+        if (line.includes('|') &&
+            i + 1 < lines.length &&
+            /^\|?\s*[-:]+[-| :]*$/.test(lines[i + 1])) {
+            const start = i;
+            while (i < lines.length && lines[i].includes('|') && lines[i].trim() !== '')
+                i++;
+            blocks.push({
+                type: 'table',
+                source: lines.slice(start, i).join('\n'),
+                startLine: start + 1,
+                endLine: i,
+                editable: false,
+            });
+            continue;
+        }
+        // Paragraph (default — consecutive non-blank non-block-start lines)
+        {
+            const start = i;
+            i++;
+            while (i < lines.length && lines[i].trim() !== '' && !isBlockStart(lines[i])) {
+                i++;
+            }
+            blocks.push({
+                type: 'paragraph',
+                source: lines.slice(start, i).join('\n'),
+                startLine: start + 1,
+                endLine: i,
+                editable: true,
+            });
+        }
+    }
+    return blocks;
+}
+/** Returns true if a line starts a new block (heading, fence, hr, list, quote, table). */
+function isBlockStart(line) {
+    if (/^(#{1,6})\s/.test(line))
+        return true;
+    if (/^(`{3,}|~{3,})/.test(line))
+        return true;
+    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line))
+        return true;
+    if (line.startsWith('>'))
+        return true;
+    if (/^(\s*)([-*+]|\d+\.)\s/.test(line))
+        return true;
+    return false;
+}
+// ---------------------------------------------------------------------------
+// HTML → inline markdown conversion (for contentEditable round-tripping)
+// ---------------------------------------------------------------------------
+function nodeToMarkdown(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return '';
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const children = Array.from(el.childNodes).map(nodeToMarkdown).join('');
+    switch (tag) {
+        case 'strong':
+        case 'b':
+            return `**${children}**`;
+        case 'em':
+        case 'i':
+            return `*${children}*`;
+        case 'code':
+            // Inline code only (not inside <pre>)
+            if (!el.closest('pre'))
+                return `\`${el.textContent ?? ''}\``;
+            return children;
+        case 'a': {
+            const href = el.getAttribute('href') ?? '';
+            return `[${children}](${href})`;
+        }
+        case 'img': {
+            const alt = el.getAttribute('alt') ?? '';
+            const src = el.getAttribute('src') ?? '';
+            return `![${alt}](${src})`;
+        }
+        case 'br':
+            return '\n';
+        case 'del':
+        case 's':
+        case 'strike':
+            return `~~${children}~~`;
+        case 'span': {
+            // Preserve styled spans as inline HTML (color, font-size)
+            const style = el.getAttribute('style') ?? '';
+            if (style) {
+                return `<span style="${style}">${children}</span>`;
+            }
+            return children;
+        }
+        case 'font': {
+            // execCommand('foreColor') produces <font color="...">
+            // execCommand('fontSize') produces <font size="...">
+            const color = el.getAttribute('color');
+            const size = el.getAttribute('size');
+            if (color) {
+                return `<span style="color: ${color}">${children}</span>`;
+            }
+            if (size) {
+                return `<span style="font-size: ${size}">${children}</span>`;
+            }
+            return children;
+        }
+        default:
+            return children;
+    }
+}
+function extractInlineMarkdown(element) {
+    return Array.from(element.childNodes).map(nodeToMarkdown).join('').trim();
+}
+// ---------------------------------------------------------------------------
+// Block → markdown reconstruction from edited DOM
+// ---------------------------------------------------------------------------
+function blockToMarkdown(block, editedEl) {
+    switch (block.type) {
+        case 'heading': {
+            const prefix = '#'.repeat(block.level ?? 1);
+            const text = extractInlineMarkdown(editedEl);
+            return `${prefix} ${text}`;
+        }
+        case 'paragraph': {
+            const pTags = editedEl.querySelectorAll('p');
+            if (pTags.length > 0) {
+                return Array.from(pTags)
+                    .map(p => extractInlineMarkdown(p))
+                    .join('\n\n');
+            }
+            return extractInlineMarkdown(editedEl);
+        }
+        case 'list': {
+            const listItems = editedEl.querySelectorAll(':scope > li');
+            const isOrdered = block.listType === 'ol';
+            return Array.from(listItems)
+                .map((li, idx) => {
+                const liEl = li;
+                // markdown-it wraps loose list content in <p>
+                const pEl = liEl.querySelector(':scope > p');
+                const text = extractInlineMarkdown(pEl ?? liEl);
+                const prefix = isOrdered ? `${idx + 1}. ` : '- ';
+                return `${prefix}${text}`;
+            })
+                .join('\n');
+        }
+        case 'blockquote': {
+            const paragraphs = editedEl.querySelectorAll('p');
+            let text;
+            if (paragraphs.length > 0) {
+                text = Array.from(paragraphs)
+                    .map(p => extractInlineMarkdown(p))
+                    .join('\n\n');
+            }
+            else {
+                text = extractInlineMarkdown(editedEl);
+            }
+            return text
+                .split('\n')
+                .map(line => `> ${line}`)
+                .join('\n');
+        }
+        default:
+            return block.source;
+    }
+}
+// ---------------------------------------------------------------------------
+// Editable rendering — wraps each block in a container with data attributes
+// ---------------------------------------------------------------------------
+export function renderEditableMarkdown(source) {
+    const blocks = parseMarkdownBlocks(source);
+    let html = '';
+    for (const block of blocks) {
+        const rendered = renderMarkdown(block.source);
+        const editableClass = block.editable ? ' md-block--editable' : '';
+        const attrs = [
+            `data-md-start="${block.startLine}"`,
+            `data-md-end="${block.endLine}"`,
+            `data-md-type="${block.type}"`,
+            block.level !== undefined ? `data-md-level="${block.level}"` : '',
+            block.listType ? `data-md-list="${block.listType}"` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        html += `<div class="md-block${editableClass}" ${attrs}>${rendered}</div>`;
+    }
+    return html;
+}
+// ---------------------------------------------------------------------------
+// Editor handlers — attaches click/blur/keyboard editing to the DOM
+// ---------------------------------------------------------------------------
+/**
+ * Find the inner content element that should become contentEditable.
+ * Returns null for non-editable block types.
+ */
+function getEditableChild(blockEl) {
+    const type = blockEl.dataset.mdType;
+    switch (type) {
+        case 'heading':
+            return blockEl.querySelector('h1, h2, h3, h4, h5, h6');
+        case 'paragraph':
+            return blockEl.querySelector('p') ?? blockEl;
+        case 'list':
+            return blockEl.querySelector('ul, ol');
+        case 'blockquote':
+            return blockEl.querySelector('blockquote');
+        default:
+            return null;
+    }
+}
+function truncate(text, maxLen) {
+    const singleLine = text.replace(/\n/g, ' ').trim();
+    return singleLine.length > maxLen ? singleLine.slice(0, maxLen) + '...' : singleLine;
+}
+/**
+ * Attach WYSIWYG editing handlers to editable markdown blocks inside
+ * the given container. All editable blocks are contentEditable from the
+ * start — users can select and type immediately without an activation
+ * click. Changes are committed when focus leaves the editor.
+ */
+export function attachEditorHandlers(container, source, filePath, callbacks) {
+    const blocks = parseMarkdownBlocks(source);
+    const blockMap = new Map();
+    for (const block of blocks) {
+        blockMap.set(`${block.startLine}-${block.endLine}`, block);
+    }
+    // Snapshot each block's original innerHTML so we can detect changes
+    const originalHTML = new Map();
+    let activeBlockEl = null;
+    let activeEditEl = null;
+    const editHistory = [];
+    // Floating formatting toolbar
+    const toolbar = createEditorToolbar();
+    container.style.position = 'relative';
+    container.appendChild(toolbar.element);
+    // --- Make all editable blocks live from the start ---
+    const editableBlocks = container.querySelectorAll('.md-block--editable');
+    editableBlocks.forEach(blockEl => {
+        const editEl = getEditableChild(blockEl);
+        if (editEl) {
+            editEl.contentEditable = 'true';
+            const key = blockKey(blockEl);
+            originalHTML.set(key, editEl.innerHTML);
+        }
+    });
+    function blockKey(el) {
+        return `${el.dataset.mdStart}-${el.dataset.mdEnd}`;
+    }
+    async function commitBlock(blockEl, editEl) {
+        const key = blockKey(blockEl);
+        const block = blockMap.get(key);
+        if (!block)
+            return;
+        const origHTML = originalHTML.get(key);
+        if (editEl.innerHTML === origHTML)
+            return; // No change
+        const newMarkdown = blockToMarkdown(block, editEl);
+        if (newMarkdown === block.source)
+            return;
+        callbacks.trackEvent?.('md_block_edited', {
+            block_type: block.type,
+            line: block.startLine,
+        });
+        const prevSource = block.source;
+        try {
+            await callbacks.callTool('edit_block', {
+                file_path: filePath,
+                old_string: block.source,
+                new_string: newMarkdown,
+            });
+            block.source = newMarkdown;
+            editHistory.push({
+                oldText: prevSource,
+                newText: newMarkdown,
+                line: block.startLine,
+            });
+            // Re-render the block and make it editable again
+            const freshHtml = renderMarkdown(newMarkdown);
+            blockEl.innerHTML = freshHtml;
+            const newEditEl = getEditableChild(blockEl);
+            if (newEditEl) {
+                newEditEl.contentEditable = 'true';
+                originalHTML.set(key, newEditEl.innerHTML);
+            }
+            const recent = editHistory.slice(-5).map(e => `  - Line ${e.line}: "${truncate(e.oldText, 50)}" -> "${truncate(e.newText, 50)}"`);
+            callbacks.updateContext(`User edited ${filePath} via preview editor (${editHistory.length} edit${editHistory.length !== 1 ? 's' : ''}):\n${recent.join('\n')}`);
+        }
+        catch (err) {
+            // Revert on failure
+            if (origHTML !== undefined)
+                editEl.innerHTML = origHTML;
+            callbacks.trackEvent?.('md_edit_failed', {
+                block_type: block.type,
+                error: String(err),
+            });
+        }
+    }
+    // --- Track which block the user is in via focusin ---
+    function handleFocusIn(e) {
+        const target = e.target;
+        const blockEl = target.closest('.md-block--editable');
+        if (!blockEl)
+            return;
+        if (blockEl !== activeBlockEl) {
+            // Switching blocks — commit the previous one
+            if (activeBlockEl && activeEditEl) {
+                void commitBlock(activeBlockEl, activeEditEl);
+            }
+            activeBlockEl = blockEl;
+            activeEditEl = getEditableChild(blockEl);
+        }
+    }
+    // --- Commit when focus leaves the editor entirely ---
+    function handleFocusOut(e) {
+        const related = e.relatedTarget;
+        // Focus stayed inside the editor or toolbar — don't commit
+        if (related && (container.contains(related) || toolbar.element.contains(related)))
+            return;
+        toolbar.hide();
+        if (activeBlockEl && activeEditEl) {
+            void commitBlock(activeBlockEl, activeEditEl);
+        }
+        activeBlockEl = null;
+        activeEditEl = null;
+    }
+    // --- Keyboard shortcuts ---
+    function handleKeydown(e) {
+        if (!activeBlockEl || !activeEditEl)
+            return;
+        if (handleFormatKeydown(e))
+            return;
+        // Enter in headings → commit
+        if (e.key === 'Enter' && activeBlockEl.dataset.mdType === 'heading') {
+            e.preventDefault();
+            toolbar.hide();
+            void commitBlock(activeBlockEl, activeEditEl);
+            activeBlockEl = null;
+            activeEditEl = null;
+            return;
+        }
+        // Escape → revert this block
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            toolbar.hide();
+            const key = blockKey(activeBlockEl);
+            const origHTML = originalHTML.get(key);
+            if (origHTML !== undefined && activeEditEl) {
+                activeEditEl.innerHTML = origHTML;
+            }
+            activeEditEl?.blur();
+            activeBlockEl = null;
+            activeEditEl = null;
+        }
+    }
+    // --- Toolbar: show on any text selection in any editable block ---
+    function handleSelectionChange() {
+        const sel = document.getSelection();
+        if (!sel || !sel.rangeCount)
+            return;
+        if (sel.isCollapsed) {
+            // Keep toolbar visible if a dropdown is open (user is picking
+            // a color/size), otherwise hide it.
+            if (toolbar.isVisible && !toolbar.hasOpenDropdown) {
+                toolbar.hide();
+            }
+            return;
+        }
+        // Check if the selection is within any editable block in this editor
+        const anchor = sel.anchorNode;
+        const focus = sel.focusNode;
+        if (!anchor || !focus)
+            return;
+        if (!container.contains(anchor) || !container.contains(focus))
+            return;
+        const editEl = anchor.parentElement?.closest('[contenteditable="true"]');
+        if (!editEl || !container.contains(editEl))
+            return;
+        const range = sel.getRangeAt(0);
+        const selRect = range.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        toolbar.show(selRect, containerRect);
+    }
+    container.addEventListener('focusin', handleFocusIn);
+    container.addEventListener('focusout', handleFocusOut);
+    container.addEventListener('keydown', handleKeydown);
+    document.addEventListener('selectionchange', handleSelectionChange);
+    return {
+        cleanup() {
+            container.removeEventListener('focusin', handleFocusIn);
+            container.removeEventListener('focusout', handleFocusOut);
+            container.removeEventListener('keydown', handleKeydown);
+            document.removeEventListener('selectionchange', handleSelectionChange);
+            toolbar.destroy();
+        },
+        isEditing() {
+            return activeEditEl !== null;
+        },
+    };
+}

package/dist/ui/file-preview/src/components/markdown-renderer.js

@@ -1,21 +1,59 @@
 /**
  * Markdown rendering pipeline for preview mode. It configures markdown-it and highlighting so markdown content is rendered consistently with code block support.
  */
-// markdown-it is intentionally typed locally here to avoid maintaining global ambient module declarations.
-// @ts-expect-error markdown-it does not provide local TypeScript typings in this setup.
-import MarkdownIt from 'markdown-it';
 import { highlightSource } from './highlighting.js';
-const MarkdownItCtor = MarkdownIt;
-const markdown = new MarkdownItCtor({
-    html: false,
-    linkify: true,
-    typographer: false,
+import { createMarkdownIt, prepareMarkdownSource, readHeadingProjection } from '../markdown/parser.js';
+import { createSlugTracker } from '../markdown/slugify.js';
+const markdown = createMarkdownIt({
     highlight(code, language) {
         const normalizedLanguage = (language || 'text').toLowerCase();
         const highlighted = highlightSource(code, normalizedLanguage);
         return `<pre class="code-viewer"><code class="hljs language-${normalizedLanguage}">${highlighted}</code></pre>`;
     }
 });
+const renderHeadingOpen = markdown.renderer.rules.heading_open;
+markdown.renderer.rules.heading_open = (...args) => {
+    const tokens = args[0];
+    const index = args[1];
+    const options = args[2];
+    const environment = args[3] ?? {};
+    const self = args[4];
+    const nextSlug = typeof environment.nextSlug === 'function'
+        ? environment.nextSlug
+        : createSlugTracker();
+    environment.nextSlug = nextSlug;
+    const heading = readHeadingProjection(tokens, index, nextSlug);
+    const token = tokens[index];
+    if (heading) {
+        token.attrSet?.('id', heading.id);
+        token.attrSet?.('data-heading-id', heading.id);
+    }
+    if (typeof renderHeadingOpen === 'function') {
+        return renderHeadingOpen(...args);
+    }
+    return self.renderToken(tokens, index, options);
+};
+const renderLinkOpen = markdown.renderer.rules.link_open;
+markdown.renderer.rules.link_open = (...args) => {
+    const tokens = args[0];
+    const index = args[1];
+    const options = args[2];
+    const self = args[4];
+    const token = tokens[index];
+    token.attrSet?.('data-markdown-link', 'true');
+    const title = token.attrGet?.('title');
+    if (title?.startsWith('mcp-wiki:')) {
+        const rawWikiLink = decodeURIComponent(title.slice('mcp-wiki:'.length));
+        token.attrSet?.('data-wiki-link', rawWikiLink);
+        if (Array.isArray(token.attrs)) {
+            token.attrs = token.attrs.filter(([name]) => name !== 'title');
+        }
+    }
+    if (typeof renderLinkOpen === 'function') {
+        return renderLinkOpen(...args);
+    }
+    return self.renderToken(tokens, index, options);
+};
 export function renderMarkdown(content) {
-    return markdown.render(content);
+    return markdown.render(prepareMarkdownSource(content), { nextSlug: createSlugTracker() });
 }

package/dist/ui/file-preview/src/directory-controller.d.ts

@@ -0,0 +1,8 @@
+import type { RenderBodyResult, RenderPayload } from './model.js';
+export declare function renderDirectoryBody(content: string, rootPath: string): RenderBodyResult;
+export declare function attachDirectoryHandlers(options: {
+    container: HTMLElement;
+    callTool?: (name: string, args: Record<string, unknown>) => Promise<unknown | undefined>;
+    buildOpenInFolderCommand: (filePath: string) => string | undefined;
+    onOpenPayload: (payload: RenderPayload) => void;
+}): void;