@dxos/react-ui-editor 0.3.10-main.ee543cf → 0.3.10-next.63eb179

package/dist/lib/browser/index.mjs

@@ -1,128 +1,149 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
-import { Doc, YText, YXmlFragment } from "@dxos/text-model";
+import { Doc, YText as YText2, 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
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { keymap } from "@codemirror/view";
-var autocomplete = ({ getOptions }) => {
-  return [
-    // https://codemirror.net/docs/ref/#view.keymap
-    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
-    keymap.of(completionKeymap),
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // 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 word = context.matchBefore(/\w*/);
-          if (!word || word.from === word.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: word.from,
-            options: getOptions(word.text.toLowerCase())
-          };
-        }
-      ]
-    })
-  ];
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic/bundle.ts
 import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { EditorView, placeholder } from "@codemirror/view";
 var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
-  // TODO(burdon): Compare with minimalSetup.
-  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
-  EditorView.lineWrapping,
   _placeholder && placeholder(_placeholder),
+  EditorView.lineWrapping,
   // TODO(burdon): Is this required?
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField } from "@codemirror/state";
-import { Decoration, EditorView as EditorView2, WidgetType } from "@codemirror/view";
-var LinkButton = class extends WidgetType {
-  constructor(_pos, _url, _onAttach) {
-    super();
-    this._pos = _pos;
-    this._url = _url;
-    this._onAttach = _onAttach;
-  }
-  eq(other) {
-    return this._pos === other._pos && this._url === other._url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic/theme.ts
+import get from "lodash.get";
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var heading = {
+  1: "mbs-4 mbe-2 text-4xl font-semibold text-inherit no-underline",
+  2: "mbs-4 mbe-2 text-3xl font-bold text-inherit no-underline",
+  3: "mbs-4 mbe-2 text-2xl font-bold text-inherit no-underline",
+  4: "mbs-4 mbe-2 text-xl font-extrabold text-inherit no-underline",
+  5: "mbs-4 mbe-2 text-lg font-extrabold text-inherit no-underline",
+  6: "mbs-4 mbe-2 font-black text-inherit no-underline"
+};
+var bold = "font-bold";
+var code = "font-mono bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5";
+var codeWithoutMarks = mx(code, "pli-1.5 mli-0.5");
+var italic = "italic";
+var strikethrough = "line-through";
+var mark = "!font-normal !no-underline !text-inherit opacity-40";
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic/theme.ts
+var basicTheme = {
+  "&.cm-focused": {
+    outline: "none"
+  },
+  "& .cm-line": {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: "1.6em"
+  },
+  "& .cm-line *": {
+    lineHeight: 1.6
+  },
+  "& .cm-scroller": {
+    fontFamily: get(tokens, "fontFamily.body", []).join(","),
+    overflow: "visible"
+  },
+  "& .cm-content": {
+    padding: 0,
+    caretColor: "black"
+  },
+  ".dark & .cm-content": {
+    caretColor: "white"
+  },
+  "& .cm-tooltip": {
+    backgroundColor: "transparent",
+    border: "none"
+  },
+  "& .cm-link": {
+    color: get(tokens, "extend.colors.primary.500"),
+    textDecoration: "underline"
   }
 };
-var LinkText = class extends WidgetType {
-  constructor(_pos, _text, _url) {
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/change.ts
+import { StateField } from "@codemirror/state";
+var onChangeExtension = (onChange) => StateField.define({
+  create: () => null,
+  update: (_value, transaction) => {
+    if (transaction.docChanged && onChange) {
+      onChange(transaction.newDoc.toString());
+    }
+    return null;
+  }
+});
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
+import { Decoration, EditorView as EditorView2, WidgetType } from "@codemirror/view";
+var Link = class extends WidgetType {
+  constructor(_anchor, _text, _url) {
     super();
-    this._pos = _pos;
+    this._anchor = _anchor;
     this._text = _text;
     this._url = _url;
   }
   eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._text === other.text && this._url === other.url;
   }
   toDOM(view) {
-    const link2 = document.createElement("a");
-    link2.setAttribute("class", "cm-link");
-    link2.textContent = this._text;
+    const link = document.createElement("a");
+    link.setAttribute("class", "cm-link");
+    link.textContent = this._text;
     if (this._url) {
-      link2.setAttribute("rel", "noreferrer");
-      link2.setAttribute("target", "_blank");
-      link2.href = this._url;
+      link.setAttribute("target", "_blank");
+      link.href = this._url;
     } else {
-      link2.onclick = () => {
+      link.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._pos
+            anchor: this._anchor
           }
         });
       };
     }
-    return link2;
+    return link;
   }
 };
