@dxos/react-ui-editor 0.3.9-main.2dc53cf → 0.3.9-main.318af16

package/dist/lib/browser/index.mjs

@@ -1,235 +1,24 @@
-// packages/ui/react-ui-editor/src/components/Editor/Editor.tsx
-import React3, { forwardRef as forwardRef3, memo } from "react";
-import { YXmlFragment } from "@dxos/text-model";
-
-// packages/ui/react-ui-editor/src/model.ts
-import { useMemo } from "react";
-
-// packages/ui/react-ui-editor/src/yjs/cursors.ts
-import * as random from "lib0/random";
-var cursorColors = [
-  {
-    color: "#30bced",
-    light: "#30bced33"
-  },
-  {
-    color: "#6eeb83",
-    light: "#6eeb8333"
-  },
-  {
-    color: "#ffbc42",
-    light: "#ffbc4233"
-  },
-  {
-    color: "#ecd444",
-    light: "#ecd44433"
-  },
-  {
-    color: "#ee6352",
-    light: "#ee635233"
-  },
-  {
-    color: "#9ac2c9",
-    light: "#9ac2c933"
-  },
-  {
-    color: "#8acb88",
-    light: "#8acb8833"
-  },
-  {
-    color: "#1be7ff",
-    light: "#1be7ff33"
-  }
-];
-var cursorColor = cursorColors[random.uint32() % cursorColors.length];
-
-// packages/ui/react-ui-editor/src/yjs/space-provider.ts
-import * as decoding from "lib0/decoding";
-import * as encoding from "lib0/encoding";
-import { Observable } from "lib0/observable";
-import * as awarenessProtocol from "y-protocols/awareness";
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/yjs/space-provider.ts";
-var messageAwareness = 1;
-var messageQueryAwareness = 3;
-var SpaceAwarenessProvider = class extends Observable {
-  constructor({ space, doc, channel, awareness }) {
-    super();
-    this._space = space;
-    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
-    this._channel = channel;
-    this._clientId = doc.clientID;
-    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
-    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
-    if (typeof window !== "undefined") {
-      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
-    } else if (typeof process !== "undefined") {
-      process.on("exit", this._handleBeforeUnload.bind(this));
-    }
-    const encoderAwarenessQuery = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
-    const encoderAwarenessState = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwarenessState, awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
-      this._clientId
-    ]));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
-  }
-  get awareness() {
-    return this._awareness;
-  }
-  _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log("awareness update", {
-      added,
-      updated,
-      removed,
-      origin
-    }, {
-      F: __dxlog_file,
-      L: 67,
-      S: this,
-      C: (f, a) => f(...a)
-    });
-    const changedClients = added.concat(updated).concat(removed);
-    const encoderAwareness = encoding.createEncoder();
-    encoding.writeVarUint(encoderAwareness, messageAwareness);
-    encoding.writeVarUint8Array(encoderAwareness, awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
-  }
-  _handleSpaceMessage({ payload }) {
-    log("space message", payload, {
-      F: __dxlog_file,
-      L: 79,
-      S: this,
-      C: (f, a) => f(...a)
-    });
-    const data = new Uint8Array(Array.from(Object.values(payload)));
-    const encoder = this._readMessage(data);
-    if (encoder) {
-      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
-    }
-  }
-  _readMessage(message) {
-    const decoder = decoding.createDecoder(message);
-    const encoder = encoding.createEncoder();
-    const messageType = decoding.readVarUint(decoder);
-    let sendReply = false;
-    switch (messageType) {
-      case messageAwareness: {
-        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
-        break;
-      }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
-        sendReply = true;
-        break;
-      }
-      default: {
-        console.error("Invalid message:", messageType);
-        return encoder;
-      }
-    }
-    if (!sendReply) {
-      return null;
-    }
-    return encoder;
-  }
-  _handleBeforeUnload() {
-    awarenessProtocol.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
-  }
-};
+// packages/ui/react-ui-editor/src/index.ts
+import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
+import { Doc, YText as YText2, YXmlFragment } from "@dxos/text-model";
 
