collabmd 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "description": "Collaborative markdown vault — like Obsidian, but online. Serve any directory of markdown files for realtime collaborative editing.",
   "repository": {
@@ -63,7 +63,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/autocomplete": "^6.20.2",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-yaml": "^6.1.3",
@@ -72,23 +72,23 @@
     "@codemirror/search": "^6.7.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.41.1",
-    "@excalidraw/excalidraw": "0.18.0-b1c6bfc",
+    "@codemirror/view": "^6.42.1",
+    "@excalidraw/excalidraw": "0.18.0-0457ac9",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@turbodocx/html-to-docx": "^1.20.1",
-    "archiver": "^7.0.1",
+    "archiver": "^8.0.0",
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.1",
     "lib0": "^0.2.117",
-    "lit-html": "^3.3.2",
+    "lit-html": "^3.3.3",
     "markdown-it": "^14.1.1",
-    "mermaid": "^11.14.0",
+    "mermaid": "^11.15.0",
     "openid-client": "^6.8.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "sharp": "^0.34.5",
-    "ws": "^8.20.0",
+    "ws": "^8.20.1",
     "y-codemirror.next": "^0.3.5",
     "y-protocols": "^1.0.7",
     "y-websocket": "^3.0.0",
@@ -101,12 +101,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
-    "@vitest/browser": "^4.1.5",
-    "@vitest/browser-playwright": "^4.1.5",
+    "@playwright/test": "^1.60.0",
+    "@vitest/browser": "^4.1.6",
+    "@vitest/browser-playwright": "^4.1.6",
     "eslint": "^10.3.0",
     "globals": "^17.6.0",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5"
+    "vite": "^8.0.13",
+    "vitest": "^4.1.6"
   }
 }

package/src/client/application/mermaid-preview-hydrator.js

