@dxos/react-ui-editor 0.6.6-main.e1a6e1f → 0.6.6-staging.41c080b

package/dist/lib/browser/index.mjs

@@ -35,14 +35,13 @@ import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView16 } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState3 } from "react";
-import { log as log7 } from "@dxos/log";
-import { useDefaultValue } from "@dxos/react-ui";
-import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
+import { createContext } from "@radix-ui/react-context";
+import React, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -188,17 +187,16 @@ import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
 import { log } from "@dxos/log";
-import { toCursor, fromCursor } from "@dxos/react-client/echo";
+import { fromCursor, toCursor } from "@dxos/react-client/echo";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (accessor) => ({
-  // TODO(burdon): Handle assoc to associate with a previous character.
-  toCursor: (pos) => {
+  toCursor: (pos, assoc) => {
     try {
-      return toCursor(accessor, pos);
+      return toCursor(accessor, pos, assoc);
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 16,
+        L: 15,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -211,7 +209,7 @@ var cursorConverter = (accessor) => ({
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 25,
+        L: 24,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -452,6 +450,7 @@ var automerge = (accessor) => {
   const syncer = new Syncer(accessor.handle, syncState);
   return [
     Cursor.converter.of(cursorConverter(accessor)),
+    // Track heads.
     syncState,
     // Reconcile external updates.
     ViewPlugin.fromClass(class {
@@ -506,13 +505,11 @@ var awareness = (provider = dummyProvider) => {
 };
 var RemoteSelectionsDecorator = class {
   constructor(view) {
-    this.decorations = RangeSet.of([]);
     this._ctx = new Context(void 0, {
       F: __dxlog_file2,
-      L: 85
+      L: 82
     });
-    this._lastAnchor = void 0;
-    this._lastHead = void 0;
+    this.decorations = RangeSet.of([]);
     this._cursorConverter = view.state.facet(Cursor.converter);
     this._provider = view.state.facet(awarenessProvider);
     this._provider.open();
@@ -529,12 +526,12 @@ var RemoteSelectionsDecorator = class {
     this._provider.close();
   }
   update(update2) {
-    this._updateLocalSelection(update2);
-    this._updateRemoteSelections(update2);
+    this._updateLocalSelection(update2.view);
+    this._updateRemoteSelections(update2.view);
   }
-  _updateLocalSelection(update2) {
-    const hasFocus = update2.view.hasFocus && update2.view.dom.ownerDocument.hasFocus();
-    const { anchor = void 0, head = void 0 } = hasFocus ? update2.state.selection.main : {};
+  _updateLocalSelection(view) {
+    const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
+    const { anchor = void 0, head = void 0 } = hasFocus ? view.state.selection.main : {};
     if (this._lastAnchor === anchor && this._lastHead === head) {
       return;
     }
@@ -542,10 +539,10 @@ var RemoteSelectionsDecorator = class {
     this._lastHead = head;
     this._provider.update(anchor !== void 0 && head !== void 0 ? {
       anchor: this._cursorConverter.toCursor(anchor),
-      head: this._cursorConverter.toCursor(head)
+      head: this._cursorConverter.toCursor(head, -1)
     } : void 0);
   }
-  _updateRemoteSelections(update2) {
+  _updateRemoteSelections(view) {
     const decorations = [];
     const awarenessStates = this._provider.getRemoteStates();
     for (const state2 of awarenessStates) {
@@ -554,12 +551,12 @@ var RemoteSelectionsDecorator = class {
       if (anchor == null || head == null) {
         continue;
       }
-      const start = Math.min(Math.min(anchor, head), update2.view.state.doc.length);
-      const end = Math.min(Math.max(anchor, head), update2.view.state.doc.length);
-      const startLine = update2.view.state.doc.lineAt(start);
-      const endLine = update2.view.state.doc.lineAt(end);
-      const color = state2.info.color ?? "#30bced";
-      const lightColor = state2.info.lightColor ?? color + "33";
+      const start = Math.min(Math.min(anchor, head), view.state.doc.length);
+      const end = Math.min(Math.max(anchor, head), view.state.doc.length);
+      const startLine = view.state.doc.lineAt(start);
+      const endLine = view.state.doc.lineAt(end);
+      const darkColor = state2.info.darkColor;
+      const lightColor = state2.info.lightColor;
       if (startLine.number === endLine.number) {
         decorations.push({
           from: start,
@@ -593,7 +590,7 @@ var RemoteSelectionsDecorator = class {
           })
         });
         for (let i = startLine.number + 1; i < endLine.number; i++) {
-          const linePos = update2.view.state.doc.line(i).from;
+          const linePos = view.state.doc.line(i).from;
           decorations.push({
             from: linePos,
             to: linePos,
@@ -612,7 +609,7 @@ var RemoteSelectionsDecorator = class {
         value: Decoration2.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
-          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", color)
+          widget: new RemoteCaretWidget(state2.info.displayName ?? "Anonymous", darkColor)
         })
       });
     }
@@ -698,12 +695,11 @@ var styles2 = EditorView3.baseTheme({
     lineHeight: "normal",
     userSelect: "none",
     color: "white",
-    padding: "2px",
+    padding: "2px 6px",
     zIndex: 101,
     transition: "opacity .3s ease-in-out",
     backgroundColor: "inherit",
     borderRadius: "2px",
-    // These should be separate.
     opacity: 0,
     transitionDelay: "0s",
     whiteSpace: "nowrap"
@@ -763,7 +759,7 @@ var SpaceAwarenessProvider = class {
         err
       }, {
         F: __dxlog_file3,
-        L: 89,
+        L: 91,
         S: this,
         C: (f, a) => f(...a)
       });
@@ -780,7 +776,7 @@ var SpaceAwarenessProvider = class {
   update(position) {
     invariant(this._postTask, void 0, {
       F: __dxlog_file3,
-      L: 104,
+      L: 106,
       S: this,
       A: [
         "this._postTask",
@@ -797,7 +793,7 @@ var SpaceAwarenessProvider = class {
   _handleQueryMessage() {
     invariant(this._postTask, void 0, {
       F: __dxlog_file3,
-      L: 115,
+      L: 117,
       S: this,
       A: [
         "this._postTask",
@@ -809,7 +805,7 @@ var SpaceAwarenessProvider = class {
   _handlePostMessage(message) {
     invariant(message.kind === "post", void 0, {
       F: __dxlog_file3,
-      L: 120,
+      L: 122,
       S: this,
       A: [
         "message.kind === 'post'",
@@ -1545,7 +1541,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 182,
+        L: 181,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1883,16 +1879,12 @@ var hasActiveSelection = (state2) => {
   return state2.selection.ranges.some((range) => !range.empty);
 };
 var ExternalCommentSync = class {
-  constructor(view, id, subscribe, getThreads) {
+  constructor(view, id, subscribe, getComments) {
     this.destroy = () => {
       this.unsubscribe();
     };
     const updateComments = () => {
-      const threads = getThreads();
-      const comments2 = threads.filter(nonNullable).filter((thread) => thread.anchor).map((thread) => ({
-        id: thread.id,
-        cursor: thread.anchor
-      }));
+      const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
         queueMicrotask(() => view.dispatch({
           effects: setComments.of({
@@ -1905,9 +1897,9 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getThreads) => ViewPlugin4.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin4.fromClass(class {
   constructor(view) {
-    return new ExternalCommentSync(view, id, subscribe, getThreads);
+    return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
 var useCommentState = () => {
@@ -1943,7 +1935,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 var useCommentClickListener = (onCommentClick) => {
-  const observer = useMemo(() => EditorView7.updateListener.of((update2) => {
+  return useMemo(() => EditorView7.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       transaction.effects.forEach((effect) => {
         if (effect.is(commentClickedEffect)) {
@@ -1954,15 +1946,14 @@ var useCommentClickListener = (onCommentClick) => {
   }), [
     onCommentClick
   ]);
-  return observer;
 };
 
 // packages/ui/react-ui-editor/src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
-var debugNodeLogger = (log9 = console.log) => {
+var debugNodeLogger = (log8 = console.log) => {
   const logTokens = (state2) => syntaxTree(state2).iterate({
-    enter: (node) => log9(node.type)
+    enter: (node) => log8(node.type)
   });
   return StateField5.define({
     create: (state2) => logTokens(state2),
@@ -2159,19 +2150,34 @@ var defaultTheme = {
   // tooltip
   //
   ".cm-tooltip": {
-    border: "none",
-    background: "unset"
+    border: "none"
+  },
+  "&light .cm-tooltip": {
+    background: `${get2(tokens, "extend.colors.neutral.100")} !important`
+  },
+  "&dark .cm-tooltip": {
+    background: `${get2(tokens, "extend.colors.neutral.900")} !important`
   },
   ".cm-tooltip-below": {},
   //
   // autocomplete
+  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
   //
   ".cm-tooltip-autocomplete": {
     marginTop: "4px",
     marginLeft: "-3px"
   },
-  ".cm-tooltip-autocomplete ul li": {},
-  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
+  ".cm-tooltip-autocomplete > ul": {
+    maxHeight: "20em !important"
+  },
+  ".cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  // TODO(burdon): Can we add a class prefix to avoid adding !important?
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: get2(tokens, "extend.colors.primary.500")
+  },
   ".cm-completionIcon": {
     display: "none"
   },
@@ -2179,7 +2185,8 @@ var defaultTheme = {
     fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
-    textDecoration: "none"
+    textDecoration: "none !important",
+    opacity: 0.5
   },
   //
   // table
@@ -2365,23 +2372,23 @@ var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
   ].filter(isNotFalsy2);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
-  const extensions = text ? [
-    automerge(text)
-  ] : [];
+  const extensions = [];
+  if (text) {
+    extensions.push(automerge(text));
+  }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
     const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
-    const awarenessProvider2 = new SpaceAwarenessProvider({
+    extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
+        darkColor: cursorDarkValue,
         lightColor: cursorLightValue
       }
-    });
-    extensions.push(awareness(awarenessProvider2));
+    })));
   }
   return extensions;
 };
@@ -4645,168 +4652,27 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var instanceCount = 0;
-var TextEditor = /* @__PURE__ */ forwardRef(({
-  id,
-  // TODO(wittjosiah): Rename initialText?
-  doc,
-  selection,
-  extensions,
-  className,
-  autoFocus,
-  scrollTo: propsScrollTo,
-  moveToEndOfLine,
-  debug,
-  dataTestId
-}, forwardedRef) => {
-  const [instanceId] = useState3(() => `text-editor-${++instanceCount}`);
-  const scrollTo = useDefaultValue(propsScrollTo, EditorView16.scrollIntoView(0, {
-    yMargin: 0
-  }));
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const rootRef = useRef(null);
-  const [view, setView] = useState3(null);
-  useImperativeHandle(forwardedRef, () => view, [
-    view
-  ]);
-  useEffect2(() => {
-    if (autoFocus) {
-      view?.focus();
-    }
-  }, [
-    view,
-    autoFocus
-  ]);
-  useEffect2(() => {
-    log7("create", {
-      id,
-      instanceId
-    }, {
-      F: __dxlog_file11,
-      L: 91,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-    const state2 = EditorState2.create({
-      doc,
-      extensions: [
-        id && documentId2.of(id),
-        // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
-        EditorView16.exceptionSink.of((err) => {
-          log7.catch(err, void 0, {
-            F: __dxlog_file11,
-            L: 104,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-        }),
-        // Focus.
-        EditorView16.updateListener.of((update2) => {
-          update2.transactions.forEach((transaction) => {
-            if (transaction.isUserEvent(focusEvent)) {
-              rootRef.current?.focus();
-            }
-          });
-        }),
-        extensions
-      ].filter(isNotFalsy4)
-    });
-    const view2 = new EditorView16({
-      state: state2,
-      parent: rootRef.current,
-      scrollTo,
-      // NOTE: Uncomment to debug/monitor all transactions.
-      // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-      dispatchTransactions: (trs, view3) => {
-        if (debug) {
-          logChanges(trs);
-        }
-        view3.update(trs);
-      }
-    });
-    if (moveToEndOfLine && !(scrollTo || selection)) {
-      const { to } = view2.state.doc.lineAt(0);
-      view2.dispatch({
-        selection: {
-          anchor: to
-        }
-      });
-    }
-    if (state2.facet(editorInputMode).noTabster) {
-      rootRef.current?.removeAttribute("data-tabster");
-    }
-    setView(view2);
-    return () => {
-      log7("destroy", {
-        id,
-        instanceId
-      }, {
-        F: __dxlog_file11,
-        L: 153,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      view2?.destroy();
-    };
-  }, [
-    id,
-    selection,
-    scrollTo,
-    extensions
-  ]);
-  const handleKeyUp = useCallback((event) => {
-    const { key } = event;
-    switch (key) {
-      case "Enter": {
-        view?.focus();
-        break;
-      }
-    }
-  }, [
-    view
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    ref: rootRef,
-    tabIndex: 0,
-    className,
-    "data-testid": dataTestId,
-    ...tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
-  });
-});
-
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
-import { createContext } from "@radix-ui/react-context";
-import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import { useDropzone } from "react-dropzone";
-import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
 var iconStyles = getSize(5);
 var buttonStyles = "min-bs-0 p-2";
 var tooltipProps = {
   side: "top",
   classNames: "z-10"
 };
-var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
+var ToolbarSeparator = () => /* @__PURE__ */ React.createElement("div", {
   role: "separator",
   className: "grow"
 });
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
 var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
+  return /* @__PURE__ */ React.createElement(ToolbarContextProvider, {
     onAction,
     state: state2
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React.createElement(DensityProvider, {
     density: "fine"
-  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Root, {
     classNames: [
       "p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden",
       classNames
@@ -4817,30 +4683,30 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
   }, children))));
 };
 var ToolbarToggleButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
 };
 var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
+  }), /* @__PURE__ */ React.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
 };
 var ViewModeIcons = {
   preview: PencilSimple,
@@ -4851,10 +4717,10 @@ var MarkdownView = ({ mode }) => {
   const { t } = useTranslation(translationKey);
   const { onAction } = useToolbarContext("ViewMode");
   const ModeIcon = ViewModeIcons[mode ?? "preview"];
-  const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState4(false);
-  const [selectOpen, setSelectOpen] = useState4(false);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+  const suppressNextTooltip = useRef(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
       if (nextOpen && suppressNextTooltip.current) {
@@ -4864,7 +4730,7 @@ var MarkdownView = ({ mode }) => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -4872,39 +4738,39 @@ var MarkdownView = ({ mode }) => {
       }
       return setSelectOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
     classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement("span", {
+  }, /* @__PURE__ */ React.createElement("span", {
     className: "sr-only"
-  }, t("mode label")), /* @__PURE__ */ React2.createElement(ModeIcon, {
+  }, t("mode label")), /* @__PURE__ */ React.createElement(ModeIcon, {
     className: iconStyles
-  }), /* @__PURE__ */ React2.createElement(CaretDown, null))))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React.createElement(CaretDown, null))))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, {
     classNames: "is-min md:is-min",
     onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
     const Icon = ViewModeIcons[value];
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+    return /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
       key: value,
       checked: value === mode,
       onClick: () => onAction?.({
         type: "view-mode",
         data: value
       })
-    }, /* @__PURE__ */ React2.createElement(Icon, {
+    }, /* @__PURE__ */ React.createElement(Icon, {
       className: iconStyles
-    }), /* @__PURE__ */ React2.createElement("span", {
+    }), /* @__PURE__ */ React.createElement("span", {
       className: "whitespace-nowrap grow"
-    }, t(`${value} mode label`)), /* @__PURE__ */ React2.createElement(Check, {
+    }, t(`${value} mode label`)), /* @__PURE__ */ React.createElement(Check, {
       className: value === mode ? "visible" : "invisible"
     }));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+  })), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
 };
 var HeadingIcons = {
   "0": Paragraph,
@@ -4922,10 +4788,10 @@ var MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
-  const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState4(false);
-  const [selectOpen, setSelectOpen] = useState4(false);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+  const suppressNextTooltip = useRef(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
+  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
       if (nextOpen && suppressNextTooltip.current) {
@@ -4935,7 +4801,7 @@ var MarkdownHeading = () => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -4943,40 +4809,40 @@ var MarkdownHeading = () => {
       }
       return setSelectOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
     classNames: buttonStyles,
     disabled: value === null
-  }, /* @__PURE__ */ React2.createElement("span", {
+  }, /* @__PURE__ */ React.createElement("span", {
     className: "sr-only"
-  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
+  }, t("heading label")), /* @__PURE__ */ React.createElement(HeadingIcon, {
     className: iconStyles
-  }), /* @__PURE__ */ React2.createElement(CaretDown, null))))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React.createElement(CaretDown, null))))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, {
     classNames: "is-min md:is-min",
     onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
     const Icon = HeadingIcons[level];
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+    return /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
       key: level,
       checked: value === level,
       onClick: () => onAction?.({
         type: "heading",
         data: level
       })
-    }, /* @__PURE__ */ React2.createElement("span", {
+    }, /* @__PURE__ */ React.createElement("span", {
       className: "sr-only"
     }, t("heading level label", {
       count: parseInt(level)
-    })), /* @__PURE__ */ React2.createElement(Icon, {
+    })), /* @__PURE__ */ React.createElement(Icon, {
       className: iconStyles
-    }), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Check, null)));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+    }), /* @__PURE__ */ React.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React.createElement(Check, null)));
+  })), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
 };
 var markdownStyles = [
   {
@@ -5008,10 +4874,10 @@ var markdownStyles = [
 var MarkdownStyles = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -5042,10 +4908,10 @@ var markdownLists = [
 var MarkdownLists = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -5077,10 +4943,10 @@ var MarkdownBlocks = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   const value = markdownBlocks.find(({ getState }) => state2 && getState(state2));
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -5091,7 +4957,7 @@ var MarkdownBlocks = () => {
     }) : void 0
   }, t(`${type} label`))));
 };
-var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
+var MarkdownStandard = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MarkdownHeading, null), /* @__PURE__ */ React.createElement(MarkdownStyles, null), /* @__PURE__ */ React.createElement(MarkdownLists, null), /* @__PURE__ */ React.createElement(MarkdownBlocks, null));
 var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
@@ -5107,7 +4973,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
       ]
     }
   });
-  useEffect3(() => {
+  useEffect2(() => {
     if (onUpload && acceptedFiles.length) {
       requestAnimationFrame(async () => {
         const f = acceptedFiles[0];
@@ -5129,7 +4995,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
   }, [
     acceptedFiles
   ]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("input", getInputProps()), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", getInputProps()), /* @__PURE__ */ React.createElement(ToolbarButton, {
     value: "image",
     Icon: Image,
     onClick: () => open()
@@ -5138,7 +5004,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownActions");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
@@ -5164,51 +5030,71 @@ var useActionHandler = (view) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView17 } from "@codemirror/view";
-import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
-import { log as log8 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var useTextEditor = (cb = () => ({}), deps = []) => {
-  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
-  const onUpdate = useRef3();
-  const [view, setView] = useState5();
-  const parentRef = useRef3(null);
-  useEffect4(() => {
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView16 } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { log as log7 } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-ui";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var instanceCount = 0;
+var useTextEditor = (props = {}, deps = []) => {
+  const { id, initialValue, selection, extensions, autoFocus, scrollTo: _scrollTo, moveToEndOfLine, debug } = useMemo3(() => {
+    return typeof props === "function" ? props() : props;
+  }, deps ?? []);
+  const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
+  const scrollTo = useDefaultValue(_scrollTo, EditorView16.scrollIntoView(0, {
+    yMargin: 0
+  }));
+  const onUpdate = useRef2();
+  const [view, setView] = useState4();
+  const parentRef = useRef2(null);
+  useEffect3(() => {
     let view2;
     if (parentRef.current) {
-      log8("create", {
-        id
+      log7("create", {
+        id,
+        instanceId,
+        doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file12,
-        L: 50,
+        F: __dxlog_file11,
+        L: 86,
         S: void 0,
         C: (f, a) => f(...a)
       });
-      const state2 = EditorState3.create({
-        doc,
+      let initialSelection = selection;
+      if (moveToEndOfLine && selection === void 0) {
+        const index = initialValue?.indexOf("\n");
+        const anchor = !index || index === -1 ? 0 : index;
+        initialSelection = {
+          anchor
+        };
+      }
+      const state2 = EditorState2.create({
+        doc: initialValue,
+        selection: initialSelection,
         extensions: [
           id && documentId2.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView17.exceptionSink.of((err) => {
-            log8.catch(err, void 0, {
-              F: __dxlog_file12,
-              L: 60,
+          EditorView16.exceptionSink.of((err) => {
+            log7.catch(err, void 0, {
+              F: __dxlog_file11,
+              L: 104,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView17.updateListener.of(() => {
+          EditorView16.updateListener.of(() => {
             onUpdate.current?.();
           })
-        ].filter(isNotFalsy5)
+        ].filter(isNotFalsy4)
       });
-      view2 = new EditorView17({
+      view2 = new EditorView16({
         parent: parentRef.current,
         scrollTo,
+        selection: initialSelection,
         state: state2,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
@@ -5219,30 +5105,34 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           view3.update(trs);
         }
       });
+      if (!initialValue && moveToEndOfLine) {
+        const { to } = view2.state.doc.lineAt(0);
+        view2.dispatch({
+          selection: {
+            anchor: to
+          }
+        });
+      }
       setView(view2);
     }
     return () => {
-      log8("destroy", {
+      log7("destroy", {
         id
       }, {
-        F: __dxlog_file12,
-        L: 88,
+        F: __dxlog_file11,
+        L: 139,
         S: void 0,
         C: (f, a) => f(...a)
       });
       view2?.destroy();
     };
   }, deps);
-  useEffect4(() => {
+  useEffect3(() => {
     if (view) {
-      if (!selection && !view.state.selection.main.anchor) {
-        selection = EditorSelection2.single(view.state.doc.line(1).to);
-      }
-      if (selection || scrollTo) {
+      if (scrollTo) {
         onUpdate.current = () => {
           onUpdate.current = void 0;
           view.dispatch({
-            selection,
             effects: scrollTo && [
               scrollTo
             ],
@@ -5250,20 +5140,27 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
           });
         };
       }
-      if (autoFocus) {
-        view.focus();
+      if (view.state.facet(editorInputMode).noTabster) {
+        parentRef.current?.removeAttribute("data-tabster");
       }
     }
   }, [
     view,
-    autoFocus,
     selection,
     scrollTo
   ]);
-  const focusableGroup = useFocusableGroup2({
+  useEffect3(() => {
+    if (view && autoFocus) {
+      view.focus();
+    }
+  }, [
+    autoFocus,
+    view
+  ]);
+  const focusableGroup = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const handleKeyUp = useCallback2((event) => {
+  const handleKeyUp = useCallback((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -5296,7 +5193,6 @@ export {
   List,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
-  TextEditor,
   TextKind,
   Toolbar,
   addBlockquote,