@dxos/react-ui-editor 0.4.2-main.e9057f7 → 0.4.2-main.ec5936e

package/dist/lib/browser/index.mjs

@@ -8,14 +8,114 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView15 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log2 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
-import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
-import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
+import { focusRing } from "@dxos/react-ui-theme";
+import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+
+// 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/extensions/cursor.ts
+import { Facet } from "@codemirror/state";
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
+};
+var Cursor = class _Cursor {
+  static {
+    this.converter = Facet.define({
+      combine: (providers) => providers[0] ?? 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/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,
+    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
+  ];
+};
+var styles = EditorView.baseTheme({
+  ".cm-annotation": {
+    textDecoration: "underline",
+    textDecorationStyle: "wavy",
+    textDecorationColor: "red"
+  }
+});
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
@@ -54,9 +154,8 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { invertedEffects } from "@codemirror/commands";
-import { StateField } from "@codemirror/state";
-import { EditorView, ViewPlugin } from "@codemirror/view";
+import { StateField as StateField2 } from "@codemirror/state";
+import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
 import { next as A4 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
@@ -108,7 +207,7 @@ var isReconcile = (tr) => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
 import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
@@ -249,40 +348,42 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
-var PatchSemaphore = class {
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+var Syncer = class {
   // prettier-ignore
   constructor(_handle, _state) {
     this._handle = _handle;
     this._state = _state;
-    this._inReconcile = false;
+    this._pending = false;
   }
-  reconcile(view) {
-    if (!this._inReconcile) {
-      this._inReconcile = true;
-      this.doReconcile(view);
-      this._inReconcile = false;
+  reconcile(view, editor) {
+    if (this._pending) {
+      return;
+    }
+    this._pending = true;
+    if (editor) {
+      this.onEditorChange(view);
+    } else {
+      this.onAutomergeChange(view);
     }
+    this._pending = false;
   }
-  doReconcile(view) {
-    const path = getPath(view.state, this._state);
-    const oldHeads = getLastHeads(view.state, this._state);
-    let selection = view.state.selection;
+  onEditorChange(view) {
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const toInvert = transactions.slice().reverse();
-    for (const tr of toInvert) {
-      const inverted = tr.changes.invert(tr.startState.doc);
-      selection = selection.map(inverted);
+    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+    if (newHeads) {
       view.dispatch({
-        changes: inverted,
-        annotations: reconcileAnnotation.of(true)
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotation.of(false)
       });
     }
-    let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-    if (newHeads === null || newHeads === void 0) {
-      newHeads = A3.getHeads(this._handle.docSync());
-    }
+  }
+  onAutomergeChange(view) {
+    const oldHeads = getLastHeads(view.state, this._state);
+    const newHeads = A3.getHeads(this._handle.docSync());
     const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
+    const selection = view.state.selection;
+    const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
     view.dispatch({
       effects: updateHeads(newHeads),
@@ -291,46 +392,9 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/extensions/cursor.ts
-import { Facet } from "@codemirror/state";
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = Facet.define({
-      combine: (providers) => providers[0] ?? 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/extensions/automerge/automerge.ts
 var automerge = ({ handle, path }) => {
-  const syncState = StateField.define({
+  const syncState = StateField2.define({
     create: () => ({
       path: path.slice(),
       lastHeads: A4.getHeads(handle.docSync()),
@@ -359,7 +423,7 @@ var automerge = ({ handle, path }) => {
       return result;
     }
   });
-  const semaphore = new PatchSemaphore(handle, syncState);
+  const syncer = new Syncer(handle, syncState);
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
     syncState,
@@ -373,32 +437,21 @@ var automerge = ({ handle, path }) => {
         handle.removeListener("change", this._handleChange.bind(this));
       }
       _handleChange() {
-        semaphore.reconcile(this._view);
+        syncer.reconcile(this._view, false);
       }
     }),
     // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
+    EditorView2.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
-        semaphore.reconcile(view);
-      }
-    }),
-    // TODO(burdon): Record undo transactions.
-    //  See https://github.com/yjs/y-codemirror.next/tree/main
-    // https://codemirror.net/examples/inverted-effect
-    invertedEffects.of((tr) => {
-      const effects = [];
-      if (!tr.changes.empty) {
-        tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-        });
+        syncer.reconcile(view, true);
       }
-      return effects;
     })
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/awareness.ts
 import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
-import { Decoration, EditorView as EditorView2, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
 var dummyProvider = {
@@ -421,7 +474,7 @@ var awareness = (provider = dummyProvider) => {
     ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
-    styles
+    styles2
   ];
 };
 var RemoteSelectionsDecorator = class {
@@ -481,7 +534,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: start,
           to: end,
-          value: Decoration.mark({
+          value: Decoration2.mark({
             attributes: {
               style: `background-color: ${lightColor}`
             },
@@ -492,7 +545,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: start,
           to: startLine.from + startLine.length,
-          value: Decoration.mark({
+          value: Decoration2.mark({
             attributes: {
               style: `background-color: ${color}`
             },
@@ -502,7 +555,7 @@ var RemoteSelectionsDecorator = class {
         decorations.push({
           from: endLine.from,
           to: end,
-          value: Decoration.mark({
+          value: Decoration2.mark({
             attributes: {
               style: `background-color: ${color}`
             },
@@ -514,7 +567,7 @@ var RemoteSelectionsDecorator = class {
           decorations.push({
             from: linePos,
             to: linePos,
-            value: Decoration.line({
+            value: Decoration2.line({
               attributes: {
                 style: `background-color: ${color}`,
                 class: "cm-collab-selectionLine"
@@ -526,14 +579,14 @@ var RemoteSelectionsDecorator = class {
       decorations.push({
         from: head,
         to: head,
-        value: Decoration.widget({
+        value: Decoration2.widget({
           side: head - anchor > 0 ? -1 : 1,
           block: false,
           widget: new RemoteCaretWidget(state.info.displayName ?? "Anonymous", color)
         })
       });
     }
-    this.decorations = Decoration.set(decorations, true);
+    this.decorations = Decoration2.set(decorations, true);
   }
 };
 var RemoteCaretWidget = class extends WidgetType {
@@ -572,7 +625,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles = EditorView2.baseTheme({
+var styles2 = EditorView3.baseTheme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -636,10 +689,10 @@ import { closeBrackets } from "@codemirror/autocomplete";
 import { history } from "@codemirror/commands";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { drawSelection, EditorView as EditorView3, highlightActiveLine, placeholder } from "@codemirror/view";
-import { isNotFalsy } from "@dxos/util";
+import { drawSelection, EditorView as EditorView4, highlightActiveLine, placeholder } from "@codemirror/view";
+import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
 var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => [
-  lineWrapping && EditorView3.lineWrapping,
+  lineWrapping && EditorView4.lineWrapping,
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
@@ -649,10 +702,10 @@ var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping =
   _placeholder && placeholder(_placeholder),
   // https://github.com/codemirror/theme-one-dark
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
-].filter(isNotFalsy);
+].filter(isNotFalsy2);
 
 // 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 } from "@dxos/invariant";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
@@ -700,7 +753,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();
@@ -962,9 +1015,9 @@ var random = (min, max) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-import { invertedEffects as invertedEffects2 } from "@codemirror/commands";
-import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap3, Decoration as Decoration2, EditorView as EditorView5 } from "@codemirror/view";
+import { invertedEffects } from "@codemirror/commands";
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce } from "@dxos/async";
@@ -1037,6 +1090,9 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
+// packages/ui/react-ui-editor/src/styles/layout.ts
+var editorWithToolbarLayout = "fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
@@ -1073,7 +1129,7 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var styles2 = EditorView5.baseTheme({
+var styles3 = EditorView6.baseTheme({
   "&light .cm-comment, &light .cm-comment-current": {
     mixBlendMode: "darken"
   },
@@ -1095,10 +1151,10 @@ var styles2 = EditorView5.baseTheme({
     backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
-var commentMark = Decoration2.mark({
+var commentMark = Decoration3.mark({
   class: "cm-comment"
 });
-var commentCurrentMark = Decoration2.mark({
+var commentCurrentMark = Decoration3.mark({
   class: "cm-comment-current"
 });
 var focusComment = (view, id, center = true) => {
@@ -1114,7 +1170,7 @@ var focusComment = (view, id, center = true) => {
       },
       effects: [
         //
-        EditorView5.scrollIntoView(range.from, center ? {
+        EditorView6.scrollIntoView(range.from, center ? {
           y: "center"
         } : void 0),
         setSelection.of({
@@ -1127,7 +1183,7 @@ var focusComment = (view, id, center = true) => {
 var setComments = StateEffect2.define();
 var setSelection = StateEffect2.define();
 var setCommentState = StateEffect2.define();
-var commentsState = StateField2.define({
+var commentsState = StateField3.define({
   create: () => ({
     comments: [],
     selection: {}
@@ -1163,7 +1219,7 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var commentsDecorations = EditorView5.decorations.compute([
+var commentsDecorations = EditorView6.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1179,7 +1235,7 @@ var commentsDecorations = EditorView5.decorations.compute([
       return commentMark.range(range.from, range.to);
     }
   }).filter(nonNullable);
-  return Decoration2.set(decorations);
+  return Decoration3.set(decorations);
 });
 var trackPastedComments = (onUpdate) => {
   let tracked = null;
@@ -1201,12 +1257,12 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView5.domEventHandlers({
+    EditorView6.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
     // Track deleted comments.
-    invertedEffects2.of((tr) => {
+    invertedEffects.of((tr) => {
       const { comments: comments2 } = tr.startState.field(commentsState);
       const effects = [];
       tr.changes.iterChangedRanges((fromA, toA) => {
@@ -1223,7 +1279,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView5.updateListener.of((update2) => {
+    EditorView6.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -1330,7 +1386,7 @@ var comments = (options = {}) => {
     optionsFacet.of(options),
     commentsState,
     commentsDecorations,
-    styles2,
+    styles3,
     //
     // Keymap.
     //
@@ -1373,7 +1429,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView5.updateListener.of(({ view, state, changes }) => {
+    EditorView6.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -1405,7 +1461,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView5.updateListener.of(({ view, state }) => {
+    EditorView6.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -1454,14 +1510,14 @@ var useComments = (view, comments2 = []) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView6 } from "@codemirror/view";
+import { EditorView as EditorView7 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView6.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView7.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView6.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView7.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -1476,8 +1532,8 @@ import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView7, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
-import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
 import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
@@ -1670,7 +1726,7 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
-    lineWrapping && EditorView7.lineWrapping,
+    lineWrapping && EditorView8.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
     // https://github.com/codemirror/basic-setup
@@ -1717,15 +1773,15 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap
     ])
-  ].filter(isNotFalsy2);
+  ].filter(isNotFalsy3);
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/code.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3, WidgetType as WidgetType2 } from "@codemirror/view";
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView9, Decoration as Decoration4, WidgetType as WidgetType2 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var styles3 = EditorView8.baseTheme({
+var styles4 = EditorView9.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -1802,11 +1858,11 @@ var buildDecorations = (view) => {
           for (let i = range[0]; i <= range[1]; i++) {
             const block = blocks[i];
             if (!edit && (i === range[0] || i === range[1])) {
-              builder.add(block.from, block.to, Decoration3.replace({
+              builder.add(block.from, block.to, Decoration4.replace({
                 widget: i === range[0] ? top : bottom
               }));
             } else {
-              builder.add(block.from, block.from, Decoration3.line({
+              builder.add(block.from, block.from, Decoration4.line({
                 class: mx2("cm-code cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
               }));
             }
@@ -1831,7 +1887,7 @@ var code2 = () => {
     }, {
       decorations: (value) => value.decorations
     }),
-    styles3
+    styles4
   ];
 };
 
@@ -1839,7 +1895,7 @@ var code2 = () => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, EditorSelection } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView9, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView10, keymap as keymap5, ViewPlugin as ViewPlugin4 } 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;
@@ -2681,7 +2737,7 @@ var styling = () => {
     const replace = (node, marks) => {
       if (cursor <= node.from || cursor >= node.to) {
         for (const mark2 of marks) {
-          builder.add(mark2.from, mark2.to, Decoration4.replace({}));
+          builder.add(mark2.from, mark2.to, Decoration5.replace({}));
         }
       }
     };
@@ -2911,7 +2967,7 @@ var getFormatting = (state) => {
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView9.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView10.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -2928,7 +2984,7 @@ var useFormattingState = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
-import { Decoration as Decoration5, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { Decoration as Decoration6, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var buildDecorations2 = (view) => {
   const builder = new RangeSetBuilder3();
   const { state } = view;
@@ -2946,7 +3002,7 @@ var buildDecorations2 = (view) => {
             const mark2 = node.node.getChild("HeaderMark");
             if (mark2) {
               if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
-                builder.add(mark2.from, mark2.to + 1, Decoration5.replace({}));
+                builder.add(mark2.from, mark2.to + 1, Decoration6.replace({}));
               }
             }
           }
@@ -2976,8 +3032,8 @@ var heading2 = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView10, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
-var styles4 = EditorView10.baseTheme({
+import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
+var styles5 = EditorView11.baseTheme({
   "& .cm-hr": {
     // Note that block-level decorations should not have vertical margins,
     borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
@@ -2990,7 +3046,7 @@ var HorizontalRuleWidget = class extends WidgetType3 {
     return el;
   }
 };
-var decoration = Decoration6.replace({
+var decoration = Decoration7.replace({
   widget: new HorizontalRuleWidget()
 });
 var buildDecorations3 = (view) => {
@@ -3024,18 +3080,18 @@ var hr = () => {
     }, {
       decorations: (value) => value.decorations
     }),
-    styles4
+    styles5
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView11, WidgetType as WidgetType4 } from "@codemirror/view";
+import { StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView12, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField3.define({
+  return StateField4.define({
     create: (state) => {
-      return Decoration7.set(buildDecorations4(0, state.doc.length, state));
+      return Decoration8.set(buildDecorations4(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -3058,7 +3114,7 @@ var image = (options = {}) => {
         add: buildDecorations4(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView11.decorations.from(field)
+    provide: (field) => EditorView12.decorations.from(field)
   });
 };
 var buildDecorations4 = (from, to, state) => {
@@ -3071,7 +3127,7 @@ var buildDecorations4 = (from, to, state) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration7.replace({
+          decorations.push(Decoration8.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide ? node.from : node.to, node.to));
@@ -3103,7 +3159,7 @@ var ImageWidget = class extends WidgetType4 {
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration8, ViewPlugin as ViewPlugin7, WidgetType as WidgetType5 } from "@codemirror/view";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration9, ViewPlugin as ViewPlugin7, WidgetType as WidgetType5 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
@@ -3218,12 +3274,12 @@ var buildDecorations5 = (view, options) => {
             return false;
           }
           if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
-            builder.add(node.from, node.to, Decoration8.replace({
+            builder.add(node.from, node.to, Decoration9.replace({
               widget: new LinkText(text, options.link ? url : void 0)
             }));
           }
           if (options.onRender) {
-            builder.add(node.to, node.to, Decoration8.replace({
+            builder.add(node.to, node.to, Decoration9.replace({
               widget: new LinkButton(url, options.onRender)
             }));
           }
@@ -3239,13 +3295,13 @@ var buildDecorations5 = (view, options) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration9, EditorView as EditorView12, WidgetType as WidgetType6 } from "@codemirror/view";
+import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration10, EditorView as EditorView13, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField4.define({
+  return StateField5.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView13.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -3289,10 +3345,10 @@ var update = (state, options) => {
   });
   tables.forEach((table2) => {
     const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration9.replace({
+    hide && builder.add(table2.from, table2.to, Decoration10.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration9.mark({
+    builder.add(table2.from, table2.to, Decoration10.mark({
       class: "cm-table"
     }));
   });
@@ -3338,8 +3394,8 @@ var TableWidget = class extends WidgetType6 {
 // packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
 import { syntaxTree as syntaxTree8 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder7 } from "@codemirror/state";
-import { EditorView as EditorView13, Decoration as Decoration10, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
-var styles5 = EditorView13.baseTheme({
+import { EditorView as EditorView14, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
+var styles6 = EditorView14.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
   },
@@ -3385,10 +3441,10 @@ var CheckboxWidget = class extends WidgetType7 {
     return false;
   }
 };
-var checkedDecoration = Decoration10.replace({
+var checkedDecoration = Decoration11.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDecoration = Decoration10.replace({
+var uncheckedDecoration = Decoration11.replace({
   widget: new CheckboxWidget(false)
 });
 var buildDecorations6 = (view) => {
@@ -3401,7 +3457,7 @@ var buildDecorations6 = (view) => {
         if (node.name === "TaskMarker") {
           if (cursor < node.from || cursor > node.to) {
             const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            builder.add(node.from - 2, node.from - 1, Decoration10.mark({
+            builder.add(node.from - 2, node.from - 1, Decoration11.mark({
               class: "cm-task"
             }));
             builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
@@ -3428,7 +3484,7 @@ var tasklist = (options = {}) => {
     }, {
       decorations: (value) => value.decorations
     }),
-    styles5
+    styles6
   ];
 };
 
@@ -3801,27 +3857,27 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView14.exceptionSink.of((err) => {
+        EditorView15.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
             F: __dxlog_file3,
-            L: 134,
+            L: 135,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
         // TODO(burdon): Make configurable.
-        EditorView14.baseTheme(defaultTheme),
-        EditorView14.theme(theme ?? {}),
-        EditorView14.darkTheme.of(themeMode === "dark"),
-        EditorView14.editorAttributes.of({
+        EditorView15.baseTheme(defaultTheme),
+        EditorView15.theme(theme ?? {}),
+        EditorView15.darkTheme.of(themeMode === "dark"),
+        EditorView15.editorAttributes.of({
           class: slots.editor?.className ?? ""
         }),
-        EditorView14.contentAttributes.of({
+        EditorView15.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
         // State.
-        EditorView14.editable.of(!readonly),
+        EditorView15.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -3830,9 +3886,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         editorMode === "vim" && vim(),
         // Custom.
         ...extensions
-      ].filter(isNotFalsy3)
+      ].filter(isNotFalsy4)
     });
-    const newView = new EditorView14({
+    const newView = new EditorView15({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -3925,10 +3981,10 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    className: mx3("grow", focusRing)
+    className: focusRing
   },
   editor: {
-    className: "bs-full"
+    className: "min-bs-full"
   }
 };
 var defaultTextSlots = {
@@ -3939,11 +3995,35 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { CaretRight, ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes, CaretDown } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2 from "react";
-import { Button, DensityProvider, Select } from "@dxos/react-ui";
-import { getSize, mx as mx4 } from "@dxos/react-ui-theme";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/translations.ts
+var translationKey = "react-ui-editor";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "strong label": "Strong",
+        "emphasis label": "Emphasis",
+        "strikethrough label": "Strike-through",
+        "code label": "Code",
+        "bullet label": "Bullet list",
+        "ordered label": "Numbered list",
+        "task label": "Task list",
+        "blockquote label": "Block quote",
+        "codeblock label": "Code block",
+        "comment label": "Create comment",
+        "heading label": "Heading level"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
 var HeadingIcons = {
   "0": Paragraph,
   "1": TextHOne,
@@ -3954,42 +4034,40 @@ var HeadingIcons = {
   "6": TextHSix
 };
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, state }) => {
+var ToolbarRoot = ({ children, onAction, classNames, state }) => {
   return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
     onAction,
     state
   }, /* @__PURE__ */ React2.createElement(DensityProvider, {
     density: "fine"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "toolbar",
-    className: "flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden"
-  }, children)));
+  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto p-1",
+      classNames
+    ]
+  }, children))));
 };
-var ToolbarButton = ({ Icon, onClick, title, getState, disable }) => {
-  const { onAction, state } = useToolbarContext("ToolbarButton");
-  const active = getState && state ? getState(state) : false;
-  const disabled = disable && state ? disable(state) : false;
-  const handleClick = (event) => {
-    const action = onClick(state);
-    if (action) {
-      onAction?.(action);
-      event.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ React2.createElement(Button, {
+var buttonStyles = "min-bs-0 p-2";
+var iconStyles = getSize(4);
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
-    classNames: mx4("p-2", active && "ring-[1px]"),
-    onMouseDown: handleClick,
-    title,
-    disabled
+    ...props,
+    classNames: buttonStyles
   }, /* @__PURE__ */ React2.createElement(Icon, {
-    className: getSize(5)
-  }));
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, children));
 };
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "separator",
   className: "grow"
 });
 var MarkdownHeading = () => {
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext("MarkdownFormatting");
   const blockType = state ? state.blockType : "paragraph";
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -4002,9 +4080,19 @@ var MarkdownHeading = () => {
       type: "heading",
       data: parseInt(value2)
     })
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__PURE__ */ React2.createElement(HeadingIcon, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+  }, /* @__PURE__ */ React2.createElement(Select.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement(CaretDown, {
+    className: getSize(2),
+    weight: "bold"
+  }))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, "Paragraph"), [
     1,
@@ -4016,120 +4104,142 @@ var MarkdownHeading = () => {
   ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: level,
     value: String(level)
-  }, "Heading ", level))))));
+  }, "Heading ", level))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
+};
+var markdownStyles = [
+  {
+    key: "strong",
+    Icon: TextB
+  },
+  {
+    key: "emphasis",
+    Icon: TextItalic
+  },
+  {
+    key: "strikethrough",
+    Icon: TextStrikethrough
+  },
+  {
+    key: "code",
+    Icon: Code
+  },
+  {
+    key: "link",
+    Icon: Link
+  }
+];
+var MarkdownStyles = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "multiple",
+    value: markdownStyles.filter(({ key }) => !!state?.[key]).map(({ key }) => key)
+  }, markdownStyles.map(({ key, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    disabled: state?.blockType === "codeblock",
+    onClick: () => onAction?.({
+      type: key,
+      data: state ? !state[key] : null
+    })
+  }, t(`${key} label`))));
+};
+var markdownLists = [
+  {
+    key: "bullet",
+    Icon: ListBullets,
+    actionType: "list-bullet"
+  },
+  {
+    key: "ordered",
+    Icon: ListNumbers,
+    actionType: "list-ordered"
+  },
+  {
+    key: "task",
+    Icon: ListChecks,
+    actionType: "list-tasks"
+  }
+];
+var MarkdownLists = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: state?.listStyle ?? void 0
+  }, markdownLists.map(({ key, Icon, actionType }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    onClick: () => onAction?.({
+      type: actionType,
+      data: state ? state.listStyle !== key : null
+    })
+  }, t(`${key} label`))));
+};
+var markdownBlocks = [
+  {
+    key: "blockquote",
+    Icon: Quotes,
+    pressed: (state) => state?.blockQuote,
+    action: (state) => ({
+      type: "blockquote",
+      data: state ? !state.blockQuote : null
+    }),
+    disabled: (state) => false
+  },
+  {
+    key: "codeblock",
+    Icon: CodeBlock,
+    pressed: (state) => state?.blockType === "codeblock",
+    action: (state) => ({
+      type: "blockquote",
+      data: state ? !state.blockQuote : null
+    }),
+    disabled: (state) => !state?.blankLine
+  }
+];
+var MarkdownBlocks = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "multiple",
+    value: markdownBlocks.filter(({ pressed }) => pressed(state)).map(({ key }) => key)
+  }, markdownBlocks.map(({ key, Icon, action }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    onClick: () => onAction?.(action(state))
+  }, t(`${key} label`)))), /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    disabled: !state?.blankLine,
+    onClick: () => onAction?.({
+      type: "table"
+    }),
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Table2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("table 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(NaturalToolbar.Button, {
+    variant: "ghost",
+    onClick: () => onAction?.({
+      type: "comment"
+    }),
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(ChatText, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("comment label")));
 };
-var MarkdownStyles = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextB,
-  title: "String",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.strong,
-  onClick: (s) => ({
-    type: "strong",
-    data: s ? !s.strong : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextItalic,
-  title: "Emphasis",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.emphasis,
-  onClick: (s) => ({
-    type: "emphasis",
-    data: s ? !s.emphasis : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextStrikethrough,
-  title: "Strike-through",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.strikethrough,
-  onClick: (s) => ({
-    type: "strikethrough",
-    data: s ? !s.strikethrough : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Code,
-  title: "Inline code",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.code,
-  onClick: (s) => ({
-    type: "code",
-    data: s ? !s.code : null
-  })
-}));
-var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListBullets,
-  title: "Bullet list",
-  getState: (s) => s.listStyle === "bullet",
-  onClick: (s) => ({
-    type: "list-bullet",
-    data: s ? s.listStyle !== "bullet" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListNumbers,
-  title: "Numbered list",
-  getState: (s) => s.listStyle === "ordered",
-  onClick: (s) => ({
-    type: "list-ordered",
-    data: s ? s.listStyle !== "ordered" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListChecks,
-  title: "Task list",
-  getState: (s) => s.listStyle === "task",
-  onClick: (s) => ({
-    type: "list-tasks",
-    data: s ? s.listStyle !== "task" : null
-  })
-}));
-var MarkdownBlocks = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: CaretRight,
-  title: "Block quote",
-  getState: (s) => s.blockQuote,
-  onClick: (s) => ({
-    type: "blockquote",
-    data: s ? !s.blockQuote : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: CodeBlock,
-  title: "Code block",
-  disable: (s) => !s.blankLine,
-  getState: (s) => s.blockType === "codeblock",
-  onClick: (s) => ({
-    type: "codeblock",
-    data: s ? s.blockType !== "codeblock" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Table2,
-  title: "Table",
-  disable: (s) => !s.blankLine,
-  onClick: () => ({
-    type: "table"
-  })
-}));
-var MarkdownLinks = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Link,
-  title: "Link",
-  getState: (s) => s.link,
-  onClick: (s) => ({
-    type: "link",
-    data: s ? !s.link : null
-  })
-}));
-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), /* @__PURE__ */ React2.createElement(MarkdownLinks, null));
-var MarkdownExtended = () => /* @__PURE__ */ React2.createElement(Toolbar.Button, {
-  Icon: ChatText,
-  title: "Create comment",
-  onClick: () => ({
-    type: "comment"
-  })
-});
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
@@ -4243,8 +4353,8 @@ var SpaceAwarenessProvider = class {
 };
 
 // packages/ui/react-ui-editor/src/hooks/defs.ts
-import { StateField as StateField5 } from "@codemirror/state";
-var modelState = StateField5.define({
+import { StateField as StateField6 } from "@codemirror/state";
+var modelState = StateField6.define({
   create: () => void 0,
   update: (model) => model
 });
@@ -4311,10 +4421,10 @@ var useEditorView = () => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import { log as log4 } from "@dxos/log";
-import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
+import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
   const onUpdate = useRef2();
@@ -4327,7 +4437,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView15.exceptionSink.of((err) => {
+          EditorView16.exceptionSink.of((err) => {
             log4.catch(err, void 0, {
               F: __dxlog_file5,
               L: 57,
@@ -4336,12 +4446,12 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
             });
           }),
           extensions,
-          EditorView15.updateListener.of(() => {
+          EditorView16.updateListener.of(() => {
             onUpdate.current?.();
           })
-        ].filter(isNotFalsy4)
+        ].filter(isNotFalsy5)
       });
-      const view2 = new EditorView15({
+      const view2 = new EditorView16({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4398,22 +4508,22 @@ var createDataExtensions = ({ readonly = false } = {}) => {
   return [
     //
     EditorState3.readOnly.of(readonly),
-    EditorView15.editable.of(!readonly)
+    EditorView16.editable.of(!readonly)
   ];
 };
 var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
   return [
     //
-    EditorView15.baseTheme(defaultTheme),
-    theme && EditorView15.theme(theme),
-    EditorView15.darkTheme.of(themeMode === "dark"),
-    EditorView15.editorAttributes.of({
+    EditorView16.baseTheme(defaultTheme),
+    theme && EditorView16.theme(theme),
+    EditorView16.darkTheme.of(themeMode === "dark"),
+    EditorView16.editorAttributes.of({
       class: slots?.editor?.className ?? ""
     }),
-    EditorView15.contentAttributes.of({
+    EditorView16.contentAttributes.of({
       class: slots?.content?.className ?? ""
     })
-  ].filter(isNotFalsy4);
+  ].filter(isNotFalsy5);
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
@@ -4444,9 +4554,12 @@ var useInMemoryTextModel = ({ id, defaultContent }) => {
   };
 };
 var createModel = ({ space, identity, text }) => {
+  if (!text) {
+    return void 0;
+  }
   invariant3(isAutomergeObject(text), void 0, {
     F: __dxlog_file6,
-    L: 50,
+    L: 54,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -4468,7 +4581,6 @@ var createModel = ({ space, identity, text }) => {
     peerId: identity?.identityKey.toHex() ?? "Anonymous"
   });
   const extensions = [
-    //
     modelState.init(() => model),
     automerge({
       handle: doc.handle,
@@ -4510,6 +4622,7 @@ export {
   addLink,
   addList,
   addStyle,
+  annotations,
   autocomplete,
   automerge,
   awareness,
@@ -4530,6 +4643,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  editorWithToolbarLayout,
   focusComment,
   formatting,
   getFormatting,