@dxos/react-ui-editor 0.3.10 → 0.3.11-main.0e40963

package/dist/lib/browser/index.mjs

@@ -5,7 +5,18 @@ import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/autocomplete.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView12 } from "@codemirror/view";
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import { vim } from "@replit/codemirror-vim";
+import defaultsDeep2 from "lodash.defaultsdeep";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
+import { generateName } from "@dxos/display-name";
+import { useThemeContext } from "@dxos/react-ui";
+import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ onSearch }) => {
@@ -38,7 +49,7 @@ var autocomplete = ({ onSearch }) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic.ts
+// packages/ui/react-ui-editor/src/extensions/basic.ts
 import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
@@ -55,11 +66,11 @@ var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts
+// packages/ui/react-ui-editor/src/extensions/blast.ts
 import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/home/circleci/project/packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -365,7 +376,7 @@ var random = (min, max) => {
   return min + ~~(Math.random() * (max - min + 1));
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+// packages/ui/react-ui-editor/src/extensions/code.ts
 import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
 import get from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -411,31 +422,33 @@ var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
 var codeMark = "font-mono text-primary-500";
 var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
-var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
 
 // 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/code.ts
+// packages/ui/react-ui-editor/src/extensions/code.ts
 var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles = EditorView3.baseTheme({
-  "& .cm-code-block": {
-    display: "block",
-    paddingInline: "4px !important"
+  "& .cm-codeblock": {
+    fontFamily: get(tokens, "fontFamily.mono", []).join(",")
   },
-  "&light .cm-code-block": {
+  '&light [aria-readonly="true"] .cm-codeblock': {
     background: get(tokens, "extend.colors.neutral.50")
   },
-  "&dark .cm-code-block": {
+  '&dark [aria-readonly="true"] .cm-codeblock': {
     background: get(tokens, "extend.colors.neutral.850")
   },
-  "& .cm-code-block-first": {
+  '& [aria-readonly="true"] .cm-codeblock': {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  '& [aria-readonly="true"] .cm-codeblock-first': {
     paddingTop: "4px !important",
     borderTopLeftRadius: "4px",
     borderTopRightRadius: "4px"
   },
-  "& .cm-code-block-last": {
+  '& [aria-readonly="true"] .cm-codeblock-last': {
     paddingBottom: "4px !important",
     borderBottomLeftRadius: "4px",
     borderBottomRightRadius: "4px"
@@ -461,7 +474,7 @@ var code2 = () => {
         for (let i = range[0]; i <= range[1]; i++) {
           const block = blocks[i];
           decorations.push(Decoration.line({
-            class: mx2("cm-code-block", i === range[0] && "cm-code-block-first", i === range[1] && "cm-code-block-last")
+            class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
           }).range(block.from));
         }
       }
@@ -485,1853 +498,2068 @@ var code2 = () => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
-import { keymap as keymap3 } from "@codemirror/view";
-var defaultItems = [
-  "hello world!",
-  "this is a test.",
-  "this is [DXOS](https://dxos.org)"
-];
-var demo = ({ delay = 75, items = defaultItems } = {}) => {
-  let t;
-  let idx = 0;
-  return [
-    keymap3.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        }
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: {
-                  from: pos,
-                  insert: text[i++]
-                },
-                selection: {
-                  anchor: pos + 1
-                }
-              });
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
-              }
-            }, d);
-          };
-          insert();
-          return true;
-        }
-      }
-    ])
-  ];
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
-import { keymap as keymap4, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
+import sortBy from "lodash.sortby";
 import { debounce } from "@dxos/async";
-import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file2 = "/home/circleci/project/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
-var styles2 = EditorView4.baseTheme({
-  "& .cm-bookmark": {
-    cursor: "pointer",
-    margin: "4px",
-    padding: "4px",
-    backgroundColor: "yellow"
-  },
-  "& .cm-bookmark-selected": {
-    backgroundColor: "orange"
-  }
-});
-var BookmarkWidget = class extends WidgetType {
-  constructor(_pos, _id, _handleClick) {
-    super();
-    this._pos = _pos;
-    this._id = _id;
-    this._handleClick = _handleClick;
-    invariant2(this._id, void 0, {
+import { invariant as invariant3 } from "@dxos/invariant";
+import { log as log3 } from "@dxos/log";
+import { nonNullable } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/extensions/util.ts
+import { log } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util.ts";
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (error) {
+    log.catch(error, void 0, {
       F: __dxlog_file2,
-      L: 37,
-      S: this,
-      A: [
-        "this._id",
-        ""
-      ]
+      L: 16,
+      S: void 0,
+      C: (f, a) => f(...a)
     });
   }
-  eq(other) {
-    return this._id === other._id;
+};
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import { StateField as StateField2 } from "@codemirror/state";
+import get2 from "lodash.get";
+import { useEffect, useState } from "react";
+import { yCollab } from "y-codemirror.next";
+import * as Y from "yjs";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
+import { arrayToString, stringToArray } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+import { Annotation, Facet, StateEffect, StateField } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+import * as automerge2 from "@dxos/automerge/automerge";
+
+// packages/ui/react-ui-editor/src/hooks/automerge/semaphore.ts
+import { next as automerge } from "@dxos/automerge/automerge";
+
+// packages/ui/react-ui-editor/src/hooks/automerge/update-automerge.ts
+import { next as am } from "@dxos/automerge/automerge";
+var updateAutomerge = (field, handle, transactions, state) => {
+  const { lastHeads, path } = state.field(field);
+  let hasChanges = false;
+  for (const tr of transactions) {
+    tr.changes.iterChanges(() => {
+      hasChanges = true;
+    });
   }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "cm-bookmark";
-    span.textContent = "\xA7";
-    span.onclick = () => this._handleClick();
-    return span;
+  if (!hasChanges) {
+    return void 0;
   }
-};
-var comments = (options = {}) => {
-  let active;
-  const bookmarkMatcher = new MatchDecorator({
-    regexp: /\[\^(\w+)\]/g,
-    decoration: (match, view, pos) => {
-      const id = match[1];
-      return Decoration2.replace({
-        id,
-        widget: new BookmarkWidget(pos, id, () => handleUpdate({
-          active: id
-        }))
+  const newHeads = handle.changeAt(lastHeads, (doc) => {
+    for (const tr of transactions) {
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
       });
     }
   });
-  const bookmarks = ViewPlugin2.fromClass(class {
-    constructor(view) {
-      this.bookmarks = bookmarkMatcher.createDeco(view);
-    }
-    update(update4) {
-      this.bookmarks = bookmarkMatcher.updateDeco(update4, this.bookmarks);
-    }
-  }, {
-    decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView4.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.bookmarks || Decoration2.none;
-    })
-  });
-  const handleUpdate = debounce((data) => {
-    options.onUpdate?.(data);
-  }, 200);
-  return [
-    keymap4.of([
-      {
-        key: options?.key ?? "shift-meta-c",
-        run: (view) => {
-          const { from, to, head } = view.state.selection.main;
-          const id = options.onCreate?.(from, to);
-          if (id) {
-            const tag = `[^${id}]`;
-            view.dispatch({
-              changes: {
-                from: head,
-                insert: tag
-              },
-              selection: {
-                anchor: head + tag.length
-              }
-            });
-            return true;
-          }
-          return false;
-        }
-      }
-    ]),
-    bookmarks,
-    // Monitor cursor movement.
-    EditorView4.updateListener.of((update4) => {
-      active = void 0;
-      if (!options.onUpdate) {
-        return;
-      }
-      const { view, state } = update4;
-      const pos = state.selection.main.head;
-      const decorations = [];
-      const rangeSet = view.plugin(bookmarks)?.bookmarks;
-      let closest = Infinity;
-      const { from, to } = (
-        /* view.visibleRanges?.[0] ?? */
-        {
-          from: 0,
-          to: state.doc.length
-        }
-      );
-      rangeSet?.between(from, to, (from2, to2, value) => {
-        decorations.push({
-          from: from2,
-          to: to2,
-          value
-        });
-        const d = Math.min(Math.abs(pos - from2), Math.abs(pos - to2));
-        if (d < closest) {
-          active = value.spec.id;
-          closest = d;
-        }
-      });
-      if (decorations.length) {
-        handleUpdate({
-          active,
-          items: decorations.map(({ from: from2, value: { spec: { id } } }) => ({
-            id,
-            pos: from2,
-            location: view.coordsAtPos(from2)
-          }))
-        });
-      }
-    }),
-    styles2
-  ];
+  return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/highlight.ts
-import { StateEffect, StateField } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5 } from "@codemirror/view";
-import sortBy from "lodash.sortby";
-import { useEffect } from "react";
-var styles3 = EditorView5.baseTheme({
-  "& .cm-highlight": {
-    backgroundColor: "yellow"
-  },
-  "& .cm-highlight::before": {
-    content: "]"
-  },
-  "& .cm-highlight-active": {
-    backgroundColor: "lime"
+// packages/ui/react-ui-editor/src/hooks/automerge/update-codemirror.ts
+import { ChangeSet } from "@codemirror/state";
+var updateCodeMirror = (view, selection, target, patches) => {
+  for (const patch of patches) {
+    const changeSpec = handlePatch(patch, target, view.state);
+    if (changeSpec != null) {
+      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, "\n");
+      selection = selection.map(changeSet, 1);
+      view.dispatch({
+        changes: changeSet,
+        annotations: reconcileAnnotationType.of({})
+      });
+    }
   }
-});
-var marks = {
-  highlight: Decoration3.mark({
-    class: "cm-highlight"
-  }),
-  HighlightActive: Decoration3.mark({
-    class: "cm-highlight-active"
-  })
+  view.dispatch({
+    selection,
+    annotations: reconcileAnnotationType.of({})
+  });
 };
-var setHighlights = StateEffect.define();
-var useHighlights = (view, ranges = []) => {
-  useEffect(() => {
-    view?.dispatch({
-      effects: setHighlights.of(ranges)
-    });
-  }, [
-    view,
-    ranges
-  ]);
+var handlePatch = (patch, target, state) => {
+  if (patch.action === "insert") {
+    return handleInsert(target, patch);
+  } else if (patch.action === "splice") {
+    return handleSplice(target, patch);
+  } else if (patch.action === "del") {
+    return handleDel(target, patch);
+  } else if (patch.action === "put") {
+    return handlePut(target, patch, state);
+  } else {
+    return null;
+  }
 };
-var highlightStateField = StateField.define({
-  create: () => [],
-  update: (threads, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(setHighlights)) {
-        return effect.value;
-      }
-    }
-    return threads;
+var handleInsert = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
   }
-});
-var highlightDecorations = EditorView5.decorations.compute([
-  highlightStateField
-], (state) => {
-  const selectionRanges = state.field(highlightStateField);
-  const decorations = sortBy(selectionRanges ?? [], (selection) => selection.from)?.flatMap((selection) => {
-    const range = {
-      from: selection.from,
-      to: selection.to + 1
-    };
-    if (selection.to > selection.from) {
-      if (selection.active) {
-        return marks.HighlightActive.range(range.from, range.to);
-      } else {
-        return marks.highlight.range(range.from, range.to);
-      }
-    } else {
-      return [];
+  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+  return [
+    {
+      from: index,
+      to: index,
+      insert: text
     }
-  }) ?? [];
-  return Decoration3.set(decorations);
-});
-var listener = (options) => {
-  return EditorView5.updateListener.of((update4) => {
-    const { view, state } = update4;
-    const { head } = state.selection.main;
-    const ranges = state.field(highlightStateField);
-    let mod = false;
-    const newRanges = ranges.map((range) => {
-      const active = head >= range.from && head <= range.to;
-      if (active !== range.active) {
-        mod = true;
-        return {
-          ...range,
-          active
-        };
-      } else {
-        return range;
-      }
-    });
-    if (mod) {
-      view.dispatch({
-        effects: setHighlights.of(newRanges)
-      });
-      options?.onChange?.(newRanges.find((range) => range.active)?.id);
+  ];
+};
+var handleSplice = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  return [
+    {
+      from: index,
+      insert: patch.value
     }
-  });
+  ];
 };
-var highlight = (options = {}) => {
+var handleDel = (target, patch) => {
+  const index = charPath(target, patch.path);
+  if (index == null) {
+    return [];
+  }
+  const length = patch.length || 1;
   return [
-    highlightStateField,
-    highlightDecorations,
-    listener(options),
-    styles3
+    {
+      from: index,
+      to: index + length
+    }
   ];
 };
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/image.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType2 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField2.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView6.decorations.from(field)
-  });
-};
-var update = (state, options) => {
-  const builder = new RangeSetBuilder();
-  const cursor = state.selection.main.head;
-  syntaxTree(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);
-          builder.add(hide ? node.from : node.to, node.to, Decoration4.replace({
-            widget: new ImageWidget(url)
-          }));
-        }
-      }
-    }
-  });
-  return builder.finish();
-};
-var ImageWidget = class extends WidgetType2 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other?._url;
+var handlePut = (target, patch, state) => {
+  const index = charPath(target, [
+    ...patch.path,
+    0
+  ]);
+  if (index == null) {
+    return [];
   }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    return img;
+  const length = state.doc.length;
+  if (typeof patch.value !== "string") {
+    return [];
   }
+  return [
+    {
+      from: 0,
+      to: length,
+      insert: patch.value
+    }
+  ];
 };
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType3 } from "@codemirror/view";
-var link = (options = {}) => {
-  return StateField3.define({
-    create: (state) => update2(state, options),
-    update: (_, tr) => update2(tr.state, options),
-    provide: (field) => EditorView7.decorations.from(field)
-  });
-};
-var LinkButton = class extends WidgetType3 {
-  constructor(_pos, _url, _onAttach) {
-    super();
-    this._pos = _pos;
-    this._url = _url;
-    this._onAttach = _onAttach;
+var charPath = (textPath, candidatePath) => {
+  if (candidatePath.length !== textPath.length + 1) {
+    return null;
   }
-  eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+  for (let i = 0; i < textPath.length; i++) {
+    if (textPath[i] !== candidatePath[i]) {
+      return null;
+    }
   }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
+  const index = candidatePath[candidatePath.length - 1];
+  if (typeof index === "number") {
+    return index;
   }
+  return null;
 };
-var LinkText = class extends WidgetType3 {
-  constructor(_pos, _text, _url) {
-    super();
-    this._pos = _pos;
-    this._text = _text;
-    this._url = _url;
-  }
-  eq(other) {
-    return this._pos === other._pos && 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 = () => {
+
+// packages/ui/react-ui-editor/src/hooks/automerge/semaphore.ts
+var PatchSemaphore = class {
+  constructor(field) {
+    this._inReconcile = false;
+    this._queue = [];
+    this.reconcile = (handle, view) => {
+      if (this._inReconcile) {
+        return;
+      }
+      this._inReconcile = true;
+      const path = getPath(view.state, this._field);
+      const oldHeads = getLastHeads(view.state, this._field);
+      let selection = view.state.selection;
+      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+      const toInvert = transactions.slice().reverse();
+      for (const tx of toInvert) {
+        const inverted = tx.changes.invert(tx.startState.doc);
+        selection = selection.map(inverted);
         view.dispatch({
-          selection: {
-            anchor: this._pos
-          }
+          changes: inverted,
+          annotations: reconcileAnnotationType.of(true)
         });
-      };
+      }
+      let newHeads = updateAutomerge(this._field, handle, transactions, view.state);
+      if (newHeads === null || newHeads === void 0) {
+        newHeads = automerge.getHeads(handle.docSync());
+      }
+      const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
+      updateCodeMirror(view, selection, path, diff);
+      view.dispatch({
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotationType.of({})
+      });
+      this._inReconcile = false;
+    };
+    if (field !== void 0) {
+      this._field = field;
     }
-    return link2;
   }
 };
-var update2 = (state, options) => {
-  const builder = new RangeSetBuilder2();
-  const cursor = state.selection.main.head;
-  syntaxTree2(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 (state.readOnly || cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration5.replace({
-            widget: new LinkText(node.from, text, options.link ? url : void 0)
-          }));
+
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+var effectType = StateEffect.define({});
+var updateHeads = (newHeads) => effectType.of({
+  newHeads
+});
+var getLastHeads = (state, field) => state.field(field).lastHeads;
+var getPath = (state, field) => state.field(field).path;
+var semaphoreFacet = Facet.define({
+  combine: (values) => values.at(-1)
+});
+var automergePlugin = (handle, path) => {
+  const stateField = StateField.define({
+    create: () => ({
+      lastHeads: automerge2.getHeads(handle.docSync()),
+      unreconciledTransactions: [],
+      path: path.slice()
+    }),
+    update: (value, tr) => {
+      const result = {
+        lastHeads: value.lastHeads,
+        unreconciledTransactions: value.unreconciledTransactions.slice(),
+        path: path.slice()
+      };
+      let clearUnreconciled = false;
+      for (const effect of tr.effects) {
+        if (effect.is(effectType)) {
+          result.lastHeads = effect.value.newHeads;
+          clearUnreconciled = true;
         }
-        if (options.onRender) {
-          builder.add(node.to, node.to, Decoration5.replace({
-            widget: new LinkButton(node.from, url, options.onRender)
-          }));
+      }
+      if (clearUnreconciled) {
+        result.unreconciledTransactions = [];
+      } else {
+        if (!isReconcileTx(tr)) {
+          result.unreconciledTransactions.push(tr);
         }
-        return false;
       }
+      return result;
     }
   });
-  return builder.finish();
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
-import { StateField as StateField4 } from "@codemirror/state";
-var listener2 = ({ onChange }) => {
-  return StateField4.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged && onChange) {
-        onChange(transaction.newDoc.toString());
+  const semaphore = new PatchSemaphore(stateField);
+  const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
+    constructor(view) {
+      this._handleChange = () => {
+        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+      };
+      this._view = view;
+      handle.addListener("change", this._handleChange);
+    }
+    update(update4) {
+      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
+        queueMicrotask(() => {
+          this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
+        });
       }
-      return null;
+    }
+    destroy() {
+      handle.addListener("change", this._handleChange);
     }
   });
+  return {
+    extension: [
+      stateField,
+      semaphoreFacet.of(semaphore),
+      viewPlugin
+    ]
+  };
 };
+var reconcileAnnotationType = Annotation.define();
+var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
-import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
-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 EditorView8, highlightActiveLine, keymap as keymap5, placeholder as placeholder2 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import { Table } from "@lezer/markdown";
-import get2 from "lodash.get";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  HorizontalRule: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // 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 markdownHighlightStyle = (readonly) => {
-  return HighlightStyle.define([
-    {
-      tag: [
-        tags.keyword,
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-        tags.color,
-        tags.constant(tags.name),
-        tags.standard(tags.name),
-        tags.definition(tags.name),
-        tags.separator,
-        tags.typeName,
-        tags.className,
-        tags.number,
-        tags.changed,
-        tags.annotation,
-        tags.modifier,
-        tags.self,
-        tags.namespace,
-        tags.operator,
-        tags.operatorKeyword,
-        tags.escape,
-        tags.regexp,
-        tags.special(tags.string),
-        tags.meta,
-        tags.comment,
-        tags.atom,
-        tags.bool,
-        tags.special(tags.variableName),
-        tags.processingInstruction,
-        tags.string,
-        tags.inserted,
-        tags.invalid
-      ],
-      color: "inherit !important"
-    },
-    // Markdown marks.
-    {
-      tag: [
-        tags.meta,
-        tags.processingInstruction,
-        markdownTags.LinkLabel,
-        markdownTags.LinkReference,
-        markdownTags.ListMark
-      ],
-      class: mark
-    },
-    // Markdown marks.
-    {
-      tag: [
-        markdownTags.CodeMark,
-        markdownTags.HeaderMark,
-        markdownTags.QuoteMark,
-        markdownTags.EmphasisMark
-      ],
-      class: readonly ? "hidden" : mark
-    },
-    // E.g., code block language (after ```).
-    {
-      tag: [
-        tags.function(tags.variableName),
-        tags.labelName
-      ],
-      class: readonly ? "hidden" : codeMark
-    },
-    {
-      tag: [
-        tags.monospace
-      ],
-      class: "font-mono"
-    },
-    // Headings.
-    {
-      tag: tags.heading1,
-      class: heading(1, readonly)
-    },
-    {
-      tag: tags.heading2,
-      class: heading(2, readonly)
-    },
-    {
-      tag: tags.heading3,
-      class: heading(3, readonly)
-    },
-    {
-      tag: tags.heading4,
-      class: heading(4, readonly)
-    },
-    {
-      tag: tags.heading5,
-      class: heading(5, readonly)
-    },
-    {
-      tag: tags.heading6,
-      class: heading(6, readonly)
-    },
-    // Emphasis.
-    {
-      tag: tags.emphasis,
-      class: italic
-    },
-    {
-      tag: tags.strong,
-      class: bold
-    },
-    {
-      tag: tags.strikethrough,
-      class: strikethrough
-    },
-    // Naked URLs.
-    {
-      tag: [
-        markdownTags.URL
-      ],
-      class: inlineUrl
-    },
-    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-    // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
-    // when a language is specified. In this case, the syntax highlighting extensions will colorize
-    // the code, but all other CSS properties will be inherited.
-    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
-    {
-      tag: [
-        markdownTags.CodeText,
-        markdownTags.InlineCode
-      ],
-      class: code
-    },
-    {
-      tag: [
-        markdownTags.QuoteMark
-      ],
-      class: blockquote
-    },
-    // TODO(burdon): Replace with extension.
-    {
-      tag: [
-        markdownTags.HorizontalRule
-      ],
-      class: mx3(horizontalRule, readonly && "-indent-[100rem]")
-    },
-    // TODO(burdon): Only if being edited.
-    {
-      tag: [
-        markdownTags.TableCell
-      ],
-      class: "font-mono"
-    }
-  ], {
-    scope: markdownLanguage,
-    all: {
-      fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-    }
-  });
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
-var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
-  return [
-    EditorState.allowMultipleSelections.of(true),
-    EditorState.tabSize.of(2),
-    EditorView8.lineWrapping,
-    customKeymap(),
-    bracketMatching2(),
-    closeBrackets2(),
-    crosshairCursor(),
-    dropCursor(),
-    drawSelection2(),
-    highlightActiveLine(),
-    history(),
-    indentOnInput(),
-    _placeholder && placeholder2(_placeholder),
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
-    markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage2,
-      // Languages for syntax highlighting fenced code blocks.
-      codeLanguages: languages,
-      // Parser extensions.
-      extensions: [
-        // GFM provided by default.
-        markdownTagsExtensions
-      ]
-    }),
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
-    // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle(readonly))
-  ].filter(Boolean);
-};
-var customKeymap = () => keymap5.of([
-  // https://codemirror.net/docs/ref/#commands.indentWithTab
-  indentWithTab,
-  // https://codemirror.net/docs/ref/#commands.standardKeymap
-  ...standardKeymap,
-  // https://codemirror.net/docs/ref/#commands.historyKeymap
-  ...historyKeymap,
-  // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-  ...closeBracketsKeymap,
-  // https://codemirror.net/docs/ref/#search.searchKeymap
-  ...searchKeymap
-]);
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    closeOnBlur: false,
-    override: [
-      (context) => {
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        console.log(match);
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
-      }
-    ]
-  });
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/table.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView9, WidgetType as WidgetType4 } from "@codemirror/view";
-var table = (options = {}) => {
-  return StateField5.define({
-    create: (state) => update3(state, options),
-    update: (_, tr) => update3(tr.state, options),
-    provide: (field) => EditorView9.decorations.from(field)
-  });
-};
-var update3 = (state, options) => {
-  const builder = new RangeSetBuilder3();
-  const cursor = state.selection.main.head;
-  const tables = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table2 = getTable();
-    return table2.rows?.[table2.rows.length - 1];
-  };
-  syntaxTree3(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        case "Table": {
-          tables.push({
-            from: node.from,
-            to: node.to
-          });
-          break;
-        }
-        case "TableHeader": {
-          getTable().header = [];
-          break;
-        }
-        case "TableRow": {
-          (getTable().rows ??= []).push([]);
-          break;
-        }
-        case "TableCell": {
-          const row = getRow();
-          if (row) {
-            row.push(state.sliceDoc(node.from, node.to));
-          } else {
-            getTable().header?.push(state.sliceDoc(node.from, node.to));
-          }
-          break;
-        }
-      }
-    }
-  });
-  tables.forEach((table2) => {
-    const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration6.replace({
-      widget: new TableWidget(table2)
-    }));
-    builder.add(table2.from, table2.to, Decoration6.mark({
-      class: "cm-table"
-    }));
-  });
-  return builder.finish();
-};
-var TableWidget = class extends WidgetType4 {
-  constructor(_table) {
-    super();
-    this._table = _table;
-  }
-  eq(other) {
-    return this._table.from === other?._table?.from;
-  }
-  toDOM(view) {
-    const table2 = document.createElement("table");
-    {
-      const header = table2.appendChild(document.createElement("thead"));
-      const tr = header.appendChild(document.createElement("tr"));
-      this._table.header?.forEach((cell) => {
-        const th = document.createElement("th");
-        th.setAttribute("class", "cm-table-head");
-        tr.appendChild(th).textContent = cell;
-      });
-    }
-    {
-      const body = table2.appendChild(document.createElement("tbody"));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement("tr"));
-        row.forEach((cell) => {
-          const td = document.createElement("td");
-          td.setAttribute("class", "cm-table-cell");
-          tr.appendChild(td).textContent = cell;
-        });
-      });
-    }
-    return table2;
-  }
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
-import { EditorView as EditorView10, Decoration as Decoration7, WidgetType as WidgetType5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
-var styles4 = EditorView10.baseTheme({
-  "& .cm-task-item": {
-    paddingLeft: "4px",
-    paddingRight: "8px"
-  }
-});
-var CheckboxWidget = class extends WidgetType5 {
-  constructor(_pos, _checked, _indent, _onCheck) {
-    super();
-    this._pos = _pos;
-    this._checked = _checked;
-    this._indent = _indent;
-    this._onCheck = _onCheck;
-  }
-  eq(other) {
-    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
-  }
-  toDOM(view) {
-    const wrap = document.createElement("span");
-    wrap.className = "cm-task-item";
-    wrap.setAttribute("aria-hidden", "true");
-    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
-    const input = wrap.appendChild(document.createElement("input"));
-    input.type = "checkbox";
-    input.checked = this._checked;
-    if (!this._onCheck) {
-      input.setAttribute("disabled", "true");
-    }
-    if (this._onCheck) {
-      input.onchange = (event) => {
-        this._onCheck?.(event.target.checked);
-        return true;
-      };
-    }
-    return wrap;
-  }
-  ignoreEvent() {
-    return false;
-  }
-};
-var tasklist = (options = {}) => {
-  const taskMatcher = new MatchDecorator2({
-    regexp: /^(\s*)- \[([ xX])\]\s/g,
-    decoration: (match, view, pos) => {
-      const indent = Math.floor(match[1].length / 2);
-      const checked = match[2] === "x" || match[2] === "X";
-      return Decoration7.replace({
-        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
-          const idx = pos + match[0].indexOf("[") + 1;
-          view.dispatch({
-            changes: {
-              from: idx,
-              to: idx + 1,
-              insert: checked2 ? "x" : " "
-            },
-            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-            selection: {
-              anchor: idx + 3
-            }
-          });
-        })
-      });
-    }
-  });
-  const tasks = ViewPlugin3.fromClass(class {
-    constructor(view) {
-      this.tasks = taskMatcher.createDeco(view);
-    }
-    update(update4) {
-      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
-    }
-  }, {
-    decorations: (value) => value.tasks,
-    provide: (plugin) => EditorView10.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration7.none;
-    })
-  });
-  return [
-    tasks,
-    styles4
-  ];
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.tsx
-import { hoverTooltip } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip((view, pos) => {
-  const { from, text } = view.state.doc.lineAt(pos);
-  const p = pos - from;
-  let idx = 0;
-  let match;
-  do {
-    match = text.substring(idx).match(regexp);
-    if (!match) {
-      match = void 0;
-      break;
-    }
-    idx = text.indexOf(match[0]);
-    if (p >= idx && p < idx + match[0].length) {
-      break;
-    }
-    idx += match[0].length;
-  } while (true);
-  if (!match) {
-    return null;
-  }
-  const [, , url] = match ?? [];
-  return {
-    pos: idx + from,
-    end: idx + from + match[0].length,
-    above: true,
-    create: () => {
-      const el = document.createElement("div");
-      el.className = tooltipContent({}, "pli-2 plb-1");
-      onHover(el, url);
-      return {
-        dom: el,
-        offset: {
-          x: 0,
-          y: 12
-        }
-      };
-    }
-  };
-});
-
-// packages/ui/react-ui-editor/src/components/TextEditor/themes/default.ts
-import get3 from "lodash.get";
-var defaultTheme = {
-  //
-  // Main layout:
-  // <div class=".cm-editor .cm-focused">
-  //   <div class=".cm-scroller">
-  //     <div class=".cm-content" role="textbox" contenteditable="true">
-  //       <div class=".cm-line" />
-  //     </div>
-  //   </div>
-  // </div>
-  //
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  "& .cm-scroller": {
-    overflow: "visible",
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
-  },
-  "& .cm-content": {
-    padding: 0,
-    // Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
-  },
-  "&light .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.900", "black"),
-    caretColor: "black"
-  },
-  "&dark .cm-content": {
-    color: get3(tokens, "extend.colors.neutral.100", "white"),
-    caretColor: "white"
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "& .cm-placeholder": {
-    fontWeight: 100
-  },
-  //
-  // line
-  //
-  "& .cm-line": {
-    paddingInline: 0
-  },
-  "& .cm-line *": {},
-  "& .cm-activeLine": {
-    backgroundColor: "transparent"
-  },
-  //
-  // selection
-  //
-  "&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.150", "#00ffff")
-  },
-  "&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.850", "#00ffff")
-  },
-  "&light .cm-selectionMatch": {
-    background: get3(tokens, "extend.colors.primary.250", "#00ffff") + "44"
-  },
-  "&dark .cm-selectionMatch": {
-    background: get3(tokens, "extend.colors.primary.600", "#00ffff") + "44"
-  },
-  //
-  // collaboration
-  // TODO(burdon): Review classnames (YJS dependent?)
-  //
-  "&light .cm-ySelection, &light .cm-yLineSelection": {
-    mixBlendMode: "multiply"
-  },
-  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
-    mixBlendMode: "screen"
-  },
-  "& .cm-ySelectionInfo": {
-    padding: "2px 4px",
-    marginBlockStart: "-4px"
-  },
-  "& .cm-ySelection, & .cm-selectionMatch": {
-    paddingBlockStart: ".15em",
-    paddingBlockEnd: ".15em"
-  },
-  "& .cm-ySelectionCaret": {
-    display: "inline-block",
-    insetBlockStart: ".1em",
-    blockSize: "1.4em",
-    verticalAlign: "top"
-  },
-  "& .cm-yLineSelection": {
-    margin: 0
-  },
-  //
-  // link
-  //
-  "& .cm-link": {
-    color: get3(tokens, "extend.colors.primary.500"),
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
-  },
-  //
-  // tooltip
-  //
-  "& .cm-tooltip": {
-    border: "none"
-  },
-  "& .cm-tooltip-below": {},
-  //
-  // autocomplete
-  //
-  "& .cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  "& .cm-tooltip-autocomplete ul li": {},
-  "& .cm-tooltip-autocomplete ul li[aria-selected]": {},
-  "& .cm-completionIcon": {
-    display: "none"
-  },
-  "& .cm-completionLabel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
-  },
-  "& .cm-completionMatchedText": {
-    textDecoration: "none"
-  },
-  //
-  // widgets
-  //
-  "& .cm-widgetBuffer": {
-    display: "none",
-    height: 0
-  },
-  //
-  // table
-  //
-  "& .cm-table *": {
-    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
-    textDecoration: "none !important"
-  },
-  "& .cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
-    fontWeight: 100,
-    textAlign: "left",
-    color: get3(tokens, "extend.colors.neutral.500")
-  },
-  "& .cm-table-cell": {
-    padding: "2px 16px 2px 0px"
-  },
-  //
-  // image
-  //
-  "& .cm-image": {
-    margin: "0.5rem 0"
-  },
-  //
-  // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
-  //
-  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get3(tokens, [
-      "extend",
-      "fontSize",
-      fontSize,
-      1,
-      "lineHeight"
-    ]);
-    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
-      height
-    };
-    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
-      height
-    };
-    return acc;
-  }, {}),
-  /**
-  * Panels
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  "& .cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`,
-    borderBottom: "none"
+// packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
+import * as random2 from "lib0/random";
+var cursorColors = [
+  {
+    color: "#30bced",
+    light: "#30bced33"
   },
-  "& .cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  {
+    color: "#6eeb83",
+    light: "#6eeb8333"
   },
-  "& .cm-button": {
-    margin: "4px",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
-    border: "none"
+  {
+    color: "#ffbc42",
+    light: "#ffbc4233"
   },
-  "& .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+  {
+    color: "#ecd444",
+    light: "#ecd44433"
   },
-  "& .cm-searchMatch.cm-searchMatch-selected": {
-    backgroundColor: get3(tokens, "extend.colors.primary.100")
-  }
-};
-var textTheme = {
-  "& .cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  {
+    color: "#ee6352",
+    light: "#ee635233"
   },
-  "& .cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  {
+    color: "#9ac2c9",
+    light: "#9ac2c933"
+  },
+  {
+    color: "#8acb88",
+    light: "#8acb8833"
+  },
+  {
+    color: "#1be7ff",
+    light: "#1be7ff33"
+  }
+];
+var cursorColor = cursorColors[random2.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 as log2 } from "@dxos/log";
+var __dxlog_file3 = "/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) {
+    log2("awareness update", {
+      added,
+      updated,
+      removed,
+      origin
+    }, {
+      F: __dxlog_file3,
+      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 }) {
+    log2("space message", payload, {
+      F: __dxlog_file3,
+      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");
   }
 };
-var markdownTheme = {
-  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
-  "& .cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var modelState = StateField2.define({
+  create: () => void 0,
+  update: (model) => model
+});
+var useTextModel = (props) => {
+  const { identity, space, text } = props;
+  const [model, setModel] = useState(() => createModel(props));
+  useEffect(() => setModel(createModel(props)), [
+    identity,
+    space,
+    text
+  ]);
+  return model;
+};
+var createModel = (props) => {
+  const { text } = props;
+  if (isActualAutomergeObject(text)) {
+    return createAutomergeModel(props);
+  } else {
+    if (!text?.doc) {
+      return void 0;
+    }
+    return createYjsModel(props);
   }
 };
-var codeTheme = {
-  "& .cm-scroller": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+var createYjsModel = ({ identity, space, text }) => {
+  invariant2(text?.doc && text?.content, void 0, {
+    F: __dxlog_file4,
+    L: 97,
+    S: void 0,
+    A: [
+      "text?.doc && text?.content",
+      ""
+    ]
+  });
+  const provider = space ? new SpaceAwarenessProvider({
+    space,
+    doc: text.doc,
+    channel: `yjs.awareness.${text.id}`
+  }) : void 0;
+  const model = {
+    id: text.doc.guid,
+    content: text.content,
+    text: () => text.content.toString(),
+    // https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+    getCursorFromRange: (range) => {
+      const from = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content, range.from));
+      const to = Y.encodeRelativePosition(Y.createRelativePositionFromTypeIndex(text.content, range.to, -1));
+      return [
+        arrayToString(from),
+        arrayToString(to)
+      ].join(":");
+    },
+    getRangeFromCursor: (cursor) => {
+      invariant2(text.doc, void 0, {
+        F: __dxlog_file4,
+        L: 113,
+        S: void 0,
+        A: [
+          "text.doc",
+          ""
+        ]
+      });
+      const parts = cursor.split(":");
+      const from = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[0])), text.doc);
+      const to = Y.createAbsolutePositionFromRelativePosition(Y.decodeRelativePosition(stringToArray(parts[1])), text.doc);
+      return from && to ? {
+        from: from.index,
+        to: to.index
+      } : void 0;
+    },
+    extension: [
+      yCollab(text.content, provider?.awareness),
+      modelState.init(() => model)
+    ],
+    awareness: provider?.awareness,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
+};
+var createAutomergeModel = ({ identity, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  const model = {
+    id: obj.id,
+    content: doc,
+    text: () => get2(doc.handle.docSync(), doc.path),
+    // TODO(burdon): https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+    extension: [
+      automergePlugin(doc.handle, doc.path),
+      modelState.init(() => model)
+    ],
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+  return model;
+};
+
+// packages/ui/react-ui-editor/src/extensions/comments.ts
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var styles2 = EditorView4.baseTheme({
+  "& .cm-bookmark": {
+    cursor: "pointer",
+    margin: "4px",
+    padding: "4px",
+    backgroundColor: "yellow"
   },
-  "& .cm-placeholder": {
-    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+  "& .cm-bookmark-selected": {
+    backgroundColor: "orange"
+  },
+  "& .cm-comment": {
+    backgroundColor: "yellow"
+  },
+  "& .cm-comment-active": {
+    backgroundColor: "orange"
+  }
+});
+var marks = {
+  highlight: Decoration2.mark({
+    class: "cm-comment"
+  }),
+  highlightActive: Decoration2.mark({
+    class: "cm-comment-active"
+  })
+};
+var setCommentRange = StateEffect2.define();
+var setSelection = StateEffect2.define();
+var setCommentState = StateEffect2.define();
+var commentsStateField = StateField3.define({
+  create: () => ({
+    ranges: []
+  }),
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(setSelection)) {
+        return {
+          ...value,
+          ...effect.value
+        };
+      }
+      if (effect.is(setCommentRange)) {
+        const { model, comments: comments2 } = effect.value;
+        const ranges = comments2.map((comment) => {
+          const range = model.getRangeFromCursor(comment.cursor);
+          return range && {
+            ...comment,
+            ...range
+          };
+        }).filter(nonNullable);
+        return {
+          ...value,
+          ranges
+        };
+      }
+      if (effect.is(setCommentState)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var highlightDecorations = EditorView4.decorations.compute([
+  commentsStateField
+], (state) => {
+  const { active, ranges } = state.field(commentsStateField);
+  const decorations = sortBy(ranges ?? [], (range) => range.from)?.flatMap((selection) => {
+    if (selection.from === selection.to) {
+      return void 0;
+    }
+    const range = {
+      from: selection.from,
+      to: selection.to
+    };
+    if (selection.id === active) {
+      return marks.highlightActive.range(range.from, range.to);
+    } else {
+      return marks.highlight.range(range.from, range.to);
+    }
+  }).filter(nonNullable) ?? [];
+  return Decoration2.set(decorations);
+});
+var BookmarkWidget = class extends WidgetType {
+  constructor(_anchor, _id, _handleClick) {
+    super();
+    this._anchor = _anchor;
+    this._id = _id;
+    this._handleClick = _handleClick;
+    invariant3(this._id, void 0, {
+      F: __dxlog_file5,
+      L: 153,
+      S: this,
+      A: [
+        "this._id",
+        ""
+      ]
+    });
   }
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView11 } from "@codemirror/view";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { vim } from "@replit/codemirror-vim";
-import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState } from "react";
-import { generateName } from "@dxos/display-name";
-import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx4 } from "@dxos/react-ui-theme";
-var EditorModes = [
-  "default",
-  "vim"
-];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const [root, setRoot] = useState(null);
-  const [state, setState] = useState();
-  const [view, setView] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    root,
-    state,
-    view
-  }), [
-    view,
-    state,
-    root
-  ]);
-  const { awareness, peer } = model;
-  useEffect2(() => {
-    if (awareness && peer) {
-      awareness.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
+  eq(other) {
+    return this._anchor === other._anchor && this._id === other._id;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-bookmark";
+    span.textContent = "\u203B";
+    if (this._handleClick) {
+      span.onclick = () => this._handleClick();
     }
-  }, [
-    awareness,
-    peer,
-    themeMode
-  ]);
-  useEffect2(() => {
-    if (!root) {
-      return;
+    return span;
+  }
+};
+var comments = (options = {}) => {
+  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
+  const createCommentThread = (view) => {
+    invariant3(options.onCreate, void 0, {
+      F: __dxlog_file5,
+      L: 207,
+      S: void 0,
+      A: [
+        "options.onCreate",
+        ""
+      ]
+    });
+    const { head, from, to } = view.state.selection.main;
+    if (from === to) {
+      return false;
     }
-    const state2 = EditorState2.create({
-      doc: model.text(),
-      extensions: [
-        readonly && EditorState2.readOnly.of(readonly),
-        // TODO(burdon): Factor out VIM mode?
-        editorMode === "vim" && vim(),
-        // Theme.
-        // TODO(burdon): Make optional.
-        EditorView11.baseTheme(defaultTheme),
-        EditorView11.theme(slots?.editor?.theme ?? {}),
-        // TODO(burdon): themeMode doesn't change in storybooks.
-        EditorView11.darkTheme.of(themeMode === "dark"),
-        // Storage and replication.
-        model.extension,
-        // Custom.
-        ...extensions
-      ].filter(Boolean)
+    const model = view.state.field(modelState);
+    const relPos = model?.getCursorFromRange?.({
+      from,
+      to
     });
-    view?.destroy();
-    setView(new EditorView11({
-      state: state2,
-      parent: root
-    }));
-    setState(state2);
-    return () => {
-      view?.destroy();
-      setView(void 0);
-      setState(void 0);
-    };
-  }, [
-    root,
-    model,
-    themeMode,
-    readonly,
-    editorMode
-  ]);
-  const handleKeyUp = useCallback((event) => {
-    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
-    switch (key) {
-      case "Enter": {
-        view?.contentDOM.focus();
-        break;
-      }
-      case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
-        break;
+    if (relPos) {
+      const id = callbackWrapper(options.onCreate)(relPos);
+      if (id) {
+        view.dispatch({
+          effects: setSelection.of({
+            active: id
+          }),
+          selection: {
+            anchor: from
+          }
+        });
+        if (options.footnote) {
+          const tag = `[^${id}]`;
+          view.dispatch({
+            changes: {
+              from: head,
+              insert: tag
+            },
+            selection: {
+              anchor: head + tag.length
+            }
+          });
+        }
+        return true;
       }
     }
-  }, [
-    view,
-    editorMode
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    key: model.id,
-    ref: setRoot,
-    tabIndex: 0,
-    ...slots?.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
+    return false;
+  };
+  const bookmarksViewPlugin = ViewPlugin3.fromClass(class BookmarkViewPlugin {
+    static {
+      // Match markdown footnotes (option).
+      // https://www.markdownguide.org/extended-syntax/#footnotes
+      this.bookmarkMatcher = new MatchDecorator({
+        regexp: /\[\^(\w+)\]/g,
+        decoration: (match, view, pos) => {
+          const id = match[1];
+          return Decoration2.replace({
+            id,
+            widget: new BookmarkWidget(pos, id)
+          });
+        }
+      });
+    }
+    constructor(view) {
+      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
+    }
+    update(update4) {
+      this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update4, this.bookmarks);
+    }
+  }, {
+    decorations: (instance) => instance.bookmarks,
+    provide: (plugin) => EditorView4.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.bookmarks || Decoration2.none;
+    })
   });
+  return [
+    bookmarksViewPlugin,
+    commentsStateField,
+    highlightDecorations,
+    styles2,
+    //
+    // Keymap.
+    //
+    options.onCreate ? keymap3.of([
+      {
+        key: options?.key ?? "meta-'",
+        run: callbackWrapper(createCommentThread)
+      }
+    ]) : [],
+    //
+    // Hover tooltip (for key shortcut hints, etc.)
+    // TODO(burdon): Factor out to generic hints extension for current selection/line.
+    //
+    options.onHover ? hoverTooltip((view, pos) => {
+      const selection = view.state.selection.main;
+      if (selection && pos >= selection.from && pos <= selection.to) {
+        return {
+          pos: selection.from,
+          end: selection.to,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            options.onHover?.(el);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 8
+              }
+            };
+          }
+        };
+      }
+      return null;
+    }, {
+      hideOnChange: true,
+      hoverTime: 1e3
+    }) : [],
+    //
+    // Monitor cursor movement and text updates.
+    // TODO(burdon): Is there a better (finer grained) way to do this?
+    //
+    EditorView4.updateListener.of(({ view, state, startState, changes }) => {
+      {
+        let mod = false;
+        const model = state.field(modelState);
+        const { active, ranges } = state.field(commentsStateField);
+        changes.iterChanges((from, to, from2, to2) => {
+          invariant3(model, void 0, {
+            F: __dxlog_file5,
+            L: 336,
+            S: void 0,
+            A: [
+              "model",
+              ""
+            ]
+          });
+          ranges.forEach((range) => {
+            if (from2 === to2) {
+              const newRange = model.getRangeFromCursor(range.cursor);
+              if (!newRange || newRange.to - newRange.from === 0) {
+                log3.info("deleted comment", {
+                  thread: range.id
+                }, {
+                  F: __dxlog_file5,
+                  L: 342,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
+              }
+            }
+            if (from <= range.to) {
+              const newRange = model.getRangeFromCursor(range.cursor);
+              Object.assign(range, newRange);
+              mod = true;
+            }
+          });
+        });
+        if (mod) {
+          view.dispatch({
+            effects: setCommentState.of({
+              active,
+              ranges
+            })
+          });
+        }
+      }
+      {
+        const { head } = state.selection.main;
+        let min = Infinity;
+        const { active, closest, ranges } = state.field(commentsStateField);
+        const selected = {
+          active: void 0,
+          closest: void 0
+        };
+        ranges.forEach((comment) => {
+          const d = Math.min(Math.abs(head - comment.from), Math.abs(head - comment.to));
+          if (head >= comment.from && head <= comment.to) {
+            selected.active = comment.id;
+          }
+          if (d < min) {
+            selected.closest = comment.id;
+            min = d;
+          }
+        });
+        if (selected.active !== active || selected.closest !== closest) {
+          view.dispatch({
+            effects: setSelection.of(selected)
+          });
+          handleSelect({
+            ...selected,
+            ranges: ranges.map((range) => ({
+              ...range,
+              location: view.coordsAtPos(range.from)
+            }))
+          });
+        }
+      }
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/hr.ts
+import { Decoration as Decoration3, EditorView as EditorView5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import get3 from "lodash.get";
+var styles3 = EditorView5.baseTheme({
+  "& .cm-hr": {
+    // TODO(burdon): ???
+    // Note that block-level decorations should not have vertical margins,
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+  }
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    readonly,
-    extensions: [
-      basicBundle({
-        readonly,
-        themeMode,
-        placeholder: slots?.editor?.placeholder
-      }),
-      ...extensions
-    ],
-    slots,
-    ...props
-  });
+var HorizontalRuleWidget = class extends WidgetType2 {
+  constructor(_pos) {
+    super();
+    this._pos = _pos;
+  }
+  eq(other) {
+    return this._pos === other._pos;
+  }
+  toDOM(view) {
+    const el = document.createElement("div");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var placeholderMatcher = new MatchDecorator2({
+  regexp: /^---$/g,
+  decoration: (match, view, pos) => Decoration3.replace({
+    widget: new HorizontalRuleWidget(pos)
+  })
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    readonly,
-    extensions: [
-      markdownBundle({
-        readonly,
-        themeMode,
-        placeholder: slots?.editor?.placeholder
-      }),
-      ...extensions
-    ],
-    slots,
-    ...props
+var hr = () => [
+  styles3,
+  ViewPlugin4.fromClass(class {
+    constructor(view) {
+      this.rules = placeholderMatcher.createDeco(view);
+    }
+    update(update4) {
+      this.rules = placeholderMatcher.updateDeco(update4, this.rules);
+    }
+  }, {
+    decorations: (instance) => instance.rules,
+    // TODO(burdon): Is this really atomic (cursor can move into ---).
+    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.rules || Decoration3.none;
+    })
+  })
+];
+
+// packages/ui/react-ui-editor/src/extensions/image.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration4, EditorView as EditorView6, WidgetType as WidgetType3 } from "@codemirror/view";
+var image = (options = {}) => {
+  return StateField4.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView6.decorations.from(field)
   });
-});
-var defaultSlots = {
-  root: {
-    className: mx4("p-2", inputSurface)
+};
+var update = (state, options) => {
+  const builder = new RangeSetBuilder();
+  const cursor = state.selection.main.head;
+  syntaxTree(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);
+          builder.add(hide ? node.from : node.to, node.to, Decoration4.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }));
+        }
+      }
+    }
+  });
+  return builder.finish();
+};
+var ImageWidget = class extends WidgetType3 {
+  constructor(_url) {
+    super();
+    this._url = _url;
+  }
+  // TODO(burdon): Does this need to be unique for each position?
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const img = document.createElement("img");
+    img.setAttribute("src", this._url);
+    img.setAttribute("class", "cm-image");
+    return img;
   }
 };
-var defaultTextSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: textTheme
+
+// packages/ui/react-ui-editor/src/extensions/link.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
+var link = (options = {}) => {
+  const extensions = [
+    StateField5.define({
+      create: (state) => update2(state, options),
+      update: (_, tr) => update2(tr.state, options),
+      provide: (field) => EditorView7.decorations.from(field)
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos) => {
+        const { from, text } = view.state.doc.lineAt(pos);
+        const p = pos - from;
+        let idx = 0;
+        let match;
+        do {
+          match = text.substring(idx).match(markdownLinkRegexp);
+          if (!match) {
+            match = void 0;
+            break;
+          }
+          idx = text.indexOf(match[0]);
+          if (p >= idx && p < idx + match[0].length) {
+            break;
+          }
+          idx += match[0].length;
+        } while (true);
+        if (!match) {
+          return null;
+        }
+        const [, , url] = match ?? [];
+        return {
+          pos: idx + from,
+          end: idx + from + match[0].length,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, url);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
+        };
+      })
+    );
   }
+  return extensions;
 };
-var defaultMarkdownSlots = {
-  ...defaultSlots,
-  editor: {
-    theme: markdownTheme
+var LinkButton = class extends WidgetType4 {
+  constructor(_pos, _url, _onAttach) {
+    super();
+    this._pos = _pos;
+    this._url = _url;
+    this._onAttach = _onAttach;
+  }
+  eq(other) {
+    return this._pos === other._pos && this._url === other._url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this._onAttach(el, this._url);
+    return el;
   }
 };
+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 update2 = (state, options) => {
+  const builder = new RangeSetBuilder2();
+  const cursor = state.selection.main.head;
+  syntaxTree2(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 (state.readOnly || cursor < node.from || cursor > node.to) {
+          builder.add(node.from, node.to, Decoration5.replace({
+            widget: new LinkText(text, options.link ? url : void 0)
+          }));
+        }
+        if (options.onRender) {
+          builder.add(node.to, node.to, Decoration5.replace({
+            widget: new LinkButton(node.from, url, options.onRender)
+          }));
+        }
+        return false;
+      }
+    }
+  });
+  return builder.finish();
+};
 
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import get4 from "lodash.get";
-import { useEffect as useEffect3, useState as useState2 } from "react";
-import { yCollab } from "y-codemirror.next";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
-
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-import { Annotation, Facet, StateEffect as StateEffect2, StateField as StateField6 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-import * as automerge2 from "@dxos/automerge/automerge";
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView8 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
+    onFocus(focused);
+    return null;
+  }));
+  onChange && extensions.push(EditorView8.updateListener.of((update4) => {
+    onChange(update4.state.doc.toString());
+  }));
+  return extensions;
+};
 
-// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
-import { next as automerge } from "@dxos/automerge/automerge";
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
+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 EditorView9, highlightActiveLine, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 
-// packages/ui/react-ui-editor/src/hooks/automerge/translation/automerge-to-codemirror.ts
-import { ChangeSet } from "@codemirror/state";
-var automergeToCodemirror = (view, selection, target, patches) => {
-  for (const patch of patches) {
-    const changeSpec = handlePatch(patch, target, view.state);
-    if (changeSpec != null) {
-      const changeSet = ChangeSet.of(changeSpec, view.state.doc.length, "\n");
-      selection = selection.map(changeSet, 1);
-      view.dispatch({
-        changes: changeSet,
-        annotations: reconcileAnnotationType.of({})
-      });
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+import { markdownLanguage } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
+import get4 from "lodash.get";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  // HorizontalRule: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // 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 markdownHighlightStyle = (readonly) => {
+  return HighlightStyle.define([
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid
+      ],
+      color: "inherit !important"
+    },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark
+      ],
+      class: mark
+    },
+    // Markdown marks.
+    {
+      tag: [
+        markdownTags.CodeMark,
+        markdownTags.HeaderMark,
+        markdownTags.QuoteMark,
+        markdownTags.EmphasisMark
+      ],
+      class: readonly ? "hidden" : mark
+    },
+    // E.g., code block language (after ```).
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.labelName
+      ],
+      class: readonly ? "hidden" : codeMark
+    },
+    {
+      tag: [
+        tags.monospace
+      ],
+      class: "font-mono"
+    },
+    // Headings.
+    {
+      tag: tags.heading1,
+      class: heading(1, readonly)
+    },
+    {
+      tag: tags.heading2,
+      class: heading(2, readonly)
+    },
+    {
+      tag: tags.heading3,
+      class: heading(3, readonly)
+    },
+    {
+      tag: tags.heading4,
+      class: heading(4, readonly)
+    },
+    {
+      tag: tags.heading5,
+      class: heading(5, readonly)
+    },
+    {
+      tag: tags.heading6,
+      class: heading(6, readonly)
+    },
+    // Emphasis.
+    {
+      tag: tags.emphasis,
+      class: italic
+    },
+    {
+      tag: tags.strong,
+      class: bold
+    },
+    {
+      tag: tags.strikethrough,
+      class: strikethrough
+    },
+    // Naked URLs.
+    {
+      tag: [
+        markdownTags.URL
+      ],
+      class: inlineUrl
+    },
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
+    // when a language is specified. In this case, the syntax highlighting extensions will colorize
+    // the code, but all other CSS properties will be inherited.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+    {
+      tag: [
+        markdownTags.CodeText,
+        markdownTags.InlineCode
+      ],
+      class: code
+    },
+    {
+      tag: [
+        markdownTags.QuoteMark
+      ],
+      class: blockquote
+    },
+    // TODO(burdon): Replace with extension.
+    // {
+    //   tag: [markdownTags.HorizontalRule],
+    //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
+    // },
+    // TODO(burdon): Only if being edited.
+    {
+      tag: [
+        markdownTags.TableCell
+      ],
+      class: "font-mono"
+    }
+  ], {
+    scope: markdownLanguage,
+    all: {
+      fontFamily: get4(tokens, "fontFamily.body", []).join(",")
     }
-  }
-  view.dispatch({
-    selection,
-    annotations: reconcileAnnotationType.of({})
   });
 };
-var handlePatch = (patch, target, state) => {
-  if (patch.action === "insert") {
-    return handleInsert(target, patch);
-  } else if (patch.action === "splice") {
-    return handleSplice(target, patch);
-  } else if (patch.action === "del") {
-    return handleDel(target, patch);
-  } else if (patch.action === "put") {
-    return handlePut(target, patch, state);
-  } else {
-    return null;
-  }
-};
-var handleInsert = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
-    {
-      from: index,
-      to: index,
-      insert: text
-    }
-  ];
+    EditorState.allowMultipleSelections.of(true),
+    EditorState.tabSize.of(2),
+    EditorView9.lineWrapping,
+    customKeymap(),
+    bracketMatching2(),
+    closeBrackets2(),
+    crosshairCursor(),
+    dropCursor(),
+    drawSelection2(),
+    highlightActiveLine(),
+    history(),
+    indentOnInput(),
+    _placeholder && placeholder2(_placeholder),
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    // https://codemirror.net/5/mode/markdown/index.html (demo).
+    markdown({
+      // GRM by default (vs strict CommonMark):
+      // Table, TaskList, Strikethrough, and Autolink.
+      // NOTE: This extends the parser; it doesn't affect rendering.
+      // https://github.github.com/gfm
+      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+      base: markdownLanguage2,
+      // Languages for syntax highlighting fenced code blocks.
+      codeLanguages: languages,
+      // Parser extensions.
+      extensions: [
+        // GFM provided by default.
+        markdownTagsExtensions
+      ]
+    }),
+    // https://github.com/codemirror/theme-one-dark
+    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
+    // Custom styles.
+    syntaxHighlighting2(markdownHighlightStyle(readonly))
+  ].filter(Boolean);
 };
-var handleSplice = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  return [
-    {
-      from: index,
-      insert: patch.value
-    }
-  ];
+var customKeymap = () => keymap4.of([
+  // https://codemirror.net/docs/ref/#commands.indentWithTab
+  indentWithTab,
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  ...standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.historyKeymap
+  ...historyKeymap,
+  // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+  ...closeBracketsKeymap,
+  // https://codemirror.net/docs/ref/#search.searchKeymap
+  ...searchKeymap
+]);
+
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+var mention = ({ onSearch }) => {
+  return autocompletion2({
+    closeOnBlur: false,
+    override: [
+      (context) => {
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
+        }
+        console.log(match);
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
 };
-var handleDel = (target, patch) => {
-  const index = charPath(target, patch.path);
-  if (index == null) {
-    return [];
-  }
-  const length = patch.length || 1;
-  return [
-    {
-      from: index,
-      to: index + length
-    }
-  ];
+
+// packages/ui/react-ui-editor/src/extensions/mermaid.ts
+var mermaid = () => {
+  return [];
 };
-var handlePut = (target, patch, state) => {
-  const index = charPath(target, [
-    ...patch.path,
-    0
-  ]);
-  if (index == null) {
-    return [];
-  }
-  const length = state.doc.length;
-  if (typeof patch.value !== "string") {
-    return [];
-  }
-  return [
-    {
-      from: 0,
-      to: length,
-      insert: patch.value
-    }
-  ];
+
+// packages/ui/react-ui-editor/src/extensions/table.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
+var table = (options = {}) => {
+  return StateField6.define({
+    create: (state) => update3(state, options),
+    update: (_, tr) => update3(tr.state, options),
+    provide: (field) => EditorView10.decorations.from(field)
+  });
 };
-var charPath = (textPath, candidatePath) => {
-  if (candidatePath.length !== textPath.length + 1) {
-    return null;
-  }
-  for (let i = 0; i < textPath.length; i++) {
-    if (textPath[i] !== candidatePath[i]) {
-      return null;
+var update3 = (state, options) => {
+  const builder = new RangeSetBuilder3();
+  const cursor = state.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
+    return table2.rows?.[table2.rows.length - 1];
+  };
+  syntaxTree3(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        case "Table": {
+          tables.push({
+            from: node.from,
+            to: node.to
+          });
+          break;
+        }
+        case "TableHeader": {
+          getTable().header = [];
+          break;
+        }
+        case "TableRow": {
+          (getTable().rows ??= []).push([]);
+          break;
+        }
+        case "TableCell": {
+          const row = getRow();
+          if (row) {
+            row.push(state.sliceDoc(node.from, node.to));
+          } else {
+            getTable().header?.push(state.sliceDoc(node.from, node.to));
+          }
+          break;
+        }
+      }
     }
-  }
-  const index = candidatePath[candidatePath.length - 1];
-  if (typeof index === "number") {
-    return index;
-  }
-  return null;
+  });
+  tables.forEach((table2) => {
+    const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
+    hide && builder.add(table2.from, table2.to, Decoration6.replace({
+      block: true,
+      widget: new TableWidget(table2)
+    }));
+    builder.add(table2.from, table2.to, Decoration6.mark({
+      class: "cm-table"
+    }));
+  });
+  return builder.finish();
 };
-
-// packages/ui/react-ui-editor/src/hooks/automerge/translation/codemirror-to-automerge.ts
-import { next as am } from "@dxos/automerge/automerge";
-var codemirrorToAutomerge = (field, handle, transactions, state) => {
-  const { lastHeads, path } = state.field(field);
-  let hasChanges = false;
-  for (const tr of transactions) {
-    tr.changes.iterChanges(() => {
-      hasChanges = true;
-    });
+var TableWidget = class extends WidgetType5 {
+  constructor(_table) {
+    super();
+    this._table = _table;
   }
-  if (!hasChanges) {
-    return void 0;
+  eq(other) {
+    return this._table.from === other?._table?.from;
   }
-  const newHeads = handle.changeAt(lastHeads, (doc) => {
-    for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
-        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+  toDOM(view) {
+    const table2 = document.createElement("table");
+    {
+      const header = table2.appendChild(document.createElement("thead"));
+      const tr = header.appendChild(document.createElement("tr"));
+      this._table.header?.forEach((cell) => {
+        const th = document.createElement("th");
+        th.setAttribute("class", "cm-table-head");
+        tr.appendChild(th).textContent = cell;
       });
     }
-  });
-  return newHeads ?? void 0;
-};
-
-// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
-var PatchSemaphore = class {
-  constructor(field) {
-    this._inReconcile = false;
-    this._queue = [];
-    this.reconcile = (handle, view) => {
-      if (this._inReconcile) {
-        return;
-      }
-      this._inReconcile = true;
-      const path = getPath(view.state, this._field);
-      const oldHeads = getLastHeads(view.state, this._field);
-      let selection = view.state.selection;
-      const transactions = view.state.field(this._field).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
-      const toInvert = transactions.slice().reverse();
-      for (const tx of toInvert) {
-        const inverted = tx.changes.invert(tx.startState.doc);
-        selection = selection.map(inverted);
-        view.dispatch({
-          changes: inverted,
-          annotations: reconcileAnnotationType.of(true)
+    {
+      const body = table2.appendChild(document.createElement("tbody"));
+      this._table.rows?.forEach((row) => {
+        const tr = body.appendChild(document.createElement("tr"));
+        row.forEach((cell) => {
+          const td = document.createElement("td");
+          td.setAttribute("class", "cm-table-cell");
+          tr.appendChild(td).textContent = cell;
         });
-      }
-      let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
-      if (newHeads === null || newHeads === void 0) {
-        newHeads = automerge.getHeads(handle.docSync());
-      }
-      const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
-      automergeToCodemirror(view, selection, path, diff);
-      view.dispatch({
-        effects: updateHeads(newHeads),
-        annotations: reconcileAnnotationType.of({})
       });
-      this._inReconcile = false;
-    };
-    if (field !== void 0) {
-      this._field = field;
     }
+    return table2;
   }
 };
 
-// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-var effectType = StateEffect2.define({});
-var updateHeads = (newHeads) => effectType.of({
-  newHeads
-});
-var getLastHeads = (state, field) => state.field(field).lastHeads;
-var getPath = (state, field) => state.field(field).path;
-var semaphoreFacet = Facet.define({
-  combine: (values) => values.at(-1)
+// packages/ui/react-ui-editor/src/extensions/tasklist.ts
+import { EditorView as EditorView11, Decoration as Decoration7, WidgetType as WidgetType6, MatchDecorator as MatchDecorator3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var styles4 = EditorView11.baseTheme({
+  "& .cm-task-item": {
+    paddingLeft: "4px",
+    paddingRight: "8px"
+  }
 });
-var automergePlugin = (handle, path) => {
-  const stateField = StateField6.define({
-    create: () => ({
-      lastHeads: automerge2.getHeads(handle.docSync()),
-      unreconciledTransactions: [],
-      path: path.slice()
-    }),
-    update: (value, tr) => {
-      const result = {
-        lastHeads: value.lastHeads,
-        unreconciledTransactions: value.unreconciledTransactions.slice(),
-        path: path.slice()
+var CheckboxWidget = class extends WidgetType6 {
+  constructor(_pos, _checked, _indent, _onCheck) {
+    super();
+    this._pos = _pos;
+    this._checked = _checked;
+    this._indent = _indent;
+    this._onCheck = _onCheck;
+  }
+  eq(other) {
+    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
+  }
+  toDOM(view) {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-task-item";
+    wrap.setAttribute("aria-hidden", "true");
+    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
+    const input = wrap.appendChild(document.createElement("input"));
+    input.type = "checkbox";
+    input.checked = this._checked;
+    if (!this._onCheck) {
+      input.setAttribute("disabled", "true");
+    }
+    if (this._onCheck) {
+      input.onchange = (event) => {
+        this._onCheck?.(event.target.checked);
+        return true;
       };
-      let clearUnreconciled = false;
-      for (const effect of tr.effects) {
-        if (effect.is(effectType)) {
-          result.lastHeads = effect.value.newHeads;
-          clearUnreconciled = true;
-        }
-      }
-      if (clearUnreconciled) {
-        result.unreconciledTransactions = [];
-      } else {
-        if (!isReconcileTx(tr)) {
-          result.unreconciledTransactions.push(tr);
-        }
-      }
-      return result;
+    }
+    return wrap;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var tasklist = (options = {}) => {
+  const taskMatcher = new MatchDecorator3({
+    regexp: /^(\s*)- \[([ xX])\]\s/g,
+    decoration: (match, view, pos) => {
+      const indent = Math.floor(match[1].length / 2);
+      const checked = match[2] === "x" || match[2] === "X";
+      return Decoration7.replace({
+        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
+          const idx = pos + match[0].indexOf("[") + 1;
+          view.dispatch({
+            changes: {
+              from: idx,
+              to: idx + 1,
+              insert: checked2 ? "x" : " "
+            },
+            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+            selection: {
+              anchor: idx + 3
+            }
+          });
+        })
+      });
     }
   });
-  const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin4.fromClass(class AutomergeCodemirrorViewPlugin {
+  const tasks = ViewPlugin5.fromClass(class {
     constructor(view) {
-      this._handleChange = () => {
-        this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
-      };
-      this._view = view;
-      handle.addListener("change", this._handleChange);
+      this.tasks = taskMatcher.createDeco(view);
     }
     update(update4) {
-      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
-        queueMicrotask(() => {
-          this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
-        });
-      }
-    }
-    destroy() {
-      handle.addListener("change", this._handleChange);
+      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
     }
+  }, {
+    decorations: (value) => value.tasks,
+    provide: (plugin) => EditorView11.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tasks || Decoration7.none;
+    })
   });
-  return {
-    extension: [
-      stateField,
-      semaphoreFacet.of(semaphore),
-      viewPlugin
-    ]
-  };
+  return [
+    tasks,
+    styles4
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/typewriter.ts
+import { keymap as keymap5 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap5.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
+      }
+    ])
+  ];
 };
-var reconcileAnnotationType = Annotation.define();
-var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
-import * as random2 from "lib0/random";
-var cursorColors = [
-  {
-    color: "#30bced",
-    light: "#30bced33"
+// packages/ui/react-ui-editor/src/themes/default.ts
+import get5 from "lodash.get";
+var defaultTheme = {
+  //
+  // Main layout:
+  // https://codemirror.net/examples/styling
+  //
+  // <div class="cm-editor [cm-focused] [generated classes]">
+  //   <div class="cm-scroller">
+  //     <div class="cm-gutters">
+  //       <div class="cm-gutter [...]">
+  //         <div class="cm-gutterElement">...</div>
+  //       </div>
+  //     </div>
+  //     <div class="cm-content" role="textbox" contenteditable="true">
+  //       <div class="cm-line"></div>
+  //     </div>
+  //     <div class="cm-selectionLayer">
+  //       <div class="cm-selectionBackground"></div>
+  //     </div>
+  //     <div class="cm-cursorLayer">
+  //       <div class="cm-cursor"></div>
+  //     </div>
+  //   </div>
+  // </div>
+  //
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
   },
-  {
-    color: "#6eeb83",
-    light: "#6eeb8333"
+  "& .cm-scroller": {
+    overflow: "visible",
+    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
   },
-  {
-    color: "#ffbc42",
-    light: "#ffbc4233"
+  "& .cm-content": {
+    padding: 0,
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px"
   },
-  {
-    color: "#ecd444",
-    light: "#ecd44433"
+  "&light .cm-content": {
+    color: get5(tokens, "extend.colors.neutral.900", "black"),
+    caretColor: "black"
   },
-  {
-    color: "#ee6352",
-    light: "#ee635233"
+  "&dark .cm-content": {
+    color: get5(tokens, "extend.colors.neutral.100", "white"),
+    caretColor: "white"
   },
-  {
-    color: "#9ac2c9",
-    light: "#9ac2c933"
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
   },
-  {
-    color: "#8acb88",
-    light: "#8acb8833"
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
   },
-  {
-    color: "#1be7ff",
-    light: "#1be7ff33"
-  }
-];
-var cursorColor = cursorColors[random2.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_file3 = "/home/circleci/project/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));
+  "& .cm-placeholder": {
+    fontWeight: 100
+  },
+  //
+  // line
+  //
+  "& .cm-line": {
+    paddingInline: 0
+  },
+  "& .cm-activeLine": {
+    background: "inherit"
+  },
+  //
+  // Selection
+  //
+  "&light .cm-selectionBackground": {
+    background: get5(tokens, "extend.colors.primary.100")
+  },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get5(tokens, "extend.colors.primary.200")
+  },
+  "&dark .cm-selectionBackground": {
+    background: get5(tokens, "extend.colors.primary.700")
+  },
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get5(tokens, "extend.colors.primary.600")
+  },
+  //
+  // Search
+  //
+  "&light .cm-searchMatch": {
+    backgroundColor: get5(tokens, "extend.colors.yellow.100")
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: get5(tokens, "extend.colors.yellow.700")
+  },
+  //
+  // collaboration
+  // TODO(burdon): Review classnames (YJS dependent?) Note: e2e tests depend on this class.
+  //
+  "&light .cm-ySelection, &light .cm-yLineSelection": {
+    mixBlendMode: "multiply"
+  },
+  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
+    mixBlendMode: "screen"
+  },
+  "& .cm-ySelectionInfo": {
+    padding: "2px 4px",
+    marginBlockStart: "-4px"
+  },
+  "& .cm-ySelection, & .cm-selectionMatch": {
+    paddingBlockStart: ".15em",
+    paddingBlockEnd: ".15em"
+  },
+  "& .cm-ySelectionCaret": {
+    display: "inline-block",
+    insetBlockStart: ".1em",
+    blockSize: "1.4em",
+    verticalAlign: "top"
+  },
+  "& .cm-yLineSelection": {
+    margin: 0
+  },
+  //
+  // link
+  //
+  "& .cm-link": {
+    color: get5(tokens, "extend.colors.primary.500"),
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem",
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  },
+  //
+  // tooltip
+  //
+  "& .cm-tooltip": {
+    border: "none"
+  },
+  "& .cm-tooltip-below": {},
+  //
+  // autocomplete
+  //
+  "& .cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  "& .cm-tooltip-autocomplete ul li": {},
+  "& .cm-tooltip-autocomplete ul li[aria-selected]": {},
+  "& .cm-completionIcon": {
+    display: "none"
+  },
+  "& .cm-completionLabel": {
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-completionMatchedText": {
+    textDecoration: "none"
+  },
+  //
+  // widgets
+  //
+  "& .cm-widgetBuffer": {
+    display: "none",
+    height: 0
+  },
+  //
+  // table
+  //
+  "& .cm-table *": {
+    fontFamily: `${get5(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
+  "& .cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    borderBottom: `1px solid ${get5(tokens, "extend.colors.neutral.500")}`,
+    fontWeight: 100,
+    textAlign: "left",
+    color: get5(tokens, "extend.colors.neutral.500")
+  },
+  "& .cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  "& .cm-image": {
+    margin: "0.5rem 0"
+  },
+  //
+  // font size
+  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+  //
+  ...Object.keys(get5(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get5(tokens, [
+      "extend",
+      "fontSize",
+      fontSize,
+      1,
+      "lineHeight"
+    ]);
+    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = {
+      height
+    };
+    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = {
+      height
+    };
+    return acc;
+  }, {}),
+  /**
+  * Panels
+  * TODO(burdon): Needs styling attention (esp. dark mode).
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  "& .cm-panels": {
+    border: `1px solid ${get5(tokens, "extend.colors.neutral.200")}`
+  },
+  "& .cm-panel": {
+    background: get5(tokens, "extend.colors.neutral.50"),
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-button": {
+    margin: "4px",
+    fontFamily: get5(tokens, "fontFamily.body", []).join(","),
+    background: get5(tokens, "extend.colors.neutral.100"),
+    backgroundImage: "none",
+    border: "none",
+    "&:hover": {
+      background: get5(tokens, "extend.colors.neutral.200")
+    },
+    "&:active": {
+      background: get5(tokens, "extend.colors.neutral.300"),
+      backgroundImage: "none"
     }
-    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));
+  },
+  "& .cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  }
+};
+var textTheme = {
+  "& .cm-scroller": {
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-placeholder": {
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
+  }
+};
+var markdownTheme = {
+  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  "& .cm-placeholder": {
+    fontFamily: get5(tokens, "fontFamily.body", []).join(",")
   }
-  get awareness() {
-    return this._awareness;
+};
+var codeTheme = {
+  "& .cm-scroller": {
+    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
+  },
+  "& .cm-placeholder": {
+    fontFamily: get5(tokens, "fontFamily.mono", []).join(",")
   }
-  _handleAwarenessUpdate({ added, updated, removed }, origin) {
-    log("awareness update", {
-      added,
-      updated,
-      removed,
-      origin
-    }, {
-      F: __dxlog_file3,
-      L: 67,
-      S: this,
-      C: (f, a) => f(...a)
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var EditorModes = [
+  "default",
+  "vim"
+];
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const [root, setRoot] = useState2(null);
+  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState2();
+  useImperativeHandle(forwardedRef, () => ({
+    root,
+    state,
+    view
+  }), [
+    view,
+    state,
+    root
+  ]);
+  const { awareness, peer } = model;
+  useEffect2(() => {
+    if (awareness && peer) {
+      awareness.setLocalStateField("user", {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({
+          value: peer.id,
+          type: "color"
+        }),
+        colorLight: getColorForValue({
+          value: peer.id,
+          themeMode,
+          type: "highlight"
+        })
+      });
+    }
+  }, [
+    awareness,
+    peer,
+    themeMode
+  ]);
+  useEffect2(() => {
+    if (view && comments2?.length) {
+      view.dispatch({
+        effects: setCommentRange.of({
+          model,
+          comments: comments2
+        })
+      });
+    }
+  }, [
+    view,
+    comments2
+  ]);
+  useEffect2(() => {
+    if (!root) {
+      return;
+    }
+    const state2 = EditorState2.create({
+      doc: model.text(),
+      extensions: [
+        readonly && EditorState2.readOnly.of(readonly),
+        // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
+        editorMode === "vim" && vim(),
+        // Theme.
+        // TODO(burdon): Make theme configurable.
+        EditorView12.baseTheme(defaultTheme),
+        EditorView12.theme(slots?.editor?.theme ?? {}),
+        EditorView12.darkTheme.of(themeMode === "dark"),
+        // Storage and replication.
+        model.extension,
+        // Custom.
+        ...extensions
+      ].filter(Boolean)
     });
-    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_file3,
-      L: 79,
-      S: this,
-      C: (f, a) => f(...a)
+    view?.destroy();
+    setEditor({
+      state: state2,
+      view: new EditorView12({
+        state: state2,
+        parent: root
+      })
     });
-    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);
+    return () => {
+      view?.destroy();
+      setEditor(void 0);
+    };
+  }, [
+    root,
+    model,
+    readonly,
+    editorMode,
+    themeMode
+  ]);
+  const handleKeyUp = useCallback((event) => {
+    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    switch (key) {
+      case "Enter": {
+        view?.contentDOM.focus();
         break;
       }
-      case messageQueryAwareness: {
-        encoding.writeVarUint(encoder, messageAwareness);
-        encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())));
-        sendReply = true;
+      case "Escape": {
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
         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 __dxlog_file4 = "/home/circleci/project/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var useTextModel = ({ identity, space, text }) => {
-  const [model, setModel] = useState2(() => createModel({
-    identity,
-    space,
-    text
-  }));
-  useEffect3(() => {
-    setModel(createModel({
-      identity,
-      space,
-      text
-    }));
   }, [
-    identity,
-    space,
-    text
+    view,
+    editorMode
   ]);
-  return model;
-};
-var createModel = (options) => {
-  const { text } = options;
-  if (isActualAutomergeObject(text)) {
-    return createAutomergeModel(options);
-  } else {
-    if (!text?.doc) {
-      return void 0;
-    }
-    return createYjsModel(options);
+  return /* @__PURE__ */ React.createElement("div", {
+    key: model.id,
+    ref: setRoot,
+    tabIndex: 0,
+    ...slots?.root,
+    ...editorMode !== "vim" && tabsterDOMAttribute,
+    onKeyUp: handleKeyUp
+  });
+});
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    readonly,
+    extensions: [
+      basicBundle({
+        readonly,
+        themeMode,
+        placeholder: slots?.editor?.placeholder
+      }),
+      ...extensions
+    ],
+    slots,
+    ...props
+  });
+});
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    readonly,
+    extensions: [
+      markdownBundle({
+        readonly,
+        themeMode,
+        placeholder: slots?.editor?.placeholder
+      }),
+      ...extensions
+    ],
+    slots,
+    ...props
+  });
+});
+var defaultSlots = {
+  root: {
+    className: mx3("p-2", inputSurface)
   }
 };
