@dxos/react-ui-editor 0.7.5-main.499c70c → 0.7.5-main.5ae2ba8

package/dist/lib/browser/index.mjs

@@ -39,261 +39,862 @@ import { EditorView as EditorView21, keymap as keymap11 } from "@codemirror/view
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
-// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, MagnifyingGlass, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
-import { createContext } from "@radix-ui/react-context";
-import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { useDropzone } from "react-dropzone";
-import { Button, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
+// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+import React, { useCallback } from "react";
+import { ElevationProvider } from "@dxos/react-ui";
+import { ToolbarMenu, MenuProvider, useMenuActions, createGapSeparator } from "@dxos/react-ui-menu";
+import { textBlockWidth } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
-import { StateField } from "@codemirror/state";
-import { Decoration, EditorView } from "@codemirror/view";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/util/facet.ts
-import { Facet } from "@codemirror/state";
-var singleValueFacet = (defaultValue) => Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
+// packages/ui/react-ui-editor/src/components/EditorToolbar/util.ts
+import { useMemo } from "react";
+import { create } from "@dxos/live-object";
+import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
+var useEditorToolbarState = (initialState = {}) => {
+  return useMemo(() => create(initialState), []);
+};
+var createEditorAction = (payload, icon, label = [
+  `${payload.type} label`,
+  {
+    ns: translationKey
   }
+], id = payload.type) => createMenuAction(id, {
+  icon,
+  label,
+  ...payload
+});
+var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
+  icon,
+  iconOnly: true,
+  ...props
 });
+var editorToolbarSearch = createEditorAction({
+  type: "search"
+}, "ph--magnifying-glass--regular");
 
-// packages/ui/react-ui-editor/src/util/cursor.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = singleValueFacet(defaultCursorConverter);
-  }
-  static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
-  }
+// packages/ui/react-ui-editor/src/components/EditorToolbar/blocks.ts
+var createBlockGroupAction = (value) => createEditorActionGroup("block", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+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
+    }
+  }, 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
+      }))
+    ]
+  };
 };
 
-// packages/ui/react-ui-editor/src/util/debug.ts
-import { log } from "@dxos/log";
-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) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+// packages/ui/react-ui-editor/src/components/EditorToolbar/comment.ts
+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"
     }
+  ]
+});
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
+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 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);
+  return {
+    nodes: [
+      formattingGroupAction,
+      ...formattingActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "formatting"
+      },
+      ...formattingActions.map(({ id }) => ({
+        source: formattingGroupAction.id,
+        target: id
+      }))
+    ]
   };
 };
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    log.catch(err, void 0, {
-      F: __dxlog_file,
-      L: 29,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/headings.ts
+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 debugDispatcher = (trs, view) => {
-  logChanges(trs);
-  view.update(trs);
+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 logChanges = (trs) => {
-  const changes = trs.flatMap((tr) => {
-    if (tr.changes.empty) {
-      return void 0;
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/lists.ts
+var listStyles = {
+  bullet: "ph--list-bullets--regular",
+  ordered: "ph--list-numbers--regular",
+  task: "ph--list-checks--regular"
+};
+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
+      }))
+    ]
+  };
+};
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/viewMode.ts
+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
     }
-    const changes2 = [];
-    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
-      fromA,
-      toA,
-      fromB,
-      toB,
-      inserted: inserted.toString()
-    })));
-    return changes2;
-  }).filter(Boolean);
-  if (changes.length) {
-    log.info("changes", {
-      changes
-    }, {
-      F: __dxlog_file,
-      L: 62,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
+  ], `view-mode--${viewMode}`);
+});
+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
+      }))
+    ]
+  };
 };
 
-// packages/ui/react-ui-editor/src/util/dom.ts
-var flattenRect = (rect, left) => {
-  const x = left ? rect.left : rect.right;
+// packages/ui/react-ui-editor/src/styles/stack-item-content-class-names.ts
+import { mx } from "@dxos/react-ui-theme";
+var stackItemContentEditorClassNames = (role) => mx("dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface", role === "article" ? "min-bs-0" : "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24");
+var stackItemContentToolbarClassNames = (role) => mx("attention-surface is-full border-be !border-separator", role === "section" && "sticky block-start-0 z-[1] -mbe-px min-is-0");
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+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 = 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 {
-    left: x,
-    right: x,
-    top: rect.top,
-    bottom: rect.bottom
+    nodes,
+    edges
   };
 };
-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 useEditorToolbarActionGraph = ({ onAction, ...props }) => {
+  const menuCreator = useCallback(() => createToolbar(props), [
+    props
+  ]);
+  const { resolveGroupItems } = useMenuActions(menuCreator);
+  return {
+    resolveGroupItems,
+    onAction
+  };
 };
-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 EditorToolbar = ({ classNames, attendableId, role, ...props }) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: stackItemContentToolbarClassNames(role)
+  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ React.createElement(MenuProvider, {
+    ...menuProps,
+    attendableId
+  }, /* @__PURE__ */ React.createElement(ToolbarMenu, {
+    classNames: [
+      textBlockWidth,
+      "!bg-transparent",
+      classNames
+    ]
+  }))));
 };
 
-// packages/ui/react-ui-editor/src/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-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
-    ]);
+// packages/ui/react-ui-editor/src/defaults.ts
+import { EditorView } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx as mx2 } from "@dxos/react-ui-theme";
+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 mx2(headings[level], "dark:text-primary-400");
   }
-  return el;
 };
