collabmd 0.1.18 → 0.1.20

package/src/client/infrastructure/editor-view-adapter.js

@@ -11,9 +11,10 @@ import {
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorSelection, EditorState } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
+  Decoration,
   EditorView,
   crosshairCursor,
   drawSelection,
@@ -30,8 +31,41 @@ import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
 import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantuml-language.js';
+import { handleImagePasteEvent } from './editor-paste-utils.js';
 
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
+const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
+const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
+
+function isBracketBeforeCaret(range, state) {
+  return state.selection.ranges.some((selectionRange) =>
+    selectionRange.empty && range.to === selectionRange.head
+  );
+}
+
+function renderBracketMatch(match, state) {
+  const decorations = [];
+
+  if (!match.matched) {
+    decorations.push(nonmatchingBracketMark.range(match.start.from, match.start.to));
+    if (match.end) {
+      decorations.push(nonmatchingBracketMark.range(match.end.from, match.end.to));
+    }
+    return decorations;
+  }
+
+  const shouldHideStartBracket = isBracketBeforeCaret(match.start, state);
+  const shouldHideEndBracket = match.end ? isBracketBeforeCaret(match.end, state) : false;
+
+  if (!shouldHideStartBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.start.from, match.start.to));
+  }
+  if (match.end && !shouldHideEndBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.end.from, match.end.to));
+  }
+
+  return decorations;
+}
 
 function createEditorTheme(theme) {
   const activeLineBackground = theme === 'dark'
@@ -46,6 +80,21 @@ function createEditorTheme(theme) {
   const selectionBorder = theme === 'dark'
     ? 'oklch(from var(--color-primary) l c h / 0.65)'
     : 'oklch(from var(--color-primary) l c h / 0.5)';
+  const caretColor = theme === 'dark'
+    ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+    : 'color-mix(in oklab, var(--color-primary) 84%, black)';
+  const bracketPairBackground = theme === 'dark'
+    ? 'oklch(from var(--color-primary) l c h / 0.2)'
+    : 'oklch(from var(--color-primary) l c h / 0.12)';
+  const bracketPairOutline = theme === 'dark'
+    ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.85)'
+    : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.7)';
+  const nonmatchingBracketBackground = theme === 'dark'
+    ? 'oklch(from var(--color-error) l c h / 0.12)'
+    : 'oklch(from var(--color-error) l c h / 0.1)';
+  const nonmatchingBracketOutline = theme === 'dark'
+    ? 'oklch(from var(--color-error) calc(l + 0.08) c h / 0.8)'
+    : 'oklch(from var(--color-error) calc(l - 0.04) c h / 0.7)';
 
   return EditorView.theme({
     '&': {
@@ -53,13 +102,14 @@ function createEditorTheme(theme) {
       color: 'var(--color-text)',
     },
     '.cm-content': {
-      caretColor: 'var(--color-primary)',
+      caretColor,
       fontFamily: 'var(--font-mono)',
       padding: '16px 0',
     },
     '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: 'var(--color-primary)',
-      borderLeftWidth: '2px',
+      borderLeftColor: caretColor,
+      borderLeftWidth: '3px',
+      marginLeft: '-1px',
     },
     '.cm-foldPlaceholder': {
       backgroundColor: 'var(--color-surface-dynamic)',
@@ -85,8 +135,17 @@ function createEditorTheme(theme) {
       color: 'var(--color-text-muted)',
     },
     '.cm-matchingBracket': {
-      backgroundColor: 'var(--color-primary-highlight)',
-      outline: '1px solid var(--color-primary)',
+      borderRadius: '2px',
+      color: 'inherit',
+    },
+    '.cm-matchingBracket.cm-matchingBracket-paired': {
+      backgroundColor: bracketPairBackground,
+      outline: `1px solid ${bracketPairOutline}`,
+    },
+    '.cm-nonmatchingBracket': {
+      backgroundColor: nonmatchingBracketBackground,
+      outline: `1px solid ${nonmatchingBracketOutline}`,
+      borderRadius: '2px',
     },
     '.cm-selectionMatch': {
       backgroundColor: 'var(--color-primary-highlight)',
@@ -127,6 +186,7 @@ export class EditorViewAdapter {
     lineInfoElement,
     lineWrappingEnabled = true,
     onDocChanged = null,
+    onImagePaste = null,
     onSelectionChanged = null,
     onViewportChanged = null,
   }) {
@@ -136,6 +196,7 @@ export class EditorViewAdapter {
     this.lineInfoElement = lineInfoElement;
     this.lineWrappingEnabled = lineWrappingEnabled;
     this.onDocChanged = onDocChanged;
+    this.onImagePaste = onImagePaste;
     this.onSelectionChanged = onSelectionChanged;
     this.onViewportChanged = onViewportChanged;
     this.editorView = null;
@@ -188,7 +249,7 @@ export class EditorViewAdapter {
           EditorState.allowMultipleSelections.of(true),
           indentOnInput(),
           syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching(),
+          bracketMatching({ renderMatch: renderBracketMatch }),
           closeBrackets(),
           autocompletion({
             override: [wikiLinkCompletions(this.getFileList)],
@@ -208,6 +269,9 @@ export class EditorViewAdapter {
           EditorView.contentAttributes.of({
             'aria-label': 'Markdown editor',
           }),
+          Prec.highest(EditorView.domEventHandlers({
+            paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
+          })),
           createLanguageExtension(filePath),
           this.themeCompartment.of(createEditorTheme(this.initialTheme)),
           this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
@@ -561,6 +625,33 @@ export class EditorViewAdapter {
     return true;
   }
 
+  insertText(text) {
+    if (!this.editorView) {
+      return false;
+    }
+
+    const insertValue = String(text ?? '');
+    const { state } = this.editorView;
+    const range = state.selection.main;
+    const anchor = range.from + insertValue.length;
+
+    this.editorView.dispatch({
+      changes: {
+        from: range.from,
+        insert: insertValue,
+        to: range.to,
+      },
+      scrollIntoView: true,
+      selection: {
+        anchor,
+        head: anchor,
+      },
+      userEvent: 'input',
+    });
+    this.editorView.focus();
+    return true;
+  }
+
   updateCursorInfo(state) {
     if (!this.lineInfoElement) {
       return;

package/src/client/infrastructure/vault-api-client.js

@@ -1,5 +1,9 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
+function encodeHeaderMetadata(value) {
+  return encodeURIComponent(String(value ?? ''));
+}
+
 async function parseApiResponse(response, fallbackError) {
   const data = await response.json().catch(() => ({}));
   if (!response.ok || data.ok === false) {
@@ -56,6 +60,19 @@ export class VaultApiClient {
     });
     return parseApiResponse(response, 'Failed to create folder');
   }
+
+  async uploadImageAttachment({ file, fileName = '', sourcePath }) {
+    const response = await fetch(resolveApiUrl('/attachments'), {
+      body: file,
+      headers: {
+        'Content-Type': file?.type || 'application/octet-stream',
+        'X-CollabMD-File-Name': encodeHeaderMetadata(fileName),
+        'X-CollabMD-Source-Path': encodeHeaderMetadata(sourcePath),
+      },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to upload image');
+  }
 }
 
 export const vaultApiClient = new VaultApiClient();

package/src/client/presentation/backlinks-panel.js

@@ -2,62 +2,95 @@ import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 /**
- * BacklinksPanel — a collapsible panel below the preview showing
- * which files link to the currently open file ("Linked Mentions").
+ * BacklinksPanel — renders "Linked Mentions" for the current file.
  *
- * Each mention shows the source file name and the context line
- * containing the [[wiki link]]. Clicking a mention navigates to that file.
+ * Desktop uses a docked bottom-left panel outside the preview scroll flow.
+ * Mobile keeps an inline collapsible panel at the end of the preview content.
  */
 export class BacklinksPanel {
-  constructor({ panelElement, onFileSelect }) {
-    this.panel = panelElement;
+  constructor({
+    documentRef = document,
+    inlinePanelElement = null,
+    onFileSelect,
+    panelElement,
+  }) {
+    this.documentRef = documentRef;
+    this.panelRoot = panelElement;
+    this.inlinePanel = inlinePanelElement;
     this.onFileSelect = onFileSelect;
 
-    this.header = this.panel?.querySelector('.backlinks-header');
-    this.toggle = this.panel?.querySelector('.backlinks-toggle');
-    this.countBadge = this.panel?.querySelector('.backlinks-count');
-    this.body = this.panel?.querySelector('.backlinks-body');
-    this.list = this.panel?.querySelector('.backlinks-list');
-
     this._expanded = false;
     this._currentFile = null;
     this._fetchController = null;
     this._backlinks = [];
 
+    const desktopPanel = this.panelRoot?.querySelector('[data-backlinks-variant="dock"]') ?? this.panelRoot;
+    this.panels = [
+      this._createPanelRef(desktopPanel),
+      this._createPanelRef(this.inlinePanel),
+    ].filter(Boolean);
+
+    this.handleDocumentPointerDown = (event) => {
+      if (!this._expanded) {
+        return;
+      }
+
+      const target = event?.target;
+      if (target && this.panels.some(({ panel }) => panel?.contains?.(target))) {
+        return;
+      }
+
+      this.close();
+    };
+
+    this.handleDocumentKeyDown = (event) => {
+      if (!this._expanded || event?.key !== 'Escape') {
+        return;
+      }
+
+      event.preventDefault?.();
+      this.close();
+    };
+
     this.bindEvents();
   }
 
   bindEvents() {
-    this.header?.addEventListener('click', () => {
-      if (this._backlinks.length === 0) return;
-      this._expanded = !this._expanded;
-      this._applyExpandState();
-    });
+    this.panels.forEach((refs) => {
+      refs.header?.addEventListener('click', () => {
+        if (this._backlinks.length === 0) return;
+        this._expanded = !this._expanded;
+        this._applyExpandState();
+      });
 
-    this.header?.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
+      refs.header?.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+          return;
+        }
 
-      event.preventDefault();
-      this.header.click();
+        event.preventDefault();
+        refs.header.click();
+      });
     });
+
+    this.documentRef?.addEventListener?.('pointerdown', this.handleDocumentPointerDown);
+    this.documentRef?.addEventListener?.('keydown', this.handleDocumentKeyDown);
   }
 
-  /**
-   * Load backlinks for a file. Call on every file open and after
-   * content changes (debounced).
-   */
   async load(filePath) {
+    const fileChanged = filePath !== this._currentFile;
     this._currentFile = filePath;
 
+    if (fileChanged) {
+      this._expanded = false;
+    }
+
     if (!filePath) {
       this._backlinks = [];
       this._render();
       return;
     }
 
-    // Abort any in-flight fetch
     this._fetchController?.abort();
     this._fetchController = new AbortController();
 
@@ -68,7 +101,6 @@ export class BacklinksPanel {
       );
       const data = await response.json();
 
-      // Guard against stale responses (user switched files)
       if (this._currentFile !== filePath) return;
 
       this._backlinks = data.backlinks ?? [];
@@ -81,7 +113,6 @@ export class BacklinksPanel {
     this._render();
   }
 
-  /** Clear the panel (e.g. when navigating to empty state). */
   clear() {
     this._currentFile = null;
     this._backlinks = [];
@@ -89,100 +120,125 @@ export class BacklinksPanel {
     this._render();
   }
 
-  // --- Private ---
-
-  _render() {
-    if (!this.panel) return;
+  close() {
+    if (!this._expanded) {
+      return;
+    }
 
-    const count = this._backlinks.length;
-    const label = count === 1 ? '1 Linked Mention' : `${count} Linked Mentions`;
+    this._expanded = false;
+    this._applyExpandState();
+  }
 
-    if (this.countBadge) {
-      this.countBadge.textContent = count > 0 ? String(count) : '';
+  _createPanelRef(panel) {
+    if (!panel) {
+      return null;
     }
 
-    if (this.toggle) {
-      this.toggle.textContent = label;
-    }
+    return {
+      panel,
+      header: panel.querySelector('.backlinks-header'),
+      toggle: panel.querySelector('.backlinks-toggle'),
+      countBadge: panel.querySelector('.backlinks-count'),
+      body: panel.querySelector('.backlinks-body'),
+      list: panel.querySelector('.backlinks-list'),
+    };
+  }
 
-    // Hide entire panel when no current file
-    this.panel.classList.toggle('hidden', !this._currentFile);
+  _render() {
+    const count = this._backlinks.length;
+    const label = count === 1 ? 'Linked Mention' : 'Linked Mentions';
+    const shouldShow = Boolean(this._currentFile) && count > 0;
 
-    // Disable header click when 0 backlinks
-    this.header?.classList.toggle('backlinks-header-empty', count === 0);
+    this.panelRoot?.classList?.toggle('hidden', !shouldShow);
+    this.inlinePanel?.classList?.toggle('hidden', !shouldShow);
 
-    if (count === 0) {
+    if (!shouldShow) {
       this._expanded = false;
-      this._applyExpandState();
-      if (this.list) this.list.innerHTML = '';
-      return;
     }
 
-    this._renderList();
+    this.panels.forEach((refs) => {
+      refs.countBadge.textContent = shouldShow ? String(count) : '';
+      refs.toggle.textContent = label;
+      refs.header?.classList.toggle('backlinks-header-empty', !shouldShow);
+
+      if (!shouldShow) {
+        refs.list.innerHTML = '';
+      } else {
+        this._renderList(refs.list);
+      }
+    });
+
     this._applyExpandState();
   }
 
-  _renderList() {
-    if (!this.list) return;
-    this.list.innerHTML = '';
+  _renderList(listElement) {
+    if (!listElement) return;
+    listElement.innerHTML = '';
 
-    const fragment = document.createDocumentFragment();
+    const fragment = this.documentRef?.createDocumentFragment?.();
+    const target = fragment ?? listElement;
 
-    for (const backlink of this._backlinks) {
-      const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
-      const dirPath = backlink.file.includes('/')
-        ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
-        : '';
+    this._backlinks.forEach((backlink) => {
+      target.appendChild(this._createBacklinkItem(backlink));
+    });
 
-      const item = document.createElement('button');
-      item.type = 'button';
-      item.className = 'backlink-item';
-      item.addEventListener('click', () => {
-        this.onFileSelect?.(backlink.file);
-      });
+    if (fragment) {
+      listElement.appendChild(fragment);
+    }
+  }
 
-      // File name row
-      const nameRow = document.createElement('div');
-      nameRow.className = 'backlink-file-name';
-      nameRow.innerHTML = `
-        <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-        </svg>
-        <span>${escapeHtml(fileName)}</span>
-        ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
-      `;
-      item.appendChild(nameRow);
-
-      // Context snippets
-      for (const ctx of backlink.contexts.slice(0, 3)) {
-        const contextEl = document.createElement('div');
-        contextEl.className = 'backlink-context';
-        contextEl.textContent = ctx;
-        item.appendChild(contextEl);
-      }
+  _createBacklinkItem(backlink) {
+    const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
+    const dirPath = backlink.file.includes('/')
+      ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
+      : '';
+
+    const item = this.documentRef.createElement('button');
+    item.type = 'button';
+    item.className = 'backlink-item';
+    item.addEventListener('click', () => {
+      this.close();
+      this.onFileSelect?.(backlink.file);
+    });
 
-      if (backlink.contexts.length > 3) {
-        const more = document.createElement('div');
-        more.className = 'backlink-context backlink-more';
-        more.textContent = `+${backlink.contexts.length - 3} more`;
-        item.appendChild(more);
-      }
+    const nameRow = this.documentRef.createElement('div');
+    nameRow.className = 'backlink-file-name';
+    nameRow.innerHTML = `
+      <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+      </svg>
+      <span>${escapeHtml(fileName)}</span>
+      ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
+    `;
+    item.appendChild(nameRow);
+
+    backlink.contexts.slice(0, 3).forEach((ctx) => {
+      const contextElement = this.documentRef.createElement('div');
+      contextElement.className = 'backlink-context';
+      contextElement.textContent = ctx;
+      item.appendChild(contextElement);
+    });
 
-      fragment.appendChild(item);
+    if (backlink.contexts.length > 3) {
+      const moreElement = this.documentRef.createElement('div');
+      moreElement.className = 'backlink-context backlink-more';
+      moreElement.textContent = `+${backlink.contexts.length - 3} more`;
+      item.appendChild(moreElement);
     }
 
-    this.list.appendChild(fragment);
+    return item;
   }
 
   _applyExpandState() {
-    this.panel?.classList.toggle('expanded', this._expanded);
-    this.header?.setAttribute('aria-expanded', String(this._expanded));
-    this.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
-    this.body?.setAttribute('aria-hidden', String(!this._expanded));
-
-    if (this.body) {
-      this.body.toggleAttribute('inert', !this._expanded);
-    }
+    const expanded = this._expanded && this._backlinks.length > 0;
+
+    this.panels.forEach((refs) => {
+      refs.panel.classList.toggle('expanded', expanded);
+      refs.header?.setAttribute('aria-expanded', String(expanded));
+      refs.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
+      refs.body?.setAttribute('aria-hidden', String(!expanded));
+      refs.body?.toggleAttribute('inert', !expanded);
+    });
   }
 }

package/src/client/presentation/comment-markdown-renderer.js

@@ -0,0 +1,68 @@
+import markdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+
+import { escapeHtml } from '../domain/vault-utils.js';
+
+function renderToken(renderer, tokens, index, options, env, self) {
+  return renderer?.(tokens, index, options, env, self) ?? self.renderToken(tokens, index, options);
+}
+
+function renderPlainTextCommentHtml(text = '') {
+  const escaped = escapeHtml(String(text ?? ''));
+  return `<p>${escaped.replace(/\n/g, '<br>')}</p>`;
+}
+
+function createCommentMarkdownRenderer() {
+  const markdown = markdownIt({
+    breaks: true,
+    highlight(source, language) {
+      try {
+        if (language && hljs.getLanguage(language)) {
+          return hljs.highlight(source, {
+            ignoreIllegals: true,
+            language,
+          }).value;
+        }
+
+        return hljs.highlightAuto(source).value;
+      } catch {
+        return escapeHtml(source);
+      }
+    },
+    html: false,
+    linkify: true,
+    typographer: true,
+  });
+
+  const fallbackLinkOpen = markdown.renderer.rules.link_open;
+  const fallbackTableOpen = markdown.renderer.rules.table_open;
+  const fallbackTableClose = markdown.renderer.rules.table_close;
+
+  markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
+    tokens[index].attrSet('target', '_blank');
+    tokens[index].attrSet('rel', 'noopener noreferrer');
+    return renderToken(fallbackLinkOpen, tokens, index, options, env, self);
+  };
+
+  markdown.renderer.rules.table_open = (tokens, index, options, env, self) => (
+    `<div class="comment-markdown-table">${renderToken(fallbackTableOpen, tokens, index, options, env, self)}`
+  );
+
+  markdown.renderer.rules.table_close = (tokens, index, options, env, self) => (
+    `${renderToken(fallbackTableClose, tokens, index, options, env, self)}</div>`
+  );
+
+  return markdown;
+}
+
+const commentMarkdownRenderer = createCommentMarkdownRenderer();
+
+export function renderCommentMarkdownToHtml(markdownText = '') {
+  const normalizedMarkdown = String(markdownText ?? '');
+
+  try {
+    return commentMarkdownRenderer.render(normalizedMarkdown);
+  } catch {
+    return renderPlainTextCommentHtml(normalizedMarkdown);
+  }
+}