@dxos/react-ui-editor 0.6.2 → 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";
@@ -1539,7 +1539,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 159,
+        L: 169,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1876,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,
@@ -1912,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) => {
@@ -3713,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:",
@@ -3750,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;
   }
@@ -3845,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() {
@@ -4061,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));
       }
@@ -5192,6 +5216,7 @@ export {
   createBasicExtensions,
   createComment,
   createDataExtensions,
+  createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,