collabmd 0.1.19 → 0.1.21

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

@@ -11,10 +11,12 @@ import {
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
+  Decoration,
   EditorView,
+  WidgetType,
   crosshairCursor,
   drawSelection,
   highlightActiveLine,
@@ -33,6 +35,91 @@ import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantum
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
+const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
+const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
+const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
+const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
+const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
+const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
+
+class RemoteUpdateCaretWidget extends WidgetType {
+  toDOM() {
+    const element = document.createElement('span');
+    element.className = 'cm-remoteUpdateCaretWidget';
+    element.setAttribute('aria-hidden', 'true');
+    return element;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+const addRemoteUpdateFlashEffect = StateEffect.define();
+const clearRemoteUpdateFlashEffect = StateEffect.define();
+const remoteUpdateFlashField = StateField.define({
+  create: () => Decoration.none,
+  update(decorations, transaction) {
+    let nextDecorations = decorations.map(transaction.changes);
+
+    transaction.effects.forEach((effect) => {
+      if (effect.is(clearRemoteUpdateFlashEffect)) {
+        nextDecorations = Decoration.none;
+        return;
+      }
+
+      if (effect.is(addRemoteUpdateFlashEffect)) {
+        const { from, showCaret, to } = effect.value;
+        const nextRanges = [];
+        if (to > from) {
+          nextRanges.push(remoteUpdateMark.range(from, to));
+        }
+        if (showCaret) {
+          nextRanges.push(Decoration.widget({
+            side: -1,
+            widget: new RemoteUpdateCaretWidget(),
+          }).range(from));
+        }
+        nextDecorations = nextRanges.length > 0
+          ? Decoration.set(nextRanges, true)
+          : Decoration.none;
+      }
+    });
+
+    return nextDecorations;
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+function isBracketBeforeCaret(range, state) {
+  return state.selection.ranges.some((selectionRange) =>
+    selectionRange.empty && range.to === selectionRange.head
+  );
+}
+
+function renderBracketMatch(match, state) {
+  const decorations = [];
+
+  if (!match.matched) {
+    decorations.push(nonmatchingBracketMark.range(match.start.from, match.start.to));
+    if (match.end) {
+      decorations.push(nonmatchingBracketMark.range(match.end.from, match.end.to));
+    }
+    return decorations;
+  }
+
+  const shouldHideStartBracket = isBracketBeforeCaret(match.start, state);
+  const shouldHideEndBracket = match.end ? isBracketBeforeCaret(match.end, state) : false;
+
+  if (!shouldHideStartBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.start.from, match.start.to));
+  }
+  if (match.end && !shouldHideEndBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.end.from, match.end.to));
+  }
+
+  return decorations;
+}
 
 function createEditorTheme(theme) {
   const activeLineBackground = theme === 'dark'
@@ -47,6 +134,21 @@ function createEditorTheme(theme) {
   const selectionBorder = theme === 'dark'
     ? 'oklch(from var(--color-primary) l c h / 0.65)'
     : 'oklch(from var(--color-primary) l c h / 0.5)';
+  const caretColor = theme === 'dark'
+    ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+    : 'color-mix(in oklab, var(--color-primary) 84%, black)';
+  const bracketPairBackground = theme === 'dark'
+    ? 'oklch(from var(--color-primary) l c h / 0.2)'
+    : 'oklch(from var(--color-primary) l c h / 0.12)';
+  const bracketPairOutline = theme === 'dark'
+    ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.85)'
+    : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.7)';
+  const nonmatchingBracketBackground = theme === 'dark'
+    ? 'oklch(from var(--color-error) l c h / 0.12)'
+    : 'oklch(from var(--color-error) l c h / 0.1)';
+  const nonmatchingBracketOutline = theme === 'dark'
+    ? 'oklch(from var(--color-error) calc(l + 0.08) c h / 0.8)'
+    : 'oklch(from var(--color-error) calc(l - 0.04) c h / 0.7)';
 
   return EditorView.theme({
     '&': {
@@ -54,13 +156,14 @@ function createEditorTheme(theme) {
       color: 'var(--color-text)',
     },
     '.cm-content': {
-      caretColor: 'var(--color-primary)',
+      caretColor,
       fontFamily: 'var(--font-mono)',
       padding: '16px 0',
     },
     '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: 'var(--color-primary)',
-      borderLeftWidth: '2px',
+      borderLeftColor: caretColor,
+      borderLeftWidth: '3px',
+      marginLeft: '-1px',
     },
     '.cm-foldPlaceholder': {
       backgroundColor: 'var(--color-surface-dynamic)',
@@ -86,12 +189,50 @@ function createEditorTheme(theme) {
       color: 'var(--color-text-muted)',
     },
     '.cm-matchingBracket': {
-      backgroundColor: 'var(--color-primary-highlight)',
-      outline: '1px solid var(--color-primary)',
+      borderRadius: '2px',
+      color: 'inherit',
+    },
+    '.cm-matchingBracket.cm-matchingBracket-paired': {
+      backgroundColor: bracketPairBackground,
+      outline: `1px solid ${bracketPairOutline}`,
+    },
+    '.cm-nonmatchingBracket': {
+      backgroundColor: nonmatchingBracketBackground,
+      outline: `1px solid ${nonmatchingBracketOutline}`,
+      borderRadius: '2px',
     },
     '.cm-selectionMatch': {
       backgroundColor: 'var(--color-primary-highlight)',
     },
+    '.cm-remoteUpdateFlash': {
+      animation: 'collabmd-remote-update-flash 1.35s ease-out',
+      backgroundColor: theme === 'dark'
+        ? 'oklch(from var(--color-primary) l c h / 0.22)'
+        : 'oklch(from var(--color-primary) l c h / 0.16)',
+      borderRadius: '3px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.05) c h / 0.26)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.2)'}`,
+    },
+    '.cm-remoteUpdateCaretWidget': {
+      animation: 'collabmd-remote-update-caret 1s ease-out',
+      backgroundColor: 'transparent',
+      borderLeft: `2px solid ${theme === 'dark'
+        ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+        : 'color-mix(in oklab, var(--color-primary) 84%, black)'}`,
+      borderRadius: '999px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.06) c h / 0.22)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.16)'}`,
+      display: 'inline-block',
+      height: '1.2em',
+      marginLeft: '-1px',
+      marginRight: '-1px',
+      pointerEvents: 'none',
+      transformOrigin: 'center bottom',
+      verticalAlign: 'text-bottom',
+      width: '0',
+    },
     '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
       backgroundColor: selectionBackground,
     },
@@ -99,6 +240,42 @@ function createEditorTheme(theme) {
       border: `1px solid ${selectionBorder}`,
       borderRadius: '2px',
     },
+    '@keyframes collabmd-remote-update-flash': {
+      '0%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0.34)'
+          : 'oklch(from var(--color-primary) l c h / 0.26)',
+      },
+      '100%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0)'
+          : 'oklch(from var(--color-primary) l c h / 0)',
+      },
+    },
+    '@keyframes collabmd-remote-update-caret': {
+      '0%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.34)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.24)'}`,
+        opacity: '0',
+        transform: 'translateY(0.2em) scaleY(0.7)',
+      },
+      '18%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '72%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '100%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0)'}`,
+        opacity: '0',
+        transform: 'translateY(-0.05em) scaleY(0.9)',
+      },
+    },
   }, { dark: theme === 'dark' });
 }
 