-var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import get from "lodash.get";
+import { tokens } from "@dxos/react-ui-theme";
+var getToken = (path, defaultValue) => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? "";
 };
+var fontBody = getToken("fontFamily.body");
+var fontMono = getToken("fontFamily.mono");
 
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
-var annotationMark = 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 = StateField.define({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-      return value;
+// packages/ui/react-ui-editor/src/styles/theme.ts
+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 .cm-gutterElement": {
+    minWidth: "40px",
+    alignContent: "center"
+  },
+  /**
+  * Height is set to match the corresponding line.
+  */
+  ".cm-gutterElement": {
+    alignItems: "center",
+    fontSize: "16px"
+  },
+  /**
+  * 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",
+    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)"
     }
-  });
-  return [
-    annotationsState,
-    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(isNotFalsy);
-      return Decoration.set(decorations);
-    }),
-    styles
-  ];
+  },
+  ".cm-panel.cm-search": {
+    padding: "4px",
+    borderTop: "1px solid var(--dx-separator)"
+  }
 };
-var styles = EditorView.theme({
-  ".cm-annotation": {
-    textDecoration: "underline",
-    textDecorationStyle: "wavy",
-    textDecorationColor: "var(--dx-error)"
+
+// packages/ui/react-ui-editor/src/defaults.ts
+var margin = "!mt-[1rem]";
+var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
+var editorFullWidth = mx3(margin);
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
+var editorGutter = EditorView.theme({
+  // Match margin from content.
+  ".cm-gutters": {
+    marginTop: "16px",
+    paddingRight: "1rem"
+  }
+});
+var editorMonospace = EditorView.theme({
+  ".cm-content": {
+    fontFamily: fontMono
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { keymap } from "@codemirror/view";
-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.
-    keymap.of(completionKeymap),
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    autocompletion({
-      activateOnTyping,
-      override,
-      closeOnBlur: !debug,
-      tooltipClass: () => "shadow rounded"
-    })
-  ];
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
-      markdownLanguage.data.of({
-        autocomplete: (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
-            return null;
-          }
-          return {
+// packages/ui/react-ui-editor/src/extensions/annotations.ts
+import { StateField } from "@codemirror/state";
+import { Decoration, EditorView as EditorView2 } from "@codemirror/view";
+import { isNotFalsy } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/util/facet.ts
+import { Facet } from "@codemirror/state";
+var singleValueFacet = (defaultValue) => Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
+});
+
+// packages/ui/react-ui-editor/src/util/cursor.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class _Cursor {
+  static {
+    this.converter = singleValueFacet(defaultCursorConverter);
+  }
+  static {
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
+  }
+  static {
+    this.getRangeFromCursor = (state, cursor) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const parts = cursor.split(":");
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/debug.ts
+import { log } from "@dxos/log";
+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) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    log.catch(err, void 0, {
+      F: __dxlog_file,
+      L: 29,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
+};
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
+    }
+    const changes2 = [];
+    tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      inserted: inserted.toString()
+    })));
+    return changes2;
+  }).filter(Boolean);
+  if (changes.length) {
+    log.info("changes", {
+      changes
+    }, {
+      F: __dxlog_file,
+      L: 62,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/dom.ts
+var flattenRect = (rect, left) => {
+  const x = left ? rect.left : rect.right;
+  return {
+    left: x,
+    right: x,
+    top: rect.top,
+    bottom: rect.bottom
+  };
+};
+var scratchRange;
+var textRange = (node, from, to = from) => {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+};
+var clientRectsFor = (dom) => {
+  if (dom.nodeType === 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType === 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+};
+
+// packages/ui/react-ui-editor/src/util/react.tsx
+import React2 from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+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) => {
+  createRoot(root).render(/* @__PURE__ */ React2.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
+};
+
+// packages/ui/react-ui-editor/src/extensions/annotations.ts
+var annotationMark = 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 = StateField.define({
+    create: (state) => {
+      return match(state);
+    },
+    update: (value, tr) => {
+      if (!tr.changes.empty) {
+        return match(tr.state);
+      }
+      return value;
+    }
+  });
+  return [
+    annotationsState,
+    EditorView2.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(isNotFalsy);
+      return Decoration.set(decorations);
+    }),
+    styles
+  ];
+};
+var styles = EditorView2.theme({
+  ".cm-annotation": {
+    textDecoration: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: "var(--dx-error)"
+  }
+});
+
+// packages/ui/react-ui-editor/src/extensions/autocomplete.ts
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { markdownLanguage } from "@codemirror/lang-markdown";
+import { keymap } from "@codemirror/view";
+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.
+    keymap.of(completionKeymap),
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    autocompletion({
+      activateOnTyping,
+      override,
+      closeOnBlur: !debug,
+      tooltipClass: () => "shadow rounded"
+    })
+  ];
+  if (onSearch) {
+    extensions.push(
+      // TODO(burdon): Optional decoration via addToOptions
+      markdownLanguage.data.of({
+        autocomplete: (context) => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || match.from === match.to && !context.explicit) {
+            return null;
+          }
+          return {
             from: match.from,
             options: onSearch(match.text.toLowerCase())
           };
@@ -306,7 +907,7 @@ var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 import { StateField as StateField2 } from "@codemirror/state";
-import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
+import { EditorView as EditorView3, ViewPlugin } from "@codemirror/view";
 import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
@@ -590,7 +1191,7 @@ var automerge = (accessor) => {
       }
     }),
     // Reconcile local updates.
-    EditorView2.updateListener.of(({ view, changes }) => {
+    EditorView3.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
         syncer.reconcile(view, true);
       }
@@ -600,7 +1201,7 @@ var automerge = (accessor) => {
 
 // packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Decoration as Decoration2, EditorView as EditorView4, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
@@ -774,7 +1375,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles2 = EditorView3.theme({
+var styles2 = EditorView4.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -940,7 +1541,7 @@ var SpaceAwarenessProvider = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView5, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant as invariant2 } from "@dxos/invariant";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
@@ -988,7 +1589,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView4.updateListener.of((update2) => {
+    EditorView5.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1250,11 +1851,11 @@ var random = (min, max) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
-import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
+import { EditorView as EditorView7, keymap as keymap3 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
 import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+import { Decoration as Decoration3, EditorView as EditorView6, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/command/state.ts
 import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
@@ -1420,7 +2021,7 @@ var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
   }
 }, {
   provide: (plugin) => [
-    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+    EditorView6.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
   ]
 });
 
@@ -1431,7 +2032,7 @@ var command = (options) => {
     commandState,
     keymap3.of(commandKeyBindings),
     hintViewPlugin(options),
-    EditorView6.focusChangeEffect.of((_, focusing) => {
+    EditorView7.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     })
   ];
@@ -1440,16 +2041,16 @@ var command = (options) => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView8, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView9, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo as useMemo2 } from "react";
 import { debounce as debounce2 } from "@dxos/async";
 import { log as log4 } from "@dxos/log";
-import { nonNullable } from "@dxos/util";
+import { isNonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView7, keymap as keymap4 } from "@codemirror/view";
+import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
@@ -1460,7 +2061,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView7.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -1502,7 +2103,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView7.updateListener.of(({ view, transactions }) => {
+    EditorView8.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -1570,7 +2171,7 @@ var commentsState = StateField4.define({
             comment,
             range
           };
-        }).filter(nonNullable);
+        }).filter(isNonNullable);
         return {
           ...value,
           comments: commentStates
@@ -1583,7 +2184,7 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles3 = EditorView8.theme({
+var styles3 = EditorView9.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -1603,7 +2204,7 @@ var createCommentMark = (id, isCurrent) => Decoration4.mark({
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView8.decorations.compute([
+var commentsDecorations = EditorView9.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1612,7 +2213,7 @@ var commentsDecorations = EditorView8.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 142,
+        L: 144,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1622,11 +2223,11 @@ var commentsDecorations = EditorView8.decorations.compute([
     }
     const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
     return mark.range(range.from, range.to);
-  }).filter(nonNullable);
+  }).filter(isNonNullable);
   return Decoration4.set(decorations);
 });
 var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView8.domEventHandlers({
+var handleCommentClick = EditorView9.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -1665,7 +2266,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView8.domEventHandlers({
+    EditorView9.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -1687,7 +2288,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView8.updateListener.of((update2) => {
+    EditorView9.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1746,7 +2347,7 @@ var mapTrackedComment = (comment, changes) => ({
 var restoreCommentEffect = StateEffect3.define({
   map: mapTrackedComment
 });
-var createComment = (view) => {
+var createComment2 = (view) => {
   const options = view.state.facet(optionsFacet);
   const { from, to } = view.state.selection.main;
   if (from === to) {
@@ -1791,7 +2392,7 @@ var comments = (options = {}) => {
     options.onCreate && keymap5.of([
       {
         key: shortcut,
-        run: callbackWrapper(createComment)
+        run: callbackWrapper(createComment2)
       }
     ]),
     //
@@ -1827,7 +2428,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView8.updateListener.of(({ view, state, changes }) => {
+    EditorView9.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1859,7 +2460,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView8.updateListener.of(({ view, state }) => {
+    EditorView9.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1893,7 +2494,7 @@ var comments = (options = {}) => {
       }
     }),
     options.onUpdate && trackPastedComments(options.onUpdate)
-  ].filter(nonNullable);
+  ].filter(isNonNullable);
 };
 var scrollThreadIntoView = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -1913,7 +2514,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -1925,414 +2526,177 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
 };
 var selectionOverlapsComment = (state) => {
-  const commentState = state.field(commentsState, false);
-  if (commentState === void 0) {
-    return false;
-  }
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
-      return true;
-    }
-  }
-  return false;
-};
-var hasActiveSelection = (state) => {
-  return state.selection.ranges.some((range) => !range.empty);
-};
-var ExternalCommentSync = class {
-  constructor(view, id, subscribe, getComments) {
-    this.destroy = () => {
-      this.unsubscribe();
-    };
-    const updateComments = () => {
-      const comments2 = getComments();
-      if (id === view.state.facet(documentId)) {
-        queueMicrotask(() => view.dispatch({
-          effects: setComments.of({
-            id,
-            comments: comments2
-          })
-        }));
-      }
-    };
-    this.unsubscribe = subscribe(updateComments);
-  }
-};
-var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin4.fromClass(class {
-  constructor(view) {
-    return new ExternalCommentSync(view, id, subscribe, getComments);
-  }
-});
-var useCommentState = () => {
-  const [state, setState] = useState({
-    comment: false,
-    selection: false
-  });
-  const observer = useMemo(() => EditorView8.updateListener.of((update2) => {
-    if (update2.docChanged || update2.selectionSet) {
-      setState({
-        comment: selectionOverlapsComment(update2.state),
-        selection: hasActiveSelection(update2.state)
-      });
-    }
-  }), []);
-  return [
-    state,
-    observer
-  ];
-};
-var useComments = (view, id, comments2) => {
-  useEffect(() => {
-    if (view) {
-      if (id === view.state.facet(documentId)) {
-        view.dispatch({
-          effects: setComments.of({
-            id,
-            comments: comments2 ?? []
-          })
-        });
-      }
-    }
-  });
-};
-var useCommentClickListener = (onCommentClick) => {
-  return useMemo(() => EditorView8.updateListener.of((update2) => {
-    update2.transactions.forEach((transaction) => {
-      transaction.effects.forEach((effect) => {
-        if (effect.is(commentClickedEffect)) {
-          onCommentClick(effect.value);
-        }
-      });
-    });
-  }), [
-    onCommentClick
-  ]);
-};
-
-// packages/ui/react-ui-editor/src/extensions/debug.ts
-import { syntaxTree } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
-var debugNodeLogger = (log8 = console.log) => {
-  const logTokens = (state) => syntaxTree(state).iterate({
-    enter: (node) => log8(node.type)
-  });
-  return StateField5.define({
-    create: (state) => logTokens(state),
-    update: (_, tr) => logTokens(tr.state)
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
-var styles4 = EditorView9.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,
-    dropCursor(),
-    EditorView9.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
-          });
-        }
-      }
-    })
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/factories.ts
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { searchKeymap } from "@codemirror/search";
-import { EditorState } from "@codemirror/state";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView11, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
-import defaultsDeep2 from "lodash.defaultsdeep";
-import merge from "lodash.merge";
-import { generateName } from "@dxos/display-name";
-import { log as log5 } from "@dxos/log";
-import { hueTokens } from "@dxos/react-ui-theme";
-import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/focus.ts
-import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
-import { EditorView as EditorView10 } from "@codemirror/view";
-var focusEffect = StateEffect4.define();
-var focusField = StateField6.define({
-  create: () => false,
-  update: (value, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(focusEffect)) {
-        return effect.value;
-      }
-    }
-    return value;
-  }
-});
-var focus = [
-  focusField,
-  EditorView10.domEventHandlers({
-    focus: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(true)
-      }));
-    },
-    blur: (event, view) => {
-      setTimeout(() => view.dispatch({
-        effects: focusEffect.of(false)
-      }));
-    }
-  })
-];
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: "text-md"
-};
-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 mx(headings[level], "dark:text-primary-400");
-  }
-};
-
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import get from "lodash.get";
-import { tokens } from "@dxos/react-ui-theme";
-var getToken = (path, defaultValue) => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
-var fontBody = getToken("fontFamily.body");
-var fontMono = getToken("fontFamily.mono");
-
-// packages/ui/react-ui-editor/src/styles/theme.ts
-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.
-  * NOTE: They can't be transparent since the content needs to scroll below.
-  */
-  ".cm-gutters": {
-    background: "var(--surface-bg)",
-    borderRight: "none"
-  },
-  ".cm-gutter": {},
-  ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-    minWidth: "40px",
-    alignContent: "center"
-  },
-  /**
-  * Height is set to match the corresponding line.
-  */
-  ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "16px"
-  },
-  /**
-  * 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",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem"
-  },
-  ".cm-link > span": {
-    color: "var(--dx-accentText)"
-  },
-  /**
-  * Tooltip.
-  */
-  ".cm-tooltip": {
-    background: "var(--dx-base)"
-  },
-  ".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)"
+  const commentState = state.field(commentsState, false);
+  if (commentState === void 0) {
+    return false;
+  }
+  const { selection } = state;
+  for (const range of selection.ranges) {
+    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
+      return true;
+    }
+  }
+  return false;
+};
+var hasActiveSelection = (state) => {
+  return state.selection.ranges.some((range) => !range.empty);
+};
+var ExternalCommentSync = class {
+  constructor(view, id, subscribe, getComments) {
+    this.destroy = () => {
+      this.unsubscribe();
+    };
+    const updateComments = () => {
+      const comments2 = getComments();
+      if (id === view.state.facet(documentId)) {
+        queueMicrotask(() => view.dispatch({
+          effects: setComments.of({
+            id,
+            comments: comments2
+          })
+        }));
+      }
+    };
+    this.unsubscribe = subscribe(updateComments);
+  }
+};
+var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin4.fromClass(class {
+  constructor(view) {
+    return new ExternalCommentSync(view, id, subscribe, getComments);
+  }
+});
+var useCommentState = (state) => {
+  return useMemo2(() => EditorView9.updateListener.of((update2) => {
+    if (update2.docChanged || update2.selectionSet) {
+      state.comment = selectionOverlapsComment(update2.state);
+      state.selection = hasActiveSelection(update2.state);
+    }
+  }), [
+    state
+  ]);
+};
+var useComments = (view, id, comments2) => {
+  useEffect(() => {
+    if (view) {
+      if (id === view.state.facet(documentId)) {
+        view.dispatch({
+          effects: setComments.of({
+            id,
+            comments: comments2 ?? []
+          })
+        });
+      }
     }
+  });
+};
+var useCommentClickListener = (onCommentClick) => {
+  return useMemo2(() => EditorView9.updateListener.of((update2) => {
+    update2.transactions.forEach((transaction) => {
+      transaction.effects.forEach((effect) => {
+        if (effect.is(commentClickedEffect)) {
+          onCommentClick(effect.value);
+        }
+      });
+    });
+  }), [
+    onCommentClick
+  ]);
+};
+
+// packages/ui/react-ui-editor/src/extensions/debug.ts
+import { syntaxTree } from "@codemirror/language";
+import { StateField as StateField5 } from "@codemirror/state";
+var debugNodeLogger = (log8 = console.log) => {
+  const logTokens = (state) => syntaxTree(state).iterate({
+    enter: (node) => log8(node.type)
+  });
+  return StateField5.define({
+    create: (state) => logTokens(state),
+    update: (_, tr) => logTokens(tr.state)
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/dnd.ts
+import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
+var styles4 = EditorView10.theme({
+  ".cm-dropCursor": {
+    borderLeft: "2px solid var(--dx-accentText)",
+    color: "var(--dx-accentText)",
+    padding: "0 4px"
   },
-  ".cm-panel.cm-search": {
-    padding: "4px",
-    borderTop: "1px solid var(--dx-separator)"
+  ".cm-dropCursor:after": {
+    content: '"\u2190"'
   }
+});
+var dropFile = (options = {}) => {
+  return [
+    styles4,
+    dropCursor(),
+    EditorView10.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
+          });
+        }
+      }
+    })
+  ];
 };
 
