collabmd 0.1.54 → 0.1.55

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/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/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)) });
+    },
+  };
+}

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

@@ -2,10 +2,13 @@ import * as Y from 'yjs';
 
 import {
   createCommentId,
+  createCommentReactionKey,
   createCommentThreadSharedType,
   normalizeCommentAnchor,
   normalizeCommentBody,
   normalizeCommentQuote,
+  normalizeCommentReactionEmoji,
+  serializeCommentThread,
   serializeCommentThreads,
   summarizeCommentExcerpt,
 } from '../../domain/comment-threads.js';
@@ -22,30 +25,6 @@ function createCommentMessage({ body, user }) {
   };
 }
 
-function readRecordValue(record, key) {
-  if (record instanceof Y.Map) {
-    return record.get(key);
-  }
-
-  return record?.[key];
-}
-
-function cloneReactionGroups(source = []) {
-  return Array.isArray(source)
-    ? source.map((group) => ({
-      emoji: typeof group?.emoji === 'string' ? group.emoji : '',
-      users: Array.isArray(group?.users)
-        ? group.users.map((user) => ({
-          reactedAt: Number.isFinite(user?.reactedAt) ? user.reactedAt : Date.now(),
-          userColor: typeof user?.userColor === 'string' ? user.userColor : '',
-          userId: typeof user?.userId === 'string' ? user.userId : '',
-          userName: typeof user?.userName === 'string' && user.userName ? user.userName : 'Anonymous',
-        })).filter((user) => user.userId)
-        : [],
-    })).filter((group) => group.emoji && group.users.length > 0)
-    : [];
-}
-
 function normalizeSelectionAnchorPayload(payload, state) {
   const doc = state?.doc;
   if (!doc) {
@@ -239,7 +218,11 @@ export class CommentThreadStore {
   }
 
   toggleCommentReaction(threadId, messageId, emoji) {
-    if (!this.ydoc || !threadId || !messageId || typeof emoji !== 'string' || !emoji.trim()) {
+    if (!this.canWrite() || !this.ydoc || !threadId || !messageId || typeof emoji !== 'string') {
+      return false;
+    }
+    const normalizedEmoji = normalizeCommentReactionEmoji(emoji);
+    if (!normalizedEmoji) {
       return false;
     }
 
@@ -250,62 +233,21 @@ export class CommentThreadStore {
     }
 
     const thread = this.findSharedCommentThread(threadId);
-    const messages = thread?.get('messages');
-    if (!(messages instanceof Y.Array)) {
-      return false;
-    }
-
-    const items = messages.toArray();
-    const messageIndex = items.findIndex((message) => readRecordValue(message, 'id') === messageId);
-    if (messageIndex < 0) {
+    const message = serializeCommentThread(thread)?.messages.find((entry) => entry.id === messageId);
+    if (!message) {
       return false;
     }
-
-    const messageRecord = items[messageIndex] instanceof Y.Map
-      ? items[messageIndex].toJSON()
-      : { ...items[messageIndex] };
-    const reactions = cloneReactionGroups(messageRecord.reactions);
-    const reactionIndex = reactions.findIndex((reaction) => reaction.emoji === emoji);
-
-    if (reactionIndex >= 0) {
-      const nextUsers = reactions[reactionIndex].users.filter((user) => user.userId !== localUserId);
-      if (nextUsers.length === reactions[reactionIndex].users.length) {
-        nextUsers.push({
-          reactedAt: Date.now(),
-          userColor: localUser?.color ?? '',
-          userId: localUserId,
-          userName: localUser?.name ?? 'Anonymous',
-        });
-      }
-
-      if (nextUsers.length === 0) {
-        reactions.splice(reactionIndex, 1);
-      } else {
-        reactions[reactionIndex] = {
-          ...reactions[reactionIndex],
-          users: nextUsers,
-        };
-      }
-    } else {
-      reactions.push({
-        emoji,
-        users: [{
-          reactedAt: Date.now(),
-          userColor: localUser?.color ?? '',
-          userId: localUserId,
-          userName: localUser?.name ?? 'Anonymous',
-        }],
-      });
-    }
-
-    const nextMessage = {
-      ...messageRecord,
-      reactions,
-    };
+    const hasReaction = message.reactions.some((group) => group.emoji === normalizedEmoji
+      && group.users.some((user) => user.userId === localUserId));
 
     this.ydoc.transact(() => {
-      messages.delete(messageIndex, 1);
-      messages.insert(messageIndex, [nextMessage]);
+      // Keep the message identity intact; different users change independent keys.
+      thread.set(createCommentReactionKey(messageId, normalizedEmoji, localUserId), hasReaction ? null : {
+        reactedAt: Date.now(),
+        userColor: localUser?.color ?? '',
+        userId: localUserId,
+        userName: localUser?.name ?? 'Anonymous',
+      });
     }, 'comment-reaction-toggle');
 
     return true;