collabmd 0.1.54 → 0.1.56

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

@@ -0,0 +1,98 @@
+import markdownIt from 'markdown-it';
+import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
+
+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}`;
+}
+
+export 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);
+  });
+
+  for (const group of headingsBySlug.values()) {
+    if (group.length <= 1) {
+      continue;
+    }
+
+    const maxDepth = group.reduce((depth, heading) => Math.max(depth, heading.parentSlugs.length), 0);
+    for (let depth = 1; depth <= maxDepth; depth += 1) {
+      const candidateCounts = new Map();
+      const candidates = group.map((heading) => [...heading.parentSlugs.slice(-depth), heading.slug].join('-'));
+      for (const candidate of candidates) {
+        candidateCounts.set(candidate, (candidateCounts.get(candidate) ?? 0) + 1);
+      }
+      group.forEach((heading, index) => {
+        if (!heading.baseId && depth <= heading.parentSlugs.length && candidateCounts.get(candidates[index]) === 1) {
+          heading.baseId = candidates[index];
+        }
+      });
+    }
+  }
+
+  const headingIdCounts = new Map();
+  headingInfos.forEach((headingInfo) => {
+    headingInfo.token.attrSet('id', createHeadingId(headingInfo.baseId ?? headingInfo.slug, headingIdCounts));
+  });
+}
+
+const markdown = markdownIt({ html: false, linkify: true, typographer: true });
+
+export function getMarkdownHeadings(content = '') {
+  const source = String(content ?? '');
+  const tokens = markdown.parse(extractYamlFrontmatter(source)?.bodyMarkdown ?? source, {});
+  assignHeadingIds({ tokens });
+  return tokens.flatMap((token, index) => token.type === 'heading_open' ? [{
+    id: token.attrGet('id'),
+    text: tokens[index + 1]?.content ?? '',
+  }] : []);
+}
+
+export function findMarkdownSection(tokens, anchor) {
+  assignHeadingIds({ tokens });
+  const index = tokens.findIndex((token) => token.type === 'heading_open' && token.attrGet('id') === anchor);
+  if (index < 0) return null;
+  const heading = tokens[index];
+  const level = Number(heading.tag.slice(1));
+  const next = tokens.slice(index + 1).find((token) => token.type === 'heading_open' && Number(token.tag.slice(1)) <= level);
+  return { startLine: heading.map[0], endLine: next?.map[0] };
+}

package/src/client/domain/mermaid-source.js

@@ -0,0 +1,44 @@
+function padBlankSequenceLabelLines(label) {
+  return label
+    .replace(/^([\t ]*)(?=<br\s*\/?\s*>)/i, '$1#160;')
+    .replace(/(<br\s*\/?\s*>)(?=[\t ]*(?:<br\s*\/?\s*>|$))/gi, '$1#160;');
+}
+
+export function prepareMermaidRenderSource(source) {
+  const text = String(source ?? '');
+  const frontmatter = /^\s*---[\t ]*\r?\n[\s\S]*?\r?\n[\t ]*---[\t ]*(?:\r?\n|$)/.exec(text);
+  let start = frontmatter?.[0].length ?? 0;
+  let comment;
+  while ((comment = /^\s*(?:%%\{[\s\S]*?\}%%|%%[^\n]*)/.exec(text.slice(start)))) {
+    start += comment[0].length;
+  }
+  const sequenceStart = /^\s*sequenceDiagram\b/.exec(text.slice(start));
+  if (!sequenceStart) {
+    return text;
+  }
+  start += sequenceStart[0].length;
+
+  // Mermaid measures empty sequence-label lines with a zero-width space.
+  // WebKit gives that glyph a 0 × 0 SVG box, which Mermaid treats as an error.
+  // Use a nonbreaking space only in the render copy to preserve blank lines.
+  const body = text.slice(start).replace(
+    /((?:^|;)[\t ]*(?:participant|actor)[\t ]+[^\n;]*?@\{)([^}]*)(\})/gm,
+    (_match, prefix, config, suffix) => prefix + config.replace(
+      /(\balias["']?[\t ]*:[\t ]*)("(?:\\.|[^"\\])*"|'(?:''|[^'])*'|[^,\r\n]*)/g,
+      (_alias, key, value) => {
+        const quote = /^["']/.test(value) ? value[0] : '';
+        const label = quote ? value.slice(1, -1) : value;
+        return `${key}${quote}${padBlankSequenceLabelLines(label)}${quote}`;
+      },
+    ) + suffix,
+  ).split('\n').map((line) => {
+    if (line.trimStart().startsWith('%%')) {
+      return line;
+    }
+    return line
+      .replace(/((?:^|;)[^:;]*:[\t ]*)(?=<br\s*\/?\s*>)/gi, '$1#160;')
+      .replace(/((?:^|;)[\t ]*(?:participant|actor)[\t ]+\S+[\t ]+as[\t ]*)(?=<br\s*\/?\s*>)/gi, '$1#160;')
+      .replace(/(<br\s*\/?\s*>)(?=[\t ]*(?:<br\s*\/?\s*>|;|\r?$))/gi, '$1#160;');
+  }).join('\n');
+  return text.slice(0, start) + body;
+}

package/src/client/domain/wiki-link-completions.js

@@ -2,6 +2,11 @@ import { createFileSearchEntry, findFileSearchMatch } from './file-search.js';
 
 const MAX_VISIBLE_RESULTS = 30;
 
+function compareMatches(left, right) {
+  return right.match.score - left.match.score
+    || left.entry.lowerPath.localeCompare(right.entry.lowerPath);
+}
+
 /**
  * CodeMirror autocomplete source for [[wiki-links]].
  *
@@ -12,10 +17,13 @@ const MAX_VISIBLE_RESULTS = 30;
 /**
  * Creates a wiki-link completion source.
  *
- * @param {() => string[]} getFileList — returns the current list of vault file paths
+ * @param {() => string[]} getFileList — returns the current list, replaced when vault file paths change
  * @returns {import('@codemirror/autocomplete').CompletionSource}
  */
 export function wikiLinkCompletions(getFileList) {
+  let lastFileList = null;
+  let cachedEntries = null;
+
   return (context) => {
     // Look backwards from the cursor for `[[` that hasn't been closed
     const line = context.state.doc.lineAt(context.pos);
@@ -35,17 +43,41 @@ export function wikiLinkCompletions(getFileList) {
 
     const query = afterOpen.trim().toLowerCase().replace(/\s+/gu, ' ');
     const from = line.from + openIndex + 2;
-    const entries = getFileList().map((filePath) => createFileSearchEntry(filePath));
-    const matches = query
-      ? entries
-        .map((entry) => ({ entry, match: findFileSearchMatch(entry, query) }))
-        .filter(({ match }) => match)
-        .sort((left, right) => right.match.score - left.match.score
-          || left.entry.lowerPath.localeCompare(right.entry.lowerPath))
-      : entries.map((entry) => ({ entry, match: null }));
+    const fileList = getFileList();
+    if (fileList !== lastFileList) {
+      lastFileList = fileList;
+      cachedEntries = null;
+    }
+
+    const matches = query ? [] : fileList.slice(0, MAX_VISIBLE_RESULTS)
+      .map((filePath) => ({ entry: createFileSearchEntry(filePath) }));
+    if (query) {
+      cachedEntries ??= fileList.map((filePath) => createFileSearchEntry(filePath));
+      for (const entry of cachedEntries) {
+        const match = findFileSearchMatch(entry, query);
+        if (!match) {
+          continue;
+        }
+
+        const candidate = { entry, match };
+        if (matches.length === MAX_VISIBLE_RESULTS
+          && compareMatches(candidate, matches[MAX_VISIBLE_RESULTS - 1]) >= 0) {
+          continue;
+        }
+
+        const index = matches.findIndex((current) => compareMatches(candidate, current) < 0);
+        if (index === -1) {
+          matches.push(candidate);
+        } else {
+          matches.splice(index, 0, candidate);
+        }
+        if (matches.length > MAX_VISIBLE_RESULTS) {
+          matches.pop();
+        }
+      }
+    }
 
     const options = matches
-      .slice(0, MAX_VISIBLE_RESULTS)
       .map(({ entry }) => ({
         label: entry.filePath,
         displayLabel: entry.filePath.split('/').pop(),

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

@@ -38,6 +38,7 @@ import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
 import { createExcalidrawExportOptions, parseSceneJson } from '../domain/excalidraw-scene.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { hasRenderedMath } from '../domain/markdown-math.js';
+import { prepareMermaidRenderSource } from '../domain/mermaid-source.js';
 import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
 import { parseApiResponse } from '../infrastructure/api-client-utils.js';
@@ -869,19 +870,19 @@ async function ensureExcalidrawRuntime() {
   }
 
   excalidrawLoaderPromise = import('@excalidraw/excalidraw').then((module) => {
-    const exportToSvg = module?.exportToSvg;
-    if (typeof exportToSvg !== 'function') {
+    const exportScene = module?.exportScene;
+    if (typeof exportScene !== 'function') {
       throw new Error('Excalidraw runtime failed to initialize');
     }
 
-    return exportToSvg;
+    return exportScene;
   });
 
   return excalidrawLoaderPromise;
 }
 
 function prepareMermaidSource(source) {
-  let text = String(source ?? '');
+  let text = prepareMermaidRenderSource(source);
 
   if (!/%%\{[\s\S]*?\binit\s*:/m.test(text)) {
     if (/^\s*stateDiagram(?:-v2)?\b/m.test(text) || /^\s*classDiagram\b/m.test(text) || /^\s*gantt\b/m.test(text)) {
@@ -951,8 +952,8 @@ async function renderPlantUmlToSvgMarkup(source) {
 async function renderExcalidrawToSvgMarkup(filePath) {
   const rawScene = await fetchTextFile(filePath);
   const scene = parseSceneJson(rawScene);
-  const exportToSvg = await ensureExcalidrawRuntime();
-  const svgElement = await exportToSvg(createExcalidrawExportOptions(scene));
+  const exportScene = await ensureExcalidrawRuntime();
+  const svgElement = await exportScene({ ...createExcalidrawExportOptions(scene), type: 'svg' });
   return normalizeExportSvgMarkup(svgElement.outerHTML, { padding: 24 });
 }
 

package/src/client/infrastructure/browser-preferences-port.js

@@ -16,70 +16,64 @@ function writeStorage(storage, key, value) {
 }
 
 const MAX_RECENT_FILES = 20;
+const STORAGE_KEYS = {
+  fileTreeShowExtensions: 'collabmd-file-tree-show-extensions',
+  lineWrapping: 'collabmd-editor-line-wrap',
+  recentFiles: 'collabmd-recent-files',
+  vimMode: 'collabmd-editor-vim-mode',
+  viewMode: 'collabmd-editor-view-mode',
+  sidebarVisible: 'collabmd-sidebar-visible',
+  userName: 'collabmd-user-name',
+  cursorNames: 'collabmd-editor-cursor-names',
+};
 
 export class BrowserPreferencesPort {
-  constructor({
-    fileTreeShowExtensionsKey,
-    lineWrappingKey,
-    recentFilesKey = 'collabmd-recent-files',
-    vimModeKey = 'collabmd-editor-vim-mode',
-    viewModeKey = 'collabmd-editor-view-mode',
-    sidebarVisibleKey,
-    userNameKey,
-    storage = globalThis.localStorage,
-  }) {
-    this.fileTreeShowExtensionsKey = fileTreeShowExtensionsKey;
-    this.lineWrappingKey = lineWrappingKey;
-    this.recentFilesKey = recentFilesKey;
-    this.sidebarVisibleKey = sidebarVisibleKey;
+  constructor({ storage = globalThis.localStorage } = {}) {
     this.storage = storage;
-    this.userNameKey = userNameKey;
-    this.viewModeKey = viewModeKey;
-    this.vimModeKey = vimModeKey;
   }
 
   getUserName() {
-    return readStorage(this.storage, this.userNameKey, '') || '';
+    return readStorage(this.storage, STORAGE_KEYS.userName, '') || '';
   }
 
   setUserName(name) {
-    writeStorage(this.storage, this.userNameKey, name);
+    writeStorage(this.storage, STORAGE_KEYS.userName, name);
   }
 
   getFileTreeShowExtensions() {
-    return readStorage(this.storage, this.fileTreeShowExtensionsKey, null) === 'true';
+    return readStorage(this.storage, STORAGE_KEYS.fileTreeShowExtensions, null) === 'true';
   }
 
   setFileTreeShowExtensions(showFileExtensions) {
-    writeStorage(this.storage, this.fileTreeShowExtensionsKey, showFileExtensions ? 'true' : 'false');
+    writeStorage(this.storage, STORAGE_KEYS.fileTreeShowExtensions, showFileExtensions ? 'true' : 'false');
   }
 
   getLineWrappingEnabled() {
-    return readStorage(this.storage, this.lineWrappingKey, null) !== 'false';
+    return readStorage(this.storage, STORAGE_KEYS.lineWrapping, null) !== 'false';
   }
 
   setLineWrappingEnabled(enabled) {
-    writeStorage(this.storage, this.lineWrappingKey, String(enabled));
+    writeStorage(this.storage, STORAGE_KEYS.lineWrapping, String(enabled));
   }
 
   getCursorNamesVisible() {
-    return readStorage(this.storage, 'collabmd-editor-cursor-names', null) !== 'false';
+    return readStorage(this.storage, STORAGE_KEYS.cursorNames, null) !== 'false';
   }
 
   setCursorNamesVisible(visible) {
-    writeStorage(this.storage, 'collabmd-editor-cursor-names', String(visible));
+    writeStorage(this.storage, STORAGE_KEYS.cursorNames, String(visible));
   }
 
   getVimModeEnabled() {
-    return readStorage(this.storage, this.vimModeKey, null) === 'true';
+    return readStorage(this.storage, STORAGE_KEYS.vimMode, null) === 'true';
   }
 
   setVimModeEnabled(enabled) {
-    writeStorage(this.storage, this.vimModeKey, String(enabled));
+    writeStorage(this.storage, STORAGE_KEYS.vimMode, String(enabled));
   }
 
   getViewMode() {
-    const value = readStorage(this.storage, this.viewModeKey, null);
+    const value = readStorage(this.storage, STORAGE_KEYS.viewMode, null);
     if (value === 'editor' || value === 'preview' || value === 'split') {
       return value;
     }
@@ -88,12 +82,12 @@ export class BrowserPreferencesPort {
 
   setViewMode(view) {
     if (view === 'editor' || view === 'preview' || view === 'split') {
-      writeStorage(this.storage, this.viewModeKey, view);
+      writeStorage(this.storage, STORAGE_KEYS.viewMode, view);
     }
   }
 
   getRecentFiles() {
-    const stored = readStorage(this.storage, this.recentFilesKey, '[]');
+    const stored = readStorage(this.storage, STORAGE_KEYS.recentFiles, '[]');
     try {
       const recentFiles = JSON.parse(stored);
       return Array.isArray(recentFiles)
@@ -111,15 +105,15 @@ export class BrowserPreferencesPort {
       filePath,
       ...this.getRecentFiles().filter((recentFilePath) => recentFilePath !== filePath),
     ];
-    writeStorage(this.storage, this.recentFilesKey, JSON.stringify(recentFiles.slice(0, MAX_RECENT_FILES)));
+    writeStorage(this.storage, STORAGE_KEYS.recentFiles, JSON.stringify(recentFiles.slice(0, MAX_RECENT_FILES)));
   }
 
   getSidebarVisible() {
-    return readStorage(this.storage, this.sidebarVisibleKey, null);
+    return readStorage(this.storage, STORAGE_KEYS.sidebarVisible, null);
   }
 
   setSidebarVisible(showSidebar) {
-    writeStorage(this.storage, this.sidebarVisibleKey, showSidebar ? 'true' : 'false');
+    writeStorage(this.storage, STORAGE_KEYS.sidebarVisible, showSidebar ? 'true' : 'false');
   }
 
 }

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

@@ -0,0 +1,210 @@
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+
+import {
+  CANVAS_EDGES_KEY,
+  CANVAS_EDGE_ORDER_KEY,
+  CANVAS_META_KEY,
+  CANVAS_NODES_KEY,
+  CANVAS_NODE_ORDER_KEY,
+  buildCanvasRoomDocument,
+  isCanvasRoomDocStructured,
+  parseCanvasJson,
+} from '../../domain/canvas-room-codec.js';
+import { MSG_AGENT_FLUSH, MSG_AGENT_FLUSH_ACK } from '../../domain/collaboration-protocol.js';
+import { resolveWsBaseUrl } from './runtime-config.js';
+import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
+
+export class CanvasRoomClient {
+  constructor({ filePath, user, readFile, onChange, onAwareness, onConnection,
+    providerFactory = (...args) => new WebsocketProvider(...args), wsBaseUrl = resolveWsBaseUrl() }) {
+    Object.assign(this, { filePath, user, readFile, onChange, onAwareness, onConnection, providerFactory, wsBaseUrl });
+    this.doc = new Y.Doc();
+    this.localOrigin = Symbol('canvas-edit');
+    this.meta = this.doc.getMap(CANVAS_META_KEY);
+    this.undoManager = new Y.UndoManager([
+      this.doc.getMap(CANVAS_NODES_KEY), this.doc.getMap(CANVAS_EDGES_KEY),
+      this.doc.getMap(CANVAS_NODE_ORDER_KEY), this.doc.getMap(CANVAS_EDGE_ORDER_KEY),
+    ], { trackedOrigins: new Set([this.localOrigin]), captureTimeout: 500 });
+    this.pendingFlushes = new Map();
+    this.localVersion = 0;
+    this.acknowledgedVersion = 0;
+    this.hasEverConnected = false;
+    this.destroyed = false;
+    this.fallback = null;
+    this.error = '';
+    this.offline = globalThis.navigator?.onLine === false;
+    this.handleOffline = () => {
+      this.offline = true;
+      this.provider?.disconnect();
+      this.publish();
+    };
+    this.handleOnline = () => {
+      if (!this.offline) return;
+      this.offline = false;
+      this.provider?.connect();
+      this.publish();
+    };
+  }
+
+  get canEdit() {
+    return Boolean(this.provider?.synced && isCanvasRoomDocStructured(this.doc) && !this.error
+      && !this.meta.get('externalConflict') && !this.disconnecting && !this.offline);
+  }
+
+  get hasPendingWrites() {
+    return this.localVersion > this.acknowledgedVersion;
+  }
+
+  async connect() {
+    this.doc.on('update', (_update, origin) => {
+      if (origin !== this.provider) {
+        this.localVersion += 1;
+        clearTimeout(this.flushTimer);
+        this.flushTimer = setTimeout(() => { void this.flush(); }, 400);
+      }
+      this.publish();
+    });
+    this.provider = this.providerFactory(this.wsBaseUrl, this.filePath, this.doc, {
+      disableBc: true, maxBackoffTime: 5000,
+    });
+    stopReconnectOnControlledClose(this.provider);
+    this.provider.messageHandlers[MSG_AGENT_FLUSH_ACK] = (_encoder, decoder) => {
+      const requestId = decoding.readVarString(decoder);
+      this.pendingFlushes.get(requestId)?.(true);
+    };
+    this.awareness = this.provider.awareness;
+    this.setUser(this.user);
+    this.awareness.on('change', () => this.publishAwareness());
+    this.provider.on('status', ({ status }) => {
+      const firstConnection = status === 'connected' && !this.hasEverConnected;
+      if (status === 'connected') this.hasEverConnected = true;
+      this.onConnection?.({ status, firstConnection, hasEverConnected: this.hasEverConnected, attempts: 0 });
+      this.publish();
+    });
+    this.provider.on('sync', () => {
+      this.publish();
+      if (this.provider.synced && this.hasPendingWrites) void this.flush();
+    });
+    globalThis.window?.addEventListener('offline', this.handleOffline);
+    globalThis.window?.addEventListener('online', this.handleOnline);
+    if (this.offline) this.provider.disconnect();
+    this.publish();
+    try {
+      const response = await this.readFile(this.filePath);
+      if (this.destroyed) return;
+      this.fallback = parseCanvasJson(response.content);
+    } catch (error) {
+      if (this.destroyed) return;
+      this.error = error.message || 'Unable to open canvas';
+    }
+    this.publish();
+  }
+
+  publish() {
+    if (this.destroyed) return;
+    let document = this.fallback;
+    if (isCanvasRoomDocStructured(this.doc)) {
+      try {
+        document = buildCanvasRoomDocument(this.doc);
+        this.error = '';
+      } catch {
+        this.error = 'Canvas data is invalid. Editing is paused to protect the file.';
+      }
+    } else if (this.meta.get('invalidContent')) {
+      this.error = 'Invalid JSON Canvas file. The original file has been preserved.';
+    }
+    this.onChange?.({
+      document, canEdit: this.canEdit, synced: Boolean(this.provider?.synced),
+      conflict: this.meta.get('externalConflict'), error: this.error,
+      undoAvailable: this.undoManager.canUndo(), redoAvailable: this.undoManager.canRedo(),
+    });
+  }
+
+  mutate(operation, { separateUndo = true } = {}) {
+    if (!this.canEdit) return false;
+    if (separateUndo) this.undoManager.stopCapturing();
+    this.doc.transact(() => operation(this.doc), this.localOrigin);
+    if (separateUndo) this.undoManager.stopCapturing();
+    return true;
+  }
+
+  undo() {
+    if (!this.canEdit) return;
+    this.undoManager.undo();
+    this.publish();
+  }
+
+  redo() {
+    if (!this.canEdit) return;
+    this.undoManager.redo();
+    this.publish();
+  }
+
+  setUser(user) {
+    this.user = user;
+    this.awareness?.setLocalStateField('user', user);
+  }
+
+  setPresence(field, value) {
+    this.awareness?.setLocalStateField(field, value);
+  }
+
+  publishAwareness() {
+    const users = [];
+    this.awareness?.getStates().forEach((state, clientId) => {
+      if (!state.user) return;
+      users.push({ ...state.user, clientId, isLocal: clientId === this.doc.clientID,
+        pointer: state.pointer, selectedNodeIds: state.selectedNodeIds });
+    });
+    this.onAwareness?.(users);
+  }
+
+  flush(timeoutMs = 5000) {
+    if (!this.hasPendingWrites) return Promise.resolve(true);
+    const ws = this.provider?.ws;
+    if (!this.provider?.synced || ws?.readyState !== 1) return Promise.resolve(false);
+    const version = this.localVersion;
+    const requestId = `canvas-${this.doc.clientID}-${crypto.randomUUID()}`;
+    return new Promise((resolve) => {
+      const finish = (acknowledged) => {
+        clearTimeout(timeout);
+        this.pendingFlushes.delete(requestId);
+        if (acknowledged) this.acknowledgedVersion = Math.max(this.acknowledgedVersion, version);
+        resolve(acknowledged && !this.hasPendingWrites);
+      };
+      const timeout = setTimeout(() => finish(false), timeoutMs);
+      this.pendingFlushes.set(requestId, finish);
+      try {
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, MSG_AGENT_FLUSH);
+        encoding.writeVarString(encoder, requestId);
+        ws.send(encoding.toUint8Array(encoder));
+      } catch {
+        finish(false);
+      }
+    });
+  }
+
+  async prepareDisconnect() {
+    this.disconnecting = true;
+    this.publish();
+    const ready = await this.flush();
+    this.disconnecting = false;
+    this.publish();
+    return ready;
+  }
+
+  destroy() {
+    this.destroyed = true;
+    globalThis.window?.removeEventListener('offline', this.handleOffline);
+    globalThis.window?.removeEventListener('online', this.handleOnline);
+    clearTimeout(this.flushTimer);
+    [...this.pendingFlushes.values()].forEach((finish) => finish(false));
+    this.provider?.destroy();
+    this.undoManager.destroy();
+    this.doc.destroy();
+  }
+}

package/src/client/infrastructure/canvas-text-editor.js

@@ -0,0 +1,36 @@
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
+import { markdown } from '@codemirror/lang-markdown';
+import { yCollab, yUndoManagerKeymap } from 'y-codemirror.next';
+
+export function createCanvasTextEditor({ parent, text, awareness, undoManager, onClose }) {
+  const editable = new Compartment();
+  let readOnly = false;
+  const view = new EditorView({
+    parent,
+    state: EditorState.create({
+      doc: text.toString(),
+      extensions: [
+        markdown(), EditorView.lineWrapping,
+        EditorView.contentAttributes.of({ 'aria-label': 'Edit canvas text' }),
+        editable.of(EditorView.editable.of(true)),
+        yCollab(text, awareness, { undoManager }),
+        keymap.of([
+          { key: 'Escape', run: () => { onClose(); return true; } },
+          ...yUndoManagerKeymap, ...defaultKeymap,
+        ]),
+      ],
+    }),
+  });
+  view.focus();
+  return {
+    text,
+    destroy: () => view.destroy(),
+    setReadOnly: (nextReadOnly) => {
+      if (readOnly === nextReadOnly) return;
+      readOnly = nextReadOnly;
+      view.dispatch({ effects: editable.reconfigure(EditorView.editable.of(!readOnly)) });
+    },
+  };
+}