@dxos/react-ui-editor 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/dist/lib/browser/index.mjs

@@ -25,8 +25,8 @@ var translations = [
         "selection overlaps existing comment label": "Selection overlaps existing comment",
         "select text to comment label": "Select text to comment",
         "image label": "Insert image",
-        "heading label": "Heading level",
         "table label": "Create table",
+        "heading label": "Heading level",
         "heading level label_zero": "Paragraph",
         "heading level label_one": "Heading level {{count}}",
         "heading level label_other": "Heading level {{count}}",
@@ -42,7 +42,7 @@ var translations = [
 
 // src/index.ts
 import { EditorState as EditorState4 } from "@codemirror/state";
-import { EditorView as EditorView27, keymap as keymap14 } from "@codemirror/view";
+import { EditorView as EditorView31, keymap as keymap14 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -50,28 +50,38 @@ import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React3, { forwardRef, useImperativeHandle } from "react";
 import { useThemeContext } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // src/hooks/useTextEditor.ts
 import { EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView26 } from "@codemirror/view";
+import { EditorView as EditorView30 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
-import { log as log8 } from "@dxos/log";
-import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
+import { log as log9 } from "@dxos/log";
+import { getProviderValue, isNotFalsy as isNotFalsy5 } from "@dxos/util";
 
 // src/extensions/annotations.ts
 import { RangeSetBuilder } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin } from "@codemirror/view";
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var annotationMark = Decoration.mark({
   class: "cm-annotation"
 });
 var annotations = ({ match } = {}) => {
   return [
     ViewPlugin.fromClass(class {
-      constructor() {
-        this.decorations = Decoration.none;
-      }
       update(update2) {
         const builder = new RangeSetBuilder();
         if (match) {
@@ -88,6 +98,9 @@ var annotations = ({ match } = {}) => {
         }
         this.decorations = builder.finish();
       }
+      constructor() {
+        _define_property(this, "decorations", Decoration.none);
+      }
     }, {
       decorations: (v) => v.decorations
     }),
@@ -102,58 +115,522 @@ var annotations = ({ match } = {}) => {
 };
 
 // src/extensions/autocomplete.ts
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { keymap } from "@codemirror/view";
-var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
-  const extensions = [
-    // https://codemirror.net/docs/ref/#view.keymap
-    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
-    // TODO(burdon): Set custom keymap.
-    keymap.of(completionKeymap),
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    autocompletion({
-      override,
-      activateOnTyping
+import { Prec } from "@codemirror/state";
+import { Decoration as Decoration2, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType, keymap } from "@codemirror/view";
+function _define_property2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }) => {
+  const suggest = ViewPlugin2.fromClass(class {
+    update(update2) {
+      if (update2.docChanged || update2.selectionSet) {
+        this._decorations = this.computeDecorations(update2.view);
+      }
+    }
+    computeDecorations(view) {
+      const text = view.state.doc.toString();
+      const suggestions = onSuggest?.(text) ?? [];
+      if (!suggestions.length) {
+        this._currentSuggestion = null;
+        return Decoration2.none;
+      }
+      this._currentSuggestion = suggestions[0];
+      const suffix = this._currentSuggestion.slice(text.length);
+      if (!suffix) {
+        return Decoration2.none;
+      }
+      return Decoration2.set([
+        Decoration2.widget({
+          widget: new InlineSuggestionWidget(suffix),
+          side: 1
+        }).range(view.state.doc.length)
+      ]);
+    }
+    completeSuggestion(view) {
+      if (!this._currentSuggestion) {
+        return false;
+      }
+      const text = view.state.doc.toString();
+      const suffix = this._currentSuggestion.slice(text.length);
+      if (!suffix) {
+        return false;
+      }
+      view.dispatch({
+        changes: {
+          from: view.state.doc.length,
+          insert: suffix
+        },
+        selection: {
+          anchor: view.state.doc.length + suffix.length
+        }
+      });
+      return true;
+    }
+    constructor(view) {
+      _define_property2(this, "_decorations", void 0);
+      _define_property2(this, "_currentSuggestion", null);
+      this._decorations = this.computeDecorations(view);
+    }
+  }, {
+    decorations: (v) => v._decorations
+  });
+  return [
+    suggest,
+    EditorView2.theme({
+      ".cm-inline-suggestion": {
+        opacity: 0.4
+      }
+    }),
+    Prec.highest(keymap.of([
+      {
+        key: "Tab",
+        preventDefault: true,
+        run: (view) => {
+          const plugin = view.plugin(suggest);
+          return plugin?.completeSuggestion(view) ?? false;
+        }
+      },
+      {
+        key: "ArrowRight",
+        preventDefault: true,
+        run: (view) => {
+          if (view.state.selection.main.head !== view.state.doc.length) {
+            return false;
+          }
+          const plugin = view.plugin(suggest);
+          return plugin?.completeSuggestion(view) ?? false;
+        }
+      },
+      {
+        key: "Enter",
+        preventDefault: true,
+        run: (view) => {
+          const text = view.state.doc.toString().trim();
+          if (onSubmit && (fireIfEmpty || text.length > 0)) {
+            const reset = onSubmit(text);
+            if (reset) {
+              view.dispatch({
+                changes: {
+                  from: 0,
+                  to: view.state.doc.length,
+                  insert: ""
+                }
+              });
+            }
+          }
+          return true;
+        }
+      },
+      {
+        key: "Shift-Enter",
+        preventDefault: true,
+        run: (view) => {
+          view.dispatch({
+            changes: {
+              from: view.state.selection.main.head,
+              insert: "\n"
+            },
+            selection: {
+              anchor: view.state.selection.main.head + 1,
+              head: view.state.selection.main.head + 1
+            }
+          });
+          return true;
+        }
+      },
+      {
+        key: "Escape",
+        preventDefault: true,
+        run: (view) => {
+          view.dispatch({
+            changes: {
+              from: 0,
+              to: view.state.doc.length,
+              insert: ""
+            }
+          });
+          onCancel?.();
+          return true;
+        }
+      }
+    ]))
+  ];
+};
+var InlineSuggestionWidget = class extends WidgetType {
+  toDOM() {
+    const span = document.createElement("span");
+    span.textContent = this.suffix;
+    span.className = "cm-inline-suggestion";
+    return span;
+  }
+  eq(other) {
+    return other.suffix === this.suffix;
+  }
+  constructor(suffix) {
+    super(), _define_property2(this, "suffix", void 0), this.suffix = suffix;
+  }
+};
+
+// src/extensions/autoscroll.ts
+import { StateEffect } from "@codemirror/state";
+import { EditorView as EditorView3, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+
+// src/util/facet.ts
+import { Facet } from "@codemirror/state";
+var singleValueFacet = (defaultValue) => Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
+});
+
+// src/util/cursor.ts
+function _define_property3(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor2) => parseInt(cursor2)
+};
+var Cursor = class {
+};
+_define_property3(Cursor, "converter", singleValueFacet(defaultCursorConverter));
+_define_property3(Cursor, "getCursorFromRange", (state, range) => {
+  const cursorConverter2 = state.facet(Cursor.converter);
+  const from = cursorConverter2.toCursor(range.from);
+  const to = cursorConverter2.toCursor(range.to, -1);
+  return [
+    from,
+    to
+  ].join(":");
+});
+_define_property3(Cursor, "getRangeFromCursor", (state, cursor2) => {
+  const cursorConverter2 = state.facet(Cursor.converter);
+  const parts = cursor2.split(":");
+  const from = cursorConverter2.fromCursor(parts[0]);
+  const to = cursorConverter2.fromCursor(parts[1]);
+  return from !== void 0 && to !== void 0 ? {
+    from,
+    to
+  } : void 0;
+});
+
+// src/util/decorations.ts
+var decorationSetToArray = (deco) => {
+  const ranges = [];
+  const iter = deco.iter();
+  while (iter.value) {
+    ranges.push({
+      from: iter.from,
+      to: iter.to,
+      value: iter.value
+    });
+    iter.next();
+  }
+  return ranges;
+};
+
+// src/util/debug.ts
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var wrapWithCatch = (fn, label) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log.catch(err, {
+        label
+      }, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    log.catch(err, void 0, {
+      F: __dxlog_file,
+      L: 29,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
+};
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
+    }
+    const changes2 = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      inserted: inserted.toString()
+    })));
+    return changes2;
+  }).filter(Boolean);
+  if (changes.length) {
+    log("changes", {
+      changes
+    }, {
+      F: __dxlog_file,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+
+// src/util/dom.ts
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+
+// src/util/domino.ts
+import { mx } from "@dxos/react-ui-theme";
+function _define_property4(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var Domino = class _Domino {
+  static of(tag) {
+    return new _Domino(tag);
+  }
+  classNames(...classNames) {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value) {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key, value) {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  style(styles4) {
+    Object.assign(this._el.style, styles4);
+    return this;
+  }
+  attr(key, value) {
+    this._el[key] = value;
+    return this;
+  }
+  child(...children) {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event, handler) {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build() {
+    return this._el;
+  }
+  constructor(tag) {
+    _define_property4(this, "_el", void 0);
+    this._el = document.createElement(tag);
+  }
+};
+
+// src/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider, Tooltip } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+var renderRoot = (root, node) => {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
+};
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
+};
+
+// src/extensions/autoscroll.ts
+var lineHeight = 24;
+var scrollToBottomEffect = StateEffect.define();
+var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {}) => {
+  let isThrottled = false;
+  let isPinned = true;
+  let lastScrollTop = 0;
+  let timeout;
+  let buttonContainer;
+  const hideScrollbar = (view) => {
+    view.scrollDOM.classList.add("cm-hide-scrollbar");
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      view.scrollDOM.classList.remove("cm-hide-scrollbar");
+    }, 1e3);
+  };
+  const scrollToBottom = (view) => {
+    isPinned = true;
+    buttonContainer?.classList.add("opacity-0");
+    requestAnimationFrame(() => {
+      hideScrollbar(view);
+      view.scrollDOM.scrollTo({
+        top: view.scrollDOM.scrollHeight,
+        behavior: "smooth"
+      });
+    });
+  };
+  return [
+    // Scroll button.
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        const scroller = view.scrollDOM.parentElement;
+        buttonContainer = Domino.of("div").classNames("cm-scroll-button transition-opacity duration-300 opacity-0").child(Domino.of("button").classNames("dx-button bg-accentSurface").data("density", "fine").child(Domino.of("dx-icon").attr("icon", "ph--arrow-down--regular")).on("click", () => {
+          scrollToBottom(view);
+        })).build();
+        scroller?.appendChild(buttonContainer);
+      }
+    }),
+    // Update listener for logging when scrolling is needed.
+    EditorView3.updateListener.of((update2) => {
+      update2.transactions.forEach((transaction) => {
+        for (const effect of transaction.effects) {
+          if (effect.is(scrollToBottomEffect)) {
+            scrollToBottom(update2.view);
+          }
+        }
+      });
+      if (update2.docChanged && isPinned && !isThrottled) {
+        const distanceFromBottom = calcDistance(update2.view.scrollDOM);
+        if (distanceFromBottom > overscroll) {
+          isThrottled = true;
+          requestAnimationFrame(() => {
+            scrollToBottom(update2.view);
+          });
+          setTimeout(() => {
+            isThrottled = false;
+          }, throttle2);
+        }
+      }
+    }),
+    EditorView3.domEventHandlers({
+      scroll: (event, view) => {
+        const scroller = view.scrollDOM;
+        const distanceFromBottom = calcDistance(scroller);
+        if (distanceFromBottom === 0) {
+          isPinned = true;
+          buttonContainer?.classList.add("opacity-0");
+        } else if (scroller.scrollTop < lastScrollTop) {
+          isPinned = false;
+          buttonContainer?.classList.remove("opacity-0");
+        }
+        lastScrollTop = scroller.scrollTop;
+      }
+    }),
+    EditorView3.theme({
+      ".cm-scroller": {
+        paddingBottom: `${overscroll}px`,
+        scrollbarWidth: "thin"
+      },
+      ".cm-scroller.cm-hide-scrollbar": {
+        scrollbarWidth: "none"
+      },
+      ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
+        display: "none"
+      },
+      // TODO(burdon): IconButton.
+      ".cm-scroll-button": {
+        position: "absolute",
+        bottom: "0.5rem",
+        right: "1rem"
+      }
     })
   ];
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions.
-      markdownLanguage.data.of({
-        autocomplete: (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
-        }
-      })
-    );
-  }
-  return extensions;
+};
+var calcDistance = (scroller) => {
+  const scrollTop = scroller.scrollTop;
+  const scrollHeight = scroller.scrollHeight;
+  const clientHeight = scroller.clientHeight;
+  const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+  return distanceFromBottom;
 };
 
 // src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
 import { StateField } from "@codemirror/state";
