@dxos/react-ui-editor 0.3.11-main.3f845e1 → 0.3.11-main.5a4849d

package/dist/lib/browser/index.mjs

@@ -5,7 +5,18 @@ import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/autocomplete.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+import { EditorState as EditorState2 } from "@codemirror/state";
+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 as useEffect2, useImperativeHandle, useState as useState2 } 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 { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
@@ -38,7 +49,7 @@ var autocomplete = ({ onSearch }) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic.ts
+// packages/ui/react-ui-editor/src/extensions/basic.ts
 import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
@@ -55,11 +66,11 @@ var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts
+// packages/ui/react-ui-editor/src/extensions/blast.ts
 import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -365,7 +376,7 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+// packages/ui/react-ui-editor/src/extensions/code.ts
 import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
 import get from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -416,7 +427,7 @@ var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-pri
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+// packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles = EditorView3.baseTheme({
   "& .cm-codeblock": {
@@ -487,18 +498,19 @@ var code2 = () => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
+// packages/ui/react-ui-editor/src/extensions/comments.ts
 import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
+import get3 from "lodash.get";
 import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/util.ts
+// packages/ui/react-ui-editor/src/extensions/util.ts
 import { log } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/util.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
@@ -743,15 +755,15 @@ var automergePlugin = (handle, path) => {
   });
   const semaphore = new PatchSemaphore(stateField);
   const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
-    constructor(view) {
+    constructor(_view) {
+      this._view = _view;
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
       };
-      this._view = view;
       handle.addListener("change", this._handleChange);
     }
     update(update4) {
-      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
+      if (update4.transactions.length > 0 && update4.transactions.some((tr) => !isReconcileTx(tr))) {
         queueMicrotask(() => {
           this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
@@ -966,13 +978,22 @@ var createYjsModel = ({ identity, space, text }) => {
       ].join(":");
     },
     getRangeFromCursor: (cursor) => {
+      invariant2(text.doc, void 0, {
+        F: __dxlog_file4,
+        L: 113,
+        S: void 0,
+        A: [
+          "text.doc",
+          ""
+        ]
+      });
       const parts = cursor.split(":");
       const from = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[0])), text.doc);
       const to = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[1])), text.doc);
