collabmd 0.1.49 → 0.1.52

package/src/client/application/app-shell/ui-feature-shell.js

@@ -1,6 +1,6 @@
 import { getVaultFileKind, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 import { isPlainQuickSwitcherShortcut } from '../../domain/keyboard-shortcuts.js';
-import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-routes.js';
+import { createFileRouteHash, isCollabMdHashRoute, isGitHashRouteType } from '../../domain/hash-routes.js';
 
 const VERSION_RELOAD_TOAST_DURATION_MS = 0;
 const PREVIEW_ROUTE_ANCHOR_STABILIZE_MS = 2000;
@@ -48,14 +48,13 @@ const PREVIEW_HEADING_LINK_ICON = `
  */
 
 /** @this {UiShellContext} */
-function initialize() {
+async function initialize() {
+  await this.hostedGateController?.initialize();
   this.initializeExportBridge?.();
   this.renderMarkdownToolbar?.();
   this.initializeVisualViewportBinding?.();
   this.themeController.initialize();
   this.previewRenderer.applyTheme(this.themeController.getTheme());
-  this.previewRenderer.scheduleWorkerPrewarm();
-  this.scheduleEditorSessionPrewarm?.();
   this.outlineController.initialize();
   this.layoutController.initialize();
   this.scrollSyncController.initialize();
@@ -67,6 +66,7 @@ function initialize() {
   this.initializePreviewLayoutObserver();
   this.syncIdentityManagementUi();
   this.syncCurrentUserName();
+  this.syncCursorNamesToggle();
   this.syncWrapToggle();
   this.syncVimModeToggle();
   this.syncToolbarOverflowVisibility?.();
@@ -87,17 +87,24 @@ function initialize() {
     this.syncToolbarOverflowVisibility?.();
   });
 
+  if (this.runtimeConfig?.gitEnabled !== false) {
+    this.gitRepoAvailable = true;
+    this.elements.gitSidebarTab?.classList.remove('hidden');
+    this.elements.sidebarTabs?.classList.remove('hidden');
+  }
+
   this.fileExplorerReadyPromise = this.fileExplorer.refresh().then(() => {
     this.fileExplorerReady = true;
     void this.commentsOverview?.refresh?.();
-    if (this.runtimeConfig?.gitEnabled !== false) {
-      void this.gitPanel.refresh({ force: true });
+    if (isGitHashRouteType(this.navigation.getHashRoute().type)) {
+      void this.gitPanel.refresh({ force: false });
     }
     if (this.isTabActive) {
       return this.workspaceRouteController.handleHashChange();
     }
     return undefined;
   });
+
 }
 
 /** @this {UiShellContext} */
@@ -345,6 +352,12 @@ function bindEvents() {
     this.toggleLineWrapping();
   });
 
+  this.elements.toggleCursorNamesButton?.addEventListener('click', () => {
+    const visible = this.elements.editorContainer.classList.contains('hide-cursor-names');
+    this.preferences.setCursorNamesVisible(visible);
+    this.syncCursorNamesToggle(visible);
+  });
+
   this.elements.toggleVimModeButton?.addEventListener('click', () => {
     this.toggleVimMode();
   });
@@ -361,7 +374,7 @@ function bindEvents() {
 
   this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
     const button = event.target instanceof Element ? event.target.closest('button') : null;
-    if (button && button !== this.elements.toggleVimModeButton) {
+    if (button && button !== this.elements.toggleVimModeButton && button !== this.elements.toggleCursorNamesButton) {
       this.closeToolbarOverflowMenu();
     }
   });
@@ -377,6 +390,12 @@ function bindEvents() {
   this.elements.previewContent?.addEventListener('click', (event) => {
     this.handlePreviewContentClick?.(event);
   });
+  this.elements.previewContent?.addEventListener('pointerover', (event) => {
+    this.handlePreviewContentPointerOver?.(event);
+  });
+  this.elements.previewContent?.addEventListener('focusin', (event) => {
+    this.handlePreviewContentPointerOver?.(event);
+  });
 
   this.elements.sidebarToggle?.addEventListener('click', () => {
     this.closeToolbarOverflowMenu();
@@ -521,6 +540,7 @@ function navigatePreviewHeading(target, headingId, { behavior = 'auto' } = {}) {
 
   this.scrollSyncController?.suspendSync?.(250);
   scrollPreviewToTarget(previewContainer, target, { behavior });
+  this.attachPreviewHeadingControls?.(target);
 
   const sourceLine = Number.parseInt(target.getAttribute('data-source-line') || '', 10);
   if (Number.isFinite(sourceLine)) {
@@ -563,7 +583,7 @@ async function copyPreviewHeadingLink(anchorId) {
 
 /** @this {UiShellContext} */
 async function copyPreviewCodeBlock(button) {
-  const code = button?.closest('.preview-code-block')?.querySelector(':scope > pre > code');
+  const code = button?.closest('pre')?.querySelector(':scope > code');
   if (!(code instanceof HTMLElement)) {
     return;
   }
@@ -576,27 +596,107 @@ async function copyPreviewCodeBlock(button) {
   }
 }
 
+
+function syncHeadingFoldButtonState(heading, button) {
+  if (!(heading instanceof HTMLElement) || !(button instanceof HTMLButtonElement)) {
+    return;
+  }
+
+  const headingLabel = getHeadingLinkLabel(heading);
+  const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
+  heading.setAttribute('aria-expanded', String(!collapsed));
+  button.setAttribute('aria-expanded', String(!collapsed));
+  button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
+  button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+}
+
 /** @this {UiShellContext} */
-function syncPreviewCodeCopyButtons() {
-  this.elements.previewContent?.querySelectorAll('pre > code').forEach((code) => {
-    const pre = code.parentElement;
-    const wrapper = document.createElement('div');
-    wrapper.className = 'preview-code-block';
+function attachPreviewHeadingControls(heading) {
+  if (!(heading instanceof HTMLElement) || !/^H[1-6]$/.test(heading.tagName)) {
+    return;
+  }
+
+  if (!this._previewHeadingFoldButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-icon-button preview-heading-fold-button';
+    this._previewHeadingFoldButton = button;
+  }
+  if (!this._previewHeadingLinkButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-icon-button preview-heading-link-button';
     // pi-lens-ignore: no-inner-html-js
-    wrapper.innerHTML = `
-      <div class="preview-code-actions">
-        <button type="button" class="ui-button ui-button--secondary ui-button--compact preview-code-copy-button" aria-label="Copy code" title="Copy code">
-          ${PREVIEW_CODE_COPY_ICON}<span data-preview-code-copy-label>Copy</span>
-        </button>
-      </div>`;
-    pre.replaceWith(wrapper);
-    wrapper.append(pre);
-  });
+    button.innerHTML = PREVIEW_HEADING_LINK_ICON;
+    this._previewHeadingLinkButton = button;
+  }
+
+  const foldButton = this._previewHeadingFoldButton;
+  const linkButton = this._previewHeadingLinkButton;
+
+  if (foldButton.parentElement !== heading) {
+    heading.prepend(foldButton);
+  }
+  syncHeadingFoldButtonState(heading, foldButton);
+
+  if (!heading.id) {
+    linkButton.remove();
+    return;
+  }
+
+  const headingLabel = getHeadingLinkLabel(heading);
+  linkButton.dataset.previewHeadingAnchor = heading.id;
+  linkButton.setAttribute('aria-label', `Copy link to ${headingLabel}`);
+  linkButton.setAttribute('title', 'Copy link to this section');
+  if (linkButton.parentElement !== heading) {
+    heading.append(linkButton);
+  }
+}
+
+/** @this {UiShellContext} */
+function attachPreviewCodeCopyButton(pre) {
+  if (!(pre instanceof HTMLElement) || pre.tagName !== 'PRE' || !pre.querySelector(':scope > code')) {
+    return;
+  }
+
+  if (!this._previewCodeCopyButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-button ui-button--secondary ui-button--compact preview-code-copy-button';
+    button.setAttribute('aria-label', 'Copy code');
+    button.title = 'Copy code';
+    // pi-lens-ignore: no-inner-html-js
+    button.innerHTML = `${PREVIEW_CODE_COPY_ICON}<span data-preview-code-copy-label>Copy</span>`;
+    this._previewCodeCopyButton = button;
+  }
+
+  const button = this._previewCodeCopyButton;
+  if (button.parentElement !== pre) {
+    pre.append(button);
+  }
+}
+
+/** @this {UiShellContext} */
+function handlePreviewContentPointerOver(event) {
+  if (!(event.target instanceof Element) || !this.elements.previewContent) {
+    return;
+  }
+
+  const heading = event.target.closest('h1, h2, h3, h4, h5, h6');
+  if (heading instanceof HTMLElement && this.elements.previewContent.contains(heading)) {
+    this.attachPreviewHeadingControls(heading);
+  }
+
+  const pre = event.target.closest('pre');
+  if (pre instanceof HTMLElement && this.elements.previewContent.contains(pre)) {
+    this.attachPreviewCodeCopyButton(pre);
+  }
 }
 
+
 function applyPreviewHeadingFolds(previewContent) {
-  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('.preview-heading-fold-button') ?? [])
-    .map((button) => button.closest('h1, h2, h3, h4, h5, h6')?.parentElement)
+  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('h1, h2, h3, h4, h5, h6') ?? [])
+    .map((heading) => heading.parentElement)
     .filter(Boolean));
 
   parents.forEach((parent) => {
@@ -660,19 +760,12 @@ function syncPreviewHeadingFoldButtons() {
       return;
     }
 
-    const headingLabel = getHeadingLinkLabel(heading);
-    let button = heading.querySelector(':scope > .preview-heading-fold-button');
-    if (!(button instanceof HTMLButtonElement)) {
-      button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'ui-icon-button preview-heading-fold-button';
-      heading.prepend(button);
-    }
-
     const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
-    button.setAttribute('aria-expanded', String(!collapsed));
-    button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
-    button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+    heading.setAttribute('aria-expanded', String(!collapsed));
+    const button = heading.querySelector(':scope > .preview-heading-fold-button');
+    if (button instanceof HTMLButtonElement) {
+      syncHeadingFoldButtonState(heading, button);
+    }
   });
 
   applyPreviewHeadingFolds(this.elements.previewContent);
@@ -680,30 +773,19 @@ function syncPreviewHeadingFoldButtons() {
 
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
-  const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
-
-  Array.from(headings).forEach((heading) => {
-    if (!(heading instanceof HTMLElement) || !heading.id) {
-      return;
-    }
-
-    const headingLabel = getHeadingLinkLabel(heading);
-    let button = heading.querySelector(':scope > .preview-heading-link-button');
-    if (!(button instanceof HTMLButtonElement)) {
-      button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'ui-icon-button preview-heading-link-button';
-      // pi-lens-ignore: no-inner-html-js
-      button.innerHTML = PREVIEW_HEADING_LINK_ICON;
-      heading.appendChild(button);
-    }
+  const linkButton = this._previewHeadingLinkButton;
+  const heading = linkButton?.parentElement;
+  if (!(heading instanceof HTMLElement) || !heading.id) {
+    return;
+  }
 
-    button.dataset.previewHeadingAnchor = heading.id;
-    button.setAttribute('aria-label', `Copy link to ${headingLabel}`);
-    button.setAttribute('title', 'Copy link to this section');
-  });
+  const headingLabel = getHeadingLinkLabel(heading);
+  linkButton.dataset.previewHeadingAnchor = heading.id;
+  linkButton.setAttribute('aria-label', `Copy link to ${headingLabel}`);
+  linkButton.setAttribute('title', 'Copy link to this section');
 }
 
+
 /** @this {UiShellContext} */
 function requestPreviewRouteAnchor(anchorId, filePath = this.currentFilePath) {
   const normalizedAnchor = String(anchorId ?? '').trim();
@@ -868,7 +950,8 @@ function closeToolbarOverflowMenu() {
 function handleThemeChange(theme) {
   this.previewRenderer.applyTheme(theme);
   if (
-    !this.isExcalidrawFile(this.currentFilePath)
+    this.currentFilePath
+    && !this.isExcalidrawFile(this.currentFilePath)
     && !this.isImageFile?.(this.currentFilePath)
     && !this.isPdfFile?.(this.currentFilePath)
     && !this.isStructurizrWorkspaceFile?.(this.currentFilePath)
@@ -967,6 +1050,17 @@ function syncVimModeToggle(state) {
   }
 }
 
+/** @this {UiShellContext} */
+function syncCursorNamesToggle(visible = this.preferences.getCursorNamesVisible()) {
+  this.elements.editorContainer?.classList.toggle('hide-cursor-names', !visible);
+  const label = this.elements.cursorNamesToggleLabel;
+  if (label) label.textContent = visible ? 'On' : 'Off';
+  const button = this.elements.toggleCursorNamesButton;
+  button?.setAttribute('aria-pressed', String(visible));
+  button?.setAttribute('aria-label', `${visible ? 'Hide' : 'Show'} cursor names`);
+  button?.setAttribute('title', `${visible ? 'Hide' : 'Show'} cursor names`);
+}
+
 /** @this {UiShellContext} */
 function syncWrapToggle(state) {
   const enabled = state ?? this.session?.isLineWrappingEnabled() ?? this.getStoredLineWrapping();
@@ -1031,6 +1125,8 @@ function clearInitialFileBootstrap() {
 
 export const uiFeatureShellMethods = {
   applyPendingPreviewRouteAnchor,
+  attachPreviewCodeCopyButton,
+  attachPreviewHeadingControls,
   bindEvents,
   clearInitialFileBootstrap,
   closeToolbarOverflowMenu,
@@ -1044,6 +1140,7 @@ export const uiFeatureShellMethods = {
   handleConnectionChange,
   handleDocumentKeydown,
   handlePreviewContentClick,
+  handlePreviewContentPointerOver,
   handleThemeChange,
   hideEditorLoading,
   initialize,
@@ -1056,12 +1153,12 @@ export const uiFeatureShellMethods = {
   scheduleBacklinkRefresh,
   showEditorLoadError,
   showEditorLoading,
-  syncPreviewCodeCopyButtons,
   syncPreviewHeadingFoldButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
   syncVimModeToggle,
+  syncCursorNamesToggle,
   syncWrapToggle,
   toggleLineWrapping,
   unfoldPreviewHeading,

package/src/client/application/app-shell/ui-feature-tab-activity.js

@@ -41,9 +41,7 @@ function handleTabActivated({ takeover = false } = {}) {
   if (!this.lobby.provider) {
     this.lobby.connect();
   }
-  if (!this.workspaceSync.provider) {
-    this.workspaceSync.connect();
-  }
+  this.connectWorkspaceSync();
 
   if (wasInactive) {
     if (this.fileExplorerReady) {
@@ -57,6 +55,12 @@ function handleTabActivated({ takeover = false } = {}) {
   }
 }
 
+function connectWorkspaceSync() {
+  if (!this.workspaceSync.provider) {
+    this.workspaceSync.connect();
+  }
+}
+
 /** @this {UiTabActivityContext} */
 async function handleTabBlocked({ reason } = {}) {
   const wasActive = this.isTabActive;
@@ -134,6 +138,7 @@ function hideTabLockOverlay() {
 }
 
 export const uiFeatureTabActivityMethods = {
+  connectWorkspaceSync,
   handleTabActivated,
   handleTabBlocked,
   handleTabTakeover,

package/src/client/application/app-shell-elements.js

@@ -3,6 +3,11 @@ export function bindAppShellElements(doc = document) {
     agentConnectionContent: doc.getElementById('agentConnectionContent'),
     agentConnectionDialog: doc.getElementById('agentConnectionDialog'),
     connectAgentButton: doc.getElementById('connectAgentBtn'),
+    appShell: doc.getElementById('appShell'),
+    hostedGate: doc.getElementById('hostedGate'),
+    teamSettingsButton: doc.getElementById('teamSettingsBtn'),
+    teamSettingsContent: doc.getElementById('teamSettingsContent'),
+    teamSettingsDialog: doc.getElementById('teamSettingsDialog'),
     currentUserName: doc.getElementById('currentUserName'),
     chatContainer: doc.getElementById('chatContainer'),
     chatEmptyState: doc.getElementById('chatEmptyState'),
@@ -76,6 +81,8 @@ export function bindAppShellElements(doc = document) {
     toggleVimModeButton: doc.getElementById('toggleVimModeBtn'),
     userAvatars: doc.getElementById('userAvatars'),
     userCount: doc.getElementById('userCount'),
+    cursorNamesToggleLabel: doc.getElementById('cursorNamesToggleLabel'),
+    toggleCursorNamesButton: doc.getElementById('toggleCursorNamesBtn'),
     wrapToggleLabel: doc.getElementById('wrapToggleLabel'),
     vimModeToggleLabel: doc.getElementById('vimModeToggleLabel'),
     activeFileName: doc.getElementById('activeFileName'),

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

@@ -409,6 +409,13 @@ export class DiagramPreviewHydrator {
       return;
     }
 
+    if (this.observer && typeof IntersectionObserver !== 'undefined') {
+      Array.from(previewElement.querySelectorAll(this.shellSelector)).forEach((shell) => {
+        this.observer.observe(shell);
+      });
+      return;
+    }
+
     const margin = this.renderer.isLargeDocument ? 180 : 420;
     Array.from(previewElement.querySelectorAll(this.shellSelector)).forEach((shell) => {
       if (this.isNearViewportFn(shell, previewContainer, margin)) {

package/src/client/application/highlight-theme.js

@@ -0,0 +1,16 @@
+import darkHighlightThemeUrl from '../assets/vendor/highlight/github-dark.min.css?url';
+import lightHighlightThemeUrl from '../assets/vendor/highlight/github.min.css?url';
+
+export function ensureHighlightThemeStylesheet() {
+  let themeStylesheet = document.getElementById('hljs-theme');
+  if (!(themeStylesheet instanceof HTMLLinkElement)) {
+    themeStylesheet = document.createElement('link');
+    themeStylesheet.id = 'hljs-theme';
+    themeStylesheet.rel = 'stylesheet';
+    document.head.append(themeStylesheet);
+  }
+
+  themeStylesheet.href = darkHighlightThemeUrl;
+  themeStylesheet.dataset.darkHref = darkHighlightThemeUrl;
+  themeStylesheet.dataset.lightHref = lightHighlightThemeUrl;
+}

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

@@ -7,10 +7,27 @@ import {
   createMermaidPlaceholderCardWithMessage,
   createDiagramErrorPlaceholderCard,
   MERMAID_BATCH_SIZE,
+  MERMAID_RENDER_CACHE_LIMIT,
   normalizeDiagramError,
   normalizeMermaidSvg,
+  resolveSvgDimensions,
 } from './preview-diagram-utils.js';
 
+function parseCachedSvgMarkup(svgMarkup) {
+  try {
+    const template = document.createElement('template');
+    template.innerHTML = String(svgMarkup);
+    const svg = template.content?.querySelector?.('svg');
+    if (svg?.nodeName?.toLowerCase() === 'svg') {
+      return svg;
+    }
+  } catch {
+    // Fall through to a fresh render below.
+  }
+
+  return null;
+}
+
 export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   constructor(renderer, { loadFileSource = null } = {}) {
     super(renderer, {
@@ -35,6 +52,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     this.diagramChrome = renderer.diagramChrome;
     this.loader = null;
     this.runtime = null;
+    this.renderCache = new Map();
   }
 
   cancelHydration({ preserveActiveShell = false } = {}) {
@@ -45,6 +63,10 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   }
 
   applyTheme(theme) {
+    if (theme === this.currentTheme) {
+      return;
+    }
+
     this.currentTheme = theme;
     const mermaid = this.runtime;
     if (!mermaid) {
@@ -181,6 +203,16 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       const renderedSource = source;
       source = this.prepareSource(source);
 
+      const renderCacheKey = this.getRenderCacheKey(source);
+      if (this.tryMountCachedDiagram(shell, {
+        hydrationToken,
+        renderCacheKey,
+        renderedSource,
+        renderVersion,
+      })) {
+        return;
+      }
+
       shell.querySelector('.mermaid-placeholder-card')?.remove();
 
       const diagram = document.createElement('div');
@@ -208,7 +240,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
           return;
         }
 
-        this.enhanceDiagram(shell, diagram, renderedSource);
+        this.enhanceDiagram(shell, diagram, renderedSource, renderCacheKey);
         this.markShellHydrated(shell);
       } finally {
         renderHost.remove();
@@ -326,21 +358,30 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     }
   }
 
-  enhanceDiagram(shell, renderedDiagram, renderedSource = '') {
+  enhanceDiagram(shell, renderedDiagram, renderedSource = '', renderCacheKey = null) {
     const svg = renderedDiagram.querySelector('svg');
     if (!svg) {
       renderedDiagram.remove();
       return;
     }
     const { width: baseWidth, height: baseHeight } = normalizeMermaidSvg(svg);
+    if (renderCacheKey) {
+      // The markup is already normalized (viewBox/size set), so a cache hit
+      // can mount without another mermaid run or layout measurement.
+      this.storeRenderCache(renderCacheKey, svg.outerHTML);
+    }
 
+    renderedDiagram.remove();
+    this.mountDiagramSvg(shell, svg, { baseWidth, baseHeight, renderedSource });
+  }
+
+  mountDiagramSvg(shell, svg, { baseWidth, baseHeight, renderedSource = '' } = {}) {
     const exportFileNames = () => createDiagramExportFileNames({
       currentFilePath: this.renderer.getSourceFilePath?.() ?? '',
       diagramKind: 'mermaid',
       sourceLine: shell.getAttribute('data-source-line') || '',
       targetPath: shell.dataset.mermaidTarget || '',
     });
-    renderedDiagram.remove();
     this.diagramChrome.mount(shell, {
       baseHeight,
       baseWidth,
@@ -353,4 +394,49 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     shell._diagramRenderedSource = renderedSource;
   }
 
+  tryMountCachedDiagram(shell, {
+    hydrationToken,
+    renderCacheKey,
+    renderedSource = '',
+    renderVersion,
+  } = {}) {
+    const cachedSvgMarkup = this.renderCache.get(renderCacheKey) ?? null;
+    if (!cachedSvgMarkup) {
+      return false;
+    }
+
+    shell.querySelector('.mermaid-placeholder-card')?.remove();
+    const svg = parseCachedSvgMarkup(cachedSvgMarkup);
+    if (
+      this.isHydrationCurrent(renderVersion, shell, hydrationToken)
+      && svg
+    ) {
+      const { width, height } = resolveSvgDimensions(svg);
+      this.mountDiagramSvg(shell, svg, { baseWidth: width, baseHeight: height, renderedSource });
+      this.markShellHydrated(shell);
+      return true;
+    }
+
+    this.renderCache.delete(renderCacheKey);
+    return false;
+  }
+
+  getRenderCacheKey(preparedSource) {
+    return `${this.currentTheme}\n${preparedSource}`;
+  }
+
+  storeRenderCache(key, markup) {
+    if (!key || !markup) {
+      return;
+    }
+
+    if (this.renderCache.has(key)) {
+      this.renderCache.delete(key);
+    }
+    while (this.renderCache.size >= MERMAID_RENDER_CACHE_LIMIT) {
+      this.renderCache.delete(this.renderCache.keys().next().value);
+    }
+    this.renderCache.set(key, markup);
+  }
+
 }

package/src/client/application/preview-diagram-utils.js

@@ -1,5 +1,6 @@
 export const IDLE_RENDER_TIMEOUT_MS = 500;
 export const MERMAID_BATCH_SIZE = 2;
+export const MERMAID_RENDER_CACHE_LIMIT = 30;
 export const PLANTUML_BATCH_SIZE = 2;
 
 export {