-var update = (state, options) => {
+var hyperlinkDecoration = ({ link } = {}) => {
+  return StateField2.define({
+    create: (state) => update(state, link),
+    update: (_, tr) => update(tr.state, link),
+    provide: (field) => EditorView2.decorations.from(field)
+  });
+};
+var update = (state, link) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
-      if (node.name === "Link") {
-        const marks = node.node.getChildren("LinkMark");
-        const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
-        const urlNode = node.node.getChild("URL");
-        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-        if (cursor < node.from || cursor > node.to) {
+      if (cursor < node.from || cursor > node.to) {
+        if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
           builder.add(node.from, node.to, Decoration.replace({
-            widget: new LinkText(node.from, text, options.link ? url : void 0)
-          }));
-        }
-        if (options.onRender) {
-          builder.add(node.to, node.to, Decoration.replace({
-            widget: new LinkButton(node.from, url, options.onRender)
+            widget: new Link(node.from, text, link ? url : void 0)
           }));
+          return false;
         }
       }
       return true;
@@ -130,26 +151,143 @@ var update = (state, options) => {
   });
   return builder.finish();
 };
-var link = (options = {}) => {
-  return StateField.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView2.decorations.from(field)
-  });
-};
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
-import { StateField as StateField2 } from "@codemirror/state";
-var listener = (onChange) => StateField2.define({
-  create: () => null,
-  update: (_value, transaction) => {
-    if (transaction.docChanged && onChange) {
-      onChange(transaction.newDoc.toString());
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.tsx
+import { hoverTooltip } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
+var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp) => hoverTooltip((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("a");
+      el.innerText = "_";
+      el.className = tooltipContent({}, "mb-2 p-1");
+      el.setAttribute("target", "_blank");
+      el.setAttribute("href", url);
+      onHover(el, url);
+      return {
+        dom: el
+      };
+    }
+  };
 });
 
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.tsx
+import { Decoration as Decoration2, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
+var markdownLinkRegexp2 = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
+var linkDecorator = () => new MatchDecorator({
+  regexp: markdownLinkRegexp2,
+  decorate: (add, from, to, match, view) => {
+    const [_, label, url] = match;
+    const p0 = {
+      start: from,
+      end: from + 1
+    };
+    const p1 = {
+      start: from + 1,
+      end: from + 1 + label.length
+    };
+    const p2 = {
+      start: p1.end,
+      end: p1.end + 1
+    };
+    const p3 = {
+      start: p1.end + 1,
+      end: p1.end + 1 + url.length + 2
+    };
+    add(p0.start, p0.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+    add(p1.start, p1.end, Decoration2.mark({
+      class: "cm-hyperlink-label"
+    }));
+    add(p2.start, p2.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+    add(p3.start, p3.end, Decoration2.mark({
+      class: "cm-hyperlink-url",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+  }
+});
+function hyperLinkExtension() {
+  return ViewPlugin.fromClass(class HyperLinkView {
+    constructor(view) {
+      this.decorator = linkDecorator();
+      this.decorations = this.decorator.createDeco(view);
+    }
+    update(update2) {
+      if (update2.docChanged || update2.viewportChanged) {
+        this.decorations = this.decorator.updateDeco(update2, this.decorations);
+      }
+    }
+  }, {
+    decorations: (view) => view.decorations,
+    eventHandlers: {
+      // TODO(burdon): CLick to expand link.
+      // https://discuss.codemirror.net/t/decorator-iteration-on-click-event/4226/2
+      mousedown: function(event, view) {
+        const pos = view.posAtDOM(event.target);
+        if (pos !== 0) {
+          console.log(this);
+        }
+      },
+      // TODO(burdon): Hide when cursor moves away.
+      keydown: (event, view) => {
+        view.update([]);
+      }
+    }
+  });
+}
+var hyperlinkStyle = EditorView3.baseTheme({
+  ".cm-hyperlink-label": {
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  ".cm-hyperlink-bracket": {
+    opacity: 0.2
+  },
+  ".cm-hyperlink-url": {
+    opacity: 0.5,
+    fontFamily: "monospace"
+  }
+});
+var hyperlinkWidget = [
+  hyperLinkExtension(),
+  hyperlinkStyle
+];
+
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
@@ -160,59 +298,222 @@ import { lintKeymap } from "@codemirror/lint";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView3, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap2, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import get from "lodash.get";
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var heading = {
-  1: "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-  2: "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-  3: "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-  4: "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-  5: "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-  6: "mbs-4 mbe-2 font-medium text-inherit no-underline"
-};
-var light = "text-neutral-200 dark:text-neutral-800";
-var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
-var bold = "font-bold";
-var italic = "italic";
-var strikethrough = "line-through";
-var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
-var codeMark = "font-mono text-primary-500";
-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);
-var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50";
-
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/tags.ts
+import { styleTags, Tag } from "@lezer/highlight";
 var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  HorizontalRule: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define()
+  headingMark: Tag.define(),
+  quoteMark: Tag.define(),
+  listMark: Tag.define(),
+  linkMark: Tag.define(),
+  emphasisMark: Tag.define(),
+  codeMark: Tag.define(),
+  codeText: Tag.define(),
+  inlineCode: Tag.define(),
+  url: Tag.define(),
+  linkReference: Tag.define(),
+  linkLabel: Tag.define()
 };
 var markdownTagsExtension = {
   props: [
-    styleTags(markdownTags)
+    styleTags({
+      HeaderMark: markdownTags.headingMark,
+      QuoteMark: markdownTags.quoteMark,
+      ListMark: markdownTags.listMark,
+      LinkMark: markdownTags.linkMark,
+      EmphasisMark: markdownTags.emphasisMark,
+      CodeMark: markdownTags.codeMark,
+      CodeText: markdownTags.codeText,
+      InlineCode: markdownTags.inlineCode,
+      URL: markdownTags.url,
+      LinkReference: markdownTags.linkReference,
+      LinkLabel: markdownTags.linkLabel
+    })
   ]
 };
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/theme.ts
+import { markdownLanguage } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import get2 from "lodash.get";
+var chalky = "#e5c07b";
+var coral = "#e06c75";
+var cyan = "#56b6c2";
+var invalid = "#ffffff";
+var ivory = "#abb2bf";
+var stone = "#7d8799";
+var malibu = "#61afef";
+var sage = "#98c379";
+var whiskey = "#d19a66";
+var violet = "#c678dd";
+var highlightBackground = "#2c313a";
+var tooltipBackground = "#353a42";
+var monospace = get2(tokens, "fontFamily.mono", [
+  "monospace"
+]).join(",");
+var markdownTheme = {
+  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
+  // '&': {
+  //   color: ivory,
+  //   backgroundColor: background
+  // },
+  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  // '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+  //   backgroundColor: selection
+  // },
+  // '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+  // '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+  // '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+  // '.cm-searchMatch': {
+  //   backgroundColor: '#72a1ff59',
+  //   outline: '1px solid #457dff'
+  // },
+  // '.cm-searchMatch.cm-searchMatch-selected': {
+  //   backgroundColor: '#6199ff2f'
+  // },
+  // '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+  // '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+  // '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+  //   backgroundColor: '#bad0f847'
+  // },
+  // '.cm-gutters': {
+  //   backgroundColor: background,
+  //   color: stone,
+  //   border: 'none'
+  // },
+  // '.cm-activeLineGutter': {
+  //   backgroundColor: highlightBackground
+  // },
+  // '.cm-foldPlaceholder': {
+  //   backgroundColor: 'transparent',
+  //   border: 'none',
+  //   color: '#ddd'
+  // },
+  "& .cm-tooltip": {
+    backgroundColor: "transparent",
+    border: "none"
+  },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
+  "&.cm-focused": {
+    outline: "none"
+  },
+  "& .cm-line": {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: "1.6em"
+  },
+  "& .cm-line *": {
+    lineHeight: 1.6
+  },
+  "&.cm-focused .cm-selectionBackground, & .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.150", "#00ffff")
+  },
+  ".dark & .cm-selectionBackground, .dark &.cm-focused .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.850", "#00ffff")
+  },
+  "& .cm-selectionMatch": {
+    background: get2(tokens, "extend.colors.primary.250", "#00ffff") + "44"
+  },
+  ".dark & .cm-selectionMatch": {
+    background: get2(tokens, "extend.colors.primary.600", "#00ffff") + "44"
+  },
+  "& .cm-content": {
+    padding: 0,
+    caretColor: "black"
+  },
+  ".dark & .cm-content": {
+    caretColor: "white"
+  },
+  "& .cm-cursor": {
+    borderLeftColor: "black"
+  },
+  ".dark & .cm-cursor": {
+    borderLeftColor: "white"
+  },
+  ".cm-placeholder": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-scroller": {
+    fontFamily: get2(tokens, "fontFamily.mono", []).join(","),
+    overflow: "visible"
+  },
+  "& .cm-activeLine": {
+    backgroundColor: "transparent"
+  },
+  ".dark & .cm-activeLine": {
+    backgroundColor: "transparent"
+  },
+  "& .cm-ySelectionInfo": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
+    padding: "2px 4px",
+    marginBlockStart: "-4px"
+  },
+  "& .cm-ySelection, & .cm-selectionMatch": {
+    paddingBlockStart: ".15em",
+    paddingBlockEnd: ".15em"
+  },
+  "& .cm-ySelection, & .cm-yLineSelection": {
+    mixBlendMode: "multiply"
+  },
+  ".dark & .cm-ySelection, .dark & .cm-yLineSelection": {
+    mixBlendMode: "screen"
+  },
+  "& .cm-ySelectionCaret": {
+    display: "inline-block",
+    insetBlockStart: ".1em",
+    blockSize: "1.4em",
+    verticalAlign: "top"
+  },
+  "& .cm-yLineSelection": {
+    margin: "0"
+  },
+  ".cm-link": {
+    color: "rgb(20 89 208)",
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem"
+  },
+  // TODO(burdon): Document.
+  ...Object.keys(get2(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get2(tokens, [
+      "extend",
+      "fontSize",
+      fontSize,
+      1,
+      "lineHeight"
+    ]);
+    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
+      height
+    };
+    return acc;
+  }, {})
+};
 var markdownHighlightStyle = HighlightStyle.define([
   {
     tag: [
@@ -252,22 +553,48 @@ var markdownHighlightStyle = HighlightStyle.define([
     ],
     color: "inherit !important"
   },
-  // Markdown marks.
   {
     tag: [
+      tags.link,
+      tags.url
+    ],
+    color: "inherit !important",
+    textDecoration: "none !important"
+  },
+  {
+    tag: [
+      tags.function(tags.variableName),
+      tags.labelName
+    ],
+    color: malibu,
+    fontFamily: monospace
+  },
+  {
+    tag: [
+      markdownTags.codeMark,
+      markdownTags.emphasisMark,
+      markdownTags.headingMark,
+      markdownTags.linkLabel,
+      markdownTags.linkReference,
+      markdownTags.listMark,
+      markdownTags.quoteMark,
+      markdownTags.url,
       tags.meta,
-      tags.processingInstruction,
-      markdownTags.CodeMark,
-      markdownTags.EmphasisMark,
-      markdownTags.HeaderMark,
-      markdownTags.LinkLabel,
-      markdownTags.LinkReference,
-      markdownTags.ListMark,
-      markdownTags.QuoteMark
+      tags.processingInstruction
     ],
     class: mark
   },
-  // Headings.
+  {
+    tag: [
+      markdownTags.codeText,
+      markdownTags.inlineCode
+    ],
+    class: "font-mono"
+  },
+  {
+    tag: tags.emphasis,
+    class: italic
+  },
   {
     tag: tags.heading1,
     class: heading[1]
@@ -292,61 +619,18 @@ var markdownHighlightStyle = HighlightStyle.define([
     tag: tags.heading6,
     class: heading[6]
   },
-  // Emphasis.
-  {
-    tag: tags.emphasis,
-    class: italic
-  },
-  {
-    tag: tags.strong,
-    class: bold
-  },
   {
     tag: tags.strikethrough,
     class: strikethrough
   },
-  // Naked URLs.
-  {
-    tag: [
-      markdownTags.URL
-    ],
-    class: inlineUrl
-  },
-  // E.g., code block language (after ```).
-  {
-    tag: [
-      tags.function(tags.variableName),
-      tags.labelName
-    ],
-    class: codeMark
-  },
-  // The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-  // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
-  // when a language is specified. In this case, the syntax highlighting extensions will colorize
-  // the code, but all other CSS properties will be inherited.
-  {
-    tag: [
-      markdownTags.CodeText,
-      markdownTags.InlineCode
-    ],
-    class: code
-  },
   {
-    tag: [
-      markdownTags.QuoteMark
-    ],
-    class: blockquote
-  },
-  {
-    tag: [
-      markdownTags.HorizontalRule
-    ],
-    class: horizontalRule
+    tag: tags.strong,
+    class: bold
   }
 ], {
   scope: markdownLanguage,
   all: {
-    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   }
 });
 
@@ -357,7 +641,7 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     closeBrackets2(),
     _placeholder && placeholder2(_placeholder),
     EditorState.allowMultipleSelections.of(true),
-    EditorView3.lineWrapping,
+    EditorView4.lineWrapping,
     // autocompletion(),
     crosshairCursor(),
     dropCursor(),
@@ -369,7 +653,7 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     history(),
     indentOnInput(),
     rectangularSelection(),
-    keymap2.of([
+    keymap.of([
       ...closeBracketsKeymap,
       // ...completionKeymap,
       ...defaultKeymap,
@@ -381,308 +665,23 @@ var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
     ]),
     // Main extension.
     // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
     markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // 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,
-      // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
-      // Parser extensions.
       extensions: [
-        // GFM, // TODO(burdon): Provided by default?
+        // TODO(burdon): This seems to upgrade the parser.
+        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+        // https://github.github.com/gfm
+        // GFM,
+        // Custom styling.
         markdownTagsExtension
       ]
     }),
-    // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle),
-    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2)
-  ].filter(Boolean);
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField3 } from "@codemirror/state";
-import { EditorView as EditorView4, Decoration as Decoration2, WidgetType as WidgetType2 } from "@codemirror/view";
-var CheckboxWidget = class extends WidgetType2 {
-  constructor(_pos, _getCursor, _checked) {
-    super();
-    this._pos = _pos;
-    this._getCursor = _getCursor;
-    this._checked = _checked;
-  }
-  eq(other) {
-    return this._pos === other._pos && this._checked === other._checked;
-  }
-  toDOM(view) {
-    const wrap = document.createElement("span");
-    wrap.setAttribute("aria-hidden", "true");
-    wrap.className = "cm-task-item";
-    const box = wrap.appendChild(document.createElement("input"));
-    box.type = "checkbox";
-    box.checked = this._checked;
-    box.onclick = (event) => {
-      this._checked = !isChecked(view.state, this._pos);
-      view.dispatch({
-        changes: {
-          from: this._pos + 1,
-          to: this._pos + 2,
-          insert: this._checked ? "x" : " "
-        },
-        // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-        selection: {
-          anchor: this._pos + 4
-        }
-      });
-      return true;
-    };
-    return wrap;
-  }
-  // TODO(burdon): Remove listener?
-  // override destroy() {
-  // console.log('destroy', this._pos);
-  // }
-  ignoreEvent() {
-    return false;
-  }
-};
-var isChecked = (state, pos) => {
-  return state.sliceDoc(pos, pos + 3).toLowerCase() === "[x]";
-};
-var statefield = () => {
-  let lastPosition = 0;
-  const listener2 = EditorView4.updateListener.of((update2) => {
-    lastPosition = update2.startState.selection.main.head;
-  });
-  const checkbox = (state) => {
-    const builder = new RangeSetBuilder2();
-    syntaxTree2(state).iterate({
-      enter: (node) => {
-        if (node.name === "TaskMarker") {
-          builder.add(node.from, node.to, Decoration2.replace({
-            widget: new CheckboxWidget(node.from, () => lastPosition, isChecked(state, node.from))
-          }));
-        }
-      }
-    });
-    return builder.finish();
-  };
-  return [
-    listener2,
-    StateField3.define({
-      create: (state) => checkbox(state),
-      update: (_, tr) => checkbox(tr.state),
-      provide: (field) => EditorView4.decorations.from(field)
-    })
-  ];
-};
-var styles = EditorView4.baseTheme({
-  "& .cm-task-item": {
-    padding: "0 4px"
-  }
-});
-var tasklist = () => [
-  statefield(),
-  styles
-];
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.tsx
-import { hoverTooltip } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip((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: 12
-        }
-      };
-    }
-  };
-});
-
-// packages/ui/react-ui-editor/src/components/TextEditor/themes/default.ts
-import get2 from "lodash.get";
-var defaultTheme = {
-  //
-  // Main layout:
-  // <div class=".cm-editor .cm-focused">
-  //   <div class=".cm-scroller">
-  //     <div class=".cm-content" role="textbox" contenteditable="true">
-  //       <div class=".cm-line" />
-  //     </div>
-  //   </div>
-  // </div>
-  //
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  "& .cm-scroller": {
-    overflow: "visible"
-  },
-  "& .cm-content": {
-    padding: 0,
-    // Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
-  },
-  "&light .cm-content": {
-    color: get2(tokens, "extend.colors.neutral.900", "black"),
-    caretColor: "black"
-  },
-  "&dark .cm-content": {
-    color: get2(tokens, "extend.colors.neutral.100", "white"),
-    caretColor: "white"
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor": {
-    borderLeft: "2px solid white"
-  },
-  "& .cm-placeholder": {
-    fontWeight: 100
-  },
-  //
-  // line
-  //
-  "& .cm-line": {
-    paddingInline: 0
-  },
-  "& .cm-line *": {},
-  "& .cm-activeLine": {
-    backgroundColor: "transparent"
-  },
-  //
-  // selection
-  //
-  "&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.150", "#00ffff")
-  },
-  "&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.850", "#00ffff")
-  },
-  "&light .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.250", "#00ffff") + "44"
-  },
-  "&dark .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.600", "#00ffff") + "44"
-  },
-  //
-  // collaboration
-  // TODO(burdon): Review classnames (YJS dependent?)
-  //
-  "&light .cm-ySelection, &light .cm-yLineSelection": {
-    mixBlendMode: "multiply"
-  },
-  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
-    mixBlendMode: "screen"
-  },
-  "& .cm-ySelectionInfo": {
-    padding: "2px 4px",
-    marginBlockStart: "-4px"
-  },
-  "& .cm-ySelection, & .cm-selectionMatch": {
-    paddingBlockStart: ".15em",
-    paddingBlockEnd: ".15em"
-  },
-  "& .cm-ySelectionCaret": {
-    display: "inline-block",
-    insetBlockStart: ".1em",
-    blockSize: "1.4em",
-    verticalAlign: "top"
-  },
-  "& .cm-yLineSelection": {
-    margin: 0
-  },
-  //
-  // link
-  //
-  "& .cm-link": {
-    color: get2(tokens, "extend.colors.primary.500"),
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  },
-  //
-  // tooltip
-  //
-  "& .cm-tooltip": {
-    border: "none"
-  },
-  // '& .cm-tooltip-below': {},
-  // '& .cm-tooltip-autocomplete': {},
-  //
-  // 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(get2(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get2(tokens, [
-      "extend",
-      "fontSize",
-      fontSize,
-      1,
-      "lineHeight"
-    ]);
-    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
-      height
-    };
-    return acc;
-  }, {})
-};
-var textTheme = {
-  "& .cm-scroller": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  }
-};
-var codeTheme = {
-  "& .cm-scroller": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(",")
-  }
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    syntaxHighlighting2(markdownHighlightStyle),
+    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2)
+  ].filter(Boolean);
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
@@ -691,174 +690,28 @@ import { EditorView as EditorView5 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import { generateName } from "@dxos/display-name";
+import get3 from "lodash.get";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState } from "react";
+import { isDocAccessor as isDocAccessor2 } from "@dxos/echo-schema";
 import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
