collabmd 0.1.18

package/src/client/infrastructure/comment-thread-store.js

@@ -0,0 +1,293 @@
+import * as Y from 'yjs';
+
+import {
+  createCommentId,
+  createCommentThreadSharedType,
+  normalizeCommentAnchor,
+  normalizeCommentBody,
+  normalizeCommentQuote,
+  serializeCommentThreads,
+  summarizeCommentExcerpt,
+} from '../../domain/comment-threads.js';
+
+function createCommentMessage({ body, user }) {
+  return {
+    body,
+    createdAt: Date.now(),
+    id: createCommentId('comment'),
+    peerId: user?.peerId ?? '',
+    userColor: user?.color ?? '',
+    userName: user?.name ?? 'Anonymous',
+  };
+}
+
+function normalizeSelectionAnchorPayload(payload, state) {
+  const doc = state?.doc;
+  if (!doc) {
+    return null;
+  }
+
+  const anchor = payload?.anchor ?? payload;
+  const anchorKind = anchor?.anchorKind === 'text' ? 'text' : 'line';
+  const lineCount = doc.lines;
+  const startLine = Math.min(Math.max(Math.round(anchor?.startLine ?? 1), 1), lineCount);
+  const endLine = Math.min(
+    Math.max(Math.round(anchor?.endLine ?? startLine), startLine),
+    lineCount,
+  );
+  const defaultStartIndex = doc.line(startLine).from;
+  const defaultEndIndex = doc.line(endLine).to;
+  const startIndex = Math.min(
+    Math.max(Math.round(anchor?.startIndex ?? defaultStartIndex), 0),
+    doc.length,
+  );
+  const endIndex = Math.min(
+    Math.max(Math.round(anchor?.endIndex ?? defaultEndIndex), startIndex),
+    doc.length,
+  );
+
+  return {
+    anchorEndLine: endLine,
+    anchorKind,
+    anchorQuote: normalizeCommentQuote(anchor?.anchorQuote || doc.sliceString(startIndex, endIndex)),
+    anchorStartLine: startLine,
+    endIndex,
+    startIndex,
+  };
+}
+
+export class CommentThreadStore {
+  constructor({
+    getDoc,
+    getEditorState,
+    getLocalUser,
+    onCommentsChange = null,
+  }) {
+    this.getDoc = getDoc;
+    this.getEditorState = getEditorState;
+    this.getLocalUser = getLocalUser;
+    this.onCommentsChange = onCommentsChange;
+    this.commentThreads = null;
+    this.ydoc = null;
+    this.ytext = null;
+    this.handleCommentThreadsChange = null;
+    this.handleTextChange = null;
+  }
+
+  bind({ commentThreads, ydoc, ytext }) {
+    this.unbind();
+    this.commentThreads = commentThreads;
+    this.ydoc = ydoc;
+    this.ytext = ytext;
+    this.handleCommentThreadsChange = () => {
+      this.emitCommentsChange();
+    };
+    this.handleTextChange = () => {
+      this.emitCommentsChange();
+    };
+    this.commentThreads.observeDeep(this.handleCommentThreadsChange);
+    this.ytext?.observe?.(this.handleTextChange);
+    this.emitCommentsChange();
+  }
+
+  unbind() {
+    if (this.commentThreads && this.handleCommentThreadsChange) {
+      this.commentThreads.unobserveDeep(this.handleCommentThreadsChange);
+    }
+    if (this.ytext && this.handleTextChange) {
+      this.ytext.unobserve(this.handleTextChange);
+    }
+
+    this.commentThreads = null;
+    this.ydoc = null;
+    this.ytext = null;
+    this.handleCommentThreadsChange = null;
+    this.handleTextChange = null;
+  }
+
+  emitCommentsChange() {
+    this.onCommentsChange?.(this.getCommentThreads());
+  }
+
+  getCommentThreads() {
+    if (!this.commentThreads) {
+      return [];
+    }
+
+    return serializeCommentThreads(this.commentThreads)
+      .map((thread) => this.resolveCommentThread(thread))
+      .filter(Boolean);
+  }
+
+  createCommentThread({ anchor, body }) {
+    const state = this.getEditorState();
+    if (!state || !this.commentThreads || !this.ytext || !this.ydoc) {
+      return null;
+    }
+
+    const normalizedBody = normalizeCommentBody(body);
+    const normalizedAnchor = normalizeSelectionAnchorPayload(anchor, state);
+    if (!normalizedBody || !normalizedAnchor) {
+      return null;
+    }
+
+    const thread = createCommentThreadSharedType({
+      anchorEnd: Y.relativePositionToJSON(
+        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
+      ),
+      anchorEndLine: normalizedAnchor.anchorEndLine,
+      anchorKind: normalizedAnchor.anchorKind,
+      anchorQuote: normalizedAnchor.anchorQuote,
+      anchorStart: Y.relativePositionToJSON(
+        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
+      ),
+      anchorStartLine: normalizedAnchor.anchorStartLine,
+      createdAt: Date.now(),
+      createdByColor: this.getLocalUser()?.color ?? '',
+      createdByName: this.getLocalUser()?.name ?? 'Anonymous',
+      createdByPeerId: this.getLocalUser()?.peerId ?? '',
+      id: createCommentId('thread'),
+      messages: [createCommentMessage({
+        body: normalizedBody,
+        user: this.getLocalUser(),
+      })],
+    });
+
+    if (!thread) {
+      return null;
+    }
+
+    this.ydoc.transact(() => {
+      this.commentThreads.push([thread]);
+    }, 'comment-thread-create');
+
+    return thread.get('id');
+  }
+
+  replyToCommentThread(threadId, body) {
+    const normalizedBody = normalizeCommentBody(body);
+    if (!normalizedBody || !this.ydoc) {
+      return null;
+    }
+
+    const thread = this.findSharedCommentThread(threadId);
+    const messages = thread?.get('messages');
+    if (!(messages instanceof Y.Array)) {
+      return null;
+    }
+
+    const message = createCommentMessage({
+      body: normalizedBody,
+      user: this.getLocalUser(),
+    });
+
+    this.ydoc.transact(() => {
+      messages.push([message]);
+    }, 'comment-thread-reply');
+
+    return message.id;
+  }
+
+  deleteCommentThread(threadId) {
+    if (!this.commentThreads || !this.ydoc) {
+      return false;
+    }
+
+    const threadIndex = this.findSharedCommentThreadIndex(threadId);
+    if (threadIndex < 0) {
+      return false;
+    }
+
+    this.ydoc.transact(() => {
+      this.commentThreads.delete(threadIndex, 1);
+    }, 'comment-thread-resolve');
+
+    return true;
+  }
+
+  findSharedCommentThread(threadId) {
+    if (!this.commentThreads) {
+      return null;
+    }
+
+    return this.commentThreads.toArray().find((thread) => (
+      thread instanceof Y.Map && thread.get('id') === threadId
+    )) ?? null;
+  }
+
+  findSharedCommentThreadIndex(threadId) {
+    if (!this.commentThreads) {
+      return -1;
+    }
+
+    return this.commentThreads.toArray().findIndex((thread) => (
+      thread instanceof Y.Map && thread.get('id') === threadId
+    ));
+  }
+
+  resolveCommentThread(thread) {
+    const state = this.getEditorState();
+    if (!thread || !state || !this.ydoc) {
+      return null;
+    }
+
+    const normalizedAnchor = normalizeCommentAnchor(thread);
+    if (!normalizedAnchor) {
+      return null;
+    }
+
+    const anchorStart = this.resolveCommentPosition(normalizedAnchor.anchorStart);
+    const anchorEnd = this.resolveCommentPosition(normalizedAnchor.anchorEnd);
+    const startIndex = anchorStart?.index ?? state.doc.line(normalizedAnchor.anchorStartLine).from;
+    const fallbackEndLine = Math.min(
+      Math.max(normalizedAnchor.anchorEndLine ?? normalizedAnchor.anchorStartLine, normalizedAnchor.anchorStartLine),
+      state.doc.lines,
+    );
+    const endIndex = anchorEnd?.index ?? state.doc.line(fallbackEndLine).to;
+    const startLine = state.doc.lineAt(startIndex).number;
+    const safeEndIndex = Math.min(Math.max(endIndex, startIndex), state.doc.length);
+    const endLine = state.doc.lineAt(safeEndIndex).number;
+    const rawExcerpt = state.doc.sliceString(
+      startIndex,
+      normalizedAnchor.anchorKind === 'text' ? Math.max(endIndex, startIndex) : state.doc.line(endLine).to,
+    );
+    const excerpt = summarizeCommentExcerpt(rawExcerpt) || normalizedAnchor.anchorQuote;
+
+    return {
+      ...thread,
+      anchor: {
+        endIndex,
+        endLine,
+        excerpt,
+        quote: normalizedAnchor.anchorQuote,
+        startIndex,
+        startLine,
+        kind: normalizedAnchor.anchorKind,
+      },
+      anchorEnd: normalizedAnchor.anchorEnd,
+      anchorEndLine: normalizedAnchor.anchorEndLine,
+      anchorKind: normalizedAnchor.anchorKind,
+      anchorQuote: normalizedAnchor.anchorQuote,
+      anchorStart: normalizedAnchor.anchorStart,
+      anchorStartLine: normalizedAnchor.anchorStartLine,
+    };
+  }
+
+  resolveCommentPosition(positionJson) {
+    if (!positionJson || !this.ydoc || !this.ytext) {
+      return null;
+    }
+
+    try {
+      const position = Y.createRelativePositionFromJSON(positionJson);
+      const absolute = Y.createAbsolutePositionFromRelativePosition(position, this.ydoc);
+      if (!absolute || absolute.type !== this.ytext) {
+        return null;
+      }
+
+      return absolute;
+    } catch {
+      return null;
+    }
+  }
+}

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