-var createYjsModel = ({ identity, space, text }) => {
-  invariant3(text?.doc && text?.content, void 0, {
-    F: __dxlog_file4,
-    L: 81,
-    S: void 0,
-    A: [
-      "text?.doc && text?.content",
-      ""
-    ]
-  });
-  const provider = space ? new SpaceAwarenessProvider({
-    space,
-    doc: text.doc,
-    channel: `yjs.awareness.${text.id}`
-  }) : void 0;
-  return {
-    id: text.doc.guid,
-    content: text.content,
-    text: () => text.content.toString(),
-    ranges: [],
-    extension: yCollab(text.content, provider?.awareness),
-    awareness: provider?.awareness,
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
+var defaultTextSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: textTheme
+  }
 };
-var createAutomergeModel = ({ identity, text }) => {
-  const obj = text;
-  const doc = getRawDoc(obj, [
-    obj.field
-  ]);
-  return {
-    id: obj.id,
-    content: doc,
-    text: () => get4(doc.handle.docSync(), doc.path),
-    ranges: [],
-    extension: automergePlugin(doc.handle, doc.path),
-    peer: identity ? {
-      id: identity.identityKey.toHex(),
-      name: identity.profile?.displayName
-    } : void 0
-  };
+var defaultMarkdownSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme
+  }
 };
 export {
   BaseTextEditor,
@@ -2355,25 +2583,24 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
-  demo,
-  highlight,
-  highlightDecorations,
-  highlightStateField,
+  hr,
   image,
   link,
-  listener2 as listener,
+  listener,
   markdownBundle,
   markdownHighlightStyle,
   markdownTags,
   markdownTagsExtensions,
   markdownTheme,
   mention,
+  mermaid,
+  modelState,
+  setCommentRange,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
-  tooltip,
-  useHighlights,
+  typewriter,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map