-var EditorModes = [
-  "default",
-  "vim"
-];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const { awareness, peer } = model;
-  useEffect(() => {
-    if (awareness && peer) {
-      awareness.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    awareness,
-    peer,
-    themeMode
-  ]);
-  const [root, setRoot] = useState(null);
-  const [state, setState] = useState();
-  const [view, setView] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
-    view
-  }), [
-    view,
-    state,
-    root
-  ]);
-  useEffect(() => {
-    if (!root) {
-      return;
-    }
-    const state2 = EditorState2.create({
-      doc: model.text(),
-      extensions: [
-        // TODO(burdon): Factor out VIM mode?
-        editorMode === "vim" && vim(),
-        // Theme.
-        EditorView5.baseTheme(defaultTheme),
-        EditorView5.theme(slots?.editor?.theme ?? {}),
-        // TODO(burdon): themeMode doesn't change in storybooks.
-        EditorView5.darkTheme.of(themeMode === "dark"),
-        // Storage and replication.
-        model.extension,
-        // Custom.
-        ...extensions
-      ].filter(Boolean)
-    });
-    view?.destroy();
-    setView(new EditorView5({
-      state: state2,
-      parent: root
-    }));
-    setState(state2);
-    return () => {
-      view?.destroy();
-      setView(void 0);
-      setState(void 0);
-    };
-  }, [
-    root,
-    model,
-    themeMode,
-    editorMode
-  ]);
-  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();
-        break;
-      }
-    }
-  }, [
-    view,
-    editorMode
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    key: model.id,
-    ref: setRoot,
-    tabIndex: 0,
-    ...slots?.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
-  });
-});
-var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep({}, _slots, defaultTextSlots);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    extensions: [
-      basicBundle({
-        themeMode,
-        placeholder: slots?.editor?.placeholder
-      }),
-      ...extensions
-    ],
-    slots,
-    ...props
-  });
-});
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep({}, _slots, defaultSlots);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    extensions: [
-      markdownBundle({
-        themeMode,
-        placeholder: slots?.editor?.placeholder
-      }),
-      ...extensions
-    ],
-    slots,
-    ...props
-  });
-});
-var defaultSlots = {
-  root: {
-    className: mx2("p-2", inputSurface)
-  }
-};
-var defaultTextSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: textTheme
-  }
-};
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get3 from "lodash.get";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
+import { useEffect, useMemo } from "react";
 import { yCollab } from "y-codemirror.next";
