@dxos/react-ui-editor 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/dist/lib/node/index.cjs

@@ -64,6 +64,7 @@ __export(node_exports, {
   createDataExtensions: () => createDataExtensions,
   createEditorAction: () => createEditorAction,
   createEditorActionGroup: () => createEditorActionGroup,
+  createEditorStateStore: () => createEditorStateStore,
   createEditorStateTransaction: () => createEditorStateTransaction,
   createElement: () => createElement,
   createExternalCommentSync: () => createExternalCommentSync,
@@ -118,7 +119,7 @@ __export(node_exports, {
   setStyle: () => setStyle,
   singleValueFacet: () => singleValueFacet,
   stackItemContentEditorClassNames: () => stackItemContentEditorClassNames,
-  stackItemContentToolbarClassNames: () => stackItemContentToolbarClassNames,
+  stackItemContentToolbarClassNames: () => stackItemContentToolbarClassNames2,
   table: () => table,
   tags: () => import_highlight.tags,
   textRange: () => textRange,
@@ -196,90 +197,95 @@ var import_state8 = require("@codemirror/state");
 var import_view9 = require("@codemirror/view");
 var import_state9 = require("@codemirror/state");
 var import_view10 = require("@codemirror/view");
-var import_commands = require("@codemirror/commands");
-var import_state10 = require("@codemirror/state");
 var import_view11 = require("@codemirror/view");
+var import_language = require("@codemirror/language");
+var import_state10 = require("@codemirror/state");
+var import_view12 = require("@codemirror/view");
+var import_commands = require("@codemirror/commands");
+var import_state11 = require("@codemirror/state");
+var import_view13 = require("@codemirror/view");
 var import_lodash3 = __toESM(require("lodash.sortby"));
 var import_react4 = require("react");
 var import_async3 = require("@dxos/async");
 var import_log4 = require("@dxos/log");
 var import_util2 = require("@dxos/util");
-var import_state11 = require("@codemirror/state");
-var import_view12 = require("@codemirror/view");
-var import_async4 = require("@dxos/async");
-var import_language = require("@codemirror/language");
 var import_state12 = require("@codemirror/state");
-var import_view13 = require("@codemirror/view");
+var import_view14 = require("@codemirror/view");
+var import_async4 = require("@dxos/async");
+var import_invariant3 = require("@dxos/invariant");
+var import_util3 = require("@dxos/util");
+var import_language2 = require("@codemirror/language");
+var import_state13 = require("@codemirror/state");
+var import_view15 = require("@codemirror/view");
 var import_autocomplete2 = require("@codemirror/autocomplete");
 var import_commands2 = require("@codemirror/commands");
-var import_language2 = require("@codemirror/language");
+var import_language3 = require("@codemirror/language");
 var import_search = require("@codemirror/search");
-var import_state13 = require("@codemirror/state");
+var import_state14 = require("@codemirror/state");
 var import_theme_one_dark = require("@codemirror/theme-one-dark");
-var import_view14 = require("@codemirror/view");
+var import_view16 = require("@codemirror/view");
 var import_lodash4 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash5 = __toESM(require("lodash.merge"));
 var import_display_name = require("@dxos/display-name");
 var import_log5 = require("@dxos/log");
-var import_util3 = require("@dxos/util");
-var import_state14 = require("@codemirror/state");
-var import_view15 = require("@codemirror/view");
-var import_language3 = require("@codemirror/language");
-var import_view16 = require("@codemirror/view");
-var import_react5 = __toESM(require("react"));
-var import_async5 = require("@dxos/async");
-var import_react_ui3 = require("@dxos/react-ui");
+var import_util4 = require("@dxos/util");
+var import_state15 = require("@codemirror/state");
 var import_view17 = require("@codemirror/view");
-var import_autocomplete3 = require("@codemirror/autocomplete");
 var import_language4 = require("@codemirror/language");
-var import_state15 = require("@codemirror/state");
 var import_view18 = require("@codemirror/view");
+var import_react5 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_view19 = require("@codemirror/view");
+var import_autocomplete3 = require("@codemirror/autocomplete");
+var import_language5 = require("@codemirror/language");
+var import_state16 = require("@codemirror/state");
+var import_view20 = require("@codemirror/view");
 var import_react6 = require("react");
 var import_autocomplete4 = require("@codemirror/autocomplete");
 var import_commands3 = require("@codemirror/commands");
 var import_lang_markdown2 = require("@codemirror/lang-markdown");
-var import_language5 = require("@codemirror/language");
+var import_language6 = require("@codemirror/language");
 var import_language_data = require("@codemirror/language-data");
 var import_lint = require("@codemirror/lint");
-var import_view19 = require("@codemirror/view");
+var import_view21 = require("@codemirror/view");
 var import_lang_markdown3 = require("@codemirror/lang-markdown");
-var import_language6 = require("@codemirror/language");
+var import_language7 = require("@codemirror/language");
 var import_highlight2 = require("@lezer/highlight");
 var import_markdown = require("@lezer/markdown");
-var import_language7 = require("@codemirror/language");
-var import_state16 = require("@codemirror/state");
 var import_language8 = require("@codemirror/language");
 var import_state17 = require("@codemirror/state");
-var import_view20 = require("@codemirror/view");
-var import_invariant3 = require("@dxos/invariant");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
 var import_state18 = require("@codemirror/state");
-var import_view21 = require("@codemirror/view");
+var import_view22 = require("@codemirror/view");
+var import_invariant4 = require("@dxos/invariant");
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_language10 = require("@codemirror/language");
 var import_state19 = require("@codemirror/state");
-var import_view22 = require("@codemirror/view");
 var import_view23 = require("@codemirror/view");
 var import_language11 = require("@codemirror/language");
 var import_state20 = require("@codemirror/state");
 var import_view24 = require("@codemirror/view");
-var import_language12 = require("@codemirror/language");
 var import_view25 = require("@codemirror/view");
+var import_language12 = require("@codemirror/language");
+var import_state21 = require("@codemirror/state");
+var import_view26 = require("@codemirror/view");
+var import_language13 = require("@codemirror/language");
+var import_view27 = require("@codemirror/view");
 var import_react_ui_theme8 = require("@dxos/react-ui-theme");
 var import_autocomplete5 = require("@codemirror/autocomplete");
 var import_log6 = require("@dxos/log");
-var import_view26 = require("@codemirror/view");
+var import_view28 = require("@codemirror/view");
 var import_codemirror_vim = require("@replit/codemirror-vim");
 var import_codemirror_vscode_keymap = require("@replit/codemirror-vscode-keymap");
 var import_echo_schema = require("@dxos/echo-schema");
-var import_view27 = require("@codemirror/view");
+var import_view29 = require("@codemirror/view");
 var import_react7 = require("react");
-var import_state21 = require("@codemirror/state");
-var import_view28 = require("@codemirror/view");
+var import_state22 = require("@codemirror/state");
+var import_view30 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react8 = require("react");
 var import_log7 = require("@dxos/log");
-var import_util4 = require("@dxos/util");
+var import_util5 = require("@dxos/util");
 var translationKey = "react-ui-editor";
 var translations_default = [
   {
@@ -562,7 +568,6 @@ var createViewMode = (state) => {
     ]
   };
 };
-var stackItemContentEditorClassNames = (role) => (0, import_react_ui_theme2.mx)("dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface", role === "article" ? "min-bs-0" : "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24");
 var stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme2.mx)("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
 var createToolbar = ({ state, customActions, ...features }) => {
   const nodes = [];
@@ -699,6 +704,10 @@ var defaultTheme = {
     background: "transparent"
   },
   ".cm-gutter": {},
+  ".cm-gutter.cm-lineNumbers": {
+    paddingRight: "4px",
+    borderRight: "1px solid var(--dx-separator)"
+  },
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
     minWidth: "40px",
     alignContent: "center"
@@ -708,7 +717,7 @@ var defaultTheme = {
   */
   ".cm-gutterElement": {
     alignItems: "center",
-    fontSize: "16px"
+    fontSize: "12px"
   },
   /**
   * Line.
@@ -754,6 +763,7 @@ var defaultTheme = {
   ".cm-link": {
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
+    textDecorationColor: "var(--dx-separator)",
     textUnderlineOffset: "2px",
     borderRadius: ".125rem"
   },
@@ -880,6 +890,8 @@ var editorMonospace = import_view2.EditorView.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) => (0, import_react_ui_theme3.mx)("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 stackItemContentToolbarClassNames2 = (role) => (0, import_react_ui_theme3.mx)("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
 var singleValueFacet = (defaultValue) => import_state3.Facet.define({
   // Called immediately.
   combine: (providers) => {
@@ -966,7 +978,7 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    import_log.log.info("changes", {
+    (0, import_log.log)("changes", {
       changes
     }, {
       F: __dxlog_file,
@@ -2039,18 +2051,19 @@ var commandState = import_state9.StateField.define({
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
                   dom.style.width = `${widthWithoutPadding}px`;
                 }
-                options.onRender(dom, (action) => {
+                options.onRenderDialog(dom, (action) => {
                   view2.dispatch({
                     effects: closeEffect.of(null)
                   });
                   if (action?.insert?.length) {
+                    const text = action.insert + "\n";
                     view2.dispatch({
                       changes: {
                         from: pos,
-                        insert: action.insert
+                        insert: text
                       },
                       selection: {
-                        anchor: pos + action.insert.length
+                        anchor: pos + text.length
                       }
                     });
                   }
@@ -2174,33 +2187,183 @@ var hintViewPlugin = ({ onHint }) => import_view9.ViewPlugin.fromClass(class {
     import_view9.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view9.Decoration.none)
   ]
 });
+var floatingMenu = (options) => import_view11.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.rafId = null;
+    this.view = view;
+    const container = view.scrollDOM;
+    if (getComputedStyle(container).position === "static") {
+      container.style.position = "relative";
+    }
+    this.button = document.createElement("div");
+    this.button.style.position = "absolute";
+    this.button.style.zIndex = "10";
+    this.button.style.display = "none";
+    options.onRenderMenu(this.button, () => {
+      openCommand(view);
+    });
+    container.appendChild(this.button);
+    container.addEventListener("scroll", this.scheduleUpdate);
+    this.scheduleUpdate();
+  }
+  update(update2) {
+    if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
+      this.button.style.display = "none";
+    } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
+      this.button.style.display = "block";
+    } else if (update2.selectionSet || update2.viewportChanged || update2.docChanged || update2.geometryChanged) {
+      this.scheduleUpdate();
+    }
+  }
+  scheduleUpdate() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
+  }
+  updateButtonPosition() {
+    const pos = this.view.state.selection.main.head;
+    const lineBlock = this.view.lineBlockAt(pos);
+    const domInfo = this.view.domAtPos(lineBlock.from);
+    let node = domInfo.node;
+    while (node && !(node instanceof HTMLElement)) {
+      node = node.parentNode;
+    }
+    if (!node) {
+      this.button.style.display = "none";
+      return;
+    }
+    const lineRect = node.getBoundingClientRect();
+    const containerRect = this.view.scrollDOM.getBoundingClientRect();
+    const offsetTop = lineRect.top - containerRect.top + this.view.scrollDOM.scrollTop;
+    const offsetLeft = this.view.scrollDOM.clientWidth + this.view.scrollDOM.scrollLeft - lineRect.x;
+    this.button.style.top = `${offsetTop}px`;
+    this.button.style.left = `${offsetLeft}px`;
+    this.button.style.display = "block";
+  }
+  destroy() {
+    this.button.remove();
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+    }
+  }
+});
+var preview = (options) => {
+  return [
+    import_state10.StateField.define({
+      create: (state) => buildDecorations(state, options),
+      update: (_, tr) => buildDecorations(tr.state, options),
+      // TODO(burdon): Make atomic.
+      provide: (field) => import_view12.EditorView.decorations.from(field)
+    })
+  ];
+};
+var buildDecorations = (state, options) => {
+  const builder = new import_state10.RangeSetBuilder();
+  (0, import_language.syntaxTree)(state).iterate({
+    enter: (node) => {
+      if (node.name === "Link") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          builder.add(node.from, node.to, import_view12.Decoration.replace({
+            block: true,
+            widget: new PreviewWidget(options.onRenderPreview, url, text)
+          }));
+        }
+      }
+    }
+  });
+  return builder.finish();
+};
+var PreviewWidget = class extends import_view12.WidgetType {
+  constructor(_onRenderPreview, _url, _text) {
+    super();
+    this._onRenderPreview = _onRenderPreview;
+    this._url = _url;
+    this._text = _text;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const root = document.createElement("div");
+    root.classList.add("cm-preview");
+    this._onRenderPreview(root, {
+      url: this._url,
+      text: this._text
+    });
+    return root;
+  }
+};
 var command = (options) => {
   return [
     commandConfig.of(options),
     commandState,
     import_view8.keymap.of(commandKeyBindings),
+    preview(options),
+    floatingMenu(options),
     hintViewPlugin(options),
     import_view8.EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
+    }),
+    import_view8.EditorView.theme({
+      ".cm-tooltip": {
+        background: "transparent"
+      },
+      ".cm-preview": {
+        marginLeft: "-1rem",
+        marginRight: "-1rem",
+        padding: "1rem",
+        borderRadius: "1rem",
+        background: "var(--dx-modalSurface)",
+        border: "1px solid var(--dx-separator)"
+      }
     })
   ];
 };
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/selection.ts";
 var documentId = singleValueFacet();
 var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? import_view12.EditorView.scrollIntoView(scrollTo, {
+    effects: scrollTo ? import_view14.EditorView.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
-    annotations: import_state11.Transaction.userEvent.of(stateRestoreAnnotation)
+    annotations: import_state12.Transaction.userEvent.of(stateRestoreAnnotation)
   };
 };
-var selectionState = (state = {}) => {
-  const setState = (id, selectionState2) => {
-    state[id] = selectionState2;
-  };
+var createEditorStateStore = (keyPrefix) => ({
+  getState: (id) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 47,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : void 0;
+  },
+  setState: (id, state) => {
+    (0, import_invariant3.invariant)(id, void 0, {
+      F: __dxlog_file6,
+      L: 53,
+      S: void 0,
+      A: [
+        "id",
+        ""
+      ]
+    });
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  }
+});
+var selectionState = ({ getState, setState } = {}) => {
   const setStateDebounced = (0, import_async4.debounce)(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
@@ -2209,46 +2372,48 @@ var selectionState = (state = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    import_view12.EditorView.updateListener.of(({ view, transactions }) => {
+    import_view14.EditorView.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
-      const { scrollTop } = view.scrollDOM;
-      const pos = view.posAtCoords({
-        x: 0,
-        y: scrollTop
-      });
-      if (pos !== null) {
-        const { anchor, head } = view.state.selection.main;
-        setStateDebounced(id, {
-          scrollTo: pos,
-          selection: {
-            anchor,
-            head
-          }
+      if (setState) {
+        const { scrollTop } = view.scrollDOM;
+        const pos = view.posAtCoords({
+          x: 0,
+          y: scrollTop
         });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: pos,
+            selection: {
+              anchor,
+              head
+            }
+          });
+        }
       }
     }),
-    import_view12.keymap.of([
+    getState && import_view14.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
-          const selection = state[view.state.facet(documentId)];
-          if (selection) {
-            view.dispatch(createEditorStateTransaction(selection));
+          const state = getState(view.state.facet(documentId));
+          if (state) {
+            view.dispatch(createEditorStateTransaction(state));
           }
           return true;
         }
       }
     ])
-  ];
+  ].filter(import_util3.isNotFalsy);
 };
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var setComments = import_state10.StateEffect.define();
-var setSelection = import_state10.StateEffect.define();
-var setCommentState = import_state10.StateEffect.define();
-var commentsState = import_state10.StateField.define({
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var setComments = import_state11.StateEffect.define();
+var setSelection = import_state11.StateEffect.define();
+var setCommentState = import_state11.StateEffect.define();
+var commentsState = import_state11.StateField.define({
   create: (state) => ({
     id: state.facet(documentId),
     comments: [],
@@ -2286,7 +2451,7 @@ var commentsState = import_state10.StateField.define({
     return value;
   }
 });
-var styles3 = import_view11.EditorView.theme({
+var styles3 = import_view13.EditorView.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2299,14 +2464,14 @@ var styles3 = import_view11.EditorView.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => import_view11.Decoration.mark({
+var createCommentMark = (id, isCurrent) => import_view13.Decoration.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = import_view11.EditorView.decorations.compute([
+var commentsDecorations = import_view13.EditorView.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2314,7 +2479,7 @@ var commentsDecorations = import_view11.EditorView.decorations.compute([
     const range = comment.range;
     if (!range) {
       import_log4.log.warn("Invalid range:", range, {
-        F: __dxlog_file6,
+        F: __dxlog_file7,
         L: 144,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2326,10 +2491,10 @@ var commentsDecorations = import_view11.EditorView.decorations.compute([
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
   }).filter(import_util2.isNonNullable);
-  return import_view11.Decoration.set(decorations);
+  return import_view13.Decoration.set(decorations);
 });
-var commentClickedEffect = import_state10.StateEffect.define();
-var handleCommentClick = import_view11.EditorView.domEventHandlers({
+var commentClickedEffect = import_state11.StateEffect.define();
+var handleCommentClick = import_view13.EditorView.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2368,7 +2533,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    import_view11.EditorView.domEventHandlers({
+    import_view13.EditorView.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2390,7 +2555,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    import_view11.EditorView.updateListener.of((update2) => {
+    import_view13.EditorView.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2446,7 +2611,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = import_state10.StateEffect.define({
+var restoreCommentEffect = import_state11.StateEffect.define({
   map: mapTrackedComment
 });
 var createComment2 = (view) => {
@@ -2491,7 +2656,7 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && import_view11.keymap.of([
+    options.onCreate && import_view13.keymap.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment2)
@@ -2501,7 +2666,7 @@ var comments = (options = {}) => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover && (0, import_view11.hoverTooltip)((view, pos) => {
+    options.onHover && (0, import_view13.hoverTooltip)((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -2530,7 +2695,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    import_view11.EditorView.updateListener.of(({ view, state, changes }) => {
+    import_view13.EditorView.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2562,7 +2727,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    import_view11.EditorView.updateListener.of(({ view, state }) => {
+    import_view13.EditorView.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2616,7 +2781,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? import_view11.EditorView.scrollIntoView(range.from, center ? {
+          needsScroll ? import_view13.EditorView.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2662,13 +2827,13 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => import_view11.ViewPlugin.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => import_view13.ViewPlugin.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
 var useCommentState = (state) => {
-  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
+  return (0, import_react4.useMemo)(() => import_view13.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       state.comment = selectionOverlapsComment(update2.state);
       state.selection = hasActiveSelection(update2.state);
@@ -2692,7 +2857,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 var useCommentClickListener = (onCommentClick) => {
-  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
+  return (0, import_react4.useMemo)(() => import_view13.EditorView.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       transaction.effects.forEach((effect) => {
         if (effect.is(commentClickedEffect)) {
@@ -2705,15 +2870,15 @@ var useCommentClickListener = (onCommentClick) => {
   ]);
 };
 var debugNodeLogger = (log8 = console.log) => {
-  const logTokens = (state) => (0, import_language.syntaxTree)(state).iterate({
+  const logTokens = (state) => (0, import_language2.syntaxTree)(state).iterate({
     enter: (node) => log8(node.type)
   });
-  return import_state12.StateField.define({
+  return import_state13.StateField.define({
     create: (state) => logTokens(state),
     update: (_, tr) => logTokens(tr.state)
   });
 };
-var styles4 = import_view13.EditorView.theme({
+var styles4 = import_view15.EditorView.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2726,8 +2891,8 @@ var styles4 = import_view13.EditorView.theme({
 var dropFile = (options = {}) => {
   return [
     styles4,
-    (0, import_view13.dropCursor)(),
-    import_view13.EditorView.domEventHandlers({
+    (0, import_view15.dropCursor)(),
+    import_view15.EditorView.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2746,8 +2911,8 @@ var dropFile = (options = {}) => {
     })
   ];
 };
-var focusEffect = import_state14.StateEffect.define();
-var focusField = import_state14.StateField.define({
+var focusEffect = import_state15.StateEffect.define();
+var focusField = import_state15.StateField.define({
   create: () => false,
   update: (value, tr) => {
     for (const effect of tr.effects) {
@@ -2760,7 +2925,7 @@ var focusField = import_state14.StateField.define({
 });
 var focus = [
   focusField,
-  import_view15.EditorView.domEventHandlers({
+  import_view17.EditorView.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2773,14 +2938,13 @@ var focus = [
     }
   })
 ];
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
-var preventNewline = import_state13.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var preventNewline = import_state14.EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
-  editable: true,
   focus: true,
   history: true,
   keymap: "standard",
@@ -2797,35 +2961,33 @@ var createBasicExtensions = (_props) => {
   const props = (0, import_lodash4.default)({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    import_view14.EditorView.exceptionSink.of((err) => {
+    import_view16.EditorView.exceptionSink.of((err) => {
       import_log5.log.catch(err, void 0, {
-        F: __dxlog_file7,
+        F: __dxlog_file8,
         L: 96,
         S: void 0,
         C: (f, a) => f(...a)
       });
     }),
-    props.allowMultipleSelections && import_state13.EditorState.allowMultipleSelections.of(true),
-    props.bracketMatching && (0, import_language2.bracketMatching)(),
+    props.allowMultipleSelections && import_state14.EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && (0, import_language3.bracketMatching)(),
     props.closeBrackets && (0, import_autocomplete2.closeBrackets)(),
-    props.dropCursor && (0, import_view14.dropCursor)(),
-    props.drawSelection && (0, import_view14.drawSelection)({
+    props.dropCursor && (0, import_view16.dropCursor)(),
+    props.drawSelection && (0, import_view16.drawSelection)({
       cursorBlinkRate: 1200
     }),
+    props.editable !== void 0 && import_view16.EditorView.editable.of(props.editable),
     props.focus && focus,
-    props.highlightActiveLine && (0, import_view14.highlightActiveLine)(),
+    props.highlightActiveLine && (0, import_view16.highlightActiveLine)(),
     props.history && (0, import_commands2.history)(),
-    props.lineNumbers && (0, import_view14.lineNumbers)(),
-    props.lineWrapping && import_view14.EditorView.lineWrapping,
-    props.placeholder && (0, import_view14.placeholder)(props.placeholder),
-    props.readonly && [
-      import_state13.EditorState.readOnly.of(true),
-      import_view14.EditorView.editable.of(false)
-    ],
-    props.scrollPastEnd && (0, import_view14.scrollPastEnd)(),
-    props.tabSize && import_state13.EditorState.tabSize.of(props.tabSize),
+    props.lineNumbers && (0, import_view16.lineNumbers)(),
+    props.lineWrapping && import_view16.EditorView.lineWrapping,
+    props.placeholder && (0, import_view16.placeholder)(props.placeholder),
+    props.readOnly !== void 0 && import_state14.EditorState.readOnly.of(props.readOnly),
+    props.scrollPastEnd && (0, import_view16.scrollPastEnd)(),
+    props.tabSize && import_state14.EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    import_view14.keymap.of([
+    import_view16.keymap.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2845,8 +3007,8 @@ var createBasicExtensions = (_props) => {
         preventDefault: true,
         run: () => true
       }
-    ].filter(import_util3.isNotFalsy))
-  ].filter(import_util3.isNotFalsy);
+    ].filter(import_util4.isNotFalsy))
+  ].filter(import_util4.isNotFalsy);
 };
 var defaultThemeSlots = {
   editor: {
@@ -2856,17 +3018,17 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = (0, import_lodash4.default)({}, _slots, defaultThemeSlots);
   return [
-    import_view14.EditorView.darkTheme.of(themeMode === "dark"),
-    import_view14.EditorView.baseTheme(styles5 ? (0, import_lodash5.default)({}, defaultTheme, styles5) : defaultTheme),
+    import_view16.EditorView.darkTheme.of(themeMode === "dark"),
+    import_view16.EditorView.baseTheme(styles5 ? (0, import_lodash5.default)({}, defaultTheme, styles5) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
-    _syntaxHighlighting && (themeMode === "dark" ? (0, import_language2.syntaxHighlighting)(import_theme_one_dark.oneDarkHighlightStyle) : (0, import_language2.syntaxHighlighting)(import_language2.defaultHighlightStyle)),
-    slots.editor?.className && import_view14.EditorView.editorAttributes.of({
+    _syntaxHighlighting && (themeMode === "dark" ? (0, import_language3.syntaxHighlighting)(import_theme_one_dark.oneDarkHighlightStyle) : (0, import_language3.syntaxHighlighting)(import_language3.defaultHighlightStyle)),
+    slots.editor?.className && import_view16.EditorView.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && import_view14.EditorView.contentAttributes.of({
+    slots.content?.className && import_view16.EditorView.contentAttributes.of({
       class: slots.content.className
     })
-  ].filter(import_util3.isNotFalsy);
+  ].filter(import_util4.isNotFalsy);
 };
 var createDataExtensions = ({ id, text, space, identity }) => {
   const extensions = [];
@@ -2875,7 +3037,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const hue = identity?.profile?.data?.hue ?? (0, import_util3.hexToHue)(peerId ?? "0");
+    const hue = identity?.profile?.data?.hue ?? (0, import_util4.hexToHue)(peerId ?? "0");
     extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
@@ -2889,83 +3051,45 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   return extensions;
 };
-var folding = (state = {}) => {
-  const setState = (id, foldState) => {
-    state[id] = foldState;
-  };
-  const setStateDebounced = (0, import_async5.debounce)(setState, 1e3);
-  let initialized = false;
-  return [
-    (0, import_language3.codeFolding)({
-      placeholderDOM: () => {
-        return document.createElement("span");
-      }
-    }),
-    (0, import_language3.foldGutter)({
-      markerDOM: (open) => {
-        const el = createElement("div", {
-          className: "flex h-full items-center"
-        });
-        return renderRoot(el, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Icon, {
-          icon: "ph--caret-right--regular",
-          size: 3,
-          classNames: [
-            "mx-3 cursor-pointer",
-            open && "rotate-90"
-          ]
-        }));
-      }
-    }),
-    import_view16.EditorView.theme({
-      ".cm-foldGutter": {
-        opacity: 0.3,
-        transition: "opacity 0.3s",
-        width: "32px"
-      },
-      ".cm-foldGutter:hover": {
-        opacity: 1
-      }
-    }),
-    import_view16.EditorView.updateListener.of(({ view }) => {
-      const id = view.state.facet(documentId);
-      if (!id) {
-        return;
-      }
-      if (!initialized) {
-        initialized = true;
-        const foldState2 = state[id];
-        if (foldState2?.foldedRanges?.length) {
-          view.dispatch({
-            effects: foldState2.foldedRanges.map((range) => import_language3.foldEffect.of({
-              from: range.from,
-              to: range.to
-            }))
-          });
-        }
-        return;
-      }
-      const decorations = (0, import_language3.foldedRanges)(view.state);
-      const ranges = [];
-      decorations.between(0, view.state.doc.length, (from, to) => {
-        ranges.push({
-          from,
-          to
-        });
+var folding = (_props = {}) => [
+  (0, import_language4.codeFolding)({
+    placeholderDOM: () => {
+      return document.createElement("span");
+    }
+  }),
+  (0, import_language4.foldGutter)({
+    markerDOM: (open) => {
+      const el = createElement("div", {
+        className: "flex h-full items-center"
       });
-      const foldState = {
-        foldedRanges: ranges
-      };
-      setStateDebounced?.(id, foldState);
-    })
-  ];
-};
+      return renderRoot(el, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Icon, {
+        icon: "ph--caret-right--regular",
+        size: 3,
+        classNames: [
+          "mx-3 cursor-pointer",
+          open && "rotate-90"
+        ]
+      }));
+    }
+  }),
+  import_view18.EditorView.theme({
+    ".cm-foldGutter": {
+      opacity: 0.3,
+      transition: "opacity 0.3s",
+      width: "32px"
+    },
+    ".cm-foldGutter:hover": {
+      opacity: 1
+    }
+  })
+];
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(import_view17.EditorView.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(import_view19.EditorView.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(import_view17.EditorView.updateListener.of((update2) => {
+  onChange && extensions.push(import_view19.EditorView.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2991,7 +3115,7 @@ var setHeading = (level) => {
     let prevBlock = -1;
     for (const range of ranges) {
       let sawBlock = false;
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from: range.from,
         to: range.to,
         enter: (node) => {
@@ -3088,7 +3212,7 @@ var setStyle = (type, enable) => {
                   to: range.head + found + marker.length
                 }
               ],
-              range: import_state15.EditorSelection.cursor(range.from - marker.length)
+              range: import_state16.EditorSelection.cursor(range.from - marker.length)
             };
           }
         }
@@ -3100,7 +3224,7 @@ var setStyle = (type, enable) => {
       let startCovered = false;
       let endCovered = false;
       let { from, to } = range;
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3216,13 +3340,13 @@ var setStyle = (type, enable) => {
             from: range.head,
             insert: marker + marker
           },
-          range: import_state15.EditorSelection.cursor(range.head + marker.length)
+          range: import_state16.EditorSelection.cursor(range.head + marker.length)
         };
       }
       const changeSet = state.changes(changes2.concat(changesAtEnd));
       return {
         changes: changeSet,
-        range: range.empty && !changeSet.empty ? import_state15.EditorSelection.cursor(range.head + marker.length) : import_state15.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
+        range: range.empty && !changeSet.empty ? import_state16.EditorSelection.cursor(range.head + marker.length) : import_state16.EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
       };
     });
     dispatch(state.update(changes, {
@@ -3303,7 +3427,7 @@ var insertTable = (view) => {
   snippets.table(view, null, from, from);
 };
 var removeLinkInner = (from, to, changes, state) => {
-  (0, import_language4.syntaxTree)(state).iterate({
+  (0, import_language5.syntaxTree)(state).iterate({
     from,
     to,
     enter: (node) => {
@@ -3348,7 +3472,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       let { from, to } = range;
       const cutStyles = [];
       let okay = null;
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3422,7 +3546,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       const changeSet = state.changes(changes2.concat(changesAfter));
       return {
         changes: changeSet,
-        range: import_state15.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
+        range: import_state16.EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
       };
     });
     if (changes.changes.empty) {
@@ -3443,7 +3567,7 @@ var addList = (type) => {
     let parentColumn = null;
     const blocks = [];
     for (const { from, to } of state.selection.ranges) {
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3578,7 +3702,7 @@ var removeList = (type) => {
     const stack = [];
     const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
     for (const { from, to } of state.selection.ranges) {
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3665,7 +3789,7 @@ var setBlockquote = (enable) => {
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
       const sawBlock = false;
-      (0, import_language4.syntaxTree)(state).iterate({
+      (0, import_language5.syntaxTree)(state).iterate({
         from,
         to,
         enter: (node) => {
@@ -3755,7 +3879,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    (0, import_language4.syntaxTree)(state).iterate({
+    (0, import_language5.syntaxTree)(state).iterate({
       from,
       to,
       enter: (node) => {
@@ -3806,7 +3930,7 @@ var removeCodeblock = ({ state, dispatch }) => {
   let lastBlock = -1;
   const changes = [];
   for (const { from, to } of state.selection.ranges) {
-    (0, import_language4.syntaxTree)(state).iterate({
+    (0, import_language5.syntaxTree)(state).iterate({
       from,
       to,
       enter: (node) => {
@@ -3856,7 +3980,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    import_view18.keymap.of([
+    import_view20.keymap.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -3968,7 +4092,7 @@ var getFormatting = (state) => {
         }
       }
     }
-    (0, import_language4.syntaxTree)(state).iterate({
+    (0, import_language5.syntaxTree)(state).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -4057,7 +4181,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return (0, import_react6.useMemo)(() => import_view18.EditorView.updateListener.of((update2) => {
+  return (0, import_react6.useMemo)(() => import_view20.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4144,7 +4268,7 @@ var markdownTagsExtensions = [
   }
 ];
 var markdownHighlightStyle = (_options = {}) => {
-  return import_language6.HighlightStyle.define([
+  return import_language7.HighlightStyle.define([
     {
       tag: [
         import_highlight2.tags.keyword,
@@ -4308,8 +4432,8 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
       ]
     }),
     // Custom styles.
-    (0, import_language5.syntaxHighlighting)(markdownHighlightStyle()),
-    import_view19.keymap.of([
+    (0, import_language6.syntaxHighlighting)(markdownHighlightStyle()),
+    import_view21.keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       import_commands3.indentWithTab,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -4319,7 +4443,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     ])
   ];
 };
-var debugTree = (cb) => import_state16.StateField.define({
+var debugTree = (cb) => import_state17.StateField.define({
   create: (state) => cb(convertTreeToJson(state)),
   update: (value, tr) => cb(convertTreeToJson(tr.state))
 });
@@ -4340,15 +4464,15 @@ var convertTreeToJson = (state) => {
     }
     return node;
   };
-  return treeToJson((0, import_language7.syntaxTree)(state).cursor());
+  return treeToJson((0, import_language8.syntaxTree)(state).cursor());
 };
 var adjustChanges = () => {
-  return import_view21.ViewPlugin.fromClass(class {
+  return import_view23.ViewPlugin.fromClass(class {
     update(update2) {
-      const tree = (0, import_language9.syntaxTree)(update2.state);
+      const tree = (0, import_language10.syntaxTree)(update2.state);
       const adjustments = [];
       for (const tr of update2.transactions) {
-        const event = tr.annotation(import_state18.Transaction.userEvent);
+        const event = tr.annotation(import_state19.Transaction.userEvent);
         switch (event) {
           //
           // Enter
@@ -4483,9 +4607,9 @@ var getValidUrl = (str) => {
 };
 var image = (_options = {}) => {
   return [
-    import_state19.StateField.define({
+    import_state20.StateField.define({
       create: (state) => {
-        return import_view22.Decoration.set(buildDecorations(0, state.doc.length, state));
+        return import_view24.Decoration.set(buildDecorations2(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4505,10 +4629,10 @@ var image = (_options = {}) => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(from, to, tr.state)
+          add: buildDecorations2(from, to, tr.state)
         });
       },
-      provide: (field) => import_view22.EditorView.decorations.from(field)
+      provide: (field) => import_view24.EditorView.decorations.from(field)
     })
   ];
 };
@@ -4520,10 +4644,10 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var buildDecorations = (from, to, state) => {
+var buildDecorations2 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  (0, import_language10.syntaxTree)(state).iterate({
+  (0, import_language11.syntaxTree)(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4534,7 +4658,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations.push(import_view22.Decoration.replace({
+          decorations.push(import_view24.Decoration.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4546,7 +4670,7 @@ var buildDecorations = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends import_view22.WidgetType {
+var ImageWidget = class extends import_view24.WidgetType {
   constructor(_url) {
     super();
     this._url = _url;
@@ -4568,7 +4692,7 @@ var ImageWidget = class extends import_view22.WidgetType {
 };
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = import_view23.EditorView.theme({
+var formattingStyles = import_view25.EditorView.theme({
   /**
   * Horizontal rule.
   */
@@ -4686,14 +4810,14 @@ var formattingStyles = import_view23.EditorView.theme({
   }
 });
 var table = (options = {}) => {
-  return import_state20.StateField.define({
+  return import_state21.StateField.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => import_view24.EditorView.decorations.from(field)
+    provide: (field) => import_view26.EditorView.decorations.from(field)
   });
 };
 var update = (state, _options) => {
-  const builder = new import_state20.RangeSetBuilder();
+  const builder = new import_state21.RangeSetBuilder();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -4701,7 +4825,7 @@ var update = (state, _options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  (0, import_language11.syntaxTree)(state).iterate({
+  (0, import_language12.syntaxTree)(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4734,19 +4858,19 @@ var update = (state, _options) => {
   tables.forEach((table2) => {
     const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
     if (replace) {
-      builder.add(table2.from, table2.to, import_view24.Decoration.replace({
+      builder.add(table2.from, table2.to, import_view26.Decoration.replace({
         block: true,
         widget: new TableWidget(table2)
       }));
     } else {
-      builder.add(table2.from, table2.to, import_view24.Decoration.mark({
+      builder.add(table2.from, table2.to, import_view26.Decoration.mark({
         class: "cm-table"
       }));
     }
   });
   return builder.finish();
 };
-var TableWidget = class extends import_view24.WidgetType {
+var TableWidget = class extends import_view26.WidgetType {
   constructor(_table) {
     super();
     this._table = _table;
@@ -4779,21 +4903,21 @@ var TableWidget = class extends import_view24.WidgetType {
     return !/^mouse/.test(e.type);
   }
 };
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
   bulletSmall: "\u2219",
   bulletSquare: "\u2B1D"
 };
-var HorizontalRuleWidget = class extends import_view20.WidgetType {
+var HorizontalRuleWidget = class extends import_view22.WidgetType {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends import_view20.WidgetType {
+var LinkButton = class extends import_view22.WidgetType {
   constructor(url, render) {
     super();
     this.url = url;
@@ -4809,7 +4933,7 @@ var LinkButton = class extends import_view20.WidgetType {
     return el;
   }
 };
-var CheckboxWidget = class extends import_view20.WidgetType {
+var CheckboxWidget = class extends import_view22.WidgetType {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -4854,7 +4978,7 @@ var CheckboxWidget = class extends import_view20.WidgetType {
     return false;
   }
 };
-var TextWidget = class extends import_view20.WidgetType {
+var TextWidget = class extends import_view22.WidgetType {
   constructor(text, className) {
     super();
     this.text = text;
@@ -4869,29 +4993,29 @@ var TextWidget = class extends import_view20.WidgetType {
     return el;
   }
 };
-var hide = import_view20.Decoration.replace({});
-var blockQuote = import_view20.Decoration.line({
+var hide = import_view22.Decoration.replace({});
+var blockQuote = import_view22.Decoration.line({
   class: (0, import_react_ui_theme7.mx)("cm-blockquote")
 });
-var fencedCodeLine = import_view20.Decoration.line({
+var fencedCodeLine = import_view22.Decoration.line({
   class: (0, import_react_ui_theme7.mx)("cm-code cm-codeblock-line")
 });
-var fencedCodeLineFirst = import_view20.Decoration.line({
+var fencedCodeLineFirst = import_view22.Decoration.line({
   class: (0, import_react_ui_theme7.mx)("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeLineLast = import_view20.Decoration.line({
+var fencedCodeLineLast = import_view22.Decoration.line({
   class: (0, import_react_ui_theme7.mx)("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = import_view20.Decoration.replace({
+var horizontalRule = import_view22.Decoration.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = import_view20.Decoration.replace({
+var checkedTask = import_view22.Decoration.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = import_view20.Decoration.replace({
+var uncheckedTask = import_view22.Decoration.replace({
   widget: new CheckboxWidget(false)
 });
 var editingRange = (state, range, focus2) => {
@@ -4906,14 +5030,14 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations2 = (view, options, focus2) => {
-  const deco = new import_state17.RangeSetBuilder();
-  const atomicDeco = new import_state17.RangeSetBuilder();
+var buildDecorations3 = (view, options, focus2) => {
+  const deco = new import_state18.RangeSetBuilder();
+  const atomicDeco = new import_state18.RangeSetBuilder();
   const { state } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    (0, import_invariant3.invariant)(level > 0, void 0, {
-      F: __dxlog_file8,
+    (0, import_invariant4.invariant)(level > 0, void 0, {
+      F: __dxlog_file9,
       L: 178,
       S: void 0,
       A: [
@@ -4951,8 +5075,8 @@ var buildDecorations2 = (view, options, focus2) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    (0, import_invariant3.invariant)(listLevels.length, void 0, {
-      F: __dxlog_file8,
+    (0, import_invariant4.invariant)(listLevels.length, void 0, {
+      F: __dxlog_file9,
       L: 200,
       S: void 0,
       A: [
@@ -4995,7 +5119,7 @@ var buildDecorations2 = (view, options, focus2) => {
           } else {
             const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
             if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, import_view20.Decoration.replace({
+              atomicDeco.add(mark.from, mark.from + len, import_view22.Decoration.replace({
                 widget: new TextWidget(num, theme.heading(level))
               }));
             }
@@ -5020,7 +5144,7 @@ var buildDecorations2 = (view, options, focus2) => {
         if (node.from === line.to - 1) {
           return false;
         }
-        deco.add(line.from, line.from, import_view20.Decoration.line({
+        deco.add(line.from, line.from, import_view22.Decoration.line({
           class: "cm-list-item",
           attributes: {
             style: `padding-left: ${offset}px; text-indent: -${width}px;`
@@ -5037,7 +5161,7 @@ var buildDecorations2 = (view, options, focus2) => {
         const label = list.type === "OrderedList" ? `${++list.number}.` : Unicode.bulletSmall;
         const line = state.doc.lineAt(node.from);
         const to = state.doc.sliceString(node.to, node.to + 1) === " " ? node.to + 1 : node.to;
-        atomicDeco.add(line.from, to, import_view20.Decoration.replace({
+        atomicDeco.add(line.from, to, import_view22.Decoration.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -5124,7 +5248,7 @@ var buildDecorations2 = (view, options, focus2) => {
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
-          deco.add(marks[0].to, marks[1].from, import_view20.Decoration.mark({
+          deco.add(marks[0].to, marks[1].from, import_view22.Decoration.mark({
             tagName: "a",
             attributes: {
               class: "cm-link",
@@ -5134,7 +5258,7 @@ var buildDecorations2 = (view, options, focus2) => {
             }
           }));
           if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view20.Decoration.replace({
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view22.Decoration.replace({
               widget: new LinkButton(url, options.renderLinkButton)
             }) : hide);
           }
@@ -5168,7 +5292,7 @@ var buildDecorations2 = (view, options, focus2) => {
       }
     }
   };
-  const tree = (0, import_language8.syntaxTree)(state);
+  const tree = (0, import_language9.syntaxTree)(state);
   if (options.numberedHeadings?.from === void 0) {
     for (const { from, to } of view.visibleRanges) {
       tree.iterate({
@@ -5189,16 +5313,16 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = import_state17.StateEffect.define();
+var forceUpdate = import_state18.StateEffect.define();
 var decorateMarkdown = (options = {}) => {
   return [
-    import_view20.ViewPlugin.fromClass(class {
+    import_view22.ViewPlugin.fromClass(class {
       constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations3(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));
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations3(update2.view, options, update2.view.hasFocus));
           this.clearUpdate();
         } else if (update2.selectionSet) {
           this.scheduleUpdate(update2.view);
@@ -5224,9 +5348,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        import_view20.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view20.Decoration.none),
-        import_view20.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view20.Decoration.none),
-        import_view20.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view20.Decoration.none)
+        import_view22.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
+        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view22.Decoration.none),
+        import_view22.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view22.Decoration.none)
       ]
     }),
     image(),
@@ -5236,8 +5360,8 @@ var decorateMarkdown = (options = {}) => {
   ];
 };
 var linkTooltip = (render) => {
-  return (0, import_view25.hoverTooltip)((view, pos, side) => {
-    const syntax = (0, import_language12.syntaxTree)(view.state).resolveInner(pos, side);
+  return (0, import_view27.hoverTooltip)((view, pos, side) => {
+    const syntax = (0, import_language13.syntaxTree)(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
       link = node.name === "Link" ? node : null;
@@ -5266,7 +5390,7 @@ var linkTooltip = (render) => {
     };
   });
 };
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ debug, onSearch }) => {
   return (0, import_autocomplete5.autocompletion)({
     // TODO(burdon): Not working.
@@ -5281,7 +5405,7 @@ var mention = ({ debug, onSearch }) => {
         import_log6.log.info("completion context", {
           context
         }, {
-          F: __dxlog_file9,
+          F: __dxlog_file10,
           L: 27,
           S: void 0,
           C: (f, a) => f(...a)
@@ -5320,7 +5444,7 @@ var InputModeExtensions = {
     editorInputMode.of({
       type: "vscode"
     }),
-    import_view26.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
+    import_view28.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
   ],
   vim: [
     // https://github.com/replit/codemirror-vim
@@ -5329,7 +5453,7 @@ var InputModeExtensions = {
       type: "vim",
       noTabster: true
     }),
-    import_view26.keymap.of([
+    import_view28.keymap.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -5349,7 +5473,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    import_view27.keymap.of([
+    import_view29.keymap.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -5399,10 +5523,10 @@ var useActionHandler = (view) => {
     view
   ]);
 };
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react8.useMemo)(() => (0, import_util4.getProviderValue)(props), deps ?? []);
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react8.useMemo)(() => (0, import_util5.getProviderValue)(props), deps ?? []);
   const [instanceId] = (0, import_react8.useState)(() => `text-editor-${++instanceCount}`);
   const [view, setView] = (0, import_react8.useState)();
   const parentRef = (0, import_react8.useRef)(null);
@@ -5414,7 +5538,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 75,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5431,27 +5555,27 @@ var useTextEditor = (props = {}, deps = []) => {
           anchor
         };
       }
-      const state = import_state21.EditorState.create({
+      const state = import_state22.EditorState.create({
         doc: initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          import_view28.EditorView.exceptionSink.of((err) => {
+          import_view30.EditorView.exceptionSink.of((err) => {
             import_log7.log.catch(err, void 0, {
-              F: __dxlog_file10,
+              F: __dxlog_file11,
               L: 97,
               S: void 0,
               C: (f, a) => f(...a)
             });
           })
-        ].filter(import_util4.isNotFalsy)
+        ].filter(import_util5.isNotFalsy)
       });
-      view2 = new import_view28.EditorView({
+      view2 = new import_view30.EditorView({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? import_view28.EditorView.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? import_view30.EditorView.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -5472,7 +5596,7 @@ var useTextEditor = (props = {}, deps = []) => {
       (0, import_log7.log)("destroy", {
         id
       }, {
-        F: __dxlog_file10,
+        F: __dxlog_file11,
         L: 134,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5489,7 +5613,7 @@ var useTextEditor = (props = {}, deps = []) => {
             scrollTo,
             selection
           }, {
-            F: __dxlog_file10,
+            F: __dxlog_file11,
             L: 143,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5582,6 +5706,7 @@ var useTextEditor = (props = {}, deps = []) => {
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
+  createEditorStateStore,
   createEditorStateTransaction,
   createElement,
   createExternalCommentSync,