@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/dist/lib/browser/index.mjs

@@ -69,9 +69,7 @@ var annotationMark = Decoration.mark({
 var annotations = ({ match } = {}) => {
   return [
     ViewPlugin.fromClass(class {
-      constructor() {
-        this.decorations = Decoration.none;
-      }
+      decorations = Decoration.none;
       update(update2) {
         const builder = new RangeSetBuilder();
         if (match) {
@@ -143,17 +141,174 @@ 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
+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 converter = singleValueFacet(defaultCursorConverter);
+  static 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 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 +320,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)
@@ -332,6 +487,9 @@ var charPath = (textPath, candidatePath) => {
 
 // src/extensions/automerge/sync.ts
 var Syncer = class {
+  _handle;
+  _state;
+  _pending;
   // prettier-ignore
   constructor(_handle, _state) {
     this._handle = _handle;
@@ -374,169 +532,6 @@ var Syncer = class {
   }
 };
 
-// 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;
-    };
-  }
-};
-
-// 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/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/automerge.ts
 var automerge = (accessor) => {
   const syncState = StateField.define({
@@ -575,6 +570,7 @@ var automerge = (accessor) => {
     syncState,
     // Reconcile external updates.
     ViewPlugin2.fromClass(class {
+      _view;
       constructor(_view) {
         this._view = _view;
         this._handleChange = () => {
@@ -585,6 +581,7 @@ var automerge = (accessor) => {
       destroy() {
         accessor.handle.removeListener("change", this._handleChange);
       }
+      _handleChange;
     }),
     // Reconcile local updates.
     EditorView2.updateListener.of(({ view, changes }) => {
@@ -623,12 +620,16 @@ var awareness = (provider = dummyProvider) => {
   ];
 };
 var RemoteSelectionsDecorator = class {
+  _ctx = new Context(void 0, {
+    F: __dxlog_file3,
+    L: 80
+  });
+  _cursorConverter;
+  _provider;
+  _lastAnchor;
+  _lastHead;
+  decorations = RangeSet.of([]);
   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();
@@ -736,6 +737,8 @@ var RemoteSelectionsDecorator = class {
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
+  _name;
+  _color;
   constructor(_name, _color) {
     super(), this._name = _name, this._color = _color;
   }
@@ -835,9 +838,16 @@ import { log as log3 } from "@dxos/log";
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
+  _remoteStates = /* @__PURE__ */ new Map();
+  _space;
+  _channel;
+  _peerId;
+  _info;
+  _ctx;
+  _postTask;
+  _localState;
+  remoteStateChange = new Event2();
   constructor(params) {
-    this._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
     this._space = params.space;
     this._channel = params.channel;
     this._peerId = params.peerId;
@@ -1033,6 +1043,18 @@ var blast = (options = defaultOptions) => {
   ];
 };
 var Blaster = class {
+  _node;
+  _options;
+  _effect;
+  _canvas;
+  _ctx;
+  _running;
+  _lastTime;
+  _shakeTime;
+  _shakeTimeMax;
+  _particles;
+  _particlePointer;
+  _lastPoint;
   constructor(_node, _options) {
     this._node = _node;
     this._options = _options;
@@ -1137,6 +1159,8 @@ var Blaster = class {
     this.drawParticles();
     requestAnimationFrame(this.loop.bind(this));
   }
+  shake;
+  spawn;
   drawParticles() {
     for (let i = this._particles.length; i--; i > 0) {
       const particle = this._particles[i];
@@ -1151,6 +1175,7 @@ var Blaster = class {
   }
 };
 var Effect = class {
+  _options;
   constructor(_options) {
     this._options = _options;
   }
@@ -1356,9 +1381,8 @@ import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin4, WidgetType as WidgetType2 } from "@codemirror/view";
 var hint = ({ delay = 3e3, onHint }) => {
   return ViewPlugin4.fromClass(class {
-    constructor() {
-      this.decorations = Decoration3.none;
-    }
+    decorations = Decoration3.none;
+    timeout;
     update(update2) {
       if (this.timeout) {
         clearTimeout(this.timeout);
@@ -1397,6 +1421,7 @@ var hint = ({ delay = 3e3, onHint }) => {
   });
 };
 var Hint = class extends WidgetType2 {
+  content;
   constructor(content) {
     super(), this.content = content;
   }
@@ -1452,16 +1477,15 @@ 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";
 var placeholder = ({ delay = 3e3, content }) => {
   const plugin = ViewPlugin5.fromClass(class {
-    constructor() {
-      this.decorations = Decoration4.none;
-    }
+    decorations = Decoration4.none;
+    timeout;
     update(update2) {
       if (this.timeout) {
         window.clearTimeout(this.timeout);
@@ -1503,6 +1527,7 @@ var placeholder = ({ delay = 3e3, content }) => {
   ] : plugin;
 };
 var Placeholder = class extends WidgetType3 {
+  content;
   constructor(content) {
     super(), this.content = content;
   }
@@ -1540,6 +1565,8 @@ var Placeholder = class extends WidgetType3 {
 // src/extensions/command/command-menu.ts
 var commandMenu = (options) => {
   const commandMenuPlugin = ViewPlugin6.fromClass(class {
+    view;
+    decorations;
     constructor(view) {
       this.view = view;
       this.decorations = Decoration5.none;
@@ -1699,6 +1726,10 @@ import { EditorView as EditorView9, ViewPlugin as ViewPlugin7 } from "@codemirro
 import { addEventListener } from "@dxos/async";
 var floatingMenu = (options = {}) => [
   ViewPlugin7.fromClass(class {
+    view;
+    tag;
+    rafId;
+    cleanup;
     constructor(view) {
       this.view = view;
       const container = view.scrollDOM;
@@ -1785,7 +1816,7 @@ 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";
 var typeahead = ({ onComplete } = {}) => {
   let hint2;
   const complete = (view) => {
@@ -1807,9 +1838,7 @@ var typeahead = ({ onComplete } = {}) => {
   };
   return [
     ViewPlugin8.fromClass(class {
-      constructor() {
-        this.decorations = Decoration6.none;
-      }
+      decorations = Decoration6.none;
       update(update2) {
         const builder = new RangeSetBuilder4();
         const selection = update2.view.state.selection.main;
@@ -1972,7 +2001,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";
@@ -2144,7 +2173,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)
       });
@@ -2459,10 +2488,8 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
 };
 var ExternalCommentSync = class {
+  unsubscribe;
   constructor(view, id, subscribe, getComments) {
-    this.destroy = () => {
-      this.unsubscribe();
-    };
     const updateComments = () => {
       const comments2 = getComments();
       if (id === view.state.facet(documentId)) {
@@ -2476,6 +2503,9 @@ var ExternalCommentSync = class {
     };
     this.unsubscribe = subscribe(updateComments);
   }
+  destroy = () => {
+    this.unsubscribe();
+  };
 };
 var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin9.fromClass(class {
   constructor(view) {
@@ -2511,7 +2541,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 +2590,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
@@ -2659,18 +2658,17 @@ var defaultTheme = {
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers": {
     paddingRight: "4px",
-    borderRight: "1px solid var(--dx-separator)"
+    borderRight: "1px solid var(--dx-subduedSeparator)"
   },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-    minWidth: "40px",
-    alignContent: "center"
+    minWidth: "40px"
   },
   /**
-  * Height is set to match the corresponding line.
+  * Height is set to match the corresponding line (which may have wrapped).
   */
   ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "12px"
+    fontSize: "12px",
+    lineHeight: "24px"
   },
   /**
   * Line.
@@ -2730,7 +2728,7 @@ var defaultTheme = {
   * Tooltip.
   */
   ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
+    background: "var(--dx-modalSurface)"
   },
   ".cm-tooltip-below": {},
   /**
@@ -2750,7 +2748,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",
@@ -2804,7 +2803,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)"
@@ -2846,13 +2845,13 @@ var editorSlots = {
     className: editorWidth
   }
 };
-var editorGutter = EditorView14.theme({
+var editorGutter = EditorView13.theme({
   ".cm-gutters": {
     background: "var(--dx-baseSurface)",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView14.theme({
+var editorMonospace = EditorView13.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -2860,6 +2859,37 @@ var editorMonospace = EditorView14.theme({
 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");
 
+// 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";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
@@ -2872,7 +2902,7 @@ var defaultBasicOptions = {
   history: true,
   keymap: "standard",
   lineWrapping: true,
-  search: true
+  search: false
 };
 var keymaps = {
   // https://codemirror.net/docs/ref/#commands.standardKeymap
@@ -2887,7 +2917,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)
       });
@@ -3037,6 +3067,7 @@ var folding = (_props = {}) => [
 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 {
+  _text;
   constructor(_text) {
     super(), this._text = _text;
   }
@@ -3055,6 +3086,7 @@ var tagMatcher = new MatchDecorator({
 });
 var hashtag = () => [
   ViewPlugin11.fromClass(class {
+    tags;
     constructor(view) {
       this.tags = tagMatcher.createDeco(view);
     }
@@ -4295,7 +4327,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";
@@ -4304,7 +4336,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(),
@@ -4545,7 +4577,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";
 
@@ -4763,6 +4795,7 @@ var preloadImage = (url) => {
   }
 };
 var ImageWidget = class extends WidgetType5 {
+  _url;
   constructor(_url) {
     super(), this._url = _url;
   }
@@ -4971,6 +5004,7 @@ var update = (state, _options) => {
   return builder.finish();
 };
 var TableWidget = class extends WidgetType6 {
+  _table;
   constructor(_table) {
     super(), this._table = _table;
   }
@@ -5019,6 +5053,8 @@ var HorizontalRuleWidget = class extends WidgetType7 {
   }
 };
 var LinkButton = class extends WidgetType7 {
+  url;
+  render;
   constructor(url, render) {
     super(), this.url = url, this.render = render;
   }
@@ -5035,6 +5071,7 @@ var LinkButton = class extends WidgetType7 {
   }
 };
 var CheckboxWidget = class extends WidgetType7 {
+  _checked;
   constructor(_checked) {
     super(), this._checked = _checked;
   }
@@ -5079,6 +5116,8 @@ var CheckboxWidget = class extends WidgetType7 {
   }
 };
 var TextWidget = class extends WidgetType7 {
+  text;
+  className;
   constructor(text, className) {
     super(), this.text = text, this.className = className;
   }
@@ -5136,7 +5175,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",
@@ -5175,7 +5214,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",
@@ -5415,6 +5454,9 @@ var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin13.fromClass(class {
+      deco;
+      atomicDeco;
+      pendingUpdate;
       constructor(view) {
         ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
       }
@@ -5597,11 +5639,14 @@ var itemToJSON = ({ type, index, level, lineRange, contentRange, children }) =>
   };
 };
 var Tree = class {
+  type = "root";
+  index = -1;
+  level = -1;
+  node;
+  lineRange;
+  contentRange;
+  children = [];
   constructor(node) {
-    this.type = "root";
-    this.index = -1;
-    this.level = -1;
-    this.children = [];
     this.node = node;
     this.lineRange = {
       from: node.from,
@@ -6362,8 +6407,8 @@ var outliner = (options = {}) => [
 ];
 var decorations = () => [
   ViewPlugin15.fromClass(class {
+    decorations = Decoration12.none;
     constructor(view) {
-      this.decorations = Decoration12.none;
       this.updateDecorations(view.state, view);
     }
     update(update2) {
@@ -6500,6 +6545,8 @@ var buildDecorations3 = (state, options) => {
   return builder.finish();
 };
 var PreviewInlineWidget = class extends WidgetType8 {
+  _options;
+  _link;
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -6517,6 +6564,8 @@ var PreviewInlineWidget = class extends WidgetType8 {
   }
 };
 var PreviewBlockWidget = class extends WidgetType8 {
+  _options;
+  _link;
   constructor(_options, _link) {
     super(), this._options = _options, this._link = _link;
   }
@@ -7464,7 +7513,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 = {
@@ -7548,7 +7597,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 = {