@dxos/react-ui-editor 0.6.2-next.5b5129c → 0.6.3-main.0308ae2

package/dist/lib/browser/index.mjs

@@ -1348,7 +1348,7 @@ var command = (options) => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "@dxos/async";
@@ -1523,15 +1523,13 @@ var styles3 = EditorView7.baseTheme({
     backgroundColor: getToken("extend.colors.yellow.900")
   }
 });
-var createCommentMark = (id, isCurrent) => {
-  return Decoration4.mark({
-    class: isCurrent ? "cm-comment-current" : "cm-comment",
-    attributes: {
-      "data-testid": "cm-comment",
-      "data-comment-id": id
-    }
-  });
-};
+var createCommentMark = (id, isCurrent) => Decoration4.mark({
+  class: isCurrent ? "cm-comment-current" : "cm-comment",
+  attributes: {
+    "data-testid": "cm-comment",
+    "data-comment-id": id
+  }
+});
 var commentsDecorations = EditorView7.decorations.compute([
   commentsState
 ], (state2) => {
@@ -1541,7 +1539,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 160,
+        L: 169,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1843,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) => {
@@ -1872,24 +1876,34 @@ var selectionOverlapsComment = (state2) => {
 var hasActiveSelection = (state2) => {
   return state2.selection.ranges.some((range) => !range.empty);
 };
-var useComments = (view, id, comments2) => {
-  useEffect(() => {
-    if (view) {
+var ExternalCommentSync = class {
+  constructor(view, id, subscribe, getThreads) {
+    this.destroy = () => {
+      this.unsubscribe();
+    };
+    const updateComments = () => {
+      const threads = getThreads();
+      const comments2 = threads.filter(nonNullable).filter((thread) => thread.anchor).map((thread) => ({
+        id: thread.id,
+        cursor: thread.anchor
+      }));
       if (id === view.state.facet(documentId)) {
-        view.dispatch({
+        queueMicrotask(() => view.dispatch({
           effects: setComments.of({
             id,
-            comments: comments2 ?? []
+            comments: comments2
           })
-        });
+        }));
       }
-    }
-  }, [
-    id,
-    view,
-    comments2
-  ]);
+    };
+    this.unsubscribe = subscribe(updateComments);
+  }
 };
+var createExternalCommentSync = (id, subscribe, getThreads) => ViewPlugin4.fromClass(class {
+  constructor(view) {
+    return new ExternalCommentSync(view, id, subscribe, getThreads);
+  }
+});
 var useCommentState = () => {
   const [state2, setState] = useState({
     comment: false,
@@ -1908,6 +1922,20 @@ var useCommentState = () => {
     observer
   ];
 };
+var useComments = (view, id, comments2) => {
+  useEffect(() => {
+    if (view) {
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({
+            id,
+            comments: comments2 ?? []
+          })
+        });
+      }
+    }
+  });
+};
 var useCommentClickListener = (onCommentClick) => {
   const observer = useMemo(() => EditorView7.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
@@ -3709,7 +3737,7 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/linkPaste.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { Transaction } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var VALID_PROTOCOLS = [
   "http:",
   "https:",
@@ -3746,7 +3774,7 @@ var isValidUrl = (str) => {
   }
 };
 var onNextUpdate = (callback) => setTimeout(callback, 0);
-var linkPastePlugin = ViewPlugin4.fromClass(class {
+var linkPastePlugin = ViewPlugin5.fromClass(class {
   constructor(view) {
     this.view = view;
   }
@@ -3841,7 +3869,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
@@ -4057,7 +4085,7 @@ var buildDecorations = (view, options, focus) => {
 var forceUpdate = StateEffect4.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin5.fromClass(class {
+    ViewPlugin6.fromClass(class {
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
       }
@@ -5188,6 +5216,7 @@ export {
   createBasicExtensions,
   createComment,
   createDataExtensions,
+  createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,