-// packages/ui/react-ui-editor/src/model.ts
-var useTextModel = ({ identity, space, text }) => {
-  const provider = useMemo(() => {
-    if (!space || !text?.doc) {
-      return void 0;
-    }
-    return new SpaceAwarenessProvider({
-      space,
-      doc: text.doc,
-      channel: `yjs.awareness.${text.id}`
-    });
-  }, [
-    identity,
-    space,
-    text?.doc
-  ]);
-  if (!text?.doc || !text?.content) {
-    return void 0;
-  }
-  return {
-    id: text.doc.guid,
-    content: text.content,
-    provider,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-};
+// packages/ui/react-ui-editor/src/components/TextEditor/index.ts
+import { tags as tags2 } from "@lezer/highlight";
 
-// packages/ui/react-ui-editor/src/components/Markdown/Markdown.tsx
-import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { bracketMatching, defaultHighlightStyle, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { lintKeymap } from "@codemirror/lint";
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { EditorState, StateField } from "@codemirror/state";
+// 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 { keymap, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, placeholder, rectangularSelection, EditorView } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { vim } from "@replit/codemirror-vim";
-import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo as useMemo2, useCallback } from "react";
-import { yCollab } from "y-codemirror.next";
-import { generateName } from "@dxos/display-name";
-import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue } from "@dxos/react-ui-theme";
-import { YText } from "@dxos/text-model";
-
-// packages/ui/react-ui-editor/src/components/Markdown/markdownTags.ts
-import { styleTags, Tag } from "@lezer/highlight";
-var markdownTags = {
-  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({
-      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
-    })
-  ]
-};
+import { placeholder } from "@codemirror/view";
+var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
+  bracketMatching(),
+  closeBrackets(),
+  _placeholder && placeholder(_placeholder),
+  // TODO(burdon): Is this required?
+  themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
+].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
+// 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
@@ -242,13 +31,6 @@ var heading = {
   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 blockquote = "mlb-2 border-is-4 border-neutral-500/50 pis-5";
-var unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
-var orderedList = 'mlb-2 grid grid-cols-[min-content_1fr]  [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
-var listItem = "contents before:[counter-increment:section]";
-var codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
-var horizontalRule = "mlb-4 border-neutral-500/50";
-var paragraph = "mlb-1";
 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");
@@ -260,53 +42,357 @@ var mark = "!font-normal !no-underline !text-inherit opacity-40";
 import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 
-// packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
-var malibu = "#61afef";
-var cursor = "#ffffff";
-var monospace = get(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"
+// 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"
+  }
+};
+
+// 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, WidgetType } from "@codemirror/view";
+var Link = class extends WidgetType {
+  constructor(_anchor, _text, _url) {
+    super();
+    this._anchor = _anchor;
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._text === other.text && this._url === other.url;
+  }
+  toDOM(view) {
+    const link = document.createElement("a");
+    link.setAttribute("class", "cm-link");
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute("target", "_blank");
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._anchor
+          }
+        });
+      };
+    }
+    return link;
+  }
+};
+var hyperlinkDecoration = ({ link } = {}) => {
+  return StateField2.define({
+    create: (state) => update(state, link),
+    update: (_, tr) => update(tr.state, link),
+    provide: (field) => EditorView.decorations.from(field)
+  });
+};
+var update = (state, link) => {
+  const builder = new RangeSetBuilder();
+  const cursor = state.selection.main.head;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      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 Link(node.from, text, link ? url : void 0)
+          }));
+          return false;
+        }
+      }
+      return true;
+    }
+  });
+  return builder.finish();
+};
+
+// 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 EditorView2, 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 = EditorView2.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";
+import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, foldKeymap, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+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, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/tags.ts
+import { styleTags, Tag } from "@lezer/highlight";
+var markdownTags = {
+  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({
+      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',
@@ -331,40 +417,42 @@ var markdownTheme = {
   },
   "& .cm-line": {
     paddingInline: 0,
+    lineHeight: 1.6,
     minBlockSize: "1.6em"
   },
   "& .cm-line *": {
     lineHeight: 1.6
   },
   "&.cm-focused .cm-selectionBackground, & .cm-selectionBackground": {
-    background: get(tokens, "extend.colors.primary.150", "#00ffff")
+    background: get2(tokens, "extend.colors.primary.150", "#00ffff")
   },
   ".dark & .cm-selectionBackground, .dark &.cm-focused .cm-selectionBackground": {
-    background: get(tokens, "extend.colors.primary.850", "#00ffff")
+    background: get2(tokens, "extend.colors.primary.850", "#00ffff")
   },
   "& .cm-selectionMatch": {
-    background: get(tokens, "extend.colors.primary.250", "#00ffff") + "44"
+    background: get2(tokens, "extend.colors.primary.250", "#00ffff") + "44"
   },
   ".dark & .cm-selectionMatch": {
-    background: get(tokens, "extend.colors.primary.600", "#00ffff") + "44"
+    background: get2(tokens, "extend.colors.primary.600", "#00ffff") + "44"
   },
   "& .cm-content": {
+    padding: 0,
     caretColor: "black"
   },
   ".dark & .cm-content": {
-    caretColor: cursor
+    caretColor: "white"
   },
   "& .cm-cursor": {
     borderLeftColor: "black"
   },
   ".dark & .cm-cursor": {
-    borderLeftColor: cursor
+    borderLeftColor: "white"
   },
   ".cm-placeholder": {
-    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   },
   "& .cm-scroller": {
-    fontFamily: get(tokens, "fontFamily.mono", []).join(","),
+    fontFamily: get2(tokens, "fontFamily.mono", []).join(","),
     overflow: "visible"
   },
   "& .cm-activeLine": {
@@ -374,7 +462,7 @@ var markdownTheme = {
     backgroundColor: "transparent"
   },
   "& .cm-ySelectionInfo": {
-    fontFamily: get(tokens, "fontFamily.body", []).join(","),
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
     padding: "2px 4px",
     marginBlockStart: "-4px"
   },
@@ -397,8 +485,16 @@ var markdownTheme = {
   "& .cm-yLineSelection": {
     margin: "0"
   },
-  ...Object.keys(get(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get(tokens, [
+  ".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,
@@ -417,7 +513,7 @@ var markdownTheme = {
     return acc;
   }, {})
 };
-var markdownDarkHighlighting = HighlightStyle.define([
+var markdownHighlightStyle = HighlightStyle.define([
   {
     tag: [
       tags.keyword,
@@ -533,17 +629,570 @@ var markdownDarkHighlighting = HighlightStyle.define([
 ], {
   scope: markdownLanguage,
   all: {
-    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
   }
 });
 
-// packages/ui/react-ui-editor/src/components/Markdown/Markdown.tsx
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
+var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
+  return [
+    bracketMatching2(),
+    closeBrackets2(),
+    _placeholder && placeholder2(_placeholder),
+    EditorState.allowMultipleSelections.of(true),
+    EditorView3.lineWrapping,
+    // autocompletion(),
+    crosshairCursor(),
+    dropCursor(),
+    drawSelection(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    highlightSelectionMatches(),
+    highlightSpecialChars(),
+    history(),
+    indentOnInput(),
+    rectangularSelection(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      // ...completionKeymap,
+      ...defaultKeymap,
+      ...foldKeymap,
+      ...historyKeymap,
+      ...lintKeymap,
+      ...searchKeymap,
+      indentWithTab
+    ]),
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    markdown({
+      base: markdownLanguage2,
+      codeLanguages: languages,
+      extensions: [
+        // 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
+      ]
+    }),
+    // 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
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView4 } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { vim } from "@replit/codemirror-vim";
+import defaultsDeep from "lodash.defaultsdeep";
+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";
+
+// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
+import { useEffect, useMemo } from "react";
+import { yCollab } from "y-codemirror.next";
+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/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/automerge/automerge-plugin/PatchSemaphore.ts
+import { next as automerge } from "@dxos/automerge/automerge";
+
+// 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) {
+    const changeSpec = handlePatch(patch, target, view.state);
+    if (changeSpec != null) {
+      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, "\n");
+      selection = selection.map(changeSet, 1);
+      view.dispatch({
+        changes: changeSet,
+        annotations: reconcileAnnotationType.of({})
+      });
+    }
+  }
+  view.dispatch({
+    selection,
+    annotations: reconcileAnnotationType.of({})
+  });
+};
+var handlePatch = (patch, target, state) => {
+  if (patch.action === "insert") {
+    return handleInsert(target, patch);
+  } else if (patch.action === "splice") {
+    return handleSplice(target, patch);
+  } else if (patch.action === "del") {
+    return handleDel(target, patch);
+  } else if (patch.action === "put") {
+    return handlePut(target, patch, state);
+  } else {
+    return null;
+  }
+};
+var handleInsert = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+  return [
+    {
+      from: index,
+      to: index,
+      insert: text
+    }
+  ];
+};
+var handleSplice = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  return [
+    {
+      from: index,
+      insert: patch.value
+    }
+  ];
+};
+var handleDel = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  const length = patch.length || 1;
+  return [
+    {
+      from: index,
+      to: index + length
+    }
+  ];
+};
+var handlePut = (target, patch, state) => {
+  const index = charPath(target, [
+    ...patch.path,
+    0
+  ]);
+  if (index == null) {
+    return [];
+  }
+  const length = state.doc.length;
+  if (typeof patch.value !== "string") {
+    return [];
+  }
+  return [
+    {
+      from: 0,
+      to: length,
+      insert: patch.value
+    }
+  ];
+};
+var charPath = (textPath, candidatePath) => {
+  if (candidatePath.length !== textPath.length + 1) {
+    return null;
+  }
+  for (let i = 0; i < textPath.length; i++) {
+    if (textPath[i] !== candidatePath[i]) {
+      return null;
+    }
+  }
+  const index = candidatePath[candidatePath.length - 1];
+  if (typeof index === "number") {
+    return index;
+  }
+  return null;
+};
+
+// 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);
+  let hasChanges = false;
+  for (const tr of transactions) {
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
+    });
+  }
+  if (!hasChanges) {
+    return void 0;
+  }
+  const newHeads = handle.changeAt(lastHeads, (doc) => {
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+      });
+    }
+  });
+  return newHeads ?? void 0;
+};
+
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+var PatchSemaphore = class {
+  constructor(field) {
+    this._inReconcile = false;
+    this._queue = [];
+    this.reconcile = (handle, view) => {
+      if (this._inReconcile) {
+        return;
+      }
+      this._inReconcile = true;
+      const path = getPath(view.state, this._field);
+      const oldHeads = getLastHeads(view.state, this._field);
+      let selection = view.state.selection;
+      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+      const toInvert = transactions.slice().reverse();
+      for (const tx of toInvert) {
+        const inverted = tx.changes.invert(tx.startState.doc);
+        selection = selection.map(inverted);
+        view.dispatch({
+          changes: inverted,
+          annotations: reconcileAnnotationType.of(true)
+        });
+      }
+      let newHeads = codeMirrorToAm_default(this._field, handle, transactions, view.state);
+      if (newHeads === null || newHeads === void 0) {
+        newHeads = automerge.getHeads(handle.docSync());
+      }
+      const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
+      amToCodemirror_default(view, selection, path, diff);
+      view.dispatch({
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotationType.of({})
+      });
+      this._inReconcile = false;
+    };
+    if (field !== void 0) {
+      this._field = field;
+    }
+  }
+};
+
+// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
+var effectType = StateEffect.define({});
+var updateHeads = (newHeads) => effectType.of({
+  newHeads
+});
+var getLastHeads = (state, field) => state.field(field).lastHeads;
+var getPath = (state, field) => state.field(field).path;
+var semaphoreFacet = Facet.define({
+  combine: (values) => values.at(-1)
+});
+var automergePlugin = (handle, path) => {
+  const stateField = StateField3.define({
+    create: () => ({
+      lastHeads: automerge2.getHeads(handle.docSync()),
+      unreconciledTransactions: [],
+      path: path.slice()
+    }),
+    update: (value, tr) => {
+      const result = {
+        lastHeads: value.lastHeads,
+        unreconciledTransactions: value.unreconciledTransactions.slice(),
+        path: path.slice()
+      };
+      let clearUnreconciled = false;
+      for (const effect of tr.effects) {
+        if (effect.is(effectType)) {
+          result.lastHeads = effect.value.newHeads;
+          clearUnreconciled = true;
+        }
+      }
+      if (clearUnreconciled) {
+        result.unreconciledTransactions = [];
+      } else {
+        if (!isReconcileTx(tr)) {
+          result.unreconciledTransactions.push(tr);
+        }
+      }
+      return result;
+    }
+  });
+  const semaphore = new PatchSemaphore(stateField);
+  const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
+    constructor(view) {
+      this._handleChange = () => {
+        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+      };
+      this._view = view;
+      handle.addListener("change", this._handleChange);
+    }
+    update(update2) {
+      if (update2.transactions.length > 0 && update2.transactions.some((t) => !isReconcileTx(t))) {
+        queueMicrotask(() => {
+          this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+        });
+      }
+    }
+    destroy() {
+      handle.addListener("change", this._handleChange);
+    }
+  });
+  return {
+    extension: [
+      stateField,
+      semaphoreFacet.of(semaphore),
+      viewPlugin
+    ]
+  };
+};
+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 = [
+  {
+    color: "#30bced",
+    light: "#30bced33"
+  },
+  {
+    color: "#6eeb83",
+    light: "#6eeb8333"
+  },
+  {
+    color: "#ffbc42",
+    light: "#ffbc4233"
+  },
+  {
+    color: "#ecd444",
+    light: "#ecd44433"
+  },
+  {
+    color: "#ee6352",
+    light: "#ee635233"
+  },
+  {
+    color: "#9ac2c9",
+    light: "#9ac2c933"
+  },
+  {
+    color: "#8acb88",
+    light: "#8acb8833"
+  },
+  {
+    color: "#1be7ff",
+    light: "#1be7ff33"
+  }
+];
+var cursorColor = cursorColors[random.uint32() % cursorColors.length];
+
+// packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts
+import * as decoding from "lib0/decoding";
+import * as encoding from "lib0/encoding";
+import { Observable } from "lib0/observable";
+import * as awarenessProtocol from "y-protocols/awareness";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
+var messageAwareness = 1;
+var messageQueryAwareness = 3;
+var SpaceAwarenessProvider = class extends Observable {
+  constructor({ space, doc, channel, awareness }) {
+    super();
+    this._space = space;
+    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
+    this._channel = channel;
+    this._clientId = doc.clientID;
+    this._awareness.on("update", this._handleAwarenessUpdate.bind(this));
+    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
+    if (typeof window !== "undefined") {
+      window.addEventListener("beforeunload", this._handleBeforeUnload.bind(this));
+    } else if (typeof process !== "undefined") {
+      process.on("exit", this._handleBeforeUnload.bind(this));
+    }
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwarenessState, awarenessProtocol.encodeAwarenessUpdate(this.awareness, [
+      this._clientId
+    ]));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
+  }
+  get awareness() {
+    return this._awareness;
+  }
+  _handleAwarenessUpdate({ added, updated, removed }, origin) {
+    log("awareness update", {
+      added,
+      updated,
+      removed,
+      origin
+    }, {
+      F: __dxlog_file,
+      L: 67,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const changedClients = added.concat(updated).concat(removed);
+    const encoderAwareness = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwareness, messageAwareness);
+    encoding.writeVarUint8Array(encoderAwareness, awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients));
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
+  }
+  _handleSpaceMessage({ payload }) {
+    log("space message", payload, {
+      F: __dxlog_file,
+      L: 79,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const data = new Uint8Array(Array.from(Object.values(payload)));
+    const encoder = this._readMessage(data);
+    if (encoder) {
+      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+    }
+  }
+  _readMessage(message) {
+    const decoder = decoding.createDecoder(message);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder);
+    let sendReply = false;
+    switch (messageType) {
+      case messageAwareness: {
+        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
+        break;
+      }
+      case messageQueryAwareness: {
+        encoding.writeVarUint(encoder, messageAwareness);
+        encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
+        sendReply = true;
+        break;
+      }
+      default: {
+        console.error("Invalid message:", messageType);
+        return encoder;
+      }
+    }
+    if (!sendReply) {
+      return null;
+    }
+    return encoder;
+  }
+  _handleBeforeUnload() {
+    awarenessProtocol.removeAwarenessStates(this._awareness, [
+      this._clientId
+    ], "window unload");
+  }
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var useTextModel = ({ identity, space, text }) => {
+  const provider = useMemo2(() => {
+    if (isActualAutomergeObject(text)) {
+      return void 0;
+    }
+    if (!space || !text?.doc) {
+      return void 0;
+    }
+    return new SpaceAwarenessProvider({
+      space,
+      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
+  ]);
+  if (isActualAutomergeObject(text)) {
+    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;
+  }
+  return {
+    id: text.doc.guid,
+    content: text.content,
+    provider,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var EditorModes = [
   "default",
   "vim"
 ];
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
-  const { id, content, provider, peer } = model ?? {};
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots, editorMode }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
@@ -555,110 +1204,33 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
     editor: parent,
     state,
     view
-  }));
-  const listenChangesExtension = useMemo2(() => StateField.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged && onChange) {
-        onChange(transaction.newDoc);
-      }
-      return null;
-    }
   }), [
-    onChange
-  ]);
-  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
+    view,
+    state,
+    parent
   ]);
