@dxos/react-ui-editor 0.6.3-next.2f65b78 → 0.6.3-staging.0f23fb2

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';
 
@@ -108,30 +118,42 @@ const styles = EditorView.baseTheme({
     borderRadius: '2px',
     transition: 'background-color 0.1s ease',
   },
-  '&light .cm-comment, &light .cm-comment-current': {
+  // Light theme.
+  '&light .cm-comment': {
+    backgroundColor: getToken('extend.colors.yellow.50'),
     mixBlendMode: 'darken',
     borderColor: getToken('extend.colors.yellow.100'),
   },
-  '&dark .cm-comment, &dark .cm-comment-current': {
-    mixBlendMode: 'plus-lighter',
-    borderColor: getToken('extend.colors.yellow.900'),
+  '&light .cm-comment:hover': { backgroundColor: getToken('extend.colors.yellow.100') },
+  '&light .cm-comment-current': {
+    backgroundColor: getToken('extend.colors.primary.100'),
+    borderColor: getToken('extend.colors.primary.200'),
   },
-  '&light .cm-comment': {
-    backgroundColor: getToken('extend.colors.yellow.50'),
+  '&light .cm-comment-current:hover': {
+    backgroundColor: getToken('extend.colors.primary.150'),
+    borderColor: getToken('extend.colors.primary.250'),
   },
-  '&light .cm-comment:hover': { backgroundColor: getToken('extend.colors.yellow.100') },
-  '&light .cm-comment-current': { backgroundColor: getToken('extend.colors.yellow.100') },
-  '&light .cm-comment-current:hover': { backgroundColor: getToken('extend.colors.yellow.150') },
+
+  // Dark theme.
   '&dark .cm-comment': {
     color: getToken('extend.colors.yellow.50'),
-    backgroundColor: getToken('extend.colors.yellow.900'),
+    backgroundColor: getToken('extend.colors.yellow.800'),
+    borderColor: getToken('extend.colors.yellow.700'),
+    mixBlendMode: 'plus-lighter',
+  },
+  '&dark .cm-comment:hover': {
+    backgroundColor: getToken('extend.colors.yellow.700'),
+    borderColor: getToken('extend.colors.yellow.650'),
   },
-  '&dark .cm-comment:hover': { backgroundColor: getToken('extend.colors.yellow.800') },
   '&dark .cm-comment-current': {
-    color: getToken('extend.colors.yellow.100'),
-    backgroundColor: getToken('extend.colors.yellow.950'),
+    color: getToken('extend.colors.primary.50'),
+    backgroundColor: getToken('extend.colors.primary.800'),
+    borderColor: getToken('extend.colors.primary.700'),
+  },
+  '&dark .cm-comment-current:hover': {
+    backgroundColor: getToken('extend.colors.primary.700'),
+    borderColor: getToken('extend.colors.primary.650'),
   },
-  '&dark .cm-comment-current:hover': { backgroundColor: getToken('extend.colors.yellow.900') },
 });
 
 const createCommentMark = (id: string, isCurrent: boolean) =>
@@ -585,34 +607,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,
@@ -635,6 +675,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.
  */