-      return {
+      return from && to ? {
         from: from.index,
         to: to.index
-      };
+      } : void 0;
     },
     extension: [
       yCollab(text.content, provider?.awareness),
@@ -1008,8 +1029,8 @@ var createAutomergeModel = ({ identity, text }) => {
   return model;
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var styles2 = EditorView4.baseTheme({
   "& .cm-bookmark": {
     cursor: "pointer",
@@ -1021,10 +1042,10 @@ var styles2 = EditorView4.baseTheme({
     backgroundColor: "orange"
   },
   "& .cm-comment": {
-    backgroundColor: "yellow"
+    backgroundColor: get3(tokens, "extend.colors.yellow.50")
   },
   "& .cm-comment-active": {
-    backgroundColor: "orange"
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   }
 });
 var marks = {
@@ -1035,6 +1056,21 @@ var marks = {
     class: "cm-comment-active"
   })
 };
+var setFocus = (view, thread) => {
+  const range = view.state.field(commentsStateField).ranges.find((range2) => range2.id === thread);
+  if (!range) {
+    return;
+  }
+  view.dispatch({
+    effects: setSelection.of({
+      active: thread
+    }),
+    selection: {
+      anchor: range.from
+    },
+    scrollIntoView: true
+  });
+};
 var setCommentRange = StateEffect2.define();
 var setSelection = StateEffect2.define();
 var setCommentState = StateEffect2.define();
@@ -1054,11 +1090,11 @@ var commentsStateField = StateField3.define({
         const { model, comments: comments2 } = effect.value;
         const ranges = comments2.map((comment) => {
           const range = model.getRangeFromCursor(comment.cursor);
-          return {
+          return range && {
             ...comment,
             ...range
           };
-        });
+        }).filter(nonNullable);
         return {
           ...value,
           ranges
@@ -1099,7 +1135,7 @@ var BookmarkWidget = class extends WidgetType {
     this._handleClick = _handleClick;
     invariant3(this._id, void 0, {
       F: __dxlog_file5,
-      L: 150,
+      L: 167,
       S: this,
       A: [
         "this._id",
@@ -1125,7 +1161,7 @@ var comments = (options = {}) => {
   const createCommentThread = (view) => {
     invariant3(options.onCreate, void 0, {
       F: __dxlog_file5,
-      L: 204,
+      L: 221,
       S: void 0,
       A: [
         "options.onCreate",
@@ -1207,7 +1243,7 @@ var comments = (options = {}) => {
     options.onCreate ? keymap3.of([
       {
         key: options?.key ?? "meta-'",
-        run: createCommentThread
+        run: callbackWrapper(createCommentThread)
       }
     ]) : [],
     //
@@ -1251,7 +1287,7 @@ var comments = (options = {}) => {
         changes.iterChanges((from, to, from2, to2) => {
           invariant3(model, void 0, {
             F: __dxlog_file5,
-            L: 333,
+            L: 350,
             S: void 0,
             A: [
               "model",
@@ -1261,12 +1297,12 @@ var comments = (options = {}) => {
           ranges.forEach((range) => {
             if (from2 === to2) {
               const newRange = model.getRangeFromCursor(range.cursor);
-              if (newRange.to - newRange.from === 0) {
+              if (!newRange || newRange.to - newRange.from === 0) {
                 log3.info("deleted comment", {
                   thread: range.id
                 }, {
                   F: __dxlog_file5,
-                  L: 339,
+                  L: 356,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1323,14 +1359,14 @@ var comments = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hr.ts
+// packages/ui/react-ui-editor/src/extensions/hr.ts
 import { Decoration as Decoration3, EditorView as EditorView5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-import get3 from "lodash.get";
+import get4 from "lodash.get";
 var styles3 = EditorView5.baseTheme({
   "& .cm-hr": {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+    borderBottom: `1px solid ${get4(tokens, "extend.colors.neutral.200")}`
   }
 });
 var HorizontalRuleWidget = class extends WidgetType2 {
@@ -1371,7 +1407,7 @@ var hr = () => [
   })
 ];
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/image.ts
+// packages/ui/react-ui-editor/src/extensions/image.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder, StateField as StateField4 } from "@codemirror/state";
 import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType3 } from "@codemirror/view";
@@ -1419,16 +1455,67 @@ var ImageWidget = class extends WidgetType3 {
   }
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
+// packages/ui/react-ui-editor/src/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 var link = (options = {}) => {
-  return StateField5.define({
-    create: (state) => update2(state, options),
-    update: (_, tr) => update2(tr.state, options),
-    provide: (field) => EditorView7.decorations.from(field)
-  });
+  const extensions = [
+    StateField5.define({
+      create: (state) => update2(state, options),
+      update: (_, tr) => update2(tr.state, options),
+      provide: (field) => EditorView7.decorations.from(field)
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos) => {
+        const { from, text } = view.state.doc.lineAt(pos);
+        const p = pos - from;
+        let idx = 0;
+        let match;
+        do {
+          match = text.substring(idx).match(markdownLinkRegexp);
+          if (!match) {
+            match = void 0;
+            break;
+          }
+          idx = text.indexOf(match[0]);
+          if (p >= idx && p < idx + match[0].length) {
+            break;
+          }
+          idx += match[0].length;
+        } while (true);
+        if (!match) {
+          return null;
+        }
+        const [, , url] = match ?? [];
+        return {
+          pos: idx + from,
+          end: idx + from + match[0].length,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, url);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
+        };
+      })
+    );
+  }
+  return extensions;
 };
 var LinkButton = class extends WidgetType4 {
   constructor(_pos, _url, _onAttach) {
@@ -1447,14 +1534,13 @@ var LinkButton = class extends WidgetType4 {
   }
 };
 var LinkText = class extends WidgetType4 {
-  constructor(_pos, _text, _url) {
+  constructor(_text, _url) {
     super();
-    this._pos = _pos;
     this._text = _text;
     this._url = _url;
   }
   eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._url === other._url;
   }
   toDOM(view) {
     const link2 = document.createElement("a");
@@ -1468,7 +1554,7 @@ var LinkText = class extends WidgetType4 {
       link2.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._pos
+            anchor: view.posAtDOM(link2)
           }
         });
       };
@@ -1491,7 +1577,7 @@ var update2 = (state, options) => {
         }
         if (state.readOnly || cursor < node.from || cursor > node.to) {
           builder.add(node.from, node.to, Decoration5.replace({
-            widget: new LinkText(node.from, text, options.link ? url : void 0)
+            widget: new LinkText(text, options.link ? url : void 0)
           }));
         }
         if (options.onRender) {
@@ -1506,21 +1592,21 @@ var update2 = (state, options) => {
   return builder.finish();
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
-import { StateField as StateField6 } from "@codemirror/state";
-var listener = ({ onChange }) => {
-  return StateField6.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged && onChange) {
-        onChange(transaction.newDoc.toString());
-      }
-      return null;
-    }
-  });
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView8 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
+    onFocus(focused);
+    return null;
+  }));
+  onChange && extensions.push(EditorView8.updateListener.of((update4) => {
+    onChange(update4.state.doc.toString());
+  }));
+  return extensions;
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
+// 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";
@@ -1529,14 +1615,14 @@ import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+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/components/TextEditor/extensions/markdown/highlight.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
-import get4 from "lodash.get";
+import get5 from "lodash.get";
 var markdownTags = {
   Blockquote: Tag.define(),
   CodeMark: Tag.define(),
@@ -1722,17 +1808,17 @@ var markdownHighlightStyle = (readonly) => {
   ], {
     scope: markdownLanguage,
     all: {
-      fontFamily: get4(tokens, "fontFamily.body", []).join(",")
+      fontFamily: get5(tokens, "fontFamily.body", []).join(",")
     }
   });
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView8.lineWrapping,
+    EditorView9.lineWrapping,
     customKeymap(),
     bracketMatching2(),
     closeBrackets2(),
@@ -1780,7 +1866,7 @@ var customKeymap = () => keymap4.of([
   ...searchKeymap
 ]);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/mention.ts
+// packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 var mention = ({ onSearch }) => {
   return autocompletion2({
@@ -1803,20 +1889,20 @@ var mention = ({ onSearch }) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/mermaid.ts
+// packages/ui/react-ui-editor/src/extensions/mermaid.ts
 var mermaid = () => {
   return [];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/table.ts
+// packages/ui/react-ui-editor/src/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView9, WidgetType as WidgetType5 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField7.define({
+  return StateField6.define({
     create: (state) => update3(state, options),
     update: (_, tr) => update3(tr.state, options),
-    provide: (field) => EditorView9.decorations.from(field)
+    provide: (field) => EditorView10.decorations.from(field)
   });
 };
 var update3 = (state, options) => {
@@ -1904,9 +1990,9 @@ var TableWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
-import { EditorView as EditorView10, Decoration as Decoration7, WidgetType as WidgetType6, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var styles4 = EditorView10.baseTheme({
+// packages/ui/react-ui-editor/src/extensions/tasklist.ts
+import { EditorView as EditorView11, Decoration as Decoration7, WidgetType as WidgetType6, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var styles4 = EditorView11.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
@@ -1979,7 +2065,7 @@ var tasklist = (options = {}) => {
     }
   }, {
     decorations: (value) => value.tasks,
-    provide: (plugin) => EditorView10.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView11.atomicRanges.of((view) => {
       return view.plugin(plugin)?.tasks || Decoration7.none;
     })
   });
@@ -1989,51 +2075,7 @@ var tasklist = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.ts
-import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip2((view, pos) => {
-  const { from, text } = view.state.doc.lineAt(pos);
-  const p = pos - from;
-  let idx = 0;
-  let match;
-  do {
-    match = text.substring(idx).match(regexp);
-    if (!match) {
-      match = void 0;
-      break;
-    }
-    idx = text.indexOf(match[0]);
-    if (p >= idx && p < idx + match[0].length) {
-      break;
-    }
-    idx += match[0].length;
-  } while (true);
-  if (!match) {
-    return null;
-  }
-  const [, , url] = match ?? [];
-  return {
-    pos: idx + from,
-    end: idx + from + match[0].length,
-    above: true,
-    create: () => {
-      const el = document.createElement("div");
-      el.className = tooltipContent({}, "pli-2 plb-1");
-      onHover(el, url);
-      return {
-        dom: el,
-        offset: {
-          x: 0,
-          y: 4
-        }
-      };
-    }
-  };
-});
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/typewriter.ts
+// packages/ui/react-ui-editor/src/extensions/typewriter.ts
 import { keymap as keymap5 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
@@ -2090,8 +2132,8 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/themes/default.ts
-import get5 from "lodash.get";
+// packages/ui/react-ui-editor/src/themes/default.ts
+import get6 from "lodash.get";
 var defaultTheme = {
   //
   // Main layout:
@@ -2122,7 +2164,7 @@ var defaultTheme = {
   },
   "& .cm-scroller": {
     overflow: "visible",
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
   },
   "& .cm-content": {
     padding: 0,
@@ -2130,11 +2172,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get5(tokens, "extend.colors.neutral.900", "black"),
+    color: get6(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get5(tokens, "extend.colors.neutral.100", "white"),
+    color: get6(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -2162,25 +2204,25 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.100")
+    background: get6(tokens, "extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.200")
+    background: get6(tokens, "extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.700")
+    background: get6(tokens, "extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get5(tokens, "extend.colors.primary.600")
+    background: get6(tokens, "extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get5(tokens, "extend.colors.yellow.100")
+    backgroundColor: get6(tokens, "extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get5(tokens, "extend.colors.yellow.700")
+    backgroundColor: get6(tokens, "extend.colors.yellow.700")
   },
   //
   // collaboration
@@ -2213,12 +2255,12 @@ var defaultTheme = {
   // link
   //
   "& .cm-link": {
-    color: get5(tokens, "extend.colors.primary.500"),
+    color: get6(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem",
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
   },
   //
   // tooltip
@@ -2240,7 +2282,7 @@ var defaultTheme = {
     display: "none"
   },
   "& .cm-completionLabel": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-completionMatchedText": {
     textDecoration: "none"
@@ -2256,15 +2298,15 @@ var defaultTheme = {
   // table
   //
   "& .cm-table *": {
-    fontFamily: `${get5(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${get6(tokens, "fontFamily.mono", []).join(",")} !important`,
     textDecoration: "none !important"
   },
   "& .cm-table-head": {
     padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get5(tokens, "extend.colors.neutral.500")}`,
+    borderBottom: `1px solid ${get6(tokens, "extend.colors.neutral.500")}`,
     fontWeight: 100,
     textAlign: "left",
-    color: get5(tokens, "extend.colors.neutral.500")
+    color: get6(tokens, "extend.colors.neutral.500")
   },
   "& .cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -2279,8 +2321,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(get5(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get5(tokens, [
+  ...Object.keys(get6(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get6(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -2315,23 +2357,23 @@ var defaultTheme = {
   * </div
   */
   "& .cm-panels": {
-    border: `1px solid ${get5(tokens, "extend.colors.neutral.200")}`
+    border: `1px solid ${get6(tokens, "extend.colors.neutral.200")}`
   },
   "& .cm-panel": {
-    background: get5(tokens, "extend.colors.neutral.50"),
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    background: get6(tokens, "extend.colors.neutral.50"),
+    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-button": {
     margin: "4px",
-    fontFamily: get5(tokens, "fontFamily.body", []).join(","),
-    background: get5(tokens, "extend.colors.neutral.100"),
+    fontFamily: get6(tokens, "fontFamily.body", []).join(","),
+    background: get6(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
     "&:hover": {
-      background: get5(tokens, "extend.colors.neutral.200")
+      background: get6(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get5(tokens, "extend.colors.neutral.300"),
+      background: get6(tokens, "extend.colors.neutral.300"),
       backgroundImage: "none"
     }
   },
@@ -2341,42 +2383,33 @@ var defaultTheme = {
 };
 var textTheme = {
   "& .cm-scroller": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-placeholder": {
-    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get6(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: get5(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.body", []).join(",")
   }
 };
 var codeTheme = {
   "& .cm-scroller": {
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
   },
   "& .cm-placeholder": {
-    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+    fontFamily: get6(tokens, "fontFamily.mono", []).join(",")
   }
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView11 } 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 as useEffect2, useImperativeHandle, useState as useState2 } 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";
 var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, comments: comments2, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
@@ -2438,9 +2471,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, comments: comments2, r
         editorMode === "vim" && vim(),
         // Theme.
         // TODO(burdon): Make theme configurable.
-        EditorView11.baseTheme(defaultTheme),
-        EditorView11.theme(slots?.editor?.theme ?? {}),
-        EditorView11.darkTheme.of(themeMode === "dark"),
+        EditorView12.baseTheme(defaultTheme),
+        EditorView12.theme(slots?.editor?.theme ?? {}),
+        EditorView12.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
         model.extension,
         // Custom.
@@ -2450,7 +2483,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, comments: comments2, r
     view?.destroy();
     setEditor({
       state: state2,
-      view: new EditorView11({
+      view: new EditorView12({
         state: state2,
         parent: root
       })
@@ -2579,11 +2612,12 @@ export {
   mermaid,
   modelState,
   setCommentRange,
+  setFocus,
+  setSelection,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
-  tooltip,
   typewriter,
   useTextModel
 };