collabmd 0.1.49 → 0.1.52

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

@@ -1,18 +1,19 @@
 import markdownIt from 'markdown-it';
-import hljs from 'highlight.js';
+import { enableMarkdownMath } from '../domain/markdown-math.js';
 
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
-import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
+import {
+  createWikiTargetIndex,
+  resolveWikiTargetWithIndex,
+} from '../../domain/wiki-link-resolver.js';
 import { classifyPublicVideoEmbed } from '../../domain/video-embed.js';
+import { highlightFence } from '../domain/highlight-runtime.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
-hljs.registerAliases(['cql', 'mariadb', 'mssql', 'mysql', 'plsql', 'sqlite'], { languageName: 'sql' });
-hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
-
 
 function renderToken(renderer, tokens, index, options, env, self) {
   return renderer?.(tokens, index, options, env, self) ?? self.renderToken(tokens, index, options);
@@ -249,6 +250,20 @@ function resolveLocalAttachmentUrl(source = '', {
   return `${attachmentApiPath}?path=${encodeURIComponent(resolvedPath)}`;
 }
 
+function resolveWikiImageAttachmentPath(target = '', sourceFilePath = '') {
+  const trimmed = String(target ?? '').trim().replace(/^\/+/u, '');
+  if (!trimmed) {
+    return '';
+  }
+
+  if (trimmed.startsWith('../') || trimmed.startsWith('./')) {
+    const resolved = resolveVaultRelativePath(sourceFilePath, trimmed);
+    return isImageAttachmentFilePath(resolved) ? resolved : '';
+  }
+
+  return isImageAttachmentFilePath(trimmed) ? trimmed : '';
+}
+
 function removeTokenAttr(token, name) {
   const attributeIndex = token.attrIndex(name);
   if (attributeIndex >= 0) {
@@ -257,16 +272,17 @@ function removeTokenAttr(token, name) {
 }
 
 function renderInlineWikiText(content, {
+  attachmentApiPath = '/api/attachment',
   baseEmbedCounts,
   drawioEmbedCounts,
   excalidrawEmbedCounts,
-  fileList,
+  wikiTargetIndex,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
   sourceFilePath = '',
   wikiLinkAutoCreate = true,
 }) {
-  const regex = /!\[\[([^\]|#]+\.(?:base|excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
+  const regex = /!\[\[([^\]|#]+\.(?:base|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg))(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
   let html = '';
   let match;
@@ -315,6 +331,12 @@ function renderInlineWikiText(content, {
           label: normalizePreviewTypography(label.replace(/\.(?:mmd|mermaid)$/i, '')),
           target,
         });
+      } else if (isImageAttachmentFilePath(target)) {
+        const resolvedPath = resolveWikiImageAttachmentPath(target, sourceFilePath);
+        const alt = normalizePreviewTypography(label.replace(/\.(?:png|jpe?g|webp|gif|svg)$/i, ''));
+        html += resolvedPath
+          ? `<img src="${escapeHtml(`${attachmentApiPath}?path=${encodeURIComponent(resolvedPath)}`)}" alt="${escapeHtml(alt)}" loading="lazy" decoding="async">`
+          : `<a class="wiki-link wiki-link-new" href="#" data-wiki-target="${escapeHtml(target)}" title="${escapeHtml(`Missing "${target}"`)}">${escapePreviewText(label)}</a>`;
       } else {
         const occurrenceIndex = plantUmlEmbedCounts.get(target) ?? 0;
         plantUmlEmbedCounts.set(target, occurrenceIndex + 1);
@@ -327,7 +349,7 @@ function renderInlineWikiText(content, {
     } else {
       const target = match[4].trim();
       const display = (match[5] || match[4]).trim();
-      const resolved = resolveWikiTargetPath(target, fileList);
+      const resolved = resolveWikiTargetWithIndex(target, wikiTargetIndex);
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved
         ? normalizePreviewTypography(display)
@@ -359,11 +381,7 @@ function createMarkdownRenderer(fileList = [], {
       }
 
       try {
-        if (language && hljs.getLanguage(language)) {
-          return hljs.highlight(source, { language }).value;
-        }
-
-        return hljs.highlightAuto(source).value;
+        return highlightFence(source, language);
       } catch {
         return '';
       }
@@ -372,6 +390,7 @@ function createMarkdownRenderer(fileList = [], {
     linkify: true,
     typographer: true,
   });
+  enableMarkdownMath(markdown);
 
   markdown.core.ruler.push('collabmd-source-lines', (state) => {
     state.tokens.forEach((token) => {
@@ -402,6 +421,7 @@ function createMarkdownRenderer(fileList = [], {
   const plantUmlCounts = new Map();
   const plantUmlEmbedCounts = new Map();
   const videoEmbedCounts = new Map();
+  const wikiTargetIndex = createWikiTargetIndex(fileList);
 
   const fallbackFence = markdown.renderer.rules.fence;
   const fallbackImage = markdown.renderer.rules.image;
@@ -480,36 +500,39 @@ function createMarkdownRenderer(fileList = [], {
     const content = tokens[index].content;
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
-      return `<input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+      return `<label class="task-list-label"><input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        attachmentApiPath,
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        fileList,
+        wikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
         wikiLinkAutoCreate,
-      })}`;
+      })}</label>`;
     }
 
     if (content.startsWith('[ ] ')) {
-      return `<input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+      return `<label class="task-list-label"><input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        attachmentApiPath,
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        fileList,
+        wikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
         wikiLinkAutoCreate,
-      })}`;
+      })}</label>`;
     }
 
     return renderInlineWikiText(content, {
+      attachmentApiPath,
       baseEmbedCounts: baseCounts,
       drawioEmbedCounts,
       excalidrawEmbedCounts,
-      fileList,
+      wikiTargetIndex,
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
       sourceFilePath,
@@ -545,6 +568,8 @@ function createMarkdownRenderer(fileList = [], {
       return renderedVideo;
     }
 
+    token.attrSet('loading', 'lazy');
+    token.attrSet('decoding', 'async');
     return renderToken(fallbackImage, tokens, index, options, env, self);
   };
 

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

@@ -1,8 +1,3 @@
-import {
-  cancelIdleRender,
-  IDLE_RENDER_TIMEOUT_MS,
-  requestIdleRender,
-} from './preview-diagram-utils.js';
 
 function createPreviewWorker() {
   return new Worker(new URL('./preview-render-worker.js', import.meta.url), { type: 'module' });
@@ -11,28 +6,21 @@ function createPreviewWorker() {
 export class PreviewRenderExecutor {
   constructor({
     attachmentApiPath = '/api/attachment',
-    cancelIdleRenderFn = cancelIdleRender,
     compilePreviewDocumentLoader = () => import('./preview-render-compiler.js'),
     createWorkerFn = createPreviewWorker,
     getFileList,
     getSourceFilePath = null,
     getWikiLinkAutoCreate = null,
-    idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
-    requestIdleRenderFn = requestIdleRender,
   } = {}) {
     this.attachmentApiPath = attachmentApiPath;
-    this.cancelIdleRenderFn = cancelIdleRenderFn;
     this.compilePreviewDocumentLoader = compilePreviewDocumentLoader;
     this.createWorkerFn = createWorkerFn;
     this.getFileList = getFileList;
     this.getSourceFilePath = getSourceFilePath;
     this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
-    this.idleTimeoutMs = idleTimeoutMs;
-    this.requestIdleRenderFn = requestIdleRenderFn;
     this.worker = null;
     this.workerDisabled = false;
     this.workerJob = null;
-    this.workerPrewarmId = null;
 
     this.handleWorkerMessage = (event) => {
       if (!this.workerJob || event.data?.renderVersion !== this.workerJob.renderVersion) {
@@ -68,16 +56,6 @@ export class PreviewRenderExecutor {
     return this.workerJob !== null;
   }
 
-  schedulePrewarm({ timeout = this.idleTimeoutMs } = {}) {
-    if (this.workerDisabled || this.worker || this.workerPrewarmId !== null) {
-      return;
-    }
-
-    this.workerPrewarmId = this.requestIdleRenderFn(() => {
-      this.workerPrewarmId = null;
-      this.ensureWorker();
-    }, timeout);
-  }
 
   ensureWorker() {
     if (this.workerDisabled) {
@@ -107,7 +85,10 @@ export class PreviewRenderExecutor {
 
     if (worker) {
       if (this.workerJob) {
-        this.reset('Superseded preview render');
+        // Reject the superseded job but keep the worker alive: the stale
+        // result is ignored by renderVersion in handleWorkerMessage, and
+        // respawning the worker per keystroke costs a module re-parse.
+        this.cancelWorkerJob('Superseded preview render');
       }
 
       const activeWorker = this.ensureWorker();
@@ -163,10 +144,6 @@ export class PreviewRenderExecutor {
   }
 
   destroy(reason = 'Preview renderer destroyed') {
-    if (this.workerPrewarmId !== null) {
-      this.cancelIdleRenderFn(this.workerPrewarmId);
-    }
-    this.workerPrewarmId = null;
     this.reset(reason);
   }
 }

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

@@ -4,6 +4,7 @@ export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
 export const LARGE_DOCUMENT_DRAWIO_THRESHOLD = 8;
 export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
 export const DIAGRAM_RENDER_DEBOUNCE_MS = 300;
+export const DEFAULT_RENDER_DEBOUNCE_MS = 250;
 
 function countMatches(source, pattern) {
   return source.match(pattern)?.length ?? 0;
@@ -38,30 +39,25 @@ export function isLargeDocumentStats(stats) {
 }
 
 export function getRenderProfile(markdownText = '') {
-  const source = String(markdownText);
-  const hasMermaid = /(^|\n)```mermaid\b/i.test(source)
-    || /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasDrawioEmbed = /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasExcalidrawEmbed = /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasPlantUml = /(^|\n)```(?:plantuml|puml)\b/i.test(source)
-    || /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/i.test(source);
-  const isLargeByLength = source.length >= LARGE_DOCUMENT_CHAR_THRESHOLD;
+  // Reuse the single complexity scan instead of re-running the same regexes:
+  // this previously cost ~10 full-source scans per keystroke.
+  const stats = analyzeMarkdownComplexity(markdownText);
 
-  if (isLargeByLength) {
+  if (stats.chars >= LARGE_DOCUMENT_CHAR_THRESHOLD) {
     return {
       debounceMs: 500,
       deferUntilIdle: true,
     };
   }
 
-  if (hasMermaid || hasPlantUml) {
+  if (stats.mermaidBlocks > 0 || stats.plantumlBlocks > 0) {
     return {
       debounceMs: DIAGRAM_RENDER_DEBOUNCE_MS,
       deferUntilIdle: false,
     };
   }
 
-  if (hasDrawioEmbed || hasExcalidrawEmbed) {
+  if (stats.drawioEmbeds > 0 || stats.excalidrawEmbeds > 0) {
     return {
       debounceMs: 0,
       deferUntilIdle: false,
@@ -69,7 +65,7 @@ export function getRenderProfile(markdownText = '') {
   }
 
   return {
-    debounceMs: 100,
+    debounceMs: DEFAULT_RENDER_DEBOUNCE_MS,
     deferUntilIdle: false,
   };
 }

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

@@ -1,17 +1,17 @@
 import { MermaidPreviewHydrator } from './mermaid-preview-hydrator.js';
 import { PlantUmlPreviewHydrator } from './plantuml-preview-hydrator.js';
 import { DiagramChrome } from './diagram-chrome.js';
-import { IDLE_RENDER_TIMEOUT_MS } from './preview-diagram-utils.js';
 import { PreviewRenderExecutor } from './preview-render-executor.js';
 import { isLargeDocumentStats } from './preview-render-profile.js';
 import { PreviewRenderScheduler } from './preview-render-scheduler.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
-
 export class PreviewRenderer {
   constructor({
     getContent,
     getFileList,
+    getPreviewVisible = null,
     getSourceFilePath,
+    getTheme = null,
     getWikiLinkAutoCreate = null,
     loadFileSource = null,
     onAfterRenderCommit,
@@ -26,7 +26,9 @@ export class PreviewRenderer {
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
+    this.getPreviewVisible = getPreviewVisible;
     this.getSourceFilePath = getSourceFilePath;
+    this.getTheme = getTheme;
     this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
     this.loadFileSource = loadFileSource;
     this.onAfterRenderCommit = onAfterRenderCommit;
@@ -47,6 +49,7 @@ export class PreviewRenderer {
     this.isLargeDocument = false;
     this.hydrationPaused = false;
     this.frontmatterCollapsed = false;
+    this.previewRenderStale = false;
 
     this.handlePreviewClick = (event) => {
       const frontmatterToggle = event.target.closest('.frontmatter-toggle');
@@ -111,7 +114,6 @@ export class PreviewRenderer {
       getFileList: () => this.getFileList?.() ?? [],
       getSourceFilePath: () => this.getSourceFilePath?.() ?? '',
       getWikiLinkAutoCreate: () => this.getWikiLinkAutoCreate?.() ?? true,
-      idleTimeoutMs: IDLE_RENDER_TIMEOUT_MS,
     });
 
     this.previewElement?.addEventListener('click', this.handlePreviewClick);
@@ -204,8 +206,25 @@ export class PreviewRenderer {
     }
     this.mermaidHydrator.applyTheme(theme);
   }
+  markStale() {
+    this.previewRenderStale = true;
+    this.renderScheduler.cancel();
+  }
 
   queueRender() {
+    if (!(this.getPreviewVisible?.() ?? true)) {
+      this.markStale();
+      return;
+    }
+
+    this.previewRenderStale = false;
+    this._deferredPreviewStylesPromise ??= Promise.all([
+      import('./highlight-theme.js').then(({ ensureHighlightThemeStylesheet }) => {
+        ensureHighlightThemeStylesheet();
+        this.applyTheme(this.getTheme?.() ?? 'dark');
+      }),
+      import('../styles/deferred-preview.css'),
+    ]);
     const markdownText = this.getContent();
     this.renderScheduler.cancel();
     this.mermaidHydrator.markPending();
@@ -215,12 +234,13 @@ export class PreviewRenderer {
     this.renderScheduler.queue({
       markdownText,
       onRenderRequested: (queuedText, renderVersion) => {
-        void this.render(queuedText, renderVersion);
+        void this._deferredPreviewStylesPromise.then(() => this.render(queuedText, renderVersion));
       },
       renderVersion: scheduledVersion,
     });
   }
 
+
   async render(markdownText = this.getContent(), renderVersion = this.pendingRenderVersion) {
     if (!this.previewElement) {
       return;
@@ -291,11 +311,9 @@ export class PreviewRenderer {
     this.updateHydrationPhase();
   }
 
-  scheduleWorkerPrewarm({ timeout = IDLE_RENDER_TIMEOUT_MS } = {}) {
-    this.renderExecutor.schedulePrewarm({ timeout });
-  }
 
   commitBaseRender({ html, stats }, renderVersion) {
+    const scrollTop = this.previewContainer?.scrollTop ?? 0;
     this.activeRenderVersion = renderVersion;
     this.readyRenderVersion = 0;
     this.currentStats = stats;
@@ -317,6 +335,8 @@ export class PreviewRenderer {
     this.applyFrontmatterState();
     this.mermaidHydrator.reconcileHydratedShells();
     this.plantUmlHydrator.reconcileHydratedShells();
+    // Detaching diagrams can temporarily shrink the document and clamp scrolling.
+    if (this.previewContainer) this.previewContainer.scrollTop = scrollTop;
     this.setPhase('base');
 
     this.outlineController.refresh();

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

@@ -269,6 +269,26 @@ export class WorkspaceCoordinator {
       });
       return true;
     }
+    let fileOpenReady = false;
+    let liveSyncComplete = false;
+    const bootstrapPromise = this.loadBootstrapContent
+      ? (async () => {
+        this.reportFileOpenMetric('bootstrap_fetch_started', loadToken);
+        try {
+          const content = await this.loadBootstrapContent(filePath);
+          this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
+            found: content !== null,
+          });
+          return content;
+        } catch (error) {
+          this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
+            error: error.message,
+            found: false,
+          });
+          return null;
+        }
+      })()
+      : Promise.resolve(null);
 
     const EditorSession = await this.loadEditorSessionClass();
     const session = this.createEditorSession(EditorSession, {
@@ -303,10 +323,7 @@ export class WorkspaceCoordinator {
     this.onSessionAssigned?.(session);
 
     try {
-      let fileOpenReady = false;
       let fileOpenFinalized = false;
-      let liveSyncComplete = false;
-
       const readySession = async (reason) => {
         if (fileOpenReady || loadToken !== this.stateStore.sessionLoadToken) {
           return;
@@ -335,24 +352,6 @@ export class WorkspaceCoordinator {
         });
       };
 
-      const bootstrapPromise = this.loadBootstrapContent
-        ? (async () => {
-          this.reportFileOpenMetric('bootstrap_fetch_started', loadToken);
-          try {
-            const content = await this.loadBootstrapContent(filePath);
-            this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
-              found: content !== null,
-            });
-            return content;
-          } catch (error) {
-            this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
-              error: error.message,
-              found: false,
-            });
-            return null;
-          }
-        })()
-        : Promise.resolve(null);
 
       const initializePromise = session.initialize(filePath);
       const liveSyncPromise = (async () => {