@dxos/react-ui-editor 0.4.8-main.5f46a83 → 0.4.8-main.97e86fe

package/dist/lib/browser/index.mjs

@@ -29,12 +29,12 @@ import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
-import { log as log7 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
+import { log as log9 } from "@dxos/log";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -492,7 +492,7 @@ var automerge = (accessor) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/awareness.ts
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
@@ -727,11 +727,115 @@ var styles2 = EditorView3.baseTheme({
   }
 });
 
+// packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts
+import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { invariant } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness-provider.ts";
+var DEBOUNCE_INTERVAL = 100;
+var SpaceAwarenessProvider = class {
+  constructor(params) {
+    this._remoteStates = /* @__PURE__ */ new Map();
+    this.remoteStateChange = new Event2();
+    this._space = params.space;
+    this._channel = params.channel;
+    this._peerId = params.peerId;
+    this._info = params.info;
+  }
+  open() {
+    this._ctx = new Context2();
+    this._postTask = new DeferredTask(this._ctx, async () => {
+      if (this._localState) {
+        await this._space.postMessage(this._channel, {
+          kind: "post",
+          state: this._localState
+        });
+        await sleep(DEBOUNCE_INTERVAL);
+      }
+    });
+    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
+      switch (message.payload.kind) {
+        case "query": {
+          this._handleQueryMessage();
+          break;
+        }
+        case "post": {
+          this._handlePostMessage(message.payload);
+          break;
+        }
+      }
+    }));
+    void this._space.postMessage(this._channel, {
+      kind: "query"
+    }).catch((err) => {
+      log2.debug("failed to query awareness", {
+        err
+      }, {
+        F: __dxlog_file2,
+        L: 89,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+    });
+  }
+  close() {
+    void this._ctx?.dispose();
+    this._ctx = void 0;
+    this._postTask = void 0;
+  }
+  getRemoteStates() {
+    return Array.from(this._remoteStates.values());
+  }
+  update(position) {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file2,
+      L: 104,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._localState = {
+      peerId: this._peerId,
+      position,
+      info: this._info
+    };
+    this._postTask.schedule();
+  }
+  _handleQueryMessage() {
+    invariant(this._postTask, void 0, {
+      F: __dxlog_file2,
+      L: 115,
+      S: this,
+      A: [
+        "this._postTask",
+        ""
+      ]
+    });
+    this._postTask.schedule();
+  }
+  _handlePostMessage(message) {
+    invariant(message.kind === "post", void 0, {
+      F: __dxlog_file2,
+      L: 120,
+      S: this,
+      A: [
+        "message.kind === 'post'",
+        ""
+      ]
+    });
+    this._remoteStates.set(message.state.peerId, message.state);
+    this.remoteStateChange.emit();
+  }
+};
+
 // packages/ui/react-ui-editor/src/extensions/blast.ts
 import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
