@dxos/react-ui-editor 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/dist/lib/node/index.cjs

@@ -63,7 +63,7 @@ __export(node_exports, {
   commentsState: () => commentsState,
   convertTreeToJson: () => convertTreeToJson,
   createBasicExtensions: () => createBasicExtensions,
-  createComment: () => createComment2,
+  createComment: () => createComment,
   createDataExtensions: () => createDataExtensions,
   createEditorAction: () => createEditorAction,
   createEditorActionGroup: () => createEditorActionGroup,
@@ -107,6 +107,7 @@ __export(node_exports, {
   mention: () => mention,
   openCommand: () => openCommand,
   openEffect: () => openEffect,
+  outliner: () => outliner,
   overlap: () => overlap,
   preventNewline: () => preventNewline,
   preview: () => preview,
@@ -141,7 +142,6 @@ __export(node_exports, {
   toggleStyle: () => toggleStyle,
   translations: () => translations_default,
   typewriter: () => typewriter,
-  useActionHandler: () => useActionHandler,
   useCommentClickListener: () => useCommentClickListener,
   useCommentState: () => useCommentState,
   useComments: () => useComments,
@@ -162,89 +162,87 @@ var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react2 = require("react");
 var import_live_object = require("@dxos/live-object");
 var import_react_ui_menu2 = require("@dxos/react-ui-menu");
-var import_view2 = require("@codemirror/view");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_lodash = __toESM(require("lodash.get"));
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_state2 = require("@codemirror/state");
-var import_view3 = require("@codemirror/view");
+var import_view2 = require("@codemirror/view");
 var import_util = require("@dxos/util");
 var import_state3 = require("@codemirror/state");
 var import_log = require("@dxos/log");
 var import_react3 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_lang_markdown = require("@codemirror/lang-markdown");
-var import_view4 = require("@codemirror/view");
+var import_view3 = require("@codemirror/view");
+var import_automerge = require("@automerge/automerge");
 var import_state4 = require("@codemirror/state");
-var import_view5 = require("@codemirror/view");
-var import_automerge = require("@dxos/automerge/automerge");
+var import_view4 = require("@codemirror/view");
 var import_log2 = require("@dxos/log");
 var import_echo = require("@dxos/react-client/echo");
 var import_state5 = require("@codemirror/state");
-var import_automerge2 = require("@dxos/automerge/automerge");
-var import_automerge3 = require("@dxos/automerge/automerge");
+var import_automerge2 = require("@automerge/automerge");
+var import_automerge3 = require("@automerge/automerge");
 var import_state6 = require("@codemirror/state");
 var import_state7 = require("@codemirror/state");
-var import_view6 = require("@codemirror/view");
+var import_view5 = require("@codemirror/view");
 var import_async = require("@dxos/async");
 var import_context = require("@dxos/context");
 var import_async2 = require("@dxos/async");
 var import_context2 = require("@dxos/context");
 var import_invariant = require("@dxos/invariant");
 var import_log3 = require("@dxos/log");
-var import_view7 = require("@codemirror/view");
-var import_lodash2 = __toESM(require("lodash.defaultsdeep"));
+var import_view6 = require("@codemirror/view");
+var import_lodash = __toESM(require("lodash.defaultsdeep"));
 var import_invariant2 = require("@dxos/invariant");
 var import_state8 = require("@codemirror/state");
 var import_state9 = require("@codemirror/state");
+var import_view7 = require("@codemirror/view");
 var import_view8 = require("@codemirror/view");
-var import_view9 = require("@codemirror/view");
 var import_state10 = require("@codemirror/state");
+var import_view9 = require("@codemirror/view");
 var import_view10 = require("@codemirror/view");
-var import_view11 = require("@codemirror/view");
 var import_commands = require("@codemirror/commands");
 var import_state11 = require("@codemirror/state");
-var import_view12 = require("@codemirror/view");
-var import_lodash3 = __toESM(require("lodash.sortby"));
+var import_view11 = require("@codemirror/view");
+var import_lodash2 = __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_state12 = require("@codemirror/state");
-var import_view13 = require("@codemirror/view");
+var import_view12 = require("@codemirror/view");
 var import_async4 = require("@dxos/async");
 var import_invariant3 = require("@dxos/invariant");
 var import_util3 = require("@dxos/util");
 var import_language = require("@codemirror/language");
 var import_state13 = require("@codemirror/state");
-var import_view14 = require("@codemirror/view");
+var import_view13 = require("@codemirror/view");
 var import_autocomplete2 = require("@codemirror/autocomplete");
 var import_commands2 = require("@codemirror/commands");
 var import_language2 = require("@codemirror/language");
 var import_search = require("@codemirror/search");
 var import_state14 = require("@codemirror/state");
 var import_theme_one_dark = require("@codemirror/theme-one-dark");
-var import_view15 = require("@codemirror/view");
-var import_lodash4 = __toESM(require("lodash.defaultsdeep"));
-var import_lodash5 = __toESM(require("lodash.merge"));
+var import_view14 = require("@codemirror/view");
+var import_lodash3 = __toESM(require("lodash.defaultsdeep"));
+var import_lodash4 = __toESM(require("lodash.merge"));
 var import_display_name = require("@dxos/display-name");
 var import_log5 = require("@dxos/log");
 var import_util4 = require("@dxos/util");
 var import_state15 = require("@codemirror/state");
-var import_view16 = require("@codemirror/view");
+var import_view15 = require("@codemirror/view");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_lodash5 = __toESM(require("lodash.get"));
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_language3 = require("@codemirror/language");
-var import_view17 = require("@codemirror/view");
+var import_view16 = require("@codemirror/view");
 var import_react5 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
-var import_view18 = require("@codemirror/view");
+var import_view17 = require("@codemirror/view");
 var import_autocomplete3 = require("@codemirror/autocomplete");
 var import_language4 = require("@codemirror/language");
 var import_state16 = require("@codemirror/state");
-var import_view19 = require("@codemirror/view");
+var import_view18 = require("@codemirror/view");
 var import_react6 = require("react");
 var import_autocomplete4 = require("@codemirror/autocomplete");
 var import_commands3 = require("@codemirror/commands");
@@ -252,7 +250,7 @@ var import_lang_markdown2 = require("@codemirror/lang-markdown");
 var import_language5 = require("@codemirror/language");
 var import_language_data = require("@codemirror/language-data");
 var import_lint = require("@codemirror/lint");
-var import_view20 = require("@codemirror/view");
+var import_view19 = require("@codemirror/view");
 var import_lang_markdown3 = require("@codemirror/lang-markdown");
 var import_language6 = require("@codemirror/language");
 var import_highlight2 = require("@lezer/highlight");
@@ -261,39 +259,46 @@ var import_language7 = require("@codemirror/language");
 var import_state17 = require("@codemirror/state");
 var import_language8 = require("@codemirror/language");
 var import_state18 = require("@codemirror/state");
-var import_view21 = require("@codemirror/view");
+var import_view20 = require("@codemirror/view");
 var import_invariant4 = require("@dxos/invariant");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_language9 = require("@codemirror/language");
 var import_state19 = require("@codemirror/state");
-var import_view22 = require("@codemirror/view");
+var import_view21 = require("@codemirror/view");
 var import_language10 = require("@codemirror/language");
 var import_state20 = require("@codemirror/state");
+var import_view22 = require("@codemirror/view");
 var import_view23 = require("@codemirror/view");
-var import_view24 = require("@codemirror/view");
 var import_language11 = require("@codemirror/language");
 var import_state21 = require("@codemirror/state");
-var import_view25 = require("@codemirror/view");
+var import_view24 = require("@codemirror/view");
 var import_language12 = require("@codemirror/language");
+var import_view25 = require("@codemirror/view");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_language13 = require("@codemirror/language");
+var import_state22 = require("@codemirror/state");
 var import_view26 = require("@codemirror/view");
+var import_log6 = require("@dxos/log");
 var import_react_ui_theme7 = require("@dxos/react-ui-theme");
 var import_autocomplete5 = require("@codemirror/autocomplete");
-var import_log6 = require("@dxos/log");
+var import_log7 = require("@dxos/log");
 var import_view27 = 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_effect = require("effect");
 var import_dx_ref_tag = require("@dxos/lit-ui/dx-ref-tag.pcss");
-var import_language13 = require("@codemirror/language");
-var import_state22 = require("@codemirror/state");
+var import_language14 = require("@codemirror/language");
+var import_state23 = require("@codemirror/state");
 var import_view28 = require("@codemirror/view");
 var import_view29 = require("@codemirror/view");
-var import_react7 = require("react");
-var import_state23 = require("@codemirror/state");
+var import_search2 = require("@codemirror/search");
 var import_view30 = require("@codemirror/view");
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_state24 = require("@codemirror/state");
+var import_view31 = require("@codemirror/view");
 var import_react_tabster = require("@fluentui/react-tabster");
-var import_react8 = require("react");
-var import_log7 = require("@dxos/log");
+var import_react7 = require("react");
+var import_log8 = require("@dxos/log");
 var import_util5 = require("@dxos/util");
 var translationKey = "react-ui-editor";
 var translations_default = [
@@ -331,824 +336,271 @@ var translations_default = [
 var useEditorToolbarState = (initialState = {}) => {
   return (0, import_react2.useMemo)(() => (0, import_live_object.live)(initialState), []);
 };
-var createEditorAction = (payload, icon, label = [
-  `${payload.type} label`,
-  {
-    ns: translationKey
-  }
-], id = payload.type) => (0, import_react_ui_menu2.createMenuAction)(id, {
-  icon,
-  label,
-  ...payload
-});
+var createEditorAction = (id, invoke, properties) => {
+  const { label = [
+    `${id} label`,
+    {
+      ns: translationKey
+    }
+  ], ...rest } = properties;
+  return (0, import_react_ui_menu2.createMenuAction)(id, invoke, {
+    label,
+    ...rest
+  });
+};
 var createEditorActionGroup = (id, props, icon) => (0, import_react_ui_menu2.createMenuItemGroup)(id, {
   icon,
   iconOnly: true,
   ...props
 });
-var editorToolbarSearch = createEditorAction({
-  type: "search"
-}, "ph--magnifying-glass--regular");
-var createBlockGroupAction = (value) => createEditorActionGroup("block", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
+var singleValueFacet = (defaultValue) => import_state3.Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
 });
-var createBlockActions = (value, blankLine) => Object.entries({
-  blockquote: "ph--quotes--regular",
-  codeblock: "ph--code-block--regular",
-  table: "ph--table--regular"
-}).map(([type, icon]) => {
-  return createEditorAction({
-    type,
-    checked: type === value,
-    ...type === "table" && {
-      disabled: !!blankLine
+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;
+    };
+  }
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      import_log.log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
     }
-  }, icon);
-});
-var createBlocks = (state) => {
-  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, state.blankLine);
-  return {
-    nodes: [
-      blockGroupAction,
-      ...blockActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "block"
-      },
-      ...blockActions.map(({ id }) => ({
-        source: blockGroupAction.id,
-        target: id
-      }))
-    ]
   };
 };
-var commentLabel = (comment, selection) => comment ? "selection overlaps existing comment label" : selection === false ? "select text to comment label" : "comment label";
-var createCommentAction = (label) => createEditorAction({
-  type: "comment",
-  testId: "editor.toolbar.comment"
-}, "ph--chat-text--regular", label);
-var createComment = (state) => ({
-  nodes: [
-    createCommentAction([
-      commentLabel(state.comment, state.selection),
-      {
-        ns: translationKey
-      }
-    ])
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "comment"
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    import_log.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;
     }
-  ]
-});
-var formats = {
-  strong: "ph--text-b--regular",
-  emphasis: "ph--text-italic--regular",
-  strikethrough: "ph--text-strikethrough--regular",
-  code: "ph--code--regular",
-  link: "ph--link--regular"
+    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) {
+    (0, import_log.log)("changes", {
+      changes
+    }, {
+      F: __dxlog_file,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
 };
-var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
-  variant: "toggleGroup",
-  selectCardinality: "multiple",
-  value: Object.keys(formats).filter((key) => !!formatting[key])
-});
-var createFormattingActions = (formatting) => Object.entries(formats).map(([type, icon]) => createEditorAction({
-  type,
-  checked: !!formatting[type]
-}, icon));
-var createFormatting = (state) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state);
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
   return {
-    nodes: [
-      formattingGroupAction,
-      ...formattingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "formatting"
-      },
-      ...formattingActions.map(({ id }) => ({
-        source: formattingGroupAction.id,
-        target: id
-      }))
-    ]
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
   };
 };