-import { EditorView as EditorView2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+import { EditorView as EditorView4, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 
 // src/extensions/automerge/cursor.ts
-import { log } from "@dxos/log";
+import { log as log2 } from "@dxos/log";
 import { fromCursor, toCursor } from "@dxos/react-client/echo";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
 var cursorConverter = (accessor) => ({
   toCursor: (pos, assoc) => {
     try {
       return toCursor(accessor, pos, assoc);
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
+      log2.catch(err, void 0, {
+        F: __dxlog_file2,
         L: 15,
         S: void 0,
         C: (f, a) => f(...a)
@@ -161,12 +638,12 @@ var cursorConverter = (accessor) => ({
       return "";
     }
   },
-  fromCursor: (cursor) => {
+  fromCursor: (cursor2) => {
     try {
-      return fromCursor(accessor, cursor);
+      return fromCursor(accessor, cursor2);
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
+      log2.catch(err, void 0, {
+        F: __dxlog_file2,
         L: 24,
         S: void 0,
         C: (f, a) => f(...a)
@@ -177,10 +654,10 @@ var cursorConverter = (accessor) => ({
 });
 
 // src/extensions/automerge/defs.ts
-import { Annotation, StateEffect } from "@codemirror/state";
+import { Annotation, StateEffect as StateEffect2 } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeadsEffect = StateEffect.define({});
+var updateHeadsEffect = StateEffect2.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
@@ -331,13 +808,20 @@ var charPath = (textPath, candidatePath) => {
 };
 
 // src/extensions/automerge/sync.ts
-var Syncer = class {
-  // prettier-ignore
-  constructor(_handle, _state) {
-    this._handle = _handle;
-    this._state = _state;
-    this._pending = false;
+function _define_property5(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+var Syncer = class {
   reconcile(view, editor2) {
     if (this._pending) {
       return;
@@ -372,172 +856,31 @@ var Syncer = class {
       annotations: reconcileAnnotation.of(false)
     });
   }
-};
-
-// src/util/facet.ts
-import { Facet } from "@codemirror/state";
-var singleValueFacet = (defaultValue) => Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
-});
-
-// src/util/cursor.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = singleValueFacet(defaultCursorConverter);
-  }
-  static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
+  // prettier-ignore
+  constructor(_handle, _state) {
+    _define_property5(this, "_handle", void 0);
+    _define_property5(this, "_state", void 0);
+    _define_property5(this, "_pending", void 0);
+    this._handle = _handle;
+    this._state = _state;
+    this._pending = false;
   }
 };
 
-// src/util/debug.ts
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-};
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    log2.catch(err, void 0, {
-      F: __dxlog_file2,
-      L: 29,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-var debugDispatcher = (trs, view) => {
-  logChanges(trs);
-  view.update(trs);
-};
-var logChanges = (trs) => {
-  const changes = trs.flatMap((tr) => {
-    if (tr.changes.empty) {
-      return void 0;
-    }
-    const changes2 = [];
-    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
-      fromA,
-      toA,
-      fromB,
-      toB,
-      inserted: inserted.toString()
-    })));
-    return changes2;
-  }).filter(Boolean);
-  if (changes.length) {
-    log2("changes", {
-      changes
-    }, {
-      F: __dxlog_file2,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
+// src/extensions/automerge/automerge.ts
+function _define_property6(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
     });
-  }
-};
-
-// src/util/dom.ts
-var flattenRect = (rect, left) => {
-  const x = left ? rect.left : rect.right;
-  return {
-    left: x,
-    right: x,
-    top: rect.top,
-    bottom: rect.bottom
-  };
-};
-var scratchRange;
-var textRange = (node, from, to = from) => {
-  const range = scratchRange || (scratchRange = document.createRange());
-  range.setEnd(node, to);
-  range.setStart(node, from);
-  return range;
-};
-var clientRectsFor = (dom) => {
-  if (dom.nodeType === 3) {
-    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
-  } else if (dom.nodeType === 1) {
-    return dom.getClientRects();
   } else {
-    return [];
-  }
-};
-var createElement = (tag, options, children) => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (options?.text) {
-    el.textContent = options.text;
-  }
-  if (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
+    obj[key] = value;
   }
-  return el;
-};
-
-// src/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
-};
-var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
-};
-
-// src/extensions/automerge/automerge.ts
+  return obj;
+}
 var automerge = (accessor) => {
   const syncState = StateField.define({
     create: () => ({
@@ -574,20 +917,22 @@ var automerge = (accessor) => {
     // Track heads.
     syncState,
     // Reconcile external updates.
-    ViewPlugin2.fromClass(class {
+    ViewPlugin4.fromClass(class {
+      destroy() {
+        accessor.handle.removeListener("change", this._handleChange);
+      }
       constructor(_view) {
+        _define_property6(this, "_view", void 0);
+        _define_property6(this, "_handleChange", void 0);
         this._view = _view;
         this._handleChange = () => {
           syncer.reconcile(this._view, false);
         };
         accessor.handle.addListener("change", this._handleChange);
       }
-      destroy() {
-        accessor.handle.removeListener("change", this._handleChange);
-      }
     }),
     // Reconcile local updates.
-    EditorView2.updateListener.of(({ view, changes }) => {
+    EditorView4.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
         syncer.reconcile(view, true);
       }
@@ -597,9 +942,22 @@ var automerge = (accessor) => {
 
 // src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
+import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin5, WidgetType as WidgetType2 } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
+function _define_property7(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
@@ -616,30 +974,13 @@ var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
     awarenessProvider.of(provider),
-    ViewPlugin3.fromClass(RemoteSelectionsDecorator, {
+    ViewPlugin5.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
     styles
   ];
 };
 var RemoteSelectionsDecorator = class {
-  constructor(view) {
-    this._ctx = new Context(void 0, {
-      F: __dxlog_file3,
-      L: 80
-    });
-    this.decorations = RangeSet.of([]);
-    this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(awarenessProvider);
-    this._provider.open();
-    this._provider.remoteStateChange.on(this._ctx, () => {
-      view.dispatch({
-        annotations: [
-          RemoteSelectionChangedAnnotation.of([])
-        ]
-      });
-    });
-  }
   destroy() {
     void this._ctx.dispose();
     this._provider.close();
@@ -680,7 +1021,7 @@ var RemoteSelectionsDecorator = class {
         decorations2.push({
           from: start,
           to: end,
-          value: Decoration2.mark({
+          value: Decoration3.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -691,7 +1032,7 @@ var RemoteSelectionsDecorator = class {
         decorations2.push({
           from: start,
           to: startLine.from + startLine.length,
-          value: Decoration2.mark({
+          value: Decoration3.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -701,7 +1042,7 @@ var RemoteSelectionsDecorator = class {
         decorations2.push({
           from: endLine.from,
           to: end,
-          value: Decoration2.mark({
+          value: Decoration3.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -713,7 +1054,7 @@ var RemoteSelectionsDecorator = class {
           decorations2.push({
             from: linePos,
             to: linePos,
-            value: Decoration2.line({
+            value: Decoration3.line({
               attributes: {
                 style: `background-color: ${lightColor}`,
                 class: "cm-collab-selectionLine"
@@ -725,20 +1066,38 @@ var RemoteSelectionsDecorator = class {
       decorations2.push({
         from: head,
         to: head,
-        value: Decoration2.widget({
+        value: Decoration3.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
           widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", darkColor)
         })
       });
     }
-    this.decorations = Decoration2.set(decorations2, true);
+    this.decorations = Decoration3.set(decorations2, true);
   }
-};
-var RemoteCaretWidget = class extends WidgetType {
-  constructor(_name, _color) {
-    super(), this._name = _name, this._color = _color;
+  constructor(view) {
+    _define_property7(this, "_ctx", new Context(void 0, {
+      F: __dxlog_file3,
+      L: 80
+    }));
+    _define_property7(this, "_cursorConverter", void 0);
+    _define_property7(this, "_provider", void 0);
+    _define_property7(this, "_lastAnchor", void 0);
+    _define_property7(this, "_lastHead", void 0);
+    _define_property7(this, "decorations", RangeSet.of([]));
+    this._cursorConverter = view.state.facet(Cursor.converter);
+    this._provider = view.state.facet(awarenessProvider);
+    this._provider.open();
+    this._provider.remoteStateChange.on(this._ctx, () => {
+      view.dispatch({
+        annotations: [
+          RemoteSelectionChangedAnnotation.of([])
+        ]
+      });
+    });
   }
+};
+var RemoteCaretWidget = class extends WidgetType2 {
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-collab-selectionCaret";
@@ -768,8 +1127,11 @@ var RemoteCaretWidget = class extends WidgetType {
   ignoreEvent() {
     return true;
   }
+  constructor(_name, _color) {
+    super(), _define_property7(this, "_name", void 0), _define_property7(this, "_color", void 0), this._name = _name, this._color = _color;
+  }
 };
-var styles = EditorView3.theme({
+var styles = EditorView5.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -832,17 +1194,22 @@ import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
+function _define_property8(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
-  constructor(params) {
-    this._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
-  }
   open() {
     this._ctx = new Context2(void 0, {
       F: __dxlog_file4,
@@ -932,13 +1299,41 @@ var SpaceAwarenessProvider = class {
     this._remoteStates.set(message.state.peerId, message.state);
     this.remoteStateChange.emit();
   }
+  constructor(params) {
+    _define_property8(this, "_remoteStates", /* @__PURE__ */ new Map());
+    _define_property8(this, "_space", void 0);
+    _define_property8(this, "_channel", void 0);
+    _define_property8(this, "_peerId", void 0);
+    _define_property8(this, "_info", void 0);
+    _define_property8(this, "_ctx", void 0);
+    _define_property8(this, "_postTask", void 0);
+    _define_property8(this, "_localState", void 0);
+    _define_property8(this, "remoteStateChange", new Event2());
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
 };
 
 // src/extensions/blast.ts
-import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView6, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { throttle } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
+function _define_property9(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
@@ -984,7 +1379,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView4.updateListener.of((update2) => {
+    EditorView6.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1033,34 +1428,6 @@ var blast = (options = defaultOptions) => {
   ];
 };
 var Blaster = class {
-  constructor(_node, _options) {
-    this._node = _node;
-    this._options = _options;
-    this._running = false;
-    this._shakeTime = 0;
-    this._shakeTimeMax = 0;
-    this._particles = [];
-    this._particlePointer = 0;
-    this._lastPoint = {
-      x: 0,
-      y: 0
-    };
-    this.shake = throttle(({ time }) => {
-      this._shakeTime = this._shakeTimeMax || time;
-      this._shakeTimeMax = time;
-    }, 100);
-    this.spawn = throttle(({ element, point }) => {
-      const color = getRGBComponents(element, this._options.color);
-      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
-      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
-      this._lastPoint = point;
-      for (let i = numParticles; i--; i > 0) {
-        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
-        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
-      }
-    }, 100);
-    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
-  }
   get node() {
     return this._node;
   }
@@ -1124,7 +1491,7 @@ var Blaster = class {
     }
     this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
     const now = (/* @__PURE__ */ new Date()).getTime();
-    this._lastTime ??= now;
+    this._lastTime ?? (this._lastTime = now);
     const dt = (now - this._lastTime) / 1e3;
     this._lastTime = now;
     if (this._shakeTime > 0) {
@@ -1146,12 +1513,55 @@ var Blaster = class {
       if (particle.alpha < 0.01 || particle.size <= 0.5) {
         continue;
       }
-      this._effect.update(this._ctx, particle);
-    }
+      this._effect.update(this._ctx, particle);
+    }
+  }
+  constructor(_node, _options) {
+    _define_property9(this, "_node", void 0);
+    _define_property9(this, "_options", void 0);
+    _define_property9(this, "_effect", void 0);
+    _define_property9(this, "_canvas", void 0);
+    _define_property9(this, "_ctx", void 0);
+    _define_property9(this, "_running", void 0);
+    _define_property9(this, "_lastTime", void 0);
+    _define_property9(this, "_shakeTime", void 0);
+    _define_property9(this, "_shakeTimeMax", void 0);
+    _define_property9(this, "_particles", void 0);
+    _define_property9(this, "_particlePointer", void 0);
+    _define_property9(this, "_lastPoint", void 0);
+    _define_property9(this, "shake", void 0);
+    _define_property9(this, "spawn", void 0);
+    this._node = _node;
+    this._options = _options;
+    this._running = false;
+    this._shakeTime = 0;
+    this._shakeTimeMax = 0;
+    this._particles = [];
+    this._particlePointer = 0;
+    this._lastPoint = {
+      x: 0,
+      y: 0
+    };
+    this.shake = throttle(({ time }) => {
+      this._shakeTime = this._shakeTimeMax || time;
+      this._shakeTimeMax = time;
+    }, 100);
+    this.spawn = throttle(({ element, point }) => {
+      const color = getRGBComponents(element, this._options.color);
+      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
+      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
+      this._lastPoint = point;
+      for (let i = numParticles; i--; i > 0) {
+        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
+        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
+      }
+    }, 100);
+    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
   }
 };
 var Effect = class {
   constructor(_options) {
+    _define_property9(this, "_options", void 0);
     this._options = _options;
   }
 };
@@ -1234,7 +1644,7 @@ var random = (min, max) => {
 };
 
 // src/extensions/command/action.ts
-import { StateEffect as StateEffect2 } from "@codemirror/state";
+import { StateEffect as StateEffect3 } from "@codemirror/state";
 
 // src/extensions/command/state.ts
 import { StateField as StateField2 } from "@codemirror/state";
@@ -1307,8 +1717,8 @@ var commandState = StateField2.define({
 });
 
 // src/extensions/command/action.ts
-var openEffect = StateEffect2.define();
-var closeEffect = StateEffect2.define();
+var openEffect = StateEffect3.define();
+var closeEffect = StateEffect3.define();
 var openCommand = (view) => {
   if (view.state.field(commandState, false)) {
     const selection = view.state.selection.main;
@@ -1347,18 +1757,28 @@ var commandKeyBindings = [
 ];
 
 // src/extensions/command/command.ts
-import { Prec } from "@codemirror/state";
-import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
+import { Prec as Prec2 } from "@codemirror/state";
+import { EditorView as EditorView8, keymap as keymap3 } from "@codemirror/view";
 import { isNonNullable } from "@dxos/util";
 
 // src/extensions/command/hint.ts
 import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
+function _define_property10(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var hint = ({ delay = 3e3, onHint }) => {
-  return ViewPlugin4.fromClass(class {
-    constructor() {
-      this.decorations = Decoration3.none;
-    }
+  return ViewPlugin6.fromClass(class {
     update(update2) {
       if (this.timeout) {
         clearTimeout(this.timeout);
@@ -1374,7 +1794,7 @@ var hint = ({ delay = 3e3, onHint }) => {
             const hint2 = onHint?.();
             if (hint2) {
               const builder2 = new RangeSetBuilder2();
-              builder2.add(selection.from, selection.to, Decoration3.widget({
+              builder2.add(selection.from, selection.to, Decoration4.widget({
                 widget: new Hint(hint2)
               }));
               this.decorations = builder2.finish();
@@ -1390,16 +1810,17 @@ var hint = ({ delay = 3e3, onHint }) => {
         clearTimeout(this.timeout);
       }
     }
+    constructor() {
+      _define_property10(this, "decorations", Decoration4.none);
+      _define_property10(this, "timeout", void 0);
+    }
   }, {
     provide: (plugin) => [
-      EditorView5.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration3.none)
+      EditorView7.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration4.none)
     ]
   });
 };
-var Hint = class extends WidgetType2 {
-  constructor(content) {
-    super(), this.content = content;
-  }
+var Hint = class extends WidgetType3 {
   toDOM() {
     const wrap = document.createElement("span");
     wrap.className = "cm-placeholder";
@@ -1419,13 +1840,13 @@ var Hint = class extends WidgetType2 {
     }
     const style = window.getComputedStyle(dom.parentNode);
     const rect = flattenRect(rects[0], style.direction !== "rtl");
-    const lineHeight = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight * 1.5) {
+    const lineHeight2 = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight2 * 1.5) {
       return {
         left: rect.left,
         right: rect.right,
         top: rect.top,
-        bottom: rect.top + lineHeight
+        bottom: rect.top + lineHeight2
       };
     }
     return rect;
@@ -1433,17 +1854,20 @@ var Hint = class extends WidgetType2 {
   ignoreEvent() {
     return false;
   }
+  constructor(content) {
+    super(), _define_property10(this, "content", void 0), this.content = content;
+  }
 };
 
 // src/extensions/command/command.ts
 var command = (options = {}) => {
   return [
-    Prec.highest(keymap3.of(commandKeyBindings)),
+    Prec2.highest(keymap3.of(commandKeyBindings)),
     commandConfig.of(options),
     commandState,
     options.onHint && hint(options),
-    EditorView6.focusChangeEffect.of((_, focusing) => focusing ? closeEffect.of(null) : null),
-    EditorView6.theme({
+    EditorView8.focusChangeEffect.of((_, focusing) => focusing ? closeEffect.of(null) : null),
+    EditorView8.theme({
       ".cm-tooltip": {
         background: "transparent"
       }
@@ -1452,16 +1876,26 @@ var command = (options = {}) => {
 };
 
 // src/extensions/command/command-menu.ts
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField3, StateEffect as StateEffect3, Prec as Prec2 } from "@codemirror/state";
-import { EditorView as EditorView8, ViewPlugin as ViewPlugin6, Decoration as Decoration5, keymap as keymap4 } from "@codemirror/view";
+import { Prec as Prec3, RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect4, StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView10, ViewPlugin as ViewPlugin8, keymap as keymap4 } from "@codemirror/view";
 
 // src/extensions/command/placeholder.ts
-import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType3, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin7, WidgetType as WidgetType4 } from "@codemirror/view";
+function _define_property11(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var placeholder = ({ delay = 3e3, content }) => {
-  const plugin = ViewPlugin5.fromClass(class {
-    constructor() {
-      this.decorations = Decoration4.none;
-    }
+  const plugin = ViewPlugin7.fromClass(class {
     update(update2) {
       if (this.timeout) {
         window.clearTimeout(this.timeout);
@@ -1472,8 +1906,8 @@ var placeholder = ({ delay = 3e3, content }) => {
       if (isEmpty) {
         const lineStart = activeLine.from;
         this.timeout = setTimeout(() => {
-          this.decorations = Decoration4.set([
-            Decoration4.widget({
+          this.decorations = Decoration5.set([
+            Decoration5.widget({
               widget: new Placeholder(content),
               side: 1
             }).range(lineStart)
@@ -1481,31 +1915,32 @@ var placeholder = ({ delay = 3e3, content }) => {
           update2.view.update([]);
         }, delay);
       }
-      this.decorations = Decoration4.none;
+      this.decorations = Decoration5.none;
     }
     destroy() {
       if (this.timeout) {
         clearTimeout(this.timeout);
       }
     }
+    constructor() {
+      _define_property11(this, "decorations", Decoration5.none);
+      _define_property11(this, "timeout", void 0);
+    }
   }, {
     provide: (plugin2) => {
       return [
-        EditorView7.decorations.of((view) => view.plugin(plugin2)?.decorations ?? Decoration4.none)
+        EditorView9.decorations.of((view) => view.plugin(plugin2)?.decorations ?? Decoration5.none)
       ];
     }
   });
   return typeof content === "string" ? [
     plugin,
-    EditorView7.contentAttributes.of({
+    EditorView9.contentAttributes.of({
       "aria-placeholder": content
     })
   ] : plugin;
 };
-var Placeholder = class extends WidgetType3 {
-  constructor(content) {
-    super(), this.content = content;
-  }
+var Placeholder = class extends WidgetType4 {
   toDOM(view) {
     const wrap = document.createElement("span");
     wrap.className = "cm-placeholder";
@@ -1521,13 +1956,13 @@ var Placeholder = class extends WidgetType3 {
     }
     const style = window.getComputedStyle(dom.parentNode);
     const rect = flattenRect(rects[0], style.direction !== "rtl");
-    const lineHeight = parseInt(style.lineHeight);
-    if (rect.bottom - rect.top > lineHeight * 1.5) {
+    const lineHeight2 = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight2 * 1.5) {
       return {
         left: rect.left,
         right: rect.right,
         top: rect.top,
-        bottom: rect.top + lineHeight
+        bottom: rect.top + lineHeight2
       };
     }
     return rect;
@@ -1535,15 +1970,27 @@ var Placeholder = class extends WidgetType3 {
   ignoreEvent() {
     return false;
   }
+  constructor(content) {
+    super(), _define_property11(this, "content", void 0), this.content = content;
+  }
 };
 
 // src/extensions/command/command-menu.ts
+function _define_property12(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var commandMenu = (options) => {
-  const commandMenuPlugin = ViewPlugin6.fromClass(class {
-    constructor(view) {
-      this.view = view;
-      this.decorations = Decoration5.none;
-    }
+  const commandMenuPlugin = ViewPlugin8.fromClass(class {
     // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
     update(update2) {
       const builder = new RangeSetBuilder3();
@@ -1551,8 +1998,8 @@ var commandMenu = (options) => {
       const { range: activeRange, trigger } = update2.view.state.field(commandMenuState) ?? {};
       const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
       if (shouldShowWidget) {
-        builder.add(activeRange.from, activeRange.to, Decoration5.mark({
-          tagName: "dx-ref-tag",
+        builder.add(activeRange.from, activeRange.to, Decoration6.mark({
+          tagName: "dx-anchor",
           class: "cm-ref-tag",
           attributes: {
             "data-auto-trigger": "true",
@@ -1567,6 +2014,12 @@ var commandMenu = (options) => {
       }
       this.decorations = builder.finish();
     }
+    constructor(view) {
+      _define_property12(this, "view", void 0);
+      _define_property12(this, "decorations", void 0);
+      this.view = view;
+      this.decorations = Decoration6.none;
+    }
   }, {
     decorations: (v) => v.decorations
   });
@@ -1644,7 +2097,7 @@ var commandMenu = (options) => {
       }
     }
   ]);
-  const updateListener = EditorView8.updateListener.of((update2) => {
+  const updateListener = EditorView10.updateListener.of((update2) => {
     const { trigger, range: activeRange } = update2.view.state.field(commandMenuState) ?? {};
     if (!activeRange || !trigger) {
       return;
@@ -1671,7 +2124,7 @@ var commandMenu = (options) => {
     }
   });
   return [
-    Prec2.highest(commandKeymap),
+    Prec3.highest(commandKeymap),
     placeholder(Object.assign({
       content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`
     }, options.placeholder)),
@@ -1680,7 +2133,7 @@ var commandMenu = (options) => {
     commandMenuPlugin
   ];
 };
-var commandRangeEffect = StateEffect3.define();
+var commandRangeEffect = StateEffect4.define();
 var commandMenuState = StateField3.define({
   create: () => null,
   update: (value, tr) => {
@@ -1695,30 +2148,23 @@ var commandMenuState = StateField3.define({
 });
 
 // src/extensions/command/floating-menu.ts
-import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { EditorView as EditorView11, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
+function _define_property13(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var floatingMenu = (options = {}) => [
-  ViewPlugin7.fromClass(class {
-    constructor(view) {
-      this.view = view;
-      const container = view.scrollDOM;
-      if (getComputedStyle(container).position === "static") {
-        container.style.position = "relative";
-      }
-      {
-        const icon = document.createElement("dx-icon");
-        icon.setAttribute("icon", options.icon ?? "ph--dots-three-vertical--regular");
-        const button = document.createElement("button");
-        button.appendChild(icon);
-        this.tag = document.createElement("dx-ref-tag");
-        this.tag.classList.add("cm-ref-tag");
-        this.tag.appendChild(button);
-      }
-      container.appendChild(this.tag);
-      const handler = () => this.scheduleUpdate();
-      this.cleanup = addEventListener(container, "scroll", handler);
-      this.scheduleUpdate();
-    }
+  ViewPlugin9.fromClass(class {
     destroy() {
       this.cleanup?.();
       this.tag.remove();
@@ -1748,8 +2194,8 @@ var floatingMenu = (options = {}) => [
       if (!coords) {
         return;
       }
-      const lineHeight = coords.bottom - coords.top;
-      const dy = (lineHeight - (options.height ?? 32)) / 2;
+      const lineHeight2 = coords.bottom - coords.top;
+      const dy = (lineHeight2 - (options.height ?? 32)) / 2;
       const offsetTop = coords.top + dy;
       const offsetLeft = x + width + (options.padding ?? 8);
       this.tag.style.top = `${offsetTop}px`;
@@ -1762,8 +2208,32 @@ var floatingMenu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
+    constructor(view) {
+      _define_property13(this, "view", void 0);
+      _define_property13(this, "tag", void 0);
+      _define_property13(this, "rafId", void 0);
+      _define_property13(this, "cleanup", void 0);
+      this.view = view;
+      const container = view.scrollDOM;
+      if (getComputedStyle(container).position === "static") {
+        container.style.position = "relative";
+      }
+      {
+        const icon = document.createElement("dx-icon");
+        icon.setAttribute("icon", options.icon ?? "ph--dots-three-vertical--regular");
+        const button = document.createElement("button");
+        button.appendChild(icon);
+        this.tag = document.createElement("dx-anchor");
+        this.tag.classList.add("cm-ref-tag");
+        this.tag.appendChild(button);
+      }
+      container.appendChild(this.tag);
+      const handler = () => this.scheduleUpdate();
+      this.cleanup = addEventListener(container, "scroll", handler);
+      this.scheduleUpdate();
+    }
   }),
-  EditorView9.theme({
+  EditorView11.theme({
     ".cm-ref-tag": {
       position: "fixed",
       padding: "0",
@@ -1784,8 +2254,21 @@ var floatingMenu = (options = {}) => [
 ];
 
 // src/extensions/command/typeahead.ts
-import { EditorSelection, Prec as Prec3, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration6, keymap as keymap5, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
+import { EditorSelection, Prec as Prec4, RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration7, ViewPlugin as ViewPlugin10, keymap as keymap5 } from "@codemirror/view";
+function _define_property14(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var typeahead = ({ onComplete } = {}) => {
   let hint2;
   const complete = (view) => {
@@ -1806,10 +2289,7 @@ var typeahead = ({ onComplete } = {}) => {
     return true;
   };
   return [
-    ViewPlugin8.fromClass(class {
-      constructor() {
-        this.decorations = Decoration6.none;
-      }
+    ViewPlugin10.fromClass(class {
       update(update2) {
         const builder = new RangeSetBuilder4();
         const selection = update2.view.state.selection.main;
@@ -1820,18 +2300,21 @@ var typeahead = ({ onComplete } = {}) => {
             line: str
           });
           if (hint2) {
-            builder.add(selection.from, selection.to, Decoration6.widget({
+            builder.add(selection.from, selection.to, Decoration7.widget({
               widget: new Hint(hint2)
             }));
           }
         }
         this.decorations = builder.finish();
       }
+      constructor() {
+        _define_property14(this, "decorations", Decoration7.none);
+      }
     }, {
       decorations: (v) => v.decorations
     }),
     // Keys.
-    Prec3.highest(keymap5.of([
+    Prec4.highest(keymap5.of([
       {
         key: "Tab",
         preventDefault: true,
@@ -1971,8 +2454,8 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
 
 // src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect4, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap7, Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9 } from "@codemirror/view";
+import { StateEffect as StateEffect5, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView13, ViewPlugin as ViewPlugin11, hoverTooltip, keymap as keymap7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -1981,7 +2464,7 @@ import { isNonNullable as isNonNullable2 } from "@dxos/util";
 
 // src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView10, keymap as keymap6 } from "@codemirror/view";
+import { EditorView as EditorView12, keymap as keymap6 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy } from "@dxos/util";
@@ -1992,7 +2475,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView10.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView12.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -2034,7 +2517,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView10.updateListener.of(({ view, transactions }) => {
+    EditorView12.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2073,10 +2556,23 @@ var selectionState = ({ getState, setState } = {}) => {
 };
 
 // src/extensions/comments.ts
+function _define_property15(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = StateEffect4.define();
-var setSelection = StateEffect4.define();
-var setCommentState = StateEffect4.define();
+var setComments = StateEffect5.define();
+var setSelection = StateEffect5.define();
+var setCommentState = StateEffect5.define();
 var commentsState = StateField4.define({
   create: (state) => ({
     id: state.facet(documentId),
@@ -2115,27 +2611,27 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles2 = EditorView11.theme({
+var styles2 = EditorView13.theme({
   ".cm-comment, .cm-comment-current": {
-    margin: "0 -3px",
-    padding: "3px",
-    borderRadius: "3px",
+    padding: "3px 0",
+    backgroundColor: "var(--dx-cmCommentSurface)"
+  },
+  ".cm-comment > span, .cm-comment-current > span": {
+    boxDecorationBreak: "clone",
+    boxShadow: "0 0 1px 3px var(--dx-cmCommentSurface)",
     backgroundColor: "var(--dx-cmCommentSurface)",
     color: "var(--dx-cmComment)",
     cursor: "pointer"
-  },
-  ".cm-comment:hover, .cm-comment-current": {
-    textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => Decoration7.mark({
+var createCommentMark = (id, isCurrent) => Decoration8.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView11.decorations.compute([
+var commentsDecorations = EditorView13.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2144,7 +2640,7 @@ var commentsDecorations = EditorView11.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 135,
+        L: 140,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2155,10 +2651,10 @@ var commentsDecorations = EditorView11.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(isNonNullable2);
-  return Decoration7.set(decorations2);
+  return Decoration8.set(decorations2);
 });
-var commentClickedEffect = StateEffect4.define();
-var handleCommentClick = EditorView11.domEventHandlers({
+var commentClickedEffect = StateEffect5.define();
+var handleCommentClick = EditorView13.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2197,7 +2693,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView11.domEventHandlers({
+    EditorView13.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2219,7 +2715,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView11.updateListener.of((update2) => {
+    EditorView13.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2260,10 +2756,10 @@ var trackPastedComments = (onUpdate) => {
         const { comments: comments2 } = update2.startState.field(commentsState);
         const exists = comments2.some((c) => c.comment.id === comment.id && c.range.from < c.range.to);
         if (!exists) {
-          const cursor = Cursor.getCursorFromRange(update2.state, comment);
+          const cursor2 = Cursor.getCursorFromRange(update2.state, comment);
           onUpdate({
             id: comment.id,
-            cursor
+            cursor: cursor2
           });
         }
       }
@@ -2275,7 +2771,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect4.define({
+var restoreCommentEffect = StateEffect5.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2292,13 +2788,13 @@ var createComment = (view) => {
       }
     });
   }
-  const cursor = Cursor.getCursorFromRange(view.state, {
+  const cursor2 = Cursor.getCursorFromRange(view.state, {
     from,
     to
   });
-  if (cursor) {
+  if (cursor2) {
     options.onCreate?.({
-      cursor,
+      cursor: cursor2,
       from,
       location: view.coordsAtPos(from)
     });
@@ -2361,7 +2857,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView11.updateListener.of(({ view, state, changes }) => {
+    EditorView13.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2393,7 +2889,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView11.updateListener.of(({ view, state }) => {
+    EditorView13.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2447,7 +2943,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView11.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView13.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2460,9 +2956,10 @@ var scrollThreadIntoView = (view, id, center = true) => {
 };
 var ExternalCommentSync = class {
   constructor(view, id, subscribe, getComments) {
-    this.destroy = () => {
+    _define_property15(this, "unsubscribe", void 0);
+    _define_property15(this, "destroy", () => {
       this.unsubscribe();
-    };
+    });
     const updateComments = () => {
       const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
@@ -2477,7 +2974,7 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin9.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin11.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
@@ -2500,9 +2997,9 @@ var useComments = (view, id, comments2) => {
 // src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
-var debugNodeLogger = (log9 = console.log) => {
+var debugNodeLogger = (log10 = console.log) => {
   const logTokens = (state) => syntaxTree(state).iterate({
-    enter: (node) => log9(node.type)
+    enter: (node) => log10(node.type)
   });
   return StateField5.define({
     create: (state) => logTokens(state),
@@ -2511,8 +3008,8 @@ var debugNodeLogger = (log9 = console.log) => {
 };
 
 // src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView12 } from "@codemirror/view";
-var styles3 = EditorView12.theme({
+import { EditorView as EditorView14, dropCursor } from "@codemirror/view";
+var styles3 = EditorView14.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2526,7 +3023,7 @@ var dropFile = (options = {}) => {
   return [
     styles3,
     dropCursor(),
-    EditorView12.domEventHandlers({
+    EditorView14.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2553,50 +3050,19 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView15, ViewPlugin as ViewPlugin10, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap8, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView17, ViewPlugin as ViewPlugin12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap8, lineNumbers, placeholder as placeholder2, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
 import { log as log5 } from "@dxos/log";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
-// src/extensions/focus.ts
-import { StateEffect as StateEffect5, StateField as StateField6 } from "@codemirror/state";
-import { EditorView as EditorView13 } from "@codemirror/view";
-var focusEffect = StateEffect5.define();
-var focusField = StateField6.define({
-  create: () => false,
-  update: (value, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(focusEffect)) {
-        return effect.value;
-      }
-    }
-    return value;
-  }
-});
-var focus = [
-  focusField,
-  EditorView13.domEventHandlers({
-    focus: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(true)
-      }));
-    },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(false)
-      }));
-    }
-  })
-];
-
 // src/defaults.ts
-import { EditorView as EditorView14 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { EditorView as EditorView15 } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 var headings = {
   1: "text-4xl",
   2: "text-3xl",
@@ -2610,7 +3076,7 @@ var theme = {
   codeMark: "font-mono text-primary-500",
   mark: "opacity-50",
   heading: (level) => {
-    return mx(headings[level], "dark:text-primary-400");
+    return mx2(headings[level], "dark:text-primary-400");
   }
 };
 
@@ -2645,7 +3111,7 @@ var defaultTheme = {
     fontFamily: fontBody,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px",
-    lineHeight: 1.5,
+    lineHeight: "24px",
     color: "unset"
   },
   /**
@@ -2653,8 +3119,7 @@ var defaultTheme = {
   * NOTE: Gutters should have the same top margin as the content.
   */
   ".cm-gutters": {
-    borderRight: "none",
-    background: "transparent"
+    borderRight: "none"
   },
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
@@ -2668,13 +3133,14 @@ var defaultTheme = {
   * Height is set to match the corresponding line (which may have wrapped).
   */
   ".cm-gutterElement": {
-    fontSize: "12px",
-    lineHeight: "24px"
+    lineHeight: "24px",
+    fontSize: "12px"
   },
   /**
   * Line.
   */
   ".cm-line": {
+    lineHeight: "24px",
     paddingInline: 0
   },
   ".cm-activeLine": {
@@ -2729,7 +3195,7 @@ var defaultTheme = {
   * Tooltip.
   */
   ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
+    background: "var(--dx-modalSurface)"
   },
   ".cm-tooltip-below": {},
   /**
@@ -2749,7 +3215,8 @@ var defaultTheme = {
     padding: "4px"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
-    background: "var(--dx-hoverSurface)"
+    background: "var(--dx-accentSurface)",
+    color: "var(--dx-accentSurfaceText)"
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
@@ -2803,7 +3270,7 @@ var defaultTheme = {
     outline: "1px solid transparent"
   },
   ".cm-panel input, .cm-panel button": {
-    backgroundColor: "var(--dx-input)"
+    backgroundColor: "var(--dx-inputSurface)"
   },
   ".cm-panel input:focus, .cm-panel button:focus": {
     outline: "1px solid var(--dx-neutralFocusIndicator)"
@@ -2845,19 +3312,52 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView14.theme({
+var editorGutter = EditorView15.theme({
   ".cm-gutters": {
-    background: "var(--dx-baseSurface)",
+    // NOTE: Color required to cover content if scrolling horizontally.
+    // TODO(burdon): Non-transparent background clips the focus ring.
+    background: "var(--dx-baseSurface) !important",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView14.theme({
+var editorMonospace = EditorView15.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
 });
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => mx2("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+var stackItemContentEditorClassNames = (role) => mx3("p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+
+// src/extensions/focus.ts
+import { StateEffect as StateEffect6, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView16 } from "@codemirror/view";
+var focusEffect = StateEffect6.define();
+var focusField = StateField6.define({
+  create: () => false,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(focusEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var focus = [
+  focusField,
+  EditorView16.domEventHandlers({
+    focus: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(true)
+      }));
+    },
+    blur: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(false)
+      }));
+    }
+  })
+];
 
 // src/extensions/factories.ts
 var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
@@ -2871,7 +3371,7 @@ var defaultBasicOptions = {
   history: true,
   keymap: "standard",
   lineWrapping: true,
-  search: true
+  search: false
 };
 var keymaps = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -2883,10 +3383,10 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView15.exceptionSink.of((err) => {
+    EditorView17.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 100,
+        L: 102,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2898,7 +3398,7 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView15.editable.of(props.editable),
+    props.editable !== void 0 && EditorView17.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
@@ -2906,7 +3406,7 @@ var createBasicExtensions = (_props) => {
       lineNumbers(),
       editorGutter
     ],
-    props.lineWrapping && EditorView15.lineWrapping,
+    props.lineWrapping && EditorView17.lineWrapping,
     props.monospace && editorMonospace,
     props.placeholder && placeholder2(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
@@ -2947,27 +3447,21 @@ var fullWidth = {
   }
 };
 var defaultThemeSlots = grow;
-var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
+var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: syntaxHighlightingProps, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView15.darkTheme.of(themeMode === "dark"),
-    EditorView15.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
-    // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView15.editorAttributes.of({
+    EditorView17.darkTheme.of(themeMode === "dark"),
+    EditorView17.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
+    syntaxHighlightingProps && syntaxHighlighting(themeMode === "dark" ? oneDarkHighlightStyle : defaultHighlightStyle),
+    slots.editor?.className && EditorView17.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView15.contentAttributes.of({
+    slots.content?.className && EditorView17.contentAttributes.of({
       class: slots.content.className
     }),
-    slots.scroll?.className && ViewPlugin10.fromClass(class {
+    slots.scroll?.className && ViewPlugin12.fromClass(class {
       constructor(view) {
-        view.scrollDOM.classList.add(slots.scroll.className);
-      }
-    }),
-    slots.scroller?.className && ViewPlugin10.fromClass(class {
-      constructor(view) {
-        view.dom.querySelector(".cm-scroller")?.classList.add(...slots.scroller.className.split(" "));
+        view.scrollDOM.classList.add(...slots.scroll.className.split(/\s+/));
       }
     })
   ].filter(isNotFalsy2);
@@ -2985,9 +3479,9 @@ var createDataExtensions = ({ id, text, space, identity }) => {
       channel: `awareness.${id}`,
       peerId: identity.identityKey.toHex(),
       info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
         darkColor: `var(--dx-${hue}Cursor)`,
-        lightColor: `var(--dx-${hue}Cursor)`
+        lightColor: `var(--dx-${hue}Cursor)`,
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex())
       }
     })));
   }
@@ -2996,7 +3490,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView18 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
@@ -3007,9 +3501,7 @@ var folding = (_props = {}) => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      const el = createElement("div", {
-        className: "flex h-full items-center"
-      });
+      const el = Domino.of("div").classNames("flex h-full items-center").build();
       return renderRoot(el, /* @__PURE__ */ React2.createElement(Icon, {
         icon: "ph--caret-right--bold",
         size: 3,
@@ -3020,7 +3512,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView16.theme({
+  EditorView18.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -3033,40 +3525,54 @@ var folding = (_props = {}) => [
 ];
 
 // src/extensions/hashtag.tsx
-import { Decoration as Decoration8, EditorView as EditorView17, MatchDecorator, ViewPlugin as ViewPlugin11, WidgetType as WidgetType4 } from "@codemirror/view";
-import { getHashColor, mx as mx3 } from "@dxos/react-ui-theme";
-var TagWidget = class extends WidgetType4 {
-  constructor(_text) {
-    super(), this._text = _text;
+import { Decoration as Decoration9, EditorView as EditorView19, MatchDecorator, ViewPlugin as ViewPlugin13, WidgetType as WidgetType5 } from "@codemirror/view";
+import { getHashColor, mx as mx4 } from "@dxos/react-ui-theme";
+function _define_property16(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+var TagWidget = class extends WidgetType5 {
   toDOM() {
     const span = document.createElement("span");
-    span.className = mx3("cm-tag", getHashColor(this._text).tag);
+    span.className = mx4("cm-tag", getHashColor(this._text).tag);
     span.textContent = this._text;
     return span;
   }
+  constructor(_text) {
+    super(), _define_property16(this, "_text", void 0), this._text = _text;
+  }
 };
 var tagMatcher = new MatchDecorator({
   regexp: /#(\w+)\W/g,
-  decoration: (match) => Decoration8.replace({
+  decoration: (match) => Decoration9.replace({
     widget: new TagWidget(match[1])
   })
 });
 var hashtag = () => [
-  ViewPlugin11.fromClass(class {
-    constructor(view) {
-      this.tags = tagMatcher.createDeco(view);
-    }
+  ViewPlugin13.fromClass(class {
     update(update2) {
       this.tags = tagMatcher.updateDeco(update2, this.tags);
     }
+    constructor(view) {
+      _define_property16(this, "tags", void 0);
+      this.tags = tagMatcher.createDeco(view);
+    }
   }, {
     decorations: (instance) => instance.tags,
-    provide: (plugin) => EditorView17.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tags || Decoration8.none;
+    provide: (plugin) => EditorView19.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tags || Decoration9.none;
     })
   }),
-  EditorView17.theme({
+  EditorView19.theme({
     ".cm-tag": {
       borderRadius: "4px",
       marginRight: "6px",
@@ -3121,14 +3627,14 @@ var schemaLinter = (validate) => (view) => {
 };
 
 // src/extensions/listener.ts
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView20 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView18.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView20.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView18.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView20.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3138,7 +3644,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
-import { EditorView as EditorView19, keymap as keymap9 } from "@codemirror/view";
+import { EditorView as EditorView21, keymap as keymap9 } from "@codemirror/view";
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { debounceAndThrottle } from "@dxos/async";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
@@ -4237,7 +4743,7 @@ var useFormattingState = (state) => {
   }, 100), [
     state
   ]);
-  return useMemo2(() => EditorView19.updateListener.of(handleUpdate), [
+  return useMemo2(() => EditorView21.updateListener.of(handleUpdate), [
     handleUpdate
   ]);
 };
@@ -4292,18 +4798,18 @@ var processEditorPayload = (view, { type, data }) => {
 };
 
 // src/extensions/markdown/bundle.ts
-import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
+import { completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { markdown, markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { keymap as keymap10 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // src/extensions/markdown/highlight.ts
-import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
+import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Tag, styleTags, tags } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
 var markdownTags = {
   Blockquote: Tag.define(),
@@ -4472,7 +4978,7 @@ var markdownHighlightStyle = (_options = {}) => {
       class: "font-mono"
     }
   ], {
-    scope: markdownLanguage2,
+    scope: markdownLanguage,
     all: {
       fontFamily: fontBody
     }
@@ -4491,7 +4997,7 @@ var createMarkdownExtensions = (options = {}) => {
       // 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: markdownLanguage3,
+      base: markdownLanguage2,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
       // Don't complete HTML tags.
@@ -4499,7 +5005,8 @@ var createMarkdownExtensions = (options = {}) => {
       // Parser extensions.
       extensions: [
         // GFM provided by default.
-        markdownTagsExtensions
+        markdownTagsExtensions,
+        ...options.extensions ?? defaultExtensions()
       ]
     }),
     // Custom styles.
@@ -4509,10 +5016,25 @@ var createMarkdownExtensions = (options = {}) => {
       options.indentWithTab !== false && indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap2,
-      ...completionKeymap2
+      ...completionKeymap
     ].filter(isNotFalsy3))
   ];
 };
+var defaultExtensions = () => [
+  noSetExtHeading,
+  noHtml
+];
+var noSetExtHeading = {
+  remove: [
+    "SetextHeading"
+  ]
+};
+var noHtml = {
+  remove: [
+    "HTMLBlock",
+    "HTMLTag"
+  ]
+};
 
 // src/extensions/markdown/debug.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
@@ -4522,19 +5044,19 @@ var debugTree = (cb) => StateField7.define({
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
 var convertTreeToJson = (state) => {
-  const treeToJson = (cursor) => {
+  const treeToJson = (cursor2) => {
     const node = {
-      type: cursor.type.name,
-      from: cursor.from,
-      to: cursor.to,
-      text: state.doc.slice(cursor.from, cursor.to).toString(),
+      type: cursor2.type.name,
+      from: cursor2.from,
+      to: cursor2.to,
+      text: state.doc.slice(cursor2.from, cursor2.to).toString(),
       children: []
     };
-    if (cursor.firstChild()) {
+    if (cursor2.firstChild()) {
       do {
-        node.children.push(treeToJson(cursor));
-      } while (cursor.nextSibling());
-      cursor.parent();
+        node.children.push(treeToJson(cursor2));
+      } while (cursor2.nextSibling());
+      cursor2.parent();
     }
     return node;
   };
@@ -4543,17 +5065,17 @@ var convertTreeToJson = (state) => {
 
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect6 } from "@codemirror/state";
-import { EditorView as EditorView23, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin13 } from "@codemirror/view";
+import { Prec as Prec5, RangeSetBuilder as RangeSetBuilder6, StateEffect as StateEffect7 } from "@codemirror/state";
+import { Decoration as Decoration12, EditorView as EditorView25, ViewPlugin as ViewPlugin15, WidgetType as WidgetType8 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin12 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
 var adjustChanges = () => {
-  return ViewPlugin12.fromClass(class {
+  return ViewPlugin14.fromClass(class {
     update(update2) {
       const tree = syntaxTree4(update2.state);
       const adjustments = [];
@@ -4695,21 +5217,34 @@ var getValidUrl = (str) => {
 // src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView20, WidgetType as WidgetType5 } from "@codemirror/view";
+import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
+function _define_property17(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var image = (_options = {}) => {
   return [
     StateField8.define({
       create: (state) => {
-        return Decoration9.set(buildDecorations(0, state.doc.length, state));
+        return Decoration10.set(buildDecorations(state, 0, state.doc.length));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
           return value;
         }
-        const cursor = tr.state.selection.main.head;
+        const cursor2 = tr.state.selection.main.head;
         const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-        let from = Math.min(cursor, oldCursor);
-        let to = Math.max(cursor, oldCursor);
+        let from = Math.min(cursor2, oldCursor);
+        let to = Math.max(cursor2, oldCursor);
         tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
           from = Math.min(from, fromB);
           to = Math.max(to, toB);
@@ -4720,28 +5255,28 @@ var image = (_options = {}) => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(from, to, tr.state)
+          add: buildDecorations(tr.state, from, to)
         });
       },
-      provide: (field) => EditorView20.decorations.from(field)
+      provide: (field) => EditorView22.decorations.from(field)
     })
   ];
 };
-var buildDecorations = (from, to, state) => {
+var buildDecorations = (state, from, to) => {
   const decorations2 = [];
-  const cursor = state.selection.main.head;
+  const cursor2 = state.selection.main.head;
   syntaxTree5(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
         if (urlNode) {
-          const hide2 = state.readOnly || cursor < node.from || cursor > node.to || !state.field(focusField);
+          const hide2 = state.readOnly || cursor2 < node.from || cursor2 > node.to || !state.field(focusField);
           const url = state.sliceDoc(urlNode.from, urlNode.to);
           if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
             return;
           }
           preloadImage(url);
-          decorations2.push(Decoration9.replace({
+          decorations2.push(Decoration10.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4761,10 +5296,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends WidgetType5 {
-  constructor(_url) {
-    super(), this._url = _url;
-  }
+var ImageWidget = class extends WidgetType6 {
   eq(other) {
     return this._url === other._url;
   }
@@ -4779,13 +5311,16 @@ var ImageWidget = class extends WidgetType5 {
     }
     return img;
   }
+  constructor(_url) {
+    super(), _define_property17(this, "_url", void 0), this._url = _url;
+  }
 };
 
 // src/extensions/markdown/styles.ts
-import { EditorView as EditorView21 } from "@codemirror/view";
+import { EditorView as EditorView23 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView21.theme({
+var formattingStyles = EditorView23.theme({
   /**
   * Horizontal rule.
   */
@@ -4907,17 +5442,30 @@ var formattingStyles = EditorView21.theme({
 // src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView22, WidgetType as WidgetType6 } from "@codemirror/view";
+import { Decoration as Decoration11, EditorView as EditorView24, WidgetType as WidgetType7 } from "@codemirror/view";
+function _define_property18(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var table = (options = {}) => {
   return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView22.decorations.from(field)
+    provide: (field) => EditorView24.decorations.from(field)
   });
 };
 var update = (state, _options) => {
   const builder = new RangeSetBuilder5();
-  const cursor = state.selection.main.head;
+  const cursor2 = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
   const getRow = () => {
@@ -4939,7 +5487,8 @@ var update = (state, _options) => {
           break;
         }
         case "TableRow": {
-          (getTable().rows ??= []).push([]);
+          var _getTable;
+          ((_getTable = getTable()).rows ?? (_getTable.rows = [])).push([]);
           break;
         }
         case "TableCell": {
@@ -4955,24 +5504,21 @@ var update = (state, _options) => {
     }
   });
   tables.forEach((table2) => {
-    const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
+    const replace = state.readOnly || cursor2 < table2.from || cursor2 > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, Decoration10.replace({
+      builder.add(table2.from, table2.to, Decoration11.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, Decoration10.mark({
+      builder.add(table2.from, table2.to, Decoration11.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType6 {
-  constructor(_table) {
-    super(), this._table = _table;
-  }
+var TableWidget = class extends WidgetType7 {
   eq(other) {
     return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
@@ -5000,9 +5546,25 @@ var TableWidget = class extends WidgetType6 {
   ignoreEvent(e) {
     return !/^mouse/.test(e.type);
   }
+  constructor(_table) {
+    super(), _define_property18(this, "_table", void 0), this._table = _table;
+  }
 };
 
 // src/extensions/markdown/decorate.ts
+function _define_property19(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
@@ -5010,17 +5572,14 @@ var Unicode = {
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends WidgetType7 {
+var HorizontalRuleWidget = class extends WidgetType8 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType7 {
-  constructor(url, render) {
-    super(), this.url = url, this.render = render;
-  }
+var LinkButton = class extends WidgetType8 {
   eq(other) {
     return this.url === other.url;
   }
@@ -5032,11 +5591,11 @@ var LinkButton = class extends WidgetType7 {
     }, view);
     return el;
   }
-};
-var CheckboxWidget = class extends WidgetType7 {
-  constructor(_checked) {
-    super(), this._checked = _checked;
+  constructor(url, render) {
+    super(), _define_property19(this, "url", void 0), _define_property19(this, "render", void 0), this.url = url, this.render = render;
   }
+};
+var CheckboxWidget = class extends WidgetType8 {
   eq(other) {
     return this._checked === other._checked;
   }
@@ -5076,11 +5635,11 @@ var CheckboxWidget = class extends WidgetType7 {
   ignoreEvent() {
     return false;
   }
-};
-var TextWidget = class extends WidgetType7 {
-  constructor(text, className) {
-    super(), this.text = text, this.className = className;
+  constructor(_checked) {
+    super(), _define_property19(this, "_checked", void 0), this._checked = _checked;
   }
+};
+var TextWidget = class extends WidgetType8 {
   toDOM() {
     const el = document.createElement("span");
     if (this.className) {
@@ -5089,30 +5648,33 @@ var TextWidget = class extends WidgetType7 {
     el.innerText = this.text;
     return el;
   }
+  constructor(text, className) {
+    super(), _define_property19(this, "text", void 0), _define_property19(this, "className", void 0), this.text = text, this.className = className;
+  }
 };
-var hide = Decoration11.replace({});
-var blockQuote = Decoration11.line({
+var hide = Decoration12.replace({});
+var blockQuote = Decoration12.line({
   class: "cm-blockquote"
 });
-var fencedCodeLine = Decoration11.line({
+var fencedCodeLine = Decoration12.line({
   class: "cm-code cm-codeblock-line"
 });
-var fencedCodeLineFirst = Decoration11.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-start")
+var fencedCodeLineFirst = Decoration12.line({
+  class: mx5("cm-code cm-codeblock-line", "cm-codeblock-start")
 });
-var fencedCodeLineLast = Decoration11.line({
-  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-end")
+var fencedCodeLineLast = Decoration12.line({
+  class: mx5("cm-code cm-codeblock-line", "cm-codeblock-end")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration11.replace({
+var horizontalRule = Decoration12.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration11.replace({
+var checkedTask = Decoration12.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration11.replace({
+var uncheckedTask = Decoration12.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -5135,7 +5697,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file9,
-      L: 179,
+      L: 180,
       S: void 0,
       A: [
         "level > 0",
@@ -5174,7 +5736,7 @@ var buildDecorations2 = (view, options, focus2) => {
   const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file9,
-      L: 201,
+      L: 202,
       S: void 0,
       A: [
         "listLevels.length",
@@ -5209,14 +5771,14 @@ var buildDecorations2 = (view, options, focus2) => {
         const mark = node.node.firstChild;
         if (mark?.name === "HeaderMark") {
           const { from, to = 6 } = options.numberedHeadings ?? {};
-          const text = view.state.sliceDoc(node.from, node.to);
+          const text = state.sliceDoc(node.from, node.to);
           const len = text.match(/[#\s]+/)[0].length;
           if (!from || level < from || level > to) {
             atomicDeco.add(mark.from, mark.from + len, hide);
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, Decoration11.replace({
+              atomicDeco.add(mark.from, mark.from + len, Decoration12.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -5241,7 +5803,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, Decoration11.line({
+        deco.add(line.from, line.from, Decoration12.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -5258,7 +5820,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, Decoration11.replace({
+        atomicDeco.add(line.from, to, Decoration12.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5342,10 +5904,16 @@ var buildDecorations2 = (view, options, focus2) => {
         const editing = editingRange(state, node, focus2);
         if (urlNode && marks.length >= 2) {
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          if (options.skip?.({
+            name: "Link",
+            url
+          })) {
+            break;
+          }
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, Decoration11.mark({
+          deco.add(marks[0].to, marks[1].from, Decoration12.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5355,7 +5923,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration11.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration12.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5395,14 +5963,14 @@ var buildDecorations2 = (view, options, focus2) => {
       tree.iterate({
         from,
         to,
-        enter: wrapWithCatch(enterNode),
-        leave: wrapWithCatch(leaveNode)
+        enter: wrapWithCatch(enterNode, "decorate.enter"),
+        leave: wrapWithCatch(leaveNode, "decorate.leave")
       });
     }
   } else {
     tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode)
+      enter: wrapWithCatch(enterNode, "decorate.enter"),
+      leave: wrapWithCatch(leaveNode, "decorate.leave")
     });
   }
   return {
@@ -5410,13 +5978,10 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect6.define();
+var forceUpdate = StateEffect7.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    ViewPlugin13.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
-      }
+    ViewPlugin15.fromClass(class {
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
           ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
@@ -5443,11 +6008,17 @@ var decorateMarkdown = (options = {}) => {
       destroy() {
         this.clearUpdate();
       }
+      constructor(view) {
+        _define_property19(this, "deco", void 0);
+        _define_property19(this, "atomicDeco", void 0);
+        _define_property19(this, "pendingUpdate", void 0);
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+      }
     }, {
       provide: (plugin) => [
-        EditorView23.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
-        EditorView23.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration11.none),
-        EditorView23.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration11.none)
+        Prec5.low(EditorView25.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration12.none)),
+        EditorView25.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration12.none),
+        EditorView25.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration12.none)
       ]
     }),
     image(),
@@ -5500,11 +6071,11 @@ var linkTooltip = (renderTooltip) => {
 };
 
 // src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+import { autocompletion } from "@codemirror/autocomplete";
 import { log as log6 } from "@dxos/log";
 var __dxlog_file10 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
-  return autocompletion2({
+  return autocompletion({
     // TODO(burdon): Not working.
     activateOnTyping: true,
     // activateOnTypingDelay: 100,
@@ -5584,30 +6155,31 @@ import { syntaxTree as syntaxTree9 } from "@codemirror/language";
 import { StateField as StateField10 } from "@codemirror/state";
 import { Facet as Facet2 } from "@codemirror/state";
 import { invariant as invariant5 } from "@dxos/invariant";
+function _define_property20(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var __dxlog_file11 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
     type,
     index,
-    level,
-    lineRange,
-    contentRange,
-    children: children.map(itemToJSON)
-  };
-};
-var Tree = class {
-  constructor(node) {
-    this.type = "root";
-    this.index = -1;
-    this.level = -1;
-    this.children = [];
-    this.node = node;
-    this.lineRange = {
-      from: node.from,
-      to: node.to
-    };
-    this.contentRange = this.lineRange;
-  }
+    level,
+    lineRange,
+    contentRange,
+    children: children.map(itemToJSON)
+  };
+};
+var Tree = class {
   toJSON() {
     return itemToJSON(this);
   }
@@ -5657,6 +6229,21 @@ var Tree = class {
   lastDescendant(item) {
     return item.children.length > 0 ? this.lastDescendant(item.children.at(-1)) : item;
   }
+  constructor(node) {
+    _define_property20(this, "type", "root");
+    _define_property20(this, "index", -1);
+    _define_property20(this, "level", -1);
+    _define_property20(this, "node", void 0);
+    _define_property20(this, "lineRange", void 0);
+    _define_property20(this, "contentRange", void 0);
+    _define_property20(this, "children", []);
+    this.node = node;
+    this.lineRange = {
+      from: node.from,
+      to: node.to
+    };
+    this.contentRange = this.lineRange;
+  }
 };
 var getRange = (tree, item) => {
   const lastDescendant = tree.lastDescendant(item);
@@ -5717,7 +6304,7 @@ var format = (value) => JSON.stringify(value, (key, value2) => {
 var treeFacet = Facet2.define({
   combine: (values) => values[0]
 });
-var outlinerTree = (options = {}) => {
+var outlinerTree = (_options = {}) => {
   const buildTree = (state) => {
     let tree;
     let parent;
@@ -6143,18 +6730,18 @@ var commands = () => keymap12.of([
 ]);
 
 // src/extensions/outliner/outliner.ts
-import { Prec as Prec4 } from "@codemirror/state";
-import { Decoration as Decoration12, EditorView as EditorView24, ViewPlugin as ViewPlugin15 } from "@codemirror/view";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { Prec as Prec6 } from "@codemirror/state";
+import { Decoration as Decoration13, EditorView as EditorView26, ViewPlugin as ViewPlugin17 } from "@codemirror/view";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 
 // src/extensions/outliner/editor.ts
 import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin14 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin16 } from "@codemirror/view";
 import { log as log7 } from "@dxos/log";
 var __dxlog_file12 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/editor.ts";
 var LIST_ITEM_REGEX = /^\s*- (\[ \]|\[x\])? /;
 var initialize = () => {
-  return ViewPlugin14.fromClass(class {
+  return ViewPlugin16.fromClass(class {
     constructor(view) {
       const first = view.state.doc.lineAt(0);
       const text = view.state.sliceDoc(first.from, first.to);
@@ -6337,9 +6924,22 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/outliner.ts
-var outliner = (options = {}) => [
+function _define_property21(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var outliner = (_options = {}) => [
   // Commands.
-  Prec4.highest(commands()),
+  Prec6.highest(commands()),
   // Selection.
   selectionCompartment.of(selectionFacet.of([])),
   // State.
@@ -6355,16 +6955,12 @@ var outliner = (options = {}) => [
     listPaddingLeft: 8
   }),
   // Researve space for menu.
-  EditorView24.contentAttributes.of({
+  EditorView26.contentAttributes.of({
     class: "is-full !mr-[3rem]"
   })
 ];
 var decorations = () => [
-  ViewPlugin15.fromClass(class {
-    constructor(view) {
-      this.decorations = Decoration12.none;
-      this.updateDecorations(view.state, view);
-    }
+  ViewPlugin17.fromClass(class {
     update(update2) {
       const selectionChanged = !selectionEquals(update2.state.facet(selectionFacet), update2.startState.facet(selectionFacet));
       if (update2.focusChanged || update2.docChanged || update2.viewportChanged || update2.selectionSet || selectionChanged) {
@@ -6384,155 +6980,733 @@ var decorations = () => [
           const lineFrom = doc.lineAt(item.contentRange.from);
           const lineTo = doc.lineAt(item.contentRange.to);
           const isSelected = selection.includes(item.index) || item === current;
-          decorations2.push(Decoration12.line({
-            class: mx5("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
+          decorations2.push(Decoration13.line({
+            class: mx6("cm-list-item", lineFrom.number === line.number && "cm-list-item-start", lineTo.number === line.number && "cm-list-item-end", isSelected && (hasFocus ? "cm-list-item-focused" : "cm-list-item-selected"))
           }).range(line.from, line.from));
         }
       }
-      this.decorations = Decoration12.set(decorations2);
+      this.decorations = Decoration13.set(decorations2);
+    }
+    constructor(view) {
+      _define_property21(this, "decorations", Decoration13.none);
+      this.updateDecorations(view.state, view);
+    }
+  }, {
+    decorations: (v) => v.decorations
+  }),
+  // Theme.
+  EditorView26.theme(Object.assign({
+    ".cm-list-item": {
+      borderLeftWidth: "1px",
+      borderRightWidth: "1px",
+      paddingLeft: "32px",
+      borderColor: "transparent"
+    },
+    ".cm-list-item.cm-codeblock-start": {
+      borderRadius: "0"
+    },
+    ".cm-list-item-start": {
+      borderTopWidth: "1px",
+      borderTopLeftRadius: "4px",
+      borderTopRightRadius: "4px",
+      paddingTop: "4px",
+      marginTop: "2px"
+    },
+    ".cm-list-item-end": {
+      borderBottomWidth: "1px",
+      borderBottomLeftRadius: "4px",
+      borderBottomRightRadius: "4px",
+      paddingBottom: "4px",
+      marginBottom: "2px"
+    },
+    ".cm-list-item-focused": {
+      borderColor: "var(--dx-accentFocusIndicator)"
+    },
+    "[data-has-focus] & .cm-list-item-selected": {
+      borderColor: "var(--dx-separator)"
+    }
+  }))
+];
+
+// src/extensions/preview/preview.ts
+import { syntaxTree as syntaxTree10 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
+import { Decoration as Decoration14, EditorView as EditorView27, WidgetType as WidgetType9 } from "@codemirror/view";
+function _define_property22(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var preview = (options = {}) => {
+  return [
+    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
+    // "Block decorations may not be specified via plugins".
+    StateField11.define({
+      create: (state) => buildDecorations3(state, options),
+      update: (decorations2, tr) => {
+        if (tr.docChanged) {
+          return buildDecorations3(tr.state, options);
+        }
+        return decorations2.map(tr.changes);
+      },
+      provide: (field) => [
+        EditorView27.decorations.from(field),
+        EditorView27.atomicRanges.of((view) => view.state.field(field))
+      ]
+    })
+  ];
+};
+var buildDecorations3 = (state, options) => {
+  const builder = new RangeSetBuilder7();
+  syntaxTree10(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        //
+        // Inline widget.
+        // [Label](dxn:echo:123)
+        //
+        case "Link": {
+          const link = getLinkRef(state, node.node);
+          if (link) {
+            builder.add(node.from, node.to, Decoration14.replace({
+              widget: new PreviewInlineWidget(options, link),
+              side: 1
+            }));
+          }
+          return false;
+        }
+        //
+        // Block widget (transclusion).
+        // ![Label](dxn:echo:123)
+        //
+        case "Image": {
+          if (options.addBlockContainer && options.removeBlockContainer) {
+            const link = getLinkRef(state, node.node);
+            if (link) {
+              builder.add(node.from, node.to, Decoration14.replace({
+                block: true,
+                widget: new PreviewBlockWidget(options, link)
+              }));
+            }
+          }
+          return false;
+        }
+      }
+    }
+  });
+  return builder.finish();
+};
+var getLinkRef = (state, node) => {
+  const mark = node.getChildren("LinkMark");
+  const urlNode = node.getChild("URL");
+  if (mark && urlNode) {
+    const url = state.sliceDoc(urlNode.from, urlNode.to);
+    if (url.startsWith("dxn:")) {
+      const label = state.sliceDoc(mark[0].to, mark[1].from);
+      return {
+        block: state.sliceDoc(mark[0].from, mark[0].from + 1) === "!",
+        label,
+        ref: url
+      };
+    }
+  }
+};
+var PreviewInlineWidget = class extends WidgetType9 {
+  // override ignoreEvent() {
+  //   return false;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+  }
+  toDOM(_view) {
+    const root = document.createElement("dx-anchor");
+    root.classList.add("dx-tag--anchor");
+    root.textContent = this._link.label;
+    root.setAttribute("refId", this._link.ref);
+    return root;
+  }
+  constructor(_options, _link) {
+    super(), _define_property22(this, "_options", void 0), _define_property22(this, "_link", void 0), this._options = _options, this._link = _link;
+  }
+};
+var PreviewBlockWidget = class extends WidgetType9 {
+  // override ignoreEvent() {
+  //   return true;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref;
+  }
+  toDOM(_view) {
+    const root = document.createElement("div");
+    root.classList.add("cm-preview-block", "density-coarse");
+    this._options.addBlockContainer?.(this._link, root);
+    return root;
+  }
+  destroy() {
+    this._options.removeBlockContainer?.(this._link);
+  }
+  constructor(_options, _link) {
+    super(), _define_property22(this, "_options", void 0), _define_property22(this, "_link", void 0), this._options = _options, this._link = _link;
+  }
+};
+
+// src/extensions/tags/extended-markdown.ts
+import { xmlLanguage } from "@codemirror/lang-xml";
+import { parseMixed } from "@lezer/common";
+var extendedMarkdown = ({ registry } = {}) => {
+  return [
+    createMarkdownExtensions({
+      extensions: [
+        {
+          wrap: mixedParser(registry),
+          parseBlock: [
+            // Disable SetextHeading since it causes flickering when parsing/rendering tasks in chunks.
+            {
+              name: "SetextHeading",
+              parse: () => false
+            }
+          ]
+        }
+      ]
+    })
+  ];
+};
+var mixedParser = (registry) => {
+  const customTags = Object.keys(registry ?? {});
+  const tagPattern = new RegExp(`<(${customTags.join("|")})`);
+  return parseMixed((node, input) => {
+    switch (node.name) {
+      // Ignore XML inside of fenced and inline code.
+      case "FencedCode":
+      case "InlineCode": {
+        return null;
+      }
+      // Parse multi-line HTML blocks.
+      // case 'XMLBlock':
+      case "HTMLBlock": {
+        return {
+          parser: xmlLanguage.parser
+        };
+      }
+      // Parse paragraphs that contain custom XML tags.
+      // TODO(burdon): Entire paragraph should be parsed as XML.
+      case "Paragraph": {
+        const content = input.read(node.from, node.to);
+        if (tagPattern.test(content)) {
+          return {
+            parser: xmlLanguage.parser
+          };
+        }
+        return null;
+      }
+    }
+    return null;
+  });
+};
+
+// src/extensions/tags/streamer.ts
+import { StateEffect as StateEffect8, StateField as StateField12 } from "@codemirror/state";
+import { Decoration as Decoration15, EditorView as EditorView28, ViewPlugin as ViewPlugin18, WidgetType as WidgetType10 } from "@codemirror/view";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+function _define_property23(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var BLINK_RATE = 2e3;
+var streamer = (options = {}) => {
+  return [
+    options.cursor && cursor(),
+    options.fadeIn && fadeIn(typeof options.fadeIn === "object" ? options.fadeIn : {})
+  ].filter(isNotFalsy4);
+};
+var cursor = () => {
+  const hideCursor = StateEffect8.define();
+  const showCursor = StateField12.define({
+    create: () => true,
+    update: (value, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(hideCursor)) {
+          return false;
+        }
+      }
+      if (tr.docChanged) {
+        return true;
+      }
+      return value;
+    }
+  });
+  const timerPlugin = ViewPlugin18.fromClass(class {
+    update(update2) {
+      if (update2.docChanged) {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.view.dispatch({
+            effects: hideCursor.of(null)
+          });
+        }, BLINK_RATE);
+      }
+    }
+    destroy() {
+      clearTimeout(this.timer);
+    }
+    constructor(view) {
+      _define_property23(this, "view", void 0);
+      _define_property23(this, "timer", void 0);
+      this.view = view;
+    }
+  });
+  const cursorDecoration = StateField12.define({
+    create: () => Decoration15.none,
+    update: (_decorations, tr) => {
+      const show = tr.state.field(showCursor);
+      if (!show) {
+        return Decoration15.none;
+      }
+      const endPos = tr.state.doc.length;
+      return Decoration15.set([
+        Decoration15.widget({
+          widget: new CursorWidget(),
+          side: 1
+        }).range(endPos)
+      ]);
+    },
+    provide: (f) => EditorView28.decorations.from(f)
+  });
+  return [
+    showCursor,
+    timerPlugin,
+    cursorDecoration
+  ];
+};
+var CursorWidget = class extends WidgetType10 {
+  toDOM() {
+    return Domino.of("span").style({
+      opacity: "0.8"
+    }).child(Domino.of("span").text("\u258F").style({
+      animation: "blink 2s infinite"
+    })).build();
+  }
+};
+var fadeIn = (options = {}) => {
+  const FADE_IN_DURATION = 1e3;
+  const DEFAULT_REMOVAL_DELAY = 5e3;
+  const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
+  const removeDecoration = StateEffect8.define();
+  const fadeField = StateField12.define({
+    create: () => Decoration15.none,
+    update: (decorations2, tr) => {
+      let next = decorations2;
+      for (const effect of tr.effects) {
+        if (effect.is(removeDecoration)) {
+          const target = effect.value;
+          next = next.update({
+            filter: (from, to) => !(from === target.from && to === target.to)
+          });
+        }
+      }
+      if (!tr.docChanged) {
+        return next;
+      }
+      let isReset = tr.state.doc.length === 0;
+      if (!isReset) {
+        tr.changes.iterChanges((fromA, toA) => {
+          if (fromA === 0 && toA === tr.startState.doc.length) {
+            isReset = true;
+          }
+        });
+      }
+      if (isReset) {
+        return Decoration15.none;
+      }
+      const add = [];
+      tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        if (fromB === 0 && toB === inserted.length) {
+          return;
+        }
+        if (toA === tr.startState.doc.length && inserted.length > 0) {
+          add.push(Decoration15.mark({
+            class: "cm-fade-in"
+          }).range(fromB, toB));
+        }
+      });
+      return next.update({
+        add
+      });
+    },
+    provide: (f) => EditorView28.decorations.from(f)
+  });
+  const timerPlugin = ViewPlugin18.fromClass(class {
+    update(update2) {
+      if (!update2.docChanged) {
+        return;
+      }
+      update2.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        if (toA !== update2.startState.doc.length || inserted.length === 0) {
+          return;
+        }
+        const key = `${fromB}-${toB}`;
+        if (this._timers.has(key)) {
+          clearTimeout(this._timers.get(key));
+        }
+        const totalDelay = FADE_IN_DURATION + removalDelay;
+        const id = setTimeout(() => {
+          this.view.dispatch({
+            effects: removeDecoration.of({
+              from: fromB,
+              to: toB
+            })
+          });
+          this._timers.delete(key);
+        }, totalDelay);
+        this._timers.set(key, id);
+      });
+    }
+    destroy() {
+      for (const id of this._timers.values()) {
+        clearTimeout(id);
+      }
+      this._timers.clear();
+    }
+    constructor(view) {
+      _define_property23(this, "view", void 0);
+      _define_property23(this, "_timers", void 0);
+      this.view = view;
+      this._timers = /* @__PURE__ */ new Map();
+    }
+  });
+  return [
+    fadeField,
+    timerPlugin,
+    EditorView28.theme({
+      ".cm-line > span": {
+        opacity: "0.8"
+      },
+      ".cm-fade-in": {
+        animation: "fade-in 3s ease-out forwards"
+      },
+      "@keyframes fade-in": {
+        "0%": {
+          opacity: "0"
+        },
+        "80%": {
+          opacity: "1"
+        },
+        "100%": {
+          opacity: "0.8"
+        }
+      }
+    })
+  ];
+};
+
+// src/extensions/tags/xml-tags.ts
+import { syntaxTree as syntaxTree11 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder8, StateEffect as StateEffect9, StateField as StateField13 } from "@codemirror/state";
+import { Decoration as Decoration16, EditorView as EditorView29, WidgetType as WidgetType11 } from "@codemirror/view";
+import { invariant as invariant7 } from "@dxos/invariant";
+import { log as log8 } from "@dxos/log";
+
+// src/extensions/tags/xml-util.ts
+import { invariant as invariant6 } from "@dxos/invariant";
+var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/tags/xml-util.ts";
+var nodeToJson = (state, node) => {
+  invariant6(node.type.name === "Element", "Node is not an Element", {
+    F: __dxlog_file13,
+    L: 18,
+    S: void 0,
+    A: [
+      "node.type.name === 'Element'",
+      "'Node is not an Element'"
+    ]
+  });
+  const openTag = node.node.getChild("OpenTag") || node.node.getChild("SelfClosingTag");
+  if (openTag) {
+    const tagName = openTag.getChild("TagName");
+    if (!tagName) {
+      return;
+    }
+    const tag = {
+      _tag: state.doc.sliceString(tagName.from, tagName.to)
+    };
+    let attributeNode = openTag.getChild("Attribute");
+    while (attributeNode) {
+      const attrName = attributeNode.getChild("AttributeName");
+      const attrValue = attributeNode.getChild("AttributeValue");
+      if (attrName) {
+        const attr = state.doc.sliceString(attrName.from, attrName.to);
+        let value = true;
+        if (attrValue) {
+          const rawValue = state.doc.sliceString(attrValue.from, attrValue.to);
+          if (rawValue.startsWith('"') && rawValue.endsWith('"') || rawValue.startsWith("'") && rawValue.endsWith("'")) {
+            value = rawValue.slice(1, -1);
+          } else {
+            value = rawValue;
+          }
+        }
+        tag[attr] = value;
+      }
+      attributeNode = attributeNode.nextSibling;
+    }
+    if (node.type.name === "Element" && openTag.type.name !== "SelfClosingTag") {
+      const children = [];
+      let child = node.node.firstChild;
+      while (child) {
+        if (child.type.name !== "OpenTag" && child.type.name !== "CloseTag") {
+          if (child.type.name === "Text") {
+            const text = state.doc.sliceString(child.from, child.to).trim();
+            if (text) {
+              children.push(text);
+            }
+          } else if (child.type.name === "Element") {
+            const data = nodeToJson(state, child);
+            if (data) {
+              children.push(data);
+            }
+          }
+        }
+        child = child.nextSibling;
+      }
+      if (children.length > 0) {
+        tag.children = children;
+      }
     }
-  }, {
-    decorations: (v) => v.decorations
-  }),
-  // Theme.
-  EditorView24.theme(Object.assign({
-    ".cm-list-item": {
-      borderLeftWidth: "1px",
-      borderRightWidth: "1px",
-      paddingLeft: "32px",
-      borderColor: "transparent"
-    },
-    ".cm-list-item.cm-codeblock-start": {
-      borderRadius: "0"
-    },
-    ".cm-list-item-start": {
-      borderTopWidth: "1px",
-      borderTopLeftRadius: "4px",
-      borderTopRightRadius: "4px",
-      paddingTop: "4px",
-      marginTop: "2px"
+    return tag;
+  }
+};
+
+// src/extensions/tags/xml-tags.ts
+function _define_property24(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var __dxlog_file14 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/tags/xml-tags.ts";
+var xmlTagContextEffect = StateEffect9.define();
+var xmlTagUpdateEffect = StateEffect9.define();
+var xmlTagResetEffect = StateEffect9.define();
+var xmlTags = (options = {}) => {
+  const contextState = StateField13.define({
+    create: () => void 0,
+    update: (value, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagContextEffect)) {
+          return effect.value;
+        }
+      }
+      return value;
+    }
+  });
+  const widgets = /* @__PURE__ */ new Map();
+  const notifier = {
+    mounted: (widget) => {
+      widgets.set(widget.id, widget);
+      options.setWidgets?.([
+        ...widgets.values()
+      ]);
     },
-    ".cm-list-item-end": {
-      borderBottomWidth: "1px",
-      borderBottomLeftRadius: "4px",
-      borderBottomRightRadius: "4px",
-      paddingBottom: "4px",
-      marginBottom: "2px"
+    unmounted: (id) => {
+      widgets.delete(id);
+      options.setWidgets?.([
+        ...widgets.values()
+      ]);
+    }
+  };
+  const decorationsState = StateField13.define({
+    create: (state) => {
+      return buildDecorations4(state, 0, state.doc.length, state.field(contextState), state.field(widgetState), options, notifier);
     },
-    ".cm-list-item-focused": {
-      borderColor: "var(--dx-accentFocusIndicator)"
+    update: ({ from, decorations: decorations2 }, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagResetEffect)) {
+          return {
+            from: 0,
+            decorations: Decoration16.none
+          };
+        }
+      }
+      if (tr.docChanged) {
+        const { state } = tr;
+        const reset = tr.changes.touchesRange(0, from);
+        const result = buildDecorations4(state, reset ? 0 : from, state.doc.length, state.field(contextState), state.field(widgetState), options, notifier);
+        return {
+          from: result.from,
+          decorations: decorations2.update({
+            add: decorationSetToArray(result.decorations)
+          })
+        };
+      }
+      return {
+        from,
+        decorations: decorations2
+      };
     },
-    "[data-has-focus] & .cm-list-item-selected": {
-      borderColor: "var(--dx-separator)"
+    provide: (field) => [
+      EditorView29.decorations.from(field, (v) => v.decorations),
+      EditorView29.atomicRanges.of((view) => view.state.field(field).decorations || Decoration16.none)
+    ]
+  });
+  const widgetState = StateField13.define({
+    create: () => ({}),
+    update: (map, tr) => {
+      for (const effect of tr.effects) {
+        if (effect.is(xmlTagResetEffect)) {
+          return {};
+        }
+        if (effect.is(xmlTagUpdateEffect)) {
+          const { id, value } = effect.value;
+          const state = typeof value === "function" ? value(map[id]) : value;
+          const { decorations: decorations2 } = tr.state.field(decorationsState);
+          for (const range of decorationSetToArray(decorations2)) {
+            const deco = range.value;
+            const widget = deco?.spec?.widget;
+            if (widget && widget instanceof PlaceholderWidget && widget.id === effect.value.id && widget.root) {
+              const props = {
+                ...widget.props,
+                ...state
+              };
+              notifier.mounted({
+                id: widget.id,
+                props,
+                root: widget.root,
+                Component: widget.Component
+              });
+            }
+          }
+          return {
+            ...map,
+            [id]: state
+          };
+        }
+      }
+      return map;
     }
-  }))
-];
-
-// src/extensions/preview/preview.ts
-import "@dxos/lit-ui/dx-ref-tag.pcss";
-import { syntaxTree as syntaxTree10 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder7, StateField as StateField11 } from "@codemirror/state";
-import { Decoration as Decoration13, EditorView as EditorView25, WidgetType as WidgetType8 } from "@codemirror/view";
-var preview = (options = {}) => {
+  });
   return [
-    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins"
-    StateField11.define({
-      create: (state) => buildDecorations3(state, options),
-      update: (_, tr) => buildDecorations3(tr.state, options),
-      provide: (field) => [
-        EditorView25.decorations.from(field),
-        EditorView25.atomicRanges.of((view) => view.state.field(field))
-      ]
-    })
+    contextState,
+    decorationsState,
+    widgetState
   ];
 };
-var getLinkRef = (state, node) => {
-  const mark = node.getChild("LinkMark");
-  const label = node.getChild("LinkLabel");
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
+var buildDecorations4 = (state, from, to, context, widgetState, options, notifier) => {
+  const builder = new RangeSetBuilder8();
+  const tree = syntaxTree11(state);
+  if (!tree || tree.type.name === "Program" && tree.length === 0) {
     return {
-      suggest: ref.startsWith("?"),
-      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith("?") ? ref.slice(1) : ref
+      from,
+      decorations: Decoration16.none
     };
   }
-};
-var buildDecorations3 = (state, options) => {
-  const builder = new RangeSetBuilder7();
-  syntaxTree10(state).iterate({
+  tree.iterate({
+    from,
+    to,
     enter: (node) => {
-      switch (node.name) {
-        //
-        // Decoration.
-        // [Label][dxn:echo:123]
-        //
-        case "Link": {
-          const link = getLinkRef(state, node.node);
-          if (link) {
-            builder.add(node.from, node.to, Decoration13.replace({
-              widget: new PreviewInlineWidget(options, link)
-            }));
-          }
-          break;
-        }
-        //
-        // Block widget.
-        // ![Label][dxn:echo:123]
-        //
-        case "Image": {
-          const link = getLinkRef(state, node.node);
-          if (options.addBlockContainer && options.removeBlockContainer && link) {
-            builder.add(node.from, node.to, Decoration13.replace({
-              block: true,
-              // atomic: true,
-              widget: new PreviewBlockWidget(options, link)
-            }));
+      switch (node.type.name) {
+        // XML Element.
+        case "Element": {
+          try {
+            if (options.registry) {
+              const props = nodeToJson(state, node.node);
+              if (props) {
+                const def = options.registry[props._tag];
+                if (def) {
+                  const { block, factory, Component } = def;
+                  const state2 = props.id ? widgetState[props.id] : void 0;
+                  const args = {
+                    context,
+                    ...props,
+                    ...state2
+                  };
+                  const widget = factory ? factory(args) : Component ? props.id && new PlaceholderWidget(props.id, Component, args, notifier) : void 0;
+                  if (widget) {
+                    from = node.node.to;
+                    builder.add(node.node.from, node.node.to, Decoration16.replace({
+                      widget,
+                      block,
+                      atomic: true,
+                      inclusive: true
+                    }));
+                  }
+                }
+              }
+            }
+          } catch (err) {
+            log8.catch(err, void 0, {
+              F: __dxlog_file14,
+              L: 285,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
           }
-          break;
+          return false;
         }
       }
     }
   });
-  return builder.finish();
+  return {
+    from,
+    decorations: builder.finish()
+  };
 };
-var PreviewInlineWidget = class extends WidgetType8 {
-  constructor(_options, _link) {
-    super(), this._options = _options, this._link = _link;
+var PlaceholderWidget = class _PlaceholderWidget extends WidgetType11 {
+  get root() {
+    return this._root;
   }
-  // override ignoreEvent() {
-  //   return false;
-  // }
   eq(other) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+    return other instanceof _PlaceholderWidget && this.id === other.id;
   }
-  toDOM(view) {
-    const root = document.createElement("dx-ref-tag");
-    root.textContent = this._link.label;
-    root.setAttribute("refId", this._link.ref);
-    return root;
-  }
-};
-var PreviewBlockWidget = class extends WidgetType8 {
-  constructor(_options, _link) {
-    super(), this._options = _options, this._link = _link;
+  ignoreEvent() {
+    return true;
   }
-  // override ignoreEvent() {
-  //   return true;
-  // }
-  eq(other) {
-    return this._link.ref === other._link.ref;
+  toDOM(_view) {
+    this._root = document.createElement("span");
+    this.notifier.mounted({
+      id: this.id,
+      props: this.props,
+      root: this._root,
+      Component: this.Component
+    });
+    return this._root;
   }
-  toDOM(view) {
-    const root = document.createElement("div");
-    root.classList.add("cm-preview-block", "density-coarse");
-    this._options.addBlockContainer?.(this._link, root);
-    return root;
+  destroy(_dom) {
+    this.notifier.unmounted(this.id);
+    this._root = null;
   }
-  destroy() {
-    this._options.removeBlockContainer?.(this._link);
+  constructor(id, Component, props, notifier) {
+    super(), _define_property24(this, "id", void 0), _define_property24(this, "Component", void 0), _define_property24(this, "props", void 0), _define_property24(this, "notifier", void 0), _define_property24(this, "_root", void 0), this.id = id, this.Component = Component, this.props = props, this.notifier = notifier, this._root = null;
+    invariant7(id, void 0, {
+      F: __dxlog_file14,
+      L: 310,
+      S: this,
+      A: [
+        "id",
+        ""
+      ]
+    });
   }
 };
 
@@ -6594,7 +7768,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // src/hooks/useTextEditor.ts
-var __dxlog_file13 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file15 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
   const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
@@ -6604,12 +7778,12 @@ var useTextEditor = (props = {}, deps = []) => {
   useEffect2(() => {
     let view2;
     if (parentRef.current) {
-      log8("create", {
+      log9("create", {
         id,
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file13,
+        F: __dxlog_file15,
         L: 75,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6633,20 +7807,20 @@ var useTextEditor = (props = {}, deps = []) => {
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          EditorView26.exceptionSink.of((err) => {
-            log8.catch(err, void 0, {
-              F: __dxlog_file13,
+          EditorView30.exceptionSink.of((err) => {
+            log9.catch(err, void 0, {
+              F: __dxlog_file15,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(isNotFalsy4)
+        ].filter(isNotFalsy5)
       });
-      view2 = new EditorView26({
+      view2 = new EditorView30({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? EditorView26.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? EditorView30.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -6664,10 +7838,10 @@ var useTextEditor = (props = {}, deps = []) => {
       setView(view2);
     }
     return () => {
-      log8("destroy", {
+      log9("destroy", {
         id
       }, {
-        F: __dxlog_file13,
+        F: __dxlog_file15,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -6679,12 +7853,12 @@ var useTextEditor = (props = {}, deps = []) => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
-          log8.warn("invalid selection", {
+          log9.warn("invalid selection", {
             length: view.state.doc.length,
             scrollTo,
             selection
           }, {
-            F: __dxlog_file13,
+            F: __dxlog_file15,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -6759,7 +7933,7 @@ var Editor = /* @__PURE__ */ forwardRef(({ classNames, id, text, ...props }, for
     ]);
     return /* @__PURE__ */ React3.createElement("div", {
       ref: parentRef,
-      className: mx6(classNames),
+      className: mx7(classNames),
       ...focusAttributes
     });
   } finally {
@@ -6782,23 +7956,32 @@ import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
 var useEditorToolbarState = (initialState = {}) => {
   return useMemo4(() => live(initialState), []);
 };
-var createEditorAction = (id, invoke, properties) => {
+var createEditorAction = (id, props, invoke) => {
   const { label = [
     `${id} label`,
     {
       ns: translationKey
     }
-  ], ...rest } = properties;
+  ], ...rest } = props;
   return createMenuAction(id, invoke, {
     label,
     ...rest
   });
 };
-var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
-  icon,
-  iconOnly: true,
-  ...props
-});
+var createEditorActionGroup = (id, props, icon) => {
+  const { label = [
+    `${id} label`,
+    {
+      ns: translationKey
+    }
+  ], ...rest } = props;
+  return createMenuItemGroup(id, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest
+  });
+};
 
 // src/components/EditorToolbar/blocks.ts
 var createBlockGroupAction = (value) => createEditorActionGroup("block", {
@@ -6812,7 +7995,13 @@ var createBlockActions = (value, getView, blankLine) => Object.entries({
   table: "ph--table--regular"
 }).map(([type, icon]) => {
   const checked = type === value;
-  return createEditorAction(type, () => {
+  return createEditorAction(type, {
+    checked,
+    ...type === "table" && {
+      disabled: !!blankLine
+    },
+    icon
+  }, () => {
     const view = getView();
     if (!view) {
       return;
@@ -6828,12 +8017,6 @@ var createBlockActions = (value, getView, blankLine) => Object.entries({
         insertTable(view);
         break;
     }
-  }, {
-    checked,
-    ...type === "table" && {
-      disabled: !!blankLine
-    },
-    icon
   });
 });
 var createBlocks = (state, getView) => {
@@ -6873,7 +8056,10 @@ var createFormattingGroup = (formatting) => createEditorActionGroup("formatting"
 });
 var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
   const checked = !!formatting[type];
-  return createEditorAction(type, () => {
+  return createEditorAction(type, {
+    checked,
+    icon
+  }, () => {
     const view = getView();
     if (!view) {
       return;
@@ -6884,9 +8070,6 @@ var createFormattingActions = (formatting, getView) => Object.entries(formats).m
     }
     const inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
     setStyle(inlineType, !checked)(view);
-  }, {
-    checked,
-    icon
   });
 });
 var createFormatting = (state, getView) => {
@@ -6927,7 +8110,7 @@ var createHeadingActions = (getView) => Object.entries({
   "6": "ph--text-h-six--regular"
 }).map(([levelStr, icon]) => {
   const level = parseInt(levelStr);
-  return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
+  return createEditorAction(`heading--${levelStr}`, {
     label: [
       "heading level label",
       {
@@ -6936,7 +8119,7 @@ var createHeadingActions = (getView) => Object.entries({
       }
     ],
     icon
-  });
+  }, () => setHeading(level)(getView()));
 });
 var computeHeadingValue = (state) => {
   const blockType = state ? state.blockType : "paragraph";
@@ -6966,10 +8149,10 @@ var createHeadings = (state, getView) => {
 };
 
 // src/components/EditorToolbar/image.ts
-var createImageUploadAction = (onImageUpload) => createEditorAction("image", onImageUpload, {
+var createImageUploadAction = (onImageUpload) => createEditorAction("image", {
   testId: "editor.toolbar.image",
   icon: "ph--image-square--regular"
-});
+}, onImageUpload);
 var createImageUpload = (onImageUpload) => ({
   nodes: [
     createImageUploadAction(onImageUpload)
@@ -6995,7 +8178,10 @@ var createListGroupAction = (value) => createEditorActionGroup("list", {
 });
 var createListActions = (value, getView) => Object.entries(listStyles).map(([listStyle, icon]) => {
   const checked = value === listStyle;
-  return createEditorAction(`list-${listStyle}`, () => {
+  return createEditorAction(`list-${listStyle}`, {
+    checked,
+    icon
+  }, () => {
     const view = getView();
     if (!view) {
       return;
@@ -7006,9 +8192,6 @@ var createListActions = (value, getView) => Object.entries(listStyles).map(([lis
     } else {
       addList(listType)(view);
     }
-  }, {
-    checked,
-    icon
   });
 });
 var createLists = (state, getView) => {
@@ -7035,10 +8218,10 @@ var createLists = (state, getView) => {
 
 // src/components/EditorToolbar/search.ts
 import { openSearchPanel } from "@codemirror/search";
-var createSearchAction = (getView) => createEditorAction("search", () => openSearchPanel(getView()), {
+var createSearchAction = (getView) => createEditorAction("search", {
   testId: "editor.toolbar.search",
   icon: "ph--magnifying-glass--regular"
-});
+}, () => openSearchPanel(getView()));
 var createSearch = (getView) => ({
   nodes: [
     createSearchAction(getView)
@@ -7064,7 +8247,7 @@ var createViewModeActions = (value, onViewModeChange) => Object.entries({
   readonly: "ph--pencil-slash--regular"
 }).map(([viewMode, icon]) => {
   const checked = viewMode === value;
-  return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode), {
+  return createEditorAction(`view-mode--${viewMode}`, {
     label: [
       `${viewMode} mode label`,
       {
@@ -7073,7 +8256,7 @@ var createViewModeActions = (value, onViewModeChange) => Object.entries({
     ],
     checked,
     icon
-  });
+  }, () => onViewModeChange(viewMode));
 });
 var createViewMode = (state, onViewModeChange) => {
   const value = state.viewMode ?? "source";
@@ -7098,61 +8281,62 @@ var createViewMode = (state, onViewModeChange) => {
 };
 
 // src/components/EditorToolbar/EditorToolbar.tsx
-var createToolbar = ({ getView, state, customActions, ...features }) => {
+var createToolbarActions = ({ getView, state, customActions, ...features }) => {
   return Rx.make((get2) => {
-    const nodes = [];
-    const edges = [];
+    const graph = {
+      nodes: [],
+      edges: []
+    };
     if (features.headings ?? true) {
       const headings2 = get2(rxFromSignal(() => createHeadings(state, getView)));
-      nodes.push(...headings2.nodes);
-      edges.push(...headings2.edges);
+      graph.nodes.push(...headings2.nodes);
+      graph.edges.push(...headings2.edges);
     }
     if (features.formatting ?? true) {
       const formatting = get2(rxFromSignal(() => createFormatting(state, getView)));
-      nodes.push(...formatting.nodes);
-      edges.push(...formatting.edges);
+      graph.nodes.push(...formatting.nodes);
+      graph.edges.push(...formatting.edges);
     }
     if (features.lists ?? true) {
       const lists = get2(rxFromSignal(() => createLists(state, getView)));
-      nodes.push(...lists.nodes);
-      edges.push(...lists.edges);
+      graph.nodes.push(...lists.nodes);
+      graph.edges.push(...lists.edges);
     }
     if (features.blocks ?? true) {
       const blocks = get2(rxFromSignal(() => createBlocks(state, getView)));
-      nodes.push(...blocks.nodes);
-      edges.push(...blocks.edges);
+      graph.nodes.push(...blocks.nodes);
+      graph.edges.push(...blocks.edges);
     }
     if (features.image) {
       const image2 = get2(rxFromSignal(() => createImageUpload(features.image)));
-      nodes.push(...image2.nodes);
-      edges.push(...image2.edges);
+      graph.nodes.push(...image2.nodes);
+      graph.edges.push(...image2.edges);
+    }
+    {
+      const gap = createGapSeparator();
+      graph.nodes.push(...gap.nodes);
+      graph.edges.push(...gap.edges);
     }
-    const editorToolbarGap = createGapSeparator();
-    nodes.push(...editorToolbarGap.nodes);
-    edges.push(...editorToolbarGap.edges);
     if (customActions) {
       const custom = get2(customActions);
-      nodes.push(...custom.nodes);
-      edges.push(...custom.edges);
+      graph.nodes.push(...custom.nodes);
+      graph.edges.push(...custom.edges);
     }
     if (features.search ?? true) {
       const search = get2(rxFromSignal(() => createSearch(getView)));
-      nodes.push(...search.nodes);
-      edges.push(...search.edges);
+      graph.nodes.push(...search.nodes);
+      graph.edges.push(...search.edges);
     }
     if (features.viewMode) {
       const viewMode = get2(rxFromSignal(() => createViewMode(state, features.viewMode)));
-      nodes.push(...viewMode.nodes);
-      edges.push(...viewMode.edges);
+      graph.nodes.push(...viewMode.nodes);
+      graph.edges.push(...viewMode.edges);
     }
-    return {
-      nodes,
-      edges
-    };
+    return graph;
   });
 };
 var useEditorToolbarActionGraph = (props) => {
-  const menuCreator = useMemo5(() => createToolbar({
+  const menuCreator = useMemo5(() => createToolbarActions({
     getView: props.getView,
     state: props.state,
     customActions: props.customActions,
@@ -7197,7 +8381,7 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
 
 // src/components/Popover/CommandMenu.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React5, { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import React5, { Fragment, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
 import { Icon as Icon2, Popover, toLocalizedString, useThemeContext as useThemeContext2, useTranslation } from "@dxos/react-ui";
 var CommandMenu = ({ groups, currentItem, onSelect }) => {
   var _effect = _useSignals3();
@@ -7214,7 +8398,7 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
       ])
     }, /* @__PURE__ */ React5.createElement(Popover.Viewport, {
       classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
-    }, /* @__PURE__ */ React5.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React5.createElement(React5.Fragment, {
+    }, /* @__PURE__ */ React5.createElement("ul", null, groupsWithItems.map((group, index) => /* @__PURE__ */ React5.createElement(Fragment, {
       key: group.id
     }, /* @__PURE__ */ React5.createElement(CommandGroup, {
       group,
@@ -7463,50 +8647,17 @@ var linkSlashCommands = {
 // src/components/Popover/RefPopover.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
-import React6, { useRef as useRef4, useState as useState3, useEffect as useEffect4, useCallback as useCallback5, forwardRef as forwardRef2 } from "react";
+import React6, { forwardRef as forwardRef2, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 import { addEventListener as addEventListener2 } from "@dxos/async";
 import { Popover as Popover2 } from "@dxos/react-ui";
-var customEventOptions = {
-  capture: true,
-  passive: false
-};
-var RefPopover = /* @__PURE__ */ forwardRef2(({ children, open, onOpenChange, modal, onActivate }, ref) => {
-  var _effect = _useSignals4();
-  try {
-    const [rootRef, setRootRef] = useState3(null);
-    useEffect4(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-      return addEventListener2(rootRef, "dx-ref-tag-activate", onActivate, customEventOptions);
-    }, [
-      rootRef,
-      onActivate
-    ]);
-    return /* @__PURE__ */ React6.createElement(Popover2.Root, {
-      open,
-      onOpenChange,
-      modal
-    }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
-      virtualRef: ref
-    }), /* @__PURE__ */ React6.createElement("div", {
-      role: "none",
-      className: "contents",
-      ref: setRootRef
-    }, children));
-  } finally {
-    _effect.f();
-  }
-});
-var REF_POPOVER = "RefPopover";
-var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
+var [RefPopoverContextProvider, useRefPopover] = createContext("RefPopover", {});
 var PreviewProvider = ({ children, onLookup }) => {
   var _effect = _useSignals4();
   try {
     const trigger = useRef4(null);
     const [value, setValue] = useState3({});
     const [open, setOpen] = useState3(false);
-    const handleDxRefTagActivate = useCallback5((event) => {
+    const handleDxAnchorActivate = useCallback5((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7537,25 +8688,51 @@ var PreviewProvider = ({ children, onLookup }) => {
       ref: trigger,
       open,
       onOpenChange: setOpen,
-      onActivate: handleDxRefTagActivate
+      onActivate: handleDxAnchorActivate
     }, children));
   } finally {
     _effect.f();
   }
 };
+var RefPopover = /* @__PURE__ */ forwardRef2(({ children, open, onOpenChange, modal, onActivate }, ref) => {
+  var _effect = _useSignals4();
+  try {
+    const [rootRef, setRootRef] = useState3(null);
+    useEffect4(() => {
+      if (!rootRef || !onActivate) {
+        return;
+      }
+      return addEventListener2(rootRef, "dx-anchor-activate", onActivate, {
+        capture: true,
+        passive: false
+      });
+    }, [
+      rootRef,
+      onActivate
+    ]);
+    return /* @__PURE__ */ React6.createElement(Popover2.Root, {
+      open,
+      onOpenChange,
+      modal
+    }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
+      virtualRef: ref
+    }), /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
 
 // src/components/Popover/RefDropdownMenu.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React7, { useRef as useRef5, useState as useState4, useEffect as useEffect5, useCallback as useCallback6 } from "react";
+import React7, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
 import { addEventListener as addEventListener3 } from "@dxos/async";
 import { DropdownMenu } from "@dxos/react-ui";
-var customEventOptions2 = {
-  capture: true,
-  passive: false
-};
-var REF_DROPDOWN_MENU = "RefDropdownMenu";
-var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2(REF_DROPDOWN_MENU, {});
+var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2("RefDropdownMenu", {});
 var RefDropdownMenuProvider = ({ children, onLookup }) => {
   var _effect = _useSignals5();
   try {
@@ -7563,7 +8740,7 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     const [value, setValue] = useState4({});
     const [rootRef, setRootRef] = useState4(null);
     const [open, setOpen] = useState4(false);
-    const handleDxRefTagActivate = useCallback6((event) => {
+    const handleDxAnchorActivate = useCallback6((event) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value2) => ({
         ...value2,
@@ -7590,7 +8767,10 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
       if (!rootRef) {
         return;
       }
-      return addEventListener3(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions2);
+      return addEventListener3(rootRef, "dx-anchor-activate", handleDxAnchorActivate, {
+        capture: true,
+        passive: false
+      });
     }, [
       rootRef
     ]);
@@ -7612,25 +8792,23 @@ var RefDropdownMenuProvider = ({ children, onLookup }) => {
     _effect.f();
   }
 };
-var RefDropdownMenu = {
-  Provider: RefDropdownMenuProvider
-};
 export {
   CommandMenu,
   Cursor,
+  Domino,
   Editor,
   EditorInputMode,
   EditorInputModes,
   EditorState4 as EditorState,
   EditorToolbar,
-  EditorView27 as EditorView,
+  EditorView31 as EditorView,
   EditorViewMode,
   EditorViewModes,
   Inline,
   InputModeExtensions,
   List,
   PreviewProvider,
-  RefDropdownMenu,
+  RefDropdownMenuProvider,
   RefPopover,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
@@ -7642,6 +8820,7 @@ export {
   addList,
   addStyle,
   annotations,
+  autoScroll,
   autocomplete,
   automerge,
   awareness,
@@ -7668,7 +8847,6 @@ export {
   createEditorActionGroup,
   createEditorStateStore,
   createEditorStateTransaction,
-  createElement,
   createExternalCommentSync,
   createJsonExtensions,
   createMarkdownExtensions,
@@ -7678,6 +8856,8 @@ export {
   debugNodeLogger,
   debugTree,
   decorateMarkdown,
+  decorationSetToArray,
+  defaultExtensions,
   defaultOptions,
   defaultThemeSlots,
   deleteItem,
@@ -7689,6 +8869,7 @@ export {
   editorSlots,
   editorWidth,
   editorWithToolbarLayout,
+  extendedMarkdown,
   filterItems,
   flattenRect,
   floatingMenu,
@@ -7742,6 +8923,7 @@ export {
   removeStyle,
   renderRoot,
   scrollThreadIntoView,
+  scrollToBottomEffect,
   selectionState,
   setBlockquote,
   setComments,
@@ -7751,6 +8933,7 @@ export {
   singleValueFacet,
   stackItemContentEditorClassNames,
   staticCompletion,
+  streamer,
   table,
   tags2 as tags,
   textRange,
@@ -7772,9 +8955,12 @@ export {
   useComments,
   useEditorToolbarState,
   useFormattingState,
-  useRefDropdownMenu,
   useRefPopover,
   useTextEditor,
-  wrapWithCatch
+  wrapWithCatch,
+  xmlTagContextEffect,
+  xmlTagResetEffect,
+  xmlTagUpdateEffect,
+  xmlTags
 };
 //# sourceMappingURL=index.mjs.map