collabmd 0.1.39 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.39",
+  "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": {
@@ -72,23 +72,23 @@
     "@codemirror/search": "^6.7.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.42.0",
-    "@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/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/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() {

package/src/client/excalidraw-editor.js

@@ -70,6 +70,7 @@ let apiStateCleanupCallbacks = [];
 let collaboratorRenderFrame = 0;
 let queuedCollaborators = null;
 let initialViewportFitPending = true;
+let previewViewportFitTimerId = 0;
 let roomClient = null;
 let roomClientGeneration = 0;
 let reactRoot = null;
@@ -85,6 +86,10 @@ function getDocumentViewState(mode = currentDocument.mode) {
   };
 }
 
+function applyDocumentMode(mode = currentDocument.mode) {
+  document.body.dataset.documentMode = normalizeDocumentMode(mode);
+}
+
 function createRoomClient(filePath) {
   const generation = ++roomClientGeneration;
   const client = new ExcalidrawRoomClient({
@@ -565,8 +570,17 @@ function getSceneElementsForPreviewFit() {
   );
 }
 
-function scheduleInitialViewportFit() {
-  if (!initialViewportFitPending || !excalidrawAPI) {
+function scheduleViewportFit({
+  delayMs = 0,
+  forcePreview = false,
+  consumeInitialFit = false,
+} = {}) {
+  const normalizedMode = normalizeDocumentMode(currentDocument.mode);
+  if (!excalidrawAPI || (forcePreview && normalizedMode !== 'preview')) {
+    return;
+  }
+
+  if (!forcePreview && !initialViewportFitPending) {
     return;
   }
 
@@ -574,22 +588,55 @@ function scheduleInitialViewportFit() {
   if (elements.length === 0) {
     return;
   }
-  initialViewportFitPending = false;
+  if (consumeInitialFit) {
+    initialViewportFitPending = false;
+  }
 
-  requestAnimationFrame(() => {
+  if (previewViewportFitTimerId) {
+    window.clearTimeout(previewViewportFitTimerId);
+  }
+
+  previewViewportFitTimerId = window.setTimeout(() => {
+    previewViewportFitTimerId = 0;
     requestAnimationFrame(() => {
-      if (!excalidrawAPI) {
-        return;
-      }
+      requestAnimationFrame(() => {
+        if (!excalidrawAPI) {
+          return;
+        }
+
+        const latestElements = getSceneElementsForPreviewFit();
+        if (latestElements.length === 0) {
+          return;
+        }
+
+        if (forcePreview) {
+          suppressViewportBroadcast = true;
+        }
+
+        excalidrawAPI.scrollToContent(latestElements, {
+          animate: false,
+          fitToViewport: true,
+          maxZoom: 2,
+          viewportZoomFactor: normalizedMode === 'preview' ? 0.92 : 0.88,
+        });
 
-      excalidrawAPI.scrollToContent(elements, {
-        animate: false,
-        fitToViewport: true,
-        maxZoom: 2,
-        viewportZoomFactor: normalizeDocumentMode(currentDocument.mode) === 'preview' ? 0.92 : 0.88,
+        if (forcePreview) {
+          releaseViewportBroadcastSuppressionAfterPaint();
+        }
       });
     });
-  });
+  }, delayMs);
+}
+
+function scheduleInitialViewportFit() {
+  scheduleViewportFit({ consumeInitialFit: true });
+}
+
+function schedulePreviewViewportFit() {
+  scheduleViewportFit({ forcePreview: true, delayMs: 80 });
+  window.setTimeout(() => {
+    scheduleViewportFit({ forcePreview: true });
+  }, 240);
 }
 
 function syncLocalViewportToRoom() {
@@ -801,6 +848,11 @@ window.addEventListener('message', (event) => {
     return;
   }
 
+  if (message.type === 'fit-preview-viewport') {
+    schedulePreviewViewportFit();
+    return;
+  }
+
   if (message.type === 'prepare-disconnect') {
     void (async () => {
       await prepareRealtimeRoomDisconnect();
@@ -892,6 +944,7 @@ async function init() {
 
   try {
     applySurfaceTheme(currentTheme);
+    applyDocumentMode();
     await ensureClientAuthenticated();
     const initialScene = await connectDocumentClient(currentDocument.filePath);
     if (!initialScene) {

package/src/client/infrastructure/editor-session.js

@@ -218,6 +218,10 @@ export class EditorSession {
     return this.viewAdapter.scrollToLine(lineNumber, viewportRatio);
   }
 
+  revealSearchMatch(match) {
+    return this.viewAdapter.revealSearchMatch(match);
+  }
+
   getUserCursor(clientId) {
     return this.collaborationClient.getUserCursor(
       clientId,

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

@@ -851,6 +851,36 @@ export class EditorViewAdapter {
     return true;
   }
 
+  revealSearchMatch({ column = 1, length = 0, line = 1 } = {}) {
+    const state = this.editorView?.state;
+    if (!state || !this.editorView) {
+      return false;
+    }
+
+    const targetLineNumber = Math.min(
+      Math.max(Math.round(Number(line) || 1), 1),
+      state.doc.lines,
+    );
+    const targetLine = state.doc.line(targetLineNumber);
+    const columnOffset = Math.min(
+      Math.max(Math.round(Number(column) || 1) - 1, 0),
+      targetLine.length,
+    );
+    const from = targetLine.from + columnOffset;
+    const to = Math.min(
+      from + Math.max(Math.round(Number(length) || 0), 0),
+      targetLine.to,
+    );
+
+    this.editorView.dispatch({
+      scrollIntoView: true,
+      selection: EditorSelection.range(from, Math.max(to, from)),
+    });
+    this.editorView.focus();
+    this.scrollToLine(targetLineNumber, 0.2);
+    return true;
+  }
+
   scrollToPosition(position, alignment = 'center') {
     const state = this.editorView?.state;
     const scroller = this.editorView?.scrollDOM;

package/src/client/infrastructure/runtime-config.js

@@ -76,8 +76,11 @@ export function getHashRoute() {
   if (params.has(HASH_ROUTE_KEYS.file)) {
     return {
       anchor: params.get('anchor') || null,
+      column: params.has('column') ? Number(params.get('column')) || null : null,
       drawioMode: params.get('drawio') || null,
       filePath: params.get(HASH_ROUTE_KEYS.file),
+      line: params.has('line') ? Number(params.get('line')) || null : null,
+      matchLength: params.has('matchLength') ? Number(params.get('matchLength')) || null : null,
       type: 'file',
     };
   }
@@ -85,8 +88,20 @@ export function getHashRoute() {
   return { type: 'empty' };
 }
 
-export function navigateToFile(filePath, { drawioMode = null, anchor = null } = {}) {
-  window.location.hash = createFileRouteHash(filePath, { drawioMode, anchor });
+export function navigateToFile(filePath, {
+  anchor = null,
+  column = null,
+  drawioMode = null,
+  line = null,
+  matchLength = null,
+} = {}) {
+  window.location.hash = createFileRouteHash(filePath, {
+    anchor,
+    column,
+    drawioMode,
+    line,
+    matchLength,
+  });
 }
 
 export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {

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

@@ -87,6 +87,17 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async searchText({ limit = 50, query = '', signal = null } = {}) {
+    const searchParams = new URLSearchParams({
+      limit: String(limit),
+      q: String(query ?? ''),
+    });
+    const response = await fetch(resolveApiUrl(`/search?${searchParams.toString()}`), {
+      signal,
+    });
+    return parseApiResponse(response, 'Failed to search files');
+  }
+
   async queryBase({
     activeFilePath = '',
     path = '',

package/src/client/presentation/app-shell-template.js

@@ -618,6 +618,10 @@ export function appShellTemplate() {
 
     <div class="qs-overlay" id="quickSwitcher">
       <div class="qs-modal">
+        <div class="qs-mode-tabs" role="tablist" aria-label="Search mode">
+          <button class="qs-mode-tab active" type="button" role="tab" aria-selected="true" data-qs-mode="files">Files</button>
+          <button class="qs-mode-tab" type="button" role="tab" aria-selected="false" data-qs-mode="text">Text</button>
+        </div>
         <div class="qs-input-wrap">
           <svg class="qs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
             <circle cx="11" cy="11" r="8"></circle>