+// packages/ui/react-ui-editor/src/extensions/factories.ts
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { searchKeymap } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { EditorView as EditorView12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import defaultsDeep2 from "lodash.defaultsdeep";
+import merge from "lodash.merge";
+import { generateName } from "@dxos/display-name";
+import { log as log5 } from "@dxos/log";
+import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+
+// packages/ui/react-ui-editor/src/extensions/focus.ts
+import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
+import { EditorView as EditorView11 } from "@codemirror/view";
+var focusEffect = StateEffect4.define();
+var focusField = StateField6.define({
+  create: () => false,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(focusEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  }
+});
+var focus = [
+  focusField,
+  EditorView11.domEventHandlers({
+    focus: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(true)
+      }));
+    },
+    blur: (event, view) => {
+      setTimeout(() => view.dispatch({
+        effects: focusEffect.of(false)
+      }));
+    }
+  })
+];
+
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
@@ -2358,7 +2722,7 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView11.exceptionSink.of((err) => {
+    EditorView12.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
         L: 96,
@@ -2377,11 +2741,11 @@ var createBasicExtensions = (_props) => {
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView11.lineWrapping,
+    props.lineWrapping && EditorView12.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readonly && [
       EditorState.readOnly.of(true),
-      EditorView11.editable.of(false)
+      EditorView12.editable.of(false)
     ],
     props.scrollPastEnd && scrollPastEnd(),
     props.tabSize && EditorState.tabSize.of(props.tabSize),
@@ -2398,7 +2762,14 @@ var createBasicExtensions = (_props) => {
       // https://codemirror.net/docs/ref/#commands.historyKeymap
       ...props.history ? historyKeymap : [],
       // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...props.search ? searchKeymap : []
+      ...props.search ? searchKeymap : [],
+      // Disable bindings that conflict with system shortcuts.
+      // TODO(burdon): Catalog global shortcuts.
+      {
+        key: "Mod-Shift-k",
+        preventDefault: true,
+        run: () => true
+      }
     ].filter(isNotFalsy3))
   ].filter(isNotFalsy3);
 };
