@dxos/react-ui-editor 0.4.6-main.aeca3cc → 0.4.6-main.b69a2b5

package/dist/lib/browser/index.mjs

@@ -32,7 +32,7 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView14, scrollPastEnd } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
@@ -189,7 +189,7 @@ import get from "lodash.get";
 import { next as A } from "@dxos/automerge/automerge";
 import { log } from "@dxos/log";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
-var cursorConverter = (handle, path) => ({
+var cursorConverter = ({ handle, path }) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
     const doc = handle.docSync();
@@ -205,7 +205,7 @@ var cursorConverter = (handle, path) => ({
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 31,
+        L: 30,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -233,7 +233,7 @@ var cursorConverter = (handle, path) => ({
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 59,
+        L: 58,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -244,6 +244,7 @@ var cursorConverter = (handle, path) => ({
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
+import get2 from "lodash.get";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
 var updateHeadsEffect = StateEffect.define({});
@@ -441,16 +442,16 @@ var Syncer = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var automerge = ({ handle, path }) => {
+var automerge = (accessor) => {
   const syncState = StateField2.define({
     create: () => ({
-      path: path.slice(),
-      lastHeads: A4.getHeads(handle.docSync()),
+      path: accessor.path.slice(),
+      lastHeads: A4.getHeads(accessor.handle.docSync()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
       const result = {
-        path: path.slice(),
+        path: accessor.path.slice(),
         lastHeads: value.lastHeads,
         unreconciledTransactions: value.unreconciledTransactions.slice()
       };
@@ -471,18 +472,18 @@ var automerge = ({ handle, path }) => {
       return result;
     }
   });
-  const syncer = new Syncer(handle, syncState);
+  const syncer = new Syncer(accessor.handle, syncState);
   return [
-    Cursor.converter.of(cursorConverter(handle, path)),
+    Cursor.converter.of(cursorConverter(accessor)),
     syncState,
     // Reconcile external updates.
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        handle.addListener("change", this._handleChange.bind(this));
+        accessor.handle.addListener("change", this._handleChange.bind(this));
       }
       destroy() {
-        handle.removeListener("change", this._handleChange.bind(this));
+        accessor.handle.removeListener("change", this._handleChange.bind(this));
       }
       _handleChange() {
         syncer.reconcile(this._view, false);
@@ -1133,16 +1134,15 @@ var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
-import get2 from "lodash.get";
+import get3 from "lodash.get";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
+var getToken = (path, defaultValue = void 0) => get3(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorFillLayoutRoot = "bs-full overflow-hidden grid";
-var editorFillLayoutEditor = "bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto";
-var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
+var editorFillLayoutRoot = "bs-full relative";
+var editorFillLayoutEditor = "!absolute inset-0";
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log as log2 } from "@dxos/log";
@@ -1900,18 +1900,6 @@ import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
 import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var FencedCodeBoundary = class extends WidgetType2 {
-  constructor(_className) {
-    super();
-    this._className = _className;
-  }
-  toDOM() {
-    const el = document.createElement("span");
-    el.innerHTML = " ";
-    el.className = mx2("cm-code cm-codeblock", this._className);
-    return el;
-  }
-};
 var HorizontalRuleWidget = class extends WidgetType2 {
   toDOM() {
     const el = document.createElement("span");
@@ -1972,11 +1960,14 @@ var CheckboxWidget = class extends WidgetType2 {
   }
 };
 var hide = Decoration4.replace({});
-var fencedCodeTop = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-first")
+var fencedCodeLine = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line")
 });
-var fencedCodeBottom = Decoration4.replace({
-  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-last")
+var fencedCodeLineFirst = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+});
+var fencedCodeLineLast = Decoration4.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var horizontalRule = Decoration4.replace({
   widget: new HorizontalRuleWidget()
@@ -2017,12 +2008,9 @@ var buildDecorations = (view, options) => {
             }
             const first = block.from <= node.from;
             const last = block.to >= node.to;
+            builder.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
             if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(block.from, block.from, Decoration4.line({
-                class: mx2("cm-code cm-codeblock-line", first && "cm-codeblock-first", last && "cm-codeblock-last")
-              }));
+              builder.add(block.from, block.to, hide);
             }
           }
           return false;
@@ -2113,16 +2101,12 @@ var formattingStyles = EditorView10.baseTheme({
     }
   },
   "& .cm-codeblock-first": {
-    "&::after": {
-      borderTopLeftRadius: ".5rem",
-      borderTopRightRadius: ".5rem"
-    }
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
   },
   "& .cm-codeblock-last": {
-    "&::after": {
-      borderBottomLeftRadius: ".5rem",
-      borderBottomRightRadius: ".5rem"
-    }
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
   },
   "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
     background: getToken("extend.semanticColors.input.light"),
@@ -2132,18 +2116,6 @@ var formattingStyles = EditorView10.baseTheme({
     background: getToken("extend.semanticColors.input.dark"),
     mixBlendMode: "lighten"
   },
-  "&light .cm-codeblock-first, &light .cm-codeblock-last": {
-    mixBlendMode: "darken",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.light")
-    }
-  },
-  "&dark .cm-codeblock-first, &dark .cm-codeblock-last": {
-    mixBlendMode: "lighten",
-    "&::after": {
-      background: getToken("extend.semanticColors.input.dark")
-    }
-  },
   "& .cm-hr": {
     display: "inline-block",
     width: "100%",
@@ -3281,6 +3253,14 @@ var image = (options = {}) => {
     provide: (field) => EditorView12.decorations.from(field)
   });
 };
+var preloaded = /* @__PURE__ */ new Set();
+var preloadImage = (url) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement("img");
+    img.src = url;
+    preloaded.add(url);
+  }
+};
 var buildDecorations2 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
@@ -3291,6 +3271,7 @@ var buildDecorations2 = (from, to, state) => {
         if (urlNode) {
           const hide2 = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          preloadImage(url);
           decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)
@@ -3573,7 +3554,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get3 from "lodash.get";
+import get4 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -3602,22 +3583,26 @@ var defaultTheme = {
   "&.cm-focused": {
     outline: "none"
   },
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   ".cm-scroller": {
-    // overflow: 'visible',
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(","),
-    lineHeight: 1.4
+    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
+    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
+    overflowY: "auto",
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(","),
+    lineHeight: 1.5
   },
   ".cm-content": {
-    padding: 0,
+    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
+    // padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    color: get4(tokens, "extend.semanticColors.base.fg.light", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    color: get4(tokens, "extend.semanticColors.base.fg.dark", "white"),
     caretColor: "white"
   },
   //
@@ -3630,10 +3615,10 @@ var defaultTheme = {
     borderLeft: "2px solid white"
   },
   "&light .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+    color: get4(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
   },
   "&dark .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+    color: get4(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -3645,39 +3630,45 @@ var defaultTheme = {
     background: "transparent"
   },
   //
+  // gutter
+  //
+  ".cm-gutterElement": {
+    width: "48px"
+  },
+  //
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.100")
+    background: get4(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.200")
+    background: get4(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.700")
+    background: get4(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.600")
+    background: get4(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: get4(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.700")
+    backgroundColor: get4(tokens, "extend.colors.yellow.700")
   },
   //
   // link
   //
   ".cm-link": {
-    color: get3(tokens, "extend.colors.primary.500"),
+    color: get4(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -3699,7 +3690,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -3708,15 +3699,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get4(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get3(tokens, "extend.colors.neutral.500")
+    color: get4(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -3763,23 +3754,23 @@ var defaultTheme = {
   * </div
   */
   ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
   },
   ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    background: get4(tokens, "extend.colors.neutral.50"),
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
+    fontFamily: get4(tokens, "fontFamily.body", []).join(","),
+    background: get4(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get3(tokens, "extend.colors.neutral.200")
+      background: get4(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
+      background: get4(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
@@ -3789,32 +3780,32 @@ var defaultTheme = {
 };
 var textTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   ".cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get4(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView14.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -3825,15 +3816,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     view
   ]);
   useEffect2(() => {
-    if (autoFocus && !view?.hasFocus) {
-      if (view?.state.selection.main?.from === 0) {
-        const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({
-          selection: {
-            anchor: to
-          }
-        });
-      }
+    if (autoFocus) {
       view?.focus();
     }
   }, [
@@ -3852,22 +3835,24 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView14.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
-            L: 113,
+            L: 122,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
-        // TODO(burdon): Make configurable.
+        // TODO(burdon): Make base theme configurable.
         EditorView14.baseTheme(defaultTheme),
-        EditorView14.theme(theme ?? {}),
+        theme && EditorView14.theme(theme),
         EditorView14.darkTheme.of(themeMode === "dark"),
-        EditorView14.editorAttributes.of({
-          class: slots.editor?.className ?? ""
+        slots.editor?.className && EditorView14.editorAttributes.of({
+          class: slots.editor.className
         }),
-        EditorView14.contentAttributes.of({
-          class: slots.content?.className ?? ""
+        slots.content?.className && EditorView14.contentAttributes.of({
+          class: slots.content.className
         }),
+        // NOTE: Assumes default line height.
+        _scrollPastEnd && scrollPastEnd(),
         // Focus.
         EditorView14.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
@@ -3886,26 +3871,33 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const newView = new EditorView14({
+    const view2 = new EditorView14({
       state,
       parent: rootRef.current,
       scrollTo,
       // NOTE: Uncomment to debug/monitor all transactions.
       // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-      dispatchTransactions: (trs, view2) => {
+      dispatchTransactions: (trs, view3) => {
         if (debug) {
           logChanges(trs);
         }
-        view2.update(trs);
+        view3.update(trs);
       }
     });
-    view?.destroy();
-    setView(newView);
+    setView(view2);
+    if (moveToEndOfLine) {
+      const { to } = view2.state.doc.lineAt(0);
+      view2?.dispatch({
+        selection: {
+          anchor: to
+        }
+      });
+    }
     if (state.facet(editorMode).noTabster) {
       rootRef.current.removeAttribute("data-tabster");
     }
     return () => {
-      newView?.destroy();
+      view2?.destroy();
       setView(null);
     };
   }, [
@@ -3989,7 +3981,7 @@ var defaultSlots = {
     className: focusRing
   },
   editor: {
-    className: "min-bs-full"
+    className: "bs-full"
   }
 };
 var defaultTextSlots = {
@@ -4002,7 +3994,7 @@ var defaultMarkdownSlots = {
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
 import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2 from "react";
+import React2, { useRef as useRef2, useState as useState3 } from "react";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4060,9 +4052,29 @@ 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"];
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Select.Root, {
+  const suppressNextTooltip = useRef2(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+    open: tooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (nextOpen && suppressNextTooltip.current) {
+        suppressNextTooltip.current = false;
+        return setTooltipOpen(false);
+      } else {
+        return setTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
     disabled: value === null,
     value: value ?? "0",
+    open: selectOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setSelectOpen(nextOpen);
+    },
     onValueChange: (value2) => onAction?.({
       type: "heading",
       data: parseInt(value2)
@@ -4406,10 +4418,10 @@ var useActionHandler = (view) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
 var useEditorView = (id) => {
-  const editorRef = useRef2(null);
-  const [prev, setPrev] = useState3([
+  const editorRef = useRef3(null);
+  const [prev, setPrev] = useState4([
     null,
     ""
   ]);
@@ -4428,14 +4440,14 @@ var useEditorView = (id) => {
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
-var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
-  const onUpdate = useRef3();
-  const [view, setView] = useState4();
-  const parentRef = useRef3(null);
+var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}, deps) => {
+  const onUpdate = useRef4();
+  const [view, setView] = useState5();
+  const parentRef = useRef4(null);
   useEffect3(() => {
     let view2;
     if (parentRef.current) {
@@ -4447,7 +4459,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           EditorView15.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 60,
+              L: 57,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4476,10 +4488,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
     return () => {
       view2?.destroy();
     };
-  }, [
-    parentRef,
-    extensions
-  ]);
+  }, deps);
   useEffect3(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
@@ -4535,16 +4544,35 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get4 from "lodash.get";
-import { useState as useState5, useMemo as useMemo3 } from "react";
+import get5 from "lodash.get";
+import { useState as useState6, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var useTextExtensions = ({ id, text, space, identity }) => {
+  const extensions = [
+    automerge(text)
+  ];
+  if (space && identity) {
+    const awarenessProvider2 = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorColor.color,
+        lightColor: cursorColor.light
+      }
+    });
+    extensions.push(awareness(awarenessProvider2));
+  }
+  return extensions;
+};
 var useTextModel = (props) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
-  const [content, setContent] = useState5(defaultContent ?? "");
+  const [content, setContent] = useState6(defaultContent ?? "");
   return {
     id,
     content,
@@ -4558,7 +4586,7 @@ var createModel = ({ space, identity, text }) => {
   }
   invariant3(isAutomergeObject(text), void 0, {
     F: __dxlog_file7,
-    L: 54,
+    L: 83,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -4592,7 +4620,7 @@ var createModel = ({ space, identity, text }) => {
   const model = {
     id: obj.id,
     content: doc,
-    text: () => get4(doc.handle.docSync(), doc.path),
+    text: () => get5(doc.handle.docSync(), doc.path),
     extension: extensions,
     peer: identity ? {
       id: identity.identityKey.toHex(),
@@ -4646,7 +4674,6 @@ export {
   defaultTheme,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
-  editorHalfViewportOverscrollContent,
   editorMode,
   editorWithToolbarLayout,
   focusComment,
@@ -4695,6 +4722,7 @@ export {
   useFormattingState,
   useInMemoryTextModel,
   useTextEditor,
+  useTextExtensions,
   useTextModel,
   useToolbarContext
 };