@dxos/react-ui-editor 0.8.3-staging.0fa589b → 0.8.4-main.3f58842

package/dist/lib/browser/index.mjs

@@ -1,6 +1,13 @@
-// packages/ui/react-ui-editor/src/translations.ts
+import {
+  EditorInputMode,
+  EditorInputModes,
+  EditorViewMode,
+  EditorViewModes
+} from "./chunk-22UMM3QJ.mjs";
+
+// src/translations.ts
 var translationKey = "react-ui-editor";
-var translations_default = [
+var translations = [
   {
     "en-US": {
       [translationKey]: {
@@ -33,46 +40,27 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-editor/src/index.ts
+// src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
 import { EditorView as EditorView27, keymap as keymap14 } 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/EditorToolbar/EditorToolbar.tsx
+// src/components/Editor/Editor.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { Rx } from "@effect-rx/rx-react";
-import React3, { memo, useMemo as useMemo4 } from "react";
-import { rxFromSignal } from "@dxos/app-graph";
-import { ElevationProvider } from "@dxos/react-ui";
-import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+import React3, { forwardRef, useImperativeHandle } from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/util.ts
-import { useMemo } from "react";
-import { live } from "@dxos/live-object";
-import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
-var useEditorToolbarState = (initialState = {}) => {
-  return useMemo(() => live(initialState), []);
-};
-var createEditorAction = (id, invoke, properties) => {
-  const { label = [
-    `${id} label`,
-    {
-      ns: translationKey
-    }
-  ], ...rest } = properties;
-  return createMenuAction(id, invoke, {
-    label,
-    ...rest
-  });
-};
-var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
-  icon,
-  iconOnly: true,
-  ...props
-});
+// src/hooks/useTextEditor.ts
+import { EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView26 } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { log as log8 } from "@dxos/log";
+import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
+// src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin } from "@codemirror/view";
 var annotationMark = Decoration.mark({
@@ -113,7 +101,7 @@ var annotations = ({ match } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
+// src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
@@ -150,15 +138,15 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+// src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
 import { StateField } from "@codemirror/state";
 import { EditorView as EditorView2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
+// src/extensions/automerge/cursor.ts
 import { log } from "@dxos/log";
 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 __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (accessor) => ({
   toCursor: (pos, assoc) => {
     try {
@@ -188,7 +176,7 @@ var cursorConverter = (accessor) => ({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
+// src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
@@ -201,10 +189,10 @@ var isReconcile = (tr) => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+// src/extensions/automerge/sync.ts
 import { next as A2 } from "@automerge/automerge";
 
-// packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
+// src/extensions/automerge/update-automerge.ts
 import { next as A } from "@automerge/automerge";
 var updateAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
@@ -235,7 +223,7 @@ var updateAutomerge = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/update-codemirror.ts
+// src/extensions/automerge/update-codemirror.ts
 import { ChangeSet } from "@codemirror/state";
 var updateCodeMirror = (view, selection, target, patches) => {
   for (const patch of patches) {
@@ -342,7 +330,7 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+// src/extensions/automerge/sync.ts
 var Syncer = class {
   // prettier-ignore
   constructor(_handle, _state) {
@@ -386,7 +374,7 @@ var Syncer = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/util/facet.ts
+// src/util/facet.ts
 import { Facet } from "@codemirror/state";
 var singleValueFacet = (defaultValue) => Facet.define({
   // Called immediately.
@@ -395,7 +383,7 @@ var singleValueFacet = (defaultValue) => Facet.define({
   }
 });
 
-// packages/ui/react-ui-editor/src/util/cursor.ts
+// src/util/cursor.ts
 var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
 var defaultCursorConverter = {
   toCursor: (position) => position.toString(),
@@ -430,9 +418,9 @@ var Cursor = class _Cursor {
   }
 };
 
-// packages/ui/react-ui-editor/src/util/debug.ts
+// src/util/debug.ts
 import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
 var wrapWithCatch = (fn) => {
   return (...args) => {
     try {
@@ -490,7 +478,7 @@ var logChanges = (trs) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/util/dom.ts
+// src/util/dom.ts
 var flattenRect = (rect, left) => {
   const x = left ? rect.left : rect.right;
   return {
@@ -532,7 +520,7 @@ var createElement = (tag, options, children) => {
   return el;
 };
 
-// packages/ui/react-ui-editor/src/util/react.tsx
+// src/util/react.tsx
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
@@ -549,7 +537,7 @@ var createRenderer = (Component) => (el, props) => {
   }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
+// src/extensions/automerge/automerge.ts
 var automerge = (accessor) => {
   const syncState = StateField.define({
     create: () => ({
@@ -607,12 +595,12 @@ var automerge = (accessor) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
+// src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
@@ -839,12 +827,12 @@ var styles = EditorView3.theme({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
+// src/extensions/awareness/awareness-provider.ts
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
@@ -946,11 +934,12 @@ var SpaceAwarenessProvider = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/blast.ts
+// src/extensions/blast.ts
 import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
+import { throttle } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -1078,7 +1067,7 @@ var Blaster = class {
   initialize() {
     invariant2(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file5,
-      L: 141,
+      L: 142,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -1115,7 +1104,7 @@ var Blaster = class {
   start() {
     invariant2(this._canvas && this._ctx, void 0, {
       F: __dxlog_file5,
-      L: 180,
+      L: 181,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -1219,18 +1208,6 @@ var Effect2 = class extends Effect {
     ctx.fill();
   }
 };
-function throttle(callback, limit) {
-  let wait = false;
-  return function(...args) {
-    if (!wait) {
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
 var getRGBComponents = (node, color) => {
   if (typeof color === "function") {
     return color();
@@ -1256,10 +1233,10 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/action.ts
+// src/extensions/command/action.ts
 import { StateEffect as StateEffect2 } from "@codemirror/state";
 
-// packages/ui/react-ui-editor/src/extensions/command/state.ts
+// src/extensions/command/state.ts
 import { StateField as StateField2 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
 var commandConfig = singleValueFacet();
@@ -1272,7 +1249,7 @@ var commandState = StateField2.define({
       }
       const { renderDialog } = tr.state.facet(commandConfig);
       if (effect.is(openEffect) && renderDialog) {
-        const { pos, fullWidth } = effect.value;
+        const { pos, fullWidth: fullWidth2 } = effect.value;
         const tooltip = {
           pos,
           above: false,
@@ -1283,7 +1260,7 @@ var commandState = StateField2.define({
             const tooltipView = {
               dom: root,
               mount: (view2) => {
-                if (fullWidth) {
+                if (fullWidth2) {
                   const parent = root.parentElement;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
@@ -1329,7 +1306,7 @@ var commandState = StateField2.define({
   ]
 });
 
-// packages/ui/react-ui-editor/src/extensions/command/action.ts
+// src/extensions/command/action.ts
 var openEffect = StateEffect2.define();
 var closeEffect = StateEffect2.define();
 var openCommand = (view) => {
@@ -1369,12 +1346,12 @@ var commandKeyBindings = [
   }
 ];
 
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
+// src/extensions/command/command.ts
 import { Prec } from "@codemirror/state";
 import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 import { isNonNullable } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/command/hint.ts
+// src/extensions/command/hint.ts
 import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
 var hint = ({ delay = 3e3, onHint }) => {
@@ -1458,7 +1435,7 @@ var Hint = class extends WidgetType2 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command.ts
+// src/extensions/command/command.ts
 var command = (options = {}) => {
   return [
     Prec.highest(keymap3.of(commandKeyBindings)),
@@ -1474,11 +1451,11 @@ var command = (options = {}) => {
   ].filter(isNonNullable);
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
+// src/extensions/command/command-menu.ts
 import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec as Prec2 } from "@codemirror/state";
 import { EditorView as EditorView8, ViewPlugin as ViewPlugin6, Decoration as Decoration5, keymap as keymap4 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/command/placeholder.ts
+// src/extensions/command/placeholder.ts
 import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var placeholder = ({ delay = 3e3, content }) => {
   const plugin = ViewPlugin5.fromClass(class {
@@ -1560,7 +1537,7 @@ var Placeholder = class extends WidgetType3 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/command-menu.ts
+// src/extensions/command/command-menu.ts
 var commandMenu = (options) => {
   const commandMenuPlugin = ViewPlugin6.fromClass(class {
     constructor(view) {
@@ -1717,7 +1694,7 @@ var commandMenuState = StateField3.define({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/command/floating-menu.ts
+// src/extensions/command/floating-menu.ts
 import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
 var floatingMenu = (options = {}) => [
@@ -1806,8 +1783,93 @@ var floatingMenu = (options = {}) => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/command/useCommandMenu.ts
-import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
+// src/extensions/command/typeahead.ts
+import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
+var typeahead = ({ onComplete } = {}) => {
+  let hint2;
+  const complete = (view) => {
+    if (!hint2) {
+      return false;
+    }
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: [
+        {
+          from: selection.from,
+          to: selection.to,
+          insert: hint2
+        }
+      ],
+      selection: EditorSelection.cursor(selection.from + hint2.length)
+    });
+    return true;
+  };
+  return [
+    ViewPlugin8.fromClass(class {
+      constructor() {
+        this.decorations = Decoration6.none;
+      }
+      update(update2) {
+        const builder = new RangeSetBuilder4();
+        const selection = update2.view.state.selection.main;
+        const line = update2.view.state.doc.lineAt(selection.from);
+        if (selection.from === selection.to && selection.from === line.to) {
+          const str = update2.state.sliceDoc(line.from, selection.from);
+          hint2 = onComplete?.({
+            line: str
+          });
+          if (hint2) {
+            builder.add(selection.from, selection.to, Decoration6.widget({
+              widget: new Hint(hint2)
+            }));
+          }
+        }
+        this.decorations = builder.finish();
+      }
+    }, {
+      decorations: (v) => v.decorations
+    }),
+    // Keys.
+    Prec3.highest(keymap5.of([
+      {
+        key: "Tab",
+        preventDefault: true,
+        run: complete
+      },
+      {
+        key: "ArrowRight",
+        preventDefault: true,
+        run: complete
+      }
+    ]))
+  ];
+};
+var staticCompletion = (completions, options = {}) => ({ line }) => {
+  if (line.length === 0 && options.default) {
+    return options.default;
+  }
+  const parts = line.split(/\s+/).filter(Boolean);
+  if (parts.length) {
+    const str = parts.at(-1);
+    if (str.length >= (options.minLength ?? 0)) {
+      for (const completion of completions) {
+        const match = matchCompletion(completion, str);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  }
+};
+var matchCompletion = (completion, str, minLength = 0) => {
+  if (str.length >= minLength && completion.length > str.length && completion.startsWith(str)) {
+    return completion.slice(str.length);
+  }
+};
+
+// src/extensions/command/useCommandMenu.ts
+import { useCallback, useMemo, useRef, useState } from "react";
 var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu }) => {
   const triggerRef = useRef(null);
   const currentRef = useRef(null);
@@ -1855,7 +1917,7 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     void item.onSelect?.(view, selection.head);
   }, []);
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-  const _commandMenu = useMemo2(() => {
+  const _commandMenu = useMemo(() => {
     return commandMenu({
       trigger,
       placeholder: placeholder3,
@@ -1907,90 +1969,7 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
   };
 };
 
-// packages/ui/react-ui-editor/src/extensions/command/typeahead.ts
-import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
-var typeahead = ({ onComplete } = {}) => {
-  let hint2;
-  const complete = (view) => {
-    if (!hint2) {
-      return false;
-    }
-    const selection = view.state.selection.main;
-    view.dispatch({
-      changes: [
-        {
-          from: selection.from,
-          to: selection.to,
-          insert: hint2
-        }
-      ],
-      selection: EditorSelection.cursor(selection.from + hint2.length)
-    });
-    return true;
-  };
-  return [
-    ViewPlugin8.fromClass(class {
-      constructor() {
-        this.decorations = Decoration6.none;
-      }
-      update(update2) {
-        const builder = new RangeSetBuilder4();
-        const selection = update2.view.state.selection.main;
-        const line = update2.view.state.doc.lineAt(selection.from);
-        if (selection.from === selection.to && selection.from === line.to) {
-          const str = update2.state.sliceDoc(line.from, selection.from);
-          hint2 = onComplete?.({
-            line: str
-          });
-          if (hint2) {
-            builder.add(selection.from, selection.to, Decoration6.widget({
-              widget: new Hint(hint2)
-            }));
-          }
-        }
-        this.decorations = builder.finish();
-      }
-    }, {
-      decorations: (v) => v.decorations
-    }),
-    // Keys.
-    Prec3.highest(keymap5.of([
-      {
-        key: "Tab",
-        preventDefault: true,
-        run: complete
-      },
-      {
-        key: "ArrowRight",
-        preventDefault: true,
-        run: complete
-      }
-    ]))
-  ];
-};
-var staticCompletion = (completions, defaultCompletion) => ({ line }) => {
-  if (line.length === 0 && defaultCompletion) {
-    return defaultCompletion;
-  }
-  const words = line.split(/\s+/).filter(Boolean);
-  if (words.length) {
-    const word = words.at(-1);
-    for (const completion of completions) {
-      const match = matchCompletion(completion, word);
-      if (match) {
-        return match;
-      }
-    }
-  }
-};
-var matchCompletion = (completion, word) => {
-  if (completion.length > word.length && completion.startsWith(word)) {
-    return completion.slice(word.length);
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/comments.ts
+// src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect4, StateField as StateField4 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap7, Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
@@ -2000,13 +1979,13 @@ import { debounce as debounce2 } from "@dxos/async";
 import { log as log4 } from "@dxos/log";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/selection.ts
+// src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
 import { EditorView as EditorView10, keymap as keymap6 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
@@ -2093,8 +2072,8 @@ var selectionState = ({ getState, setState } = {}) => {
   ].filter(isNotFalsy);
 };
 
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+// src/extensions/comments.ts
+var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = StateEffect4.define();
 var setSelection = StateEffect4.define();
 var setCommentState = StateEffect4.define();
@@ -2518,7 +2497,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/debug.ts
+// src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
 var debugNodeLogger = (log9 = console.log) => {
@@ -2531,7 +2510,7 @@ var debugNodeLogger = (log9 = console.log) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/dnd.ts
+// src/extensions/dnd.ts
 import { dropCursor, EditorView as EditorView12 } from "@codemirror/view";
 var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
@@ -2567,7 +2546,7 @@ var dropFile = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/factories.ts
+// src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -2581,7 +2560,7 @@ import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/focus.ts
+// src/extensions/focus.ts
 import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
 import { EditorView as EditorView13 } from "@codemirror/view";
 var focusEffect = StateEffect5.define();
@@ -2612,11 +2591,11 @@ var focus = [
   })
 ];
 
-// packages/ui/react-ui-editor/src/defaults.ts
+// src/defaults.ts
 import { EditorView as EditorView14 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/styles/markdown.ts
+// src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
   1: "text-4xl",
@@ -2635,7 +2614,7 @@ var theme = {
   }
 };
 
-// packages/ui/react-ui-editor/src/styles/tokens.ts
+// src/styles/tokens.ts
 import { tokens } from "@dxos/react-ui-theme";
 import { get } from "@dxos/util";
 var getToken = (path, defaultValue) => {
@@ -2645,7 +2624,7 @@ var getToken = (path, defaultValue) => {
 var fontBody = getToken("fontFamily.body");
 var fontMono = getToken("fontFamily.mono");
 
-// packages/ui/react-ui-editor/src/styles/theme.ts
+// src/styles/theme.ts
 var defaultTheme = {
   "&": {},
   "&.cm-focused": {
@@ -2680,18 +2659,17 @@ var defaultTheme = {
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
     paddingRight: "4px",
-    borderRight: "1px solid var(--dx-separator)"
+    borderRight: "1px solid var(--dx-subduedSeparator)"
   },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-    minWidth: "40px",
-    alignContent: "center"
+    minWidth: "40px"
   },
   /**
-  * Height is set to match the corresponding line.
+  * Height is set to match the corresponding line (which may have wrapped).
   */
   ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "12px"
+    fontSize: "12px",
+    lineHeight: "24px"
   },
   /**
   * Line.
@@ -2709,7 +2687,7 @@ var defaultTheme = {
     borderLeft: "2px solid var(--dx-cmCursor)"
   },
   ".cm-placeholder": {
-    color: "var(--dx-subdued)"
+    color: "var(--dx-placeholder)"
   },
   /**
   * Selection (layer).
@@ -2857,7 +2835,7 @@ var defaultTheme = {
   }
 };
 
-// packages/ui/react-ui-editor/src/defaults.ts
+// src/defaults.ts
 var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
 var editorSlots = {
   scroll: {
@@ -2881,8 +2859,8 @@ var editorMonospace = EditorView14.theme({
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var stackItemContentEditorClassNames = (role) => mx2("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
 
-// packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+// src/extensions/factories.ts
+var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2958,11 +2936,17 @@ var createBasicExtensions = (_props) => {
     ].filter(isNotFalsy2))
   ].filter(isNotFalsy2);
 };
-var defaultThemeSlots = {
+var grow = {
+  editor: {
+    className: "is-full bs-full"
+  }
+};
+var fullWidth = {
   editor: {
-    className: "w-full bs-full"
+    className: "is-full"
   }
 };
+var defaultThemeSlots = grow;
 var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
@@ -2980,6 +2964,11 @@ var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _
       constructor(view) {
         view.scrollDOM.classList.add(slots.scroll.className);
       }
+    }),
+    slots.scroller?.className && ViewPlugin10.fromClass(class {
+      constructor(view) {
+        view.dom.querySelector(".cm-scroller")?.classList.add(...slots.scroller.className.split(" "));
+      }
     })
   ].filter(isNotFalsy2);
 };
@@ -3005,7 +2994,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/folding.tsx
+// src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
 import { EditorView as EditorView16 } from "@codemirror/view";
 import React2 from "react";
@@ -3043,7 +3032,7 @@ var folding = (_props = {}) => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/hashtag.tsx
+// src/extensions/hashtag.tsx
 import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin11, WidgetType as WidgetType4 } from "@codemirror/view";
 import { getHashColor, mx as mx3 } from "@dxos/react-ui-theme";
 var TagWidget = class extends WidgetType4 {
@@ -3086,7 +3075,7 @@ var hashtag = () => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/json.ts
+// src/extensions/json.ts
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
 import Ajv from "ajv";
@@ -3131,7 +3120,7 @@ var schemaLinter = (validate) => (view) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/listener.ts
+// src/extensions/listener.ts
 import { EditorView as EditorView18 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
@@ -3145,12 +3134,13 @@ var listener = ({ onFocus, onChange }) => {
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
+// src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
 import { EditorView as EditorView19, keymap as keymap9 } from "@codemirror/view";
-import { useMemo as useMemo3 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { debounceAndThrottle } from "@dxos/async";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline = /* @__PURE__ */ function(Inline2) {
   Inline2[Inline2["Strong"] = 0] = "Strong";
@@ -4238,16 +4228,21 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView19.updateListener.of((update2) => {
+  const handleUpdate = useCallback2(debounceAndThrottle((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
       });
     }
-  }), []);
+  }, 100), [
+    state
+  ]);
+  return useMemo2(() => EditorView19.updateListener.of(handleUpdate), [
+    handleUpdate
+  ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
+// src/extensions/markdown/action.ts
 var processEditorPayload = (view, { type, data }) => {
   let inlineType, listType;
   switch (type) {
@@ -4296,7 +4291,7 @@ var processEditorPayload = (view, { type, data }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+// src/extensions/markdown/bundle.ts
 import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
@@ -4305,7 +4300,7 @@ import { languages } from "@codemirror/language-data";
 import { keymap as keymap10 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+// src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
@@ -4484,7 +4479,7 @@ var markdownHighlightStyle = (_options = {}) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+// src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = (options = {}) => {
   return [
     // Main extension.
@@ -4519,7 +4514,7 @@ var createMarkdownExtensions = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
+// src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { StateField as StateField7 } from "@codemirror/state";
 var debugTree = (cb) => StateField7.define({
@@ -4546,14 +4541,14 @@ var convertTreeToJson = (state) => {
   return treeToJson(syntaxTree3(state).cursor());
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+// src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect6 } from "@codemirror/state";
 import { EditorView as EditorView23, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
+// src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
@@ -4697,7 +4692,7 @@ var getValidUrl = (str) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+// src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
 import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
@@ -4786,7 +4781,7 @@ var ImageWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
+// src/extensions/markdown/styles.ts
 import { EditorView as EditorView21 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
@@ -4909,7 +4904,7 @@ var formattingStyles = EditorView21.theme({
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+// src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
 import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
@@ -5007,8 +5002,8 @@ var TableWidget = class extends WidgetType6 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+// src/extensions/markdown/decorate.ts
+var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -5462,7 +5457,7 @@ var decorateMarkdown = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+// src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
@@ -5504,10 +5499,10 @@ var linkTooltip = (renderTooltip) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
+// src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -5542,23 +5537,10 @@ var mention = ({ debug, onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/modes.ts
+// src/extensions/modes.ts
 import { keymap as keymap11 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
-import { Schema } from "effect";
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
-];
-var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
 var editorInputMode = singleValueFacet({});
 var InputModeExtensions = {
   default: [],
@@ -5588,21 +5570,21 @@ var InputModeExtensions = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+// src/extensions/outliner/commands.ts
 import { indentMore } from "@codemirror/commands";
 import { getIndentUnit } from "@codemirror/language";
 import { EditorSelection as EditorSelection3 } from "@codemirror/state";
 import { keymap as keymap12 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+// src/extensions/outliner/selection.ts
 import { Compartment, Facet as Facet3 } from "@codemirror/state";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/tree.ts
+// src/extensions/outliner/tree.ts
 import { syntaxTree as syntaxTree9 } from "@codemirror/language";
 import { StateField as StateField10 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
+var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
     type,
@@ -5896,7 +5878,7 @@ var outlinerTree = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/selection.ts
+// src/extensions/outliner/selection.ts
 var getSelection = (state) => state.selection.main;
 var selectionEquals = (a, b) => a.length === b.length && a.every((i) => b.includes(i));
 var selectionFacet = Facet3.define({
@@ -5926,7 +5908,7 @@ var selectDown = (view) => {
   return true;
 };
 
-// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
+// src/extensions/outliner/commands.ts
 var indentItemMore = (view) => {
   const pos = getSelection(view.state).from;
   const tree = view.state.facet(treeFacet);
@@ -6160,16 +6142,16 @@ var commands = () => keymap12.of([
   }
 ]);
 
-// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+// src/extensions/outliner/outliner.ts
 import { Prec as Prec4 } from "@codemirror/state";
 import { Decoration as Decoration12, EditorView as EditorView24, ViewPlugin as ViewPlugin15 } from "@codemirror/view";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
+// src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
 import { log as log7 } from "@dxos/log";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
+var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
   return ViewPlugin14.fromClass(class {
@@ -6354,7 +6336,7 @@ var editor = () => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
+// src/extensions/outliner/outliner.ts
 var outliner = (options = {}) => [
   // Commands.
   Prec4.highest(commands()),
@@ -6446,7 +6428,7 @@ var decorations = () => [
   }))
 ];
 
-// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
+// src/extensions/preview/preview.ts
 import "@dxos/lit-ui/dx-ref-tag.pcss";
 import { syntaxTree as syntaxTree10 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
@@ -6554,7 +6536,7 @@ var PreviewBlockWidget = class extends WidgetType8 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/typewriter.ts
+// src/extensions/typewriter.ts
 import { keymap as keymap13 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
@@ -6611,75 +6593,282 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/blocks.ts
-var createBlockGroupAction = (value) => createEditorActionGroup("block", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createBlockActions = (value, getView, blankLine) => Object.entries({
-  blockquote: "ph--quotes--regular",
-  codeblock: "ph--code-block--regular",
-  table: "ph--table--regular"
-}).map(([type, icon]) => {
-  const checked = type === value;
-  return createEditorAction(type, () => {
-    const view = getView();
-    if (!view) {
-      return;
-    }
-    switch (type) {
-      case "blockquote":
-        checked ? removeBlockquote(view) : addBlockquote(view);
-        break;
-      case "codeblock":
-        checked ? removeCodeblock(view) : addCodeblock(view);
-        break;
-      case "table":
-        insertTable(view);
-        break;
-    }
-  }, {
-    checked,
-    ...type === "table" && {
-      disabled: !!blankLine
-    },
-    icon
-  });
-});
-var createBlocks = (state, getView) => {
-  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, getView, state.blankLine);
-  return {
-    nodes: [
-      blockGroupAction,
-      ...blockActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "block"
-      },
-      ...blockActions.map(({ id }) => ({
-        source: blockGroupAction.id,
-        target: id
-      }))
-    ]
-  };
-};
-
-// packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
-var formats = {
-  strong: "ph--text-b--regular",
-  emphasis: "ph--text-italic--regular",
-  strikethrough: "ph--text-strikethrough--regular",
-  code: "ph--code--regular",
-  link: "ph--link--regular"
-};
-var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
-  variant: "toggleGroup",
-  selectCardinality: "multiple",
+// src/hooks/useTextEditor.ts
+var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var instanceCount = 0;
+var useTextEditor = (props = {}, deps = []) => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
+  const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState2();
+  const parentRef = useRef2(null);
+  useEffect2(() => {
+    let view2;
+    if (parentRef.current) {
+      log8("create", {
+        id,
+        instanceId,
+        doc: initialValue?.length ?? 0
+      }, {
+        F: __dxlog_file13,
+        L: 75,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      let initialSelection;
+      if (selection?.anchor && initialValue?.length) {
+        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
+          initialSelection = selection;
+        }
+      } else if (moveToEndOfLine && selection === void 0) {
+        const index = initialValue?.indexOf("\n");
+        const anchor = !index || index === -1 ? 0 : index;
+        initialSelection = {
+          anchor
+        };
+      }
+      const state = EditorState3.create({
+        doc: doc ?? initialValue,
+        // selection: initialSelection,
+        extensions: [
+          id && documentId.of(id),
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
+          EditorView26.exceptionSink.of((err) => {
+            log8.catch(err, void 0, {
+              F: __dxlog_file13,
+              L: 97,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          })
+        ].filter(isNotFalsy4)
+      });
+      view2 = new EditorView26({
+        parent: parentRef.current,
+        state,
+        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
+          yMargin: 96
+        }) : void 0,
+        dispatchTransactions: debug ? debugDispatcher : void 0
+      });
+      if (moveToEndOfLine && !initialSelection) {
+        const { to } = view2.state.doc.lineAt(0);
+        if (to) {
+          view2.dispatch({
+            selection: {
+              anchor: to
+            }
+          });
+        }
+      }
+      setView(view2);
+    }
+    return () => {
+      log8("destroy", {
+        id
+      }, {
+        F: __dxlog_file13,
+        L: 134,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      view2?.destroy();
+    };
+  }, deps);
+  useEffect2(() => {
+    if (view) {
+      if (scrollTo || selection) {
+        if (selection && selection.anchor > view.state.doc.length) {
+          log8.warn("invalid selection", {
+            length: view.state.doc.length,
+            scrollTo,
+            selection
+          }, {
+            F: __dxlog_file13,
+            L: 143,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return;
+        }
+        view.dispatch(createEditorStateTransaction({
+          scrollTo,
+          selection
+        }));
+      }
+    }
+  }, [
+    view,
+    scrollTo,
+    selection
+  ]);
+  useEffect2(() => {
+    if (view && autoFocus) {
+      view.focus();
+    }
+  }, [
+    autoFocus,
+    view
+  ]);
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Escape: view?.state.facet(editorInputMode).noTabster
+    }
+  });
+  const handleKeyUp = useCallback3((event) => {
+    const { key, target, currentTarget } = event;
+    if (target === currentTarget) {
+      switch (key) {
+        case "Enter": {
+          view?.focus();
+          break;
+        }
+      }
+    }
+  }, [
+    view
+  ]);
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp
+    }
+  };
+};
+
+// src/components/Editor/Editor.tsx
+var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, text, ...props }, forwardedRef) => {
+  var _effect = _useSignals();
+  try {
+    const { themeMode } = useThemeContext();
+    const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+      id,
+      initialValue: text.content,
+      ...props
+    }), [
+      id,
+      text,
+      themeMode
+    ]);
+    useImperativeHandle(forwardedRef, () => view, [
+      view
+    ]);
+    return /* @__PURE__ */ React3.createElement("div", {
+      ref: parentRef,
+      className: mx6(classNames),
+      ...focusAttributes
+    });
+  } finally {
+    _effect.f();
+  }
+});
+
+// src/components/EditorToolbar/EditorToolbar.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { Rx } from "@effect-rx/rx-react";
+import React4, { memo, useMemo as useMemo5 } from "react";
+import { rxFromSignal } from "@dxos/app-graph";
+import { ElevationProvider } from "@dxos/react-ui";
+import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
+
+// src/components/EditorToolbar/util.ts
+import { useMemo as useMemo4 } from "react";
+import { live } from "@dxos/live-object";
+import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
+var useEditorToolbarState = (initialState = {}) => {
+  return useMemo4(() => live(initialState), []);
+};
+var createEditorAction = (id, invoke, properties) => {
+  const { label = [
+    `${id} label`,
+    {
+      ns: translationKey
+    }
+  ], ...rest } = properties;
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest
+  });
+};
+var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
+  icon,
+  iconOnly: true,
+  ...props
+});
+
+// src/components/EditorToolbar/blocks.ts
+var createBlockGroupAction = (value) => createEditorActionGroup("block", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+var createBlockActions = (value, getView, blankLine) => Object.entries({
+  blockquote: "ph--quotes--regular",
+  codeblock: "ph--code-block--regular",
+  table: "ph--table--regular"
+}).map(([type, icon]) => {
+  const checked = type === value;
+  return createEditorAction(type, () => {
+    const view = getView();
+    if (!view) {
+      return;
+    }
+    switch (type) {
+      case "blockquote":
+        checked ? removeBlockquote(view) : addBlockquote(view);
+        break;
+      case "codeblock":
+        checked ? removeCodeblock(view) : addCodeblock(view);
+        break;
+      case "table":
+        insertTable(view);
+        break;
+    }
+  }, {
+    checked,
+    ...type === "table" && {
+      disabled: !!blankLine
+    },
+    icon
+  });
+});
+var createBlocks = (state, getView) => {
+  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
+  const blockGroupAction = createBlockGroupAction(value);
+  const blockActions = createBlockActions(value, getView, state.blankLine);
+  return {
+    nodes: [
+      blockGroupAction,
+      ...blockActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "block"
+      },
+      ...blockActions.map(({ id }) => ({
+        source: blockGroupAction.id,
+        target: id
+      }))
+    ]
+  };
+};
+
+// src/components/EditorToolbar/formatting.ts
+var formats = {
+  strong: "ph--text-b--regular",
+  emphasis: "ph--text-italic--regular",
+  strikethrough: "ph--text-strikethrough--regular",
+  code: "ph--code--regular",
+  link: "ph--link--regular"
+};
+var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
+  variant: "toggleGroup",
+  selectCardinality: "multiple",
   value: Object.keys(formats).filter((key) => !!formatting[key])
 });
 var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
@@ -6721,7 +6910,7 @@ var createFormatting = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/headings.ts
+// src/components/EditorToolbar/headings.ts
 var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
   variant: "dropdownMenu",
   applyActive: true,
@@ -6776,7 +6965,7 @@ var createHeadings = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/image.ts
+// src/components/EditorToolbar/image.ts
 var createImageUploadAction = (onImageUpload) => createEditorAction("image", onImageUpload, {
   testId: "editor.toolbar.image",
   icon: "ph--image-square--regular"
@@ -6793,7 +6982,7 @@ var createImageUpload = (onImageUpload) => ({
   ]
 });
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/lists.ts
+// src/components/EditorToolbar/lists.ts
 var listStyles = {
   bullet: "ph--list-bullets--regular",
   ordered: "ph--list-numbers--regular",
@@ -6844,7 +7033,7 @@ var createLists = (state, getView) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/search.ts
+// src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
 var createSearchAction = (getView) => createEditorAction("search", () => openSearchPanel(getView()), {
   testId: "editor.toolbar.search",
@@ -6862,7 +7051,7 @@ var createSearch = (getView) => ({
   ]
 });
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/view-mode.ts
+// src/components/EditorToolbar/view-mode.ts
 var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
   variant: "dropdownMenu",
   applyActive: true,
@@ -6908,7 +7097,7 @@ var createViewMode = (state, onViewModeChange) => {
   };
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+// src/components/EditorToolbar/EditorToolbar.tsx
 var createToolbar = ({ getView, state, customActions, ...features }) => {
   return Rx.make((get2) => {
     const nodes = [];
@@ -6963,7 +7152,7 @@ var createToolbar = ({ getView, state, customActions, ...features }) => {
   });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useMemo4(() => createToolbar({
+  const menuCreator = useMemo5(() => createToolbar({
     getView: props.getView,
     state: props.state,
     customActions: props.customActions,
@@ -6989,15 +7178,15 @@ var useEditorToolbarActionGraph = (props) => {
   return useMenuActions(menuCreator);
 };
 var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...props }) => {
-  var _effect = _useSignals();
+  var _effect = _useSignals2();
   try {
     const menuProps = useEditorToolbarActionGraph(props);
-    return /* @__PURE__ */ React3.createElement(ElevationProvider, {
+    return /* @__PURE__ */ React4.createElement(ElevationProvider, {
       elevation: role === "section" ? "positioned" : "base"
-    }, /* @__PURE__ */ React3.createElement(MenuProvider, {
+    }, /* @__PURE__ */ React4.createElement(MenuProvider, {
       ...menuProps,
       attendableId
-    }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
+    }, /* @__PURE__ */ React4.createElement(ToolbarMenu, {
       classNames,
       textBlockWidth: true
     })));
@@ -7006,16 +7195,16 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
   }
 });
 
-// packages/ui/react-ui-editor/src/components/Popover/CommandMenu.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Icon as Icon2, Popover, toLocalizedString, useThemeContext, useTranslation } from "@dxos/react-ui";
+// src/components/Popover/CommandMenu.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React5, { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Icon as Icon2, Popover, toLocalizedString, useThemeContext as useThemeContext2, useTranslation } from "@dxos/react-ui";
 var CommandMenu = ({ groups, currentItem, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const { tx } = useThemeContext();
+    const { tx } = useThemeContext2();
     const groupsWithItems = groups.filter((group) => group.items.length > 0);
-    return /* @__PURE__ */ React4.createElement(Popover.Portal, null, /* @__PURE__ */ React4.createElement(Popover.Content, {
+    return /* @__PURE__ */ React5.createElement(Popover.Portal, null, /* @__PURE__ */ React5.createElement(Popover.Content, {
       align: "start",
       onOpenAutoFocus: (event) => event.preventDefault(),
       classNames: tx("menu.content", "menu--exotic-unfocusable", {
@@ -7023,15 +7212,15 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
       }, [
         "max-h-[300px] overflow-y-auto"
       ])
-    }, /* @__PURE__ */ React4.createElement(Popover.Viewport, {
+    }, /* @__PURE__ */ React5.createElement(Popover.Viewport, {
       classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
-    }, /* @__PURE__ */ React4.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React4.createElement(React4.Fragment, {
+    }, /* @__PURE__ */ React5.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React5.createElement(React5.Fragment, {
       key: group.id
-    }, /* @__PURE__ */ React4.createElement(CommandGroup, {
+    }, /* @__PURE__ */ React5.createElement(CommandGroup, {
       group,
       currentItem,
       onSelect
-    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React4.createElement("div", {
+    }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React5.createElement("div", {
       className: tx("menu.separator", "menu__item", {})
     })))))));
   } finally {
@@ -7039,13 +7228,13 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
   }
 };
 var CommandGroup = ({ group, currentItem, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const { tx } = useThemeContext();
+    const { tx } = useThemeContext2();
     const { t } = useTranslation();
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, group.label && /* @__PURE__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, group.label && /* @__PURE__ */ React5.createElement("div", {
       className: tx("menu.groupLabel", "menu__group__label", {})
-    }, /* @__PURE__ */ React4.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React4.createElement(CommandItem, {
+    }, /* @__PURE__ */ React5.createElement("span", null, toLocalizedString(group.label, t))), group.items.map((item) => /* @__PURE__ */ React5.createElement(CommandItem, {
       key: item.id,
       item,
       current: currentItem === item.id,
@@ -7056,16 +7245,16 @@ var CommandGroup = ({ group, currentItem, onSelect }) => {
   }
 };
 var CommandItem = ({ item, current, onSelect }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals3();
   try {
-    const ref = useRef2(null);
-    const { tx } = useThemeContext();
+    const ref = useRef3(null);
+    const { tx } = useThemeContext2();
     const { t } = useTranslation();
-    const handleSelect = useCallback2(() => onSelect(item), [
+    const handleSelect = useCallback4(() => onSelect(item), [
       item,
       onSelect
     ]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (current && ref.current) {
         ref.current.scrollIntoView({
           behavior: "smooth",
@@ -7075,16 +7264,16 @@ var CommandItem = ({ item, current, onSelect }) => {
     }, [
       current
     ]);
-    return /* @__PURE__ */ React4.createElement("li", {
+    return /* @__PURE__ */ React5.createElement("li", {
       ref,
       className: tx("menu.item", "menu__item--exotic-unfocusable", {}, [
         current && "bg-hoverSurface"
       ]),
       onClick: handleSelect
-    }, item.icon && /* @__PURE__ */ React4.createElement(Icon2, {
+    }, item.icon && /* @__PURE__ */ React5.createElement(Icon2, {
       icon: item.icon,
       size: 5
-    }), /* @__PURE__ */ React4.createElement("span", {
+    }), /* @__PURE__ */ React5.createElement("span", {
       className: "grow truncate"
     }, toLocalizedString(item.label, t)));
   } finally {
@@ -7271,21 +7460,21 @@ var linkSlashCommands = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/components/Popover/RefPopover.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+// src/components/Popover/RefPopover.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
-import React5, { useRef as useRef3, useState as useState2, useEffect as useEffect3, useCallback as useCallback3, forwardRef } from "react";
+import React6, { useRef as useRef4, useState as useState3, useEffect as useEffect4, useCallback as useCallback5, forwardRef as forwardRef2 } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 import { Popover as Popover2 } from "@dxos/react-ui";
 var customEventOptions = {
   capture: true,
   passive: false
 };
-var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, modal, onActivate }, ref) => {
-  var _effect = _useSignals3();
+var RefPopover = /* @__PURE__ */ forwardRef2(({ children, open, onOpenChange, modal, onActivate }, ref) => {
+  var _effect = _useSignals4();
   try {
-    const [rootRef, setRootRef] = useState2(null);
-    useEffect3(() => {
+    const [rootRef, setRootRef] = useState3(null);
+    useEffect4(() => {
       if (!rootRef || !onActivate) {
         return;
       }
@@ -7294,13 +7483,13 @@ var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, mod
       rootRef,
       onActivate
     ]);
-    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+    return /* @__PURE__ */ React6.createElement(Popover2.Root, {
       open,
       onOpenChange,
       modal
-    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+    }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
       virtualRef: ref
-    }), /* @__PURE__ */ React5.createElement("div", {
+    }), /* @__PURE__ */ React6.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -7312,12 +7501,12 @@ var RefPopover = /* @__PURE__ */ forwardRef(({ children, open, onOpenChange, mod
 var REF_POPOVER = "RefPopover";
 var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
 var PreviewProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals4();
   try {
-    const trigger = useRef3(null);
-    const [value, setValue] = useState2({});
-    const [open, setOpen] = useState2(false);
-    const handleDxRefTagActivate = useCallback3((event) => {
+    const trigger = useRef4(null);
+    const [value, setValue] = useState3({});
+    const [open, setOpen] = useState3(false);
+    const handleDxRefTagActivate = useCallback5((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7340,11 +7529,11 @@ var PreviewProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    return /* @__PURE__ */ React5.createElement(RefPopoverContextProvider, {
+    return /* @__PURE__ */ React6.createElement(RefPopoverContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React5.createElement(RefPopover, {
+    }, /* @__PURE__ */ React6.createElement(RefPopover, {
       ref: trigger,
       open,
       onOpenChange: setOpen,
@@ -7355,10 +7544,10 @@ var PreviewProvider = ({ children, onLookup }) => {
   }
 };
 
-// packages/ui/react-ui-editor/src/components/Popover/RefDropdownMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+// src/components/Popover/RefDropdownMenu.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React6, { useRef as useRef4, useState as useState3, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import React7, { useRef as useRef5, useState as useState4, useEffect as useEffect5, useCallback as useCallback6 } from "react";
 import { addEventListener as addEventListener3 } from "@dxos/async";
 import { DropdownMenu } from "@dxos/react-ui";
 var customEventOptions2 = {
@@ -7368,13 +7557,13 @@ var customEventOptions2 = {
 var REF_DROPDOWN_MENU = "RefDropdownMenu";
 var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2(REF_DROPDOWN_MENU, {});
 var RefDropdownMenuProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
-    const trigger = useRef4(null);
-    const [value, setValue] = useState3({});
-    const [rootRef, setRootRef] = useState3(null);
-    const [open, setOpen] = useState3(false);
-    const handleDxRefTagActivate = useCallback4((event) => {
+    const trigger = useRef5(null);
+    const [value, setValue] = useState4({});
+    const [rootRef, setRootRef] = useState4(null);
+    const [open, setOpen] = useState4(false);
+    const handleDxRefTagActivate = useCallback6((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7397,7 +7586,7 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       onLookup
     ]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (!rootRef) {
         return;
       }
@@ -7405,16 +7594,16 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     }, [
       rootRef
     ]);
-    return /* @__PURE__ */ React6.createElement(RefDropdownMenuContextProvider, {
+    return /* @__PURE__ */ React7.createElement(RefDropdownMenuContextProvider, {
       pending: value.pending,
       link: value.link,
       target: value.target
-    }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
       open,
       onOpenChange: setOpen
-    }, /* @__PURE__ */ React6.createElement(DropdownMenu.VirtualTrigger, {
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu.VirtualTrigger, {
       virtualRef: trigger
-    }), /* @__PURE__ */ React6.createElement("div", {
+    }), /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: "contents",
       ref: setRootRef
@@ -7426,162 +7615,10 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
 var RefDropdownMenu = {
   Provider: RefDropdownMenuProvider
 };
-
-// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
-import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView26 } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
-import { log as log8 } from "@dxos/log";
-import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var instanceCount = 0;
-var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo5(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState4();
-  const parentRef = useRef5(null);
-  useEffect5(() => {
-    let view2;
-    if (parentRef.current) {
-      log8("create", {
-        id,
-        instanceId,
-        doc: initialValue?.length ?? 0
-      }, {
-        F: __dxlog_file13,
-        L: 75,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      let initialSelection;
-      if (selection?.anchor && initialValue?.length) {
-        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
-          initialSelection = selection;
-        }
-      } else if (moveToEndOfLine && selection === void 0) {
-        const index = initialValue?.indexOf("\n");
-        const anchor = !index || index === -1 ? 0 : index;
-        initialSelection = {
-          anchor
-        };
-      }
-      const state = EditorState3.create({
-        doc: doc ?? initialValue,
-        // selection: initialSelection,
-        extensions: [
-          id && documentId.of(id),
-          extensions,
-          // NOTE: This doesn't catch errors in keymap functions.
-          EditorView26.exceptionSink.of((err) => {
-            log8.catch(err, void 0, {
-              F: __dxlog_file13,
-              L: 97,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-          })
-        ].filter(isNotFalsy4)
-      });
-      view2 = new EditorView26({
-        parent: parentRef.current,
-        state,
-        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
-          yMargin: 96
-        }) : void 0,
-        dispatchTransactions: debug ? debugDispatcher : void 0
-      });
-      if (moveToEndOfLine && !initialSelection) {
-        const { to } = view2.state.doc.lineAt(0);
-        if (to) {
-          view2.dispatch({
-            selection: {
-              anchor: to
-            }
-          });
-        }
-      }
-      setView(view2);
-    }
-    return () => {
-      log8("destroy", {
-        id
-      }, {
-        F: __dxlog_file13,
-        L: 134,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      view2?.destroy();
-    };
-  }, deps);
-  useEffect5(() => {
-    if (view) {
-      if (scrollTo || selection) {
-        if (selection && selection.anchor > view.state.doc.length) {
-          log8.warn("invalid selection", {
-            length: view.state.doc.length,
-            scrollTo,
-            selection
-          }, {
-            F: __dxlog_file13,
-            L: 143,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          return;
-        }
-        view.dispatch(createEditorStateTransaction({
-          scrollTo,
-          selection
-        }));
-      }
-    }
-  }, [
-    view,
-    scrollTo,
-    selection
-  ]);
-  useEffect5(() => {
-    if (view && autoFocus) {
-      view.focus();
-    }
-  }, [
-    autoFocus,
-    view
-  ]);
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: "limited",
-    ignoreDefaultKeydown: {
-      Escape: view?.state.facet(editorInputMode).noTabster
-    }
-  });
-  const handleKeyUp = useCallback5((event) => {
-    const { key, target, currentTarget } = event;
-    if (target === currentTarget) {
-      switch (key) {
-        case "Enter": {
-          view?.focus();
-          break;
-        }
-      }
-    }
-  }, [
-    view
-  ]);
-  return {
-    parentRef,
-    view,
-    focusAttributes: {
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      onKeyUp: handleKeyUp
-    }
-  };
-};
 export {
   CommandMenu,
   Cursor,
+  Editor,
   EditorInputMode,
   EditorInputModes,
   EditorState4 as EditorState,
@@ -7642,6 +7679,7 @@ export {
   debugTree,
   decorateMarkdown,
   defaultOptions,
+  defaultThemeSlots,
   deleteItem,
   documentId,
   dropFile,
@@ -7659,6 +7697,7 @@ export {
   folding,
   formattingEquals,
   formattingKeymap,
+  fullWidth,
   getFormatting,
   getItem,
   getLinkRef,
@@ -7666,6 +7705,7 @@ export {
   getNextItem,
   getPreviousItem,
   getRange,
+  grow,
   hashtag,
   image,
   indentItemLess,
@@ -7723,7 +7763,7 @@ export {
   toggleStrong,
   toggleStyle,
   toggleTask,
-  translations_default as translations,
+  translations,
   traverse,
   treeFacet,
   typeahead,