@dxos/react-ui-editor 0.3.9-main.9ca5eac → 0.3.9-main.9da1d41

package/dist/lib/browser/index.mjs

@@ -1,199 +1,305 @@
-// 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/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
-import { useMemo } from "react";
+// packages/ui/react-ui-editor/src/components/TextEditor/index.ts
+import { tags as tags2 } from "@lezer/highlight";
 
-// packages/ui/react-ui-editor/src/yjs/cursors.ts
-import * as random from "lib0/random";
-var cursorColors = [
-  {
-    color: "#30bced",
-    light: "#30bced33"
+// 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 { 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/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"
   },
-  {
-    color: "#6eeb83",
-    light: "#6eeb8333"
+  "& .cm-line": {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: "1.6em"
   },
-  {
-    color: "#ffbc42",
-    light: "#ffbc4233"
+  "& .cm-line *": {
+    lineHeight: 1.6
   },
-  {
-    color: "#ecd444",
-    light: "#ecd44433"
+  "& .cm-scroller": {
+    fontFamily: get(tokens, "fontFamily.body", []).join(","),
+    overflow: "visible"
   },
-  {
-    color: "#ee6352",
-    light: "#ee635233"
+  "& .cm-content": {
+    padding: 0,
+    caretColor: "black"
   },
-  {
-    color: "#9ac2c9",
-    light: "#9ac2c933"
+  ".dark & .cm-content": {
+    caretColor: "white"
   },
-  {
-    color: "#8acb88",
-    light: "#8acb8833"
+  "& .cm-tooltip": {
+    backgroundColor: "transparent",
+    border: "none"
   },
-  {
-    color: "#1be7ff",
-    light: "#1be7ff33"
+  "& .cm-link": {
+    color: get(tokens, "extend.colors.primary.500"),
+    textDecoration: "underline"
   }
-];
-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));
+// 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());
     }
-    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));
+    return null;
   }
-  get awareness() {
-    return this._awareness;
+});
+
+// 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;
   }
-  _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));
+  eq(other) {
+    return this._text === other.text && this._url === other.url;
   }
-  _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));
+  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;
   }
-  _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;
+};
+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;
     }
-    if (!sendReply) {
-      return null;
+  });
+  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;
     }
-    return encoder;
-  }
-  _handleBeforeUnload() {
-    awarenessProtocol.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
+    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/model.ts
-var useTextModel = ({ identity, space, text }) => {
-  const provider = useMemo(() => {
-    if (!space || !text?.doc) {
-      return void 0;
+// 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);
     }
-    return new SpaceAwarenessProvider({
-      space,
-      doc: text.doc,
-      channel: `yjs.awareness.${text.id}`
-    });
-  }, [
-    identity,
-    space,
-    text?.doc
-  ]);
-  if (!text?.doc || !text?.content) {
-    return void 0;
+    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"
   }
-  return {
-    id: text.doc.guid,
-    content: text.content,
-    provider,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-};
+});
+var hyperlinkWidget = [
+  hyperLinkExtension(),
+  hyperlinkStyle
+];
 
-// packages/ui/react-ui-editor/src/components/Markdown/Markdown.tsx
-import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+// 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 { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { bracketMatching, defaultHighlightStyle, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+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 { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { EditorState, StateField } from "@codemirror/state";
-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";
+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/Markdown/markdownTags.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/tags.ts
 import { styleTags, Tag } from "@lezer/highlight";
 var markdownTags = {
   headingMark: Tag.define(),
@@ -226,48 +332,28 @@ var markdownTagsExtension = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
+// 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 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 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");
-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/Markdown/markdownTheme.ts
+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 cursor = "#ffffff";
-var monospace = get(tokens, "fontFamily.mono", [
+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.
+  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
   //   color: ivory,
   //   backgroundColor: background
@@ -304,7 +390,7 @@ var markdownTheme = {
   //   border: 'none',
   //   color: '#ddd'
   // },
-  ".cm-tooltip": {
+  "& .cm-tooltip": {
     backgroundColor: "transparent",
     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,278 @@ 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 React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState } from "react";
+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 { getColorForValue } from "@dxos/react-ui-theme";
+import { YText } from "@dxos/text-model";
+var useCollaboration = (model, themeMode) => {
+  const { provider, peer, content } = model;
+  const extension = useMemo(() => content instanceof YText ? yCollab(content, provider?.awareness) : 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";
+
+// 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 (!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/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 +912,32 @@ 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 state2 = EditorState2.create({
+      doc: model.content?.toString(),
       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 +948,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
     };
   }, [
     parent,
-    content,
-    provider?.awareness,
+    model.content,
     themeMode,
     editorMode
   ]);
@@ -691,447 +969,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 { 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
-      };
-    }
-  };
 });
-
-// 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,
-  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