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

package/dist/lib/browser/index.mjs

@@ -23,7 +23,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap8 } from "@codemirror/view";
+import { keymap as keymap9 } from "@codemirror/view";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
@@ -32,7 +32,7 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView14, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView17, scrollPastEnd } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
@@ -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"
               }
             })
@@ -1063,52 +1063,232 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-import { invertedEffects } from "@codemirror/commands";
-import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect } from "react";
-import { debounce } from "@dxos/async";
-import { nonNullable } from "@dxos/util";
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+import { EditorView as EditorView7, keymap as keymap3 } from "@codemirror/view";
 
-// 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"
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView6, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/command/state.ts
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { showTooltip } from "@codemirror/view";
+var commandConfig = Facet3.define({
+  combine: (providers) => providers[0]
+});
+var commandState = StateField3.define({
+  create: () => ({}),
+  update: (state, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(closeEffect)) {
+        return {};
+      }
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
+        const { pos, fullWidth } = effect.value;
+        const tooltip = {
+          pos,
+          above: false,
+          arrow: false,
+          strictSide: true,
+          create: (view) => {
+            const dom = document.createElement("div");
+            const tooltipView = {
+              dom,
+              mount: (view2) => {
+                if (fullWidth) {
+                  const parent = dom.parentElement;
+                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
+                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+                  dom.style.width = `${widthWithoutPadding}px`;
+                }
+                options.onRender(dom, (action) => {
+                  view2.dispatch({
+                    effects: closeEffect.of(null)
+                  });
+                  if (action?.insert?.length) {
+                    view2.dispatch({
+                      changes: {
+                        from: pos,
+                        insert: action.insert
+                      },
+                      selection: {
+                        anchor: pos + action.insert.length
+                      }
+                    });
+                  }
+                  setTimeout(() => view2.focus());
+                });
+              }
+            };
+            return tooltipView;
+          }
+        };
+        return {
+          tooltip
+        };
+      }
+    }
+    return state;
   },
+  provide: (f) => [
+    showTooltip.from(f, (value) => value.tooltip ?? null)
+  ]
+});
+var openEffect = StateEffect2.define();
+var closeEffect = StateEffect2.define();
+var openCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({
+        effects: openEffect.of({
+          pos: selection.anchor,
+          fullWidth: true
+        })
+      });
+      return true;
+    }
+  }
+  return false;
+};
+var closeCommand = (view) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({
+      effects: closeEffect.of(null)
+    });
+    return true;
+  }
+  return false;
+};
+var commandKeymap = [
   {
-    color: "#8acb88",
-    light: "#8acb8833"
+    key: "/",
+    run: openCommand
   },
   {
-    color: "#1be7ff",
-    light: "#1be7ff33"
+    key: "Escape",
+    run: closeCommand
   }
 ];