@@ -2410,14 +2781,14 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView11.darkTheme.of(themeMode === "dark"),
-    EditorView11.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
+    EditorView12.darkTheme.of(themeMode === "dark"),
+    EditorView12.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView11.editorAttributes.of({
+    slots.editor?.className && EditorView12.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView11.contentAttributes.of({
+    slots.content?.className && EditorView12.contentAttributes.of({
       class: slots.content.className
     })
   ].filter(isNotFalsy3);
@@ -2429,15 +2800,15 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   }
   if (space && identity) {
     const peerId = identity?.identityKey.toHex();
-    const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
+    const hue = identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0");
     extensions.push(awareness(new SpaceAwarenessProvider({
       space,
       channel: `awareness.${id}`,
       peerId: identity.identityKey.toHex(),
       info: {
         displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        darkColor: cursorDarkValue,
-        lightColor: cursorLightValue
+        darkColor: `var(--dx-${hue}Cursor)`,
+        lightColor: `var(--dx-${hue}Cursor)`
       }
     })));
   }
@@ -2446,8 +2817,8 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView12 } from "@codemirror/view";
-import React2 from "react";
+import { EditorView as EditorView13 } from "@codemirror/view";
+import React3 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
   codeFolding({
@@ -2460,7 +2831,7 @@ var folding = (_props = {}) => [
       const el = createElement("div", {
         className: "flex h-full items-center"
       });
-      return renderRoot(el, /* @__PURE__ */ React2.createElement(Icon, {
+      return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
         icon: "ph--caret-right--regular",
         size: 3,
         classNames: [
@@ -2470,7 +2841,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView12.theme({
+  EditorView13.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2483,14 +2854,14 @@ var folding = (_props = {}) => [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView13 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView13.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2500,8 +2871,8 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView14, keymap as keymap7 } from "@codemirror/view";
-import { useMemo as useMemo2, useState as useState2 } from "react";
+import { EditorView as EditorView15, keymap as keymap7 } from "@codemirror/view";
+import { useMemo as useMemo3 } from "react";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
 (function(Inline2) {
@@ -3588,65 +3959,56 @@ var getFormatting = (state) => {
     listStyle: listStyle || null
   };
 };
-var useFormattingState = () => {
-  const [state, setState] = useState2();
-  const observer = useMemo2(() => EditorView14.updateListener.of((update2) => {
+var useFormattingState = (state) => {
+  return useMemo3(() => EditorView15.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
-      setState((prevState) => {
-        const newState = getFormatting(update2.state);
-        if (!prevState || !formattingEquals(prevState, newState)) {
-          return newState;
-        }
-        return prevState;
+      Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
+        state[key] = active;
       });
     }
   }), []);
-  return [
-    state,
-    observer
-  ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
-var processAction = (view, action) => {
+// packages/ui/react-ui-editor/src/extensions/markdown/editorAction.ts
+var processEditorPayload = (view, { type, data }) => {
   let inlineType, listType;
-  switch (action.type) {
+  switch (type) {
     case "heading":
-      setHeading(parseInt(action.data))(view);
+      setHeading(parseInt(data))(view);
       break;
     case "strong":
     case "emphasis":
     case "strikethrough":
     case "code":
-      inlineType = action.type === "strong" ? Inline.Strong : action.type === "emphasis" ? Inline.Emphasis : action.type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
-      (typeof action.data === "boolean" ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+      inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
+      (typeof data === "boolean" ? setStyle(inlineType, data) : toggleStyle(inlineType))(view);
       break;
     case "list-ordered":
     case "list-bullet":
     case "list-task":
-      listType = action.type === "list-ordered" ? List.Ordered : action.type === "list-bullet" ? List.Bullet : List.Task;
-      (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(view);
+      listType = type === "list-ordered" ? List.Ordered : type === "list-bullet" ? List.Bullet : List.Task;
+      (data === false ? removeList(listType) : data === true ? addList(listType) : toggleList(listType))(view);
       break;
     case "blockquote":
-      (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      (data === false ? removeBlockquote : data === true ? addBlockquote : toggleBlockquote)(view);
       break;
     case "codeblock":
-      (action.data === false ? removeCodeblock : addCodeblock)(view);
+      (data === false ? removeCodeblock : addCodeblock)(view);
       break;
     case "table":
       insertTable(view);
       break;
     case "link":
-      (action.data === false ? removeLink : addLink())(view);
+      (data === false ? removeLink : addLink())(view);
       break;
     case "image":
       addLink({
-        url: action.data,
+        url: data,
         image: true
       })(view);
       break;
     case "comment":
-      createComment(view);
+      createComment2(view);
       break;
   }
   requestAnimationFrame(() => {
@@ -3910,9 +4272,9 @@ var convertTreeToJson = (state) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView18, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { EditorView as EditorView19, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
@@ -4061,7 +4423,7 @@ var getValidUrl = (str) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField8.define({
@@ -4089,7 +4451,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView15.decorations.from(field)
+      provide: (field) => EditorView16.decorations.from(field)
     })
   ];
 };
@@ -4149,10 +4511,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView16.theme({
+var formattingStyles = EditorView17.theme({
   /**
   * Horizontal rule.
   */
@@ -4246,18 +4608,39 @@ var formattingStyles = EditorView16.theme({
     height: "auto",
     borderTop: "0.5rem solid transparent",
     borderBottom: "0.5rem solid transparent"
+  },
+  ".cm-image-with-loader": {
+    display: "block",
+    opacity: "0",
+    transitionDuration: "350ms",
+    transitionProperty: "opacity"
+  },
+  ".cm-image-with-loader.cm-loaded-image": {
+    opacity: "1"
+  },
+  ".cm-image-wrapper": {
+    "grid-template-columns": "1fr",
+    display: "grid",
+    margin: "0.5rem 0",
+    overflow: "hidden",
+    transitionDuration: "350ms",
+    transitionProperty: "height",
+    "& > *": {
+      "grid-row-start": 1,
+      "grid-column-start": 1
+    }
   }
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView17.decorations.from(field)
+    provide: (field) => EditorView18.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -4389,7 +4772,7 @@ var CheckboxWidget = class extends WidgetType5 {
   }
   toDOM(view) {
     const input = document.createElement("input");
-    input.className = "cm-task-checkbox ch-checkbox";
+    input.className = "cm-task-checkbox dx-checkbox";
     input.type = "checkbox";
     input.tabIndex = -1;
     input.checked = this._checked;
@@ -4441,16 +4824,16 @@ var TextWidget = class extends WidgetType5 {
 };
 var hide = Decoration7.replace({});
 var blockQuote = Decoration7.line({
-  class: mx2("cm-blockquote")
+  class: mx4("cm-blockquote")
 });
 var fencedCodeLine = Decoration7.line({
-  class: mx2("cm-code cm-codeblock-line")
+  class: mx4("cm-code cm-codeblock-line")
 });
 var fencedCodeLineFirst = Decoration7.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
 var fencedCodeLineLast = Decoration7.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
+  class: mx4("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
@@ -4791,9 +5174,9 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
+        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
       ]
     }),
     image(),
@@ -4980,428 +5363,29 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-var iconStyles = getSize(5);
-var buttonStyles = "min-bs-0 p-1";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
-};
-var ToolbarSeparator = () => /* @__PURE__ */ React3.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, classNames, state }) => {
-  return /* @__PURE__ */ React3.createElement(ToolbarContextProvider, {
-    onAction,
-    state
-  }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
-    elevation: "positioned"
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
-    classNames: [
-      "p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden",
-      classNames
-    ],
-    style: {
-      contain: "layout"
-    }
-  }, children)));
-};
-var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
-  return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement(Icon2, {
-    className: iconStyles
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
-};
-var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
-  return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement(Icon2, {
-    className: iconStyles
-  }), /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
-};
-var HeadingIcons = {
-  "0": Paragraph,
-  "1": TextHOne,
-  "2": TextHTwo,
-  "3": TextHThree,
-  "4": TextHFour,
-  "5": TextHFive,
-  "6": TextHSix
-};
-var MarkdownHeading = () => {
-  const { t } = useTranslation(translationKey);
-  const { onAction, state } = useToolbarContext("MarkdownFormatting");
-  const blockType = state ? state.blockType : "paragraph";
-  const header = blockType && /heading(\d)/.exec(blockType);
-  const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
-  const HeadingIcon = HeadingIcons[value ?? "0"];
-  const suppressNextTooltip = useRef(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
-    open: tooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && suppressNextTooltip.current) {
-        suppressNextTooltip.current = false;
-        return setTooltipOpen(false);
-      } else {
-        return setTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    open: selectOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setSelectOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
-    variant: "ghost",
-    classNames: buttonStyles,
-    disabled: value === null
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("heading label")), /* @__PURE__ */ React3.createElement(HeadingIcon, {
-    className: iconStyles
-  }), /* @__PURE__ */ React3.createElement(CaretDown, null))))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
-    classNames: "is-min md:is-min",
-    onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
-    const Icon2 = HeadingIcons[level];
-    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
-      key: level,
-      checked: value === level,
-      onClick: () => onAction?.({
-        type: "heading",
-        data: level
-      })
-    }, /* @__PURE__ */ React3.createElement("span", {
-      className: "sr-only"
-    }, t("heading level label", {
-      count: parseInt(level)
-    })), /* @__PURE__ */ React3.createElement(Icon2, {
-      className: iconStyles
-    }), /* @__PURE__ */ React3.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React3.createElement(Check, null)));
-  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
-};
-var markdownStyles = [
-  {
-    type: "strong",
-    Icon: TextB,
-    getState: (state) => !!state?.strong
-  },
-  {
-    type: "emphasis",
-    Icon: TextItalic,
-    getState: (state) => !!state?.emphasis
-  },
-  {
-    type: "strikethrough",
-    Icon: TextStrikethrough,
-    getState: (state) => !!state?.strikethrough
-  },
-  {
-    type: "code",
-    Icon: Code,
-    getState: (state) => !!state?.code
-  },
-  {
-    type: "link",
-    Icon: Link,
-    getState: (state) => !!state?.link
-  }
-];
-var MarkdownStyles = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
-    type: "multiple",
-    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    disabled: state?.blockType === "codeblock",
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
-};
-var markdownLists = [
-  {
-    type: "list-bullet",
-    Icon: ListBullets,
-    getState: (state) => state.listStyle === "bullet"
-  },
-  {
-    type: "list-ordered",
-    Icon: ListNumbers,
-    getState: (state) => state.listStyle === "ordered"
-  },
-  {
-    type: "list-task",
-    Icon: ListChecks,
-    getState: (state) => state.listStyle === "task"
-  }
-];
-var MarkdownLists = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: state?.listStyle ? `list-${state.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
-};
-var markdownBlocks = [
-  {
-    type: "blockquote",
-    Icon: Quotes,
-    getState: (state) => !!state?.blockQuote
-  },
-  {
-    type: "codeblock",
-    Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock"
-  },
-  {
-    type: "table",
-    Icon: Table2,
-    getState: (state) => state.blockType === "tablecell",
-    disabled: (state) => !state.blankLine
-  }
-];
-var MarkdownBlocks = () => {
-  const { onAction, state } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  const value = markdownBlocks.find(({ getState }) => state && getState(state));
-  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
-    key: type,
-    value: type,
-    Icon: Icon2,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
-};
-var MarkdownStandard = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(MarkdownHeading, null), /* @__PURE__ */ React3.createElement(MarkdownStyles, null), /* @__PURE__ */ React3.createElement(MarkdownLists, null), /* @__PURE__ */ React3.createElement(MarkdownBlocks, null));
-var MarkdownCustom = ({ onUpload } = {}) => {
-  const { onAction } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  const { acceptedFiles, getInputProps, open } = useDropzone({
-    multiple: false,
-    noDrag: true,
-    accept: {
-      "image/*": [
-        ".jpg",
-        ".jpeg",
-        ".png",
-        ".gif"
-      ]
-    }
-  });
-  useEffect2(() => {
-    if (onUpload && acceptedFiles.length) {
-      requestAnimationFrame(async () => {
-        const f = acceptedFiles[0];
-        const file = new File([
-          f
-        ], f.name, {
-          type: f.type,
-          lastModified: f.lastModified
-        });
-        const info = await onUpload(file);
-        if (info) {
-          onAction?.({
-            type: "image",
-            data: info.url
-          });
-        }
-      });
-    }
-  }, [
-    acceptedFiles
-  ]);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("input", getInputProps()), /* @__PURE__ */ React3.createElement(ToolbarButton, {
-    value: "image",
-    Icon: Image,
-    onClick: () => open()
-  }, t("image label")));
-};
-var ViewModeIcons = {
-  preview: PencilSimple,
-  readonly: PencilSimpleSlash,
-  source: MarkdownLogo
-};
-var MarkdownView = ({ mode }) => {
-  const { t } = useTranslation(translationKey);
-  const { onAction } = useToolbarContext("ViewMode");
-  const ModeIcon = ViewModeIcons[mode ?? "preview"];
-  const suppressNextTooltip = useRef(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
-    open: tooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && suppressNextTooltip.current) {
-        suppressNextTooltip.current = false;
-        return setTooltipOpen(false);
-      } else {
-        return setTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    open: selectOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setSelectOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
-    variant: "ghost",
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("mode label")), /* @__PURE__ */ React3.createElement(ModeIcon, {
-    className: iconStyles
-  }), /* @__PURE__ */ React3.createElement(CaretDown, null))))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
-    classNames: "is-min md:is-min",
-    onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
-    const Icon2 = ViewModeIcons[value];
-    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
-      key: value,
-      checked: value === mode,
-      onClick: () => onAction?.({
-        type: "view-mode",
-        data: value
-      })
-    }, /* @__PURE__ */ React3.createElement(Icon2, {
-      className: iconStyles
-    }), /* @__PURE__ */ React3.createElement("span", {
-      className: "whitespace-nowrap grow"
-    }, t(`${value} mode label`)), /* @__PURE__ */ React3.createElement(Check, {
-      className: value === mode ? "visible" : "invisible"
-    }));
-  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
-};
-var MarkdownActions = () => {
-  const { onAction, state } = useToolbarContext("MarkdownActions");
-  const { t } = useTranslation(translationKey);
-  let commentToolTipKey = "comment label";
-  if (state?.comment) {
-    commentToolTipKey = "selection overlaps existing comment label";
-  } else if (state?.selection === false) {
-    commentToolTipKey = "select text to comment label";
-  }
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ToolbarButton, {
-    value: "search",
-    Icon: MagnifyingGlass,
-    onClick: () => onAction?.({
-      type: "search"
-    })
-  }, t("search label")), /* @__PURE__ */ React3.createElement(ToolbarButton, {
-    value: "comment",
-    Icon: ChatText,
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    }),
-    disabled: !state || state.comment || !state.selection
-  }, t(commentToolTipKey)));
-};
-var Toolbar = {
-  Root: ToolbarRoot,
-  Button: ToolbarToggleButton,
-  Separator: ToolbarSeparator,
-  View: MarkdownView,
-  Markdown: MarkdownStandard,
-  Custom: MarkdownCustom,
-  Actions: MarkdownActions
-};
-
-// packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView19 } from "@codemirror/view";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var margin = "!mt-[1rem]";
-var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
-var editorFullWidth = mx3(margin);
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorGutter = EditorView19.theme({
-  // Match margin from content.
-  ".cm-gutters": {
-    marginTop: "16px",
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = EditorView19.theme({
-  ".cm-content": {
-    fontFamily: fontMono
-  }
-});
-
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
+import { useCallback as useCallback2 } from "react";
 var useActionHandler = (view) => {
-  return (action) => view && processAction(view, action);
+  return useCallback2((action) => view && processEditorPayload(view, action.properties), [
+    view
+  ]);
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView20 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
 import { log as log7 } from "@dxos/log";
 import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
-  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
-  const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const [view, setView] = useState4();
-  const parentRef = useRef2(null);
-  useEffect3(() => {
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo4(() => getProviderValue(props), deps ?? []);
+  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+  const [view, setView] = useState();
+  const parentRef = useRef(null);
+  useEffect2(() => {
     let view2;
     if (parentRef.current) {
       log7("create", {
@@ -5475,7 +5459,7 @@ var useTextEditor = (props = {}, deps = []) => {
       view2?.destroy();
     };
   }, deps);
-  useEffect3(() => {
+  useEffect2(() => {
     if (view) {
       if (scrollTo || selection) {
         if (selection && selection.anchor > view.state.doc.length) {
@@ -5502,7 +5486,7 @@ var useTextEditor = (props = {}, deps = []) => {
     scrollTo,
     selection
   ]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (view && autoFocus) {
       view.focus();
     }
@@ -5516,7 +5500,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = useCallback((event) => {
+  const handleKeyUp = useCallback3((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -5545,6 +5529,7 @@ export {
   EditorInputMode,
   EditorInputModes,
   EditorState3 as EditorState,
+  EditorToolbar,
   EditorView21 as EditorView,
   EditorViewMode,
   EditorViewModes,
@@ -5554,7 +5539,6 @@ export {
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextKind,
-  Toolbar,
   addBlockquote,
   addCodeblock,
   addLink,
@@ -5573,8 +5557,10 @@ export {
   commentsState,
   convertTreeToJson,
   createBasicExtensions,
-  createComment,
+  createComment2 as createComment,
   createDataExtensions,
+  createEditorAction,
+  createEditorActionGroup,
   createEditorStateStore,
   createEditorStateTransaction,
   createElement,
@@ -5613,7 +5599,7 @@ export {
   mention,
   overlap,
   preventNewline,
-  processAction,
+  processEditorPayload,
   removeBlockquote,
   removeCodeblock,
   removeLink,
@@ -5629,6 +5615,8 @@ export {
   setSelection,
   setStyle,
   singleValueFacet,
+  stackItemContentEditorClassNames,
+  stackItemContentToolbarClassNames,
   table,
   tags2 as tags,
   textRange,
@@ -5646,9 +5634,9 @@ export {
   useCommentClickListener,
   useCommentState,
   useComments,
+  useEditorToolbarState,
   useFormattingState,
   useTextEditor,
-  useToolbarContext,
   wrapWithCatch
 };
 //# sourceMappingURL=index.mjs.map