collabmd 0.1.52 → 0.1.55

package/src/client/application/preview-render-compiler.js

@@ -8,6 +8,7 @@ import {
   resolveWikiTargetWithIndex,
 } from '../../domain/wiki-link-resolver.js';
 import { classifyPublicVideoEmbed } from '../../domain/video-embed.js';
+import { assignHeadingIds, findMarkdownSection } from '../domain/markdown-headings.js';
 import { highlightFence } from '../domain/highlight-runtime.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
@@ -42,96 +43,6 @@ function escapePreviewText(content = '') {
   return escapeHtml(normalizePreviewTypography(content));
 }
 
-function createHeadingSlug(content = '') {
-  return String(content ?? '')
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-|-$/g, '')
-    || 'section';
-}
-
-function createHeadingId(baseId = '', headingIdCounts = new Map()) {
-  const normalizedBaseId = String(baseId ?? '').trim() || 'section';
-  const occurrenceIndex = headingIdCounts.get(normalizedBaseId) ?? 0;
-  headingIdCounts.set(normalizedBaseId, occurrenceIndex + 1);
-  return occurrenceIndex === 0 ? normalizedBaseId : `${normalizedBaseId}-${occurrenceIndex}`;
-}
-
-function createContextualHeadingBaseId(headingInfo, groupedHeadingInfos = []) {
-  if (!headingInfo?.slug) {
-    return 'section';
-  }
-
-  if (groupedHeadingInfos.length <= 1) {
-    return headingInfo.slug;
-  }
-
-  for (let depth = 1; depth <= headingInfo.parentSlugs.length; depth += 1) {
-    const candidate = [
-      ...headingInfo.parentSlugs.slice(-depth),
-      headingInfo.slug,
-    ].join('-');
-
-    const isUniqueWithinGroup = groupedHeadingInfos.every((otherInfo) => {
-      if (otherInfo === headingInfo) {
-        return true;
-      }
-
-      const otherCandidate = [
-        ...otherInfo.parentSlugs.slice(-depth),
-        otherInfo.slug,
-      ].join('-');
-      return otherCandidate !== candidate;
-    });
-
-    if (isUniqueWithinGroup) {
-      return candidate;
-    }
-  }
-
-  return headingInfo.slug;
-}
-
-function assignHeadingIds(state) {
-  const headingInfos = [];
-  const parentSlugs = [];
-
-  state.tokens.forEach((token, index) => {
-    if (token.type !== 'heading_open' || token.attrGet('id')) {
-      return;
-    }
-
-    const level = Number.parseInt(token.tag.slice(1), 10);
-    if (!Number.isFinite(level) || level < 1) {
-      return;
-    }
-
-    parentSlugs.length = Math.max(level - 1, 0);
-    const inlineToken = state.tokens[index + 1];
-    const slug = createHeadingSlug(inlineToken?.type === 'inline' ? inlineToken.content : '');
-    headingInfos.push({
-      parentSlugs: parentSlugs.filter(Boolean),
-      slug,
-      token,
-    });
-    parentSlugs[level - 1] = slug;
-  });
-
-  const headingsBySlug = new Map();
-  headingInfos.forEach((headingInfo) => {
-    const group = headingsBySlug.get(headingInfo.slug) ?? [];
-    group.push(headingInfo);
-    headingsBySlug.set(headingInfo.slug, group);
-  });
-
-  const headingIdCounts = new Map();
-  headingInfos.forEach((headingInfo) => {
-    const baseId = createContextualHeadingBaseId(headingInfo, headingsBySlug.get(headingInfo.slug) ?? []);
-    headingInfo.token.attrSet('id', createHeadingId(baseId, headingIdCounts));
-  });
-}
-
 function renderSafeInlineBreaks(content = '') {
   const parts = String(content).split(/<br\s*\/?>/i);
   if (parts.length === 1) {
@@ -276,7 +187,7 @@ function renderInlineWikiText(content, {
   baseEmbedCounts,
   drawioEmbedCounts,
   excalidrawEmbedCounts,
-  wikiTargetIndex,
+  getWikiTargetIndex,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
   sourceFilePath = '',
@@ -349,7 +260,7 @@ function renderInlineWikiText(content, {
     } else {
       const target = match[4].trim();
       const display = (match[5] || match[4]).trim();
-      const resolved = resolveWikiTargetWithIndex(target, wikiTargetIndex);
+      const resolved = resolveWikiTargetWithIndex(target, getWikiTargetIndex());
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved
         ? normalizePreviewTypography(display)
@@ -421,7 +332,8 @@ function createMarkdownRenderer(fileList = [], {
   const plantUmlCounts = new Map();
   const plantUmlEmbedCounts = new Map();
   const videoEmbedCounts = new Map();
-  const wikiTargetIndex = createWikiTargetIndex(fileList);
+  let wikiTargetIndex;
+  const getWikiTargetIndex = () => (wikiTargetIndex ??= createWikiTargetIndex(fileList));
 
   const fallbackFence = markdown.renderer.rules.fence;
   const fallbackImage = markdown.renderer.rules.image;
@@ -505,7 +417,7 @@ function createMarkdownRenderer(fileList = [], {
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        wikiTargetIndex,
+        getWikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
@@ -519,7 +431,7 @@ function createMarkdownRenderer(fileList = [], {
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        wikiTargetIndex,
+        getWikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
@@ -532,7 +444,7 @@ function createMarkdownRenderer(fileList = [], {
       baseEmbedCounts: baseCounts,
       drawioEmbedCounts,
       excalidrawEmbedCounts,
-      wikiTargetIndex,
+      getWikiTargetIndex,
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
       sourceFilePath,
@@ -591,6 +503,7 @@ export function compilePreviewDocument({
   frontmatterInteractive = false,
   markdownText = '',
   sourceFilePath = '',
+  subpath = '',
   wikiLinkAutoCreate = true,
 } = {}) {
   const normalizedMarkdown = String(markdownText);
@@ -601,13 +514,36 @@ export function compilePreviewDocument({
     wikiLinkAutoCreate,
   });
   const renderedMarkdown = frontmatter ? frontmatter.bodyMarkdown : normalizedMarkdown;
-  const frontmatterHtml = renderFrontmatterBlock(frontmatter, {
+  const env = {};
+  let tokens = renderer.parse(renderedMarkdown, env);
+  if (subpath) {
+    const section = subpath.startsWith('#') && findMarkdownSection(tokens, subpath.slice(1));
+    if (!section) {
+      return {
+        html: `<p>${subpath.startsWith('#^')
+          ? 'Block previews are not supported. Open the file to view it.'
+          : 'Heading not found in this file. Choose another heading or clear the field to show the whole file.'}</p>`,
+        stats: analyzeMarkdownComplexity(''),
+      };
+    }
+    // Keep enclosing blocks balanced, original heading IDs and full-document reference definitions.
+    const includedBlocks = [];
+    tokens = tokens.filter((token) => {
+      if (token.nesting === -1) return includedBlocks.pop();
+      const included = token.map
+        ? token.map[1] > section.startLine && (section.endLine === undefined || token.map[0] < section.endLine)
+        : includedBlocks.at(-1);
+      if (token.nesting === 1) includedBlocks.push(included);
+      return included;
+    });
+  }
+  const frontmatterHtml = subpath ? '' : renderFrontmatterBlock(frontmatter, {
     collapsed: frontmatterCollapsed,
     interactive: frontmatterInteractive,
   });
 
   return {
-    html: `${frontmatterHtml}${renderer.render(renderedMarkdown)}`,
+    html: `${frontmatterHtml}${renderer.renderer.render(tokens, renderer.options, env)}`,
     stats: analyzeMarkdownComplexity(normalizedMarkdown),
   };
 }

package/src/client/application/preview-render-executor.js

@@ -80,6 +80,7 @@ export class PreviewRenderExecutor {
   async compile(markdownText, renderVersion, {
     frontmatterCollapsed = false,
     frontmatterInteractive = false,
+    subpath = '',
   } = {}) {
     const worker = this.ensureWorker();
 
@@ -102,6 +103,7 @@ export class PreviewRenderExecutor {
           markdownText,
           renderVersion,
           sourceFilePath: this.getSourceFilePath?.() ?? '',
+          subpath,
           wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
         });
       });
@@ -115,6 +117,7 @@ export class PreviewRenderExecutor {
       frontmatterInteractive,
       markdownText,
       sourceFilePath: this.getSourceFilePath?.() ?? '',
+      subpath,
       wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
     });
   }

package/src/client/application/preview-render-worker.js

@@ -9,6 +9,7 @@ self.onmessage = (event) => {
     markdownText,
     renderVersion,
     sourceFilePath,
+    subpath,
     wikiLinkAutoCreate,
   } = event.data ?? {};
 
@@ -20,6 +21,7 @@ self.onmessage = (event) => {
       frontmatterInteractive,
       markdownText,
       sourceFilePath,
+      subpath,
       wikiLinkAutoCreate,
     });
     self.postMessage({

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

@@ -11,6 +11,7 @@ export class PreviewRenderer {
     getFileList,
     getPreviewVisible = null,
     getSourceFilePath,
+    getSubpath = null,
     getTheme = null,
     getWikiLinkAutoCreate = null,
     loadFileSource = null,
@@ -28,6 +29,7 @@ export class PreviewRenderer {
     this.getFileList = getFileList;
     this.getPreviewVisible = getPreviewVisible;
     this.getSourceFilePath = getSourceFilePath;
+    this.getSubpath = getSubpath;
     this.getTheme = getTheme;
     this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
     this.loadFileSource = loadFileSource;
@@ -234,7 +236,9 @@ export class PreviewRenderer {
     this.renderScheduler.queue({
       markdownText,
       onRenderRequested: (queuedText, renderVersion) => {
-        void this._deferredPreviewStylesPromise.then(() => this.render(queuedText, renderVersion));
+        void this._deferredPreviewStylesPromise.then(() => {
+          if (renderVersion === this.pendingRenderVersion) return this.render(queuedText, renderVersion);
+        });
       },
       renderVersion: scheduledVersion,
     });
@@ -250,6 +254,7 @@ export class PreviewRenderer {
       const result = await this.renderExecutor.compile(markdownText, renderVersion, {
         frontmatterCollapsed: this.frontmatterCollapsed,
         frontmatterInteractive: true,
+        subpath: this.getSubpath?.() ?? '',
       });
       if (renderVersion !== this.pendingRenderVersion) {
         return;
@@ -266,6 +271,7 @@ export class PreviewRenderer {
   }
 
   destroy() {
+    this.pendingRenderVersion += 1;
     this.renderScheduler.destroy();
     this.diagramChrome.destroy();
     this.mermaidHydrator.destroy();
@@ -321,8 +327,6 @@ export class PreviewRenderer {
 
     this.mermaidHydrator.cancelHydration({ preserveActiveShell: true });
     this.plantUmlHydrator.cancelHydration({ preserveActiveShell: true });
-    document.body.classList.remove('mermaid-maximized-open');
-    document.body.classList.remove('plantuml-maximized-open');
     this.mermaidHydrator.preserveHydratedShellsForCommit();
     this.plantUmlHydrator.preserveHydratedShellsForCommit();
 
@@ -339,7 +343,7 @@ export class PreviewRenderer {
     if (this.previewContainer) this.previewContainer.scrollTop = scrollTop;
     this.setPhase('base');
 
-    this.outlineController.refresh();
+    this.outlineController?.refresh();
     this.onAfterRenderCommit?.(this.previewElement, {
       ...stats,
       isLargeDocument: this.isLargeDocument,
@@ -379,7 +383,7 @@ export class PreviewRenderer {
   }
 
   handleFrontmatterLayoutChange() {
-    this.outlineController.refresh();
+    this.outlineController?.refresh();
     this.onPreviewLayoutChange?.({
       isLargeDocument: this.isLargeDocument,
       renderVersion: this.activeRenderVersion,

package/src/client/application/workspace-coordinator.js

@@ -28,6 +28,7 @@ export class WorkspaceCoordinator {
     getStoredUserName,
     getTheme,
     isBaseFile,
+    isCanvasFile,
     isDrawioFile,
     isExcalidrawFile,
     isImageFile,
@@ -51,6 +52,7 @@ export class WorkspaceCoordinator {
     onSessionAssigned = null,
     onFileOpenMetric = null,
     onRenderBasePreview,
+    onRenderCanvasPreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
     onRenderHtmlPreview,
@@ -82,6 +84,7 @@ export class WorkspaceCoordinator {
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
     this.isBaseFile = isBaseFile ?? (() => false);
+    this.isCanvasFile = isCanvasFile ?? (() => false);
     this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
@@ -105,6 +108,7 @@ export class WorkspaceCoordinator {
     this.onSessionAssigned = onSessionAssigned;
     this.onFileOpenMetric = onFileOpenMetric;
     this.onRenderBasePreview = onRenderBasePreview;
+    this.onRenderCanvasPreview = onRenderCanvasPreview;
     this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
     this.onRenderHtmlPreview = onRenderHtmlPreview;
@@ -182,6 +186,7 @@ export class WorkspaceCoordinator {
 
   finalizeFileOpen({
     isBase = false,
+    isCanvas = false,
     isDrawio = false,
     filePath,
     isExcalidraw = false,
@@ -190,6 +195,7 @@ export class WorkspaceCoordinator {
     isPdf = false,
     supportsBacklinks,
   }) {
+    if (isCanvas) this.onRenderCanvasPreview(filePath);
     if (isExcalidraw) this.onRenderExcalidrawPreview(filePath);
     if (isBase || isBaseFilePath(filePath)) this.onRenderBasePreview(filePath);
     if (isDrawio) this.onRenderDrawioPreview(filePath);
@@ -221,6 +227,7 @@ export class WorkspaceCoordinator {
     const currentDrawioMode = this.stateStore.currentDrawioMode ?? null;
     const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isCanvas = this.isCanvasFile(filePath);
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
@@ -232,7 +239,7 @@ export class WorkspaceCoordinator {
     if (
       filePath === this.stateStore.currentFilePath
       && normalizedDrawioMode === currentDrawioMode
-      && (this.session || isDrawio || isExcalidraw || isImage || isPdf)
+      && (this.session || isDrawio || isExcalidraw || isCanvas || isImage || isPdf)
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
@@ -249,7 +256,7 @@ export class WorkspaceCoordinator {
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });
 
-    if (isDrawio || isExcalidraw || isImage || isPdf) {
+    if (isDrawio || isExcalidraw || isCanvas || isImage || isPdf) {
       this.onSessionAssigned?.(null);
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
@@ -260,6 +267,7 @@ export class WorkspaceCoordinator {
       this.finalizeFileOpen({
         filePath,
         isBase,
+        isCanvas,
         isDrawio,
         isExcalidraw,
         isImage,
@@ -291,6 +299,9 @@ export class WorkspaceCoordinator {
       : Promise.resolve(null);
 
     const EditorSession = await this.loadEditorSessionClass();
+    if (loadToken !== this.stateStore.sessionLoadToken) {
+      return false;
+    }
     const session = this.createEditorSession(EditorSession, {
       filePath,
       getFileList: this.getFileList,
@@ -427,15 +438,13 @@ export class WorkspaceCoordinator {
       await initializePromise;
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
-        session.destroy();
-        return;
+        return false;
       }
 
       await Promise.all([liveSyncPromise, bootstrapVisibilityPromise]);
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
-        session.destroy();
-        return;
+        return false;
       }
 
       if (!fileOpenReady) {
@@ -444,6 +453,9 @@ export class WorkspaceCoordinator {
       }
       return true;
     } catch (error) {
+      if (loadToken !== this.stateStore.sessionLoadToken) {
+        return false;
+      }
       console.error('[app] Failed to initialize editor:', error);
       session.destroy();
       this.attachEditorScroller(null);
@@ -451,10 +463,6 @@ export class WorkspaceCoordinator {
         this.session = null;
       }
 
-      if (loadToken !== this.stateStore.sessionLoadToken) {
-        return;
-      }
-
       this.onFileOpenError({ code: 'load-failed', filePath });
       return false;
     }