@dxos/react-ui-editor 0.8.4-main.3f58842 → 0.8.4-main.5ea62a8

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}}",
@@ -63,15 +63,25 @@ import { getProviderValue, isNotFalsy as isNotFalsy4 } 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
     }),
@@ -143,17 +156,187 @@ import { next as A3 } from "@automerge/automerge";
 import { StateField } from "@codemirror/state";
 import { EditorView as EditorView2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
 
-// src/extensions/automerge/cursor.ts
+// 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_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 overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class {
+};
+_define_property2(Cursor, "converter", singleValueFacet(defaultCursorConverter));
+_define_property2(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_property2(Cursor, "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;
+});
+
+// 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) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log.catch(err, void 0, {
+        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 [];
+  }
+};
+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
+    ]);
+  }
+  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/cursor.ts
+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)
@@ -165,8 +348,8 @@ var cursorConverter = (accessor) => ({
     try {
       return fromCursor(accessor, cursor);
     } 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)
@@ -331,13 +514,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_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 Syncer = class {
   reconcile(view, editor2) {
     if (this._pending) {
       return;
@@ -372,172 +562,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_property3(this, "_handle", void 0);
+    _define_property3(this, "_state", void 0);
+    _define_property3(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_property4(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;
+    obj[key] = value;
   }
-  if (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
-  }
-  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: () => ({
@@ -575,16 +624,18 @@ var automerge = (accessor) => {
     syncState,
     // Reconcile external updates.
     ViewPlugin2.fromClass(class {
+      destroy() {
+        accessor.handle.removeListener("change", this._handleChange);
+      }
       constructor(_view) {
+        _define_property4(this, "_view", void 0);
+        _define_property4(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 }) => {
@@ -600,6 +651,19 @@ import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin3, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
+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 __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
 var dummyProvider = {
   remoteStateChange: new Event(),
@@ -623,23 +687,6 @@ var awareness = (provider = dummyProvider) => {
   ];
 };
 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();
@@ -734,11 +781,29 @@ var RemoteSelectionsDecorator = class {
     }
     this.decorations = Decoration2.set(decorations2, true);
   }
+  constructor(view) {
+    _define_property5(this, "_ctx", new Context(void 0, {
+      F: __dxlog_file3,
+      L: 80
+    }));
+    _define_property5(this, "_cursorConverter", void 0);
+    _define_property5(this, "_provider", void 0);
+    _define_property5(this, "_lastAnchor", void 0);
+    _define_property5(this, "_lastHead", void 0);
+    _define_property5(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 WidgetType {
-  constructor(_name, _color) {
-    super(), this._name = _name, this._color = _color;
-  }
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-collab-selectionCaret";
@@ -768,6 +833,9 @@ var RemoteCaretWidget = class extends WidgetType {
   ignoreEvent() {
     return true;
   }
+  constructor(_name, _color) {
+    super(), _define_property5(this, "_name", void 0), _define_property5(this, "_color", void 0), this._name = _name, this._color = _color;
+  }
 };
 var styles = EditorView3.theme({
   ".cm-collab-selection": {},
@@ -832,17 +900,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_property6(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,6 +1005,21 @@ var SpaceAwarenessProvider = class {
     this._remoteStates.set(message.state.peerId, message.state);
     this.remoteStateChange.emit();
   }
+  constructor(params) {
+    _define_property6(this, "_remoteStates", /* @__PURE__ */ new Map());
+    _define_property6(this, "_space", void 0);
+    _define_property6(this, "_channel", void 0);
+    _define_property6(this, "_peerId", void 0);
+    _define_property6(this, "_info", void 0);
+    _define_property6(this, "_ctx", void 0);
+    _define_property6(this, "_postTask", void 0);
+    _define_property6(this, "_localState", void 0);
+    _define_property6(this, "remoteStateChange", new Event2());
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
 };
 
 // src/extensions/blast.ts
@@ -939,6 +1027,19 @@ import { EditorView as EditorView4, 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_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_file5 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
@@ -1033,34 +1134,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 +1197,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) {
@@ -1149,9 +1222,52 @@ var Blaster = class {
       this._effect.update(this._ctx, particle);
     }
   }
+  constructor(_node, _options) {
+    _define_property7(this, "_node", void 0);
+    _define_property7(this, "_options", void 0);
+    _define_property7(this, "_effect", void 0);
+    _define_property7(this, "_canvas", void 0);
+    _define_property7(this, "_ctx", void 0);
+    _define_property7(this, "_running", void 0);
+    _define_property7(this, "_lastTime", void 0);
+    _define_property7(this, "_shakeTime", void 0);
+    _define_property7(this, "_shakeTimeMax", void 0);
+    _define_property7(this, "_particles", void 0);
+    _define_property7(this, "_particlePointer", void 0);
+    _define_property7(this, "_lastPoint", void 0);
+    _define_property7(this, "shake", void 0);
+    _define_property7(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_property7(this, "_options", void 0);
     this._options = _options;
   }
 };
@@ -1354,11 +1470,21 @@ 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";
+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 hint = ({ delay = 3e3, onHint }) => {
   return ViewPlugin4.fromClass(class {
-    constructor() {
-      this.decorations = Decoration3.none;
-    }
     update(update2) {
       if (this.timeout) {
         clearTimeout(this.timeout);
@@ -1390,6 +1516,10 @@ var hint = ({ delay = 3e3, onHint }) => {
         clearTimeout(this.timeout);
       }
     }
+    constructor() {
+      _define_property8(this, "decorations", Decoration3.none);
+      _define_property8(this, "timeout", void 0);
+    }
   }, {
     provide: (plugin) => [
       EditorView5.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration3.none)
@@ -1397,9 +1527,6 @@ var hint = ({ delay = 3e3, onHint }) => {
   });
 };
 var Hint = class extends WidgetType2 {
-  constructor(content) {
-    super(), this.content = content;
-  }
   toDOM() {
     const wrap = document.createElement("span");
     wrap.className = "cm-placeholder";
@@ -1433,6 +1560,9 @@ var Hint = class extends WidgetType2 {
   ignoreEvent() {
     return false;
   }
+  constructor(content) {
+    super(), _define_property8(this, "content", void 0), this.content = content;
+  }
 };
 
 // src/extensions/command/command.ts
@@ -1452,16 +1582,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 Prec2, RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView8, ViewPlugin as ViewPlugin6, 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 Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
+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 placeholder = ({ delay = 3e3, content }) => {
   const plugin = ViewPlugin5.fromClass(class {
-    constructor() {
-      this.decorations = Decoration4.none;
-    }
     update(update2) {
       if (this.timeout) {
         window.clearTimeout(this.timeout);
@@ -1488,6 +1628,10 @@ var placeholder = ({ delay = 3e3, content }) => {
         clearTimeout(this.timeout);
       }
     }
+    constructor() {
+      _define_property9(this, "decorations", Decoration4.none);
+      _define_property9(this, "timeout", void 0);
+    }
   }, {
     provide: (plugin2) => {
       return [
@@ -1503,9 +1647,6 @@ var placeholder = ({ delay = 3e3, content }) => {
   ] : plugin;
 };
 var Placeholder = class extends WidgetType3 {
-  constructor(content) {
-    super(), this.content = content;
-  }
   toDOM(view) {
     const wrap = document.createElement("span");
     wrap.className = "cm-placeholder";
@@ -1535,15 +1676,27 @@ var Placeholder = class extends WidgetType3 {
   ignoreEvent() {
     return false;
   }
+  constructor(content) {
+    super(), _define_property9(this, "content", void 0), this.content = content;
+  }
 };
 
 // src/extensions/command/command-menu.ts
-var commandMenu = (options) => {
-  const commandMenuPlugin = ViewPlugin6.fromClass(class {
-    constructor(view) {
-      this.view = view;
-      this.decorations = Decoration5.none;
-    }
+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 commandMenu = (options) => {
+  const commandMenuPlugin = ViewPlugin6.fromClass(class {
     // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
     update(update2) {
       const builder = new RangeSetBuilder3();
@@ -1567,6 +1720,12 @@ var commandMenu = (options) => {
       }
       this.decorations = builder.finish();
     }
+    constructor(view) {
+      _define_property10(this, "view", void 0);
+      _define_property10(this, "decorations", void 0);
+      this.view = view;
+      this.decorations = Decoration5.none;
+    }
   }, {
     decorations: (v) => v.decorations
   });
@@ -1697,28 +1856,21 @@ var commandMenuState = StateField3.define({
 // src/extensions/command/floating-menu.ts
 import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { addEventListener } from "@dxos/async";
+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 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();
-    }
     destroy() {
       this.cleanup?.();
       this.tag.remove();
@@ -1762,6 +1914,30 @@ var floatingMenu = (options = {}) => [
       }
       this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
     }
+    constructor(view) {
+      _define_property11(this, "view", void 0);
+      _define_property11(this, "tag", void 0);
+      _define_property11(this, "rafId", void 0);
+      _define_property11(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-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();
+    }
   }),
   EditorView9.theme({
     ".cm-ref-tag": {
@@ -1785,7 +1961,20 @@ 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 { Decoration as Decoration6, ViewPlugin as ViewPlugin8, keymap as keymap5 } from "@codemirror/view";
+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 typeahead = ({ onComplete } = {}) => {
   let hint2;
   const complete = (view) => {
@@ -1807,9 +1996,6 @@ var typeahead = ({ onComplete } = {}) => {
   };
   return [
     ViewPlugin8.fromClass(class {
-      constructor() {
-        this.decorations = Decoration6.none;
-      }
       update(update2) {
         const builder = new RangeSetBuilder4();
         const selection = update2.view.state.selection.main;
@@ -1827,6 +2013,9 @@ var typeahead = ({ onComplete } = {}) => {
         }
         this.decorations = builder.finish();
       }
+      constructor() {
+        _define_property12(this, "decorations", Decoration6.none);
+      }
     }, {
       decorations: (v) => v.decorations
     }),
@@ -1972,7 +2161,7 @@ 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 { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin9, hoverTooltip, keymap as keymap7 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -2073,6 +2262,19 @@ var selectionState = ({ getState, setState } = {}) => {
 };
 
 // src/extensions/comments.ts
+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 __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var setComments = StateEffect4.define();
 var setSelection = StateEffect4.define();
@@ -2117,15 +2319,15 @@ var commentsState = StateField4.define({
 });
 var styles2 = EditorView11.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({
@@ -2144,7 +2346,7 @@ var commentsDecorations = EditorView11.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 135,
+        L: 136,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2460,9 +2662,10 @@ var scrollThreadIntoView = (view, id, center = true) => {
 };
 var ExternalCommentSync = class {
   constructor(view, id, subscribe, getComments) {
-    this.destroy = () => {
+    _define_property13(this, "unsubscribe", void 0);
+    _define_property13(this, "destroy", () => {
       this.unsubscribe();
-    };
+    });
     const updateComments = () => {
       const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
@@ -2511,7 +2714,7 @@ var debugNodeLogger = (log9 = console.log) => {
 };
 
 // src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView12 } from "@codemirror/view";
+import { EditorView as EditorView12, dropCursor } from "@codemirror/view";
 var styles3 = EditorView12.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
@@ -2560,39 +2763,8 @@ 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 { EditorView as EditorView13 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // src/styles/markdown.ts
@@ -2645,7 +2817,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 +2825,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 +2839,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 +2901,7 @@ var defaultTheme = {
   * Tooltip.
   */
   ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
+    background: "var(--dx-modalSurface)"
   },
   ".cm-tooltip-below": {},
   /**
@@ -2749,7 +2921,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 +2976,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 +3018,52 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView14.theme({
+var editorGutter = EditorView13.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 = EditorView13.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) => mx2("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 StateEffect5, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView14 } 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,
+  EditorView14.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 +3077,7 @@ var defaultBasicOptions = {
   history: true,
   keymap: "standard",
   lineWrapping: true,
-  search: true
+  search: false
 };
 var keymaps = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -2886,7 +3092,7 @@ var createBasicExtensions = (_props) => {
     EditorView15.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
-        L: 100,
+        L: 101,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -3035,16 +3241,29 @@ 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;
+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 TagWidget = class extends WidgetType4 {
   toDOM() {
     const span = document.createElement("span");
     span.className = mx3("cm-tag", getHashColor(this._text).tag);
     span.textContent = this._text;
     return span;
   }
+  constructor(_text) {
+    super(), _define_property14(this, "_text", void 0), this._text = _text;
+  }
 };
 var tagMatcher = new MatchDecorator({
   regexp: /#(\w+)\W/g,
@@ -3054,12 +3273,13 @@ var tagMatcher = new MatchDecorator({
 });
 var hashtag = () => [
   ViewPlugin11.fromClass(class {
-    constructor(view) {
-      this.tags = tagMatcher.createDeco(view);
-    }
     update(update2) {
       this.tags = tagMatcher.updateDeco(update2, this.tags);
     }
+    constructor(view) {
+      _define_property14(this, "tags", void 0);
+      this.tags = tagMatcher.createDeco(view);
+    }
   }, {
     decorations: (instance) => instance.tags,
     provide: (plugin) => EditorView17.atomicRanges.of((view) => {
@@ -4294,7 +4514,7 @@ var processEditorPayload = (view, { type, data }) => {
 // src/extensions/markdown/bundle.ts
 import { completionKeymap as completionKeymap2 } 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 markdownLanguage3 } from "@codemirror/lang-markdown";
 import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { keymap as keymap10 } from "@codemirror/view";
@@ -4303,7 +4523,7 @@ import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 // src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Tag, styleTags, tags } from "@lezer/highlight";
 import { Table } from "@lezer/markdown";
 var markdownTags = {
   Blockquote: Tag.define(),
@@ -4499,7 +4719,8 @@ var createMarkdownExtensions = (options = {}) => {
       // Parser extensions.
       extensions: [
         // GFM provided by default.
-        markdownTagsExtensions
+        markdownTagsExtensions,
+        ...options.extensions ?? []
       ]
     }),
     // Custom styles.
@@ -4544,7 +4765,7 @@ 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 { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin13, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 
@@ -4696,6 +4917,19 @@ var getValidUrl = (str) => {
 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";
+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 image = (_options = {}) => {
   return [
     StateField8.define({
@@ -4762,9 +4996,6 @@ var preloadImage = (url) => {
   }
 };
 var ImageWidget = class extends WidgetType5 {
-  constructor(_url) {
-    super(), this._url = _url;
-  }
   eq(other) {
     return this._url === other._url;
   }
@@ -4779,6 +5010,9 @@ var ImageWidget = class extends WidgetType5 {
     }
     return img;
   }
+  constructor(_url) {
+    super(), _define_property15(this, "_url", void 0), this._url = _url;
+  }
 };
 
 // src/extensions/markdown/styles.ts
@@ -4908,6 +5142,19 @@ var formattingStyles = EditorView21.theme({
 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";
+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 table = (options = {}) => {
   return StateField9.define({
     create: (state) => update(state, options),
@@ -4939,7 +5186,8 @@ var update = (state, _options) => {
           break;
         }
         case "TableRow": {
-          (getTable().rows ??= []).push([]);
+          var _getTable;
+          ((_getTable = getTable()).rows ?? (_getTable.rows = [])).push([]);
           break;
         }
         case "TableCell": {
@@ -4970,9 +5218,6 @@ var update = (state, _options) => {
   return builder.finish();
 };
 var TableWidget = class extends WidgetType6 {
-  constructor(_table) {
-    super(), this._table = _table;
-  }
   eq(other) {
     return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
   }
@@ -5000,9 +5245,25 @@ var TableWidget = class extends WidgetType6 {
   ignoreEvent(e) {
     return !/^mouse/.test(e.type);
   }
+  constructor(_table) {
+    super(), _define_property16(this, "_table", void 0), this._table = _table;
+  }
 };
 
 // src/extensions/markdown/decorate.ts
+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 __dxlog_file9 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
@@ -5018,9 +5279,6 @@ var HorizontalRuleWidget = class extends WidgetType7 {
   }
 };
 var LinkButton = class extends WidgetType7 {
-  constructor(url, render) {
-    super(), this.url = url, this.render = render;
-  }
   eq(other) {
     return this.url === other.url;
   }
@@ -5032,11 +5290,11 @@ var LinkButton = class extends WidgetType7 {
     }, view);
     return el;
   }
+  constructor(url, render) {
+    super(), _define_property17(this, "url", void 0), _define_property17(this, "render", void 0), this.url = url, this.render = render;
+  }
 };
 var CheckboxWidget = class extends WidgetType7 {
-  constructor(_checked) {
-    super(), this._checked = _checked;
-  }
   eq(other) {
     return this._checked === other._checked;
   }
@@ -5076,11 +5334,11 @@ var CheckboxWidget = class extends WidgetType7 {
   ignoreEvent() {
     return false;
   }
+  constructor(_checked) {
+    super(), _define_property17(this, "_checked", void 0), this._checked = _checked;
+  }
 };
 var TextWidget = class extends WidgetType7 {
-  constructor(text, className) {
-    super(), this.text = text, this.className = className;
-  }
   toDOM() {
     const el = document.createElement("span");
     if (this.className) {
@@ -5089,6 +5347,9 @@ var TextWidget = class extends WidgetType7 {
     el.innerText = this.text;
     return el;
   }
+  constructor(text, className) {
+    super(), _define_property17(this, "text", void 0), _define_property17(this, "className", void 0), this.text = text, this.className = className;
+  }
 };
 var hide = Decoration11.replace({});
 var blockQuote = Decoration11.line({
@@ -5135,7 +5396,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 +5435,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",
@@ -5414,9 +5675,6 @@ var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin13.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
-      }
       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,6 +5701,12 @@ var decorateMarkdown = (options = {}) => {
       destroy() {
         this.clearUpdate();
       }
+      constructor(view) {
+        _define_property17(this, "deco", void 0);
+        _define_property17(this, "atomicDeco", void 0);
+        _define_property17(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),
@@ -5584,6 +5848,19 @@ 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_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 __dxlog_file11 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/outliner/tree.ts";
 var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) => {
   return {
@@ -5596,18 +5873,6 @@ var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) =>
   };
 };
 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;
-  }
   toJSON() {
     return itemToJSON(this);
   }
@@ -5657,6 +5922,21 @@ var Tree = class {
   lastDescendant(item) {
     return item.children.length > 0 ? this.lastDescendant(item.children.at(-1)) : item;
   }
+  constructor(node) {
+    _define_property18(this, "type", "root");
+    _define_property18(this, "index", -1);
+    _define_property18(this, "level", -1);
+    _define_property18(this, "node", void 0);
+    _define_property18(this, "lineRange", void 0);
+    _define_property18(this, "contentRange", void 0);
+    _define_property18(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);
@@ -6337,6 +6617,19 @@ var editor = () => [
 ];
 
 // src/extensions/outliner/outliner.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 outliner = (options = {}) => [
   // Commands.
   Prec4.highest(commands()),
@@ -6361,10 +6654,6 @@ var outliner = (options = {}) => [
 ];
 var decorations = () => [
   ViewPlugin15.fromClass(class {
-    constructor(view) {
-      this.decorations = Decoration12.none;
-      this.updateDecorations(view.state, view);
-    }
     update(update2) {
       const selectionChanged = !selectionEquals(update2.state.facet(selectionFacet), update2.startState.facet(selectionFacet));
       if (update2.focusChanged || update2.docChanged || update2.viewportChanged || update2.selectionSet || selectionChanged) {
@@ -6391,6 +6680,10 @@ var decorations = () => [
       }
       this.decorations = Decoration12.set(decorations2);
     }
+    constructor(view) {
+      _define_property19(this, "decorations", Decoration12.none);
+      this.updateDecorations(view.state, view);
+    }
   }, {
     decorations: (v) => v.decorations
   }),
@@ -6433,6 +6726,19 @@ 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";
+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 preview = (options = {}) => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
@@ -6499,9 +6805,6 @@ var buildDecorations3 = (state, options) => {
   return builder.finish();
 };
 var PreviewInlineWidget = class extends WidgetType8 {
-  constructor(_options, _link) {
-    super(), this._options = _options, this._link = _link;
-  }
   // override ignoreEvent() {
   //   return false;
   // }
@@ -6514,11 +6817,11 @@ var PreviewInlineWidget = class extends WidgetType8 {
     root.setAttribute("refId", this._link.ref);
     return root;
   }
-};
-var PreviewBlockWidget = class extends WidgetType8 {
   constructor(_options, _link) {
-    super(), this._options = _options, this._link = _link;
+    super(), _define_property20(this, "_options", void 0), _define_property20(this, "_link", void 0), this._options = _options, this._link = _link;
   }
+};
+var PreviewBlockWidget = class extends WidgetType8 {
   // override ignoreEvent() {
   //   return true;
   // }
@@ -6534,6 +6837,9 @@ var PreviewBlockWidget = class extends WidgetType8 {
   destroy() {
     this._options.removeBlockContainer?.(this._link);
   }
+  constructor(_options, _link) {
+    super(), _define_property20(this, "_options", void 0), _define_property20(this, "_link", void 0), this._options = _options, this._link = _link;
+  }
 };
 
 // src/extensions/typewriter.ts
@@ -6782,23 +7088,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 +7127,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 +7149,6 @@ var createBlockActions = (value, getView, blankLine) => Object.entries({
         insertTable(view);
         break;
     }
-  }, {
-    checked,
-    ...type === "table" && {
-      disabled: !!blankLine
-    },
-    icon
   });
 });
 var createBlocks = (state, getView) => {
@@ -6873,7 +7188,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 +7202,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 +7242,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 +7251,7 @@ var createHeadingActions = (getView) => Object.entries({
       }
     ],
     icon
-  });
+  }, () => setHeading(level)(getView()));
 });
 var computeHeadingValue = (state) => {
   const blockType = state ? state.blockType : "paragraph";
@@ -6966,10 +7281,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 +7310,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 +7324,6 @@ var createListActions = (value, getView) => Object.entries(listStyles).map(([lis
     } else {
       addList(listType)(view);
     }
-  }, {
-    checked,
-    icon
   });
 });
 var createLists = (state, getView) => {
@@ -7035,10 +7350,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 +7379,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 +7388,7 @@ var createViewModeActions = (value, onViewModeChange) => Object.entries({
     ],
     checked,
     icon
-  });
+  }, () => onViewModeChange(viewMode));
 });
 var createViewMode = (state, onViewModeChange) => {
   const value = state.viewMode ?? "source";
@@ -7098,61 +7413,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 +7513,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 +7530,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,7 +7779,7 @@ 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 = {
@@ -7547,7 +7863,7 @@ var PreviewProvider = ({ children, onLookup }) => {
 // 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 = {