@dxos/react-ui-editor 0.6.5 → 0.6.6-staging.23d123d

package/dist/lib/browser/index.mjs

@@ -20,7 +20,11 @@ var translations_default = [
         "table label": "Create table",
         "heading level label_zero": "Paragraph",
         "heading level label_one": "Heading level {{count}}",
-        "heading level label_other": "Heading level {{count}}"
+        "heading level label_other": "Heading level {{count}}",
+        "view mode label": "Editor view",
+        "preview mode label": "Live preview",
+        "readonly mode label": "Read only",
+        "source mode label": "Source"
       }
     }
   }
@@ -31,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";
@@ -146,7 +149,7 @@ var styles = EditorView.baseTheme({
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ onSearch }) => {
+var autocomplete = ({ activateOnTyping, onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -155,13 +158,12 @@ var autocomplete = ({ onSearch }) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: false,
+      activateOnTyping,
       // closeOnBlur: false,
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
       tooltipClass: () => "shadow rounded"
     }),
-    // TODO(burdon): Option to create new page?
     // TODO(burdon): Optional decoration via addToOptions
     markdownLanguage.data.of({
       autocomplete: (context) => {
@@ -185,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)
       });
@@ -208,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)
       });
@@ -449,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 {
@@ -503,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();
@@ -526,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;
     }
@@ -539,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) {
@@ -551,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,
@@ -590,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,
@@ -609,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)
         })
       });
     }
@@ -695,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"
@@ -760,7 +759,7 @@ var SpaceAwarenessProvider = class {
         err
       }, {
         F: __dxlog_file3,
-        L: 89,
+        L: 91,
         S: this,
         C: (f, a) => f(...a)
       });