@@ -0,0 +1,240 @@
+import { WebsocketProvider } from 'y-websocket';
+import * as Y from 'yjs';
+
+import { createRandomUser, normalizeUserName } from '../domain/room.js';
+import { resolveWsBaseUrl } from './runtime-config.js';
+import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
+
+export class EditorCollaborationClient {
+  constructor({
+    localUser = null,
+    onAwarenessChange = null,
+    onConnectionChange = null,
+    onInitialSync = null,
+    preferredUserName,
+    resolveAwarenessCursor = null,
+  }) {
+    this.onAwarenessChange = onAwarenessChange;
+    this.onConnectionChange = onConnectionChange;
+    this.onInitialSync = onInitialSync;
+    this.preferredUserName = preferredUserName;
+    this.providedLocalUser = localUser;
+    this.resolveAwarenessCursor = resolveAwarenessCursor ?? (() => null);
+    this.provider = null;
+    this.awareness = null;
+    this.localUser = null;
+    this.ydoc = null;
+    this.ytext = null;
+    this.commentThreads = null;
+    this.wsBaseUrl = '';
+    this.initialSyncComplete = false;
+    this.initialSyncPromise = Promise.resolve();
+    this.resolveInitialSync = null;
+  }
+
+  normalizeViewport(viewport) {
+    if (!viewport || typeof viewport !== 'object') {
+      return null;
+    }
+
+    const topLine = Number(viewport.topLine);
+    const viewportRatio = Number(viewport.viewportRatio);
+    if (!Number.isFinite(topLine) || topLine < 1) {
+      return null;
+    }
+
+    return {
+      topLine: Math.max(1, Math.round(topLine)),
+      viewportRatio: Number.isFinite(viewportRatio) ? Math.min(Math.max(viewportRatio, 0), 1) : 0.35,
+    };
+  }
+
+  async initialize(filePath) {
+    this.wsBaseUrl = resolveWsBaseUrl();
+    this.ydoc = new Y.Doc();
+    this.ytext = this.ydoc.getText('codemirror');
+    this.commentThreads = this.ydoc.getArray('comments');
+
+    const undoManager = new Y.UndoManager(this.ytext);
+    const provider = new WebsocketProvider(this.wsBaseUrl, filePath, this.ydoc, {
+      disableBc: true,
+      maxBackoffTime: 5000,
+    });
+    stopReconnectOnControlledClose(provider);
+    const awareness = provider.awareness;
+    const user = this.providedLocalUser ?? createRandomUser(this.preferredUserName);
+
+    this.provider = provider;
+    this.awareness = awareness;
+    this.localUser = user;
+    this.initialSyncComplete = false;
+    this.initialSyncPromise = new Promise((resolve) => {
+      this.resolveInitialSync = resolve;
+    });
+
+    awareness.setLocalStateField('user', user);
+    awareness.on('change', () => {
+      this.onAwarenessChange?.(this.collectUsers(this.resolveAwarenessCursor));
+    });
+
+    this.trackConnectionStatus();
+
+    let initialSyncDone = false;
+    provider.on('sync', (isSynced) => {
+      if (!isSynced || initialSyncDone) {
+        return;
+      }
+
+      initialSyncDone = true;
+      this.initialSyncComplete = true;
+      this.resolveInitialSync?.();
+      this.resolveInitialSync = null;
+      this.onInitialSync?.();
+    });
+
+    return {
+      awareness,
+      commentThreads: this.commentThreads,
+      localUser: this.localUser,
+      undoManager,
+      ydoc: this.ydoc,
+      ytext: this.ytext,
+    };
+  }
+
+  destroy() {
+    this.resolveInitialSync?.();
+    this.resolveInitialSync = null;
+    this.initialSyncComplete = false;
+    this.initialSyncPromise = Promise.resolve();
+
+    this.provider?.disconnect();
+    this.provider?.destroy();
+    this.provider = null;
+    this.awareness = null;
+    this.localUser = null;
+
+    this.ydoc?.destroy();
+    this.ydoc = null;
+    this.ytext = null;
+    this.commentThreads = null;
+  }
+
+  waitForInitialSync(timeoutMs = 1500) {
+    if (this.initialSyncComplete) {
+      return Promise.resolve();
+    }
+
+    return Promise.race([
+      this.initialSyncPromise,
+      new Promise((resolve) => {
+        window.setTimeout(resolve, timeoutMs);
+      }),
+    ]);
+  }
+
+  getText() {
+    return this.ytext?.toString() ?? '';
+  }
+
+  getLocalUser() {
+    return this.localUser;
+  }
+
+  setUserName(name) {
+    const normalizedName = normalizeUserName(name);
+    if (!normalizedName || !this.awareness || !this.localUser) {
+      return null;
+    }
+
+    this.localUser = {
+      ...this.localUser,
+      name: normalizedName,
+    };
+    this.awareness.setLocalStateField('user', this.localUser);
+    return normalizedName;
+  }
+
+  getUserCursor(clientId, resolveCursor) {
+    if (!this.awareness) {
+      return null;
+    }
+
+    const awarenessState = this.awareness.getStates().get(clientId);
+    return resolveCursor(awarenessState?.cursor);
+  }
+
+  getUserViewport(clientId) {
+    if (!this.awareness) {
+      return null;
+    }
+
+    const awarenessState = this.awareness.getStates().get(clientId);
+    return this.normalizeViewport(awarenessState?.viewport);
+  }
+
+  setLocalViewport(viewport) {
+    if (!this.awareness) {
+      return null;
+    }
+
+    const nextViewport = this.normalizeViewport(viewport);
+    this.awareness.setLocalStateField('viewport', nextViewport);
+    return nextViewport;
+  }
+
+  collectUsers(resolveCursor = () => null) {
+    if (!this.awareness) {
+      return [];
+    }
+
+    const users = [];
+    this.awareness.getStates().forEach((state, clientId) => {
+      if (!state.user) {
+        return;
+      }
+
+      const cursor = resolveCursor(state.cursor);
+      users.push({
+        ...(cursor ?? {}),
+        ...state.user,
+        clientId,
+        hasCursor: Boolean(cursor),
+        isLocal: clientId === this.awareness.clientID,
+        viewport: this.normalizeViewport(state.viewport),
+      });
+    });
+
+    return users;
+  }
+
+  trackConnectionStatus() {
+    if (!this.provider) {
+      return;
+    }
+
+    let attempts = 0;
+    let hasEverConnected = false;
+
+    this.provider.on('status', ({ status }) => {
+      if (status === 'connecting') {
+        attempts += 1;
+      }
+
+      const firstConnection = status === 'connected' && !hasEverConnected;
+      if (status === 'connected') {
+        attempts = 0;
+        hasEverConnected = true;
+      }
+
+      this.onConnectionChange?.({
+        attempts,
+        firstConnection,
+        hasEverConnected,
+        status,
+        unreachable: !hasEverConnected && attempts >= 3,
+        wsBaseUrl: this.wsBaseUrl,
+      });
+    });
+  }
+}