@dxos/react-ui-editor 0.3.11-main.c01834e → 0.3.11-main.d7d4c52

package/dist/lib/browser/index.mjs

@@ -11,40 +11,41 @@ import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
       // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      activateOnTyping: false
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
@@ -273,30 +274,39 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/util/cursor.ts
+// packages/ui/react-ui-editor/src/extensions/cursor.ts
 import { Facet } from "@codemirror/state";
-var DEFAULT_CURSOR_CONVERTER = {
+var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
   fromCursor: (cursor) => parseInt(cursor)
 };
-var CursorConverter = Facet.define({
-  combine: (providers) => providers[0] ?? DEFAULT_CURSOR_CONVERTER
-});
-
-// packages/ui/react-ui-editor/src/util/util.ts
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/util.ts";
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (error) {
-    log.catch(error, void 0, {
-      F: __dxlog_file,
-      L: 16,
-      S: void 0,
-      C: (f, a) => f(...a)
+var Cursor = class {
+  static {
+    this.converter = Facet.define({
+      combine: (providers) => providers[0] ?? defaultCursorConverter
     });
   }
+  static {
+    this.getCursorFromRange = (cursorConverter3, range) => {
+      const from = cursorConverter3.toCursor(range.from);
+      const to = cursorConverter3.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
+  }
+  static {
+    this.getRangeFromCursor = (cursorConverter3, cursor) => {
+      const parts = cursor.split(":");
+      const from = cursorConverter3.fromCursor(parts[0]);
+      const to = cursorConverter3.fromCursor(parts[1]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
@@ -355,7 +365,7 @@ var automerge3 = ({ handle, path }) => {
   });
   return {
     extension: [
-      CursorConverter.of(cursorConverter(handle, path)),
+      Cursor.converter.of(cursorConverter(handle, path)),
       semaphoreFacet.of(semaphore),
       stateField,
       viewPlugin
@@ -397,7 +407,7 @@ var RemoteSelectionsDecorator = class {
     this._ctx = new Context();
     this._lastAnchor = void 0;
     this._lastHead = void 0;
-    this._cursorConverter = view.state.facet(CursorConverter);
+    this._cursorConverter = view.state.facet(Cursor.converter);
     this._provider = view.state.facet(AwarenessProvider);
     this._provider.open();
     this._provider.remoteStateChange.on(this._ctx, () => {
@@ -452,7 +462,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${lightColor}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
       } else {
@@ -463,7 +473,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${color}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
         decorations.push({
@@ -473,7 +483,7 @@ var RemoteSelectionsDecorator = class {
             attributes: {
               style: `background-color: ${color}`
             },
-            class: "cm-ySelection"
+            class: "cm-collab-selection"
           })
         });
         for (let i = startLine.number + 1; i < endLine.number; i++) {
@@ -484,7 +494,7 @@ var RemoteSelectionsDecorator = class {
             value: Decoration.line({
               attributes: {
                 style: `background-color: ${color}`,
-                class: "cm-yLineSelection"
+                class: "cm-collab-selectionLine"
               }
             })
           });
@@ -504,23 +514,21 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
-  constructor(name, color) {
+  constructor(_name, _color) {
     super();
-    this.name = name;
-    this.color = color;
-    this.name = name;
-    this.color = color;
+    this._name = _name;
+    this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-ySelectionCaret";
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.className = "cm-collab-selectionCaret";
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
     const dot = document.createElement("div");
-    dot.className = "cm-ySelectionCaretDot";
+    dot.className = "cm-collab-selectionCaretDot";
     const info = document.createElement("div");
-    info.className = "cm-ySelectionInfo";
-    info.innerText = this.name;
+    info.className = "cm-collab-selectionInfo";
+    info.innerText = this._name;
     span.appendChild(document.createTextNode("\u2060"));
     span.appendChild(dot);
     span.appendChild(document.createTextNode("\u2060"));
@@ -528,15 +536,12 @@ var RemoteCaretWidget = class extends WidgetType {
     span.appendChild(document.createTextNode("\u2060"));
     return span;
   }
-  eq(widget) {
-    return widget.color === this.color;
-  }
-  compare(widget) {
-    return widget.color === this.color;
-  }
   updateDOM() {
     return false;
   }
+  eq(widget) {
+    return widget._color === this._color;
+  }
   get estimatedHeight() {
     return -1;
   }
@@ -545,12 +550,12 @@ var RemoteCaretWidget = class extends WidgetType {
   }
 };
 var styles = EditorView.baseTheme({
-  ".cm-ySelection": {},
-  ".cm-yLineSelection": {
+  ".cm-collab-selection": {},
+  ".cm-collab-selectionLine": {
     padding: 0,
     margin: "0px 2px 0px 4px"
   },
-  ".cm-ySelectionCaret": {
+  ".cm-collab-selectionCaret": {
     position: "relative",
     borderLeft: "1px solid black",
     borderRight: "1px solid black",
@@ -559,7 +564,7 @@ var styles = EditorView.baseTheme({
     boxSizing: "border-box",
     display: "inline"
   },
-  ".cm-ySelectionCaretDot": {
+  ".cm-collab-selectionCaretDot": {
     borderRadius: "50%",
     position: "absolute",
     width: ".4em",
@@ -570,11 +575,11 @@ var styles = EditorView.baseTheme({
     transition: "transform .3s ease-in-out",
     boxSizing: "border-box"
   },
-  ".cm-ySelectionCaret:hover > .cm-ySelectionCaretDot": {
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
     transformOrigin: "bottom center",
     transform: "scale(0)"
   },
-  ".cm-ySelectionInfo": {
+  ".cm-collab-selectionInfo": {
     position: "absolute",
     top: "-1.05em",
     left: "-1px",
@@ -595,7 +600,7 @@ var styles = EditorView.baseTheme({
     transitionDelay: "0s",
     whiteSpace: "nowrap"
   },
-  ".cm-ySelectionCaret:hover > .cm-ySelectionInfo": {
+  ".cm-collab-selectionCaret:hover > .cm-collab-selectionInfo": {
     opacity: 1,
     transitionDelay: "0s"
   }
@@ -622,7 +627,7 @@ var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
 import { EditorView as EditorView3, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -749,7 +754,7 @@ var Blaster = class {
   }
   initialize() {
     invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 138,
       S: this,
       A: [
@@ -786,7 +791,7 @@ var Blaster = class {
   }
   start() {
     invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 177,
       S: this,
       A: [
@@ -1056,7 +1061,7 @@ var getLineRange = (lines, from, to) => {
 var code2 = () => {
   const getDecorations = (view) => {
     const decorations = [];
-    if (view.state.readOnly) {
+    if (!view.hasFocus || view.state.readOnly) {
       const text = view.state.doc.sliceString(0);
       const matches = text.matchAll(CODE_REGEX);
       const blocks = view.viewportLineBlocks;
@@ -1075,10 +1080,15 @@ var code2 = () => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
+        this.hasFocus = false;
         this.decorations = getDecorations(view);
       }
       update(update2) {
-        if (update2.docChanged || update2.viewportChanged) {
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
           this.decorations = getDecorations(update2.view);
         }
       }
@@ -1091,23 +1101,32 @@ var code2 = () => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log2 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/util.ts
+import { log } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (error) {
+    log.catch(error, void 0, {
+      F: __dxlog_file2,
+      L: 16,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/comments.ts
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var styles3 = EditorView5.baseTheme({
-  "& .cm-bookmark": {
-    cursor: "pointer",
-    margin: "4px",
-    padding: "4px",
-    backgroundColor: "yellow"
-  },
-  "& .cm-bookmark-selected": {
-    backgroundColor: "orange"
-  },
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
@@ -1146,7 +1165,7 @@ var commentsStateField = StateField2.define({
     ranges: []
   }),
   update: (value, tr) => {
-    const cursorConverter3 = tr.state.facet(CursorConverter);
+    const cursorConverter3 = tr.state.facet(Cursor.converter);
     for (const effect of tr.effects) {
       if (effect.is(setSelection)) {
         return {
@@ -1157,7 +1176,7 @@ var commentsStateField = StateField2.define({
       if (effect.is(setCommentRange)) {
         const { comments: comments2 } = effect.value;
         const ranges = comments2.map((comment) => {
-          const range = getRangeFromCursor(cursorConverter3, comment.cursor);
+          const range = Cursor.getRangeFromCursor(cursorConverter3, comment.cursor);
           return range && {
             ...comment,
             ...range
@@ -1195,42 +1214,14 @@ var highlightDecorations = EditorView5.decorations.compute([
   }).filter(nonNullable) ?? [];
   return Decoration3.set(decorations);
 });
-var BookmarkWidget = class extends WidgetType2 {
-  constructor(_anchor, _id, _handleClick) {
-    super();
-    this._anchor = _anchor;
-    this._id = _id;
-    this._handleClick = _handleClick;
-    invariant2(this._id, void 0, {
-      F: __dxlog_file3,
-      L: 168,
-      S: this,
-      A: [
-        "this._id",
-        ""
-      ]
-    });
-  }
-  eq(other) {
-    return this._anchor === other._anchor && this._id === other._id;
-  }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "cm-bookmark";
-    span.textContent = "\u203B";
-    if (this._handleClick) {
-      span.onclick = () => this._handleClick();
-    }
-    return span;
-  }
-};
 var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
-    const cursorConverter3 = view.state.facet(CursorConverter);
+    const cursorConverter3 = view.state.facet(Cursor.converter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 224,
+      L: 177,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1241,12 +1232,12 @@ var comments = (options = {}) => {
     if (from === to) {
       return false;
     }
-    const relPos = getCursorFromRange(cursorConverter3, {
+    const cursor = Cursor.getCursorFromRange(cursorConverter3, {
       from,
       to
     });
-    if (relPos) {
-      const id = callbackWrapper(options.onCreate)(relPos);
+    if (cursor) {
+      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
       if (id) {
         view.dispatch({
           effects: setSelection.of({
@@ -1273,35 +1264,7 @@ var comments = (options = {}) => {
     }
     return false;
   };
-  const bookmarksViewPlugin = ViewPlugin4.fromClass(class BookmarkViewPlugin {
-    static {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      this.bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration3.replace({
-            id,
-            widget: new BookmarkWidget(pos, id)
-          });
-        }
-      });
-    }
-    constructor(view) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-    }
-    update(update2) {
-      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update2, this.bookmarks);
-    }
-  }, {
-    decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.bookmarks || Decoration3.none;
-    })
-  });
   return [
-    bookmarksViewPlugin,
     commentsStateField,
     highlightDecorations,
     styles3,
@@ -1310,7 +1273,7 @@ var comments = (options = {}) => {
     //
     options.onCreate ? keymap3.of([
       {
-        key: options?.key ?? "meta-'",
+        key: shortcut,
         run: callbackWrapper(createCommentThread)
       }
     ]) : [],
@@ -1327,7 +1290,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el);
+            options.onHover?.(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1348,27 +1311,27 @@ var comments = (options = {}) => {
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
     EditorView5.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter3 = view.state.facet(CursorConverter);
+      const cursorConverter3 = view.state.facet(Cursor.converter);
       {
         let mod = false;
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
                 log2.info("deleted comment", {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 358,
+                  L: 274,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
               }
             }
             if (from <= range.to) {
-              const newRange = getRangeFromCursor(cursorConverter3, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter3, range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -1417,26 +1380,9 @@ var comments = (options = {}) => {
     })
   ];
 };
-var getCursorFromRange = (cursorConverter3, range) => {
-  const from = cursorConverter3.toCursor(range.from);
-  const to = cursorConverter3.toCursor(range.to, -1);
-  return [
-    from,
-    to
-  ].join(":");
-};
-var getRangeFromCursor = (cursorConverter3, cursor) => {
-  const parts = cursor.split(":");
-  const from = cursorConverter3.fromCursor(parts[0]);
-  const to = cursorConverter3.fromCursor(parts[1]);
-  return from !== void 0 && to !== void 0 ? {
-    from,
-    to
-  } : void 0;
-};
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
-import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
 var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
@@ -1444,7 +1390,7 @@ var styles4 = EditorView6.baseTheme({
     borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
-var HorizontalRuleWidget = class extends WidgetType3 {
+var HorizontalRuleWidget = class extends WidgetType2 {
   constructor(_pos) {
     super();
     this._pos = _pos;
@@ -1458,7 +1404,7 @@ var HorizontalRuleWidget = class extends WidgetType3 {
     return el;
   }
 };
-var placeholderMatcher = new MatchDecorator2({
+var placeholderMatcher = new MatchDecorator({
   regexp: /^---$/g,
   decoration: (match, view, pos) => Decoration4.replace({
     widget: new HorizontalRuleWidget(pos)
@@ -1466,7 +1412,7 @@ var placeholderMatcher = new MatchDecorator2({
 });
 var hr = () => [
   styles4,
-  ViewPlugin5.fromClass(class {
+  ViewPlugin4.fromClass(class {
     constructor(view) {
       this.rules = placeholderMatcher.createDeco(view);
     }
@@ -1485,7 +1431,7 @@ var hr = () => [
 // packages/ui/react-ui-editor/src/extensions/image.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
     create: (state) => {
@@ -1537,7 +1483,7 @@ var buildDecorations = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType4 {
+var ImageWidget = class extends WidgetType3 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -1557,11 +1503,11 @@ var ImageWidget = class extends WidgetType4 {
 // packages/ui/react-ui-editor/src/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration6, WidgetType as WidgetType5, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { Decoration as Decoration6, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin5.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations2(view, options);
       }
@@ -1612,7 +1558,7 @@ var link = (options = {}) => {
   }
   return extensions;
 };
-var LinkButton = class extends WidgetType5 {
+var LinkButton = class extends WidgetType4 {
   constructor(_url, _onAttach) {
     super();
     this._url = _url;
@@ -1627,7 +1573,7 @@ var LinkButton = class extends WidgetType5 {
     return el;
   }
 };
-var LinkText = class extends WidgetType5 {
+var LinkText = class extends WidgetType4 {
   constructor(_text, _url) {
     super();
     this._text = _text;
@@ -1708,7 +1654,7 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
@@ -1717,7 +1663,7 @@ import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/the
 import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
@@ -1727,7 +1673,6 @@ var markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -1891,12 +1836,6 @@ var markdownHighlightStyle = (readonly) => {
       ],
       class: blockquote
     },
-    // TODO(burdon): Replace with extension.
-    // {
-    //   tag: [markdownTags.HorizontalRule],
-    //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-    // },
-    // TODO(burdon): Only if being edited.
     {
       tag: [
         markdownTags.TableCell
@@ -1904,7 +1843,7 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
       fontFamily: getToken("fontFamily.body", []).join(",")
     }
@@ -1936,7 +1875,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -1990,7 +1929,7 @@ var mention = ({ onSearch }) => {
 // packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
@@ -2048,7 +1987,7 @@ var update = (state, options) => {
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType6 {
+var TableWidget = class extends WidgetType5 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -2086,14 +2025,14 @@ var TableWidget = class extends WidgetType6 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType7, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { EditorView as EditorView11, Decoration as Decoration8, WidgetType as WidgetType6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 var styles5 = EditorView11.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
   }
 });
-var CheckboxWidget = class extends WidgetType7 {
+var CheckboxWidget = class extends WidgetType6 {
   constructor(_checked, _indent, _onCheck) {
     super();
     this._checked = _checked;
@@ -2127,7 +2066,7 @@ var CheckboxWidget = class extends WidgetType7 {
   }
 };
 var tasklist = (options = {}) => {
-  const taskMatcher = new MatchDecorator3({
+  const taskMatcher = new MatchDecorator2({
     regexp: /^(\s*)- \[([ xX])\]\s/g,
     decoration: (match, view, pos) => {
       const indent = Math.floor(match[1].length / 2);
@@ -2150,7 +2089,7 @@ var tasklist = (options = {}) => {
       });
     }
   });
-  const tasks = ViewPlugin7.fromClass(class {
+  const tasks = ViewPlugin6.fromClass(class {
     constructor(view) {
       this.tasks = taskMatcher.createDeco(view);
     }
@@ -2243,7 +2182,7 @@ var cursorConverter2 = (text) => ({
 
 // packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
 var yjs = (content, awareness2) => [
-  CursorConverter.of(cursorConverter2(content)),
+  Cursor.converter.of(cursorConverter2(content)),
   yCollab(content, awareness2)
 ];
 
@@ -2340,33 +2279,6 @@ var defaultTheme = {
     backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
-  // collaboration
-  // TODO(burdon): Review classnames (YJS dependent?) Note: e2e tests depend on this class.
-  //
-  "&light .cm-ySelection, &light .cm-yLineSelection": {
-    mixBlendMode: "multiply"
-  },
-  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
-    mixBlendMode: "screen"
-  },
-  ".cm-ySelectionInfo": {
-    padding: "2px 4px",
-    marginBlockStart: "-4px"
-  },
-  ".cm-ySelection, & .cm-selectionMatch": {
-    paddingBlockStart: ".15em",
-    paddingBlockEnd: ".15em"
-  },
-  ".cm-ySelectionCaret": {
-    display: "inline-block",
-    insetBlockStart: ".1em",
-    blockSize: "1.4em",
-    verticalAlign: "top"
-  },
-  ".cm-yLineSelection": {
-    margin: 0
-  },
-  //
   // link
   //
   ".cm-link": {
@@ -2440,27 +2352,17 @@ var defaultTheme = {
   },
   //
   // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get3(tokens, [
-      "extend",
-      "fontSize",
-      fontSize,
-      1,
-      "lineHeight"
-    ]);
-    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
-      height
-    };
-    return acc;
-  }, {}),
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
   /**
   * Panels
   * TODO(burdon): Needs styling attention (esp. dark mode).
@@ -2511,7 +2413,9 @@ var textTheme = {
   }
 };
 var markdownTheme = {
-  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  ".cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
   ".cm-placeholder": {
     fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
@@ -2530,21 +2434,23 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, theme, slots = defaultSlots }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const [root, setRoot] = useState(null);
-  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
+  const { themeMode } = useThemeContext();
+  const rootRef = useRef(null);
+  const [view, setView] = useState(null);
+  useImperativeHandle(forwardedRef, () => view, [
     view
-  }), [
+  ]);
+  useEffect(() => {
+    if (view && focus) {
+      view.focus();
+    }
+  }, [
     view,
-    state,
-    root
+    focus
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2568,7 +2474,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     themeMode
   ]);
   useEffect(() => {
-    if (view && comments2?.length) {
+    if (view && comments2 !== void 0) {
       view.dispatch({
         effects: setCommentRange.of({
           model,
@@ -2581,11 +2487,13 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     comments2
   ]);
   useEffect(() => {
-    if (!root) {
+    if (!model || !rootRef.current) {
       return;
     }
-    const state2 = EditorState2.create({
+    const state = EditorState2.create({
       doc: model.text(),
+      // TODO(burdon): Composer should store and set selection when switching documents.
+      selection,
       extensions: [
         readonly && EditorState2.readOnly.of(readonly),
         // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
@@ -2593,7 +2501,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
         // Theme.
         // TODO(burdon): Make theme configurable.
         EditorView12.baseTheme(defaultTheme),
-        EditorView12.theme(slots?.editor?.theme ?? {}),
+        EditorView12.theme(theme ?? {}),
         EditorView12.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
         model.extension,
@@ -2602,19 +2510,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
       ].filter(Boolean)
     });
     view?.destroy();
-    setEditor({
-      state: state2,
-      view: new EditorView12({
-        state: state2,
-        parent: root
-      })
+    const newView = new EditorView12({
+      parent: rootRef.current,
+      state
     });
+    setView(newView);
     return () => {
-      view?.destroy();
-      setEditor(void 0);
+      newView?.destroy();
+      setView(null);
     };
   }, [
-    root,
+    rootRef,
     model,
     readonly,
     editorMode,
@@ -2623,12 +2529,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   const handleKeyUp = useCallback((event) => {
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
-      case "Enter": {
-        view?.contentDOM.focus();
-        break;
-      }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
         break;
       }
     }
@@ -2638,16 +2540,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
-    ref: setRoot,
+    role: "none",
+    ref: rootRef,
     tabIndex: 0,
-    ...slots?.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
+    onKeyUp: handleKeyUp,
+    ...slots.root,
+    ...editorMode !== "vim" && tabsterDOMAttribute
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2655,17 +2558,18 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots:
       basicBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: placeholder3
       }),
       ...extensions
     ],
-    slots,
+    theme,
+    slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2673,30 +2577,25 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
       markdownBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: placeholder3
       }),
       ...extensions
     ],
-    slots,
+    theme,
+    slots: updatedSlots,
     ...props
   });
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2", inputSurface)
+    className: mx3("p-2 overflow-y-auto", inputSurface)
   }
 };
 var defaultTextSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: textTheme
-  }
+  ...defaultSlots
 };
 var defaultMarkdownSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: markdownTheme
-  }
+  ...defaultSlots
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge.ts
@@ -2819,15 +2718,13 @@ import * as decoding from "lib0/decoding";
 import * as encoding from "lib0/encoding";
 import { Observable } from "lib0/observable";
 import * as YP from "y-protocols/awareness";
-import * as Y2 from "yjs";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { log as log4 } from "@dxos/log";
-import { arrayToString as arrayToString2, stringToArray as stringToArray2 } from "@dxos/util";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
 var createYjsModel = ({ identity, space, text }) => {
   invariant4(text?.doc && text?.content, void 0, {
     F: __dxlog_file5,
-    L: 23,
+    L: 21,
     S: void 0,
     A: [
       "text?.doc && text?.content",
@@ -2843,34 +2740,6 @@ var createYjsModel = ({ identity, space, text }) => {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content.toString(),
-    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
-    // TODO(dmaretskyi): Refactor as cursor-converter.
-    getCursorFromRange: (range) => {
-      const from = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.from));
-      const to = Y2.encodeRelativePosition(Y2.createRelativePositionFromTypeIndex(text.content, range.to, -1));
-      return [
-        arrayToString2(from),
-        arrayToString2(to)
-      ].join(":");
-    },
-    getRangeFromCursor: (cursor) => {
-      invariant4(text.doc, void 0, {
-        F: __dxlog_file5,
-        L: 40,
-        S: void 0,
-        A: [
-          "text.doc",
-          ""
-        ]
-      });
-      const parts = cursor.split(":");
-      const from = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[0])), text.doc);
-      const to = Y2.createAbsolutePositionFromRelativePosition(Y2.decodeRelativePosition(stringToArray2(parts[1])), text.doc);
-      return from && to ? {
-        from: from.index,
-        to: to.index
-      } : void 0;
-    },
     extension: [
       modelState.init(() => model),
       yjs(text.content, provider?.awareness)
@@ -2920,7 +2789,7 @@ var YAwarenessProvider = class extends Observable {
       origin
     }, {
       F: __dxlog_file5,
-      L: 122,
+      L: 100,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2933,7 +2802,7 @@ var YAwarenessProvider = class extends Observable {
   _handleSpaceMessage({ payload }) {
     log4("space message", payload, {
       F: __dxlog_file5,
-      L: 131,
+      L: 109,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -2983,7 +2852,7 @@ var modelState = StateField5.define({
 });
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2(() => createModel(props));
+  const [model, setModel] = useState2();
   useEffect2(() => setModel(createModel(props)), [
     identity,
     space,
@@ -3042,6 +2911,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
 export {
   AwarenessProvider,
   BaseTextEditor,
+  Cursor,
   Doc,
   EditorModes,
   MarkdownEditor,
@@ -3057,11 +2927,13 @@ export {
   awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
   createAutomergeModel,
   createYjsModel,
+  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,