@dxos/react-ui-editor 0.3.11-main.c95bc86 → 0.3.11-main.cb8120f

package/dist/lib/browser/index.mjs

@@ -15,6 +15,7 @@ import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeH
 import { log as log2 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
 import { attentionSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { nonNullable as nonNullable2 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/autocomplete.ts
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
@@ -53,14 +54,14 @@ 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 { next as A } from "@dxos/automerge/automerge";
-import { invariant } from "@dxos/invariant";
+import { next as A4 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
 import get from "lodash.get";
-import { next as automerge } from "@dxos/automerge/automerge";
+import { next as A } from "@dxos/automerge/automerge";
 var cursorConverter = (handle, path) => ({
   // TODO(burdon): Handle assoc to associate with a previous character.
   toCursor: (pos) => {
@@ -72,7 +73,7 @@ var cursorConverter = (handle, path) => ({
     if (typeof value === "string" && value.length <= pos) {
       return "end";
     }
-    return automerge.getCursor(doc, path.slice(), pos);
+    return A.getCursor(doc, path.slice(), pos);
   },
   fromCursor: (cursor) => {
     if (cursor === "") {
@@ -90,26 +91,28 @@ var cursorConverter = (handle, path) => ({
         return 0;
       }
     }
-    return automerge.getCursorPosition(doc, path.slice(), cursor);
+    return A.getCursorPosition(doc, path.slice(), cursor);
   }
 });
 
 // packages/ui/react-ui-editor/src/extensions/automerge/defs.ts
 import { Annotation, StateEffect } from "@codemirror/state";
-var effectType = StateEffect.define({});
-var reconcileAnnotationType = Annotation.define();
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeads = (newHeads) => effectType.of({
+var updateHeadsEffect = StateEffect.define({});
+var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
-var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
+var reconcileAnnotation = Annotation.define();
+var isReconcile = (tr) => {
+  return !!tr.annotation(reconcileAnnotation);
+};
 
 // packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
-import { next as automerge2 } from "@dxos/automerge/automerge";
+import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
-import { next as am } from "@dxos/automerge/automerge";
+import { next as A2 } from "@dxos/automerge/automerge";
 var updateAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
   let hasChanges = false;
@@ -122,11 +125,19 @@ var updateAutomerge = (field, handle, transactions, state) => {
     return void 0;
   }
   const newHeads = handle.changeAt(lastHeads, (doc) => {
+    const t = [];
     for (const tr of transactions) {
-      tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
-        am.splice(doc, path, fromA, toA - fromA, inserted.toString());
+      tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
+        t.push({
+          fromA,
+          toA,
+          insert
+        });
       });
     }
+    t.reverse().forEach(({ fromA, toA, insert }) => {
+      A2.splice(doc, path.slice(), fromA, toA - fromA, insert.toString());
+    });
   });
   return newHeads ?? void 0;
 };
@@ -141,13 +152,13 @@ var updateCodeMirror = (view, selection, target, patches) => {
       selection = selection.map(changeSet, 1);
       view.dispatch({
         changes: changeSet,
-        annotations: reconcileAnnotationType.of({})
+        annotations: reconcileAnnotation.of(false)
       });
     }
   }
   view.dispatch({
     selection,
-    annotations: reconcileAnnotationType.of({})
+    annotations: reconcileAnnotation.of(false)
   });
 };
 var handlePatch = (patch, target, state) => {
@@ -168,7 +179,7 @@ var handleInsert = (target, patch) => {
   if (index == null) {
     return [];
   }
-  const text = patch.values.map((v) => v ? v.toString() : "").join("");
+  const text = patch.values.map((value) => value ? value.toString() : "").join("");
   return [
     {
       from: index,
@@ -246,36 +257,37 @@ var PatchSemaphore = class {
     this._state = _state;
     this._inReconcile = false;
   }
-  // NOTE: Cannot destruct view.state.
   reconcile(view) {
-    if (this._inReconcile) {
-      return;
+    if (!this._inReconcile) {
+      this._inReconcile = true;
+      this.doReconcile(view);
+      this._inReconcile = false;
     }
-    this._inReconcile = true;
+  }
+  doReconcile(view) {
     const path = getPath(view.state, this._state);
     const oldHeads = getLastHeads(view.state, this._state);
     let selection = view.state.selection;
-    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcileTx(tx));
+    const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const toInvert = transactions.slice().reverse();
-    for (const tx of toInvert) {
-      const inverted = tx.changes.invert(tx.startState.doc);
+    for (const tr of toInvert) {
+      const inverted = tr.changes.invert(tr.startState.doc);
       selection = selection.map(inverted);
       view.dispatch({
         changes: inverted,
-        annotations: reconcileAnnotationType.of(true)
+        annotations: reconcileAnnotation.of(true)
       });
     }
     let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
     if (newHeads === null || newHeads === void 0) {
-      newHeads = automerge2.getHeads(this._handle.docSync());
+      newHeads = A3.getHeads(this._handle.docSync());
     }
-    const diff = automerge2.equals(oldHeads, newHeads) ? [] : automerge2.diff(this._handle.docSync(), oldHeads, newHeads);
+    const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
     updateCodeMirror(view, selection, path, diff);
     view.dispatch({
       effects: updateHeads(newHeads),
-      annotations: reconcileAnnotationType.of({})
+      annotations: reconcileAnnotation.of(false)
     });
-    this._inReconcile = false;
   }
 };
 
@@ -317,12 +329,11 @@ var Cursor = class _Cursor {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts";
-var automerge3 = ({ handle, path }) => {
-  const state = StateField.define({
+var automerge = ({ handle, path }) => {
+  const syncState = StateField.define({
     create: () => ({
       path: path.slice(),
-      lastHeads: A.getHeads(handle.docSync()),
+      lastHeads: A4.getHeads(handle.docSync()),
       unreconciledTransactions: []
     }),
     update: (value, tr) => {
@@ -333,7 +344,7 @@ var automerge3 = ({ handle, path }) => {
       };
       let clearUnreconciled = false;
       for (const effect of tr.effects) {
-        if (effect.is(effectType)) {
+        if (effect.is(updateHeadsEffect)) {
           result.lastHeads = effect.value.newHeads;
           clearUnreconciled = true;
         }
@@ -341,29 +352,21 @@ var automerge3 = ({ handle, path }) => {
       if (clearUnreconciled) {
         result.unreconciledTransactions = [];
       } else {
-        if (!isReconcileTx(tr)) {
+        if (!isReconcile(tr)) {
           result.unreconciledTransactions.push(tr);
         }
       }
       return result;
     }
   });
-  const semaphore = new PatchSemaphore(handle, state);
+  const semaphore = new PatchSemaphore(handle, syncState);
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
+    syncState,
     // Reconcile external updates.
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        invariant(this._view, void 0, {
-          F: __dxlog_file,
-          L: 66,
-          S: this,
-          A: [
-            "this._view",
-            ""
-          ]
-        });
         handle.addListener("change", this._handleChange.bind(this));
       }
       destroy() {
@@ -379,7 +382,17 @@ var automerge3 = ({ handle, path }) => {
         semaphore.reconcile(view);
       }
     }),
-    state
+    // 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) => {
+        });
+      }
+      return effects;
+    })
   ];
 };
 
@@ -398,13 +411,13 @@ var dummyProvider = {
   update: () => {
   }
 };
-var AwarenessProvider = Facet2.define({
+var awarenessProvider = Facet2.define({
   combine: (providers) => providers[0] ?? dummyProvider
 });
 var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
-    AwarenessProvider.of(provider),
+    awarenessProvider.of(provider),
     ViewPlugin2.fromClass(RemoteSelectionsDecorator, {
       decorations: (value) => value.decorations
     }),
@@ -418,7 +431,7 @@ var RemoteSelectionsDecorator = class {
     this._lastAnchor = void 0;
     this._lastHead = void 0;
     this._cursorConverter = view.state.facet(Cursor.converter);
-    this._provider = view.state.facet(AwarenessProvider);
+    this._provider = view.state.facet(awarenessProvider);
     this._provider.open();
     this._provider.remoteStateChange.on(this._ctx, () => {
       view.dispatch({
@@ -640,8 +653,8 @@ var basicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true }
 // 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 as invariant2 } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
 var defaultOptions = {
   effect: 2,
   maxParticles: 200,
@@ -767,8 +780,8 @@ var Blaster = class {
     return this._node;
   }
   initialize() {
-    invariant2(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant(!this._canvas && !this._ctx, void 0, {
+      F: __dxlog_file,
       L: 138,
       S: this,
       A: [
@@ -804,8 +817,8 @@ var Blaster = class {
     }
   }
   start() {
-    invariant2(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file2,
+    invariant(this._canvas && this._ctx, void 0, {
+      F: __dxlog_file,
       L: 177,
       S: this,
       A: [
@@ -948,12 +961,12 @@ var random = (min, max) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-import { StateEffect as StateEffect2, StateField as StateField2 } from "@codemirror/state";
+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 sortBy from "lodash.sortby";
 import { useEffect } from "react";
 import { debounce } from "@dxos/async";
-import { invariant as invariant3 } from "@dxos/invariant";
 import { nonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/styles/cursors.ts
@@ -1025,13 +1038,13 @@ var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue)
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
     log.catch(err, void 0, {
-      F: __dxlog_file3,
+      F: __dxlog_file2,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1059,7 +1072,6 @@ 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 styles2 = EditorView5.baseTheme({
   "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
@@ -1068,14 +1080,12 @@ var styles2 = EditorView5.baseTheme({
     backgroundColor: getToken("extend.colors.yellow.100")
   }
 });
-var marks = {
-  highlight: Decoration2.mark({
-    class: "cm-comment"
-  }),
-  highlightActive: Decoration2.mark({
-    class: "cm-comment-current"
-  })
-};
+var commentMark = Decoration2.mark({
+  class: "cm-comment"
+});
+var commentCurrentMark = Decoration2.mark({
+  class: "cm-comment-current"
+});
 var setFocus = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
   if (!comment?.comment.cursor) {
@@ -1138,7 +1148,7 @@ var commentsState = StateField2.define({
     return value;
   }
 });
-var highlightDecorations = EditorView5.decorations.compute([
+var commentsDecorations = EditorView5.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -1149,9 +1159,9 @@ var highlightDecorations = EditorView5.decorations.compute([
       return void 0;
     }
     if (comment.comment.id === current) {
-      return marks.highlightActive.range(range.from, range.to);
+      return commentCurrentMark.range(range.from, range.to);
     } else {
-      return marks.highlight.range(range.from, range.to);
+      return commentMark.range(range.from, range.to);
     }
   }).filter(nonNullable);
   return Decoration2.set(decorations);
@@ -1180,84 +1190,124 @@ var trackPastedComments = (onUpdate) => {
       cut: handleTrack,
       copy: handleTrack
     }),
-    // Handle paste.
-    EditorView5.updateListener.of(({ view, state, transactions }) => {
+    // Track deleted comments.
+    invertedEffects2.of((tr) => {
+      const { comments: comments2 } = tr.startState.field(commentsState);
+      const effects = [];
+      tr.changes.iterChangedRanges((fromA, toA) => {
+        for (const { comment: { id }, range: { from, to } } of comments2) {
+          if (from < to && from >= fromA && to <= toA) {
+            effects.push(restoreCommentEffect.of({
+              id,
+              from,
+              to
+            }));
+          }
+        }
+      });
+      return effects;
+    }),
+    // Handle paste or the undo of comment deletion.
+    EditorView5.updateListener.of((update2) => {
+      const restore = [];
+      for (let i = 0; i < update2.transactions.length; i++) {
+        const tr = update2.transactions[i];
+        for (let j = 0; j < restore.length; j++) {
+          restore[j] = mapTrackedComment(restore[j], tr.changes);
+        }
+        for (const effect of tr.effects) {
+          if (effect.is(restoreCommentEffect)) {
+            restore.push(effect.value);
+          }
+        }
+      }
       if (tracked) {
-        const paste = transactions.find((tr) => tr.isUserEvent("input.paste"));
+        const paste = update2.transactions.find((tr) => tr.isUserEvent("input.paste"));
         if (paste) {
           let found = -1;
           paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
             if (text.eq(tracked.text)) {
-              for (let i = transactions.indexOf(paste) + 1; i < transactions.length; i++) {
-                fromB = transactions[i].changes.mapPos(fromB);
+              for (let i = update2.transactions.indexOf(paste) + 1; i < update2.transactions.length; i++) {
+                fromB = update2.transactions[i].changes.mapPos(fromB);
               }
               found = fromB;
             }
           });
           if (found > -1) {
             for (const moved of tracked.comments) {
-              const range = {
+              restore.push({
+                id: moved.id,
                 from: found + moved.from,
                 to: found + moved.to
-              };
-              const cursor = Cursor.getCursorFromRange(state, range);
-              onUpdate(moved.id, cursor);
+              });
             }
           }
           tracked = null;
         }
       }
+      for (const comment of restore) {
+        const { comments: comments2 } = update2.startState.field(commentsState);
+        const exists = comments2.some((c) => c.comment.id === comment.id && c.range.from < c.range.to);
+        if (!exists) {
+          const cursor = Cursor.getCursorFromRange(update2.state, comment);
+          onUpdate(comment.id, cursor);
+        }
+      }
     })
   ];
 };
-var comments = (options = {}) => {
-  const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
-  const createCommentThread = (view) => {
-    invariant3(options.onCreate, void 0, {
-      F: __dxlog_file4,
-      L: 259,
-      S: void 0,
-      A: [
-        "options.onCreate",
-        ""
-      ]
+var mapTrackedComment = (comment, changes) => ({
+  id: comment.id,
+  from: changes.mapPos(comment.from, 1),
+  to: changes.mapPos(comment.to, 1)
+});
+var restoreCommentEffect = StateEffect2.define({
+  map: mapTrackedComment
+});
+var optionsFacet = Facet3.define({
+  combine: (providers) => providers[0]
+});
+var createComment = (view) => {
+  const options = view.state.facet(optionsFacet);
+  const { from, to } = view.state.selection.main;
+  if (from === to) {
+    return false;
+  }
+  if (to === view.state.doc.length) {
+    view.dispatch({
+      changes: {
+        from: to,
+        insert: "\n"
+      }
     });
-    const { from, to } = view.state.selection.main;
-    if (from === to) {
-      return false;
-    }
-    if (to === view.state.doc.length) {
+  }
+  const cursor = Cursor.getCursorFromRange(view.state, {
+    from,
+    to
+  });
+  if (cursor) {
+    const id = options.onCreate?.(cursor, view.coordsAtPos(from));
+    if (id) {
       view.dispatch({
-        changes: {
-          from: to,
-          insert: "\n"
+        effects: setSelection.of({
+          current: id
+        }),
+        selection: {
+          anchor: from
         }
       });
+      return true;
     }
-    const cursor = Cursor.getCursorFromRange(view.state, {
-      from,
-      to
-    });
-    if (cursor) {
-      const id = options.onCreate?.(cursor, view.coordsAtPos(from));
-      if (id) {
-        view.dispatch({
-          effects: setSelection.of({
-            current: id
-          }),
-          selection: {
-            anchor: from
-          }
-        });
-        return true;
-      }
-    }
-    return false;
-  };
+  }
+  return false;
+};
+var comments = (options = {}) => {
+  const { key: shortcut = "meta-'" } = options;
+  const handleSelect = debounce((state) => options.onSelect?.(state), 200);
   return [
+    optionsFacet.of(options),
     commentsState,
-    highlightDecorations,
+    commentsDecorations,
     styles2,
     //
     // Keymap.
@@ -1265,7 +1315,7 @@ var comments = (options = {}) => {
     options.onCreate ? keymap3.of([
       {
         key: shortcut,
-        run: callbackWrapper(createCommentThread)
+        run: callbackWrapper(createComment)
       }
     ]) : [],
     //
@@ -1657,21 +1707,37 @@ var styles3 = EditorView8.baseTheme({
   },
   "& .cm-codeblock": {
     display: "inline-block",
-    width: "100%"
+    width: "100%",
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      inset: 0
+    }
   },
-  "&light .cm-codeblock, &light .cm-codeblock.cm-activeLine": {
-    background: getToken("extend.colors.neutral.25")
+  "&light .cm-codeblock": {
+    "&::after": {
+      background: getToken("extend.semanticColors.input.light"),
+      mixBlendMode: "darken"
+    }
   },
-  "&dark .cm-codeblock, &dark .cm-codeblock.cm-activeLine": {
-    background: getToken("extend.colors.neutral.850")
+  "&dark .cm-codeblock": {
+    "&::after": {
+      background: getToken("extend.semanticColors.input.dark"),
+      mixBlendMode: "lighten"
+    }
   },
   "& .cm-codeblock-first": {
-    borderTopLeftRadius: ".5rem",
-    borderTopRightRadius: ".5rem"
+    "&::after": {
+      borderTopLeftRadius: ".5rem",
+      borderTopRightRadius: ".5rem"
+    }
   },
   "& .cm-codeblock-last": {
-    borderBottomLeftRadius: ".5rem",
-    borderBottomRightRadius: ".5rem"
+    "&::after": {
+      borderBottomLeftRadius: ".5rem",
+      borderBottomRightRadius: ".5rem"
+    }
   }
 });
 var getLineRange = (lines, from, to) => {
@@ -1743,16 +1809,130 @@ var code2 = () => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { Decoration as Decoration4, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { Decoration as Decoration4, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+var setHeading = (level) => (view) => {
+  const { selection: { ranges }, doc } = view.state;
+  const changes = [];
+  for (const range of ranges) {
+    const { number } = doc.lineAt(range.anchor);
+    const { from } = doc.line(number);
+    const line = doc.sliceString(from, from + 7);
+    const [_, marks, spaces] = line.match(/(#+)(\s+)/) ?? [];
+    const current = marks?.length ?? 0;
+    if (level !== current) {
+      changes.push({
+        from,
+        to: from + current + (spaces?.length ?? 0),
+        insert: "#".repeat(level) + (level > 0 ? " " : "")
+      });
+    }
+  }
+  if (changes.length) {
+    view.dispatch({
+      changes
+    });
+  }
+  return true;
+};
+var toggleStyle = (mark2) => (view) => {
+  const { ranges } = view.state.selection;
+  for (const range of ranges) {
+    if (range.from === range.to) {
+      return false;
+    }
+    view.dispatch({
+      changes: [
+        {
+          from: range.from,
+          insert: mark2
+        },
+        {
+          from: range.to,
+          insert: mark2
+        }
+      ]
+    });
+  }
+  return true;
+};
+var toggleBold = toggleStyle("**");
+var toggleItalic = toggleStyle("_");
+var toggleStrikethrough = toggleStyle("~~");
+var toggleList = (view) => {
+};
+var formatting = (options = {}) => {
+  return [
+    keymap5.of([
+      {
+        key: "meta-b",
+        run: toggleBold
+      }
+    ]),
+    styling()
+  ];
+};
+var styling = () => {
+  const buildDecorations7 = (view) => {
+    const builder = new RangeSetBuilder2();
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const replace = (node, marks) => {
+      if (cursor <= node.from || cursor >= node.to) {
+        for (const mark2 of marks) {
+          builder.add(mark2.from, mark2.to, Decoration4.replace({}));
+        }
+      }
+    };
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree2(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case "Emphasis":
+            case "StrongEmphasis": {
+              const marks = node.node.getChildren("EmphasisMark");
+              replace(node, marks);
+              break;
+            }
+            case "Strikethrough": {
+              const marks = node.node.getChildren("StrikethroughMark");
+              replace(node, marks);
+              break;
+            }
+          }
+        },
+        from,
+        to
+      });
+    }
+    return builder.finish();
+  };
+  return [
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations7(view);
+      }
+      update(update2) {
+        this.decorations = buildDecorations7(update2.view);
+      }
+    }, {
+      decorations: (value) => value.decorations
+    })
+  ];
+};
+
+// 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";
 var buildDecorations2 = (view) => {
-  const builder = new RangeSetBuilder2();
+  const builder = new RangeSetBuilder3();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree2(state).iterate({
+    syntaxTree3(state).iterate({
       enter: (node) => {
         switch (node.name) {
           case "ATXHeading1":
@@ -1763,8 +1943,8 @@ var buildDecorations2 = (view) => {
           case "ATXHeading6": {
             const mark2 = node.node.getChild("HeaderMark");
             if (mark2) {
-              if (view.state.readOnly || cursor < node.from || cursor > node.to) {
-                builder.add(mark2.from, mark2.to + 1, Decoration4.replace({}));
+              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark2.from, mark2.to + 1, Decoration5.replace({}));
               }
             }
           }
@@ -1778,7 +1958,7 @@ var buildDecorations2 = (view) => {
 };
 var heading2 = () => {
   return [
-    ViewPlugin4.fromClass(class {
+    ViewPlugin5.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations2(view);
       }
@@ -1792,9 +1972,9 @@ var heading2 = () => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView9, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
 var styles4 = EditorView9.baseTheme({
   "& .cm-hr": {
     // Note that block-level decorations should not have vertical margins,
@@ -1808,15 +1988,15 @@ var HorizontalRuleWidget = class extends WidgetType3 {
     return el;
   }
 };
-var decoration = Decoration5.replace({
+var decoration = Decoration6.replace({
   widget: new HorizontalRuleWidget()
 });
 var buildDecorations3 = (view) => {
-  const builder = new RangeSetBuilder3();
+  const builder = new RangeSetBuilder4();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(state).iterate({
+    syntaxTree4(state).iterate({
       enter: (node) => {
         if (node.name === "HorizontalRule") {
           if (cursor <= node.from || cursor >= node.to) {
@@ -1832,7 +2012,7 @@ var buildDecorations3 = (view) => {
 };
 var hr = () => {
   return [
-    ViewPlugin5.fromClass(class {
+    ViewPlugin6.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations3(view);
       }
@@ -1847,13 +2027,13 @@ var hr = () => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
     create: (state) => {
-      return Decoration6.set(buildDecorations4(0, state.doc.length, state));
+      return Decoration7.set(buildDecorations4(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -1882,14 +2062,14 @@ var image = (options = {}) => {
 var buildDecorations4 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  syntaxTree4(state).iterate({
+  syntaxTree5(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration6.replace({
+          decorations.push(Decoration7.replace({
             block: true,
             widget: new ImageWidget(url)
           }).range(hide ? node.from : node.to, node.to));
@@ -1919,13 +2099,13 @@ var ImageWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType5 } from "@codemirror/view";
+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 { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
-    ViewPlugin6.fromClass(class {
+    ViewPlugin7.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations5(view, options);
       }
@@ -1944,7 +2124,7 @@ var link = (options = {}) => {
       // https://codemirror.net/docs/ref/#view.hoverTooltip
       // https://github.com/codemirror/view/blob/main/src/tooltip.ts
       hoverTooltip2((view, pos, side) => {
-        const syntax = syntaxTree5(view.state).resolveInner(pos, side);
+        const syntax = syntaxTree6(view.state).resolveInner(pos, side);
         let link2 = null;
         for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
           link2 = node.name === "Link" ? node : null;
@@ -2021,27 +2201,27 @@ var LinkText = class extends WidgetType5 {
   }
 };
 var buildDecorations5 = (view, options) => {
-  const builder = new RangeSetBuilder4();
+  const builder = new RangeSetBuilder5();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree5(state).iterate({
+    syntaxTree6(state).iterate({
       enter: (node) => {
         if (node.name === "Link") {
-          const marks2 = node.node.getChildren("LinkMark");
-          const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
+          const marks = node.node.getChildren("LinkMark");
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
           const urlNode = node.node.getChild("URL");
           const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
           if (!url) {
             return false;
           }
           if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
-            builder.add(node.from, node.to, Decoration7.replace({
+            builder.add(node.from, node.to, Decoration8.replace({
               widget: new LinkText(text, options.link ? url : void 0)
             }));
           }
           if (options.onRender) {
-            builder.add(node.to, node.to, Decoration7.replace({
+            builder.add(node.to, node.to, Decoration8.replace({
               widget: new LinkButton(url, options.onRender)
             }));
           }
@@ -2056,9 +2236,9 @@ var buildDecorations5 = (view, options) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration9, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
@@ -2067,7 +2247,7 @@ var table = (options = {}) => {
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder5();
+  const builder = new RangeSetBuilder6();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2075,7 +2255,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree6(state).iterate({
+  syntaxTree7(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2107,10 +2287,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, Decoration8.replace({
+    hide && builder.add(table2.from, table2.to, Decoration9.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration8.mark({
+    builder.add(table2.from, table2.to, Decoration9.mark({
       class: "cm-table"
     }));
   });
@@ -2154,9 +2334,9 @@ var TableWidget = class extends WidgetType6 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
-import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration9, WidgetType as WidgetType7, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { syntaxTree as syntaxTree8 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder7 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration10, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
 var styles5 = EditorView12.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
@@ -2203,23 +2383,23 @@ var CheckboxWidget = class extends WidgetType7 {
     return false;
   }
 };
-var checkedDecoration = Decoration9.replace({
+var checkedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedDecoration = Decoration9.replace({
+var uncheckedDecoration = Decoration10.replace({
   widget: new CheckboxWidget(false)
 });
 var buildDecorations6 = (view) => {
-  const builder = new RangeSetBuilder6();
+  const builder = new RangeSetBuilder7();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree7(state).iterate({
+    syntaxTree8(state).iterate({
       enter: (node) => {
         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, Decoration9.mark({
+            builder.add(node.from - 2, node.from - 1, Decoration10.mark({
               class: "cm-task"
             }));
             builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
@@ -2234,7 +2414,7 @@ var buildDecorations6 = (view) => {
 };
 var tasklist = (options = {}) => {
   return [
-    ViewPlugin7.fromClass(class {
+    ViewPlugin8.fromClass(class {
       constructor(view) {
         this.decorations = buildDecorations6(view);
       }
@@ -2285,7 +2465,7 @@ var outliner = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap5 } from "@codemirror/view";
+import { keymap as keymap6 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -2295,7 +2475,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap5.of([
+    keymap6.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -2407,7 +2587,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "inherit"
+    background: "transparent"
   },
   //
   // Selection
@@ -2578,7 +2758,7 @@ var codeTheme = {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var EditorModes = [
   "default",
   "vim"
@@ -2612,8 +2792,8 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         // TODO(burdon): Doesn't catch errors in keymap functions.
         EditorView13.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
-            F: __dxlog_file5,
-            L: 123,
+            F: __dxlog_file3,
+            L: 124,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -2630,6 +2810,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
           class: slots.content?.className ?? ""
         }),
         // State.
+        EditorView13.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -2638,7 +2819,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         editorMode === "vim" && vim(),
         // Custom.
         ...extensions
-      ].filter(Boolean)
+      ].filter(nonNullable2)
     });
     const newView = new EditorView13({
       state,
@@ -2750,9 +2931,9 @@ var defaultMarkdownSlots = {
 // 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 invariant4 } from "@dxos/invariant";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log3 } from "@dxos/log";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/awareness-provider.ts";
 var DEBOUNCE_INTERVAL = 100;
 var SpaceAwarenessProvider = class {
   constructor(params) {
@@ -2792,7 +2973,7 @@ var SpaceAwarenessProvider = class {
       log3.debug("failed to query awareness", {
         err
       }, {
-        F: __dxlog_file6,
+        F: __dxlog_file4,
         L: 89,
         S: this,
         C: (f, a) => f(...a)
@@ -2808,8 +2989,8 @@ var SpaceAwarenessProvider = class {
     return Array.from(this._remoteStates.values());
   }
   update(position) {
-    invariant4(this._postTask, void 0, {
-      F: __dxlog_file6,
+    invariant2(this._postTask, void 0, {
+      F: __dxlog_file4,
       L: 104,
       S: this,
       A: [
@@ -2825,8 +3006,8 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handleQueryMessage() {
-    invariant4(this._postTask, void 0, {
-      F: __dxlog_file6,
+    invariant2(this._postTask, void 0, {
+      F: __dxlog_file4,
       L: 115,
       S: this,
       A: [
@@ -2837,8 +3018,8 @@ var SpaceAwarenessProvider = class {
     this._postTask.schedule();
   }
   _handlePostMessage(message) {
-    invariant4(message.kind === "post", void 0, {
-      F: __dxlog_file6,
+    invariant2(message.kind === "post", void 0, {
+      F: __dxlog_file4,
       L: 120,
       S: this,
       A: [
@@ -2858,6 +3039,38 @@ var modelState = StateField5.define({
   update: (model) => model
 });
 
+// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
+var useActionHandler = (view) => {
+  return (action) => {
+    if (!view) {
+      return;
+    }
+    switch (action.type) {
+      case "heading":
+        setHeading(parseInt(action.data))(view);
+        break;
+      case "bold":
+        toggleBold(view);
+        break;
+      case "italic":
+        toggleItalic(view);
+        break;
+      case "strikethrough":
+        toggleStrikethrough(view);
+        break;
+      case "list":
+        toggleList(view);
+        break;
+      case "comment":
+        createComment(view);
+        break;
+    }
+    setTimeout(() => {
+      view.focus();
+    });
+  };
+};
+
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { useState as useState2 } from "react";
 var useTextEditor = () => {
@@ -2875,10 +3088,9 @@ import get4 from "lodash.get";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
-import { invariant as invariant5 } from "@dxos/invariant";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
-import { isNotNullOrUndefined } from "@dxos/util";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = (props) => {
   const { identity, space, text } = props;
   const [model, setModel] = useState3();
@@ -2890,9 +3102,9 @@ var useTextModel = (props) => {
   return model;
 };
 var createModel = ({ space, identity, text }) => {
-  invariant5(isAutomergeObject(text), void 0, {
-    F: __dxlog_file7,
-    L: 35,
+  invariant3(isAutomergeObject(text), void 0, {
+    F: __dxlog_file5,
+    L: 34,
     S: void 0,
     A: [
       "isAutomergeObject(text)",
@@ -2903,7 +3115,7 @@ var createModel = ({ space, identity, text }) => {
   const doc = getRawDoc(obj, [
     obj.field
   ]);
-  const awarenessProvider = space && new SpaceAwarenessProvider({
+  const awarenessProvider2 = space && new SpaceAwarenessProvider({
     space,
     channel: `automerge.awareness.${obj.id}`,
     info: {
@@ -2913,19 +3125,22 @@ var createModel = ({ space, identity, text }) => {
     },
     peerId: identity?.identityKey.toHex() ?? "Anonymous"
   });
+  const extensions = [
+    //
+    modelState.init(() => model),
+    automerge({
+      handle: doc.handle,
+      path: doc.path
+    })
+  ];
+  if (awarenessProvider2) {
+    extensions.push(awareness(awarenessProvider2));
+  }
   const model = {
     id: obj.id,
     content: doc,
     text: () => get4(doc.handle.docSync(), doc.path),
-    extension: [
-      modelState.init(() => model),
-      automerge3({
-        handle: doc.handle,
-        path: doc.path
-      }),
-      awarenessProvider && AwarenessProvider.of(awarenessProvider),
-      awareness()
-    ].filter(isNotNullOrUndefined),
+    extension: extensions,
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
@@ -2934,7 +3149,6 @@ var createModel = ({ space, identity, text }) => {
   return model;
 };
 export {
-  AwarenessProvider,
   BaseTextEditor,
   Cursor,
   Doc,
@@ -2947,19 +3161,22 @@ export {
   YText,
   YXmlFragment,
   autocomplete,
-  automerge3 as automerge,
+  automerge,
   awareness,
+  awarenessProvider,
   basicBundle,
   blast,
   callbackWrapper,
   code2 as code,
   codeTheme,
   comments,
+  createComment,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  formatting,
   getToken,
   heading2 as heading,
   hr,
@@ -2977,12 +3194,19 @@ export {
   outliner,
   setComments,
   setFocus,
+  setHeading,
   setSelection,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
+  toggleBold,
+  toggleItalic,
+  toggleList,
+  toggleStrikethrough,
+  toggleStyle,
   typewriter,
+  useActionHandler,
   useComments,
   useTextEditor,
   useTextModel