collabmd 0.1.29 → 0.1.30

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('');
 }
 
@@ -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-elements.js

@@ -33,6 +33,7 @@ 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'),
@@ -52,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({
@@ -480,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,
     });

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

@@ -13,6 +13,7 @@ export class PreviewRenderer {
     getSourceFilePath,
     onAfterRenderCommit,
     onBeforeRenderCommit,
+    onPreviewLayoutChange,
     onRenderComplete,
     outlineController,
     previewContainer,
@@ -23,6 +24,7 @@ export class PreviewRenderer {
     this.getSourceFilePath = getSourceFilePath;
     this.onAfterRenderCommit = onAfterRenderCommit;
     this.onBeforeRenderCommit = onBeforeRenderCommit;
+    this.onPreviewLayoutChange = onPreviewLayoutChange;
     this.onRenderComplete = onRenderComplete;
     this.outlineController = outlineController;
     this.previewContainer = previewContainer;
@@ -35,8 +37,18 @@ export class PreviewRenderer {
     this.currentStats = null;
     this.isLargeDocument = false;
     this.hydrationPaused = false;
+    this.frontmatterCollapsed = false;
 
     this.handlePreviewClick = (event) => {
+      const frontmatterToggle = event.target.closest('.frontmatter-toggle');
+      if (frontmatterToggle) {
+        event.preventDefault();
+        this.frontmatterCollapsed = !this.frontmatterCollapsed;
+        this.applyFrontmatterState();
+        this.handleFrontmatterLayoutChange();
+        return;
+      }
+
       const mermaidButton = event.target.closest('.mermaid-placeholder-btn');
       if (mermaidButton) {
         const shell = mermaidButton.closest('.mermaid-shell');
@@ -134,6 +146,7 @@ export class PreviewRenderer {
     this.readyRenderVersion = 0;
     this.currentStats = null;
     this.isLargeDocument = false;
+    this.frontmatterCollapsed = false;
     if (this.renderExecutor.hasPendingJob()) {
       this.resetWorker('Document changed');
     }
@@ -272,7 +285,10 @@ export class PreviewRenderer {
   }
 
   async compilePreview(markdownText, renderVersion) {
-    return this.renderExecutor.compile(markdownText, renderVersion);
+    return this.renderExecutor.compile(markdownText, renderVersion, {
+      frontmatterCollapsed: this.frontmatterCollapsed,
+      frontmatterInteractive: true,
+    });
   }
 
   commitBaseRender({ html, stats }, renderVersion) {
@@ -294,6 +310,7 @@ export class PreviewRenderer {
     if (renderHost) {
       renderHost.innerHTML = html;
     }
+    this.applyFrontmatterState();
     this.reconcileHydratedMermaids();
     this.reconcileHydratedPlantUmls();
     this.setPhase('base');
@@ -313,6 +330,39 @@ export class PreviewRenderer {
     }
   }
 
+  applyFrontmatterState() {
+    const block = this.renderHost?.querySelector?.('.frontmatter-block');
+    if (!(block instanceof HTMLElement)) {
+      return;
+    }
+
+    const collapsed = this.frontmatterCollapsed;
+    const toggle = block.querySelector('.frontmatter-toggle');
+    const summary = block.querySelector('.frontmatter-summary');
+    const content = block.querySelector('.frontmatter-content');
+
+    block.dataset.collapsed = collapsed ? 'true' : 'false';
+    if (toggle instanceof HTMLButtonElement) {
+      toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+      toggle.textContent = collapsed ? 'Show' : 'Hide';
+    }
+    if (summary instanceof HTMLElement) {
+      summary.hidden = !collapsed;
+    }
+    if (content instanceof HTMLElement) {
+      content.hidden = collapsed;
+    }
+  }
+
+  handleFrontmatterLayoutChange() {
+    this.outlineController.refresh();
+    this.onPreviewLayoutChange?.({
+      isLargeDocument: this.isLargeDocument,
+      renderVersion: this.activeRenderVersion,
+      stats: this.currentStats,
+    });
+  }
+
   preserveHydratedMermaidsForCommit() {
     this.mermaidHydrator.preserveHydratedShellsForCommit();
   }

package/src/client/application/workspace-preview-controller.js

@@ -92,6 +92,7 @@ export class WorkspacePreviewController {
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
 
+    this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
     this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
     this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage);

package/src/client/bootstrap/collabmd-app-shell.js

@@ -212,6 +212,11 @@ export class CollabMdAppShell {
         this.drawioEmbed.detachForCommit();
         this.excalidrawEmbed.detachForCommit();
       },
+      onPreviewLayoutChange: () => {
+        this.scrollSyncController.invalidatePreviewBlocks();
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
+        this.refreshCommentUiLayout();
+      },
       onRenderComplete: () => {
         this.videoEmbed.syncLayout();
         this.drawioEmbed.syncLayout();

package/src/client/domain/markdown-formatting.js

@@ -434,7 +434,7 @@ function formatHorizontalRule(text, range) {
 export function createMarkdownToolbarEdit(documentText, selectionRange, action) {
   const text = String(documentText ?? '');
   const range = normalizeRange(selectionRange, text.length);
-  let edit = null;
+  let edit;
 
   switch (action) {
     case 'bold':

package/src/client/domain/markdown-toolbar-actions.js

@@ -59,6 +59,34 @@ const ICONS = Object.freeze({
       <path d="M9 16h6"/>
     </svg>
   `,
+  indent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m4 9 4 3-4 3"/>
+    </svg>
+  `,
+  outdent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m8 9-4 3 4 3"/>
+    </svg>
+  `,
+  redo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 7v6h-6"/>
+      <path d="M20 13a8 8 0 0 0-14-3"/>
+    </svg>
+  `,
+  undo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M3 7v6h6"/>
+      <path d="M4 13a8 8 0 0 1 14-3"/>
+    </svg>
+  `,
   chevronDown: `
     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="m6 9 6 6 6-6"/>
@@ -148,6 +176,13 @@ const INLINE_ACTIONS = Object.freeze([
   { action: 'code', label: 'Inline code', title: 'Inline code', icon: ICONS.code },
 ]);
 
+const MOBILE_EDIT_COMMANDS = Object.freeze([
+  { commandId: 'undo', label: 'Undo', title: 'Undo', icon: ICONS.undo },
+  { commandId: 'redo', label: 'Redo', title: 'Redo', icon: ICONS.redo },
+  { commandId: 'indentMore', label: 'Indent', title: 'Indent', icon: ICONS.indent },
+  { commandId: 'indentLess', label: 'Outdent', title: 'Outdent', icon: ICONS.outdent },
+]);
+
 const MEDIA_ACTIONS = Object.freeze([
   { action: 'link', label: 'Insert link', title: 'Insert link', icon: ICONS.link },
   { action: 'image', label: 'Insert image', title: 'Insert image', icon: ICONS.image },
@@ -160,6 +195,7 @@ const INSERT_ACTIONS = Object.freeze([
 ]);
 
 export const markdownToolbarLayout = Object.freeze([
+  { kind: 'buttons', groupLabel: 'Edit', actions: MOBILE_EDIT_COMMANDS, mobileOnly: true },
   { kind: 'block-menu', actions: BLOCK_MENU_ACTIONS },
   { kind: 'buttons', groupLabel: 'Inline formatting', actions: INLINE_ACTIONS },
   { kind: 'buttons', groupLabel: 'Media and links', actions: MEDIA_ACTIONS },

package/src/client/export/export-pipeline.js

@@ -217,7 +217,9 @@ async function fetchAsDataUrl(src, {
     });
   } catch (error) {
     if (error instanceof DOMException && error.name === 'AbortError') {
-      throw new Error(`Timed out while fetching asset: ${assetUrl.toString()}`);
+      throw new Error(`Timed out while fetching asset: ${assetUrl.toString()}`, {
+        cause: error,
+      });
     }
     throw error;
   } finally {

package/src/client/infrastructure/editor-session.js

@@ -258,6 +258,10 @@ export class EditorSession {
     this.viewAdapter.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    return this.viewAdapter.runEditorCommand(commandId);
+  }
+
   applyMarkdownToolbarAction(action) {
     return this.viewAdapter.applyMarkdownToolbarAction(action);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -1,5 +1,14 @@
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentLess,
+  indentMore,
+  indentWithTab,
+  redo,
+  undo,
+} from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import {
   bracketMatching,
@@ -10,7 +19,7 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { highlightSelectionMatches, openSearchPanel, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
@@ -42,6 +51,13 @@ const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
 const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
 const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
 const TASK_LIST_MARKER_PATTERN = /^(\s*(?:>\s*)*(?:[-+*]|\d+[.)])\s+\[)( |x|X)(\])(\s.*)?$/;
+const EDITOR_COMMANDS = Object.freeze({
+  indentLess,
+  indentMore,
+  openSearch: openSearchPanel,
+  redo,
+  undo,
+});
 
 class RemoteUpdateCaretWidget extends WidgetType {
   toDOM() {
@@ -557,6 +573,24 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  runEditorCommand(commandId) {
+    if (!this.editorView) {
+      return false;
+    }
+
+    const command = EDITOR_COMMANDS[String(commandId ?? '')];
+    if (typeof command !== 'function') {
+      return false;
+    }
+
+    const applied = command(this.editorView);
+    if (applied && commandId !== 'openSearch') {
+      this.editorView.focus();
+    }
+
+    return applied;
+  }
+
   flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
     const state = this.editorView?.state;
     if (!state || state.doc.length === 0) {

package/src/client/infrastructure/excalidraw-room-client.js

@@ -258,10 +258,14 @@ export class ExcalidrawRoomClient {
     } catch (readError) {
       if (readError?.status !== 404 || !createIfMissing) {
         if (readError?.status === 404) {
-          throw new Error(readError.message || 'Excalidraw file not found');
+          throw new Error(readError.message || 'Excalidraw file not found', {
+            cause: readError,
+          });
         }
 
-        throw new Error(readError?.message || 'Failed to load Excalidraw file');
+        throw new Error(readError?.message || 'Failed to load Excalidraw file', {
+          cause: readError,
+        });
       }
     }
 
@@ -278,11 +282,15 @@ export class ExcalidrawRoomClient {
           const existingData = await this.vaultClient.readFile(this.filePath);
           return parseSceneJson(existingData.content);
         } catch (conflictReadError) {
-          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict');
+          throw new Error(conflictReadError?.message || 'Failed to load existing Excalidraw file after create conflict', {
+            cause: conflictReadError,
+          });
         }
       }
 
-      throw new Error(createError?.message || 'Failed to create Excalidraw file');
+      throw new Error(createError?.message || 'Failed to create Excalidraw file', {
+        cause: createError,
+      });
     }
   }