@@ -777,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",
@@ -794,7 +793,7 @@ var SpaceAwarenessProvider = class {
   _handleQueryMessage() {
     invariant(this._postTask, void 0, {
       F: __dxlog_file3,
-      L: 115,
+      L: 117,
       S: this,
       A: [
         "this._postTask",
@@ -806,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'",
@@ -1880,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({
@@ -1902,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 = () => {
@@ -1940,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)) {
@@ -1951,7 +1946,19 @@ 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 = (log8 = console.log) => {
+  const logTokens = (state2) => syntaxTree(state2).iterate({
+    enter: (node) => log8(node.type)
+  });
+  return StateField5.define({
+    create: (state2) => logTokens(state2),
+    update: (_, tr) => logTokens(tr.state)
+  });
 };
 
 // packages/ui/react-ui-editor/src/extensions/doc.ts
@@ -2143,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"
   },
@@ -2163,7 +2185,8 @@ var defaultTheme = {
     fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
-    textDecoration: "none"
+    textDecoration: "none !important",
+    opacity: 0.5
   },
   //
   // table
@@ -2349,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;
 };
@@ -2386,7 +2409,7 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { syntaxTree } from "@codemirror/language";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
 import { useMemo as useMemo2, useState as useState2 } from "react";
@@ -2411,7 +2434,7 @@ var setHeading = (level) => {
     let prevBlock = -1;
     for (const range of ranges) {
       let sawBlock = false;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from: range.from,
         to: range.to,
         enter: (node) => {
@@ -2520,7 +2543,7 @@ var setStyle = (type, enable) => {
       let startCovered = false;
       let endCovered = false;
       let { from, to } = range;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2723,7 +2746,7 @@ var insertTable = (view) => {
   snippets.table(view, null, from, from);
 };
 var removeLinkInner = (from, to, changes, state2) => {
-  syntaxTree(state2).iterate({
+  syntaxTree2(state2).iterate({
     from,
     to,
     enter: (node) => {
@@ -2768,7 +2791,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       let { from, to } = range;
       const cutStyles = [];
       let okay = null;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2863,7 +2886,7 @@ var addList = (type) => {
     let parentColumn = null;
     const blocks = [];
     for (const { from, to } of state2.selection.ranges) {
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2999,7 +3022,7 @@ var removeList = (type) => {
     const stack = [];
     const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
     for (const { from, to } of state2.selection.ranges) {
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -3086,7 +3109,7 @@ var setBlockquote = (enable) => {
     let lastBlock = -1;
     for (const { from, to } of state2.selection.ranges) {
       const sawBlock = false;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -3176,7 +3199,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3227,7 +3250,7 @@ var removeCodeblock = ({ state: state2, dispatch }) => {
   let lastBlock = -1;
   const changes = [];
   for (const { from, to } of state2.selection.ranges) {
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3389,7 +3412,7 @@ var getFormatting = (state2) => {
         }
       }
     }
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -3739,7 +3762,7 @@ var markdownHighlightStyle = (readonly) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/linkPaste.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { Transaction } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var VALID_PROTOCOLS = [
@@ -3813,7 +3836,7 @@ var linkPastePlugin = ViewPlugin5.fromClass(class {
    * checking for CodeBlock or FencedCode nodes.
    */
   isInCodeBlock(state2, pos) {
-    const tree = syntaxTree2(state2);
+    const tree = syntaxTree3(state2);
     let node = tree.resolveInner(pos, -1);
     while (node) {
       if (node.name.includes("Code") || node.name.includes("FencedCode")) {
@@ -3873,7 +3896,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
 import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -3974,7 +3997,7 @@ var buildDecorations = (view, options, focus) => {
   const atomicDeco = new RangeSetBuilder2();
   const { state: state2 } = view;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(state2).iterate({
+    syntaxTree4(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -4180,11 +4203,11 @@ var formattingStyles = EditorView12.baseTheme({
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { StateField as StateField6 } from "@codemirror/state";
 import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField5.define({
+  return StateField6.define({
     create: (state2) => {
       return Decoration6.set(buildDecorations2(0, state2.doc.length, state2));
     },
@@ -4223,7 +4246,7 @@ var preloadImage = (url) => {
 var buildDecorations2 = (from, to, state2) => {
   const decorations = [];
   const cursor = state2.selection.main.head;
-  syntaxTree4(state2).iterate({
+  syntaxTree5(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4263,11 +4286,11 @@ var imageUpload = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
-  const syntax = syntaxTree5(view.state).resolveInner(pos, side);
+  const syntax = syntaxTree6(view.state).resolveInner(pos, side);
   let link = null;
   for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
     link = node.name === "Link" ? node : null;
@@ -4297,11 +4320,11 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
 import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField6.define({
+  return StateField7.define({
     create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
     provide: (field) => EditorView14.decorations.from(field)
@@ -4316,7 +4339,7 @@ var update = (state2, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree6(state2).iterate({
+  syntaxTree7(state2).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4442,14 +4465,24 @@ import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var focusEvent = "focus.container";
-var editorMode = Facet6.define({
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var editorInputMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
-var EditorModes = {
+var InputModeExtensions = {
   default: [],
   vscode: [
     // https://github.com/replit/codemirror-vscode-keymap
-    editorMode.of({
+    editorInputMode.of({
       type: "vscode"
     }),
     keymap8.of(vscodeKeymap)
@@ -4457,7 +4490,7 @@ var EditorModes = {
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorMode.of({
+    editorInputMode.of({
       type: "vim",
       noTabster: true
     }),
@@ -4619,200 +4652,125 @@ 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(editorMode).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,
-    editorMode,
-    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 } 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: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      "p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden",
       classNames
-    ]
+    ],
+    style: {
+      contain: "layout"
+    }
   }, 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,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo
+};
+var MarkdownView = ({ mode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext("ViewMode");
+  const ModeIcon = ViewModeIcons[mode ?? "preview"];
+  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) {
+        suppressNextTooltip.current = false;
+        return setTooltipOpen(false);
+      } else {
+        return setTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
+    open: selectOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setSelectOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("mode label")), /* @__PURE__ */ React.createElement(ModeIcon, {
+    className: iconStyles
+  }), /* @__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__ */ React.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
+    const Icon = ViewModeIcons[value];
+    return /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
+      key: value,
+      checked: value === mode,
+      onClick: () => onAction?.({
+        type: "view-mode",
+        data: value
+      })
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      className: iconStyles
+    }), /* @__PURE__ */ React.createElement("span", {
+      className: "whitespace-nowrap grow"
+    }, t(`${value} mode label`)), /* @__PURE__ */ React.createElement(Check, {
+      className: value === mode ? "visible" : "invisible"
+    }));
+  })), /* @__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,
@@ -4830,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) {
@@ -4843,7 +4801,7 @@ var MarkdownHeading = () => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -4851,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 = [
   {
@@ -4916,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,
@@ -4950,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,
@@ -4985,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,
@@ -4999,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);
@@ -5015,7 +4973,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
       ]
     }
   });
-  useEffect3(() => {
+  useEffect2(() => {
     if (onUpload && acceptedFiles.length) {
       requestAnimationFrame(async () => {
         const f = acceptedFiles[0];
@@ -5037,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()
@@ -5046,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",
@@ -5060,6 +5018,7 @@ var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
+  View: MarkdownView,
   Markdown: MarkdownStandard,
   Custom: MarkdownCustom,
   Actions: MarkdownActions
@@ -5071,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
@@ -5126,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
             ],
@@ -5157,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) {
@@ -5196,12 +5186,13 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
 };
 export {
   Cursor,
-  EditorModes,
+  EditorInputModes,
+  EditorViewModes,
   Inline,
+  InputModeExtensions,
   List,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
-  TextEditor,
   TextKind,
   Toolbar,
   addBlockquote,
@@ -5225,6 +5216,7 @@ export {
   createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
+  debugNodeLogger,
   decorateMarkdown,
   defaultOptions,
   defaultTheme,
@@ -5232,7 +5224,7 @@ export {
   dropFile,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
-  editorMode,
+  editorInputMode,
   editorWithToolbarLayout,
   focusEvent,
   formattingEquals,