collabmd 0.1.46 → 0.1.48

package/src/client/domain/document-formatter.js

@@ -0,0 +1,193 @@
+import { getVaultFileKind } from '../../domain/file-kind.js';
+
+const FORMATTABLE_FILE_KINDS = new Set(['base', 'html', 'markdown', 'mermaid', 'plantuml']);
+const PLANTUML_BLOCK_OPENERS = [
+  [/^if\b.*\bthen\b/iu, 'endif'],
+  [/^while\b/iu, 'endwhile'],
+  [/^repeat\b(?!\s+while\b)/iu, 'repeat while'],
+  [/^switch\b/iu, 'endswitch'],
+  [/^fork\b(?!\s+again\b)/iu, 'end fork'],
+  [/^split\b(?!\s+again\b)/iu, 'end split'],
+  [/^(?:alt|opt|loop|par|critical|group|box|ref\s+over)\b/iu, 'end'],
+  [/^break\s+\S/iu, 'end'],
+];
+const PLANTUML_MIDDLE_PATTERN = /^(?:else(?:if)?|and|fork\s+again|split\s+again|case|option)\b/iu;
+
+function getPlantUmlOpaqueBlock(trimmedLine) {
+  if (trimmedLine.startsWith("/'")) {
+    return trimmedLine.slice(2).includes("'/")
+      ? { oneLine: true }
+      : { end: (line) => line.includes("'/") };
+  }
+  const tripleQuoteCount = trimmedLine.split('"""').length - 1;
+  if (tripleQuoteCount % 2 === 1) return { end: (line) => line.includes('"""') };
+  if (/^<style>.*<\/style>\s*$/iu.test(trimmedLine)) return { oneLine: true };
+  if (/^<style>\s*$/iu.test(trimmedLine)) return { end: (line) => /<\/style>/iu.test(line) };
+  if (/^!(?:if|ifdef|ifndef)\b/iu.test(trimmedLine)) {
+    let depth = 1;
+    return { end: (line) => {
+      if (/^!(?:if|ifdef|ifndef)\b/iu.test(line)) depth += 1;
+      if (/^!endif\b/iu.test(line)) depth -= 1;
+      return depth === 0;
+    } };
+  }
+  if (/^!(?:while|foreach)\b/iu.test(trimmedLine)) {
+    const endPattern = /^!while\b/iu.test(trimmedLine) ? /^!endwhile\b/iu : /^!endfor\b/iu;
+    return { end: (line) => endPattern.test(line) };
+  }
+  if (/^!(?:definelong|procedure|function)\b/iu.test(trimmedLine)) {
+    return { end: (line) => /^!end(?:definelong|procedure|function)\b/iu.test(line) };
+  }
+  if (/^!\w+/u.test(trimmedLine)) return { oneLine: true };
+  if (/^(?:[hr]?note|legend)\b(?!.*:\s*\S)/iu.test(trimmedLine)) {
+    return { end: (line) => /^(?:end\s+note|endlegend)\b/iu.test(line) };
+  }
+  if (/^(?:title|header|footer|caption)\s*$/iu.test(trimmedLine)) {
+    const blockName = trimmedLine.toLowerCase();
+    return { end: (line) => line.toLowerCase().replace(/\s/gu, '') === `end${blockName}` };
+  }
+  if (/^(?:json|yaml|salt|sprite)\b.*\{\s*$/iu.test(trimmedLine)) {
+    return { braceDepth: 1 };
+  }
+  return null;
+}
+
+function countPlantUmlBraces(line) {
+  let count = 0;
+  let escaped = false;
+  let quoted = false;
+  for (const character of line) {
+    if (escaped) {
+      escaped = false;
+    } else if (character === '\\') {
+      escaped = true;
+    } else if (character === '"') {
+      quoted = !quoted;
+    } else if (!quoted && character === '{') {
+      count += 1;
+    } else if (!quoted && character === '}') {
+      count -= 1;
+    }
+  }
+  return count;
+}
+
+function getPlantUmlCloser(trimmedLine) {
+  if (/^\}\s*$/u.test(trimmedLine)) return '}';
+  if (/^endif\b/iu.test(trimmedLine)) return 'endif';
+  if (/^endwhile\b/iu.test(trimmedLine)) return 'endwhile';
+  if (/^repeat\s+while\b/iu.test(trimmedLine)) return 'repeat while';
+  if (/^endswitch\b/iu.test(trimmedLine)) return 'endswitch';
+  if (/^end\s+fork\b/iu.test(trimmedLine)) return 'end fork';
+  if (/^end\s+split\b/iu.test(trimmedLine)) return 'end split';
+  if (/^end(?:\s+\w+)?\s*$/iu.test(trimmedLine)) return 'end';
+  return null;
+}
+
+function getPlantUmlOpener(trimmedLine) {
+  if (/\{\s*$/u.test(trimmedLine)) return '}';
+  return PLANTUML_BLOCK_OPENERS.find(([pattern]) => pattern.test(trimmedLine))?.[1] ?? null;
+}
+
+function indentPlantUml(source) {
+  const parts = String(source ?? '').split(/(\r\n|\n|\r)/u);
+  const stack = [];
+  let opaqueBlock = null;
+
+  for (let index = 0; index < parts.length; index += 2) {
+    const line = parts[index];
+    const content = line.replace(/^[\t ]*/u, '');
+    const trimmedLine = content.trimEnd();
+
+    if (opaqueBlock) {
+      if (opaqueBlock.braceDepth) {
+        opaqueBlock.braceDepth += countPlantUmlBraces(trimmedLine);
+        if (opaqueBlock.braceDepth <= 0) opaqueBlock = null;
+      } else if (opaqueBlock.end(trimmedLine)) {
+        opaqueBlock = null;
+      }
+      continue;
+    }
+
+    const nextOpaqueBlock = getPlantUmlOpaqueBlock(trimmedLine);
+    if (nextOpaqueBlock) {
+      opaqueBlock = nextOpaqueBlock.oneLine ? null : nextOpaqueBlock;
+      continue;
+    }
+    if (!trimmedLine) continue;
+
+    const closer = getPlantUmlCloser(trimmedLine);
+    const closesCurrentBlock = closer && stack.at(-1) === closer;
+    const isMiddle = PLANTUML_MIDDLE_PATTERN.test(trimmedLine) && stack.length > 0;
+    const opener = getPlantUmlOpener(trimmedLine);
+
+    if (stack.length > 0 || closesCurrentBlock || isMiddle || opener) {
+      const depth = Math.max(0, stack.length - (closesCurrentBlock || isMiddle ? 1 : 0));
+      parts[index] = `${'  '.repeat(depth)}${content}`;
+    }
+    if (closesCurrentBlock) stack.pop();
+    if (opener) stack.push(opener);
+  }
+
+  return parts.join('');
+}
+
+export function canFormatDocument(filePath) {
+  return FORMATTABLE_FILE_KINDS.has(getVaultFileKind(filePath));
+}
+
+async function formatWithPrettier(source, parser) {
+  let pluginImport = import('prettier/plugins/markdown');
+  if (parser === 'yaml') pluginImport = import('prettier/plugins/yaml');
+  if (parser === 'html') pluginImport = import('prettier/plugins/html');
+
+  const [{ format }, plugin] = await Promise.all([
+    import('prettier/standalone'),
+    pluginImport,
+  ]);
+  const plugins = [plugin.default];
+
+  if (parser === 'mdx') {
+    const [babel, estree] = await Promise.all([
+      import('prettier/plugins/babel'),
+      import('prettier/plugins/estree'),
+    ]);
+    plugins.push(babel.default, estree.default);
+  }
+
+  return format(source, {
+    parser,
+    plugins,
+    proseWrap: 'preserve',
+  });
+}
+
+async function formatMermaid(source) {
+  const [{ default: mermaid }, { formatMermaid }] = await Promise.all([
+    import('mermaid'),
+    import('mermaid-formatter'),
+  ]);
+  if (!await mermaid.parse(source, { suppressErrors: true })) {
+    throw new Error('Mermaid syntax is invalid');
+  }
+
+  const formatted = formatMermaid(source, { indentSize: 2 });
+  if (!await mermaid.parse(formatted, { suppressErrors: true })) {
+    throw new Error('The formatter produced invalid Mermaid syntax');
+  }
+  return formatted;
+}
+
+export async function formatDocumentText(filePath, source) {
+  const kind = getVaultFileKind(filePath);
+
+  if (kind === 'mermaid') return formatMermaid(source);
+  if (kind === 'plantuml') return indentPlantUml(source);
+  if (kind === 'base') return formatWithPrettier(source, 'yaml');
+  if (kind === 'html') return formatWithPrettier(source, 'html');
+  if (kind === 'markdown') {
+    const parser = String(filePath).toLowerCase().endsWith('.mdx') ? 'mdx' : 'markdown';
+    return formatWithPrettier(source, parser);
+  }
+  return null;
+}

package/src/client/domain/file-search.js

@@ -0,0 +1,73 @@
+import { stripVaultFileExtension } from '../../domain/file-kind.js';
+
+function createRangeIndices(start, length) {
+  return Array.from({ length }, (_, index) => start + index);
+}
+
+function findFuzzyMatch(text, query) {
+  const indices = [];
+  let queryIndex = 0;
+  let score = 0;
+  let consecutiveBonus = 0;
+
+  for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
+    if (/\s/u.test(query[queryIndex]) && /[\s/\\_-]/u.test(text[index])) {
+      queryIndex += 1;
+      consecutiveBonus = 0;
+      continue;
+    }
+
+    if (text[index] !== query[queryIndex]) {
+      if (queryIndex > 0) score -= 0.25;
+      consecutiveBonus = 0;
+      continue;
+    }
+
+    queryIndex += 1;
+    indices.push(index);
+    consecutiveBonus += 1;
+    score += consecutiveBonus;
+
+    if (index === 0 || /[/\-_ ]/u.test(text[index - 1])) score += 5;
+  }
+
+  return queryIndex === query.length && score > 0 ? { indices, score } : null;
+}
+
+export function createFileSearchEntry(filePath) {
+  const displayName = stripVaultFileExtension(filePath);
+  const fileName = displayName.split('/').pop() || displayName;
+  const rawFileName = String(filePath ?? '').split('/').pop() || String(filePath ?? '');
+
+  return {
+    displayName,
+    fileName,
+    filePath,
+    lowerDisplayName: displayName.toLowerCase(),
+    lowerFileName: fileName.toLowerCase(),
+    lowerPath: String(filePath).toLowerCase(),
+    lowerRawFileName: rawFileName.toLowerCase(),
+  };
+}
+
+export function findFileSearchMatch(entry, query) {
+  const fileNameStart = entry.displayName.length - entry.fileName.length;
+  const searches = [
+    [entry.lowerFileName, fileNameStart, 100],
+    [entry.lowerDisplayName, 0, 50],
+    [entry.lowerRawFileName, fileNameStart, 40],
+    [entry.lowerPath, 0, 25],
+  ];
+
+  for (const [text, offset, baseScore] of searches) {
+    const index = text.indexOf(query);
+    if (index >= 0) {
+      return {
+        indices: createRangeIndices(index + offset, query.length),
+        score: baseScore + (1 / text.length),
+      };
+    }
+  }
+
+  return findFuzzyMatch(entry.lowerDisplayName, query);
+}