@@ -146,6 +323,8 @@ export class EditorViewAdapter {
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
     this.viewportFrame = 0;
+    this.remoteUpdateFlashTimer = 0;
+    this.lastLocalInputAt = 0;
     this.handleScroll = () => {
       if (this.viewportFrame) {
         return;
@@ -156,6 +335,9 @@ export class EditorViewAdapter {
         this.emitViewportChange();
       });
     };
+    this.handleLocalInputActivity = () => {
+      this.lastLocalInputAt = Date.now();
+    };
   }
 
   initialize({ awareness, filePath, undoManager, ytext }) {
@@ -191,7 +373,7 @@ export class EditorViewAdapter {
           EditorState.allowMultipleSelections.of(true),
           indentOnInput(),
           syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching(),
+          bracketMatching({ renderMatch: renderBracketMatch }),
           closeBrackets(),
           autocompletion({
             override: [wikiLinkCompletions(this.getFileList)],
@@ -218,6 +400,7 @@ export class EditorViewAdapter {
           this.themeCompartment.of(createEditorTheme(this.initialTheme)),
           this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
           this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
+          remoteUpdateFlashField,
           yCollab(ytext, awareness, { undoManager }),
           updateListener,
         ],
@@ -225,6 +408,10 @@ export class EditorViewAdapter {
     });
 
     this.editorView.scrollDOM.addEventListener('scroll', this.handleScroll, { passive: true });
+    this.editorView.contentDOM.addEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('paste', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('compositionstart', this.handleLocalInputActivity);
     this.updateCursorInfo(this.editorView.state);
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
@@ -235,6 +422,14 @@ export class EditorViewAdapter {
       cancelAnimationFrame(this.viewportFrame);
       this.viewportFrame = 0;
     }
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+      this.remoteUpdateFlashTimer = 0;
+    }
+    this.editorView?.contentDOM?.removeEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('paste', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('compositionstart', this.handleLocalInputActivity);
     this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
     this.editorView?.destroy();
     this.editorView = null;
@@ -297,6 +492,49 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
+    const state = this.editorView?.state;
+    if (!state || state.doc.length === 0) {
+      return false;
+    }
+
+    let start = Math.min(Math.max(Math.round(from), 0), state.doc.length);
+    let end = Math.min(Math.max(Math.round(to), 0), state.doc.length);
+    if (end <= start) {
+      if (start < state.doc.length) {
+        end = start + 1;
+      } else if (start > 0) {
+        start -= 1;
+        end = start + 1;
+      } else {
+        return false;
+      }
+    }
+
+    const rangeLength = Math.max(end - start, 0);
+    const showCaret = (
+      rangeLength <= REMOTE_UPDATE_CARET_MAX_LENGTH
+      && (Date.now() - this.lastLocalInputAt) > RECENT_LOCAL_INPUT_WINDOW_MS
+    );
+
+    this.editorView.dispatch({
+      effects: addRemoteUpdateFlashEffect.of({ from: start, showCaret, to: end }),
+    });
+
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+    }
+
+    this.remoteUpdateFlashTimer = window.setTimeout(() => {
+      this.remoteUpdateFlashTimer = 0;
+      this.editorView?.dispatch({
+        effects: clearRemoteUpdateFlashEffect.of(null),
+      });
+    }, durationMs);
+
+    return true;
+  }
+
   getViewportState(viewportRatio = 0.35) {
     return {
       topLine: this.getTopVisibleLineNumber(viewportRatio),

package/src/client/infrastructure/workspace-sync-client.js

@@ -0,0 +1,324 @@
+import { WebsocketProvider } from 'y-websocket';
+import * as Y from 'yjs';
+
+import { normalizeWorkspaceEvent } from '../../domain/workspace-change.js';
+import { WORKSPACE_ROOM_NAME } from '../../domain/workspace-room.js';
+import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
+import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
+
+function createNode(entry) {
+  if (!entry?.path || !entry?.type) {
+    return null;
+  }
+
+  if (entry.nodeType === 'directory' || entry.type === 'directory') {
+    return {
+      children: [],
+      name: entry.name,
+      path: entry.path,
+      type: 'directory',
+    };
+  }
+
+  return {
+    name: entry.name,
+    path: entry.path,
+    type: entry.type,
+  };
+}
+
+function sortNodes(nodes = []) {
+  nodes.sort((left, right) => {
+    if (left.type === 'directory' && right.type !== 'directory') return -1;
+    if (left.type !== 'directory' && right.type === 'directory') return 1;
+    return left.name.localeCompare(right.name, undefined, { sensitivity: 'base' });
+  });
+
+  nodes.forEach((node) => {
+    if (Array.isArray(node.children)) {
+      sortNodes(node.children);
+    }
+  });
+
+  return nodes;
+}
+
+function toEntryMap(value) {
+  if (value instanceof Map) {
+    return value;
+  }
+
+  return new Map(Object.entries(value ?? {}));
+}
+
+function sortPathsByDepth(values = [], direction = 'asc') {
+  const factor = direction === 'desc' ? -1 : 1;
+  return [...values].sort((left, right) => {
+    const depthDelta = left.split('/').length - right.split('/').length;
+    if (depthDelta !== 0) {
+      return depthDelta * factor;
+    }
+
+    return left.localeCompare(right, undefined, { sensitivity: 'base' }) * factor;
+  });
+}
+
+class WorkspaceTreeModel {
+  constructor() {
+    this.entriesByPath = new Map();
+    this.nodesByPath = new Map();
+    this.nodeParentPathByPath = new Map();
+    this.roots = [];
+  }
+
+  reset(rawEntries) {
+    this.entriesByPath = toEntryMap(rawEntries);
+    this.nodesByPath = new Map();
+    this.nodeParentPathByPath = new Map();
+    this.roots = [];
+
+    this.entriesByPath.forEach((entry) => {
+      const node = createNode(entry);
+      if (node) {
+        this.nodesByPath.set(entry.path, node);
+      }
+    });
+
+    sortPathsByDepth(Array.from(this.nodesByPath.keys())).forEach((pathValue) => {
+      const node = this.nodesByPath.get(pathValue);
+      if (node) {
+        this.attachNode(pathValue, node, this.entriesByPath.get(pathValue)?.parentPath || '');
+      }
+    });
+
+    sortNodes(this.roots);
+    return this.roots;
+  }
+
+  getTree() {
+    return this.roots;
+  }
+
+  applyMapChanges(changes, entriesMap) {
+    const deletePaths = [];
+    const upsertPaths = [];
+
+    changes.forEach((change, pathValue) => {
+      if (change.action === 'delete') {
+        deletePaths.push(pathValue);
+      } else {
+        upsertPaths.push(pathValue);
+      }
+    });
+
+    sortPathsByDepth(deletePaths, 'desc').forEach((pathValue) => {
+      this.removeEntry(pathValue);
+    });
+
+    sortPathsByDepth(upsertPaths).forEach((pathValue) => {
+      this.upsertEntry(pathValue, entriesMap.get(pathValue));
+    });
+
+    sortNodes(this.roots);
+    return this.roots;
+  }
+
+  removeEntry(pathValue) {
+    const node = this.nodesByPath.get(pathValue);
+    if (!node) {
+      this.entriesByPath.delete(pathValue);
+      this.nodeParentPathByPath.delete(pathValue);
+      return;
+    }
+
+    this.detachNode(pathValue, node);
+    this.nodesByPath.delete(pathValue);
+    this.entriesByPath.delete(pathValue);
+    this.nodeParentPathByPath.delete(pathValue);
+  }
+
+  upsertEntry(pathValue, entry) {
+    if (!entry?.path || !entry?.type) {
+      this.removeEntry(pathValue);
+      return;
+    }
+
+    const nextNode = createNode(entry);
+    if (!nextNode) {
+      this.removeEntry(pathValue);
+      return;
+    }
+
+    const existingNode = this.nodesByPath.get(pathValue);
+    let node = existingNode;
+    if (!node || (node.type === 'directory') !== (nextNode.type === 'directory')) {
+      if (node) {
+        this.detachNode(pathValue, node);
+      }
+      node = nextNode;
+      this.nodesByPath.set(pathValue, node);
+    } else {
+      node.name = nextNode.name;
+      node.path = nextNode.path;
+      node.type = nextNode.type;
+      if (node.type === 'directory' && !Array.isArray(node.children)) {
+        node.children = [];
+      }
+      if (node.type !== 'directory' && Array.isArray(node.children)) {
+        delete node.children;
+      }
+    }
+
+    this.entriesByPath.set(pathValue, entry);
+    this.attachNode(pathValue, node, entry.parentPath || '');
+
+    if (node.type === 'directory') {
+      this.rehomeChildren(pathValue);
+    }
+  }
+
+  detachNode(pathValue, node) {
+    const currentParentPath = this.nodeParentPathByPath.get(pathValue) || '';
+    const siblings = currentParentPath
+      ? this.nodesByPath.get(currentParentPath)?.children
+      : this.roots;
+    const index = siblings?.indexOf?.(node) ?? -1;
+    if (index >= 0) {
+      siblings.splice(index, 1);
+    }
+    this.nodeParentPathByPath.delete(pathValue);
+  }
+
+  attachNode(pathValue, node, requestedParentPath = '') {
+    const parentPath = this.nodesByPath.get(requestedParentPath)?.type === 'directory'
+      ? requestedParentPath
+      : '';
+    const currentParentPath = this.nodeParentPathByPath.get(pathValue);
+
+    if (currentParentPath === parentPath) {
+      return;
+    }
+
+    if (currentParentPath !== undefined) {
+      this.detachNode(pathValue, node);
+    }
+
+    const siblings = parentPath
+      ? this.nodesByPath.get(parentPath)?.children
+      : this.roots;
+    if (!siblings.includes(node)) {
+      siblings.push(node);
+    }
+    this.nodeParentPathByPath.set(pathValue, parentPath);
+  }
+
+  rehomeChildren(parentPath) {
+    this.entriesByPath.forEach((entry, pathValue) => {
+      if (entry?.parentPath !== parentPath) {
+        return;
+      }
+
+      const node = this.nodesByPath.get(pathValue);
+      if (node) {
+        this.attachNode(pathValue, node, parentPath);
+      }
+    });
+  }
+}
+
+export class WorkspaceSyncClient {
+  constructor({
+    onTreeChange = () => {},
+    onWorkspaceEvent = () => {},
+  } = {}) {
+    this.onTreeChange = onTreeChange;
+    this.onWorkspaceEvent = onWorkspaceEvent;
+    this.ydoc = new Y.Doc();
+    this.entries = this.ydoc.getMap('entries');
+    this.events = this.ydoc.getArray('events');
+    this.provider = null;
+    this._didInitialSync = false;
+    this.seenEventIds = new Set();
+    this.treeModel = new WorkspaceTreeModel();
+
+    this.handleEntriesChange = (event) => {
+      if (!this._didInitialSync || !event) {
+        return;
+      }
+
+      this.onTreeChange(this.treeModel.applyMapChanges(event.changes.keys, this.entries), {
+        changedPaths: Array.from(event.changes.keys.keys()),
+        reset: false,
+      });
+    };
+    this.handleEventsChange = () => {
+      if (!this._didInitialSync) {
+        this.primeEventCache();
+        return;
+      }
+
+      this.events.toArray().forEach((event) => {
+        const normalized = normalizeWorkspaceEvent(event);
+        if (!normalized || this.seenEventIds.has(normalized.id)) {
+          return;
+        }
+
+        this.seenEventIds.add(normalized.id);
+        this.onWorkspaceEvent(normalized);
+      });
+    };
+  }
+
+  connect() {
+    if (this.provider) {
+      return;
+    }
+
+    this._didInitialSync = false;
+    this.provider = new WebsocketProvider(resolveWsBaseUrl(), WORKSPACE_ROOM_NAME, this.ydoc, {
+      disableBc: true,
+      maxBackoffTime: 5000,
+    });
+    stopReconnectOnControlledClose(this.provider);
+
+    this.entries.observe(this.handleEntriesChange);
+    this.events.observe(this.handleEventsChange);
+    this.provider.on('sync', (isSynced) => {
+      if (!isSynced || this._didInitialSync) {
+        return;
+      }
+
+      this._didInitialSync = true;
+      this.primeEventCache();
+      this.onTreeChange(this.treeModel.reset(this.entries.toJSON()), {
+        changedPaths: [],
+        reset: true,
+      });
+    });
+  }
+
+  primeEventCache() {
+    this.events.toArray().forEach((event) => {
+      const normalized = normalizeWorkspaceEvent(event);
+      if (normalized) {
+        this.seenEventIds.add(normalized.id);
+      }
+    });
+  }
+
+  disconnect() {
+    this.entries.unobserve(this.handleEntriesChange);
+    this.events.unobserve(this.handleEventsChange);
+    this.provider?.disconnect();
+    this.provider?.destroy();
+    this.provider = null;
+    this._didInitialSync = false;
+    this.seenEventIds.clear();
+    this.treeModel.reset(new Map());
+  }
+
+  destroy() {
+    this.disconnect();
+    this.ydoc.destroy();
+  }
+}