-  useEffect(() => {
+  const collaboration = useCollaboration(model, themeMode);
+  useEffect2(() => {
     if (!parent) {
       return;
     }
-    const state2 = EditorState.create({
-      doc: content?.toString(),
+    const initialText = isDocAccessor2(model.content) ? get3(model.content.handle.docSync(), model.content.path) : model.content?.toString();
+    const state2 = EditorState2.create({
+      doc: initialText,
       extensions: [
-        // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
-        listenChangesExtension,
-        ...editorMode === "vim" ? [
-          vim()
-        ] : [],
-        // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-        highlightActiveLineGutter(),
-        highlightSpecialChars(),
-        history(),
-        drawSelection(),
-        dropCursor(),
-        EditorState.allowMultipleSelections.of(true),
-        indentOnInput(),
-        syntaxHighlighting(defaultHighlightStyle, {
-          fallback: true
-        }),
-        bracketMatching(),
-        closeBrackets(),
-        autocompletion(),
-        rectangularSelection(),
-        crosshairCursor(),
-        highlightActiveLine(),
-        highlightSelectionMatches(),
-        placeholder(slots.editor?.placeholder ?? ""),
-        keymap.of([
-          ...closeBracketsKeymap,
-          ...defaultKeymap,
-          ...searchKeymap,
-          ...historyKeymap,
-          ...foldKeymap,
-          ...completionKeymap,
-          ...lintKeymap,
-          indentWithTab
-        ]),
-        EditorView.lineWrapping,
-        // Themes.
-        markdown({
-          base: markdownLanguage2,
-          codeLanguages: languages,
-          extensions: [
-            markdownTagsExtension
-          ]
-        }),
-        EditorView.theme({
-          ...markdownTheme,
-          ...slots.editor?.markdownTheme
-        }),
-        ...themeMode === "dark" ? [
-          syntaxHighlighting(oneDarkHighlightStyle)
-        ] : [
-          syntaxHighlighting(defaultHighlightStyle)
-        ],
-        // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-        syntaxHighlighting(markdownDarkHighlighting),
-        // Replication and awareness (incl. remote selection).
-        ...content instanceof YText ? [
-          yCollab(content, provider?.awareness)
-        ] : [],
+        // TODO(burdon): Factor out VIM mode?
+        editorMode === "vim" && vim(),
+        // Replication.
+        collaboration,
+        // Theme.
+        slots?.editor?.theme && EditorView4.theme(slots?.editor?.theme),
         // Custom.
         ...extensions
-      ]
+      ].filter(Boolean)
     });
     setState(state2);
     view?.destroy();
-    setView(new EditorView({
+    setView(new EditorView4({
       state: state2,
       parent
     }));
@@ -669,8 +1241,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
     };
   }, [
     parent,
-    content,
-    provider?.awareness,
+    model.content,
     themeMode,
     editorMode
   ]);
@@ -691,461 +1262,89 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
     editorMode
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    tabIndex: 0,
+    key: model.id,
     ref: setParent,
-    key: id,
-    ...slots.root,
-    ...editorMode !== "vim" ? tabsterDOMAttribute : {},
+    tabIndex: 0,
+    ...slots?.root,
+    ...editorMode !== "vim" && tabsterDOMAttribute,
     onKeyUp: handleKeyUp
   });
 });
-
-// packages/ui/react-ui-editor/src/components/RichText/RichText.tsx
-import { mergeAttributes } from "@tiptap/core";
-import Collaboration from "@tiptap/extension-collaboration";
-import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
-import Heading from "@tiptap/extension-heading";
-import ListItem from "@tiptap/extension-list-item";
-import Placeholder from "@tiptap/extension-placeholder";
-import { EditorContent, useEditor as useNaturalEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import React2, { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useMemo as useMemo3 } from "react";
-import { generateName as generateName2 } from "@dxos/display-name";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var useEditor = ({ model, placeholder: placeholder3 = "Enter text\u2026", slots = {} }) => {
-  const extensions = useMemo3(() => [
-    StarterKit.configure({
-      // Extensions
-      history: false,
-      // Nodes
-      blockquote: {
-        HTMLAttributes: {
-          class: blockquote
-        }
-      },
-      bulletList: {
-        HTMLAttributes: {
-          class: unorderedList
-        }
-      },
-      codeBlock: {
-        HTMLAttributes: {
-          class: codeBlock
-        }
-      },
-      heading: false,
-      horizontalRule: {
-        HTMLAttributes: {
-          class: horizontalRule
-        }
-      },
-      listItem: false,
-      orderedList: {
-        HTMLAttributes: {
-          class: orderedList
-        }
-      },
-      paragraph: {
-        HTMLAttributes: {
-          class: paragraph
-        }
-      },
-      // Marks
-      bold: {
-        HTMLAttributes: {
-          class: bold
-        }
-      },
-      code: {
-        HTMLAttributes: {
-          class: codeWithoutMarks
-        }
-      },
-      italic: {
-        HTMLAttributes: {
-          class: italic
-        }
-      },
-      strike: {
-        HTMLAttributes: {
-          class: strikethrough
-        }
-      }
-    }),
-    Heading.extend({
-      renderHTML({ node, HTMLAttributes }) {
-        const hasLevel = this.options.levels.includes(node.attrs.level);
-        const level = hasLevel ? node.attrs.level : this.options.levels[0];
-        return [
-          `h${level}`,
-          mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-            class: heading[level]
-          }),
-          0
-        ];
-      }
-    }),
-    ListItem.extend({
-      renderHTML: ({ HTMLAttributes }) => [
-        "li",
-        mergeAttributes(HTMLAttributes, {
-          marker: "\u2022 ",
-          class: listItem
-        }),
-        [
-          "div",
-          {
-            role: "none"
-          },
-          0
-        ]
-      ]
-    }),
-    // https://github.com/ueberdosis/tiptap/tree/main/packages/extension-collaboration
-    ...model && typeof model.content !== "string" ? [
-      Collaboration.configure({
-        fragment: model.content
-      })
-    ] : [],
-    ...model?.provider ? [
-      CollaborationCursor.configure({
-        provider: model.provider,
-        user: model.peer && {
-          name: model.peer.name ?? generateName2(model.peer.id),
-          color: cursorColor.color
-        }
-      })
-    ] : [],
-    Placeholder.configure({
-      placeholder: placeholder3,
-      emptyEditorClass: "before:content-[attr(data-placeholder)] before:absolute opacity-50 cursor-text"
+var TextEditor = /* @__PURE__ */ forwardRef(({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const extensions = [
+    ..._extensions ?? [],
+    basicBundle({
+      themeMode,
+      placeholder: slots?.editor?.placeholder
     })
-  ], [
-    model?.id
-  ]);
-  return useNaturalEditor({
+  ];
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
     extensions,
-    editorProps: {
-      attributes: {
-        class: mx2("focus:outline-none focus-visible:outline-none", slots.editor?.className),
-        spellcheck: slots.editor?.spellCheck === false ? "false" : "true",
-        tabindex: slots.editor?.tabIndex ? String(slots.editor?.tabIndex) : "0"
+    slots: defaultsDeep({}, slots, {
+      editor: {
+        theme: basicTheme
       }
-    }
-  }, [
-    extensions
-  ]);
-};
-var RichTextEditor = /* @__PURE__ */ forwardRef2((props, ref) => {
-  const editor = useEditor(props);
-  useImperativeHandle2(ref, () => editor, [
-    editor
-  ]);
-  return /* @__PURE__ */ React2.createElement(EditorContent, {
-    ...props.slots?.root,
-    editor
-  });
-});
-
-// packages/ui/react-ui-editor/src/components/Editor/Editor.tsx
-var Editor = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ slots, ...params }, forwardedRef) => {
-  const model = useTextModel(params);
-  if (model?.content instanceof YXmlFragment) {
-    return /* @__PURE__ */ React3.createElement(RichTextEditor, {
-      ref: forwardedRef,
-      model,
-      slots
-    });
-  } else {
-    return /* @__PURE__ */ React3.createElement(MarkdownEditor, {
-      ref: forwardedRef,
-      model,
-      slots
-    });
-  }
-}));
-
-// 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/TextEditor.tsx
-import { closeBrackets as closeBrackets2 } from "@codemirror/autocomplete";
-import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView2, placeholder as placeholder2 } from "@codemirror/view";
-import React4, { forwardRef as forwardRef4, useEffect as useEffect2, useImperativeHandle as useImperativeHandle3, useState as useState2, useCallback as useCallback2 } from "react";
-import { yCollab as yCollab2 } from "y-codemirror.next";
-import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
-import { YText as YText2 } from "@dxos/text-model";
-
-// packages/ui/react-ui-editor/src/components/TextEditor/theme.ts
-import get2 from "lodash.get";
-import { tailwindConfig as tailwindConfig2 } from "@dxos/react-ui-theme";
-var tokens2 = tailwindConfig2({}).theme;
-var defaultStyles = {
-  "&.cm-focused": {
-    outline: "none"
-  },
-  ".cm-placeholder": {
-    fontFamily: get2(tokens2, "fontFamily.body", []).join(",")
-  },
-  "& .cm-scroller": {
-    fontFamily: get2(tokens2, "fontFamily.body", []).join(","),
-    overflow: "visible"
-  },
-  ".cm-tooltip": {
-    backgroundColor: "transparent",
-    border: "none"
-  }
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
-  const { id, content } = model ?? {};
-  const { themeMode } = useThemeContext2();
-  const [parent, setParent] = useState2(null);
-  const [state, setState] = useState2();
-  const [view, setView] = useState2();
-  useImperativeHandle3(forwardedRef, () => {
-    return {
-      editor: parent,
-      state,
-      view
-    };
-  }, [
-    view
-  ]);
-  useEffect2(() => {
-    if (!parent) {
-      return;
-    }
-    view?.destroy();
-    const state2 = EditorState2.create({
-      doc: content?.toString(),
-      extensions: [
-        bracketMatching2(),
-        closeBrackets2(),
-        placeholder2(slots.editor?.placeholder ?? ""),
-        EditorView2.lineWrapping,
-        // Themes.
-        EditorView2.theme(theme),
-        ...themeMode === "dark" ? [
-          syntaxHighlighting2(oneDarkHighlightStyle2)
-        ] : [
-          syntaxHighlighting2(defaultHighlightStyle2)
-        ],
-        // Replication.
-        ...content instanceof YText2 ? [
-          yCollab2(content, void 0)
-        ] : [],
-        // Custom.
-        ...extensions
-      ]
-    });
-    setState(state2);
-    setView(new EditorView2({
-      state: state2,
-      parent
-    }));
-    return () => {
-      view?.destroy();
-      setView(void 0);
-      setState(void 0);
-    };
-  }, [
-    parent,
-    content,
-    themeMode
-  ]);
-  const handleKeyDown = useCallback2((event) => {
-    if (view) {
-      const { head, from, to } = view.state.selection.ranges[0];
-      const { number } = view.state.doc.lineAt(head);
-      const after = view.state.sliceDoc(from);
-      onKeyDown?.(event, {
-        from,
-        to,
-        line: number,
-        lines: view.state.doc.lines,
-        after
-      });
-    }
-  }, [
-    view
-  ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    key: id,
-    ref: setParent,
-    ...slots.root,
-    onKeyDown: handleKeyDown,
+    }),
     ...props
   });
 });
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink.tsx
-import { Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
-var linkDecorator = () => new MatchDecorator({
-  regexp: markdownLinkRegexp,
-  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, Decoration.mark({
-      class: "cm-hyperlink-bracket"
-    }));
-    add(p1.start, p1.end, Decoration.mark({
-      class: "cm-hyperlink-label"
-    }));
-    add(p2.start, p2.end, Decoration.mark({
-      class: "cm-hyperlink-bracket"
-    }));
-    add(p3.start, p3.end, Decoration.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(update) {
-      if (update.docChanged || update.viewportChanged) {
-        this.decorations = this.decorator.updateDeco(update, 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 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
   });
-}
-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 hyperlink = [
-  hyperLinkExtension(),
-  hyperLinkStyle
-];
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkTooltip.tsx
-import { hoverTooltip } from "@codemirror/view";
-import { ArrowCircleUp } from "@phosphor-icons/react";
-import React5, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { getSize, mx as mx3, tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp2 = /\[([^\]]+)]\(([^)]+)\)/;
-var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp2) => 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
-      };
-    }
-  };
 });
