@dxos/react-ui-editor 0.3.11-main.dafb7f2 → 0.3.11-main.e0dc42b

package/dist/lib/browser/index.mjs

@@ -11,40 +11,41 @@ import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useRef } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
       // Don't start unless key press.
-      activateOnTyping: false,
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
+      activateOnTyping: false
+    }),
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context) => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-      ]
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase())
+        };
+      }
     })
   ];
 };
@@ -504,23 +505,21 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
-  constructor(name, color) {
+  constructor(_name, _color) {
     super();
-    this.name = name;
-    this.color = color;
-    this.name = name;
-    this.color = color;
+    this._name = _name;
+    this._color = _color;
   }
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-ySelectionCaret";
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
     const dot = document.createElement("div");
     dot.className = "cm-ySelectionCaretDot";
     const info = document.createElement("div");
     info.className = "cm-ySelectionInfo";
-    info.innerText = this.name;
+    info.innerText = this._name;
     span.appendChild(document.createTextNode("\u2060"));
     span.appendChild(dot);
     span.appendChild(document.createTextNode("\u2060"));
@@ -528,21 +527,22 @@ var RemoteCaretWidget = class extends WidgetType {
     span.appendChild(document.createTextNode("\u2060"));
     return span;
   }
-  eq(widget) {
-    return widget.color === this.color;
-  }
-  compare(widget) {
-    return widget.color === this.color;
-  }
   updateDOM() {
     return false;
   }
+  eq(widget) {
+    return widget._color === this._color;
+  }
   get estimatedHeight() {
     return -1;
   }
   ignoreEvent() {
     return true;
   }
+  // TODO(burdon): Not used?
+  compare(widget) {
+    return widget._color === this._color;
+  }
 };
 var styles = EditorView.baseTheme({
   ".cm-ySelection": {},
@@ -930,7 +930,6 @@ var random = (min, max) => {
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 import { ViewPlugin as ViewPlugin3, EditorView as EditorView4, Decoration as Decoration2 } from "@codemirror/view";
-import get2 from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1014,20 +1013,22 @@ 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 { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
+var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles2 = EditorView4.baseTheme({
   "& .cm-codeblock": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: getToken("fontFamily.mono", []).join(",")
   },
   '&light [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.50")
+    background: getToken("extend.colors.neutral.50")
   },
   '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: get2(tokens, "extend.colors.neutral.850")
+    background: getToken("extend.colors.neutral.850")
   },
   '& [aria-readonly="true"] .cm-codeblock': {
     display: "block",
@@ -1055,7 +1056,7 @@ var getLineRange = (lines, from, to) => {
 var code2 = () => {
   const getDecorations = (view) => {
     const decorations = [];
-    if (view.state.readOnly) {
+    if (!view.hasFocus || view.state.readOnly) {
       const text = view.state.doc.sliceString(0);
       const matches = text.matchAll(CODE_REGEX);
       const blocks = view.viewportLineBlocks;
@@ -1074,10 +1075,15 @@ var code2 = () => {
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
+        this.hasFocus = false;
         this.decorations = getDecorations(view);
       }
       update(update2) {
-        if (update2.docChanged || update2.viewportChanged) {
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
           this.decorations = getDecorations(update2.view);
         }
       }
@@ -1091,7 +1097,6 @@ var code2 = () => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView5, MatchDecorator, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-import get3 from "lodash.get";
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
@@ -1109,10 +1114,10 @@ var styles3 = EditorView5.baseTheme({
     backgroundColor: "orange"
   },
   "& .cm-comment": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.50")
+    backgroundColor: getToken("extend.colors.yellow.50")
   },
   "& .cm-comment-active": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+    backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
 var marks = {
@@ -1196,14 +1201,13 @@ var highlightDecorations = EditorView5.decorations.compute([
   return Decoration3.set(decorations);
 });
 var BookmarkWidget = class extends WidgetType2 {
-  constructor(_anchor, _id, _handleClick) {
+  constructor(_id, _handleClick) {
     super();
-    this._anchor = _anchor;
     this._id = _id;
     this._handleClick = _handleClick;
     invariant2(this._id, void 0, {
       F: __dxlog_file3,
-      L: 169,
+      L: 164,
       S: this,
       A: [
         "this._id",
@@ -1212,7 +1216,7 @@ var BookmarkWidget = class extends WidgetType2 {
     });
   }
   eq(other) {
-    return this._anchor === other._anchor && this._id === other._id;
+    return this._id === other._id;
   }
   toDOM() {
     const span = document.createElement("span");
@@ -1225,12 +1229,13 @@ var BookmarkWidget = class extends WidgetType2 {
   }
 };
 var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   const createCommentThread = (view) => {
     const cursorConverter3 = view.state.facet(CursorConverter);
     invariant2(options.onCreate, void 0, {
       F: __dxlog_file3,
-      L: 225,
+      L: 222,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1273,17 +1278,17 @@ var comments = (options = {}) => {
     }
     return false;
   };
-  const bookmarksViewPlugin = ViewPlugin4.fromClass(class BookmarkViewPlugin {
+  const bookmarksViewPlugin = options.footnote ? ViewPlugin4.fromClass(class BookmarkViewPlugin {
     static {
       // Match markdown footnotes (option).
       // https://www.markdownguide.org/extended-syntax/#footnotes
       this.bookmarkMatcher = new MatchDecorator({
         regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
+        decoration: (match) => {
           const id = match[1];
           return Decoration3.replace({
             id,
-            widget: new BookmarkWidget(pos, id)
+            widget: new BookmarkWidget(id)
           });
         }
       });
@@ -1299,7 +1304,7 @@ var comments = (options = {}) => {
     provide: (plugin) => EditorView5.atomicRanges.of((view) => {
       return view.plugin(plugin)?.bookmarks || Decoration3.none;
     })
-  });
+  }) : [];
   return [
     bookmarksViewPlugin,
     commentsStateField,
@@ -1310,7 +1315,7 @@ var comments = (options = {}) => {
     //
     options.onCreate ? keymap3.of([
       {
-        key: options?.key ?? "meta-'",
+        key: shortcut,
         run: callbackWrapper(createCommentThread)
       }
     ]) : [],
@@ -1327,7 +1332,7 @@ var comments = (options = {}) => {
           above: true,
           create: () => {
             const el = document.createElement("div");
-            options.onHover?.(el);
+            options.onHover?.(el, shortcut);
             return {
               dom: el,
               offset: {
@@ -1361,7 +1366,7 @@ var comments = (options = {}) => {
                   thread: range.id
                 }, {
                   F: __dxlog_file3,
-                  L: 359,
+                  L: 355,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1429,7 +1434,7 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
   const parts = cursor.split(":");
   const from = cursorConverter3.fromCursor(parts[0]);
   const to = cursorConverter3.fromCursor(parts[1]);
-  return from && to ? {
+  return from !== void 0 && to !== void 0 ? {
     from,
     to
   } : void 0;
@@ -1437,12 +1442,11 @@ var getRangeFromCursor = (cursorConverter3, cursor) => {
 
 // packages/ui/react-ui-editor/src/extensions/hr.ts
 import { Decoration as Decoration4, EditorView as EditorView6, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
-import get4 from "lodash.get";
 var styles4 = EditorView6.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
+    borderBottom: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
 var HorizontalRuleWidget = class extends WidgetType3 {
@@ -1672,7 +1676,7 @@ var buildDecorations2 = (view, options) => {
           if (!url) {
             return false;
           }
-          if (state.readOnly || cursor < node.from || cursor > node.to) {
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
             builder.add(node.from, node.to, Decoration6.replace({
               widget: new LinkText(text, options.link ? url : void 0)
             }));
@@ -1709,7 +1713,7 @@ var listener = ({ onFocus, onChange }) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
@@ -1718,11 +1722,10 @@ import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/the
 import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get5 from "lodash.get";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -1906,9 +1909,9 @@ var markdownHighlightStyle = (readonly) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage,
+    scope: markdownLanguage2,
     all: {
-      fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+      fontFamily: getToken("fontFamily.body", []).join(",")
     }
   });
 };
@@ -1938,7 +1941,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       // NOTE: This extends the parser; it doesn't affect rendering.
       // https://github.github.com/gfm
       // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
+      base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Parser extensions.
@@ -1989,11 +1992,6 @@ var mention = ({ onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/mermaid.ts
-var mermaid = () => {
-  return [];
-};
-
 // packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField4 } from "@codemirror/state";
@@ -2047,7 +2045,6 @@ var update = (state, options) => {
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
     hide && builder.add(table2.from, table2.to, Decoration7.replace({
-      block: true,
       widget: new TableWidget(table2)
     }));
     builder.add(table2.from, table2.to, Decoration7.mark({
@@ -2088,6 +2085,9 @@ var TableWidget = class extends WidgetType6 {
     }
     return table2;
   }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
 };
 
 // packages/ui/react-ui-editor/src/extensions/tasklist.ts
@@ -2253,7 +2253,7 @@ var yjs = (content, awareness2) => [
 ];
 
 // packages/ui/react-ui-editor/src/themes/default.ts
-import get6 from "lodash.get";
+import get3 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -2284,7 +2284,7 @@ var defaultTheme = {
   },
   ".cm-scroller": {
     overflow: "visible",
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-content": {
     padding: 0,
@@ -2292,11 +2292,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.900", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get6(tokens, "extend.colors.neutral.100", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -2324,25 +2324,25 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.100")
+    background: get3(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.200")
+    background: get3(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.700")
+    background: get3(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get6(tokens, "extend.colors.primary.600")
+    background: get3(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.100")
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get6(tokens, "extend.colors.yellow.700")
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
   },
   //
   // collaboration
@@ -2375,12 +2375,12 @@ var defaultTheme = {
   // link
   //
   ".cm-link": {
-    color: get6(tokens, "extend.colors.primary.500"),
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -2402,7 +2402,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none"
@@ -2418,15 +2418,15 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get6(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   ".cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get6(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get6(tokens, "extend.colors.neutral.500")
+    color: get3(tokens, "extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -2447,8 +2447,8 @@ var defaultTheme = {
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
   //
-  ...Object.keys(get6(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get6(tokens, [
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -2483,23 +2483,23 @@ var defaultTheme = {
   * </div
   */
   ".cm-panels": {
-    border: `1px solid ${get6(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
   },
   ".cm-panel": {
-    background: get6(tokens, "extend.colors.neutral.50"),
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get6(tokens, "fontFamily.body", []).join(","),
-    background: get6(tokens, "extend.colors.neutral.100"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get6(tokens, "extend.colors.neutral.200")
+      background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get6(tokens, "extend.colors.neutral.300"),
+      background: get3(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
@@ -2509,24 +2509,24 @@ var defaultTheme = {
 };
 var textTheme = {
   ".cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var markdownTheme = {
   // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   ".cm-scroller": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   ".cm-placeholder": {
-    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
@@ -2535,21 +2535,23 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, selection, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const [root, setRoot] = useState(null);
-  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
+  const { themeMode } = useThemeContext();
+  const rootRef = useRef(null);
+  const [view, setView] = useState(null);
+  useImperativeHandle(forwardedRef, () => view, [
     view
-  }), [
+  ]);
+  useEffect(() => {
+    if (view && focus) {
+      view.focus();
+    }
+  }, [
     view,
-    state,
-    root
+    focus
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2586,11 +2588,12 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
     comments2
   ]);
   useEffect(() => {
-    if (!root) {
+    if (!model || !rootRef.current) {
       return;
     }
-    const state2 = EditorState2.create({
+    const state = EditorState2.create({
       doc: model.text(),
+      selection,
       extensions: [
         readonly && EditorState2.readOnly.of(readonly),
         // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
@@ -2607,19 +2610,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
       ].filter(Boolean)
     });
     view?.destroy();
-    setEditor({
-      state: state2,
-      view: new EditorView12({
-        state: state2,
-        parent: root
-      })
+    const newView = new EditorView12({
+      parent: rootRef.current,
+      state
     });
+    setView(newView);
     return () => {
-      view?.destroy();
-      setEditor(void 0);
+      newView?.destroy();
+      setView(null);
     };
   }, [
-    root,
+    rootRef,
     model,
     readonly,
     editorMode,
@@ -2628,12 +2629,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   const handleKeyUp = useCallback((event) => {
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
-      case "Enter": {
-        view?.contentDOM.focus();
-        break;
-      }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
         break;
       }
     }
@@ -2643,16 +2640,16 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: co
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
-    ref: setRoot,
+    ref: rootRef,
     tabIndex: 0,
     ...slots?.root,
     ...editorMode !== "vim" && tabsterDOMAttribute,
     onKeyUp: handleKeyUp
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2660,17 +2657,17 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots:
       basicBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: updatedSlots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots,
+    slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2678,11 +2675,11 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
       markdownBundle({
         readonly,
         themeMode,
-        placeholder: slots?.editor?.placeholder
+        placeholder: updatedSlots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots,
+    slots: updatedSlots,
     ...props
   });
 });
@@ -2705,7 +2702,7 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/hooks/automerge.ts
-import get7 from "lodash.get";
+import get4 from "lodash.get";
 import { getRawDoc } from "@dxos/echo-schema";
 import { isNotNullOrUndefined } from "@dxos/util";
 
@@ -2988,7 +2985,7 @@ var modelState = StateField5.define({
 });
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2(() => createModel(props));
+  const [model, setModel] = useState2();
   useEffect2(() => setModel(createModel(props)), [
     identity,
     space,
@@ -3026,7 +3023,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
   const model = {
     id: obj.id,
     content: doc,
-    text: () => get7(doc.handle.docSync(), doc.path),
+    text: () => get4(doc.handle.docSync(), doc.path),
     // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
     extension: [
       modelState.init(() => model),
@@ -3047,6 +3044,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
 export {
   AwarenessProvider,
   BaseTextEditor,
+  CursorConverter,
   Doc,
   EditorModes,
   MarkdownEditor,
@@ -3062,16 +3060,19 @@ export {
   awareness,
   basicBundle,
   blast,
+  callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
   createAutomergeModel,
   createYjsModel,
+  cursorConverter,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  getToken,
   hr,
   image,
   link,
@@ -3082,7 +3083,6 @@ export {
   markdownTagsExtensions,
   markdownTheme,
   mention,
-  mermaid,
   modelState,
   setCommentRange,
   setFocus,