-var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--text-h--regular");
-var createHeadingActions = (value) => Object.entries({
-  "0": "ph--paragraph--regular",
-  "1": "ph--text-h-one--regular",
-  "2": "ph--text-h-two--regular",
-  "3": "ph--text-h-three--regular",
-  "4": "ph--text-h-four--regular",
-  "5": "ph--text-h-five--regular",
-  "6": "ph--text-h-six--regular"
-}).map(([levelStr, icon]) => {
-  const level = parseInt(levelStr);
-  return createEditorAction({
-    type: "heading",
-    data: level,
-    checked: value === levelStr
-  }, icon, [
-    "heading level label",
-    {
-      count: level,
-      ns: translationKey
-    }
-  ], `heading--${levelStr}`);
-});
-var computeHeadingValue = (state) => {
-  const blockType = state ? state.blockType : "paragraph";
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === "paragraph" || !blockType ? "0" : "";
+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 createHeadings = (state) => {
-  const headingValue = computeHeadingValue(state);
-  const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue);
-  return {
-    nodes: [
-      headingGroupAction,
-      ...headingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "heading"
-      },
-      ...headingActions.map(({ id }) => ({
-        source: headingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+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 listStyles = {
-  bullet: "ph--list-bullets--regular",
-  ordered: "ph--list-numbers--regular",
-  task: "ph--list-checks--regular"
+var createElement = (tag, options, children) => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...Array.isArray(children) ? children : [
+      children
+    ]);
+  }
+  return el;
 };
-var createListGroupAction = (value) => createEditorActionGroup("list", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createListActions = (value) => Object.entries(listStyles).map(([listStyle, icon]) => createEditorAction({
-  type: `list-${listStyle}`,
-  checked: value === listStyle
-}, icon));
-var createLists = (state) => {
-  const value = state.listStyle ?? "";
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value);
-  return {
-    nodes: [
-      listGroupAction,
-      ...listActionsMap
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "list"
-      },
-      ...listActionsMap.map(({ id }) => ({
-        source: listGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+var renderRoot = (root, node) => {
+  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme2.defaultTx
+  }, node));
+  return root;
 };
-var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--eye--regular");
-var createViewModeActions = (value) => Object.entries({
-  preview: "ph--eye--regular",
-  source: "ph--pencil-simple--regular",
-  readonly: "ph--pencil-slash--regular"
-}).map(([viewMode, icon]) => {
-  return createEditorAction({
-    type: "view-mode",
-    data: viewMode,
-    checked: viewMode === value
-  }, icon, [
-    `${viewMode} mode label`,
-    {
-      ns: translationKey
-    }
-  ], `view-mode--${viewMode}`);
+var createRenderer = (Component) => (el, props) => {
+  renderRoot(el, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
+    tx: import_react_ui_theme2.defaultTx
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react3.default.createElement(Component, props))));
+};
+var annotationMark = import_view2.Decoration.mark({
+  class: "cm-annotation"
 });
-var createViewMode = (state) => {
-  const value = state.viewMode ?? "source";
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
-  return {
-    nodes: [
-      viewModeGroupAction,
-      ...viewModeActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "viewMode"
-      },
-      ...viewModeActions.map(({ id }) => ({
-        source: viewModeGroupAction.id,
-        target: id
-      }))
-    ]
+var annotations = (options = {}) => {
+  const match = (state) => {
+    const annotations2 = [];
+    const text = state.doc.toString();
+    if (options.match) {
+      const matches = text.matchAll(options.match);
+      for (const match2 of matches) {
+        const from = match2.index;
+        const to = from + match2[0].length;
+        const cursor = Cursor.getCursorFromRange(state, {
+          from,
+          to
+        });
+        annotations2.push({
+          cursor
+        });
+      }
+    }
+    return annotations2;
   };
+  const annotationsState = import_state2.StateField.define({
+    create: (state) => {
+      return match(state);
+    },
+    update: (value, tr) => {
+      if (!tr.changes.empty) {
+        return match(tr.state);
+      }
+      return value;
+    }
+  });
+  return [
+    annotationsState,
+    import_view2.EditorView.decorations.compute([
+      annotationsState
+    ], (state) => {
+      const annotations2 = state.field(annotationsState);
+      const decorations = annotations2.map((annotation) => {
+        const range = Cursor.getRangeFromCursor(state, annotation.cursor);
+        return range && annotationMark.range(range.from, range.to);
+      }).filter(import_util.isNotFalsy);
+      return import_view2.Decoration.set(decorations);
+    }),
+    styles
+  ];
 };
-var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: ""
-};
-var theme = {
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
-  mark: "opacity-50",
-  heading: (level) => {
-    return (0, import_react_ui_theme3.mx)(headings[level], "dark:text-primary-400");
+var styles = import_view2.EditorView.theme({
+  ".cm-annotation": {
+    textDecoration: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: "var(--dx-error)"
   }
+});
+var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
+  const extensions = [
+    // https://codemirror.net/docs/ref/#view.keymap
+    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    // TODO(burdon): Set custom keymap.
+    import_view3.keymap.of(import_autocomplete.completionKeymap),
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    (0, import_autocomplete.autocompletion)({
+      activateOnTyping,
+      override,
+      closeOnBlur: !debug,
+      tooltipClass: () => "shadow rounded"
+    })
+  ];
+  if (onSearch) {
+    extensions.push(
+      // TODO(burdon): Optional decoration via addToOptions
+      import_lang_markdown.markdownLanguage.data.of({
+        autocomplete: (context) => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || match.from === match.to && !context.explicit) {
+            return null;
+          }
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase())
+          };
+        }
+      })
+    );
+  }
+  return extensions;
 };
-var getToken = (path, defaultValue) => {
-  const value = (0, import_lodash.default)(import_react_ui_theme4.tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
-var fontBody = getToken("fontFamily.body");
-var fontMono = getToken("fontFamily.mono");
-var defaultTheme = {
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  /**
-  * Scroller
-  */
-  ".cm-scroller": {
-    overflowY: "auto"
-  },
-  /**
-  * Content
-  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
-  */
-  ".cm-content": {
-    padding: "unset",
-    fontFamily: fontBody,
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px",
-    lineHeight: 1.5,
-    color: "unset"
-  },
-  /**
-  * Gutters
-  * NOTE: Gutters should have the same top margin as the content.
-  */
-  ".cm-gutters": {
-    borderRight: "none",
-    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"
-  },
-  /**
-  * Height is set to match the corresponding line.
-  */
-  ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "12px"
-  },
-  /**
-  * Line.
-  */
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "var(--dx-cmActiveLine)"
-  },
-  /**
-  * Cursor (layer).
-  */
-  ".cm-cursor, .cm-dropCursor": {
-    borderLeft: "2px solid var(--dx-cmCursor)"
-  },
-  ".cm-placeholder": {
-    color: "var(--dx-subdued)"
-  },
-  /**
-  * Selection (layer).
-  */
-  ".cm-selectionBackground": {
-    background: "var(--dx-cmSelection)"
-  },
-  /**
-  * Search.
-  * NOTE: Matches comment.
-  */
-  ".cm-searchMatch": {
-    margin: "0 -3px",
-    padding: "3px",
-    borderRadius: "3px",
-    background: "var(--dx-cmHighlightSurface)",
-    color: "var(--dx-cmHighlight)"
-  },
-  ".cm-searchMatch-selected": {
-    textDecoration: "underline"
-  },
-  /**
-  * Link.
-  */
-  ".cm-link": {
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textDecorationColor: "var(--dx-separator)",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem"
-  },
-  ".cm-link > span": {
-    color: "var(--dx-accentText)"
-  },
-  /**
-  * Tooltip.
-  */
-  ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
-  },
-  ".cm-tooltip-below": {},
-  /**
-  * Autocomplete.
-  * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-  */
-  ".cm-tooltip.cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
-    maxHeight: "20em"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
-    paddingLeft: "4px !important",
-    borderBottom: "none !important",
-    color: "var(--dx-accentText)"
-  },
-  ".cm-tooltip.cm-completionInfo": {
-    width: "360px !important",
-    margin: "-10px 1px 0 1px",
-    padding: "8px !important",
-    borderColor: "var(--dx-separator)"
-  },
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: fontBody
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none !important",
-    opacity: 0.5
-  },
-  /**
-  * Panels
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  // TODO(burdon): Implement custom panel (with icon buttons).
-  ".cm-panels": {},
-  ".cm-panel": {
-    fontFamily: fontBody,
-    backgroundColor: "var(--surface-bg)"
-  },
-  ".cm-panel input, .cm-panel button, .cm-panel label": {
-    color: "var(--dx-subdued)",
-    fontFamily: fontBody,
-    fontSize: "14px",
-    all: "unset",
-    margin: "3px !important",
-    padding: "2px 6px !important",
-    outline: "1px solid transparent"
-  },
-  ".cm-panel input, .cm-panel button": {
-    backgroundColor: "var(--dx-input)"
-  },
-  ".cm-panel input:focus, .cm-panel button:focus": {
-    outline: "1px solid var(--dx-accentFocusIndicator)"
-  },
-  ".cm-panel label": {
-    display: "inline-flex",
-    alignItems: "center",
-    cursor: "pointer"
-  },
-  ".cm-panel input.cm-textfield": {},
-  ".cm-panel input[type=checkbox]": {
-    width: "8px",
-    height: "8px",
-    marginRight: "6px !important",
-    padding: "2px !important",
-    color: "var(--dx-accentFocusIndicator)"
-  },
-  ".cm-panel button": {
-    "&:hover": {
-      backgroundColor: "var(--dx-accentSurfaceHover) !important"
-    },
-    "&:active": {
-      backgroundColor: "var(--dx-accentSurfaceHover)"
-    }
-  },
-  ".cm-panel.cm-search": {
-    padding: "4px",
-    borderTop: "1px solid var(--dx-separator)"
-  }
-};
-var margin = "!mt-[1rem]";
-var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorContent = (0, import_react_ui_theme2.mx)(margin, editorWidth);
-var editorFullWidth = (0, import_react_ui_theme2.mx)(margin);
-var editorGutter = import_view2.EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
-  ".cm-gutters": {
-    marginTop: "1rem",
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = import_view2.EditorView.theme({
-  ".cm-content": {
-    fontFamily: fontMono
-  }
-});
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => (0, import_react_ui_theme2.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 stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme2.mx)("attention-surface is-full border-be !border-separator relative z-[1]", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
-var createToolbar = ({ state, customActions, ...features }) => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings2 = createHeadings(state);
-    nodes.push(...headings2.nodes);
-    edges.push(...headings2.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = (0, import_react_ui_menu.createGapSeparator)();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment ?? true) {
-    const comment = createComment(state);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    nodes.push(editorToolbarSearch);
-    edges.push({
-      source: "root",
-      target: editorToolbarSearch.id
-    });
-  }
-  if (features.viewMode ?? true) {
-    const viewMode = createViewMode(state);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
-};
-var useEditorToolbarActionGraph = ({ onAction, ...props }) => {
-  const menuCreator = (0, import_react.useCallback)(() => createToolbar(props), [
-    props
-  ]);
-  const { resolveGroupItems } = (0, import_react_ui_menu.useMenuActions)(menuCreator);
-  return {
-    resolveGroupItems,
-    onAction
-  };
-};
-var EditorToolbar = ({ classNames, attendableId, role, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: stackItemContentToolbarClassNames(role)
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.ToolbarMenu, {
-    classNames: [
-      import_react_ui_theme.textBlockWidth,
-      "!bg-transparent",
-      classNames
-    ]
-  }))));
-};
-var singleValueFacet = (defaultValue) => import_state3.Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
-});
-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;
-    };
-  }
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      import_log.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) {
-    import_log.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) {
-    (0, import_log.log)("changes", {
-      changes
-    }, {
-      F: __dxlog_file,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-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 (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
-  }
-  return el;
-};
-var renderRoot = (root, node) => {
-  (0, import_client.createRoot)(root).render(/* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
-    tx: import_react_ui_theme5.defaultTx
-  }, node));
-  return root;
-};
-var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ThemeProvider, {
-    tx: import_react_ui_theme5.defaultTx
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Tooltip.Provider, null, /* @__PURE__ */ import_react3.default.createElement(Component, props))));
-};
-var annotationMark = import_view3.Decoration.mark({
-  class: "cm-annotation"
-});
-var annotations = (options = {}) => {
-  const match = (state) => {
-    const annotations2 = [];
-    const text = state.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match2 of matches) {
-        const from = match2.index;
-        const to = from + match2[0].length;
-        const cursor = Cursor.getCursorFromRange(state, {
-          from,
-          to
-        });
-        annotations2.push({
-          cursor
-        });
-      }
-    }
-    return annotations2;
-  };
-  const annotationsState = import_state2.StateField.define({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-      return value;
-    }
-  });
-  return [
-    annotationsState,
-    import_view3.EditorView.decorations.compute([
-      annotationsState
-    ], (state) => {
-      const annotations2 = state.field(annotationsState);
-      const decorations = annotations2.map((annotation) => {
-        const range = Cursor.getRangeFromCursor(state, annotation.cursor);
-        return range && annotationMark.range(range.from, range.to);
-      }).filter(import_util.isNotFalsy);
-      return import_view3.Decoration.set(decorations);
-    }),
-    styles
-  ];
-};
-var styles = import_view3.EditorView.theme({
-  ".cm-annotation": {
-    textDecoration: "underline",
-    textDecorationStyle: "wavy",
-    textDecorationColor: "var(--dx-error)"
-  }
-});
-var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
-  const extensions = [
-    // https://codemirror.net/docs/ref/#view.keymap
-    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
-    // TODO(burdon): Set custom keymap.
-    import_view4.keymap.of(import_autocomplete.completionKeymap),
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    (0, import_autocomplete.autocompletion)({
-      activateOnTyping,
-      override,
-      closeOnBlur: !debug,
-      tooltipClass: () => "shadow rounded"
-    })
-  ];
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
-      import_lang_markdown.markdownLanguage.data.of({
-        autocomplete: (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
-          };
-        }
-      })
-    );
-  }
-  return extensions;
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
-var cursorConverter = (accessor) => ({
-  toCursor: (pos, assoc) => {
-    try {
-      return (0, import_echo.toCursor)(accessor, pos, assoc);
-    } catch (err) {
-      import_log2.log.catch(err, void 0, {
-        F: __dxlog_file2,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return "";
-    }
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts";
+var cursorConverter = (accessor) => ({
+  toCursor: (pos, assoc) => {
+    try {
+      return (0, import_echo.toCursor)(accessor, pos, assoc);
+    } catch (err) {
+      import_log2.log.catch(err, void 0, {
+        F: __dxlog_file2,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return "";
+    }
   },
   fromCursor: (cursor) => {
     try {
@@ -1337,8 +789,8 @@ var Syncer = class {
   }
   onAutomergeChange(view) {
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = import_automerge2.next.getHeads(this._handle.docSync());
-    const diff = import_automerge2.next.equals(oldHeads, newHeads) ? [] : import_automerge2.next.diff(this._handle.docSync(), oldHeads, newHeads);
+    const newHeads = import_automerge2.next.getHeads(this._handle.doc());
+    const diff = import_automerge2.next.equals(oldHeads, newHeads) ? [] : import_automerge2.next.diff(this._handle.doc(), oldHeads, newHeads);
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
@@ -1352,7 +804,7 @@ var automerge = (accessor) => {
   const syncState = import_state4.StateField.define({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: import_automerge.next.getHeads(accessor.handle.docSync()),
+      lastHeads: import_automerge.next.getHeads(accessor.handle.doc()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
@@ -1384,7 +836,7 @@ var automerge = (accessor) => {
     // Track heads.
     syncState,
     // Reconcile external updates.
-    import_view5.ViewPlugin.fromClass(class {
+    import_view4.ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
         this._handleChange = () => {
@@ -1397,7 +849,7 @@ var automerge = (accessor) => {
       }
     }),
     // Reconcile local updates.
-    import_view5.EditorView.updateListener.of(({ view, changes }) => {
+    import_view4.EditorView.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
         syncer.reconcile(view, true);
       }
@@ -1420,7 +872,7 @@ var RemoteSelectionChangedAnnotation = import_state7.Annotation.define();
 var awareness = (provider = dummyProvider) => {
   return [
     awarenessProvider.of(provider),
-    import_view6.ViewPlugin.fromClass(RemoteSelectionsDecorator, {
+    import_view5.ViewPlugin.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
     styles2
@@ -1484,7 +936,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: start,
           to: end,
-          value: import_view6.Decoration.mark({
+          value: import_view5.Decoration.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -1495,7 +947,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: start,
           to: startLine.from + startLine.length,
-          value: import_view6.Decoration.mark({
+          value: import_view5.Decoration.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -1505,7 +957,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: endLine.from,
           to: end,
-          value: import_view6.Decoration.mark({
+          value: import_view5.Decoration.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -1517,7 +969,7 @@ var RemoteSelectionsDecorator = class {
           decorations.push({
             from: linePos,
             to: linePos,
-            value: import_view6.Decoration.line({
+            value: import_view5.Decoration.line({
               attributes: {
                 style: `background-color: ${lightColor}`,
                 class: "cm-collab-selectionLine"
@@ -1529,17 +981,17 @@ var RemoteSelectionsDecorator = class {
       decorations.push({
         from: head,
         to: head,
-        value: import_view6.Decoration.widget({
+        value: import_view5.Decoration.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
           widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", darkColor)
         })
       });
     }
-    this.decorations = import_view6.Decoration.set(decorations, true);
+    this.decorations = import_view5.Decoration.set(decorations, true);
   }
 };
-var RemoteCaretWidget = class extends import_view6.WidgetType {
+var RemoteCaretWidget = class extends import_view5.WidgetType {
   constructor(_name, _color) {
     super();
     this._name = _name;
@@ -1575,7 +1027,7 @@ var RemoteCaretWidget = class extends import_view6.WidgetType {
     return true;
   }
 };
-var styles2 = import_view6.EditorView.theme({
+var styles2 = import_view5.EditorView.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1778,12 +1230,12 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    import_view7.EditorView.updateListener.of((update2) => {
+    import_view6.EditorView.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
         }
-        blaster = new Blaster(update2.view.scrollDOM, (0, import_lodash2.default)({
+        blaster = new Blaster(update2.view.scrollDOM, (0, import_lodash.default)({
           particleGravity: 0.2,
           particleShrinkRate: 0.995,
           color: () => [
@@ -1809,7 +1261,7 @@ var blast = (options = defaultOptions) => {
         }
       }
     }),
-    import_view7.keymap.of([
+    import_view6.keymap.of([
       {
         any: (_, event) => {
           if (blaster) {
@@ -2101,7 +1553,7 @@ var commandState = import_state9.StateField.define({
     return state;
   },
   provide: (field) => [
-    import_view8.showTooltip.from(field, (value) => value.tooltip ?? null)
+    import_view7.showTooltip.from(field, (value) => value.tooltip ?? null)
   ]
 });
 var openEffect = import_state8.StateEffect.define();
@@ -2141,9 +1593,9 @@ var commandKeyBindings = [
     run: closeCommand
   }
 ];
-var hintViewPlugin = ({ onHint }) => import_view10.ViewPlugin.fromClass(class {
+var hintViewPlugin = ({ onHint }) => import_view9.ViewPlugin.fromClass(class {
   constructor() {
-    this.deco = import_view10.Decoration.none;
+    this.deco = import_view9.Decoration.none;
   }
   update(update2) {
     const builder = new import_state10.RangeSetBuilder();
@@ -2154,7 +1606,7 @@ var hintViewPlugin = ({ onHint }) => import_view10.ViewPlugin.fromClass(class {
       if (selection.from === selection.to && line.from === line.to) {
         const hint = onHint();
         if (hint) {
-          builder.add(selection.from, selection.to, import_view10.Decoration.widget({
+          builder.add(selection.from, selection.to, import_view9.Decoration.widget({
             widget: new CommandHint(hint)
           }));
         }
@@ -2164,10 +1616,10 @@ var hintViewPlugin = ({ onHint }) => import_view10.ViewPlugin.fromClass(class {
   }
 }, {
   provide: (plugin) => [
-    import_view10.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view10.Decoration.none)
+    import_view9.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view9.Decoration.none)
   ]
 });
-var CommandHint = class extends import_view10.WidgetType {
+var CommandHint = class extends import_view9.WidgetType {
   constructor(content) {
     super();
     this.content = content;
@@ -2206,7 +1658,7 @@ var CommandHint = class extends import_view10.WidgetType {
     return false;
   }
 };
-var floatingMenu = (options) => import_view11.ViewPlugin.fromClass(class {
+var floatingMenu = (options) => import_view10.ViewPlugin.fromClass(class {
   constructor(view) {
     this.rafId = null;
     this.view = view;
@@ -2269,7 +1721,7 @@ var floatingMenu = (options) => import_view11.ViewPlugin.fromClass(class {
 });
 var command = (options = {}) => {
   return [
-    import_view9.keymap.of(commandKeyBindings),
+    import_view8.keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
     options.renderMenu ? floatingMenu({
@@ -2278,10 +1730,10 @@ var command = (options = {}) => {
     options.onHint ? hintViewPlugin({
       onHint: options.onHint
     }) : [],
-    import_view9.EditorView.focusChangeEffect.of((_, focusing) => {
+    import_view8.EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
-    import_view9.EditorView.theme({
+    import_view8.EditorView.theme({
       ".cm-tooltip": {
         background: "transparent"
       }
@@ -2295,7 +1747,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? import_view13.EditorView.scrollIntoView(scrollTo, {
+    effects: scrollTo ? import_view12.EditorView.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: import_state12.Transaction.userEvent.of(stateRestoreAnnotation)
@@ -2337,7 +1789,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    import_view13.EditorView.updateListener.of(({ view, transactions }) => {
+    import_view12.EditorView.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2360,7 +1812,7 @@ var selectionState = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && import_view13.keymap.of([
+    getState && import_view12.keymap.of([
       {
         key: "ctrl-r",
         run: (view) => {
@@ -2416,7 +1868,7 @@ var commentsState = import_state11.StateField.define({
     return value;
   }
 });
-var styles3 = import_view12.EditorView.theme({
+var styles3 = import_view11.EditorView.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2429,18 +1881,18 @@ var styles3 = import_view12.EditorView.theme({
     textDecoration: "underline"
   }
 });
-var createCommentMark = (id, isCurrent) => import_view12.Decoration.mark({
+var createCommentMark = (id, isCurrent) => import_view11.Decoration.mark({
   class: isCurrent ? "cm-comment-current" : "cm-comment",
   attributes: {
     "data-testid": "cm-comment",
     "data-comment-id": id
   }
 });
-var commentsDecorations = import_view12.EditorView.decorations.compute([
+var commentsDecorations = import_view11.EditorView.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
-  const decorations = (0, import_lodash3.default)(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
+  const decorations = (0, import_lodash2.default)(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
       import_log4.log.warn("Invalid range:", range, {
@@ -2456,10 +1908,10 @@ var commentsDecorations = import_view12.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_view12.Decoration.set(decorations);
+  return import_view11.Decoration.set(decorations);
 });
 var commentClickedEffect = import_state11.StateEffect.define();
-var handleCommentClick = import_view12.EditorView.domEventHandlers({
+var handleCommentClick = import_view11.EditorView.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2498,7 +1950,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    import_view12.EditorView.domEventHandlers({
+    import_view11.EditorView.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2520,7 +1972,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    import_view12.EditorView.updateListener.of((update2) => {
+    import_view11.EditorView.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2579,7 +2031,7 @@ var mapTrackedComment = (comment, changes) => ({
 var restoreCommentEffect = import_state11.StateEffect.define({
   map: mapTrackedComment
 });
-var createComment2 = (view) => {
+var createComment = (view) => {
   const options = view.state.facet(optionsFacet);
   const { from, to } = view.state.selection.main;
   if (from === to) {
@@ -2621,17 +2073,17 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate && import_view12.keymap.of([
+    options.onCreate && import_view11.keymap.of([
       {
         key: shortcut,
-        run: callbackWrapper(createComment2)
+        run: callbackWrapper(createComment)
       }
     ]),
     //
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.renderTooltip && (0, import_view12.hoverTooltip)((view, pos) => {
+    options.renderTooltip && (0, import_view11.hoverTooltip)((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -2662,7 +2114,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    import_view12.EditorView.updateListener.of(({ view, state, changes }) => {
+    import_view11.EditorView.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2694,7 +2146,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    import_view12.EditorView.updateListener.of(({ view, state }) => {
+    import_view11.EditorView.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2748,7 +2200,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? import_view12.EditorView.scrollIntoView(range.from, center ? {
+          needsScroll ? import_view11.EditorView.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2794,13 +2246,13 @@ var ExternalCommentSync = class {
     this.unsubscribe = subscribe(updateComments);
   }
 };
-var createExternalCommentSync = (id, subscribe, getComments) => import_view12.ViewPlugin.fromClass(class {
+var createExternalCommentSync = (id, subscribe, getComments) => import_view11.ViewPlugin.fromClass(class {
   constructor(view) {
     return new ExternalCommentSync(view, id, subscribe, getComments);
   }
 });
 var useCommentState = (state) => {
-  return (0, import_react4.useMemo)(() => import_view12.EditorView.updateListener.of((update2) => {
+  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       state.comment = selectionOverlapsComment(update2.state);
       state.selection = hasActiveSelection(update2.state);
@@ -2821,90 +2273,316 @@ var useComments = (view, id, comments2) => {
         });
       }
     }
-  });
-};
-var useCommentClickListener = (onCommentClick) => {
-  return (0, import_react4.useMemo)(() => import_view12.EditorView.updateListener.of((update2) => {
-    update2.transactions.forEach((transaction) => {
-      transaction.effects.forEach((effect) => {
-        if (effect.is(commentClickedEffect)) {
-          onCommentClick(effect.value);
-        }
-      });
-    });
-  }), [
-    onCommentClick
-  ]);
-};
-var debugNodeLogger = (log8 = console.log) => {
-  const logTokens = (state) => (0, import_language.syntaxTree)(state).iterate({
-    enter: (node) => log8(node.type)
-  });
-  return import_state13.StateField.define({
-    create: (state) => logTokens(state),
-    update: (_, tr) => logTokens(tr.state)
-  });
-};
-var styles4 = import_view14.EditorView.theme({
-  ".cm-dropCursor": {
-    borderLeft: "2px solid var(--dx-accentText)",
-    color: "var(--dx-accentText)",
-    padding: "0 4px"
+  });
+};
+var useCommentClickListener = (onCommentClick) => {
+  return (0, import_react4.useMemo)(() => import_view11.EditorView.updateListener.of((update2) => {
+    update2.transactions.forEach((transaction) => {
+      transaction.effects.forEach((effect) => {
+        if (effect.is(commentClickedEffect)) {
+          onCommentClick(effect.value);
+        }
+      });
+    });
+  }), [
+    onCommentClick
+  ]);
+};
+var debugNodeLogger = (log9 = console.log) => {
+  const logTokens = (state) => (0, import_language.syntaxTree)(state).iterate({
+    enter: (node) => log9(node.type)
+  });
+  return import_state13.StateField.define({
+    create: (state) => logTokens(state),
+    update: (_, tr) => logTokens(tr.state)
+  });
+};
+var styles4 = import_view13.EditorView.theme({
+  ".cm-dropCursor": {
+    borderLeft: "2px solid var(--dx-accentText)",
+    color: "var(--dx-accentText)",
+    padding: "0 4px"
+  },
+  ".cm-dropCursor:after": {
+    content: '"\u2190"'
+  }
+});
+var dropFile = (options = {}) => {
+  return [
+    styles4,
+    (0, import_view13.dropCursor)(),
+    import_view13.EditorView.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({
+            selection: {
+              anchor: pos
+            }
+          });
+          options.onDrop?.(view, {
+            files
+          });
+        }
+      }
+    })
+  ];
+};
+var focusEffect = import_state15.StateEffect.define();
+var focusField = import_state15.StateField.define({
+  create: () => false,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(focusEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var focus = [
+  focusField,
+  import_view15.EditorView.domEventHandlers({
+    focus: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(true)
+      }));
+    },
+    blur: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(false)
+      }));
+    }
+  })
+];
+var headings = {
+  1: "text-4xl",
+  2: "text-3xl",
+  3: "text-2xl",
+  4: "text-xl",
+  5: "text-lg",
+  6: ""
+};
+var theme = {
+  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
+  codeMark: "font-mono text-primary-500",
+  mark: "opacity-50",
+  heading: (level) => {
+    return (0, import_react_ui_theme3.mx)(headings[level], "dark:text-primary-400");
+  }
+};
+var getToken = (path, defaultValue) => {
+  const value = (0, import_lodash5.default)(import_react_ui_theme4.tokens, path, defaultValue);
+  return value?.toString() ?? "";
+};
+var fontBody = getToken("fontFamily.body");
+var fontMono = getToken("fontFamily.mono");
+var defaultTheme = {
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
+  },
+  /**
+  * Scroller
+  */
+  ".cm-scroller": {
+    overflowY: "auto"
+  },
+  /**
+  * Content
+  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+  */
+  ".cm-content": {
+    padding: "unset",
+    fontFamily: fontBody,
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px",
+    lineHeight: 1.5,
+    color: "unset"
+  },
+  /**
+  * Gutters
+  * NOTE: Gutters should have the same top margin as the content.
+  */
+  ".cm-gutters": {
+    borderRight: "none",
+    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"
+  },
+  /**
+  * Height is set to match the corresponding line.
+  */
+  ".cm-gutterElement": {
+    alignItems: "center",
+    fontSize: "12px"
+  },
+  /**
+  * Line.
+  */
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "var(--dx-cmActiveLine)"
+  },
+  /**
+  * Cursor (layer).
+  */
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeft: "2px solid var(--dx-cmCursor)"
+  },
+  ".cm-placeholder": {
+    color: "var(--dx-subdued)"
+  },
+  /**
+  * Selection (layer).
+  */
+  ".cm-selectionBackground": {
+    background: "var(--dx-cmSelection)"
+  },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: "var(--dx-cmFocusedSelection)"
+  },
+  /**
+  * Search.
+  * NOTE: Matches comment.
+  */
+  ".cm-searchMatch": {
+    margin: "0 -3px",
+    padding: "3px",
+    borderRadius: "3px",
+    background: "var(--dx-cmHighlightSurface)",
+    color: "var(--dx-cmHighlight)"
+  },
+  ".cm-searchMatch-selected": {
+    textDecoration: "underline"
+  },
+  /**
+  * Link.
+  */
+  ".cm-link": {
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textDecorationColor: "var(--dx-separator)",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem"
+  },
+  ".cm-link > span": {
+    color: "var(--dx-accentText)"
+  },
+  /**
+  * Tooltip.
+  */
+  ".cm-tooltip": {
+    background: "var(--dx-baseSurface)"
+  },
+  ".cm-tooltip-below": {},
+  /**
+  * Autocomplete.
+  * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+  */
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    maxHeight: "20em"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: "var(--dx-accentText)"
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important",
+    borderColor: "var(--dx-separator)"
+  },
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: fontBody
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none !important",
+    opacity: 0.5
+  },
+  /**
+  * Panels
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  // TODO(burdon): Implement custom panel (with icon buttons).
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: fontBody,
+    backgroundColor: "var(--surface-bg)"
+  },
+  ".cm-panel input, .cm-panel button, .cm-panel label": {
+    color: "var(--dx-subdued)",
+    fontFamily: fontBody,
+    fontSize: "14px",
+    all: "unset",
+    margin: "3px !important",
+    padding: "2px 6px !important",
+    outline: "1px solid transparent"
+  },
+  ".cm-panel input, .cm-panel button": {
+    backgroundColor: "var(--dx-input)"
+  },
+  ".cm-panel input:focus, .cm-panel button:focus": {
+    outline: "1px solid var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel label": {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer"
+  },
+  ".cm-panel input.cm-textfield": {},
+  ".cm-panel input[type=checkbox]": {
+    width: "8px",
+    height: "8px",
+    marginRight: "6px !important",
+    padding: "2px !important",
+    color: "var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel button": {
+    "&:hover": {
+      backgroundColor: "var(--dx-accentSurfaceHover) !important"
+    },
+    "&:active": {
+      backgroundColor: "var(--dx-accentSurfaceHover)"
+    }
   },
-  ".cm-dropCursor:after": {
-    content: '"\u2190"'
+  ".cm-panel.cm-search": {
+    padding: "4px",
+    borderTop: "1px solid var(--dx-separator)"
   }
-});
-var dropFile = (options = {}) => {
-  return [
-    styles4,
-    (0, import_view14.dropCursor)(),
-    import_view14.EditorView.domEventHandlers({
-      drop: (event, view) => {
-        event.preventDefault();
-        const files = event.dataTransfer?.files;
-        const pos = view.posAtCoords(event);
-        if (files?.length && pos !== null) {
-          view.dispatch({
-            selection: {
-              anchor: pos
-            }
-          });
-          options.onDrop?.(view, {
-            files
-          });
-        }
-      }
-    })
-  ];
 };
-var focusEffect = import_state15.StateEffect.define();
-var focusField = import_state15.StateField.define({
-  create: () => false,
-  update: (value, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(focusEffect)) {
-        return effect.value;
-      }
-    }
-    return value;
-  }
-});
-var focus = [
-  focusField,
-  import_view16.EditorView.domEventHandlers({
-    focus: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(true)
-      }));
-    },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(false)
-      }));
-    }
-  })
-];
 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 = {
@@ -2925,10 +2603,10 @@ var keymaps = {
   default: import_commands2.defaultKeymap
 };
 var createBasicExtensions = (_props) => {
-  const props = (0, import_lodash4.default)({}, _props, defaultBasicOptions);
+  const props = (0, import_lodash3.default)({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    import_view15.EditorView.exceptionSink.of((err) => {
+    import_view14.EditorView.exceptionSink.of((err) => {
       import_log5.log.catch(err, void 0, {
         F: __dxlog_file8,
         L: 96,
@@ -2939,22 +2617,22 @@ var createBasicExtensions = (_props) => {
     props.allowMultipleSelections && import_state14.EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && (0, import_language2.bracketMatching)(),
     props.closeBrackets && (0, import_autocomplete2.closeBrackets)(),
-    props.dropCursor && (0, import_view15.dropCursor)(),
-    props.drawSelection && (0, import_view15.drawSelection)({
+    props.dropCursor && (0, import_view14.dropCursor)(),
+    props.drawSelection && (0, import_view14.drawSelection)({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && import_view15.EditorView.editable.of(props.editable),
+    props.editable !== void 0 && import_view14.EditorView.editable.of(props.editable),
     props.focus && focus,
-    props.highlightActiveLine && (0, import_view15.highlightActiveLine)(),
+    props.highlightActiveLine && (0, import_view14.highlightActiveLine)(),
     props.history && (0, import_commands2.history)(),
-    props.lineNumbers && (0, import_view15.lineNumbers)(),
-    props.lineWrapping && import_view15.EditorView.lineWrapping,
-    props.placeholder && (0, import_view15.placeholder)(props.placeholder),
+    props.lineNumbers && (0, import_view14.lineNumbers)(),
+    props.lineWrapping && import_view14.EditorView.lineWrapping,
+    props.placeholder && (0, import_view14.placeholder)(props.placeholder),
     props.readOnly !== void 0 && import_state14.EditorState.readOnly.of(props.readOnly),
-    props.scrollPastEnd && (0, import_view15.scrollPastEnd)(),
+    props.scrollPastEnd && (0, import_view14.scrollPastEnd)(),
     props.tabSize && import_state14.EditorState.tabSize.of(props.tabSize),
     // https://codemirror.net/docs/ref/#view.KeyBinding
-    import_view15.keymap.of([
+    import_view14.keymap.of([
       ...(props.keymap && keymaps[props.keymap]) ?? [],
       // NOTE: Tabs are also configured by markdown extension.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
@@ -2983,16 +2661,16 @@ var defaultThemeSlots = {
   }
 };
 var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
-  const slots = (0, import_lodash4.default)({}, _slots, defaultThemeSlots);
+  const slots = (0, import_lodash3.default)({}, _slots, defaultThemeSlots);
   return [
-    import_view15.EditorView.darkTheme.of(themeMode === "dark"),
-    import_view15.EditorView.baseTheme(styles5 ? (0, import_lodash5.default)({}, defaultTheme, styles5) : defaultTheme),
+    import_view14.EditorView.darkTheme.of(themeMode === "dark"),
+    import_view14.EditorView.baseTheme(styles5 ? (0, import_lodash4.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_view15.EditorView.editorAttributes.of({
+    slots.editor?.className && import_view14.EditorView.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && import_view15.EditorView.contentAttributes.of({
+    slots.content?.className && import_view14.EditorView.contentAttributes.of({
       class: slots.content.className
     })
   ].filter(import_util4.isNotFalsy);
@@ -3039,7 +2717,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  import_view17.EditorView.theme({
+  import_view16.EditorView.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -3052,11 +2730,11 @@ var folding = (_props = {}) => [
 ];
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(import_view18.EditorView.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(import_view17.EditorView.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(import_view18.EditorView.updateListener.of((update2) => {
+  onChange && extensions.push(import_view17.EditorView.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -3947,7 +3625,7 @@ var toggleCodeblock = (target) => {
 };
 var formattingKeymap = (_options = {}) => {
   return [
-    import_view19.keymap.of([
+    import_view18.keymap.of([
       {
         key: "meta-b",
         run: toggleStrong
@@ -4148,7 +3826,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return (0, import_react6.useMemo)(() => import_view19.EditorView.updateListener.of((update2) => {
+  return (0, import_react6.useMemo)(() => import_view18.EditorView.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4194,7 +3872,7 @@ var processEditorPayload = (view, { type, data }) => {
       })(view);
       break;
     case "comment":
-      createComment2(view);
+      createComment(view);
       break;
   }
   requestAnimationFrame(() => {
@@ -4400,7 +4078,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     }),
     // Custom styles.
     (0, import_language5.syntaxHighlighting)(markdownHighlightStyle()),
-    import_view20.keymap.of([
+    import_view19.keymap.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       import_commands3.indentWithTab,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -4434,7 +4112,7 @@ var convertTreeToJson = (state) => {
   return treeToJson((0, import_language7.syntaxTree)(state).cursor());
 };
 var adjustChanges = () => {
-  return import_view22.ViewPlugin.fromClass(class {
+  return import_view21.ViewPlugin.fromClass(class {
     update(update2) {
       const tree = (0, import_language9.syntaxTree)(update2.state);
       const adjustments = [];
@@ -4477,11 +4155,11 @@ var adjustChanges = () => {
               if (url) {
                 const node = tree.resolveInner(fromA, -1);
                 const invalidPositions = /* @__PURE__ */ new Set([
-                  "Link",
-                  "LinkMark",
                   "Code",
                   "CodeText",
                   "FencedCode",
+                  "Link",
+                  "LinkMark",
                   "URL"
                 ]);
                 if (!invalidPositions.has(node?.name)) {
@@ -4576,7 +4254,7 @@ var image = (_options = {}) => {
   return [
     import_state20.StateField.define({
       create: (state) => {
-        return import_view23.Decoration.set(buildDecorations(0, state.doc.length, state));
+        return import_view22.Decoration.set(buildDecorations(0, state.doc.length, state));
       },
       update: (value, tr) => {
         if (!tr.docChanged && !tr.selection) {
@@ -4599,7 +4277,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => import_view23.EditorView.decorations.from(field)
+      provide: (field) => import_view22.EditorView.decorations.from(field)
     })
   ];
 };
@@ -4617,7 +4295,7 @@ var buildDecorations = (from, to, state) => {
             return;
           }
           preloadImage(url);
-          decorations.push(import_view23.Decoration.replace({
+          decorations.push(import_view22.Decoration.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide2 ? node.from : node.to, node.to));
@@ -4637,7 +4315,7 @@ var preloadImage = (url) => {
     preloaded.add(url);
   }
 };
-var ImageWidget = class extends import_view23.WidgetType {
+var ImageWidget = class extends import_view22.WidgetType {
   constructor(_url) {
     super();
     this._url = _url;
@@ -4659,7 +4337,7 @@ var ImageWidget = class extends import_view23.WidgetType {
 };
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = import_view24.EditorView.theme({
+var formattingStyles = import_view23.EditorView.theme({
   /**
   * Horizontal rule.
   */
@@ -4706,11 +4384,11 @@ var formattingStyles = import_view24.EditorView.theme({
     background: "var(--dx-cmCodeblock)",
     paddingInline: "1rem !important"
   },
-  "& .cm-codeblock-first": {
+  "& .cm-codeblock-start": {
     borderTopLeftRadius: ".25rem",
     borderTopRightRadius: ".25rem"
   },
-  "& .cm-codeblock-last": {
+  "& .cm-codeblock-end": {
     borderBottomLeftRadius: ".25rem",
     borderBottomRightRadius: ".25rem"
   },
@@ -4776,897 +4454,1522 @@ var formattingStyles = import_view24.EditorView.theme({
     }
   }
 });
-var table = (options = {}) => {
-  return import_state21.StateField.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => import_view25.EditorView.decorations.from(field)
-  });
+var table = (options = {}) => {
+  return import_state21.StateField.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => import_view24.EditorView.decorations.from(field)
+  });
+};
+var update = (state, _options) => {
+  const builder = new import_state21.RangeSetBuilder();
+  const cursor = state.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
+    return table2.rows?.[table2.rows.length - 1];
+  };
+  (0, import_language11.syntaxTree)(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        case "Table": {
+          tables.push({
+            from: node.from,
+            to: node.to
+          });
+          break;
+        }
+        case "TableHeader": {
+          getTable().header = [];
+          break;
+        }
+        case "TableRow": {
+          (getTable().rows ??= []).push([]);
+          break;
+        }
+        case "TableCell": {
+          const row = getRow();
+          if (row) {
+            row.push(state.sliceDoc(node.from, node.to));
+          } else {
+            getTable().header?.push(state.sliceDoc(node.from, node.to));
+          }
+          break;
+        }
+      }
+    }
+  });
+  tables.forEach((table2) => {
+    const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
+    if (replace) {
+      builder.add(table2.from, table2.to, import_view24.Decoration.replace({
+        block: true,
+        widget: new TableWidget(table2)
+      }));
+    } else {
+      builder.add(table2.from, table2.to, import_view24.Decoration.mark({
+        class: "cm-table"
+      }));
+    }
+  });
+  return builder.finish();
+};
+var TableWidget = class extends import_view24.WidgetType {
+  constructor(_table) {
+    super();
+    this._table = _table;
+  }
+  eq(other) {
+    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
+  }
+  toDOM(view) {
+    const div = document.createElement("div");
+    const table2 = div.appendChild(document.createElement("table"));
+    const header = table2.appendChild(document.createElement("thead"));
+    const tr = header.appendChild(document.createElement("tr"));
+    this._table.header?.forEach((cell) => {
+      const th = document.createElement("th");
+      th.setAttribute("class", "cm-table-head");
+      tr.appendChild(th).textContent = cell;
+    });
+    const body = table2.appendChild(document.createElement("tbody"));
+    this._table.rows?.forEach((row) => {
+      const tr2 = body.appendChild(document.createElement("tr"));
+      row.forEach((cell) => {
+        const td = document.createElement("td");
+        td.setAttribute("class", "cm-table-cell");
+        tr2.appendChild(td).textContent = cell;
+      });
+    });
+    return div;
+  }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
+};
+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 {
+  toDOM() {
+    const el = document.createElement("span");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var LinkButton = class extends import_view20.WidgetType {
+  constructor(url, render) {
+    super();
+    this.url = url;
+    this.render = render;
+  }
+  eq(other) {
+    return this.url === other.url;
+  }
+  // TODO(burdon): Create icon and link directly without react?
+  toDOM(view) {
+    const el = document.createElement("span");
+    this.render(el, {
+      url: this.url
+    }, view);
+    return el;
+  }
+};
+var CheckboxWidget = class extends import_view20.WidgetType {
+  constructor(_checked) {
+    super();
+    this._checked = _checked;
+  }
+  eq(other) {
+    return this._checked === other._checked;
+  }
+  toDOM(view) {
+    const input = document.createElement("input");
+    input.className = "cm-task-checkbox dx-checkbox";
+    input.type = "checkbox";
+    input.tabIndex = -1;
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute("disabled", "true");
+    } else {
+      input.onmousedown = (event) => {
+        const line = view.state.doc.lineAt(view.posAtDOM(span));
+        const text = view.state.sliceDoc(line.from, line.to);
+        const match = text.match(/^\s*- (\[[xX ]]).*/);
+        if (match) {
+          const [, checked] = match;
+          const pos = line.from + text.indexOf(checked);
+          this._checked = checked !== "[ ]";
+          view.dispatch({
+            changes: {
+              from: pos + 1,
+              to: pos + 2,
+              insert: this._checked ? " " : "x"
+            }
+          });
+          event.preventDefault();
+        }
+      };
+    }
+    const span = document.createElement("span");
+    span.className = "cm-task";
+    span.appendChild(input);
+    return span;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var TextWidget = class extends import_view20.WidgetType {
+  constructor(text, className) {
+    super();
+    this.text = text;
+    this.className = className;
+  }
+  toDOM() {
+    const el = document.createElement("span");
+    if (this.className) {
+      el.className = this.className;
+    }
+    el.innerText = this.text;
+    return el;
+  }
+};
+var hide = import_view20.Decoration.replace({});
+var blockQuote = import_view20.Decoration.line({
+  class: "cm-blockquote"
+});
+var fencedCodeLine = import_view20.Decoration.line({
+  class: "cm-code cm-codeblock-line"
+});
+var fencedCodeLineFirst = import_view20.Decoration.line({
+  class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-start")
+});
+var fencedCodeLineLast = import_view20.Decoration.line({
+  class: (0, import_react_ui_theme5.mx)("cm-code cm-codeblock-line", "cm-codeblock-end")
+});
+var commentBlockLine = fencedCodeLine;
+var commentBlockLineFirst = fencedCodeLineFirst;
+var commentBlockLineLast = fencedCodeLineLast;
+var horizontalRule = import_view20.Decoration.replace({
+  widget: new HorizontalRuleWidget()
+});
+var checkedTask = import_view20.Decoration.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedTask = import_view20.Decoration.replace({
+  widget: new CheckboxWidget(false)
+});
+var editingRange = (state, range, focus2) => {
+  const { readOnly, selection: { main: { head } } } = state;
+  return focus2 && !readOnly && head >= range.from && head <= range.to;
 };
-var update = (state, _options) => {
-  const builder = new import_state21.RangeSetBuilder();
-  const cursor = state.selection.main.head;
-  const tables = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table2 = getTable();
-    return table2.rows?.[table2.rows.length - 1];
+var autoHideTags = /* @__PURE__ */ new Set([
+  "CodeMark",
+  "CodeInfo",
+  "EmphasisMark",
+  "StrikethroughMark",
+  "SubscriptMark",
+  "SuperscriptMark"
+]);
+var buildDecorations2 = (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_invariant4.invariant)(level > 0, void 0, {
+      F: __dxlog_file9,
+      L: 179,
+      S: void 0,
+      A: [
+        "level > 0",
+        ""
+      ]
+    });
+    if (level > headerLevels.length) {
+      const len = headerLevels.length;
+      headerLevels.length = level;
+      headerLevels.fill(null, len);
+      headerLevels[level - 1] = {
+        type: node.name,
+        from: node.from,
+        to: node.to,
+        level,
+        number: 0
+      };
+    } else {
+      headerLevels.splice(level);
+    }
+    return headerLevels.slice(0, level);
   };
-  (0, import_language11.syntaxTree)(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        case "Table": {
-          tables.push({
-            from: node.from,
-            to: node.to
-          });
+  const listLevels = [];
+  const enterList = (node) => {
+    listLevels.push({
+      type: node.name,
+      from: node.from,
+      to: node.to,
+      level: listLevels.length,
+      number: 0
+    });
+  };
+  const leaveList = () => {
+    listLevels.pop();
+  };
+  const getCurrentListLevel = () => {
+    (0, import_invariant4.invariant)(listLevels.length, void 0, {
+      F: __dxlog_file9,
+      L: 201,
+      S: void 0,
+      A: [
+        "listLevels.length",
+        ""
+      ]
+    });
+    return listLevels[listLevels.length - 1];
+  };
+  const enterNode = (node) => {
+    switch (node.name) {
+      // ATXHeading > HeaderMark > Paragraph
+      // NOTE: Numbering requires processing the entire document since otherwise only the visible range will be
+      // processed and the numbering will be incorrect.
+      case "ATXHeading1":
+      case "ATXHeading2":
+      case "ATXHeading3":
+      case "ATXHeading4":
+      case "ATXHeading5":
+      case "ATXHeading6": {
+        const level = parseInt(node.name["ATXHeading".length]);
+        const headers = getHeaderLevels(node, level);
+        if (options.numberedHeadings?.from !== void 0) {
+          const header = headers[level - 1];
+          if (header) {
+            header.number++;
+          }
+        }
+        const editing = editingRange(state, node, focus2);
+        if (editing) {
           break;
         }
-        case "TableHeader": {
-          getTable().header = [];
+        const mark = node.node.firstChild;
+        if (mark?.name === "HeaderMark") {
+          const { from, to = 6 } = options.numberedHeadings ?? {};
+          const text = view.state.sliceDoc(node.from, node.to);
+          const len = text.match(/[#\s]+/)[0].length;
+          if (!from || level < from || level > to) {
+            atomicDeco.add(mark.from, mark.from + len, hide);
+          } else {
+            const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
+            if (num.length) {
+              atomicDeco.add(mark.from, mark.from + len, import_view20.Decoration.replace({
+                widget: new TextWidget(num, theme.heading(level))
+              }));
+            }
+          }
+        }
+        return false;
+      }
+      //
+      // Lists.
+      // [BulletList | OrderedList] > (ListItem > ListMark) > (Task > TaskMarker)?
+      //
+      case "BulletList":
+      case "OrderedList": {
+        enterList(node);
+        break;
+      }
+      case "ListItem": {
+        const line = state.doc.lineAt(node.from);
+        const list = getCurrentListLevel();
+        const width = list.type === "OrderedList" ? orderedListIndentationWidth : bulletListIndentationWidth;
+        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
+        if (node.from === line.to - 1) {
+          return false;
+        }
+        deco.add(line.from, line.from, import_view20.Decoration.line({
+          class: "cm-list-item",
+          attributes: {
+            style: `padding-left: ${offset}px; text-indent: -${width}px;`
+          }
+        }));
+        break;
+      }
+      case "ListMark": {
+        const list = getCurrentListLevel();
+        const next = tree.resolve(node.to + 1, 1);
+        if (next?.name === "TaskMarker") {
           break;
         }
-        case "TableRow": {
-          (getTable().rows ??= []).push([]);
-          break;
+        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({
+          widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
+        }));
+        break;
+      }
+      case "TaskMarker": {
+        const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+        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, checked ? checkedTask : uncheckedTask);
+        break;
+      }
+      //
+      // Blockquote > QuoteMark > Paragraph
+      //
+      case "Blockquote": {
+        const editing = editingRange(state, node, focus2);
+        const quoteMark = node.node.getChild("QuoteMark");
+        const paragraph = node.node.getChild("Paragraph");
+        if (!editing && quoteMark && paragraph) {
+          atomicDeco.add(quoteMark.from, paragraph.from, hide);
         }
-        case "TableCell": {
-          const row = getRow();
-          if (row) {
-            row.push(state.sliceDoc(node.from, node.to));
-          } else {
-            getTable().header?.push(state.sliceDoc(node.from, node.to));
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
+          }
+          if (block.from > node.to) {
+            break;
+          }
+          deco.add(block.from, block.from, blockQuote);
+        }
+        break;
+      }
+      //
+      // CommentBlock
+      //
+      case "CommentBlock": {
+        const editing = editingRange(state, node, focus2);
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
+          }
+          if (block.from > node.to) {
+            break;
+          }
+          const isFirst = block.from <= node.from;
+          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
+          deco.add(block.from, block.from, isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine);
+          if (!editing && (isFirst || isLast)) {
+            atomicDeco.add(block.from, block.to, hide);
+          }
+        }
+        break;
+      }
+      //
+      // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
+      //
+      case "FencedCode": {
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
+          }
+          if (block.from > node.to) {
+            break;
+          }
+          const first = block.from <= node.from;
+          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
+          deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
+          const editing = editingRange(state, node, focus2);
+          if (!editing && (first || last)) {
+            atomicDeco.add(block.from, block.to, hide);
+          }
+        }
+        return false;
+      }
+      //
+      // Link > [LinkMark, URL]
+      //
+      case "Link": {
+        const marks = node.node.getChildren("LinkMark");
+        const urlNode = node.node.getChild("URL");
+        const editing = editingRange(state, node, focus2);
+        if (urlNode && marks.length >= 2) {
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          if (!editing) {
+            atomicDeco.add(node.from, marks[0].to, hide);
+          }
+          deco.add(marks[0].to, marks[1].from, import_view20.Decoration.mark({
+            tagName: "a",
+            attributes: {
+              class: "cm-link",
+              href: url,
+              rel: "noreferrer",
+              target: "_blank"
+            }
+          }));
+          if (!editing) {
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view20.Decoration.replace({
+              widget: new LinkButton(url, options.renderLinkButton)
+            }) : hide);
+          }
+        }
+        break;
+      }
+      //
+      // HR
+      //
+      case "HorizontalRule": {
+        if (!editingRange(state, node, focus2)) {
+          deco.add(node.from, node.to, horizontalRule);
+        }
+        break;
+      }
+      default: {
+        if (autoHideTags.has(node.name)) {
+          if (!editingRange(state, node.node.parent, focus2)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
-          break;
         }
       }
     }
-  });
-  tables.forEach((table2) => {
-    const replace = state.readOnly || cursor < table2.from || cursor > table2.to;
-    if (replace) {
-      builder.add(table2.from, table2.to, import_view25.Decoration.replace({
-        block: true,
-        widget: new TableWidget(table2)
-      }));
-    } else {
-      builder.add(table2.from, table2.to, import_view25.Decoration.mark({
-        class: "cm-table"
-      }));
+  };
+  const leaveNode = (node) => {
+    switch (node.name) {
+      case "BulletList":
+      case "OrderedList": {
+        leaveList();
+        break;
+      }
     }
-  });
-  return builder.finish();
-};
-var TableWidget = class extends import_view25.WidgetType {
-  constructor(_table) {
-    super();
-    this._table = _table;
-  }
-  eq(other) {
-    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
-  }
-  toDOM(view) {
-    const div = document.createElement("div");
-    const table2 = div.appendChild(document.createElement("table"));
-    const header = table2.appendChild(document.createElement("thead"));
-    const tr = header.appendChild(document.createElement("tr"));
-    this._table.header?.forEach((cell) => {
-      const th = document.createElement("th");
-      th.setAttribute("class", "cm-table-head");
-      tr.appendChild(th).textContent = cell;
-    });
-    const body = table2.appendChild(document.createElement("tbody"));
-    this._table.rows?.forEach((row) => {
-      const tr2 = body.appendChild(document.createElement("tr"));
-      row.forEach((cell) => {
-        const td = document.createElement("td");
-        td.setAttribute("class", "cm-table-cell");
-        tr2.appendChild(td).textContent = cell;
+  };
+  const tree = (0, import_language8.syntaxTree)(state);
+  if (options.numberedHeadings?.from === void 0) {
+    for (const { from, to } of view.visibleRanges) {
+      tree.iterate({
+        from,
+        to,
+        enter: wrapWithCatch(enterNode),
+        leave: wrapWithCatch(leaveNode)
       });
+    }
+  } else {
+    tree.iterate({
+      enter: wrapWithCatch(enterNode),
+      leave: wrapWithCatch(leaveNode)
     });
-    return div;
-  }
-  ignoreEvent(e) {
-    return !/^mouse/.test(e.type);
-  }
-};
-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_view21.WidgetType {
-  toDOM() {
-    const el = document.createElement("span");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var LinkButton = class extends import_view21.WidgetType {
-  constructor(url, render) {
-    super();
-    this.url = url;
-    this.render = render;
-  }
-  eq(other) {
-    return this.url === other.url;
-  }
-  // TODO(burdon): Create icon and link directly without react?
-  toDOM(view) {
-    const el = document.createElement("span");
-    this.render(el, {
-      url: this.url
-    }, view);
-    return el;
   }
+  return {
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
+  };
 };
-var CheckboxWidget = class extends import_view21.WidgetType {
-  constructor(_checked) {
-    super();
-    this._checked = _checked;
-  }
-  eq(other) {
-    return this._checked === other._checked;
-  }
-  toDOM(view) {
-    const input = document.createElement("input");
-    input.className = "cm-task-checkbox dx-checkbox";
-    input.type = "checkbox";
-    input.tabIndex = -1;
-    input.checked = this._checked;
-    if (view.state.readOnly) {
-      input.setAttribute("disabled", "true");
-    } else {
-      input.onmousedown = (event) => {
-        const line = view.state.doc.lineAt(view.posAtDOM(span));
-        const text = view.state.sliceDoc(line.from, line.to);
-        const match = text.match(/^\s*- (\[[xX ]]).*/);
-        if (match) {
-          const [, checked] = match;
-          const pos = line.from + text.indexOf(checked);
-          this._checked = checked !== "[ ]";
+var forceUpdate = import_state18.StateEffect.define();
+var decorateMarkdown = (options = {}) => {
+  return [
+    import_view20.ViewPlugin.fromClass(class {
+      constructor(view) {
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
+        }
+      }
+      // Defer update in case moving through the document.
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = setTimeout(() => {
           view.dispatch({
-            changes: {
-              from: pos + 1,
-              to: pos + 2,
-              insert: this._checked ? " " : "x"
-            }
+            effects: forceUpdate.of(null)
           });
-          event.preventDefault();
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
         }
-      };
-    }
-    const span = document.createElement("span");
-    span.className = "cm-task";
-    span.appendChild(input);
-    return span;
-  }
-  ignoreEvent() {
-    return false;
-  }
+      }
+      destroy() {
+        this.clearUpdate();
+      }
+    }, {
+      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)
+      ]
+    }),
+    image(),
+    table(),
+    adjustChanges(),
+    formattingStyles
+  ];
 };
-var TextWidget = class extends import_view21.WidgetType {
-  constructor(text, className) {
-    super();
-    this.text = text;
-    this.className = className;
-  }
-  toDOM() {
-    const el = document.createElement("span");
-    if (this.className) {
-      el.className = this.className;
+var linkTooltip = (renderTooltip) => {
+  return (0, import_view25.hoverTooltip)((view, pos, side) => {
+    const syntax = (0, import_language12.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;
     }
-    el.innerText = this.text;
-    return el;
-  }
+    const url = link && link.getChild("URL");
+    if (!url || !link) {
+      return null;
+    }
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      // NOTE: Forcing above causes the tooltip to flicker.
+      // above: true,
+      create: () => {
+        const el = document.createElement("div");
+        el.className = (0, import_react_ui_theme6.tooltipContent)({});
+        renderTooltip(el, {
+          url: urlText
+        }, view);
+        return {
+          dom: el,
+          offset: {
+            x: 0,
+            y: 4
+          }
+        };
+      }
+    };
+  }, {
+    // NOTE: 0 = default of 300ms.
+    hoverTime: 1
+  });
 };
-var hide = import_view21.Decoration.replace({});
-var blockQuote = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-blockquote")
-});
-var fencedCodeLine = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line")
-});
-var fencedCodeLineFirst = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-first")
-});
-var fencedCodeLineLast = import_view21.Decoration.line({
-  class: (0, import_react_ui_theme6.mx)("cm-code cm-codeblock-line", "cm-codeblock-last")
-});
-var commentBlockLine = fencedCodeLine;
-var commentBlockLineFirst = fencedCodeLineFirst;
-var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = import_view21.Decoration.replace({
-  widget: new HorizontalRuleWidget()
-});
-var checkedTask = import_view21.Decoration.replace({
-  widget: new CheckboxWidget(true)
-});
-var uncheckedTask = import_view21.Decoration.replace({
-  widget: new CheckboxWidget(false)
-});
-var editingRange = (state, range, focus2) => {
-  const { readOnly, selection: { main: { head } } } = state;
-  return focus2 && !readOnly && head >= range.from && head <= range.to;
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/outliner.ts";
+var indentLevel = 2;
+var matchTaskMarker = /^\s*- (\[ \]|\[x\])? /;
+var getLineInfo = (line) => {
+  const match = line.text.match(matchTaskMarker);
+  const start = line.from + (match?.[0]?.length ?? 0);
+  return {
+    match,
+    start
+  };
 };
-var autoHideTags = /* @__PURE__ */ new Set([
-  "CodeMark",
-  "CodeInfo",
-  "EmphasisMark",
-  "StrikethroughMark",
-  "SubscriptMark",
-  "SuperscriptMark"
-]);
-var buildDecorations2 = (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_invariant4.invariant)(level > 0, void 0, {
-      F: __dxlog_file9,
-      L: 179,
-      S: void 0,
-      A: [
-        "level > 0",
-        ""
-      ]
-    });
-    if (level > headerLevels.length) {
-      const len = headerLevels.length;
-      headerLevels.length = level;
-      headerLevels.fill(null, len);
-      headerLevels[level - 1] = {
-        type: node.name,
-        from: node.from,
-        to: node.to,
-        level,
-        number: 0
-      };
-    } else {
-      headerLevels.splice(level);
+var outliner = () => [
+  import_state22.EditorState.transactionFilter.of((tr) => {
+    if (!tr.docChanged) {
+      const pos = tr.selection?.ranges[tr.selection?.mainIndex]?.from;
+      if (pos != null) {
+        const { match, start } = getLineInfo(tr.startState.doc.lineAt(pos));
+        if (match) {
+          if (pos < start) {
+            return [
+              {
+                selection: {
+                  anchor: start,
+                  head: start
+                }
+              }
+            ];
+          }
+        }
+      }
+      return tr;
     }
-    return headerLevels.slice(0, level);
-  };
-  const listLevels = [];
-  const enterList = (node) => {
-    listLevels.push({
-      type: node.name,
-      from: node.from,
-      to: node.to,
-      level: listLevels.length,
-      number: 0
-    });
-  };
-  const leaveList = () => {
-    listLevels.pop();
-  };
-  const getCurrentListLevel = () => {
-    (0, import_invariant4.invariant)(listLevels.length, void 0, {
-      F: __dxlog_file9,
-      L: 201,
-      S: void 0,
-      A: [
-        "listLevels.length",
-        ""
-      ]
-    });
-    return listLevels[listLevels.length - 1];
-  };
-  const enterNode = (node) => {
-    switch (node.name) {
-      // ATXHeading > HeaderMark > Paragraph
-      // NOTE: Numbering requires processing the entire document since otherwise only the visible range will be
-      // processed and the numbering will be incorrect.
-      case "ATXHeading1":
-      case "ATXHeading2":
-      case "ATXHeading3":
-      case "ATXHeading4":
-      case "ATXHeading5":
-      case "ATXHeading6": {
-        const level = parseInt(node.name["ATXHeading".length]);
-        const headers = getHeaderLevels(node, level);
-        if (options.numberedHeadings?.from !== void 0) {
-          const header = headers[level - 1];
-          if (header) {
-            header.number++;
+    const changes = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, insert) => {
+      const line = tr.startState.doc.lineAt(fromA);
+      const isTaskMarker = line.text.match(matchTaskMarker);
+      if (isTaskMarker) {
+        const { start } = getLineInfo(line);
+        const replace = start === toA && toA - fromA === insert.length;
+        if (replace) {
+          import_log6.log.info("delete line", void 0, {
+            F: __dxlog_file10,
+            L: 82,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          changes.push({
+            from: line.from - 1,
+            to: toA
+          });
+          return;
+        }
+        if (fromB === toB) {
+          if (toA === line.to) {
+            const line2 = tr.state.doc.lineAt(fromA);
+            if (line2.text.match(/^\s*$/)) {
+              if (line2.from === 0) {
+                import_log6.log.info("skip", void 0, {
+                  F: __dxlog_file10,
+                  L: 94,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
+                changes.push({
+                  from: 0,
+                  to: 0
+                });
+                return;
+              } else {
+                import_log6.log.info("delete line", void 0, {
+                  F: __dxlog_file10,
+                  L: 99,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
+                changes.push({
+                  from: line2.from - 1,
+                  to: toA
+                });
+                return;
+              }
+            }
           }
+          return;
         }
-        const editing = editingRange(state, node, focus2);
-        if (editing) {
-          break;
+        if (insert.length === indentLevel) {
+          if (line.number === 1) {
+            import_log6.log.info("skip", void 0, {
+              F: __dxlog_file10,
+              L: 111,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+            changes.push({
+              from: 0,
+              to: 0
+            });
+            return;
+          } else {
+            const getIndent = (text) => (text.match(/^\s*/)?.[0]?.length ?? 0) / indentLevel;
+            const currentIndent = getIndent(line.text);
+            const indentPrevious = getIndent(tr.state.doc.lineAt(fromA - 1).text);
+            if (currentIndent > indentPrevious) {
+              import_log6.log.info("skip", void 0, {
+                F: __dxlog_file10,
+                L: 119,
+                S: void 0,
+                C: (f, a) => f(...a)
+              });
+              changes.push({
+                from: 0,
+                to: 0
+              });
+              return;
+            }
+          }
+        }
+        import_log6.log.info("change", {
+          line: {
+            from: line.from,
+            to: line.to
+          },
+          start,
+          a: [
+            fromA,
+            toA
+          ],
+          b: [
+            fromB,
+            toB
+          ],
+          insert: {
+            text: insert.toString(),
+            length: insert.length
+          }
+        }, {
+          F: __dxlog_file10,
+          L: 134,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+    });
+    if (changes.length > 0) {
+      return [
+        {
+          changes
+        }
+      ];
+    }
+    return tr;
+  }),
+  import_state22.StateField.define({
+    create: (state) => {
+      return import_view26.Decoration.set(buildDecorations3(0, state.doc.length, state));
+    },
+    update: (value, tr) => {
+      const from = 0;
+      const to = tr.state.doc.length;
+      return value.map(tr.changes).update({
+        filterFrom: 0,
+        filterTo: tr.state.doc.length,
+        filter: () => false,
+        add: buildDecorations3(from, to, tr.state)
+      });
+    },
+    provide: (field) => import_view26.EditorView.decorations.from(field)
+  }),
+  // TODO(burdon): Increase indent padding by configuring decorate extension.
+  // TODO(burdon): Hover to select entire group.
+  import_view26.EditorView.theme({
+    ".cm-list-item-start": {
+      borderTop: "1px solid var(--dx-separator)",
+      borderLeft: "1px solid var(--dx-separator)",
+      borderRight: "1px solid var(--dx-separator)",
+      borderTopLeftRadius: "4px",
+      borderTopRightRadius: "4px",
+      paddingTop: "4px",
+      marginTop: "8px"
+    },
+    ".cm-list-item-end": {
+      borderLeft: "1px solid var(--dx-separator)",
+      borderRight: "1px solid var(--dx-separator)",
+      borderBottom: "1px solid var(--dx-separator)",
+      borderBottomLeftRadius: "4px",
+      borderBottomRightRadius: "4px",
+      paddingBottom: "4px",
+      marginBottom: "8px"
+    },
+    ".cm-list-item-continuation": {
+      borderLeft: "1px solid var(--dx-separator)",
+      borderRight: "1px solid var(--dx-separator)",
+      // TODO(burdon): Should match parent indentation.
+      paddingLeft: "24px"
+    },
+    // TODO(burdon): Set via options to decorate extension.
+    ".cm-list-item-continuation.cm-codeblock-start": {
+      borderRadius: "0"
+    }
+  })
+];
+var buildDecorations3 = (from, to, state) => {
+  const decorations = [];
+  (0, import_language13.syntaxTree)(state).iterate({
+    enter: (node) => {
+      if (node.name === "ListItem") {
+        const sub = node.node.getChild("BulletList");
+        const lineStart = state.doc.lineAt(node.from);
+        const lineEnd = sub ? state.doc.lineAt(state.doc.lineAt(sub.from).from - 1) : state.doc.lineAt(node.to);
+        decorations.push(import_view26.Decoration.line({
+          class: (0, import_react_ui_theme7.mx)("cm-list-item-start", lineStart.number === lineEnd.number && "cm-list-item-end")
+        }).range(lineStart.from, lineStart.from));
+        for (let i = lineStart.from + 1; i < lineEnd.from; i++) {
+          decorations.push(import_view26.Decoration.line({
+            class: (0, import_react_ui_theme7.mx)("cm-list-item-continuation")
+          }).range(i, i));
         }
-        const mark = node.node.firstChild;
-        if (mark?.name === "HeaderMark") {
-          const { from, to = 6 } = options.numberedHeadings ?? {};
-          const text = view.state.sliceDoc(node.from, node.to);
-          const len = text.match(/[#\s]+/)[0].length;
-          if (!from || level < from || level > to) {
-            atomicDeco.add(mark.from, mark.from + len, hide);
-          } else {
-            const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
-            if (num.length) {
-              atomicDeco.add(mark.from, mark.from + len, import_view21.Decoration.replace({
-                widget: new TextWidget(num, theme.heading(level))
-              }));
-            }
-          }
+        if (lineStart.number !== lineEnd.number) {
+          decorations.push(import_view26.Decoration.line({
+            class: (0, import_react_ui_theme7.mx)("cm-list-item-end")
+          }).range(lineEnd.from, lineEnd.from));
         }
-        return false;
-      }
-      //
-      // Lists.
-      // [BulletList | OrderedList] > (ListItem > ListMark) > (Task > TaskMarker)?
-      //
-      case "BulletList":
-      case "OrderedList": {
-        enterList(node);
-        break;
       }
-      case "ListItem": {
-        const line = state.doc.lineAt(node.from);
-        const list = getCurrentListLevel();
-        const width = list.type === "OrderedList" ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = ((list.level ?? 0) + 1) * width;
-        if (node.from === line.to - 1) {
-          return false;
+    }
+  });
+  return decorations;
+};
+var __dxlog_file11 = "/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.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: !debug,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        import_log7.log.info("completion context", {
+          context
+        }, {
+          F: __dxlog_file11,
+          L: 27,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
         }
-        deco.add(line.from, line.from, import_view21.Decoration.line({
-          class: "cm-list-item",
-          attributes: {
-            style: `padding-left: ${offset}px; text-indent: -${width}px;`
-          }
-        }));
-        break;
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
       }
-      case "ListMark": {
-        const list = getCurrentListLevel();
-        const next = tree.resolve(node.to + 1, 1);
-        if (next?.name === "TaskMarker") {
-          break;
+    ]
+  });
+};
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorViewMode = import_effect.Schema.Union(...EditorViewModes.map((mode) => import_effect.Schema.Literal(mode)));
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var EditorInputMode = import_effect.Schema.Union(...EditorInputModes.map((mode) => import_effect.Schema.Literal(mode)));
+var editorInputMode = singleValueFacet({});
+var InputModeExtensions = {
+  default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorInputMode.of({
+      type: "vscode"
+    }),
+    import_view27.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
+  ],
+  vim: [
+    // https://github.com/replit/codemirror-vim
+    (0, import_codemirror_vim.vim)(),
+    editorInputMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    import_view27.keymap.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dom.parentElement?.focus();
+          return true;
         }
-        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_view21.Decoration.replace({
-          widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
-        }));
-        break;
       }
-      case "TaskMarker": {
-        const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-        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, checked ? checkedTask : uncheckedTask);
-        break;
+    ])
+  ]
+};
+var preview = (options = {}) => {
+  return [
+    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
+    // "Block decorations may not be specified via plugins"
+    import_state23.StateField.define({
+      create: (state) => buildDecorations4(state, options),
+      update: (_, tr) => buildDecorations4(tr.state, options),
+      provide: (field) => [
+        import_view28.EditorView.decorations.from(field),
+        import_view28.EditorView.atomicRanges.of((view) => view.state.field(field))
+      ]
+    }),
+    import_view28.EditorView.theme({
+      ".cm-preview-block": {
+        marginLeft: "-1rem",
+        marginRight: "-1rem",
+        padding: "1rem",
+        borderRadius: "0.5rem",
+        background: "var(--dx-modalSurface)",
+        border: "1px solid var(--dx-separator)"
       }
-      //
-      // Blockquote > QuoteMark > Paragraph
-      //
-      case "Blockquote": {
-        const editing = editingRange(state, node, focus2);
-        const quoteMark = node.node.getChild("QuoteMark");
-        const paragraph = node.node.getChild("Paragraph");
-        if (!editing && quoteMark && paragraph) {
-          atomicDeco.add(quoteMark.from, paragraph.from, hide);
-        }
-        for (const block of view.viewportLineBlocks) {
-          if (block.to < node.from) {
-            continue;
-          }
-          if (block.from > node.to) {
-            break;
+    })
+  ];
+};
+var getLinkRef = (state, node) => {
+  const mark = node.getChild("LinkMark");
+  const label = node.getChild("LinkLabel");
+  if (mark && label) {
+    const ref = state.sliceDoc(label.from + 1, label.to - 1);
+    return {
+      suggest: ref.startsWith("?"),
+      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
+      label: state.sliceDoc(mark.to, label.from - 1),
+      ref: ref.startsWith("?") ? ref.slice(1) : ref
+    };
+  }
+};
+var buildDecorations4 = (state, options) => {
+  const builder = new import_state23.RangeSetBuilder();
+  (0, import_language14.syntaxTree)(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        //
+        // Decoration.
+        // [Label][dxn:echo:123]
+        //
+        case "Link": {
+          const link = getLinkRef(state, node.node);
+          if (link) {
+            builder.add(node.from, node.to, import_view28.Decoration.replace({
+              widget: new PreviewInlineWidget(options, link)
+            }));
           }
-          deco.add(block.from, block.from, blockQuote);
+          break;
         }
-        break;
-      }
-      //
-      // CommentBlock
-      //
-      case "CommentBlock": {
-        const editing = editingRange(state, node, focus2);
-        for (const block of view.viewportLineBlocks) {
-          if (block.to < node.from) {
-            continue;
-          }
-          if (block.from > node.to) {
-            break;
-          }
-          const isFirst = block.from <= node.from;
-          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
-          deco.add(block.from, block.from, isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine);
-          if (!editing && (isFirst || isLast)) {
-            atomicDeco.add(block.from, block.to, hide);
+        //
+        // Block widget.
+        // ![Label][dxn:echo:123]
+        //
+        case "Image": {
+          const link = getLinkRef(state, node.node);
+          if (options.renderBlock && link) {
+            builder.add(node.from, node.to, import_view28.Decoration.replace({
+              block: true,
+              // atomic: true,
+              widget: new PreviewBlockWidget(options, link)
+            }));
           }
+          break;
         }
-        break;
       }
-      //
-      // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-      //
-      case "FencedCode": {
-        for (const block of view.viewportLineBlocks) {
-          if (block.to < node.from) {
-            continue;
-          }
-          if (block.from > node.to) {
-            break;
-          }
-          const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
-          deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
-          const editing = editingRange(state, node, focus2);
-          if (!editing && (first || last)) {
-            atomicDeco.add(block.from, block.to, hide);
-          }
-        }
-        return false;
+    }
+  });
+  return builder.finish();
+};
+var PreviewInlineWidget = class extends import_view28.WidgetType {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return false;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+  }
+  toDOM(view) {
+    const root = document.createElement("dx-ref-tag");
+    root.textContent = this._link.label;
+    root.setAttribute("ref", this._link.ref);
+    return root;
+  }
+};
+var PreviewBlockWidget = class extends import_view28.WidgetType {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return true;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref;
+  }
+  toDOM(view) {
+    const root = document.createElement("div");
+    root.classList.add("cm-preview-block");
+    const handleAction = (action) => {
+      const pos = view.posAtDOM(root);
+      const node = (0, import_language14.syntaxTree)(view.state).resolve(pos + 1).node.parent;
+      if (!node) {
+        return;
+      }
+      const link = getLinkRef(view.state, node);
+      if (link?.ref !== action.link.ref) {
+        return;
       }
-      //
-      // Link > [LinkMark, URL]
-      //
-      case "Link": {
-        const marks = node.node.getChildren("LinkMark");
-        const urlNode = node.node.getChild("URL");
-        const editing = editingRange(state, node, focus2);
-        if (urlNode && marks.length >= 2) {
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          if (!editing) {
-            atomicDeco.add(node.from, marks[0].to, hide);
-          }
-          deco.add(marks[0].to, marks[1].from, import_view21.Decoration.mark({
-            tagName: "a",
-            attributes: {
-              class: "cm-link",
-              href: url,
-              rel: "noreferrer",
-              target: "_blank"
+      switch (action.type) {
+        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
+        // Insert ref text.
+        case "insert": {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to,
+              insert: action.target.text
             }
-          }));
-          if (!editing) {
-            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? import_view21.Decoration.replace({
-              widget: new LinkButton(url, options.renderLinkButton)
-            }) : hide);
-          }
+          });
+          break;
         }
-        break;
-      }
-      //
-      // HR
-      //
-      case "HorizontalRule": {
-        if (!editingRange(state, node, focus2)) {
-          deco.add(node.from, node.to, horizontalRule);
+        // Remove ref.
+        case "delete": {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to
+            }
+          });
+          break;
         }
-        break;
       }
-      default: {
-        if (autoHideTags.has(node.name)) {
-          if (!editingRange(state, node.node.parent, focus2)) {
-            atomicDeco.add(node.from, node.to, hide);
+    };
+    this._options.renderBlock(root, {
+      readonly: view.state.readOnly,
+      link: this._link,
+      onAction: handleAction,
+      onLookup: this._options.onLookup
+    }, view);
+    return root;
+  }
+};
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    import_view29.keymap.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
           }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
         }
       }
+    ])
+  ];
+};
+var createBlockGroupAction = (value) => createEditorActionGroup("block", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+var createBlockActions = (value, getView, blankLine) => Object.entries({
+  blockquote: "ph--quotes--regular",
+  codeblock: "ph--code-block--regular",
+  table: "ph--table--regular"
+}).map(([type, icon]) => {
+  const checked = type === value;
+  return createEditorAction(type, () => {
+    const view = getView();
+    if (!view) {
+      return;
     }
-  };
-  const leaveNode = (node) => {
-    switch (node.name) {
-      case "BulletList":
-      case "OrderedList": {
-        leaveList();
+    switch (type) {
+      case "blockquote":
+        checked ? removeBlockquote(view) : addBlockquote(view);
+        break;
+      case "codeblock":
+        checked ? removeCodeblock(view) : addCodeblock(view);
+        break;
+      case "table":
+        insertTable(view);
         break;
-      }
-    }
-  };
-  const tree = (0, import_language8.syntaxTree)(state);
-  if (options.numberedHeadings?.from === void 0) {
-    for (const { from, to } of view.visibleRanges) {
-      tree.iterate({
-        from,
-        to,
-        enter: wrapWithCatch(enterNode),
-        leave: wrapWithCatch(leaveNode)
-      });
     }
-  } else {
-    tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode)
-    });
-  }
+  }, {
+    checked,
+    ...type === "table" && {
+      disabled: !!blankLine
+    },
+    icon
+  });
+});
+var createBlocks = (state, getView) => {
+  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
+  const blockGroupAction = createBlockGroupAction(value);
+  const blockActions = createBlockActions(value, getView, state.blankLine);
   return {
-    deco: deco.finish(),
-    atomicDeco: atomicDeco.finish()
+    nodes: [
+      blockGroupAction,
+      ...blockActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "block"
+      },
+      ...blockActions.map(({ id }) => ({
+        source: blockGroupAction.id,
+        target: id
+      }))
+    ]
   };
 };
-var forceUpdate = import_state18.StateEffect.define();
-var decorateMarkdown = (options = {}) => {
-  return [
-    import_view21.ViewPlugin.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
-          this.clearUpdate();
-        } else if (update2.selectionSet) {
-          this.scheduleUpdate(update2.view);
-        }
-      }
-      // Defer update in case moving through the document.
-      scheduleUpdate(view) {
-        this.clearUpdate();
-        this.pendingUpdate = setTimeout(() => {
-          view.dispatch({
-            effects: forceUpdate.of(null)
-          });
-        }, options.selectionChangeDelay);
-      }
-      clearUpdate() {
-        if (this.pendingUpdate) {
-          clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = void 0;
-        }
-      }
-      destroy() {
-        this.clearUpdate();
+var commentLabel = (comment, selection) => comment ? "selection overlaps existing comment label" : selection === false ? "select text to comment label" : "comment label";
+var createCommentAction = (label, getView) => createEditorAction("comment", () => createComment(getView()), {
+  testId: "editor.toolbar.comment",
+  icon: "ph--chat-text--regular",
+  label
+});
+var createComment2 = (state, getView) => ({
+  nodes: [
+    createCommentAction([
+      commentLabel(state.comment, state.selection),
+      {
+        ns: translationKey
       }
-    }, {
-      provide: (plugin) => [
-        import_view21.EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
-        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? import_view21.Decoration.none),
-        import_view21.EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? import_view21.Decoration.none)
-      ]
-    }),
-    image(),
-    table(),
-    adjustChanges(),
-    formattingStyles
-  ];
+    ], getView)
+  ],
+  edges: [
+    {
+      source: "root",
+      target: "comment"
+    }
+  ]
+});
+var formats = {
+  strong: "ph--text-b--regular",
+  emphasis: "ph--text-italic--regular",
+  strikethrough: "ph--text-strikethrough--regular",
+  code: "ph--code--regular",
+  link: "ph--link--regular"
 };
-var linkTooltip = (renderTooltip) => {
-  return (0, import_view26.hoverTooltip)((view, pos, side) => {
-    const syntax = (0, import_language12.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;
+var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
+  variant: "toggleGroup",
+  selectCardinality: "multiple",
+  value: Object.keys(formats).filter((key) => !!formatting[key])
+});
+var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
+  const checked = !!formatting[type];
+  return createEditorAction(type, () => {
+    const view = getView();
+    if (!view) {
+      return;
     }
-    const url = link && link.getChild("URL");
-    if (!url || !link) {
-      return null;
+    if (type === "link") {
+      checked ? removeLink(view) : addLink()(view);
+      return;
     }
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      // NOTE: Forcing above causes the tooltip to flicker.
-      // above: true,
-      create: () => {
-        const el = document.createElement("div");
-        el.className = (0, import_react_ui_theme7.tooltipContent)({});
-        renderTooltip(el, {
-          url: urlText
-        }, view);
-        return {
-          dom: el,
-          offset: {
-            x: 0,
-            y: 4
-          }
-        };
-      }
-    };
+    const inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
+    setStyle(inlineType, !checked)(view);
   }, {
-    // NOTE: 0 = default of 300ms.
-    hoverTime: 1
+    checked,
+    icon
   });
-};
-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.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: !debug,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        import_log6.log.info("completion context", {
-          context
-        }, {
-          F: __dxlog_file10,
-          L: 27,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
-      }
+});
+var createFormatting = (state, getView) => {
+  const formattingGroupAction = createFormattingGroup(state);
+  const formattingActions = createFormattingActions(state, getView);
+  return {
+    nodes: [
+      formattingGroupAction,
+      ...formattingActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "formatting"
+      },
+      ...formattingActions.map(({ id }) => ({
+        source: formattingGroupAction.id,
+        target: id
+      }))
     ]
-  });
+  };
 };
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = import_echo_schema.S.Union(...EditorViewModes.map((mode) => import_echo_schema.S.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
-];
-var EditorInputMode = import_echo_schema.S.Union(...EditorInputModes.map((mode) => import_echo_schema.S.Literal(mode)));
-var editorInputMode = singleValueFacet({});
-var InputModeExtensions = {
-  default: [],
-  vscode: [
-    // https://github.com/replit/codemirror-vscode-keymap
-    editorInputMode.of({
-      type: "vscode"
-    }),
-    import_view27.keymap.of(import_codemirror_vscode_keymap.vscodeKeymap)
-  ],
-  vim: [
-    // https://github.com/replit/codemirror-vim
-    (0, import_codemirror_vim.vim)(),
-    editorInputMode.of({
-      type: "vim",
-      noTabster: true
-    }),
-    import_view27.keymap.of([
+var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
+  variant: "dropdownMenu",
+  applyActive: true,
+  selectCardinality: "single",
+  value
+}, "ph--text-h--regular");
+var createHeadingActions = (getView) => Object.entries({
+  "0": "ph--paragraph--regular",
+  "1": "ph--text-h-one--regular",
+  "2": "ph--text-h-two--regular",
+  "3": "ph--text-h-three--regular",
+  "4": "ph--text-h-four--regular",
+  "5": "ph--text-h-five--regular",
+  "6": "ph--text-h-six--regular"
+}).map(([levelStr, icon]) => {
+  const level = parseInt(levelStr);
+  return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
+    label: [
+      "heading level label",
       {
-        key: "Alt-Escape",
-        run: (view) => {
-          view.dom.parentElement?.focus();
-          return true;
-        }
+        count: level,
+        ns: translationKey
       }
-    ])
-  ]
+    ],
+    icon
+  });
+});
+var computeHeadingValue = (state) => {
+  const blockType = state ? state.blockType : "paragraph";
+  const header = blockType && /heading(\d)/.exec(blockType);
+  return header ? header[1] : blockType === "paragraph" || !blockType ? "0" : "";
 };
-var preview = (options = {}) => {
-  return [
-    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins"
-    import_state22.StateField.define({
-      create: (state) => buildDecorations3(state, options),
-      update: (_, tr) => buildDecorations3(tr.state, options),
-      provide: (field) => [
-        import_view28.EditorView.decorations.from(field),
-        import_view28.EditorView.atomicRanges.of((view) => view.state.field(field))
-      ]
-    }),
-    import_view28.EditorView.theme({
-      ".cm-preview-block": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "0.5rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
-      }
-    })
-  ];
+var createHeadings = (state, getView) => {
+  const headingValue = computeHeadingValue(state);
+  const headingGroupAction = createHeadingGroupAction(headingValue);
+  const headingActions = createHeadingActions(getView);
+  return {
+    nodes: [
+      headingGroupAction,
+      ...headingActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "heading"
+      },
+      ...headingActions.map(({ id }) => ({
+        source: headingGroupAction.id,
+        target: id
+      }))
+    ]
+  };
 };
-var getLinkRef = (state, node) => {
-  const mark = node.getChild("LinkMark");
-  const label = node.getChild("LinkLabel");
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
-    return {
-      suggest: ref.startsWith("?"),
-      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith("?") ? ref.slice(1) : ref
-    };
-  }
+var createImageUploadAction = (onImageUpload) => createEditorAction("image", onImageUpload, {
+  testId: "editor.toolbar.image",
+  icon: "ph--image-square--regular"
+});
+var createImageUpload = (onImageUpload) => ({
+  nodes: [
+    createImageUploadAction(onImageUpload)
+  ],
+  edges: [
+    {
+      source: "root",
+      target: "image"
+    }
+  ]
+});
+var listStyles = {
+  bullet: "ph--list-bullets--regular",
+  ordered: "ph--list-numbers--regular",
+  task: "ph--list-checks--regular"
 };
-var buildDecorations3 = (state, options) => {
-  const builder = new import_state22.RangeSetBuilder();
-  (0, import_language13.syntaxTree)(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        //
-        // Decoration.
-        // [Label][dxn:echo:123]
-        //
-        case "Link": {
-          const link = getLinkRef(state, node.node);
-          if (link) {
-            builder.add(node.from, node.to, import_view28.Decoration.replace({
-              widget: new PreviewInlineWidget(options, link)
-            }));
-          }
-          break;
-        }
-        //
-        // Block widget.
-        // ![Label][dxn:echo:123]
-        //
-        case "Image": {
-          const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
-            builder.add(node.from, node.to, import_view28.Decoration.replace({
-              block: true,
-              // atomic: true,
-              widget: new PreviewBlockWidget(options, link)
-            }));
-          }
-          break;
-        }
-      }
+var createListGroupAction = (value) => createEditorActionGroup("list", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+var createListActions = (value, getView) => Object.entries(listStyles).map(([listStyle, icon]) => {
+  const checked = value === listStyle;
+  return createEditorAction(`list-${listStyle}`, () => {
+    const view = getView();
+    if (!view) {
+      return;
     }
+    const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
+    if (checked) {
+      removeList(listType)(view);
+    } else {
+      addList(listType)(view);
+    }
+  }, {
+    checked,
+    icon
   });
-  return builder.finish();
+});
+var createLists = (state, getView) => {
+  const value = state.listStyle ?? "";
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value, getView);
+  return {
+    nodes: [
+      listGroupAction,
+      ...listActionsMap
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "list"
+      },
+      ...listActionsMap.map(({ id }) => ({
+        source: listGroupAction.id,
+        target: id
+      }))
+    ]
+  };
 };
-var PreviewInlineWidget = class extends import_view28.WidgetType {
-  constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+var createSearchAction = (getView) => createEditorAction("search", () => (0, import_search2.openSearchPanel)(getView()), {
+  testId: "editor.toolbar.search",
+  icon: "ph--magnifying-glass--regular"
+});
+var createSearch = (getView) => ({
+  nodes: [
+    createSearchAction(getView)
+  ],
+  edges: [
+    {
+      source: "root",
+      target: "search"
+    }
+  ]
+});
+var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
+  variant: "dropdownMenu",
+  applyActive: true,
+  selectCardinality: "single",
+  value
+}, "ph--eye--regular");
+var createViewModeActions = (value, onViewModeChange) => Object.entries({
+  preview: "ph--eye--regular",
+  source: "ph--pencil-simple--regular",
+  readonly: "ph--pencil-slash--regular"
+}).map(([viewMode, icon]) => {
+  const checked = viewMode === value;
+  return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode), {
+    label: [
+      `${viewMode} mode label`,
+      {
+        ns: translationKey
+      }
+    ],
+    checked,
+    icon
+  });
+});
+var createViewMode = (state, onViewModeChange) => {
+  const value = state.viewMode ?? "source";
+  const viewModeGroupAction = createViewModeGroupAction(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
+  return {
+    nodes: [
+      viewModeGroupAction,
+      ...viewModeActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "viewMode"
+      },
+      ...viewModeActions.map(({ id }) => ({
+        source: viewModeGroupAction.id,
+        target: id
+      }))
+    ]
+  };
+};
+var margin = "!mt-[1rem]";
+var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
+var editorContent = (0, import_react_ui_theme8.mx)(margin, editorWidth);
+var editorFullWidth = (0, import_react_ui_theme8.mx)(margin);
+var editorGutter = import_view30.EditorView.theme({
+  // Match margin from content.
+  // Gutter = 2rem + 1rem margin.
+  ".cm-gutters": {
+    marginTop: "1rem",
+    paddingRight: "1rem"
   }
-  // override ignoreEvent() {
-  //   return false;
-  // }
-  eq(other) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+});
+var editorMonospace = import_view30.EditorView.theme({
+  ".cm-content": {
+    fontFamily: fontMono
   }
-  toDOM(view) {
-    const root = document.createElement("dx-ref-tag");
-    root.setAttribute("label", this._link.label);
-    root.setAttribute("ref", this._link.ref);
-    return root;
+});
+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_theme8.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 stackItemContentToolbarClassNames = (role) => (0, import_react_ui_theme8.mx)("relative z-[1] flex is-full bg-toolbarSurface border-be border-separator", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
+var createToolbar = ({ getView, state, customActions, ...features }) => {
+  const nodes = [];
+  const edges = [];
+  if (features.headings ?? true) {
+    const headings2 = createHeadings(state, getView);
+    nodes.push(...headings2.nodes);
+    edges.push(...headings2.edges);
   }
-};
-var PreviewBlockWidget = class extends import_view28.WidgetType {
-  constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+  if (features.formatting ?? true) {
+    const formatting = createFormatting(state, getView);
+    nodes.push(...formatting.nodes);
+    edges.push(...formatting.edges);
   }
-  // override ignoreEvent() {
-  //   return true;
-  // }
-  eq(other) {
-    return this._link.ref === other._link.ref;
+  if (features.lists ?? true) {
+    const lists = createLists(state, getView);
+    nodes.push(...lists.nodes);
+    edges.push(...lists.edges);
   }
-  toDOM(view) {
-    const root = document.createElement("div");
-    root.classList.add("cm-preview-block");
-    const handleAction = (action) => {
-      const pos = view.posAtDOM(root);
-      const node = (0, import_language13.syntaxTree)(view.state).resolve(pos + 1).node.parent;
-      if (!node) {
-        return;
-      }
-      const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
-        return;
-      }
-      switch (action.type) {
-        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
-        // Insert ref text.
-        case "insert": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-              insert: action.target.text
-            }
-          });
-          break;
-        }
-        // Remove ref.
-        case "delete": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to
-            }
-          });
-          break;
-        }
-      }
-    };
-    this._options.renderBlock(root, {
-      readonly: view.state.readOnly,
-      link: this._link,
-      onAction: handleAction,
-      onLookup: this._options.onLookup
-    }, view);
-    return root;
+  if (features.blocks ?? true) {
+    const blocks = createBlocks(state, getView);
+    nodes.push(...blocks.nodes);
+    edges.push(...blocks.edges);
   }
+  if (features.image) {
+    const image2 = createImageUpload(features.image);
+    nodes.push(...image2.nodes);
+    edges.push(...image2.edges);
+  }
+  if (customActions) {
+    const custom = customActions();
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
+  const editorToolbarGap = (0, import_react_ui_menu.createGapSeparator)();
+  nodes.push(...editorToolbarGap.nodes);
+  edges.push(...editorToolbarGap.edges);
+  if (features.comment) {
+    const comment = createComment2(state, getView);
+    nodes.push(...comment.nodes);
+    edges.push(...comment.edges);
+  }
+  if (features.search ?? true) {
+    const search = createSearch(getView);
+    nodes.push(...search.nodes);
+    edges.push(...search.edges);
+  }
+  if (features.viewMode) {
+    const viewMode = createViewMode(state, features.viewMode);
+    nodes.push(...viewMode.nodes);
+    edges.push(...viewMode.edges);
+  }
+  return {
+    nodes,
+    edges
+  };
 };
-var defaultItems = [
-  "hello world!",
-  "this is a test.",
-  "this is [DXOS](https://dxos.org)"
-];
-var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
-  let t;
-  let idx = 0;
-  return [
-    import_view29.keymap.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        }
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: {
-                  from: pos,
-                  insert: text[i++]
-                },
-                selection: {
-                  anchor: pos + 1
-                }
-              });
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
-              }
-            }, d);
-          };
-          insert();
-          return true;
-        }
-      }
-    ])
-  ];
-};
-var useActionHandler = (view) => {
-  return (0, import_react7.useCallback)((action) => view && processEditorPayload(view, action.properties), [
-    view
+var useEditorToolbarActionGraph = (props) => {
+  const menuCreator = (0, import_react.useCallback)(() => createToolbar(props), [
+    props
   ]);
+  return (0, import_react_ui_menu.useMenuActions)(menuCreator);
 };
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var EditorToolbar = /* @__PURE__ */ (0, import_react.memo)(({ classNames, attendableId, role, ...props }) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: stackItemContentToolbarClassNames(role)
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.MenuProvider, {
+    ...menuProps,
+    attendableId
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    classNames: [
+      import_react_ui_theme.textBlockWidth,
+      classNames
+    ]
+  }))));
+});
+var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (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);
-  (0, import_react8.useEffect)(() => {
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = (0, import_react7.useMemo)(() => (0, import_util5.getProviderValue)(props), deps ?? []);
+  const [instanceId] = (0, import_react7.useState)(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = (0, import_react7.useState)();
+  const parentRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     let view2;
     if (parentRef.current) {
-      (0, import_log7.log)("create", {
+      (0, import_log8.log)("create", {
         id,
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file12,
         L: 76,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5683,16 +5986,16 @@ var useTextEditor = (props = {}, deps = []) => {
           anchor
         };
       }
-      const state = import_state23.EditorState.create({
+      const state = import_state24.EditorState.create({
         doc: doc ?? initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),
           extensions,
           // NOTE: This doesn't catch errors in keymap functions.
-          import_view30.EditorView.exceptionSink.of((err) => {
-            import_log7.log.catch(err, void 0, {
-              F: __dxlog_file11,
+          import_view31.EditorView.exceptionSink.of((err) => {
+            import_log8.log.catch(err, void 0, {
+              F: __dxlog_file12,
               L: 98,
               S: void 0,
               C: (f, a) => f(...a)
@@ -5700,10 +6003,10 @@ var useTextEditor = (props = {}, deps = []) => {
           })
         ].filter(import_util5.isNotFalsy)
       });
-      view2 = new import_view30.EditorView({
+      view2 = new import_view31.EditorView({
         parent: parentRef.current,
         state,
-        scrollTo: scrollTo ? import_view30.EditorView.scrollIntoView(scrollTo, {
+        scrollTo: scrollTo ? import_view31.EditorView.scrollIntoView(scrollTo, {
           yMargin: 96
         }) : void 0,
         dispatchTransactions: debug ? debugDispatcher : void 0
@@ -5721,10 +6024,10 @@ var useTextEditor = (props = {}, deps = []) => {
       setView(view2);
     }
     return () => {
-      (0, import_log7.log)("destroy", {
+      (0, import_log8.log)("destroy", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file12,
         L: 135,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5732,16 +6035,16 @@ var useTextEditor = (props = {}, deps = []) => {
       view2?.destroy();
     };
   }, deps);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
-          import_log7.log.warn("invalid selection", {
+          import_log8.log.warn("invalid selection", {
             length: view.state.doc.length,
             scrollTo,
             selection
           }, {
-            F: __dxlog_file11,
+            F: __dxlog_file12,
             L: 144,
             S: void 0,
             C: (f, a) => f(...a)
@@ -5759,7 +6062,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -5773,7 +6076,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = (0, import_react8.useCallback)((event) => {
+  const handleKeyUp = (0, import_react7.useCallback)((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -5877,6 +6180,7 @@ var useTextEditor = (props = {}, deps = []) => {
   mention,
   openCommand,
   openEffect,
+  outliner,
   overlap,
   preventNewline,
   preview,
@@ -5911,7 +6215,6 @@ var useTextEditor = (props = {}, deps = []) => {
   toggleStyle,
   translations,
   typewriter,
-  useActionHandler,
   useCommentClickListener,
   useCommentState,
   useComments,