-import { invariant } from "@dxos/invariant";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
+import { generateName } from "@dxos/display-name";
+import { isDocAccessor } from "@dxos/echo-schema";
+import { getColorForValue } from "@dxos/react-ui-theme";
+import { YText } from "@dxos/text-model";
 
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-import { Annotation, Facet, StateEffect, StateField as StateField4 } from "@codemirror/state";
-import { ViewPlugin } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
+import { Annotation, Facet, StateEffect, StateField as StateField3 } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin2 } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
 import { next as automerge } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/hooks/automerge/amToCodemirror.ts
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/amToCodemirror.ts
 import { ChangeSet } from "@codemirror/state";
 var amToCodemirror_default = (view, selection, target, patches) => {
   for (const patch of patches) {
@@ -965,7 +818,7 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge/codeMirrorToAm.ts
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/codeMirrorToAm.ts
 import { next as am } from "@dxos/automerge/automerge";
 var codeMirrorToAm_default = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
@@ -988,7 +841,7 @@ var codeMirrorToAm_default = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
 var PatchSemaphore = class {
   constructor(field) {
     this._inReconcile = false;
@@ -1029,7 +882,7 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
 var effectType = StateEffect.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
@@ -1040,7 +893,7 @@ var semaphoreFacet = Facet.define({
   combine: (values) => values.at(-1)
 });
 var automergePlugin = (handle, path) => {
-  const stateField = StateField4.define({
+  const stateField = StateField3.define({
     create: () => ({
       lastHeads: automerge2.getHeads(handle.docSync()),
       unreconciledTransactions: [],
@@ -1070,7 +923,7 @@ var automergePlugin = (handle, path) => {
     }
   });
   const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin.fromClass(class AutomergeCodemirrorViewPlugin {
+  const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
     constructor(view) {
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
@@ -1100,6 +953,45 @@ var automergePlugin = (handle, path) => {
 var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
+// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
+var useCollaboration = (model, themeMode) => {
+  const { provider, peer, content } = model;
+  const extension = useMemo(() => {
+    if (content instanceof YText) {
+      return yCollab(content, provider?.awareness);
+    } else if (isDocAccessor(content)) {
+      return automergePlugin(content.handle, content.path);
+    } else {
+      return void 0;
+    }
+  }, []);
+  useEffect(() => {
+    if (provider && peer) {
+      provider.awareness.setLocalStateField("user", {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({
+          value: peer.id,
+          type: "color"
+        }),
+        colorLight: getColorForValue({
+          value: peer.id,
+          themeMode,
+          type: "highlight"
+        })
+      });
+    }
+  }, [
+    provider,
+    peer,
+    themeMode
+  ]);
+  return extension;
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import { useMemo as useMemo2 } from "react";
+import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
+
 // packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
 import * as random from "lib0/random";
 var cursorColors = [
@@ -1239,80 +1131,185 @@ var SpaceAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = ({ identity, space, text }) => {
-  const [model, setModel] = useState2(() => createModel({
-    identity,
-    space,
-    text
-  }));
-  useEffect2(() => {
-    setModel(createModel({
-      identity,
+  const provider = useMemo2(() => {
+    if (isActualAutomergeObject(text)) {
+      return void 0;
+    }
+    if (!space || !text?.doc) {
+      return void 0;
+    }
+    return new SpaceAwarenessProvider({
       space,
-      text
-    }));
+      doc: text.doc,
+      channel: `yjs.awareness.${text.id}`
+    });
   }, [
     identity,
     space,
+    text,
+    text?.doc
+  ]);
+  const content = useMemo2(() => {
+    if (isActualAutomergeObject(text)) {
+      const obj = text;
+      return getRawDoc(obj, [
+        obj.field
+      ]);
+    } else {
+      return text?.content;
+    }
+  }, [
     text
   ]);
-  return model;
-};
-var createModel = (options) => {
-  const { space, text } = options;
   if (isActualAutomergeObject(text)) {
-    return createAutomergeModel(options);
-  } else {
-    if (!space || !text?.doc || !text?.content) {
-      return void 0;
-    }
-    return createYjsModel(options);
+    const obj = text;
+    return {
+      id: obj.id,
+      content,
+      provider: void 0,
+      peer: identity ? {
+        id: identity.identityKey.toHex(),
+        name: identity.profile?.displayName
+      } : void 0
+    };
+  }
+  if (!text?.doc || !text?.content) {
+    return void 0;
   }
-};
-var createYjsModel = ({ identity, space, text }) => {
-  invariant(space && text?.doc && text?.content, void 0, {
-    F: __dxlog_file2,
-    L: 73,
-    S: void 0,
-    A: [
-      "space && text?.doc && text?.content",
-      ""
-    ]
-  });
-  const provider = new SpaceAwarenessProvider({
-    space,
-    doc: text.doc,
-    channel: `yjs.awareness.${text.id}`
-  });
   return {
     id: text.doc.guid,
     content: text.content,
-    text: () => text.content.toString(),
-    extension: yCollab(text.content, provider.awareness),
-    awareness: provider.awareness,
+    provider,
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
     } : void 0
   };
 };
-var createAutomergeModel = ({ identity, space, text }) => {
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
+
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var EditorModes = [
+  "default",
+  "vim"
+];
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots, editorMode }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const [parent, setParent] = useState(null);
+  const [state, setState] = useState();
+  const [view, setView] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    editor: parent,
+    state,
+    view
+  }), [
+    view,
+    state,
+    parent
   ]);
-  return {
-    id: obj.id,
-    content: doc,
-    text: () => get3(doc.handle.docSync(), doc.path),
-    extension: automergePlugin(doc.handle, doc.path),
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-};
+  const collaboration = useCollaboration(model, themeMode);
+  useEffect2(() => {
+    if (!parent) {
+      return;
+    }
+    const initialText = isDocAccessor2(model.content) ? get3(model.content.handle.docSync(), model.content.path) : model.content?.toString();
+    const state2 = EditorState2.create({
+      doc: initialText,
+      extensions: [
+        // TODO(burdon): Factor out VIM mode?
+        editorMode === "vim" && vim(),
+        // Replication.
+        collaboration,
+        // Theme.
+        slots?.editor?.theme && EditorView5.theme(slots?.editor?.theme),
+        // Custom.
+        ...extensions
+      ].filter(Boolean)
+    });
+    setState(state2);
+    view?.destroy();
+    setView(new EditorView5({
+      state: state2,
+      parent
+    }));
+    return () => {
+      view?.destroy();
+      setView(void 0);
+      setState(void 0);
+    };
+  }, [
+    parent,
+    model.content,
+    themeMode,
+    editorMode
+  ]);
+  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) && parent?.focus();
+        break;
+      }
+    }
+  }, [
+    view,
+    editorMode
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    key: model.id,
+    ref: setParent,
+    tabIndex: 0,
+    ...slots?.root,
+    ...editorMode !== "vim" && tabsterDOMAttribute,
+    onKeyUp: handleKeyUp
+  });
+});
+var TextEditor = /* @__PURE__ */ forwardRef(({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const extensions = [
+    ..._extensions ?? [],
+    basicBundle({
+      themeMode,
+      placeholder: slots?.editor?.placeholder
+    })
+  ];
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    extensions,
+    slots: defaultsDeep({}, slots, {
+      editor: {
+        theme: basicTheme
+      }
+    }),
+    ...props
+  });
+});
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const extensions = [
+    ..._extensions ?? [],
+    markdownBundle({
+      themeMode
+    })
+  ];
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    extensions,
+    slots: defaultsDeep({}, slots, {
+      editor: {
+        theme: markdownTheme
+      }
+    }),
+    ...props
+  });
+});
 export {
   BaseTextEditor,
   Doc,
@@ -1321,27 +1318,34 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YText,
+  YText2 as YText,
   YXmlFragment,
-  autocomplete,
   basicBundle,
-  codeTheme,
+  basicTheme,
+  chalky,
+  coral,
+  createHyperlinkTooltip,
   cursorColor,
-  defaultSlots,
-  defaultTextSlots,
-  defaultTheme,
-  link,
-  listener,
+  cyan,
+  highlightBackground,
+  hyperLinkExtension,
+  hyperlinkDecoration,
+  hyperlinkStyle,
+  hyperlinkWidget,
+  invalid,
+  ivory,
+  malibu,
   markdownBundle,
   markdownHighlightStyle,
-  markdownTags,
-  markdownTagsExtension,
-  statefield,
-  styles,
+  markdownTheme,
+  onChangeExtension,
+  sage,
+  stone,
   tags2 as tags,
-  tasklist,
-  textTheme,
-  tooltip,
-  useTextModel
+  tooltipBackground,
+  useCollaboration,
+  useTextModel,
+  violet,
+  whiskey
 };
 //# sourceMappingURL=index.mjs.map