-var defaultHyperLinkTooltip = createHyperlinkTooltip((el, url) => {
-  const web = new URL(url);
-  createRoot(el).render(/* @__PURE__ */ React5.createElement(StrictMode, null, /* @__PURE__ */ React5.createElement("div", {
-    className: "flex gap-1 items-center"
-  }, /* @__PURE__ */ React5.createElement(ArrowCircleUp, {
-    className: mx3(getSize(6), "text-blue-500")
-  }), /* @__PURE__ */ React5.createElement("p", {
-    className: "pr-1"
-  }, web.origin))));
-});
-
-// packages/ui/react-ui-editor/src/index.ts
-import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
-import { Doc, YText as YText3, YXmlFragment as YXmlFragment2 } from "@dxos/text-model";
 export {
+  BaseTextEditor,
   Doc,
-  Editor,
   EditorModes,
   MarkdownEditor,
-  RichTextEditor,
+  SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YText3 as YText,
-  YXmlFragment2 as YXmlFragment,
+  YText2 as YText,
+  YXmlFragment,
+  basicBundle,
+  basicTheme,
+  chalky,
+  coral,
   createHyperlinkTooltip,
-  defaultHyperLinkTooltip,
-  defaultStyles,
+  cursorColor,
+  cyan,
+  highlightBackground,
   hyperLinkExtension,
-  hyperLinkStyle,
-  hyperlink,
+  hyperlinkDecoration,
+  hyperlinkStyle,
+  hyperlinkWidget,
+  invalid,
+  ivory,
+  malibu,
+  markdownBundle,
+  markdownHighlightStyle,
+  markdownTheme,
+  onChangeExtension,
+  sage,
+  stone,
   tags2 as tags,
-  useTextModel
+  tooltipBackground,
+  useCollaboration,
+  useTextModel,
+  violet,
+  whiskey
 };
 //# sourceMappingURL=index.mjs.map