-var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
+
+// packages/ui/react-ui-editor/src/extensions/util/dom.ts
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+var CommandHint = class extends WidgetType2 {
+  constructor(content) {
+    super();
+    this.content = content;
+  }
+  toDOM() {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-placeholder";
+    wrap.style.pointerEvents = "none";
+    wrap.appendChild(typeof this.content === "string" ? document.createTextNode(this.content) : this.content);
+    if (typeof this.content === "string") {
+      wrap.setAttribute("aria-label", "placeholder " + this.content);
+    } else {
+      wrap.setAttribute("aria-hidden", "true");
+    }
+    return wrap;
+  }
+  coordsAt(dom) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode);
+    const rect = flattenRect(rects[0], style.direction !== "rtl");
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight
+      };
+    }
+    return rect;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
+  constructor() {
+    this.deco = Decoration3.none;
+  }
+  update(update2) {
+    const builder = new RangeSetBuilder();
+    const cState = update2.view.state.field(commandState, false);
+    if (!cState?.tooltip) {
+      const selection = update2.view.state.selection.main;
+      const line = update2.view.state.doc.lineAt(selection.from);
+      if (selection.from === selection.to && line.from === line.to) {
+        const hint = onHint();
+        if (hint) {
+          builder.add(selection.from, selection.to, Decoration3.widget({
+            widget: new CommandHint(hint)
+          }));
+        }
+      }
+    }
+    this.deco = builder.finish();
+  }
+}, {
+  provide: (plugin) => [
+    EditorView6.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+  ]
+});
+
+// packages/ui/react-ui-editor/src/extensions/command/command.ts
+var command = (options) => {
+  return [
+    commandState,
+    keymap3.of(commandKeymap),
+    hintViewPlugin(options),
+    // Close tooltip on focus change.
+    EditorView7.focusChangeEffect.of((_, focusing) => {
+      return focusing ? closeEffect.of(null) : null;
+    }),
+    commandConfig.of(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 EditorView8 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce } from "@dxos/async";
+import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
@@ -1180,13 +1360,13 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var documentId = Facet3.define({
+var documentId = Facet4.define({
   combine: (values) => values[0]
 });
-var setComments = StateEffect2.define();
-var setSelection = StateEffect2.define();
-var setCommentState = StateEffect2.define();
-var commentsState = StateField3.define({
+var setComments = StateEffect3.define();
+var setSelection = StateEffect3.define();
+var setCommentState = StateEffect3.define();
+var commentsState = StateField4.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -1224,7 +1404,7 @@ var commentsState = StateField3.define({
     return value;
   }
 });
-var styles3 = EditorView6.baseTheme({
+var styles3 = EditorView8.baseTheme({
   "&light .cm-comment, &light .cm-comment-current": {
     mixBlendMode: "darken"
   },
@@ -1246,19 +1426,19 @@ var styles3 = EditorView6.baseTheme({
     backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
-var commentMark = Decoration3.mark({
+var commentMark = Decoration4.mark({
   class: "cm-comment",
   attributes: {
     "data-testid": "cm-comment"
   }
 });
-var commentCurrentMark = Decoration3.mark({
+var commentCurrentMark = Decoration4.mark({
   class: "cm-comment-current",
   attributes: {
     "data-testid": "cm-comment"
   }
 });
-var commentsDecorations = EditorView6.decorations.compute([
+var commentsDecorations = EditorView8.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1274,7 +1454,7 @@ var commentsDecorations = EditorView6.decorations.compute([
       return commentMark.range(range.from, range.to);
     }
   }).filter(nonNullable);
-  return Decoration3.set(decorations);
+  return Decoration4.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1296,7 +1476,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView6.domEventHandlers({
+    EditorView8.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1318,7 +1498,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView6.updateListener.of((update2) => {
+    EditorView8.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1374,7 +1554,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect2.define({
+var restoreCommentEffect = StateEffect3.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -1415,7 +1595,7 @@ var createComment = (view) => {
   }
   return false;
 };
-var optionsFacet = Facet3.define({
+var optionsFacet = Facet4.define({
   combine: (providers) => providers[0]
 });
 var comments = (options = {}) => {
@@ -1430,7 +1610,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate ? keymap3.of([
+    options.onCreate ? keymap4.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
@@ -1469,7 +1649,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView8.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1501,7 +1681,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView6.updateListener.of(({ view, state }) => {
+    EditorView8.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1550,7 +1730,7 @@ var focusComment = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView6.scrollIntoView(range.from, center ? {
+        EditorView8.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
@@ -1578,14 +1758,14 @@ var useComments = (view, id, comments2 = []) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
-import { Facet as Facet4, Transaction } from "@codemirror/state";
-import { EditorView as EditorView7 } from "@codemirror/view";
-var cursorLineMarginFacet = Facet4.define({
+import { Facet as Facet5, Transaction } from "@codemirror/state";
+import { EditorView as EditorView9 } from "@codemirror/view";
+var cursorLineMarginFacet = Facet5.define({
   combine: (input) => input[0] ?? 3
 });
 var annotation = "cursorLineMargin";
 var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
-var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+var cursorLineMargin = EditorView9.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
   if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
     return;
   }
@@ -1621,22 +1801,32 @@ var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, sel
   }
   view.dispatch({
     annotations: Transaction.userEvent.of(annotation),
-    effects: EditorView7.scrollIntoView(s.selection.main.head, {
+    effects: EditorView9.scrollIntoView(s.selection.main.head, {
       y: needsScrollTop ? "start" : "end",
       yMargin: view.defaultLineHeight * cursorLineMargin2
     })
   });
 });
 
+// packages/ui/react-ui-editor/src/extensions/dnd.ts
+import { EditorView as EditorView10 } from "@codemirror/view";
+var dnd = () => {
+  return EditorView10.domEventHandlers({
+    drop: (event, view) => {
+      console.log(event);
+    }
+  });
+};
+
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView8 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView11.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView11.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -1651,7 +1841,7 @@ import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView12, highlightActiveLine as highlightActiveLine2, keymap as keymap5, placeholder as placeholder2 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
@@ -1845,7 +2035,7 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
-    lineWrapping && EditorView9.lineWrapping,
+    lineWrapping && EditorView12.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
     // https://github.com/codemirror/basic-setup
@@ -1880,7 +2070,7 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
     themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
     // Custom styles.
     syntaxHighlighting2(markdownHighlightStyle()),
-    keymap4.of([
+    keymap5.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
       // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
@@ -1897,17 +2087,17 @@ 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 { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
+import { EditorView as EditorView13, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var HorizontalRuleWidget = class extends WidgetType2 {
+var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType2 {
+var LinkButton = class extends WidgetType3 {
   constructor(url, render) {
     super();
     this.url = url;
@@ -1922,7 +2112,7 @@ var LinkButton = class extends WidgetType2 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType2 {
+var CheckboxWidget = class extends WidgetType3 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -1959,28 +2149,28 @@ var CheckboxWidget = class extends WidgetType2 {
     return false;
   }
 };
-var hide = Decoration4.replace({});
-var fencedCodeLine = Decoration4.line({
+var hide = Decoration5.replace({});
+var fencedCodeLine = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line")
 });
-var fencedCodeLineFirst = Decoration4.line({
+var fencedCodeLineFirst = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeLineLast = Decoration4.line({
+var fencedCodeLineLast = Decoration5.line({
   class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
-var horizontalRule = Decoration4.replace({
+var horizontalRule = Decoration5.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration4.replace({
+var checkedTask = Decoration5.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration4.replace({
+var uncheckedTask = Decoration5.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 +2179,9 @@ var MarksByParent = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations = (view, options) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations = (view, options, focus) => {
+  const deco = new RangeSetBuilder2();
+  const atomicDeco = new RangeSetBuilder2();
   const { state } = view;
   for (const { from, to } of view.visibleRanges) {
     syntaxTree(state).iterate({
@@ -1998,7 +2189,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 +2199,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, Decoration5.mark({
               tagName: "a",
               attributes: {
                 class: "cm-link",
@@ -2033,57 +2224,86 @@ 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 ? Decoration5.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, Decoration5.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 = StateEffect4.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin3.fromClass(class {
+    ViewPlugin4.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) => [
+        EditorView13.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView13.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none),
+        EditorView13.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none)
+      ]
     }),
     formattingStyles
   ];
 };
-var formattingStyles = EditorView10.baseTheme({
+var formattingStyles = EditorView13.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -2136,7 +2356,7 @@ var formattingStyles = EditorView10.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView11, keymap as keymap5 } from "@codemirror/view";
+import { EditorView as EditorView14, keymap as keymap6 } from "@codemirror/view";
 import { useState, useMemo } from "react";
 var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
@@ -3008,7 +3228,7 @@ var toggleCodeblock = (target) => {
 };
 var formatting = (options = {}) => {
   return [
-    keymap5.of([
+    keymap6.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3206,7 +3426,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView14.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3222,12 +3442,12 @@ var useFormattingState = () => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
+import { StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView15, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField4.define({
+  return StateField5.define({
     create: (state) => {
-      return Decoration5.set(buildDecorations2(0, state.doc.length, state));
+      return Decoration6.set(buildDecorations2(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -3250,7 +3470,7 @@ var image = (options = {}) => {
         add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView15.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -3272,7 +3492,7 @@ var buildDecorations2 = (from, to, state) => {
           const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
           preloadImage(url);
-          decorations.push(Decoration5.replace({
+          decorations.push(Decoration6.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -3284,7 +3504,7 @@ var buildDecorations2 = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -3337,17 +3557,17 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { Decoration as Decoration7, EditorView as EditorView16, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField5.define({
+  return StateField6.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView13.decorations.from(field)
+    provide: (field) => EditorView16.decorations.from(field)
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder3();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -3387,16 +3607,16 @@ var update = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide2 = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide2 && builder.add(table2.from, table2.to, Decoration6.replace({
+    hide2 && builder.add(table2.from, table2.to, Decoration7.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration6.mark({
+    builder.add(table2.from, table2.to, Decoration7.mark({
       class: "cm-table"
     }));
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType4 {
+var TableWidget = class extends WidgetType5 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -3463,10 +3683,10 @@ var mention = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet5 } from "@codemirror/state";
-import { keymap as keymap6 } from "@codemirror/view";
+import { Facet as Facet6 } from "@codemirror/state";
+import { keymap as keymap7 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
-var editorMode = Facet5.define({
+var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
@@ -3477,7 +3697,7 @@ var EditorModes = {
       type: "vim",
       noTabster: true
     }),
-    keymap6.of([
+    keymap7.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -3497,7 +3717,7 @@ var outliner = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap7 } from "@codemirror/view";
+import { keymap as keymap8 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -3507,7 +3727,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap7.of([
+    keymap8.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -3805,7 +4025,7 @@ var codeTheme = {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView14.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView17.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -3832,7 +4052,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView14.exceptionSink.of((err) => {
+        EditorView17.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
             L: 122,
@@ -3842,19 +4062,19 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         }),
         // Theme.
         // TODO(burdon): Make base theme configurable.
-        EditorView14.baseTheme(defaultTheme),
-        theme && EditorView14.theme(theme),
-        EditorView14.darkTheme.of(themeMode === "dark"),
-        slots.editor?.className && EditorView14.editorAttributes.of({
+        EditorView17.baseTheme(defaultTheme),
+        theme && EditorView17.theme(theme),
+        EditorView17.darkTheme.of(themeMode === "dark"),
+        slots.editor?.className && EditorView17.editorAttributes.of({
           class: slots.editor.className
         }),
-        slots.content?.className && EditorView14.contentAttributes.of({
+        slots.content?.className && EditorView17.contentAttributes.of({
           class: slots.content.className
         }),
         // NOTE: Assumes default line height.
         _scrollPastEnd && scrollPastEnd(),
         // Focus.
-        EditorView14.updateListener.of((update2) => {
+        EditorView17.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
             if (transaction.isUserEvent("focus.container")) {
               rootRef.current?.focus();
@@ -3862,7 +4082,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
           });
         }),
         // State.
-        EditorView14.editable.of(!readonly),
+        EditorView17.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -3871,7 +4091,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const view2 = new EditorView14({
+    const view2 = new EditorView17({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -4363,8 +4583,8 @@ var SpaceAwarenessProvider = class {
 };
 
 // packages/ui/react-ui-editor/src/hooks/defs.ts
-import { StateField as StateField6 } from "@codemirror/state";
-var modelState = StateField6.define({
+import { StateField as StateField7 } from "@codemirror/state";
+var modelState = StateField7.define({
   create: () => void 0,
   update: (model) => model
 });
@@ -4439,7 +4659,7 @@ var useEditorView = (id) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
@@ -4456,7 +4676,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView15.exceptionSink.of((err) => {
+          EditorView18.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
               L: 57,
@@ -4465,12 +4685,12 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
             });
           }),
           extensions,
-          EditorView15.updateListener.of(() => {
+          EditorView18.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy5)
       });
-      view2 = new EditorView15({
+      view2 = new EditorView18({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4525,19 +4745,19 @@ var createDataExtensions = ({ readonly = false } = {}) => {
   return [
     //
     EditorState3.readOnly.of(readonly),
-    EditorView15.editable.of(!readonly)
+    EditorView18.editable.of(!readonly)
   ];
 };
 var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
   return [
     //
-    EditorView15.baseTheme(defaultTheme),
-    theme && EditorView15.theme(theme),
-    EditorView15.darkTheme.of(themeMode === "dark"),
-    EditorView15.editorAttributes.of({
+    EditorView18.baseTheme(defaultTheme),
+    theme && EditorView18.theme(theme),
+    EditorView18.darkTheme.of(themeMode === "dark"),
+    EditorView18.editorAttributes.of({
       class: slots?.editor?.className ?? ""
     }),
-    EditorView15.contentAttributes.of({
+    EditorView18.contentAttributes.of({
       class: slots?.content?.className ?? ""
     })
   ].filter(isNotFalsy5);
@@ -4550,11 +4770,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 +4786,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 +4810,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 +4821,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"
   });
@@ -4657,6 +4883,7 @@ export {
   blast,
   callbackWrapper,
   codeTheme,
+  command,
   comments,
   compareFormatting,
   createBasicBundle,
@@ -4672,6 +4899,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  dnd,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
   editorMode,
@@ -4682,7 +4910,7 @@ export {
   getToken,
   image,
   insertTable,
-  keymap8 as keymap,
+  keymap9 as keymap,
   linkTooltip,
   listener,
   logChanges,