@dxos/react-ui-editor 0.6.2-next.5b5129c → 0.6.3-main.0af171d

package/src/extensions/comments.ts

@@ -12,11 +12,21 @@ import {
   type ChangeDesc,
   type EditorState,
 } from '@codemirror/state';
-import { hoverTooltip, keymap, type Command, Decoration, EditorView, type Rect } from '@codemirror/view';
+import {
+  hoverTooltip,
+  keymap,
+  type Command,
+  Decoration,
+  EditorView,
+  type Rect,
+  type PluginValue,
+  ViewPlugin,
+} from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 import { useEffect, useMemo, useState } from 'react';
 
-import { debounce } from '@dxos/async';
+import { type ThreadType } from '@braneframe/types';
+import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
@@ -134,15 +144,14 @@ const styles = EditorView.baseTheme({
   '&dark .cm-comment-current:hover': { backgroundColor: getToken('extend.colors.yellow.900') },
 });
 
-const createCommentMark = (id: string, isCurrent: boolean) => {
-  return Decoration.mark({
+const createCommentMark = (id: string, isCurrent: boolean) =>
+  Decoration.mark({
     class: isCurrent ? 'cm-comment-current' : 'cm-comment',
     attributes: {
       'data-testid': 'cm-comment',
       'data-comment-id': id,
     },
   });
-};
 
 /**
  * Decorate ranges.
@@ -545,17 +554,28 @@ export const scrollThreadIntoView = (view: EditorView, id: string, center = true
   if (!comment?.comment.cursor) {
     return;
   }
-
   const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
   if (range) {
-    view.dispatch({
-      selection: { anchor: range.from },
-      effects: [
-        //
-        EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined),
-        setSelection.of({ current: id }),
-      ],
-    });
+    const currentSelection = view.state.selection.main;
+    const currentScrollPosition = view.scrollDOM.scrollTop;
+    const targetScrollPosition = view.coordsAtPos(range.from)?.top;
+
+    const needsScroll =
+      targetScrollPosition !== undefined &&
+      (targetScrollPosition < currentScrollPosition ||
+        targetScrollPosition > currentScrollPosition + view.scrollDOM.clientHeight);
+
+    const needsSelectionUpdate = currentSelection.from !== range.from || currentSelection.to !== range.from;
+
+    if (needsScroll || needsSelectionUpdate) {
+      view.dispatch({
+        selection: needsSelectionUpdate ? { anchor: range.from } : undefined,
+        effects: [
+          needsScroll ? EditorView.scrollIntoView(range.from, center ? { y: 'center' } : undefined) : [],
+          needsSelectionUpdate ? setSelection.of({ current: id }) : [],
+        ].flat(),
+      });
+    }
   }
 };
 
@@ -575,34 +595,52 @@ export const selectionOverlapsComment = (state: EditorState): boolean => {
   return false;
 };
 
-/**
- * Check if there is one or more active (non-empty) selections in the editor state.
- */
 const hasActiveSelection = (state: EditorState): boolean => {
   return state.selection.ranges.some((range) => !range.empty);
 };
 
-/**
- * Update comments state field.
- */
-export const useComments = (view: EditorView | null | undefined, id: string, comments?: Comment[]) => {
-  useEffect(() => {
-    if (view) {
-      // Check same document.
-      // NOTE: Hook might be called before editor state is updated.
+class ExternalCommentSync implements PluginValue {
+  private unsubscribe: () => void;
+
+  constructor(
+    view: EditorView,
+    id: string,
+    subscribe: (sink: () => void) => UnsubscribeCallback,
+    getThreads: () => ThreadType[],
+  ) {
+    const updateComments = () => {
+      const threads = getThreads();
+      const comments = threads
+        .filter(nonNullable)
+        .filter((thread) => thread.anchor)
+        .map((thread) => ({ id: thread.id, cursor: thread.anchor! }));
+
       if (id === view.state.facet(documentId)) {
-        view.dispatch({
-          effects: setComments.of({ id, comments: comments ?? [] }),
-        });
+        queueMicrotask(() => view.dispatch({ effects: setComments.of({ id, comments }) }));
       }
-    }
-  }, [id, view, comments]);
-};
+    };
+
+    this.unsubscribe = subscribe(updateComments);
+  }
+
+  destroy = () => {
+    this.unsubscribe();
+  };
+}
+
+export const createExternalCommentSync = (
+  id: string,
+  subscribe: (sink: () => void) => UnsubscribeCallback,
+  getThreads: () => ThreadType[],
+): Extension =>
+  ViewPlugin.fromClass(
+    class {
+      constructor(view: EditorView) {
+        return new ExternalCommentSync(view, id, subscribe, getThreads);
+      }
+    },
+  );
 
-/**
- * Hook provides an extension to compute the current comment state under the selection.
- * NOTE(Zan): I think this conceptually belongs in 'formatting.ts' but we can't import ESM modules there atm.
- */
 export const useCommentState = (): [{ comment: boolean; selection: boolean }, Extension] => {
   const [state, setState] = useState<{ comment: boolean; selection: boolean }>({
     comment: false,
@@ -625,6 +663,24 @@ export const useCommentState = (): [{ comment: boolean; selection: boolean }, Ex
   return [state, observer];
 };
 
+/**
+ * @deprecated This hook will be removed in future versions. Use the new comment sync extension instead.
+ * Update comments state field.
+ */
+export const useComments = (view: EditorView | null | undefined, id: string, comments?: Comment[]) => {
+  useEffect(() => {
+    if (view) {
+      // Check same document.
+      // NOTE: Hook might be called before editor state is updated.
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({ id, comments: comments ?? [] }),
+        });
+      }
+    }
+  });
+};
+
 /**
  * Hook provides an extension to listen for comment clicks and invoke a handler.
  */