-import { invariant } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+import { invariant as invariant2 } from "@dxos/invariant";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -857,8 +961,8 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant2(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file3,
       L: 141,
       S: this,
       A: [
@@ -894,8 +998,8 @@ var Blaster = class {
     }
   }
   start() {
-    invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant2(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file3,
       L: 180,
       S: this,
       A: [
@@ -1261,7 +1365,7 @@ import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce } from "@dxos/async";
-import { log as log3 } from "@dxos/log";
+import { log as log4 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/markdown.ts
@@ -1299,14 +1403,14 @@ var editorFillLayoutRoot = "bs-full relative";
 var editorFillLayoutEditor = "!absolute inset-0";
 
 // packages/ui/react-ui-editor/src/util.ts
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
-    log2.catch(err, void 0, {
-      F: __dxlog_file3,
+    log3.catch(err, void 0, {
+      F: __dxlog_file4,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1329,10 +1433,10 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    log2.info("changes", {
+    log3.info("changes", {
       changes
     }, {
-      F: __dxlog_file3,
+      F: __dxlog_file4,
       L: 39,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1341,7 +1445,7 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var documentId = Facet4.define({
   combine: (values) => values[0]
 });
@@ -1427,8 +1531,8 @@ var commentsDecorations = EditorView7.decorations.compute([
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range || range.from === range.to) {
-      log3.warn("Invalid range:", range, {
-        F: __dxlog_file4,
+      log4.warn("Invalid range:", range, {
+        F: __dxlog_file5,
         L: 132,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1749,8 +1853,8 @@ var useComments = (view, id, comments2 = []) => {
 // packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
 import { Transaction } from "@codemirror/state";
 import { EditorView as EditorView8 } from "@codemirror/view";
-import { log as log4 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts";
+import { log as log5 } from "@dxos/log";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts";
 var annotation = "cursorLineMargin";
 var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
 var cursorLineMargin = (options = {
@@ -1777,8 +1881,8 @@ var cursorLineMargin = (options = {
     const needsScrollTop = false;
     const needsScrollBot = mainLine >= visBotLine - lines;
     if (needsScrollTop && needsScrollBot) {
-      log4.warn("is cursorScrollMargin too large for the editor size?", void 0, {
-        F: __dxlog_file5,
+      log5.warn("is cursorScrollMargin too large for the editor size?", void 0, {
+        F: __dxlog_file6,
         L: 65,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1810,12 +1914,12 @@ var cursorLineMargin = (options = {
 
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
-import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
+import { invariant as invariant3 } from "@dxos/invariant";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
 var documentId2 = Facet5.define({
   combine: (providers) => {
-    invariant2(providers.length <= 1, void 0, {
-      F: __dxlog_file6,
+    invariant3(providers.length <= 1, void 0, {
+      F: __dxlog_file7,
       L: 11,
       S: void 0,
       A: [
@@ -1829,15 +1933,15 @@ var documentId2 = Facet5.define({
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
 import { EditorView as EditorView9 } from "@codemirror/view";
-import { log as log5 } from "@dxos/log";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/dnd.ts";
+import { log as log6 } from "@dxos/log";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/dnd.ts";
 var dnd = () => {
   return EditorView9.domEventHandlers({
     drop: (event, view) => {
-      log5.info("domEventHandlersDrop", {
+      log6.info("domEventHandlersDrop", {
         event
       }, {
-        F: __dxlog_file7,
+        F: __dxlog_file8,
         L: 14,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1846,178 +1950,499 @@ var dnd = () => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView10 } from "@codemirror/view";
-var listener = ({ onFocus, onChange }) => {
-  const extensions = [];
-  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
-    onFocus(focusing);
-    return null;
-  }));
-  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
-    onChange(update2.state.doc.toString());
-  }));
-  return extensions;
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBracketsKeymap } from "@codemirror/autocomplete";
-import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { searchKeymap } from "@codemirror/search";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { keymap as keymap5 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/extensions/factories.ts
+import { closeBrackets } from "@codemirror/autocomplete";
+import { history } from "@codemirror/commands";
+import { bracketMatching } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import defaultsDeep2 from "lodash.defaultsdeep";
+import { generateName } from "@dxos/display-name";
+import { log as log7 } from "@dxos/log";
+import { hueTokens } from "@dxos/react-ui-theme";
+import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import { Table } from "@lezer/markdown";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // Custom.
-  TableCell: Tag.define()
-};
-Table.defineNodes?.forEach((node) => {
-  switch (node?.name) {
-    case "TableCell": {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-var markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
-  }
-];
-var markdownHighlightStyle = (readonly) => {
-  return HighlightStyle.define([
-    {
-      tag: [
-        tags.keyword,
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-        tags.color,
-        tags.constant(tags.name),
-        tags.standard(tags.name),
-        tags.definition(tags.name),
-        tags.separator,
-        tags.typeName,
-        tags.className,
-        tags.number,
-        tags.changed,
-        tags.annotation,
-        tags.modifier,
-        tags.self,
-        tags.namespace,
-        tags.operator,
-        tags.operatorKeyword,
-        tags.escape,
-        tags.regexp,
-        tags.special(tags.string),
-        tags.meta,
-        tags.comment,
-        tags.atom,
-        tags.bool,
-        tags.special(tags.variableName),
-        tags.processingInstruction,
-        tags.string,
-        tags.inserted,
-        tags.invalid
-      ],
-      color: "inherit !important"
-    },
-    // Markdown marks.
-    {
-      tag: [
-        tags.meta,
-        tags.processingInstruction,
-        markdownTags.LinkLabel,
-        markdownTags.LinkReference,
-        markdownTags.ListMark
-      ],
-      class: mark
-    },
-    // Markdown marks.
-    {
-      tag: [
-        markdownTags.CodeMark,
-        markdownTags.HeaderMark,
-        markdownTags.QuoteMark,
-        markdownTags.EmphasisMark
-      ],
-      class: mark
-    },
-    // E.g., code block language (after ```).
-    {
-      tag: [
-        tags.function(tags.variableName),
-        tags.labelName
-      ],
-      class: codeMark
-    },
-    {
-      tag: [
-        tags.monospace
-      ],
-      class: "font-mono"
-    },
-    // Headings.
-    {
-      tag: tags.heading1,
-      class: heading(1)
-    },
-    {
-      tag: tags.heading2,
-      class: heading(2)
-    },
-    {
-      tag: tags.heading3,
-      class: heading(3)
-    },
-    {
-      tag: tags.heading4,
-      class: heading(4)
-    },
-    {
-      tag: tags.heading5,
-      class: heading(5)
-    },
-    {
-      tag: tags.heading6,
-      class: heading(6)
-    },
-    // Emphasis.
-    {
-      tag: tags.emphasis,
-      class: italic
-    },
-    {
-      tag: tags.strong,
-      class: bold
+// packages/ui/react-ui-editor/src/themes/default.ts
+import get3 from "lodash.get";
+var defaultTheme = {
+  //
+  // Main layout:
+  // https://codemirror.net/examples/styling
+  //
+  // <div class="cm-editor [cm-focused] [generated classes]">
+  //   <div class="cm-scroller">
+  //     <div class="cm-gutters">
+  //       <div class="cm-gutter [...]">
+  //         <div class="cm-gutterElement">...</div>
+  //       </div>
+  //     </div>
+  //     <div class="cm-content" role="textbox" contenteditable="true">
+  //       <div class="cm-line"></div>
+  //     </div>
+  //     <div class="cm-selectionLayer">
+  //       <div class="cm-selectionBackground"></div>
+  //     </div>
+  //     <div class="cm-cursorLayer">
+  //       <div class="cm-cursor"></div>
+  //     </div>
+  //   </div>
+  // </div>
+  //
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
+  },
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
+  ".cm-scroller": {
+    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
+    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
+    overflowY: "auto",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    lineHeight: 1.5
+  },
+  ".cm-content": {
+    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
+    // padding: 'unset',
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px"
+  },
+  "&light .cm-content": {
+    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    caretColor: "black"
+  },
+  "&dark .cm-content": {
+    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    caretColor: "white"
+  },
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
+  },
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
+  },
+  "&light .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+  },
+  //
+  // line
+  //
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "transparent"
+  },
+  //
+  // gutter
+  //
+  ".cm-gutterElement": {
+    width: "48px"
+  },
+  //
+  // Selection
+  //
+  "&light .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.100")
+  },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.200")
+  },
+  "&dark .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.700")
+  },
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.600")
+  },
+  //
+  // Search
+  //
+  "&light .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.700")
+  },
+  //
+  // link
+  //
+  ".cm-link": {
+    color: get3(tokens, "extend.colors.primary.500"),
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  //
+  // tooltip
+  //
+  ".cm-tooltip": {
+    border: "none",
+    background: "unset"
+  },
+  ".cm-tooltip-below": {},
+  //
+  // autocomplete
+  //
+  ".cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip-autocomplete ul li": {},
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none"
+  },
+  //
+  // table
+  //
+  ".cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
+  ".cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    fontWeight: 100,
+    textAlign: "left",
+    color: get3(tokens, "extend.colors.neutral.500")
+  },
+  ".cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
+  },
+  //
+  // font size
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
+  //
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
+  /**
+  * Panels
+  * TODO(burdon): Needs styling attention (esp. dark mode).
+  * 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
+  */
+  ".cm-panels": {
+    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+  },
+  ".cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-button": {
+    margin: "4px",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
+    backgroundImage: "none",
+    border: "none",
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.200")
     },
-    {
-      tag: tags.strikethrough,
-      class: strikethrough
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.300"),
+      backgroundImage: "none"
+    }
+  },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/factories.ts
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var defaults = {
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  lineWrapping: true
+};
+var createBasicExtensions = (_props) => {
+  const props = defaultsDeep2({}, _props, defaults);
+  return [
+    // TODO(burdon): Doesn't catch errors in keymap functions.
+    EditorView10.exceptionSink.of((err) => {
+      log7.catch(err, void 0, {
+        F: __dxlog_file9,
+        L: 78,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }),
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.crosshairCursor && crosshairCursor(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView10.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [
+      EditorState.readOnly.of(true),
+      EditorView10.editable.of(false)
+    ],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize)
+  ].filter(isNotFalsy2);
+};
+var defaultSlots = {
+  editor: {
+    className: "w-full bs-full"
+  }
+};
+var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
+  const slots = defaultsDeep2({}, _slots, defaultSlots);
+  return [
+    EditorView10.baseTheme(defaultTheme),
+    EditorView10.darkTheme.of(themeMode === "dark"),
+    theme && EditorView10.theme(theme),
+    slots.editor?.className && EditorView10.editorAttributes.of({
+      class: slots.editor.className
+    }),
+    slots.content?.className && EditorView10.contentAttributes.of({
+      class: slots.content.className
+    })
+  ].filter(isNotFalsy2);
+};
+var createDataExtensions = ({ id, text, space, identity }) => {
+  const extensions = [
+    automerge(text)
+  ];
+  if (space && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
+    const awarenessProvider2 = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorDarkValue,
+        lightColor: cursorLightValue
+      }
+    });
+    extensions.push(awareness(awarenessProvider2));
+  }
+  return extensions;
+};
+
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView11 } from "@codemirror/view";
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView11.focusChangeEffect.of((_, focusing) => {
+    onFocus(focusing);
+    return null;
+  }));
+  onChange && extensions.push(EditorView11.updateListener.of((update2) => {
+    onChange(update2.state.doc.toString());
+  }));
+  return extensions;
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { closeBracketsKeymap } from "@codemirror/autocomplete";
+import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { searchKeymap } from "@codemirror/search";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { keymap as keymap5 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
+};
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
+    }
+  }
+});
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
+  }
+];
+var markdownHighlightStyle = (readonly) => {
+  return HighlightStyle.define([
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid
+      ],
+      color: "inherit !important"
+    },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark
+      ],
+      class: mark
+    },
+    // Markdown marks.
+    {
+      tag: [
+        markdownTags.CodeMark,
+        markdownTags.HeaderMark,
+        markdownTags.QuoteMark,
+        markdownTags.EmphasisMark
+      ],
+      class: mark
+    },
+    // E.g., code block language (after ```).
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.labelName
+      ],
+      class: codeMark
+    },
+    {
+      tag: [
+        tags.monospace
+      ],
+      class: "font-mono"
+    },
+    // Headings.
+    {
+      tag: tags.heading1,
+      class: heading(1)
+    },
+    {
+      tag: tags.heading2,
+      class: heading(2)
+    },
+    {
+      tag: tags.heading3,
+      class: heading(3)
+    },
+    {
+      tag: tags.heading4,
+      class: heading(4)
+    },
+    {
+      tag: tags.heading5,
+      class: heading(5)
+    },
+    {
+      tag: tags.heading6,
+      class: heading(6)
+    },
+    // Emphasis.
+    {
+      tag: tags.emphasis,
+      class: italic
+    },
+    {
+      tag: tags.strong,
+      class: bold
+    },
+    {
+      tag: tags.strikethrough,
+      class: strikethrough
     },
     // Naked URLs.
     {
@@ -2101,7 +2526,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView11, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
@@ -2135,7 +2560,7 @@ var CheckboxWidget = class extends WidgetType3 {
   }
   toDOM(view) {
     const input = document.createElement("input");
-    input.className = "cm-task-checkbox";
+    input.className = "cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5";
     input.type = "checkbox";
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -2309,15 +2734,15 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        EditorView11.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView11.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView11.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
+        EditorView12.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
       ]
     }),
     formattingStyles
   ];
 };
-var formattingStyles = EditorView11.baseTheme({
+var formattingStyles = EditorView12.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -2370,7 +2795,7 @@ var formattingStyles = EditorView11.baseTheme({
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView12, keymap as keymap6 } from "@codemirror/view";
+import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
 import { useState, useMemo } from "react";
 var compareFormatting = (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;
@@ -3440,7 +3865,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView12.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3457,7 +3882,7 @@ var useFormattingState = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField5.define({
     create: (state) => {
@@ -3484,7 +3909,7 @@ var image = (options = {}) => {
         add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView13.decorations.from(field)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -3572,12 +3997,12 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView15, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField6.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView14.decorations.from(field)
+    provide: (field) => EditorView15.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -3671,8 +4096,8 @@ var TableWidget = class extends WidgetType5 {
 
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+import { log as log8 } from "@dxos/log";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -3684,10 +4109,10 @@ var mention = ({ onSearch }) => {
     icons: false,
     override: [
       (context) => {
-        log6.info("completion context", {
+        log8.info("completion context", {
           context
         }, {
-          F: __dxlog_file8,
+          F: __dxlog_file10,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -3794,9 +4219,9 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var instanceCount = 0;
-var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView15.scrollIntoView(0), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView16.scrollIntoView(0), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
   const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
@@ -3815,31 +4240,31 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log7("updating", {
+    log9("updating", {
       id,
       instanceId
     }, {
-      F: __dxlog_file9,
+      F: __dxlog_file11,
       L: 88,
       S: void 0,
       C: (f, a) => f(...a)
     });
-    const state = EditorState.create({
+    const state = EditorState2.create({
       doc,
       selection,
       extensions: [
         id && documentId2.of(id),
         // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
-        EditorView15.exceptionSink.of((err) => {
-          log7.catch(err, void 0, {
-            F: __dxlog_file9,
+        EditorView16.exceptionSink.of((err) => {
+          log9.catch(err, void 0, {
+            F: __dxlog_file11,
             L: 101,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Focus.
-        EditorView15.updateListener.of((update2) => {
+        EditorView16.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
             if (transaction.isUserEvent("focus.container")) {
               rootRef.current?.focus();
@@ -3847,9 +4272,9 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
           });
         }),
         extensions
-      ].filter(isNotFalsy2)
+      ].filter(isNotFalsy3)
     });
-    const view2 = new EditorView15({
+    const view2 = new EditorView16({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -4030,585 +4455,146 @@ var MarkdownHeading = () => {
     className: iconStyles
   }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
     className: iconStyles
-  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.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__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "multiple",
-    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
-    Icon,
-    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__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: state?.listStyle ? `list-${state.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
-    Icon,
-    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__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
-    Icon,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
-};
-var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
-var MarkdownExtended = () => {
-  const { onAction } = useToolbarContext("MarkdownStyles");
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    }),
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(ChatText, {
-    className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
-};
-var Toolbar = {
-  Root: ToolbarRoot,
-  Button: ToolbarButton,
-  Separator: ToolbarSeparator,
-  Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
-};
-
-// packages/ui/react-ui-editor/src/hooks/awareness-provider.ts
-import { DeferredTask, Event as Event2, sleep } from "@dxos/async";
-import { Context as Context2 } from "@dxos/context";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { log as log8 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
-var DEBOUNCE_INTERVAL = 100;
-var SpaceAwarenessProvider = class {
-  constructor(params) {
-    this._remoteStates = /* @__PURE__ */ new Map();
-    this.remoteStateChange = new Event2();
-    this._space = params.space;
-    this._channel = params.channel;
-    this._peerId = params.peerId;
-    this._info = params.info;
-  }
-  open() {
-    this._ctx = new Context2();
-    this._postTask = new DeferredTask(this._ctx, async () => {
-      if (this._localState) {
-        await this._space.postMessage(this._channel, {
-          kind: "post",
-          state: this._localState
-        });
-        await sleep(DEBOUNCE_INTERVAL);
-      }
-    });
-    this._ctx.onDispose(this._space.listen(this._channel, (message) => {
-      switch (message.payload.kind) {
-        case "query": {
-          this._handleQueryMessage();
-          break;
-        }
-        case "post": {
-          this._handlePostMessage(message.payload);
-          break;
-        }
-      }
-    }));
-    void this._space.postMessage(this._channel, {
-      kind: "query"
-    }).catch((err) => {
-      log8.debug("failed to query awareness", {
-        err
-      }, {
-        F: __dxlog_file10,
-        L: 89,
-        S: this,
-        C: (f, a) => f(...a)
-      });
-    });
-  }
-  close() {
-    void this._ctx?.dispose();
-    this._ctx = void 0;
-    this._postTask = void 0;
-  }
-  getRemoteStates() {
-    return Array.from(this._remoteStates.values());
-  }
-  update(position) {
-    invariant3(this._postTask, void 0, {
-      F: __dxlog_file10,
-      L: 104,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._localState = {
-      peerId: this._peerId,
-      position,
-      info: this._info
-    };
-    this._postTask.schedule();
-  }
-  _handleQueryMessage() {
-    invariant3(this._postTask, void 0, {
-      F: __dxlog_file10,
-      L: 115,
-      S: this,
-      A: [
-        "this._postTask",
-        ""
-      ]
-    });
-    this._postTask.schedule();
-  }
-  _handlePostMessage(message) {
-    invariant3(message.kind === "post", void 0, {
-      F: __dxlog_file10,
-      L: 120,
-      S: this,
-      A: [
-        "message.kind === 'post'",
-        ""
-      ]
-    });
-    this._remoteStates.set(message.state.peerId, message.state);
-    this.remoteStateChange.emit();
-  }
-};
-
-// packages/ui/react-ui-editor/src/hooks/extension-utils.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
-import { bracketMatching } from "@codemirror/language";
-import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView16, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
-import defaultsDeep2 from "lodash.defaultsdeep";
-import { useMemo as useMemo2 } from "react";
-import { generateName } from "@dxos/display-name";
-import { createDocAccessor, getTextContent } from "@dxos/echo-schema";
-import { log as log9 } from "@dxos/log";
-import { hueTokens } from "@dxos/react-ui-theme";
-import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/themes/default.ts
-import get3 from "lodash.get";
-var defaultTheme = {
-  //
-  // Main layout:
-  // https://codemirror.net/examples/styling
-  //
-  // <div class="cm-editor [cm-focused] [generated classes]">
-  //   <div class="cm-scroller">
-  //     <div class="cm-gutters">
-  //       <div class="cm-gutter [...]">
-  //         <div class="cm-gutterElement">...</div>
-  //       </div>
-  //     </div>
-  //     <div class="cm-content" role="textbox" contenteditable="true">
-  //       <div class="cm-line"></div>
-  //     </div>
-  //     <div class="cm-selectionLayer">
-  //       <div class="cm-selectionBackground"></div>
-  //     </div>
-  //     <div class="cm-cursorLayer">
-  //       <div class="cm-cursor"></div>
-  //     </div>
-  //   </div>
-  // </div>
-  //
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
-  ".cm-scroller": {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
-    overflowY: "auto",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    lineHeight: 1.5
-  },
-  ".cm-content": {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
-  },
-  "&light .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
-    caretColor: "black"
-  },
-  "&dark .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
-    caretColor: "white"
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "&light .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: get3(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
-  },
-  //
-  // line
-  //
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "transparent"
-  },
-  //
-  // gutter
-  //
-  ".cm-gutterElement": {
-    width: "48px"
-  },
-  //
-  // Selection
-  //
-  "&light .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.100")
-  },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.200")
-  },
-  "&dark .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.700")
-  },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get3(tokens, "extend.colors.primary.600")
-  },
-  //
-  // Search
-  //
-  "&light .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.100")
-  },
-  "&dark .cm-searchMatch": {
-    backgroundColor: get3(tokens, "extend.colors.yellow.700")
-  },
-  //
-  // link
-  //
-  ".cm-link": {
-    color: get3(tokens, "extend.colors.primary.500"),
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
-  },
-  //
-  // tooltip
-  //
-  ".cm-tooltip": {
-    border: "none",
-    background: "unset"
-  },
-  ".cm-tooltip-below": {},
-  //
-  // autocomplete
-  //
-  ".cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip-autocomplete ul li": {},
-  ".cm-tooltip-autocomplete ul li[aria-selected]": {},
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none"
-  },
-  //
-  // table
-  //
-  ".cm-table *": {
-    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
-    textDecoration: "none !important"
-  },
-  ".cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
-    fontWeight: 100,
-    textAlign: "left",
-    color: get3(tokens, "extend.colors.neutral.500")
-  },
-  ".cm-table-cell": {
-    padding: "2px 16px 2px 0px"
-  },
-  //
-  // image
-  //
-  ".cm-image": {
-    display: "block",
-    height: "0"
-  },
-  ".cm-image.cm-loaded-image": {
-    height: "auto",
-    borderTop: "0.5rem solid transparent",
-    borderBottom: "0.5rem solid transparent"
+  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
+var markdownStyles = [
+  {
+    type: "strong",
+    Icon: TextB,
+    getState: (state) => state.strong
   },
-  //
-  // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights,
-  //  but it's far more verbose than it needs to be.
-  //
-  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
-  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
-  //
-  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
-  //   return acc;
-  // }, {}),
-  /**
-  * Panels
-  * TODO(burdon): Needs styling attention (esp. dark mode).
-  * 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
-  */
-  ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
+  {
+    type: "emphasis",
+    Icon: TextItalic,
+    getState: (state) => state.emphasis
   },
-  ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
-    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  {
+    type: "strikethrough",
+    Icon: TextStrikethrough,
+    getState: (state) => state.strikethrough
   },
-  ".cm-button": {
-    margin: "4px",
-    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
-    backgroundImage: "none",
-    border: "none",
-    "&:hover": {
-      background: get3(tokens, "extend.colors.neutral.200")
-    },
-    "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
-    }
+  {
+    type: "code",
+    Icon: Code,
+    getState: (state) => state.code
   },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
+  {
+    type: "link",
+    Icon: Link,
+    getState: (state) => state.link
   }
+];
+var MarkdownStyles = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "multiple",
+    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
+    Icon,
+    disabled: state?.blockType === "codeblock",
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
 };
-
-// packages/ui/react-ui-editor/src/hooks/extension-utils.ts
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/extension-utils.ts";
-var defaults = {
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  editable: true,
-  history: true,
-  lineWrapping: true
-};
-var createBasicExtensions = (_props) => {
-  const props = defaultsDeep2({}, _props, defaults);
-  return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
-    EditorView16.exceptionSink.of((err) => {
-      log9.catch(err, void 0, {
-        F: __dxlog_file11,
-        L: 79,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }),
-    props.allowMultipleSelections && EditorState2.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching(),
-    props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
-    props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection(),
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView16.lineWrapping,
-    props.placeholder && placeholder(props.placeholder),
-    props.readonly && [
-      EditorState2.readOnly.of(true),
-      EditorView16.editable.of(false)
-    ],
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState2.tabSize.of(props.tabSize)
-  ].filter(isNotFalsy3);
+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__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: state?.listStyle ? `list-${state.listStyle}` : ""
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
+    Icon,
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
 };
-var defaultSlots = {
-  editor: {
-    className: "w-full bs-full"
+var markdownBlocks = [
+  {
+    type: "blockquote",
+    Icon: Quotes,
+    getState: (state) => state.blockQuote
+  },
+  {
+    type: "codeblock",
+    Icon: CodeBlock,
+    getState: (state) => state.blockType === "codeblock"
   },
-  content: {
-    className: "!p-2"
+  {
+    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__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: value?.type ?? ""
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
+    Icon,
+    disabled: !state || disabled?.(state),
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
 };
-var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
-  const slots = defaultsDeep2({}, _slots, defaultSlots);
-  return [
-    EditorView16.baseTheme(defaultTheme),
-    EditorView16.darkTheme.of(themeMode === "dark"),
-    theme && EditorView16.theme(theme),
-    slots.editor?.className && EditorView16.editorAttributes.of({
-      class: slots.editor.className
+var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
+var MarkdownExtended = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    "data-testid": "editor.toolbar.comment",
+    onClick: () => onAction?.({
+      type: "comment"
     }),
-    slots.content?.className && EditorView16.contentAttributes.of({
-      class: slots.content.className
-    })
-  ].filter(isNotFalsy3);
-};
-var createDataExtensions = ({ id, text, space, identity }) => {
-  const extensions = [
-    automerge(text)
-  ];
-  if (space && identity) {
-    const peerId = identity?.identityKey.toHex();
-    const { cursorLightValue, cursorDarkValue } = hueTokens[identity?.profile?.data?.hue ?? hexToHue(peerId ?? "0")];
-    const awarenessProvider2 = new SpaceAwarenessProvider({
-      space,
-      channel: `awareness.${id}`,
-      peerId: identity.identityKey.toHex(),
-      info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
-        lightColor: cursorLightValue
-      }
-    });
-    extensions.push(awareness(awarenessProvider2));
-  }
-  return extensions;
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(ChatText, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
-var useDocAccessor = (text) => {
-  return useMemo2(() => ({
-    id: text.id,
-    doc: getTextContent(text),
-    accessor: createDocAccessor(text)
-  }), [
-    text
-  ]);
+var Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Separator: ToolbarSeparator,
+  Markdown: MarkdownStandard,
+  Extended: MarkdownExtended
 };
 
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
@@ -4659,6 +4645,19 @@ var useActionHandler = (view) => {
   };
 };
 
+// packages/ui/react-ui-editor/src/hooks/useDocAccessor.ts
+import { useMemo as useMemo2 } from "react";
+import { createDocAccessor, getTextContent } from "@dxos/echo-schema";
+var useDocAccessor = (text) => {
+  return useMemo2(() => ({
+    id: text.id,
+    doc: getTextContent(text),
+    accessor: createDocAccessor(text)
+  }), [
+    text
+  ]);
+};
+
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView17 } from "@codemirror/view";