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

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";
@@ -1488,39 +1488,42 @@ var styles3 = EditorView7.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": {
-    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")
+    backgroundColor: getToken("extend.colors.primary.100"),
+    borderColor: getToken("extend.colors.primary.200")
   },
   "&light .cm-comment-current:hover": {
-    backgroundColor: getToken("extend.colors.yellow.150")
+    backgroundColor: getToken("extend.colors.primary.150"),
+    borderColor: getToken("extend.colors.primary.250")
   },
+  // 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.800")
+    backgroundColor: getToken("extend.colors.yellow.700"),
+    borderColor: getToken("extend.colors.yellow.650")
   },
   "&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.yellow.900")
+    backgroundColor: getToken("extend.colors.primary.700"),
+    borderColor: getToken("extend.colors.primary.650")
   }
 });
 var createCommentMark = (id, isCurrent) => Decoration4.mark({
@@ -1539,7 +1542,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 159,
+        L: 181,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1876,24 +1879,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 +1925,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 +3740,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 +3777,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 +3872,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 +4088,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 +5219,7 @@ export {
   createBasicExtensions,
   createComment,
   createDataExtensions,
+  createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,