collabmd 0.1.27 → 0.1.30

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

@@ -30,7 +30,9 @@ const VERSION_RELOAD_TOAST_DURATION_MS = 0;
 
 /** @this {UiShellContext} */
 function initialize() {
+  this.initializeExportBridge?.();
   this.renderMarkdownToolbar?.();
+  this.initializeVisualViewportBinding?.();
   this.themeController.initialize();
   this.previewRenderer.applyTheme(this.themeController.getTheme());
   this.previewRenderer.scheduleWorkerPrewarm();
@@ -79,6 +81,40 @@ function initializeVersionMonitoring() {
   this.versionMonitor?.start();
 }
 
+/** @this {UiShellContext} */
+function syncVisualViewportBounds() {
+  const root = document.documentElement;
+  const viewport = window.visualViewport;
+
+  if (!root) {
+    return;
+  }
+
+  if (!viewport) {
+    root.style.setProperty('--app-viewport-height', '100dvh');
+    root.style.setProperty('--app-viewport-offset-top', '0px');
+    return;
+  }
+
+  root.style.setProperty('--app-viewport-height', `${Math.round(viewport.height)}px`);
+  root.style.setProperty('--app-viewport-offset-top', `${Math.round(viewport.offsetTop)}px`);
+}
+
+/** @this {UiShellContext} */
+function initializeVisualViewportBinding() {
+  this.syncVisualViewportBounds?.();
+
+  const viewport = window.visualViewport;
+  if (!viewport) {
+    return;
+  }
+
+  const handler = () => this.syncVisualViewportBounds?.();
+  viewport.addEventListener('resize', handler, { passive: true });
+  viewport.addEventListener('scroll', handler, { passive: true });
+  window.addEventListener('orientationchange', handler);
+}
+
 /** @this {UiShellContext} */
 function promptForVersionReload(payload = null) {
   if (this._reloadPromptShown) {
@@ -130,6 +166,21 @@ function bindEvents() {
     this.closeToolbarOverflowMenu?.();
   });
 
+  this.elements.searchFilesButton?.addEventListener('click', () => {
+    void this.toggleQuickSwitcher();
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.exportDocxButton?.addEventListener('click', () => {
+    void this.handleExportRequest?.('docx');
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.exportPdfButton?.addEventListener('click', () => {
+    void this.handleExportRequest?.('pdf');
+    this.closeToolbarOverflowMenu?.();
+  });
+
   this.elements.fileHistoryButton?.addEventListener('click', () => {
     const route = this.navigation.getHashRoute();
     if (route.type === 'git-file-preview') {
@@ -208,6 +259,10 @@ function bindEvents() {
     this.toggleLineWrapping();
   });
 
+  this.elements.editorFindButton?.addEventListener('click', () => {
+    this.runEditorCommand?.('openSearch');
+  });
+
   this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
     event.preventDefault();
     this.toggleToolbarOverflowMenu();
@@ -220,13 +275,7 @@ function bindEvents() {
   });
 
   this.elements.previewContent?.addEventListener('click', (event) => {
-    const wikiLink = event.target.closest('a.wiki-link[data-wiki-target]');
-    if (!wikiLink) {
-      return;
-    }
-
-    event.preventDefault();
-    this.handleWikiLinkClick(wikiLink.dataset.wikiTarget);
+    this.handlePreviewContentClick?.(event);
   });
 
   this.elements.sidebarToggle?.addEventListener('click', () => {
@@ -289,12 +338,60 @@ function bindEvents() {
   });
 }
 
+function isNestedTaskListClickTarget(target, taskItem) {
+  const nestedList = target.closest('ul, ol');
+  return nestedList instanceof Element && nestedList.parentElement === taskItem;
+}
+
+function isInteractiveTaskListDescendant(target) {
+  const taskCheckbox = target.closest('input[data-task-checkbox="true"]');
+  if (taskCheckbox) {
+    return false;
+  }
+
+  return Boolean(target.closest('a, button, input, select, textarea, summary, [contenteditable="true"], [role="button"], [role="link"]'));
+}
+
+/** @this {UiShellContext} */
+function handlePreviewContentClick(event) {
+  if (!(event.target instanceof Element)) {
+    return;
+  }
+
+  const wikiLink = event.target.closest('a.wiki-link[data-wiki-target]');
+  if (wikiLink) {
+    event.preventDefault();
+    this.handleWikiLinkClick(wikiLink.dataset.wikiTarget);
+    return;
+  }
+
+  const taskItem = event.target.closest('.task-list-item[data-source-line]');
+  if (!taskItem || isNestedTaskListClickTarget(event.target, taskItem) || isInteractiveTaskListDescendant(event.target)) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const sourceLine = Number.parseInt(taskItem.getAttribute('data-source-line') || '', 10);
+  if (!Number.isFinite(sourceLine)) {
+    return;
+  }
+
+  this.session?.toggleTaskListItem?.(sourceLine);
+}
+
 /** @this {UiShellContext} */
 function setToolbarOverflowOpen(nextState) {
-  this.toolbarOverflowOpen = Boolean(nextState) && this.isMobileViewport?.();
+  this.toolbarOverflowOpen = Boolean(nextState);
   this.elements.toolbarOverflowToggle?.setAttribute('aria-expanded', String(this.toolbarOverflowOpen));
   this.elements.toolbarOverflowToggle?.classList.toggle('active', this.toolbarOverflowOpen);
   this.elements.toolbarOverflowToggle?.closest('.toolbar-right')?.classList.toggle('is-overflow-open', this.toolbarOverflowOpen);
+
+  if (!this.toolbarOverflowOpen) {
+    this.elements.toolbarOverflowMenu?.querySelectorAll('details[open]').forEach((detail) => {
+      detail.removeAttribute('open');
+    });
+  }
 }
 
 /** @this {UiShellContext} */
@@ -304,14 +401,9 @@ function syncToolbarOverflowVisibility() {
     return;
   }
 
-  const isMobile = this.isMobileViewport?.();
-  if (!isMobile) {
-    this.setToolbarOverflowOpen(false);
-  }
-
-  toggle.classList.toggle('hidden', !isMobile);
-  toggle.hidden = !isMobile;
-  toggle.setAttribute('aria-hidden', String(!isMobile));
+  toggle.classList.remove('hidden');
+  toggle.hidden = false;
+  toggle.setAttribute('aria-hidden', 'false');
 }
 
 /** @this {UiShellContext} */
@@ -429,15 +521,18 @@ export const uiFeatureShellMethods = {
   closeToolbarOverflowMenu,
   getStoredLineWrapping,
   handleConnectionChange,
+  handlePreviewContentClick,
   handleThemeChange,
   hideEditorLoading,
   initialize,
+  initializeVisualViewportBinding,
   initializeVersionMonitoring,
-  setToolbarOverflowOpen,
   promptForVersionReload,
   scheduleBacklinkRefresh,
+  setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
+  syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
   syncWrapToggle,
   toggleToolbarOverflowMenu,

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

@@ -29,7 +29,9 @@ function normalizeToolbarAction(action) {
 
 function renderToolbarButtons(actions) {
   return actions.map((item) => (
-    `<button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" data-markdown-action="${escapeHtml(item.action)}" aria-label="${escapeHtml(item.label)}" title="${escapeHtml(item.title)}">${item.icon}</button>`
+    `<button type="button" class="ui-icon-button ui-icon-button--toolbar ui-toolbar-action" ${item.commandId
+      ? `data-editor-command="${escapeHtml(item.commandId)}"`
+      : `data-markdown-action="${escapeHtml(item.action)}"`} aria-label="${escapeHtml(item.label)}" title="${escapeHtml(item.title)}">${item.icon}</button>`
   )).join('');
 }
 
@@ -41,7 +43,7 @@ function renderBlockMenuMarkup(activeAction) {
     <div class="markdown-toolbar-block-menu-shell">
       <button
         type="button"
-        class="ui-button btn btn-ghost markdown-toolbar-block-trigger"
+        class="ui-button ui-button--ghost markdown-toolbar-block-trigger"
         data-markdown-block-menu-toggle
         aria-haspopup="menu"
         aria-expanded="false"
@@ -80,7 +82,7 @@ function renderMarkdownToolbarMarkup(activeAction) {
     }
 
     return `
-      <div class="markdown-toolbar-group" role="group" aria-label="${escapeHtml(group.groupLabel)}">
+      <div class="markdown-toolbar-group${group.mobileOnly ? ' markdown-toolbar-group--mobile-only' : ''}" role="group" aria-label="${escapeHtml(group.groupLabel)}">
         ${renderToolbarButtons(group.actions)}
       </div>
     `;
@@ -95,7 +97,7 @@ function renderMarkdownToolbarMarkup(activeAction) {
  * @property {{ refresh(): Promise<void> }} fileExplorer
  * @property {{ show(message: string): void }} toastController
  * @property {{ uploadImageAttachment(payload: { file: File, fileName: string, sourcePath: string }): Promise<{ markdown?: string, path?: string }>} } vaultApiClient
- * @property {{ applyMarkdownToolbarAction(action: string): boolean, insertText(text: string): void } | null} session
+ * @property {{ applyMarkdownToolbarAction(action: string): boolean, insertText(text: string): void, runEditorCommand?(commandId: string): boolean } | null} session
  * @property {() => Promise<File | null>} pickImageFile
  * @property {(file: File) => Promise<boolean>} handleEditorImageInsert
  * @property {() => Promise<void>} handleToolbarImageInsert
@@ -273,6 +275,14 @@ function handleMarkdownToolbarClick(event) {
     return;
   }
 
+  const editorCommandButton = target.closest('[data-editor-command]');
+  const editorCommandId = editorCommandButton?.getAttribute('data-editor-command');
+  if (editorCommandId) {
+    event.preventDefault();
+    this.runEditorCommand(editorCommandId);
+    return;
+  }
+
   const blockMenuToggle = target.closest('[data-markdown-block-menu-toggle]');
   if (blockMenuToggle) {
     event.preventDefault();
@@ -379,6 +389,17 @@ function applyMarkdownToolbarAction(action) {
   }
 }
 
+/** @this {UiToolbarContext} */
+function runEditorCommand(commandId) {
+  const ran = this.session?.runEditorCommand?.(commandId);
+  if (!ran) {
+    this.toastController.show('Editor action is unavailable');
+    return false;
+  }
+
+  return true;
+}
+
 /** @this {UiToolbarContext} */
 async function handleToolbarImageInsert() {
   const file = await this.pickImageFile();
@@ -514,6 +535,7 @@ export const uiFeatureToolbarMethods = {
   renderMarkdownBlockMenuPopover,
   pickImageFile,
   renderMarkdownToolbar,
+  runEditorCommand,
   setActiveMarkdownBlockAction,
   syncMarkdownToolbarBlockUi,
   toggleMarkdownBlockMenu,

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

@@ -48,7 +48,9 @@ export const workspaceFeature = {
       return String(previewDocument.content ?? '');
     }
 
-    return this.workspacePreviewController.getPreviewSource(this.currentFilePath);
+    return this.workspacePreviewController.getPreviewSource(this.currentFilePath, {
+      drawioMode: this.currentDrawioMode ?? null,
+    });
   },
 
   getStaticPreviewDocument() {
@@ -88,8 +90,34 @@ export const workspaceFeature = {
     this.workspacePreviewController.resetPreviewMode();
   },
 
-  syncFileChrome(filePath) {
-    this.workspacePreviewController.syncFileChrome(filePath);
+  syncFileChrome(filePath, options = {}) {
+    this.workspacePreviewController.syncFileChrome(filePath, options);
+  },
+
+  handleLayoutViewRequest(view) {
+    if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
+      return true;
+    }
+
+    if (this.currentDrawioMode === 'text') {
+      if (view !== 'preview') {
+        return true;
+      }
+
+      if (this.layoutController.isMobileViewport?.()) {
+        this.layoutController.primeView(view);
+      }
+      this.navigation.navigateToFile(this.currentFilePath);
+      return false;
+    }
+
+    if (view === 'preview') {
+      return true;
+    }
+
+    this.layoutController.primeView(view);
+    this.navigation.navigateToFile(this.currentFilePath, { drawioMode: 'text' });
+    return false;
   },
 
   renderExcalidrawFilePreview(filePath) {

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

@@ -33,7 +33,11 @@ export function bindAppShellElements(doc = document) {
     displayNameSubmit: doc.getElementById('displayNameSubmit'),
     displayNameTitle: doc.getElementById('displayNameTitle'),
     editNameButton: doc.getElementById('editNameBtn'),
+    editorFindButton: doc.getElementById('editorFindBtn'),
     editorContainer: doc.getElementById('editorContainer'),
+    exportDocxButton: doc.getElementById('exportDocxBtn'),
+    exportMenuGroup: doc.getElementById('exportMenuGroup'),
+    exportPdfButton: doc.getElementById('exportPdfBtn'),
     markdownToolbar: doc.getElementById('markdownToolbar'),
     editorPage: doc.getElementById('editor-page'),
     diffPage: doc.getElementById('diff-page'),
@@ -49,6 +53,7 @@ export function bindAppShellElements(doc = document) {
     mobileViewToggle: doc.getElementById('mobileViewToggle'),
     previewContent: doc.getElementById('previewContent'),
     previewContainer: doc.getElementById('previewContainer'),
+    searchFilesButton: doc.getElementById('searchFilesBtn'),
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),
     toggleWrapButton: doc.getElementById('toggleWrapBtn'),

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

@@ -291,7 +291,7 @@ export class DiagramPreviewHydrator {
     this.hydrationInProgress = true;
     this.renderer.setPhase('hydrating');
 
-    let batchContext = null;
+    let batchContext;
     try {
       batchContext = await this.prepareHydrationBatch(shells);
     } catch (error) {

package/src/client/application/markdown-frontmatter.js

@@ -0,0 +1,152 @@
+import yaml from 'js-yaml';
+
+import { escapeHtml } from '../domain/vault-utils.js';
+
+function getDocumentNewline(markdownText = '') {
+  return String(markdownText).includes('\r\n') ? '\r\n' : '\n';
+}
+
+function normalizeLine(line = '') {
+  return String(line).replace(/\r$/, '');
+}
+
+function isPlainObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+function isScalarValue(value) {
+  return (
+    value == null
+    || typeof value === 'string'
+    || typeof value === 'number'
+    || typeof value === 'boolean'
+    || value instanceof Date
+  );
+}
+
+function formatScalarValue(value) {
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+
+  if (value == null) {
+    return 'null';
+  }
+
+  return String(value);
+}
+
+function serializeComplexValue(value) {
+  return yaml.dump(value, {
+    lineWidth: -1,
+    noRefs: true,
+  }).trim();
+}
+
+function createFrontmatterValueMarkup(value) {
+  if (isScalarValue(value)) {
+    return `<span class="frontmatter-value-text">${escapeHtml(formatScalarValue(value))}</span>`;
+  }
+
+  if (Array.isArray(value) && value.every((item) => isScalarValue(item))) {
+    return `<div class="frontmatter-value-list">${value
+      .map((item) => `<span class="frontmatter-value-pill">${escapeHtml(formatScalarValue(item))}</span>`)
+      .join('')}</div>`;
+  }
+
+  return `<pre class="frontmatter-value-code"><code>${escapeHtml(serializeComplexValue(value))}</code></pre>`;
+}
+
+function createFrontmatterEntries(data) {
+  if (isPlainObject(data)) {
+    return Object.entries(data);
+  }
+
+  return [['value', data]];
+}
+
+function createHiddenSummary(entries) {
+  if (entries.length === 0) {
+    return 'No properties';
+  }
+
+  return `${entries.length} propert${entries.length === 1 ? 'y' : 'ies'} hidden`;
+}
+
+export function extractYamlFrontmatter(markdownText = '') {
+  const normalizedMarkdown = String(markdownText ?? '');
+  if (!normalizedMarkdown.startsWith('---')) {
+    return null;
+  }
+
+  const newline = getDocumentNewline(normalizedMarkdown);
+  const lines = normalizedMarkdown.split(/\r?\n/);
+  if (normalizeLine(lines[0]) !== '---') {
+    return null;
+  }
+
+  let closingIndex = -1;
+  for (let index = 1; index < lines.length; index += 1) {
+    if (normalizeLine(lines[index]) === '---') {
+      closingIndex = index;
+      break;
+    }
+  }
+
+  if (closingIndex < 0) {
+    return null;
+  }
+
+  const rawFrontmatter = lines.slice(0, closingIndex + 1).join(newline);
+  const frontmatterSource = lines.slice(1, closingIndex).join(newline);
+
+  let parsedData;
+  try {
+    parsedData = yaml.load(frontmatterSource || '{}');
+  } catch {
+    return null;
+  }
+
+  const lineCount = closingIndex + 1;
+  const bodyMarkdown = [
+    ...Array.from({ length: lineCount }, () => ''),
+    ...lines.slice(closingIndex + 1),
+  ].join(newline);
+
+  return {
+    bodyMarkdown,
+    data: parsedData ?? {},
+    endLine: lineCount,
+    rawFrontmatter,
+    startLine: 1,
+  };
+}
+
+export function renderFrontmatterBlock(frontmatter, {
+  collapsed = false,
+  interactive = false,
+} = {}) {
+  if (!frontmatter) {
+    return '';
+  }
+
+  const entries = createFrontmatterEntries(frontmatter.data);
+  const collapsedState = interactive && collapsed;
+  const sourceAttributes = ` data-source-line="${frontmatter.startLine}" data-source-line-end="${frontmatter.endLine}"${interactive ? ` data-collapsed="${collapsedState ? 'true' : 'false'}"` : ''}`;
+  const bodyId = `frontmatter-body-${frontmatter.startLine}-${frontmatter.endLine}`;
+  const emptyState = entries.length === 0
+    ? '<div class="frontmatter-empty">No properties</div>'
+    : '';
+  const items = entries.map(([key, value]) => (
+    `<div class="frontmatter-property"><dt class="frontmatter-key">${escapeHtml(key)}</dt><dd class="frontmatter-value">${createFrontmatterValueMarkup(value)}</dd></div>`
+  )).join('');
+  const header = interactive
+    ? `<div class="frontmatter-header"><div class="frontmatter-label">Properties</div><button type="button" class="frontmatter-toggle" aria-controls="${bodyId}" aria-expanded="${collapsedState ? 'false' : 'true'}">${collapsedState ? 'Show' : 'Hide'}</button></div>`
+    : '<div class="frontmatter-label">Properties</div>';
+  const summary = interactive
+    ? `<div class="frontmatter-summary"${collapsedState ? '' : ' hidden'}>${escapeHtml(createHiddenSummary(entries))}</div>`
+    : '';
+  const bodyAttributes = ` class="frontmatter-content"${interactive ? ` id="${bodyId}"` : ''}${collapsedState ? ' hidden' : ''}`;
+
+  return `<section class="frontmatter-block"${sourceAttributes}>${header}${summary}<div${bodyAttributes}><dl class="frontmatter-properties">${items}</dl>${emptyState}</div></section>`;
+}

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

@@ -3,6 +3,7 @@ import hljs from 'highlight.js';
 
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { escapeHtml, resolveVaultRelativePath, resolveWikiTarget } from '../domain/vault-utils.js';
+import { extractYamlFrontmatter, renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
@@ -161,12 +162,14 @@ function createVideoEmbedPlaceholder({
   kind,
   label,
   mimeType = '',
+  originalUrl = '',
   source,
   url,
 }) {
   const subtitle = kind === 'youtube' ? 'YouTube video' : 'Video file';
   const mimeTypeAttribute = mimeType ? ` data-video-embed-mime-type="${escapeHtml(mimeType)}"` : '';
-  return `<span class="video-embed-placeholder video-embed-shell diagram-preview-shell" data-video-embed-key="${escapeHtml(embedKey)}" data-video-embed-kind="${escapeHtml(kind)}" data-video-embed-label="${escapeHtml(label)}" data-video-embed-source="${escapeHtml(source)}" data-video-embed-url="${escapeHtml(url)}"${mimeTypeAttribute}><span class="video-embed-placeholder-card diagram-preview-placeholder-card"><span class="video-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>${escapeHtml(subtitle)}</span></span></span></span>`;
+  const originalUrlAttribute = originalUrl ? ` data-video-embed-original-url="${escapeHtml(originalUrl)}"` : '';
+  return `<span class="video-embed-placeholder video-embed-shell diagram-preview-shell" data-video-embed-key="${escapeHtml(embedKey)}" data-video-embed-kind="${escapeHtml(kind)}" data-video-embed-label="${escapeHtml(label)}" data-video-embed-source="${escapeHtml(source)}" data-video-embed-url="${escapeHtml(url)}"${mimeTypeAttribute}${originalUrlAttribute}><span class="video-embed-placeholder-card diagram-preview-placeholder-card"><span class="video-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>${escapeHtml(subtitle)}</span></span></span></span>`;
 }
 
 function renderVideoEmbed(token, videoEmbedCounts) {
@@ -189,6 +192,7 @@ function renderVideoEmbed(token, videoEmbedCounts) {
     kind: classification.type,
     label: title || 'Embedded video',
     mimeType: classification.mimeType,
+    originalUrl: source,
     source: preserveSource,
     url: classification.type === 'youtube' ? classification.embedUrl : classification.sourceUrl,
   });
@@ -411,7 +415,7 @@ function createMarkdownRenderer(fileList = [], {
     const content = tokens[index].content;
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
-      return `<input type="checkbox" checked disabled> ${renderInlineWikiText(content.slice(4), {
+      return `<input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
@@ -421,7 +425,7 @@ function createMarkdownRenderer(fileList = [], {
     }
 
     if (content.startsWith('[ ] ')) {
-      return `<input type="checkbox" disabled> ${renderInlineWikiText(content.slice(4), {
+      return `<input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
@@ -477,17 +481,25 @@ function createMarkdownRenderer(fileList = [], {
 export function compilePreviewDocument({
   attachmentApiPath = '/api/attachment',
   fileList = [],
+  frontmatterCollapsed = false,
+  frontmatterInteractive = false,
   markdownText = '',
   sourceFilePath = '',
 } = {}) {
   const normalizedMarkdown = String(markdownText);
+  const frontmatter = extractYamlFrontmatter(normalizedMarkdown);
   const renderer = createMarkdownRenderer(fileList, {
     attachmentApiPath,
     sourceFilePath,
   });
+  const renderedMarkdown = frontmatter ? frontmatter.bodyMarkdown : normalizedMarkdown;
+  const frontmatterHtml = renderFrontmatterBlock(frontmatter, {
+    collapsed: frontmatterCollapsed,
+    interactive: frontmatterInteractive,
+  });
 
   return {
-    html: renderer.render(normalizedMarkdown),
+    html: `${frontmatterHtml}${renderer.render(renderedMarkdown)}`,
     stats: analyzeMarkdownComplexity(normalizedMarkdown),
   };
 }

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

@@ -97,7 +97,10 @@ export class PreviewRenderExecutor {
     }
   }
 
-  async compile(markdownText, renderVersion) {
+  async compile(markdownText, renderVersion, {
+    frontmatterCollapsed = false,
+    frontmatterInteractive = false,
+  } = {}) {
     const worker = this.ensureWorker();
 
     if (worker) {
@@ -111,6 +114,8 @@ export class PreviewRenderExecutor {
         activeWorker.postMessage({
           attachmentApiPath: this.attachmentApiPath,
           fileList: this.getFileList?.() ?? [],
+          frontmatterCollapsed,
+          frontmatterInteractive,
           markdownText,
           renderVersion,
           sourceFilePath: this.getSourceFilePath?.() ?? '',
@@ -122,6 +127,8 @@ export class PreviewRenderExecutor {
     return compilePreviewDocument({
       attachmentApiPath: this.attachmentApiPath,
       fileList: this.getFileList?.() ?? [],
+      frontmatterCollapsed,
+      frontmatterInteractive,
       markdownText,
       sourceFilePath: this.getSourceFilePath?.() ?? '',
     });

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

@@ -4,6 +4,8 @@ self.onmessage = (event) => {
   const {
     attachmentApiPath,
     fileList,
+    frontmatterCollapsed,
+    frontmatterInteractive,
     markdownText,
     renderVersion,
     sourceFilePath,
@@ -13,6 +15,8 @@ self.onmessage = (event) => {
     const result = compilePreviewDocument({
       attachmentApiPath,
       fileList,
+      frontmatterCollapsed,
+      frontmatterInteractive,
       markdownText,
       sourceFilePath,
     });