package/src/client/domain/git-labels.js

@@ -0,0 +1,5 @@
+export function commitButtonLabel(count) {
+  return count > 0
+    ? `Commit ${count} file${count === 1 ? '' : 's'}`
+    : 'Commit included files';
+}

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

@@ -8,10 +8,12 @@ import {
 } from '../../domain/file-kind.js';
 
 export function normalizeVaultPathInput(value) {
-  const segments = String(value ?? '')
-    .trim()
-    .replace(/\\/g, '/')
-    .replace(/^\/+/u, '')
+  const normalized = String(value ?? '').trim().replace(/\\/g, '/');
+  if (!normalized || normalized.startsWith('/')) {
+    return '';
+  }
+
+  const segments = normalized
     .split('/')
     .map((segment) => segment.trim())
     .filter(Boolean);

package/src/client/domain/wiki-link-completions.js

@@ -1,3 +1,7 @@
+import { createFileSearchEntry, findFileSearchMatch } from './file-search.js';
+
+const MAX_VISIBLE_RESULTS = 30;
+
 /**
  * CodeMirror autocomplete source for [[wiki-links]].
  *
@@ -29,31 +33,28 @@ export function wikiLinkCompletions(getFileList) {
       return null;
     }
 
-    const query = afterOpen.toLowerCase();
+    const query = afterOpen.trim().toLowerCase().replace(/\s+/gu, ' ');
     const from = line.from + openIndex + 2;
-    const files = getFileList();
+    const entries = getFileList().map((filePath) => createFileSearchEntry(filePath));
+    const matches = query
+      ? entries
+        .map((entry) => ({ entry, match: findFileSearchMatch(entry, query) }))
+        .filter(({ match }) => match)
+        .sort((left, right) => right.match.score - left.match.score
+          || left.entry.lowerPath.localeCompare(right.entry.lowerPath))
+      : entries.map((entry) => ({ entry, match: null }));
 
-    // Build completion options: show file paths without .md extension
-    const options = files
-      .map((filePath) => {
-        const label = filePath.replace(/\.md$/i, '');
-        // Match against full path and just the filename
-        const fileName = label.split('/').pop();
-        return { filePath, label, fileName };
-      })
-      .filter(({ label, fileName }) =>
-        label.toLowerCase().includes(query) || fileName.toLowerCase().includes(query),
-      )
-      .map(({ label, fileName }) => ({
-        label,
-        // Show just the filename as detail when in a subdirectory
-        detail: label.includes('/') ? `  ${fileName}` : undefined,
+    const options = matches
+      .slice(0, MAX_VISIBLE_RESULTS)
+      .map(({ entry }) => ({
+        label: entry.filePath,
+        displayLabel: entry.filePath.split('/').pop(),
+        detail: entry.displayName.slice(0, -entry.fileName.length - 1) || undefined,
         apply: (view, completion, from, to) => {
           // Replace from the query start to cursor, and also consume any trailing `]]`
-          const docText = view.state.doc.toString();
           let end = to;
           // If there's already a `]]` right after cursor, consume it
-          if (docText.slice(to, to + 2) === ']]') {
+          if (view.state.sliceDoc(to, to + 2) === ']]') {
             end = to + 2;
           }
           view.dispatch({
@@ -62,7 +63,6 @@ export function wikiLinkCompletions(getFileList) {
           });
         },
         type: 'text',
-        boost: label.toLowerCase().startsWith(query) ? 1 : 0,
       }));
 
     if (options.length === 0) {

package/src/client/drawio-editor.js

@@ -155,8 +155,13 @@ function teardownDrawioFrame() {
 }
 
 function buildDrawioFrameUrl() {
-  const baseUrl = runtimeConfig.drawioBaseUrl || 'https://embed.diagrams.net';
-  const url = new URL(baseUrl);
+  const fallbackUrl = 'https://embed.diagrams.net';
+  let url;
+  try {
+    url = new URL(runtimeConfig.drawioBaseUrl || fallbackUrl);
+  } catch {
+    url = new URL(fallbackUrl);
+  }
   url.searchParams.set('embed', '1');
   url.searchParams.set('proto', 'json');
   url.searchParams.set('spin', '1');
@@ -396,7 +401,7 @@ function handleLeaseState(nextState) {
   state.canClaim = Boolean(nextState?.canClaim);
 
   if (state.isEditor) {
-    state.bannerText = 'Editing';
+    state.bannerText = 'Changes save automatically.';
   } else if (nextState?.hasHealthyHolder) {
     const holderName = nextState.holderName || 'Another user';
     state.bannerText = `${holderName} is editing this diagram. Read-only mode. Updates appear after they save.`;

package/src/client/excalidraw-editor.js

@@ -441,6 +441,7 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
     },
     onPointerDown: () => {
       initialViewportFitPending = false;
+      stopFollowingFromLocalInteraction();
     },
     renderTopRightUI,
     historyOptions: {
@@ -468,6 +469,32 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
 }
 
 const diagramCommentsContext = React.createContext(null);
+const presentationContext = React.createContext(null);
+
+function PresentationToolbar() {
+  const context = React.useContext(presentationContext);
+  if (!context) {
+    return null;
+  }
+
+  const label = context.active ? 'Exit presentation' : 'Start presentation';
+  const icon = context.active ? '×' : '▶';
+  let title = context.active ? 'Exit presentation' : 'Present frames';
+  if (context.frameCount === 0) {
+    title = 'Add a frame to create slides';
+  }
+
+  return React.createElement('button', {
+    'aria-label': label,
+    'aria-pressed': context.active,
+    className: `diagram-comment-button excalidraw-presentation-toggle sidebar-trigger${context.active ? ' is-active' : ''}`,
+    'data-testid': 'excalidraw-presentation-toggle',
+    disabled: context.frameCount === 0,
+    onClick: context.toggle,
+    title,
+    type: 'button',
+  }, React.createElement('span', { 'aria-hidden': 'true' }, icon));
+}
 
 function DiagramCommentsToolbar() {
   const context = React.useContext(diagramCommentsContext);
@@ -517,7 +544,12 @@ function DiagramCommentsToolbar() {
 
 const DiagramCommentsExcalidraw = React.memo(function DiagramCommentsExcalidraw({ initialData = null, renderKey = 0, viewModeEnabled }) {
   const renderTopRightUI = React.useCallback(
-    () => React.createElement(DiagramCommentsToolbar),
+    () => React.createElement('div', {
+      className: 'excalidraw-editor-toolbar',
+    }, [
+      React.createElement(PresentationToolbar, { key: 'presentation' }),
+      React.createElement(DiagramCommentsToolbar, { key: 'comments' }),
+    ]),
     [],
   );
 
@@ -565,7 +597,13 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [draft, setDraft] = React.useState('');
   const [replyDraft, setReplyDraft] = React.useState('');
+  const [presentationFrameId, setPresentationFrameId] = React.useState(null);
   const [, setViewportRevision] = React.useState(0);
+  const presentationFrames = (
+    getMountedExcalidrawAPI()?.getSceneElementsIncludingDeleted?.() || []
+  ).filter((element) => element?.type === 'frame' && !element.isDeleted);
+  const presentationIndex = presentationFrames.findIndex((frame) => frame.id === presentationFrameId);
+  const presentationMode = presentationFrameId !== null;
 
   React.useEffect(() => {
     const api = getMountedExcalidrawAPI();
@@ -587,6 +625,76 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
 
   useCloseDiagramCommentsOnCanvas(drawerOpen, setDrawerOpen);
 
+  const goToPresentationFrame = React.useCallback((index) => {
+    const targetIndex = Math.min(Math.max(index, 0), presentationFrames.length - 1);
+    const frame = presentationFrames[targetIndex];
+    const api = getMountedExcalidrawAPI();
+    if (!api || !frame) {
+      return;
+    }
+
+    setPresentationFrameId(frame.id);
+    api.setViewport({
+      animation: true,
+      fit: 'contain',
+      offsets: { ui: true },
+      target: frame,
+    });
+  }, [presentationFrames]);
+
+  const togglePresentation = React.useCallback(() => {
+    if (presentationMode) {
+      setPresentationFrameId(null);
+      return;
+    }
+
+    setDrawerOpen(false);
+    setComposerOpen(false);
+    setActiveThreadId(null);
+    goToPresentationFrame(0);
+  }, [goToPresentationFrame, presentationMode]);
+
+  React.useEffect(() => {
+    if (!presentationFrameId || presentationIndex >= 0) {
+      return;
+    }
+
+    if (presentationFrames.length > 0) {
+      goToPresentationFrame(0);
+    } else {
+      setPresentationFrameId(null);
+    }
+  }, [goToPresentationFrame, presentationFrameId, presentationFrames.length, presentationIndex]);
+
+  React.useEffect(() => {
+    if (!presentationMode) {
+      return undefined;
+    }
+
+    const handlePresentationKeyDown = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setPresentationFrameId(null);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex + 1);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex - 1);
+      }
+    };
+
+    document.addEventListener('keydown', handlePresentationKeyDown, true);
+    return () => document.removeEventListener('keydown', handlePresentationKeyDown, true);
+  }, [goToPresentationFrame, presentationIndex, presentationMode]);
+
   React.useEffect(() => {
     if (activeThreadId && !threads.some((thread) => thread.id === activeThreadId)) {
       setActiveThreadId(null);
@@ -832,7 +940,8 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ]);
   };
 
-  const renderCommentsOverlay = visible && room
+  const commentsVisible = visible && !presentationMode;
+  const renderCommentsOverlay = commentsVisible && room
     ? React.createElement('div', {
       'aria-label': 'Diagram comments overlay',
       className: 'diagram-comments-overlay',
@@ -864,7 +973,44 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ])
     : null;
 
-  return React.createElement(diagramCommentsContext.Provider, {
+  const renderPresentationNavigation = presentationMode
+    ? React.createElement('div', {
+      'aria-label': 'Presentation navigation',
+      className: 'excalidraw-presentation-navigation',
+      key: 'presentation-navigation',
+      role: 'toolbar',
+    }, [
+      React.createElement('button', {
+        'aria-label': 'Previous slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex <= 0,
+        key: 'previous',
+        onClick: () => goToPresentationFrame(presentationIndex - 1),
+        type: 'button',
+      }, '←'),
+      React.createElement('span', {
+        'aria-live': 'polite',
+        className: 'excalidraw-presentation-status',
+        key: 'status',
+      }, `${presentationFrames[presentationIndex]?.name || `Slide ${presentationIndex + 1}`} · ${presentationIndex + 1} / ${presentationFrames.length}`),
+      React.createElement('button', {
+        'aria-label': 'Next slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex >= presentationFrames.length - 1,
+        key: 'next',
+        onClick: () => goToPresentationFrame(presentationIndex + 1),
+        type: 'button',
+      }, '→'),
+    ])
+    : null;
+
+  return React.createElement(presentationContext.Provider, {
+    value: {
+      active: presentationMode,
+      frameCount: presentationFrames.length,
+      toggle: togglePresentation,
+    },
+  }, React.createElement(diagramCommentsContext.Provider, {
     value: {
       canWrite,
       drawerOpen,
@@ -873,17 +1019,18 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
       selectedElement,
       threads,
       toggleDrawer: () => setDrawerOpen((open) => !open),
-      visible,
+      visible: commentsVisible,
     },
   }, [
     React.createElement(DiagramCommentsExcalidraw, {
       initialData,
       key: 'excalidraw',
       renderKey: editorRenderKey,
-      viewModeEnabled: getDocumentViewState().viewModeEnabled,
+      viewModeEnabled: presentationMode || getDocumentViewState().viewModeEnabled,
     }),
     renderCommentsOverlay,
-  ]);
+    renderPresentationNavigation,
+  ]));
 }
 
 function renderExcalidrawApp({ initialData } = {}) {
@@ -1379,7 +1526,17 @@ function postToParent(type, payload = {}) {
   window.parent.postMessage({ source: 'excalidraw-editor', type, ...payload }, parentOrigin);
 }
 
+function stopFollowingFromLocalInteraction() {
+  if (!pendingHostFollowPeerId && !followedSocketId) {
+    return;
+  }
+
+  applyHostFollowRequest(null);
+  postToParent('stop-following');
+}
+
 function handleQuickSwitcherKeyDown(event) {
+  stopFollowingFromLocalInteraction();
   if (!isPlainQuickSwitcherShortcut(event)) {
     return;
   }