@dxos/react-ui-editor 0.4.7-main.e015b9e → 0.4.7-main.ea67fec

package/dist/lib/browser/index.mjs

@@ -596,7 +596,7 @@ var RemoteSelectionsDecorator = class {
           to: startLine.from + startLine.length,
           value: Decoration2.mark({
             attributes: {
-              style: `background-color: ${color}`
+              style: `background-color: ${lightColor}`
             },
             class: "cm-collab-selection"
           })
@@ -606,7 +606,7 @@ var RemoteSelectionsDecorator = class {
           to: end,
           value: Decoration2.mark({
             attributes: {
-              style: `background-color: ${color}`
+              style: `background-color: ${lightColor}`
             },
             class: "cm-collab-selection"
           })
@@ -618,7 +618,7 @@ var RemoteSelectionsDecorator = class {
             to: linePos,
             value: Decoration2.line({
               attributes: {
-                style: `background-color: ${color}`,
+                style: `background-color: ${lightColor}`,
                 class: "cm-collab-selectionLine"
               }
             })
@@ -1072,44 +1072,6 @@ import { useEffect } from "react";
 import { debounce } from "@dxos/async";
 import { nonNullable } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/styles/cursors.ts
-import * as random2 from "lib0/random";
-var cursorColors = [
-  {
-    color: "#30bced",
-    light: "#30bced33"
-  },
-  {
-    color: "#6eeb83",
-    light: "#6eeb8333"
-  },
-  {
-    color: "#ffbc42",
-    light: "#ffbc4233"
-  },
-  {
-    color: "#ecd444",
-    light: "#ecd44433"
-  },
-  {
-    color: "#ee6352",
-    light: "#ee635233"
-  },
-  {
-    color: "#9ac2c9",
-    light: "#9ac2c933"
-  },
-  {
-    color: "#8acb88",
-    light: "#8acb8833"
-  },
-  {
-    color: "#1be7ff",
-    light: "#1be7ff33"
-  }
-];
-var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
-
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
@@ -1897,7 +1859,7 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
+import { RangeSetBuilder, StateEffect as StateEffect3 } from "@codemirror/state";
 import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var HorizontalRuleWidget = class extends WidgetType2 {
@@ -1978,9 +1940,9 @@ var checkedTask = Decoration4.replace({
 var uncheckedTask = Decoration4.replace({
   widget: new CheckboxWidget(false)
 });
-var editingRange = (state, range) => {
+var editingRange = (state, range, focus) => {
   const { readOnly, selection: { main: { head } } } = state;
-  return !readOnly && head >= range.from && head <= range.to;
+  return focus && !readOnly && head >= range.from && head < range.to;
 };
 var MarksByParent = /* @__PURE__ */ new Set([
   "CodeMark",
@@ -1989,8 +1951,9 @@ var MarksByParent = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations = (view, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations = (view, options, focus) => {
+  const deco = new RangeSetBuilder();
+  const atomicDeco = new RangeSetBuilder();
   const { state } = view;
   for (const { from, to } of view.visibleRanges) {
     syntaxTree(state).iterate({
@@ -1998,7 +1961,7 @@ var buildDecorations = (view, options) => {
       to,
       enter: (node) => {
         if (node.name === "FencedCode") {
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           for (const block of view.viewportLineBlocks) {
             if (block.to < node.from) {
               continue;
@@ -2008,22 +1971,22 @@ var buildDecorations = (view, options) => {
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
-            builder.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
+            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, hide);
+              atomicDeco.add(block.from, block.to, hide);
             }
           }
           return false;
         } else if (node.name === "Link") {
           const marks = node.node.getChildren("LinkMark");
           const urlNode = node.node.getChild("URL");
-          const editing = editingRange(state, node);
+          const editing = editingRange(state, node, focus);
           if (urlNode && marks.length >= 2) {
             const url = state.sliceDoc(urlNode.from, urlNode.to);
             if (!editing) {
-              builder.add(node.from, marks[0].to, hide);
+              atomicDeco.add(node.from, marks[0].to, hide);
             }
-            builder.add(marks[0].to, marks[1].from, Decoration4.mark({
+            deco.add(marks[0].to, marks[1].from, Decoration4.mark({
               tagName: "a",
               attributes: {
                 class: "cm-link",
@@ -2033,52 +1996,81 @@ var buildDecorations = (view, options) => {
               }
             }));
             if (!editing) {
-              builder.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
+              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
                 widget: new LinkButton(url, options.renderLinkButton)
               }) : hide);
             }
           }
         } else if (node.name === "HeaderMark") {
           const parent = node.node.parent;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
+          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
             const next = state.doc.sliceString(node.to, node.to + 1);
-            builder.add(node.from, node.to + (next === " " ? 1 : 0), hide);
+            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
           }
         } else if (node.name === "HorizontalRule") {
-          if (!editingRange(state, node)) {
-            builder.add(node.from, node.to, horizontalRule);
+          if (!editingRange(state, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
           }
         } else if (node.name === "TaskMarker") {
-          if (!editingRange(state, node)) {
+          if (!editingRange(state, node, focus)) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration4.mark({
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration4.mark({
               class: "cm-task"
             }));
-            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
           }
         } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent)) {
-            builder.add(node.from, node.to, hide);
+          if (!editingRange(state, node.node.parent, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
         }
       }
     });
   }
-  return builder.finish();
+  return {
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
+  };
 };
+var forceUpdate = StateEffect3.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations(view, options);
+        this.pendingUpdate = -1;
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
       }
       update(update2) {
-        if (update2.docChanged || update2.selectionSet || update2.viewportChanged) {
-          this.decorations = buildDecorations(update2.view, options);
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate)))) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
+        }
+      }
+      clearUpdate() {
+        if (this.pendingUpdate > -1) {
+          window.clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = -1;
         }
       }
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = window.setTimeout(() => {
+          view.dispatch({
+            effects: forceUpdate.of(null)
+          });
+        }, options.selectionChangeDelay ?? 400);
+      }
+      destroy() {
+        this.clearUpdate();
+      }
     }, {
-      decorations: (value) => value.decorations
+      provide: (plugin) => [
+        EditorView10.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none),
+        EditorView10.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration4.none),
+        EditorView10.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration4.none)
+      ]
     }),
     formattingStyles
   ];
@@ -4550,11 +4542,15 @@ import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
+import { hueTokens } from "@dxos/react-ui-theme";
+import { hexToHue } from "@dxos/util";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextExtensions = ({ id, text, space, identity }) => {
   const extensions = [
     automerge(text)
   ];
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? "0")];
   if (space && identity) {
     const awarenessProvider2 = new SpaceAwarenessProvider({
       space,
@@ -4562,8 +4558,8 @@ var useTextExtensions = ({ id, text, space, identity }) => {
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorColor.color,
-        lightColor: cursorColor.light
+        color: cursorDarkValue,
+        lightColor: cursorLightValue
       }
     });
     extensions.push(awareness(awarenessProvider2));
@@ -4586,7 +4582,7 @@ var createModel = ({ space, identity, text }) => {
   }
   invariant3(isAutomergeObject(text), void 0, {
     F: __dxlog_file7,
-    L: 83,
+    L: 87,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -4597,13 +4593,15 @@ var createModel = ({ space, identity, text }) => {
   const doc = getRawDoc(obj, [
     obj.field
   ]);
+  const peerId = identity?.identityKey.toHex();
+  const { cursorLightValue, cursorDarkValue } = hueTokens[hexToHue(peerId ?? "0")];
   const awarenessProvider2 = space && new SpaceAwarenessProvider({
     space,
     channel: `automerge.awareness.${obj.id}`,
     info: {
       displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : void 0,
-      color: cursorColor.color,
-      lightColor: cursorColor.light
+      color: cursorLightValue,
+      lightColor: cursorDarkValue
     },
     peerId: identity?.identityKey.toHex() ?? "Anonymous"
   });