@@ -188,8 +188,10 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   configureMermaid(mermaid) {
     mermaid.initialize({
       startOnLoad: false,
+      htmlLabels: false,
       flowchart: {
         defaultRenderer: 'dagre-wrapper',
+        htmlLabels: false,
         useMaxWidth: true,
       },
       class: {
@@ -259,6 +261,18 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     console.warn('[preview] Mermaid runtime failed to load:', error);
   }
 
+  createRenderHost() {
+    const renderHost = document.createElement('div');
+    renderHost.style.position = 'fixed';
+    renderHost.style.left = '-10000px';
+    renderHost.style.top = '0';
+    renderHost.style.width = '1200px';
+    renderHost.style.visibility = 'hidden';
+    renderHost.style.pointerEvents = 'none';
+    document.body.appendChild(renderHost);
+    return renderHost;
+  }
+
   async hydrateShell(shell, mermaid) {
     if (!mermaid || !shell?.isConnected || this.isShellHydrated(shell)) {
       return;
@@ -302,15 +316,20 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         diagram.setAttribute('data-source-line-end', sourceLineEnd);
       }
       diagram.textContent = source;
-      shell.appendChild(diagram);
 
-      await mermaid.run({ nodes: [diagram] });
-      if (!diagram.isConnected || shell !== diagram.parentElement) {
-        return;
-      }
+      const renderHost = this.createRenderHost();
+      try {
+        renderHost.appendChild(diagram);
+        await mermaid.run({ nodes: [diagram] });
+        if (!diagram.isConnected || diagram.parentElement !== renderHost || !shell.isConnected) {
+          return;
+        }
 
-      this.enhanceDiagram(shell, diagram);
-      this.markShellHydrated(shell);
+        this.enhanceDiagram(shell, diagram);
+        this.markShellHydrated(shell);
+      } finally {
+        renderHost.remove();
+      }
     } catch (error) {
       console.warn('[preview] Mermaid render failed:', error);
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
@@ -443,7 +462,6 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       renderedDiagram.remove();
       return;
     }
-
     const toolbar = document.createElement('div');
     toolbar.className = 'mermaid-toolbar diagram-preview-toolbar';
     const leftGroup = document.createElement('div');

package/src/client/application/preview-renderer.js

@@ -133,7 +133,12 @@ export class PreviewRenderer {
     }
 
     Array.from(this.previewElement.children).forEach((child) => {
-      if (child === renderHost || child.dataset.excalidrawOverlayRoot === 'true' || child.dataset.videoOverlayRoot === 'true') {
+      if (
+        child === renderHost
+        || child.dataset.drawioOverlayRoot === 'true'
+        || child.dataset.excalidrawOverlayRoot === 'true'
+        || child.dataset.videoOverlayRoot === 'true'
+      ) {
         return;
       }
 

package/src/client/application/quick-switcher-loader.js

@@ -22,10 +22,24 @@ export async function ensureQuickSwitcherInstance(host) {
   if (!host.quickSwitcher) {
     host.quickSwitcher = new QuickSwitcherController({
       getFileList: () => host.fileExplorer.flatFiles,
+      getSearchConfig: () => host.runtimeConfig.search ?? {},
       onFileSelect: (filePath) => host.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
         revealInTree: true,
       }),
+      onTextMatchSelect: (match) => {
+        if (!match?.file) {
+          return;
+        }
+
+        host.navigation.navigateToFile(match.file, {
+          column: match.column,
+          drawioMode: match.kind === 'drawio' ? 'text' : null,
+          line: match.line,
+          matchLength: match.matchLength,
+        });
+      },
+      searchText: (payload) => host.vaultApiClient.searchText(payload),
     });
   }
 

package/src/client/application/workspace-route-controller.js

@@ -127,6 +127,7 @@ export class WorkspaceRouteController {
 
     this.setSidebarTab('files');
     await this.openFile(route.filePath, { drawioMode: route.drawioMode || null });
+    this.revealEditorMatch(route);
     this.requestPreviewRouteAnchor?.(route.anchor ?? null, route.filePath);
   }
 
@@ -311,6 +312,19 @@ export class WorkspaceRouteController {
     this.fileExplorer.revealFile?.(filePath, { clearSearch });
   }
 
+  revealEditorMatch(route = {}) {
+    if (!Number.isFinite(route.line)) {
+      return false;
+    }
+
+    const session = this.workspaceCoordinator.getSession?.();
+    return session?.revealSearchMatch?.({
+      column: route.column,
+      length: route.matchLength,
+      line: route.line,
+    }) ?? session?.scrollToLine?.(route.line, 0.2) ?? false;
+  }
+
   resetPreviewSurface() {
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);

package/src/client/domain/drawio-frame-load.js

@@ -0,0 +1,28 @@
+export function createDrawioFrameLoadPayload({
+  currentTheme = 'dark',
+  currentXml = '',
+  isEditor = false,
+  isExportImageMode = false,
+} = {}) {
+  const theme = currentTheme === 'light' ? 'simple' : 'dark';
+  return {
+    autosave: isEditor && !isExportImageMode ? 1 : 0,
+    dark: currentTheme === 'dark' ? 1 : 0,
+    modified: 'unsavedChanges',
+    noExitBtn: 1,
+    noSaveBtn: isExportImageMode ? 1 : (isEditor ? 0 : 1),
+    saveAndExit: 0,
+    theme,
+    xml: String(currentXml || ''),
+  };
+}
+
+export function createDrawioFrameLoadSignature(payload = {}) {
+  return JSON.stringify({
+    autosave: payload.autosave ?? 0,
+    dark: payload.dark ?? 0,
+    noSaveBtn: payload.noSaveBtn ?? 1,
+    theme: payload.theme ?? 'dark',
+    xml: String(payload.xml ?? ''),
+  });
+}

package/src/client/domain/excalidraw-collaboration.js

@@ -138,6 +138,56 @@ export function buildCollaboratorsMap(awareness) {
   return collaborators;
 }
 
+export function buildRenderableCollaboratorsMap(collaborators) {
+  const renderable = new Map();
+  if (!(collaborators instanceof Map)) {
+    return renderable;
+  }
+
+  collaborators.forEach((collaborator, key) => {
+    if (!collaborator?.isCurrentUser) {
+      renderable.set(key, collaborator);
+    }
+  });
+
+  return renderable;
+}
+
+function serializeCollaboratorForRenderSignature(key, collaborator = {}) {
+  const pointer = collaborator.pointer || {};
+  const viewport = collaborator.viewport || {};
+  const selectedElementIds = collaborator.selectedElementIds && typeof collaborator.selectedElementIds === 'object'
+    ? Object.keys(collaborator.selectedElementIds).sort()
+    : [];
+
+  return [
+    key,
+    collaborator.button || 'up',
+    collaborator.color?.background || '',
+    collaborator.color?.stroke || '',
+    collaborator.id || '',
+    pointer.tool || '',
+    pointer.x ?? null,
+    pointer.y ?? null,
+    selectedElementIds,
+    collaborator.socketId || '',
+    collaborator.username || '',
+    viewport.scrollX ?? null,
+    viewport.scrollY ?? null,
+    viewport.zoom ?? null,
+  ];
+}
+
+export function getCollaboratorsRenderSignature(collaborators) {
+  if (!(collaborators instanceof Map) || collaborators.size === 0) {
+    return '';
+  }
+
+  return JSON.stringify([...collaborators.entries()]
+    .sort(([leftKey], [rightKey]) => String(leftKey).localeCompare(String(rightKey)))
+    .map(([key, collaborator]) => serializeCollaboratorForRenderSignature(key, collaborator)));
+}
+
 export function findCollaboratorByPeerId(collaborators, peerId) {
   if (!(collaborators instanceof Map) || !peerId) {
     return null;

package/src/client/domain/excalidraw-scene-reconcile.js

@@ -0,0 +1,38 @@
+export function buildReconciledExcalidrawSceneUpdate({
+  appStateOverrides = {},
+  currentAppState,
+  currentElements = [],
+  documentViewState = {},
+  includeUnchangedAppState = false,
+  reconcileElementsFn,
+  restoreAppStateFn,
+  restoreElementsFn,
+  scene,
+  theme = 'dark',
+} = {}) {
+  const restoredElements = restoreElementsFn(scene?.elements || [], currentElements, {
+    repairBindings: true,
+  });
+  const restoredAppState = restoreAppStateFn(scene?.appState || {}, currentAppState);
+  const nextAppState = {
+    theme,
+    viewBackgroundColor: restoredAppState.viewBackgroundColor ?? '#ffffff',
+    gridSize: restoredAppState.gridSize ?? null,
+    ...documentViewState,
+    ...appStateOverrides,
+  };
+  const appStateUpdate = Object.fromEntries(
+    Object.entries(nextAppState).filter(([key, value]) => (
+      includeUnchangedAppState || currentAppState?.[key] !== value
+    )),
+  );
+  const update = {
+    elements: reconcileElementsFn(currentElements, restoredElements, currentAppState),
+  };
+
+  if (Object.keys(appStateUpdate).length > 0) {
+    update.appState = appStateUpdate;
+  }
+
+  return update;
+}

package/src/client/domain/hash-routes.js

@@ -34,7 +34,13 @@ export function isCollabMdHashRoute(hash = '') {
   return Object.values(HASH_ROUTE_KEYS).some((key) => params.has(key));
 }
 
-export function createFileRouteHash(filePath, { drawioMode = null, anchor = null } = {}) {
+export function createFileRouteHash(filePath, {
+  anchor = null,
+  column = null,
+  drawioMode = null,
+  line = null,
+  matchLength = null,
+} = {}) {
   const params = new URLSearchParams();
   if (filePath) {
     params.set(HASH_ROUTE_KEYS.file, filePath);
@@ -45,5 +51,14 @@ export function createFileRouteHash(filePath, { drawioMode = null, anchor = null
   if (anchor) {
     params.set('anchor', String(anchor).trim());
   }
+  if (line != null) {
+    params.set('line', String(Math.max(1, Math.round(Number(line) || 1))));
+  }
+  if (column != null) {
+    params.set('column', String(Math.max(1, Math.round(Number(column) || 1))));
+  }
+  if (matchLength != null) {
+    params.set('matchLength', String(Math.max(0, Math.round(Number(matchLength) || 0))));
+  }
   return params.toString();
 }

package/src/client/domain/mermaid-language.js

@@ -0,0 +1,179 @@
+import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';
+
+const DIAGRAM_DECLARATIONS = new Set([
+  'block-beta',
+  'classdiagram',
+  'erdiagram',
+  'flowchart',
+  'gantt',
+  'gitgraph',
+  'graph',
+  'journey',
+  'mindmap',
+  'pie',
+  'quadrantchart',
+  'sankey-beta',
+  'sequencediagram',
+  'statediagram',
+  'statediagram-v2',
+  'timeline',
+  'xychart-beta',
+]);
+
+const KEYWORDS = new Set([
+  'accdescr',
+  'acctitle',
+  'actor',
+  'alt',
+  'and',
+  'autonumber',
+  'break',
+  'callback',
+  'class',
+  'classdef',
+  'click',
+  'critical',
+  'dateformat',
+  'direction',
+  'else',
+  'end',
+  'exclude',
+  'include',
+  'interpolate',
+  'link',
+  'linkstyle',
+  'loop',
+  'note',
+  'opt',
+  'par',
+  'participant',
+  'rect',
+  'section',
+  'state',
+  'style',
+  'subgraph',
+  'theme',
+  'title',
+]);
+
+const BOOLEAN_LITERALS = new Set([
+  'false',
+  'no',
+  'off',
+  'on',
+  'true',
+  'yes',
+]);
+
+const FLOW_DIRECTIONS = new Set([
+  'bt',
+  'lr',
+  'rl',
+  'tb',
+  'td',
+]);
+
+function readWord(stream) {
+  const match = stream.match(/[A-Za-z_][\w.]*(?:-[A-Za-z0-9_][\w.]*)*/u, false);
+  if (!match) {
+    return '';
+  }
+
+  stream.match(/[A-Za-z_][\w.]*(?:-[A-Za-z0-9_][\w.]*)*/u);
+  return match[0];
+}
+
+function readDirective(stream) {
+  if (!stream.match('%%{')) {
+    return false;
+  }
+
+  if (stream.skipTo('}%%')) {
+    stream.match('}%%');
+  } else {
+    stream.skipToEnd();
+  }
+
+  return true;
+}
+
+const mermaidStreamLanguage = StreamLanguage.define({
+  languageData: {
+    commentTokens: {
+      line: '%%',
+    },
+  },
+  token(stream) {
+    if (stream.eatSpace()) {
+      return null;
+    }
+
+    if (readDirective(stream)) {
+      return 'meta';
+    }
+
+    if (stream.match('%%')) {
+      stream.skipToEnd();
+      return 'comment';
+    }
+
+    if (stream.match(/"(?:[^"\\]|\\.)*"?/u) || stream.match(/'(?:[^'\\]|\\.)*'?/u)) {
+      return 'string';
+    }
+
+    if (stream.match(/#[0-9a-f]{3,8}\b/iu) || stream.match(/#[A-Za-z][\w-]*/u)) {
+      return 'atom';
+    }
+
+    if (stream.match(/\b\d+(?:\.\d+)?%?\b/u)) {
+      return 'number';
+    }
+
+    if (stream.match(/[ox*+<#]?[-=.\\/]+(?:left|right|up|down)?[-=.\\/]*[ox*+>#]?/iu)) {
+      return 'operator';
+    }
+
+    if (stream.match(/[{}[\]():,;|]/u)) {
+      return 'punctuation';
+    }
+
+    const word = readWord(stream);
+    if (word) {
+      const normalized = word.toLowerCase();
+
+      if (DIAGRAM_DECLARATIONS.has(normalized)) {
+        return 'meta';
+      }
+
+      if (KEYWORDS.has(normalized)) {
+        return 'keyword';
+      }
+
+      if (BOOLEAN_LITERALS.has(normalized)) {
+        return 'bool';
+      }
+
+      if (FLOW_DIRECTIONS.has(normalized)) {
+        return 'atom';
+      }
+
+      if (/^[A-Z][A-Z0-9_]*$/u.test(word)) {
+        return 'typeName';
+      }
+
+      return 'variableName';
+    }
+
+    stream.next();
+    return null;
+  },
+});
+
+export const mermaidLanguage = new LanguageSupport(mermaidStreamLanguage);
+
+export const mermaidLanguageDescription = LanguageDescription.of({
+  alias: ['mermaid', 'mmd'],
+  extensions: ['mermaid', 'mmd'],
+  name: 'Mermaid',
+  support: mermaidLanguage,
+});

package/src/client/domain/runtime-paths.js

@@ -79,6 +79,13 @@ export function getClientRuntimeConfig() {
     environment: 'development',
     gitEnabled: true,
     publicWsBaseUrl: '',
+    search: {
+      available: false,
+      backend: 'ripgrep',
+      minQueryLength: 2,
+      unavailableReason: 'ripgrep search is unavailable',
+      version: '',
+    },
     wikiLinkAutoCreate: true,
     wsBasePath: '/ws',
     ...(window.__COLLABMD_CONFIG__ ?? {}),

package/src/client/drawio-editor.js

@@ -1,6 +1,10 @@
 import './styles/surfaces/embedded-editor-base.css';
 import './styles/surfaces/drawio-editor.css';
 
+import {
+  createDrawioFrameLoadPayload,
+  createDrawioFrameLoadSignature,
+} from './domain/drawio-frame-load.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
 import { DrawioLeaseClient } from './infrastructure/drawio-lease-client.js';
@@ -30,6 +34,7 @@ let drawioFrameBootTimer = null;
 let drawioMessageHandler = null;
 let saveTimer = null;
 let pendingSaveXml = null;
+let lastFrameLoadSignature = '';
 let lastSavedVersion = 0;
 let hasPostedReadyToParent = false;
 let exportRequested = false;
@@ -144,6 +149,7 @@ function teardownDrawioFrame() {
   drawioFrame?.remove();
   drawioFrame = null;
   drawioFrameReady = false;
+  lastFrameLoadSignature = '';
   hasPostedReadyToParent = false;
   exportRequested = false;
 }
@@ -161,26 +167,33 @@ function buildDrawioFrameUrl() {
 
 function postAction(action, payload = {}) {
   if (!drawioFrame?.contentWindow) {
-    return;
+    return false;
   }
 
   drawioFrame.contentWindow.postMessage(JSON.stringify({
     action,
     ...payload,
   }), '*');
+  return true;
 }
 
 function loadDiagramIntoFrame() {
-  postAction('load', {
-    autosave: state.isEditor && !isExportImageMode ? 1 : 0,
-    dark: currentTheme === 'dark' ? 1 : 0,
-    modified: 'unsavedChanges',
-    noExitBtn: isExportImageMode ? 1 : 1,
-    noSaveBtn: isExportImageMode ? 1 : (state.isEditor ? 0 : 1),
-    saveAndExit: isExportImageMode ? 0 : 0,
-    theme: currentTheme === 'light' ? 'simple' : 'dark',
-    xml: currentXml || '',
+  const payload = createDrawioFrameLoadPayload({
+    currentTheme,
+    currentXml,
+    isEditor: state.isEditor,
+    isExportImageMode,
   });
+  const signature = createDrawioFrameLoadSignature(payload);
+  if (signature === lastFrameLoadSignature) {
+    return false;
+  }
+
+  const posted = postAction('load', payload);
+  if (posted) {
+    lastFrameLoadSignature = signature;
+  }
+  return posted;
 }
 
 function updateFrameMode() {