@dxos/react-ui-editor 0.6.2-main.fb91371 → 0.6.2

package/dist/lib/browser/index.mjs

@@ -1481,37 +1481,53 @@ var commentsState = StateField4.define({
   }
 });
 var styles3 = EditorView7.baseTheme({
+  ".cm-comment, .cm-comment-current": {
+    cursor: "pointer",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "2px",
+    transition: "background-color 0.1s ease"
+  },
   "&light .cm-comment, &light .cm-comment-current": {
-    mixBlendMode: "darken"
+    mixBlendMode: "darken",
+    borderColor: getToken("extend.colors.yellow.100")
   },
   "&dark .cm-comment, &dark .cm-comment-current": {
-    mixBlendMode: "plus-lighter"
+    mixBlendMode: "plus-lighter",
+    borderColor: getToken("extend.colors.yellow.900")
   },
   "&light .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
+  "&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 .cm-comment": {
     color: getToken("extend.colors.yellow.50"),
     backgroundColor: getToken("extend.colors.yellow.900")
   },
+  "&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")
+  },
+  "&dark .cm-comment-current:hover": {
+    backgroundColor: getToken("extend.colors.yellow.900")
   }
 });
-var commentMark = Decoration4.mark({
-  class: "cm-comment",
-  attributes: {
-    "data-testid": "cm-comment"
-  }
-});
-var commentCurrentMark = Decoration4.mark({
-  class: "cm-comment-current",
+var createCommentMark = (id, isCurrent) => Decoration4.mark({
+  class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
-    "data-testid": "cm-comment"
+    "data-testid": "cm-comment",
+    "data-comment-id": id
   }
 });
 var commentsDecorations = EditorView7.decorations.compute([
@@ -1523,7 +1539,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 141,
+        L: 159,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1531,14 +1547,31 @@ var commentsDecorations = EditorView7.decorations.compute([
     } else if (range.from === range.to) {
       return void 0;
     }
-    if (comment.comment.id === current) {
-      return commentCurrentMark.range(range.from, range.to);
-    } else {
-      return commentMark.range(range.from, range.to);
-    }
+    const mark2 = createCommentMark(comment.comment.id, comment.comment.id === current);
+    return mark2.range(range.from, range.to);
   }).filter(nonNullable);
   return Decoration4.set(decorations);
 });
+var commentClickedEffect = StateEffect3.define();
+var handleCommentClick = EditorView7.domEventHandlers({
+  click: (event, view) => {
+    let target = event.target;
+    const editorRoot = view.dom;
+    while (target && target !== editorRoot && !target.hasAttribute("data-comment-id")) {
+      target = target.parentElement;
+    }
+    if (target && target !== editorRoot) {
+      const commentId = target.getAttribute("data-comment-id");
+      if (commentId) {
+        view.dispatch({
+          effects: commentClickedEffect.of(commentId)
+        });
+        return true;
+      }
+    }
+    return false;
+  }
+});
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
   const handleTrack = (event, view) => {
@@ -1689,6 +1722,7 @@ var comments = (options = {}) => {
     documentId.of(options.id),
     commentsState,
     commentsDecorations,
+    handleCommentClick,
     styles3,
     //
     // Keymap.
@@ -1807,20 +1841,26 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
   const range = Cursor.getRangeFromCursor(view.state, comment.comment.cursor);
   if (range) {
-    view.dispatch({
-      selection: {
-        anchor: range.from
-      },
-      effects: [
-        //
-        EditorView7.scrollIntoView(range.from, center ? {
-          y: "center"
-        } : void 0),
-        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 !== void 0 && (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
+        } : void 0,
+        effects: [
+          needsScroll ? EditorView7.scrollIntoView(range.from, center ? {
+            y: "center"
+          } : void 0) : [],
+          needsSelectionUpdate ? setSelection.of({
+            current: id
+          }) : []
+        ].flat()
+      });
+    }
   }
 };
 var selectionOverlapsComment = (state2) => {
@@ -1833,6 +1873,9 @@ var selectionOverlapsComment = (state2) => {
   }
   return false;
 };
+var hasActiveSelection = (state2) => {
+  return state2.selection.ranges.some((range) => !range.empty);
+};
 var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
@@ -1852,17 +1895,37 @@ var useComments = (view, id, comments2) => {
   ]);
 };
 var useCommentState = () => {
-  const [comment, setComment] = useState(false);
+  const [state2, setState] = useState({
+    comment: false,
+    selection: false
+  });
   const observer = useMemo(() => EditorView7.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      setComment(() => selectionOverlapsComment(update2.state));
+      setState({
+        comment: selectionOverlapsComment(update2.state),
+        selection: hasActiveSelection(update2.state)
+      });
     }
   }), []);
   return [
-    comment,
+    state2,
     observer
   ];
 };
+var useCommentClickListener = (onCommentClick) => {
+  const observer = useMemo(() => EditorView7.updateListener.of((update2) => {
+    update2.transactions.forEach((transaction) => {
+      transaction.effects.forEach((effect) => {
+        if (effect.is(commentClickedEffect)) {
+          onCommentClick(effect.value);
+        }
+      });
+    });
+  }), [
+    onCommentClick
+  ]);
+  return observer;
+};
 
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
@@ -4960,7 +5023,7 @@ var MarkdownActions = () => {
     onClick: () => onAction?.({
       type: "comment"
     }),
-    disabled: !state2 || state2.comment
+    disabled: !state2 || state2.comment || !state2.selection
   }, t("comment label")));
 };
 var Toolbar = {
@@ -5184,6 +5247,7 @@ export {
   translations_default as translations,
   typewriter,
   useActionHandler,
+  useCommentClickListener,
   useCommentState,
   useComments,
   useFormattingState,