@dxos/react-ui-editor 0.3.11-main.121f5a8 → 0.3.11-main.13264f1

package/dist/lib/browser/index.mjs

@@ -11,10 +11,10 @@ import { EditorView as EditorView13 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect3, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } from "react";
 import { log as log2 } from "@dxos/log";
-import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
-import { inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { useThemeContext } from "@dxos/react-ui";
+import { attentionSurface, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
@@ -293,9 +293,9 @@ var Cursor = class _Cursor {
   }
   static {
     this.getCursorFromRange = (state, range) => {
-      const cursorConverter3 = state.facet(_Cursor.converter);
-      const from = cursorConverter3.toCursor(range.from);
-      const to = cursorConverter3.toCursor(range.to, -1);
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
       return [
         from,
         to
@@ -304,10 +304,10 @@ var Cursor = class _Cursor {
   }
   static {
     this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter3 = state.facet(_Cursor.converter);
+      const cursorConverter2 = state.facet(_Cursor.converter);
       const parts = cursor.split(":");
-      const from = cursorConverter3.fromCursor(parts[0]);
-      const to = cursorConverter3.fromCursor(parts[1]);
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
       return from !== void 0 && to !== void 0 ? {
         from,
         to
@@ -386,21 +386,17 @@ var automerge3 = ({ handle, path }) => {
 // packages/ui/react-ui-editor/src/extensions/awareness.ts
 import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
 import { Decoration, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
-import { useEffect } from "react";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
-import { generateName } from "@dxos/display-name";
-import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue } from "@dxos/react-ui-theme";
 var dummyProvider = {
   remoteStateChange: new Event(),
   open: () => {
   },
   close: () => {
   },
+  getRemoteStates: () => [],
   update: () => {
-  },
-  getRemoteStates: () => []
+  }
 };
 var AwarenessProvider = Facet2.define({
   combine: (providers) => providers[0] ?? dummyProvider
@@ -415,29 +411,6 @@ var awareness = (provider = dummyProvider) => {
     styles
   ];
 };
-var useAwareness = ({ awareness: awareness2, peer }) => {
-  const { themeMode } = useThemeContext();
-  useEffect(() => {
-    if (awareness2 && peer) {
-      awareness2.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    awareness2,
-    peer,
-    themeMode
-  ]);
-};
 var RemoteSelectionsDecorator = class {
   constructor(view) {
     this.decorations = RangeSet.of([]);
@@ -599,39 +572,41 @@ var styles = EditorView2.baseTheme({
     marginLeft: "-1px",
     marginRight: "-1px",
     boxSizing: "border-box",
-    display: "inline"
+    display: "inline",
+    cursor: "pointer"
   },
   ".cm-collab-selectionCaretDot": {
     borderRadius: "50%",
     position: "absolute",
-    width: ".4em",
-    height: ".4em",
-    top: "-.2em",
-    left: "-.2em",
+    width: ".5em",
+    height: ".5em",
+    top: "-.25em",
+    left: "-.25em",
     backgroundColor: "inherit",
     transition: "transform .3s ease-in-out",
     boxSizing: "border-box"
   },
   ".cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot": {
-    transformOrigin: "bottom center",
-    transform: "scale(0)"
+    transform: "scale(0)",
+    transformOrigin: "center"
   },
   ".cm-collab-selectionInfo": {
     position: "absolute",
-    top: "-1.05em",
-    left: "-1px",
+    transform: "translate(-50%, 0)",
+    top: "-20px",
+    left: 0,
     fontSize: ".75em",
-    fontFamily: "serif",
+    fontFamily: "sans-serif",
     fontStyle: "normal",
     fontWeight: "normal",
     lineHeight: "normal",
     userSelect: "none",
     color: "white",
-    paddingLeft: "2px",
-    paddingRight: "2px",
+    padding: "2px",
     zIndex: 101,
     transition: "opacity .3s ease-in-out",
     backgroundColor: "inherit",
+    borderRadius: "2px",
     // These should be separate.
     opacity: 0,
     transitionDelay: "0s",
@@ -649,8 +624,8 @@ import { history } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { drawSelection, EditorView as EditorView3, highlightActiveLine, placeholder } from "@codemirror/view";
-var basicBundle = ({ themeMode, placeholder: _placeholder, multiline = true }) => [
-  multiline ? EditorView3.lineWrapping : [],
+var basicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true }) => [
+  lineWrapping ? EditorView3.lineWrapping : [],
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
@@ -972,9 +947,14 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView5, Decoration as Decoration2 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView5 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+import { debounce } from "@dxos/async";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
 import * as random2 from "lib0/random";
@@ -1062,89 +1042,6 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
-// packages/ui/react-ui-editor/src/extensions/code.ts
-var CODE_REGEX = /```[\s\S]*?```/gs;
-var styles2 = EditorView5.baseTheme({
-  "& .cm-codeblock": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
-  },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.50")
-  },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.850")
-  },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: "block",
-    paddingInline: "4px !important"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: "4px !important",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px"
-  },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: "4px !important",
-    borderBottomLeftRadius: "4px",
-    borderBottomRightRadius: "4px"
-  }
-});
-var getLineRange = (lines, from, to) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [
-    start,
-    end
-  ];
-};
-var code2 = () => {
-  const buildDecorations5 = (view) => {
-    const decorations = [];
-    const text = view.state.doc.sliceString(0);
-    const matches = text.matchAll(CODE_REGEX);
-    const blocks = view.viewportLineBlocks;
-    for (const match of matches) {
-      const range = getLineRange(blocks, match.index, match.index + match[0].length);
-      for (let i = range[0]; i <= range[1]; i++) {
-        const block = blocks[i];
-        decorations.push(Decoration2.line({
-          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-        }).range(block.from));
-      }
-    }
-    return Decoration2.set(decorations);
-  };
-  return [
-    ViewPlugin3.fromClass(class {
-      constructor(view) {
-        this.hasFocus = false;
-        this.decorations = buildDecorations5(view);
-      }
-      update(update2) {
-        if (
-          // TODO(burdon): Generalize for other extensions.
-          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
-        ) {
-          this.hasFocus = update2.view.hasFocus;
-          this.decorations = buildDecorations5(update2.view);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles2
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/comments.ts
-import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect as useEffect2 } from "react";
-import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { nonNullable } from "@dxos/util";
-
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
@@ -1182,20 +1079,20 @@ var logChanges = (trs) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var styles3 = EditorView6.baseTheme({
+var styles2 = EditorView5.baseTheme({
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
-  "& .cm-comment-active": {
+  "& .cm-comment-current": {
     backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
 var marks = {
-  highlight: Decoration3.mark({
+  highlight: Decoration2.mark({
     class: "cm-comment"
   }),
-  highlightActive: Decoration3.mark({
-    class: "cm-comment-active"
+  highlightActive: Decoration2.mark({
+    class: "cm-comment-current"
   })
 };
 var setFocus = (view, id, center = true) => {
@@ -1211,11 +1108,11 @@ var setFocus = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView6.scrollIntoView(range.from, center ? {
+        EditorView5.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
-          active: id
+          current: id
         })
       ]
     });
@@ -1260,23 +1157,23 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView6.decorations.compute([
+var highlightDecorations = EditorView5.decorations.compute([
   commentsState
 ], (state) => {
-  const { selection: { active }, comments: comments2 } = state.field(commentsState);
+  const { selection: { current }, comments: comments2 } = state.field(commentsState);
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range || range.from === range.to) {
       console.warn("Invalid range:", range);
       return void 0;
     }
-    if (comment.comment.id === active) {
+    if (comment.comment.id === current) {
       return marks.highlightActive.range(range.from, range.to);
     } else {
       return marks.highlight.range(range.from, range.to);
     }
   }).filter(nonNullable);
-  return Decoration3.set(decorations);
+  return Decoration2.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1298,12 +1195,12 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView6.domEventHandlers({
+    EditorView5.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
     // Handle paste.
-    EditorView6.updateListener.of(({ view, state, transactions }) => {
+    EditorView5.updateListener.of(({ view, state, transactions }) => {
       if (tracked) {
         const paste = transactions.find((tr) => tr.isUserEvent("input.paste"));
         if (paste) {
@@ -1366,7 +1263,7 @@ var comments = (options = {}) => {
       if (id) {
         view.dispatch({
           effects: setSelection.of({
-            active: id
+            current: id
           }),
           selection: {
             anchor: from
@@ -1380,7 +1277,7 @@ var comments = (options = {}) => {
   return [
     commentsState,
     highlightDecorations,
-    styles3,
+    styles2,
     //
     // Keymap.
     //
@@ -1423,7 +1320,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView5.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1453,17 +1350,17 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView6.updateListener.of(({ view, state, changes }) => {
+    EditorView5.updateListener.of(({ view, state }) => {
       let min = Infinity;
-      const { selection: { active, closest }, comments: comments2 } = state.field(commentsState);
+      const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
       const selection = {};
       comments2.forEach(({ comment, range }) => {
         if (head >= range.from && head <= range.to) {
-          selection.active = comment.id;
+          selection.current = comment.id;
           selection.closest = void 0;
         }
-        if (!selection.active) {
+        if (!selection.current) {
           const d = Math.min(Math.abs(head - range.from), Math.abs(head - range.to));
           if (d < min) {
             selection.closest = comment.id;
@@ -1471,7 +1368,7 @@ var comments = (options = {}) => {
           }
         }
       });
-      if (selection.active !== active || selection.closest !== closest) {
+      if (selection.current !== current || selection.closest !== closest) {
         view.dispatch({
           effects: setSelection.of(selection)
         });
@@ -1488,9 +1385,9 @@ var comments = (options = {}) => {
     options.onUpdate ? trackPastedComments(options.onUpdate) : []
   ];
 };
-var useComments = (view, comments2) => {
-  useEffect2(() => {
-    if (view && comments2) {
+var useComments = (view, comments2 = []) => {
+  useEffect(() => {
+    if (view) {
       view.dispatch({
         effects: setComments.of(comments2)
       });
@@ -1501,329 +1398,65 @@ var useComments = (view, comments2) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/hr.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
-var styles4 = EditorView7.baseTheme({
-  "& .cm-hr": {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
-  }
-});
-var HorizontalRuleWidget = class extends WidgetType2 {
-  toDOM() {
-    const el = document.createElement("div");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var decoration = Decoration4.replace({
-  widget: new HorizontalRuleWidget()
-});
-var buildDecorations = (view) => {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === "HorizontalRule") {
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var hr = () => {
-  return [
-    styles4,
-    ViewPlugin4.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations(update2.view);
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView6 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView6.focusChangeEffect.of((_, focused) => {
+    onFocus(focused);
+    return null;
+  }));
+  onChange && extensions.push(EditorView6.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
+  }));
+  return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/image.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView8, WidgetType as WidgetType3 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField3.define({
-    create: (state) => {
-      return Decoration5.set(buildDecorations2(0, state.doc.length, state));
-    },
-    update: (value, tr) => {
-      if (!tr.docChanged && !tr.selection) {
-        return value;
-      }
-      const cursor = tr.state.selection.main.head;
-      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-      let from = Math.min(cursor, oldCursor);
-      let to = Math.max(cursor, oldCursor);
-      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        from = Math.min(from, fromB);
-        to = Math.max(to, toB);
-      });
-      from = tr.state.doc.lineAt(from).from;
-      to = tr.state.doc.lineAt(to).to;
-      return value.map(tr.changes).update({
-        filterFrom: from,
-        filterTo: to,
-        filter: () => false,
-        add: buildDecorations2(from, to, tr.state)
-      });
-    },
-    provide: (field) => EditorView8.decorations.from(field)
-  });
-};
-var buildDecorations2 = (from, to, state) => {
-  const decorations = [];
-  const cursor = state.selection.main.head;
-  syntaxTree2(state).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to;
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration5.replace({
-            block: true,
-            widget: new ImageWidget(url)
-          }).range(hide ? node.from : node.to, node.to));
-        }
-      }
-    },
-    from,
-    to
-  });
-  return decorations;
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { searchKeymap } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView7, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
 };
-var ImageWidget = class extends WidgetType3 {
-  constructor(_url) {
-    super();
-    this._url = _url;
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
+    }
   }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    img.onload = () => img.classList.add("cm-loaded-image");
-    return img;
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/link.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration6, ViewPlugin as ViewPlugin5, WidgetType as WidgetType4 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var link = (options = {}) => {
-  const extensions = [
-    ViewPlugin5.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations3(view, options);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations3(update2.view, options);
-        }
-      }
-    }, {
-      decorations: (v) => v.decorations
-    })
-  ];
-  if (options.onHover) {
-    extensions.push(
-      // https://codemirror.net/examples/tooltip
-      // https://codemirror.net/docs/ref/#view.hoverTooltip
-      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
-      hoverTooltip2((view, pos, side) => {
-        const syntax = syntaxTree3(view.state).resolveInner(pos, side);
-        let link2 = null;
-        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
-          link2 = node.name === "Link" ? node : null;
-        }
-        const url = link2 && link2.getChild("URL");
-        if (!url || !link2) {
-          return null;
-        }
-        const urlText = view.state.sliceDoc(url.from, url.to);
-        return {
-          pos: link2.from,
-          end: link2.to,
-          above: true,
-          create: () => {
-            const el = document.createElement("div");
-            el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, urlText);
-            return {
-              dom: el,
-              offset: {
-                x: 0,
-                y: 4
-              }
-            };
-          }
-        };
-      })
-    );
-  }
-  return extensions;
-};
-var LinkButton = class extends WidgetType4 {
-  constructor(_url, _onAttach) {
-    super();
-    this._url = _url;
-    this._onAttach = _onAttach;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
-  }
-};
-var LinkText = class extends WidgetType4 {
-  constructor(_text, _url) {
-    super();
-    this._text = _text;
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const link2 = document.createElement("a");
-    link2.setAttribute("class", "cm-link");
-    link2.textContent = this._text;
-    if (this._url) {
-      link2.setAttribute("rel", "noreferrer");
-      link2.setAttribute("target", "_blank");
-      link2.href = this._url;
-    } else {
-      link2.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: view.posAtDOM(link2)
-          }
-        });
-      };
-    }
-    return link2;
-  }
-};
-var buildDecorations3 = (view, options) => {
-  const builder = new RangeSetBuilder2();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(state).iterate({
-      enter: (node) => {
-        if (node.name === "Link") {
-          const marks2 = node.node.getChildren("LinkMark");
-          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
-          const urlNode = node.node.getChild("URL");
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-          if (!url) {
-            return false;
-          }
-          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
-            builder.add(node.from, node.to, Decoration6.replace({
-              widget: new LinkText(text, options.link ? url : void 0)
-            }));
-          }
-          if (options.onRender) {
-            builder.add(node.to, node.to, Decoration6.replace({
-              widget: new LinkButton(url, options.onRender)
-            }));
-          }
-          return false;
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-
-// packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView9 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView9.focusChangeEffect.of((_, focused) => {
-    onFocus(focused);
-    return null;
-  }));
-  onChange && extensions.push(EditorView9.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString());
-  }));
-  return extensions;
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history as history2, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { searchKeymap } from "@codemirror/search";
-import { EditorState } from "@codemirror/state";
-import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView10, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import { Table } from "@lezer/markdown";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // Custom.
-  TableCell: Tag.define()
-};
-Table.defineNodes?.forEach((node) => {
-  switch (node?.name) {
-    case "TableCell": {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-var markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
+});
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
   }
 ];
 var markdownHighlightStyle = (readonly) => {
@@ -1983,7 +1616,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView10.lineWrapping,
+    EditorView7.lineWrapping,
     // https://github.com/codemirror/basic-setup
     bracketMatching2(),
     closeBrackets2(),
@@ -2031,44 +1664,396 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: false,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        console.log(context);
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
+// packages/ui/react-ui-editor/src/extensions/markdown/code.ts
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var CODE_REGEX = /```[\s\S]*?```/gs;
+var styles3 = EditorView8.baseTheme({
+  "& .cm-codeblock": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
+  },
+  '&light [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.50")
+  },
+  '&dark [aria-readonly="true"] .cm-codeblock': {
+    background: getToken("extend.colors.neutral.850")
+  },
+  '& [aria-readonly="true"] .cm-codeblock': {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-first': {
+    paddingTop: "4px !important",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-last': {
+    paddingBottom: "4px !important",
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
+  }
+});
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
+};
+var code2 = () => {
+  const buildDecorations6 = (view) => {
+    const decorations = [];
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index, match.index + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(Decoration3.line({
+          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
+        }).range(block.from));
+      }
+    }
+    return Decoration3.set(decorations);
+  };
+  return [
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        this.hasFocus = false;
+        this.decorations = buildDecorations6(view);
+      }
+      update(update2) {
+        if (
+          // TODO(burdon): Generalize for other extensions.
+          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
+        ) {
+          this.hasFocus = update2.view.hasFocus;
+          this.decorations = buildDecorations6(update2.view);
         }
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles3
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration as Decoration4, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+var buildDecorations = (view) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case "ATXHeading1":
+          case "ATXHeading2":
+          case "ATXHeading3":
+          case "ATXHeading4":
+          case "ATXHeading5":
+          case "ATXHeading6": {
+            const mark2 = node.node.getChild("HeaderMark");
+            if (mark2 && (cursor < node.from || cursor > node.to)) {
+              builder.add(mark2.from, mark2.to + 1, Decoration4.replace({}));
+            }
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var heading2 = () => {
+  return [
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations(update2.view);
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin5, WidgetType as WidgetType2 } from "@codemirror/view";
+var styles4 = EditorView9.baseTheme({
+  "& .cm-hr": {
+    // Note that block-level decorations should not have vertical margins,
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+  }
+});
+var HorizontalRuleWidget = class extends WidgetType2 {
+  toDOM() {
+    const el = document.createElement("div");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var decoration = Decoration5.replace({
+  widget: new HorizontalRuleWidget()
+});
+var buildDecorations2 = (view) => {
+  const builder = new RangeSetBuilder2();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree2(state).iterate({
+      enter: (node) => {
+        if (node.name === "HorizontalRule") {
+          if (cursor <= node.from || cursor >= node.to) {
+            builder.add(node.from, node.to, decoration);
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
+var hr = () => {
+  return [
+    styles4,
+    ViewPlugin5.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations2(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations2(update2.view);
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType3 } from "@codemirror/view";
+var image = (options = {}) => {
+  return StateField3.define({
+    create: (state) => {
+      return Decoration6.set(buildDecorations3(0, state.doc.length, state));
+    },
+    update: (value, tr) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations3(from, to, tr.state)
+      });
+    },
+    provide: (field) => EditorView10.decorations.from(field)
+  });
+};
+var buildDecorations3 = (from, to, state) => {
+  const decorations = [];
+  const cursor = state.selection.main.head;
+  syntaxTree3(state).iterate({
+    enter: (node) => {
+      if (node.name === "Image") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const hide = state.readOnly || cursor < node.from || cursor > node.to;
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          decorations.push(Decoration6.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }).range(hide ? node.from : node.to, node.to));
+        }
+      }
+    },
+    from,
+    to
+  });
+  return decorations;
+};
+var ImageWidget = class extends WidgetType3 {
+  constructor(_url) {
+    super();
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const img = document.createElement("img");
+    img.setAttribute("src", this._url);
+    img.setAttribute("class", "cm-image");
+    img.onload = () => img.classList.add("cm-loaded-image");
+    return img;
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType4 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var link = (options = {}) => {
+  const extensions = [
+    ViewPlugin6.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations4(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
+          this.decorations = buildDecorations4(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (v) => v.decorations
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos, side) => {
+        const syntax = syntaxTree4(view.state).resolveInner(pos, side);
+        let link2 = null;
+        for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
+          link2 = node.name === "Link" ? node : null;
+        }
+        const url = link2 && link2.getChild("URL");
+        if (!url || !link2) {
+          return null;
+        }
+        const urlText = view.state.sliceDoc(url.from, url.to);
+        return {
+          pos: link2.from,
+          end: link2.to,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, urlText);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
         };
-      }
-    ]
-  });
+      })
+    );
+  }
+  return extensions;
 };
-
-// packages/ui/react-ui-editor/src/extensions/outliner.ts
-var outliner = (options = {}) => {
-  return [];
+var LinkButton = class extends WidgetType4 {
+  constructor(_url, _onAttach) {
+    super();
+    this._url = _url;
+    this._onAttach = _onAttach;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this._onAttach(el, this._url);
+    return el;
+  }
+};
+var LinkText = class extends WidgetType4 {
+  constructor(_text, _url) {
+    super();
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const link2 = document.createElement("a");
+    link2.setAttribute("class", "cm-link");
+    link2.textContent = this._text;
+    if (this._url) {
+      link2.setAttribute("rel", "noreferrer");
+      link2.setAttribute("target", "_blank");
+      link2.href = this._url;
+    } else {
+      link2.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: view.posAtDOM(link2)
+          }
+        });
+      };
+    }
+    return link2;
+  }
+};
+var buildDecorations4 = (view, options) => {
+  const builder = new RangeSetBuilder3();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree4(state).iterate({
+      enter: (node) => {
+        if (node.name === "Link") {
+          const marks2 = node.node.getChildren("LinkMark");
+          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+          if (!url) {
+            return false;
+          }
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
+            builder.add(node.from, node.to, Decoration7.replace({
+              widget: new LinkText(text, options.link ? url : void 0)
+            }));
+          }
+          if (options.onRender) {
+            builder.add(node.to, node.to, Decoration7.replace({
+              widget: new LinkButton(url, options.onRender)
+            }));
+          }
+          return false;
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
 };
 
-// packages/ui/react-ui-editor/src/extensions/table.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
@@ -2077,7 +2062,7 @@ var table = (options = {}) => {
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder3();
+  const builder = new RangeSetBuilder4();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2085,7 +2070,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree4(state).iterate({
+  syntaxTree5(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2117,10 +2102,10 @@ var update = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration7.replace({
+    hide && builder.add(table2.from, table2.to, Decoration8.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration7.mark({
+    builder.add(table2.from, table2.to, Decoration8.mark({
       class: "cm-table"
     }));
   });
@@ -2163,10 +2148,10 @@ var TableWidget = class extends WidgetType5 {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/tasklist.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration8, WidgetType as WidgetType6, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration9, WidgetType as WidgetType6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 var styles5 = EditorView12.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
@@ -2213,23 +2198,23 @@ var CheckboxWidget = class extends WidgetType6 {
     return false;
   }
 };
-var checkedDecoration = Decoration8.replace({
+var checkedDecoration = Decoration9.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDecoration = Decoration8.replace({
+var uncheckedDecoration = Decoration9.replace({
   widget: new CheckboxWidget(false)
 });
-var buildDecorations4 = (view) => {
-  const builder = new RangeSetBuilder4();
+var buildDecorations5 = (view) => {
+  const builder = new RangeSetBuilder5();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree5(state).iterate({
+    syntaxTree6(state).iterate({
       enter: (node) => {
         if (node.name === "TaskMarker") {
           if (cursor < node.from || cursor > node.to) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration8.mark({
+            builder.add(node.from - 2, node.from - 1, Decoration9.mark({
               class: "cm-task"
             }));
             builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
@@ -2244,13 +2229,13 @@ var buildDecorations4 = (view) => {
 };
 var tasklist = (options = {}) => {
   return [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin7.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations4(view);
+        this.decorations = buildDecorations5(view);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations4(update2.view);
+          this.decorations = buildDecorations5(update2.view);
         }
       }
     }, {
@@ -2260,6 +2245,40 @@ var tasklist = (options = {}) => {
   ];
 };
 
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+var mention = ({ onSearch }) => {
+  return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: false,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        console.log(context);
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
+        }
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/outliner.ts
+var outliner = (options = {}) => {
+  return [];
+};
+
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
 import { keymap as keymap5 } from "@codemirror/view";
 var defaultItems = [
@@ -2317,27 +2336,6 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
-import { yCollab } from "y-codemirror.next";
-
-// packages/ui/react-ui-editor/src/extensions/yjs/cursor.ts
-import * as Y from "yjs";
-import { arrayToString, stringToArray } from "@dxos/util";
-var cursorConverter2 = (text) => ({
-  toCursor: (index, assoc) => {
-    return arrayToString(Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text, index, assoc)));
-  },
-  fromCursor: (cursor) => {
-    return Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(cursor)), text.doc)?.index ?? 0;
-  }
-});
-
-// packages/ui/react-ui-editor/src/extensions/yjs/yjs.ts
-var yjs = (content, awareness2) => [
-  Cursor.converter.of(cursorConverter2(content)),
-  yCollab(content, awareness2)
-];
-
 // packages/ui/react-ui-editor/src/themes/default.ts
 import get3 from "lodash.get";
 var defaultTheme = {
@@ -2580,26 +2578,25 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autofocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const { themeMode } = useThemeContext2();
+  const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
   const [view, setView] = useState(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
-  useEffect3(() => {
-    if (autofocus) {
+  useEffect2(() => {
+    if (autoFocus) {
       view?.focus();
     }
   }, [
     view,
-    autofocus
+    autoFocus
   ]);
-  useAwareness(model);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!model || !rootRef.current) {
       return;
     }
@@ -2611,7 +2608,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autofocus, s
         EditorView13.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
             F: __dxlog_file5,
-            L: 126,
+            L: 123,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -2692,8 +2689,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autofocus, s
     ref: rootRef
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, multiline, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext2();
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
@@ -2702,7 +2699,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholde
       basicBundle({
         themeMode,
         placeholder: placeholder3,
-        multiline
+        lineWrapping
       }),
       ...extensions
     ],
@@ -2712,7 +2709,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholde
   });
 });
 var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext2();
+  const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
@@ -2733,7 +2730,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 var defaultSlots = {
   root: {
     // TODO(burdon): Add focusRing by default/as property?
-    className: mx3("flex flex-col grow overflow-y-auto", inputSurface)
+    className: mx3("flex flex-col grow overflow-y-auto", attentionSurface)
   },
   editor: {
     className: "h-full p-2"
@@ -2746,11 +2743,6 @@ var defaultMarkdownSlots = {
   ...defaultSlots
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-import get4 from "lodash.get";
-import { getRawDoc } from "@dxos/echo-schema";
-import { isNotNullOrUndefined } from "@dxos/util";
-
 // packages/ui/react-ui-editor/src/hooks/awareness-provider.ts
 import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
@@ -2760,8 +2752,8 @@ var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
-    this.remoteStateChange = new Event2();
     this._remoteStates = /* @__PURE__ */ new Map();
+    this.remoteStateChange = new Event2();
     this._space = params.space;
     this._channel = params.channel;
     this._peerId = params.peerId;
@@ -2778,7 +2770,7 @@ var SpaceAwarenessProvider = class {
         await sleep(DEBOUNCE_INTERVAL);
       }
     });
-    const unsubscribe = this._space.listen(this._channel, (message) => {
+    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
       switch (message.payload.kind) {
         case "query": {
           this._handleQueryMessage();
@@ -2789,8 +2781,7 @@ var SpaceAwarenessProvider = class {
           break;
         }
       }
-    });
-    this._ctx.onDispose(unsubscribe);
+    }));
     void this._space.postMessage(this._channel, {
       kind: "query"
     }).catch((err) => {
@@ -2798,7 +2789,7 @@ var SpaceAwarenessProvider = class {
         err
       }, {
         F: __dxlog_file6,
-        L: 85,
+        L: 89,
         S: this,
         C: (f, a) => f(...a)
       });
@@ -2809,10 +2800,13 @@ var SpaceAwarenessProvider = class {
     this._ctx = void 0;
     this._postTask = void 0;
   }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
   update(position) {
     invariant4(this._postTask, void 0, {
       F: __dxlog_file6,
-      L: 96,
+      L: 104,
       S: this,
       A: [
         "this._postTask",
@@ -2826,13 +2820,10 @@ var SpaceAwarenessProvider = class {
     };
     this._postTask.schedule();
   }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
-  }
   _handleQueryMessage() {
     invariant4(this._postTask, void 0, {
       F: __dxlog_file6,
-      L: 111,
+      L: 115,
       S: this,
       A: [
         "this._postTask",
@@ -2844,7 +2835,7 @@ var SpaceAwarenessProvider = class {
   _handlePostMessage(message) {
     invariant4(message.kind === "post", void 0, {
       F: __dxlog_file6,
-      L: 116,
+      L: 120,
       S: this,
       A: [
         "message.kind === 'post'",
@@ -2863,8 +2854,47 @@ var modelState = StateField5.define({
   update: (model) => model
 });
 
-// packages/ui/react-ui-editor/src/hooks/automerge.ts
-var createAutomergeModel = ({ space, identity, text }) => {
+// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
+import { useState as useState2 } from "react";
+var useTextEditor = () => {
+  const [view, setView] = useState2(null);
+  return [
+    (ref) => {
+      setView(ref);
+    },
+    view
+  ];
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import get4 from "lodash.get";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { generateName } from "@dxos/display-name";
+import { getRawDoc } from "@dxos/echo-schema";
+import { invariant as invariant5 } from "@dxos/invariant";
+import { isAutomergeObject } from "@dxos/react-client/echo";
+import { isNotNullOrUndefined } from "@dxos/util";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var useTextModel = (props) => {
+  const { identity, space, text } = props;
+  const [model, setModel] = useState3();
+  useEffect3(() => setModel(createModel(props)), [
+    identity,
+    space,
+    text
+  ]);
+  return model;
+};
+var createModel = ({ space, identity, text }) => {
+  invariant5(isAutomergeObject(text), void 0, {
+    F: __dxlog_file7,
+    L: 35,
+    S: void 0,
+    A: [
+      "isAutomergeObject(text)",
+      ""
+    ]
+  });
   const obj = text;
   const doc = getRawDoc(obj, [
     obj.field
@@ -2873,7 +2903,7 @@ var createAutomergeModel = ({ space, identity, text }) => {
     space,
     channel: `automerge.awareness.${obj.id}`,
     info: {
-      displayName: identity?.profile?.displayName ?? "",
+      displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : void 0,
       color: cursorColor.color,
       lightColor: cursorColor.light
     },
@@ -2883,7 +2913,6 @@ var createAutomergeModel = ({ space, identity, text }) => {
     id: obj.id,
     content: doc,
     text: () => get4(doc.handle.docSync(), doc.path),
-    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
     extension: [
       modelState.init(() => model),
       automerge3({
@@ -2900,162 +2929,6 @@ var createAutomergeModel = ({ space, identity, text }) => {
   };
   return model;
 };
-
-// packages/ui/react-ui-editor/src/hooks/yjs.ts
-import * as decoding from "lib0/decoding";
-import * as encoding from "lib0/encoding";
-import { Observable } from "lib0/observable";
-import * as YP from "y-protocols/awareness";
-import { invariant as invariant5 } from "@dxos/invariant";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs.ts";
-var createYjsModel = ({ identity, space, text }) => {
-  invariant5(text?.doc && text?.content, void 0, {
-    F: __dxlog_file7,
-    L: 22,
-    S: void 0,
-    A: [
-      "text?.doc && text?.content",
-      ""
-    ]
-  });
-  const provider = space ? new YAwarenessProvider({
-    space,
-    doc: text.doc,
-    channel: `yjs.awareness.${text.id}`
-  }) : void 0;
-  const model = {
-    id: text.doc.guid,
-    content: text.content,
-    text: () => text.content.toString(),
-    extension: [
-      modelState.init(() => model),
-      yjs(text.content, provider?.awareness)
-    ],
-    awareness: provider?.awareness,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
-  return model;
-};
-var messageAwareness = 1;
-var messageQueryAwareness = 3;
-var YAwarenessProvider = class extends Observable {
-  constructor({ space, doc, channel, awareness: awareness2 }) {
-    super();
-    this._space = space;
-    this._awareness = awareness2 ?? new YP.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, YP.encodeAwarenessUpdate(this.awareness, [
-      this._clientId
-    ]));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
-  }
-  get awareness() {
-    return this._awareness;
-  }
-  _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log4("awareness update", {
-      added,
-      updated,
-      removed,
-      origin
-    }, {
-      F: __dxlog_file7,
-      L: 101,
-      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, YP.encodeAwarenessUpdate(this._awareness, changedClients));
-    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
-  }
-  _handleSpaceMessage({ payload }) {
-    log4("space message", payload, {
-      F: __dxlog_file7,
-      L: 110,
-      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: {
-        YP.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
-        break;
-      }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, YP.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() {
-    YP.removeAwarenessStates(this._awareness, [
-      this._clientId
-    ], "window unload");
-  }
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { useEffect as useEffect4, useState as useState2 } from "react";
-import { isAutomergeObject } from "@dxos/react-client/echo";
-var useTextModel = (props) => {
-  const { identity, space, text } = props;
-  const [model, setModel] = useState2();
-  useEffect4(() => setModel(createModel(props)), [
-    identity,
-    space,
-    text
-  ]);
-  return model;
-};
-var createModel = (props) => {
-  const { text } = props;
-  if (isAutomergeObject(text)) {
-    return createAutomergeModel(props);
-  } else if (text?.doc) {
-    return createYjsModel(props);
-  } else {
-    return void 0;
-  }
-};
 export {
   AwarenessProvider,
   BaseTextEditor,
@@ -3067,7 +2940,6 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YAwarenessProvider,
   YText,
   YXmlFragment,
   autocomplete,
@@ -3079,14 +2951,13 @@ export {
   code2 as code,
   codeTheme,
   comments,
-  createAutomergeModel,
-  createYjsModel,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
   getToken,
+  heading2 as heading,
   hr,
   image,
   link,
@@ -3108,9 +2979,8 @@ export {
   tasklist,
   textTheme,
   typewriter,
-  useAwareness,
   useComments,
-  useTextModel,
-  yjs
+  useTextEditor,
+  useTextModel
 };
 //# sourceMappingURL=index.mjs.map