@dxos/react-ui-editor 0.3.11-main.fc97a54 → 0.3.11-main.ff3a851

package/dist/lib/browser/index.mjs

@@ -8,10 +8,10 @@ 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 EditorView13 } 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 React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState } 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";
@@ -1074,25 +1074,11 @@ var logChanges = (trs) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var styles2 = EditorView5.baseTheme({
-  "&light .cm-comment, &light .cm-comment-current": {
-    mixBlendMode: "darken"
-  },
-  "&dark .cm-comment, &dark .cm-comment-current": {
-    mixBlendMode: "plus-lighter"
-  },
-  "&light .cm-comment": {
+  "& .cm-comment": {
     backgroundColor: getToken("extend.colors.yellow.50")
   },
-  "&light .cm-comment-current": {
+  "& .cm-comment-current": {
     backgroundColor: getToken("extend.colors.yellow.100")
-  },
-  "&dark .cm-comment": {
-    color: getToken("extend.colors.yellow.50"),
-    backgroundColor: getToken("extend.colors.yellow.900")
-  },
-  "&dark .cm-comment-current": {
-    color: getToken("extend.colors.yellow.100"),
-    backgroundColor: getToken("extend.colors.yellow.950")
   }
 });
 var commentMark = Decoration2.mark({
@@ -1301,11 +1287,7 @@ var createComment = (view) => {
     to
   });
   if (cursor) {
-    const id = options.onCreate?.({
-      cursor,
-      from,
-      location: view.coordsAtPos(from)
-    });
+    const id = options.onCreate?.(cursor, view.coordsAtPos(from));
     if (id) {
       view.dispatch({
         effects: setSelection.of({
@@ -1833,836 +1815,89 @@ var code2 = () => {
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 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 { 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;
-(function(Inline2) {
-  Inline2[Inline2["Strong"] = 0] = "Strong";
-  Inline2[Inline2["Emphasis"] = 1] = "Emphasis";
-  Inline2[Inline2["Strikethrough"] = 2] = "Strikethrough";
-  Inline2[Inline2["Code"] = 3] = "Code";
-})(Inline || (Inline = {}));
-var List;
-(function(List2) {
-  List2[List2["Ordered"] = 0] = "Ordered";
-  List2[List2["Bullet"] = 1] = "Bullet";
-  List2[List2["Task"] = 2] = "Task";
-})(List || (List = {}));
-var setHeading = (level) => ({ state, dispatch }) => {
-  const { selection: { ranges }, doc } = state;
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
+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 = [];
-  let prevBlock = -1;
   for (const range of ranges) {
-    syntaxTree2(state).iterate({
-      from: range.from,
-      to: range.to,
-      enter: (node) => {
-        if (!Object.hasOwn(Textblocks, node.name) || prevBlock === node.from) {
-          return;
-        }
-        prevBlock = node.from;
-        const blockType = Textblocks[node.name];
-        const isHeading = /heading(\d)/.exec(blockType);
-        const curLevel = isHeading ? +isHeading[1] : node.name === "Paragraph" ? 0 : -1;
-        if (curLevel < 0 || curLevel === level) {
-          return;
-        }
-        if (curLevel === 0) {
-          changes.push({
-            from: node.from,
-            insert: "#".repeat(level) + " "
-          });
-        } else if (node.name === "SetextHeading1" || node.name === "SetextHeading2") {
-          const nextLine = doc.lineAt(node.to);
-          if (level) {
-            changes.push({
-              from: node.from,
-              insert: "#".repeat(level) + " "
-            });
-          }
-          changes.push({
-            from: nextLine.from - 1,
-            to: nextLine.to
-          });
-        } else {
-          if (level === 0) {
-            changes.push({
-              from: node.from,
-              to: Math.min(node.to, node.from + curLevel + 1)
-            });
-          } else if (level < curLevel) {
-            changes.push({
-              from: node.from,
-              to: node.from + (curLevel - level)
-            });
-          } else {
-            changes.push({
-              from: node.from,
-              insert: "#".repeat(level - curLevel)
-            });
-          }
-        }
-      }
-    });
+    const { number } = doc.lineAt(range.anchor);
+    const { from, to } = doc.line(number);
+    const line = doc.sliceString(from, to);
+    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) {
-    return false;
+  if (changes.length) {
+    view.dispatch({
+      changes
+    });
   }
-  dispatch(state.update({
-    changes,
-    userEvent: "format.setHeading",
-    scrollIntoView: true
-  }));
   return true;
 };
-var setStyle = (type, enable) => ({ state, dispatch }) => {
-  const marker = inlineMarkerText(type);
-  const changes = state.changeByRange((range) => {
-    if (!enable && range.empty) {
-      const after = state.doc.sliceString(range.head, range.head + 6);
-      const found = after.indexOf(marker);
-      if (found >= 0 && /^[*~`]*$/.test(after.slice(0, found))) {
-        const before = state.doc.sliceString(range.head - 6, range.head);
-        if (before.slice(before.length - found - marker.length, before.length - found) === marker && [
-          ...before.slice(before.length - found)
-        ].reverse().join("") === after.slice(0, found)) {
-          return {
-            changes: [
-              {
-                from: range.head - marker.length - found,
-                to: range.head - found
-              },
-              {
-                from: range.head + found,
-                to: range.head + found + marker.length
-              }
-            ],
-            range: EditorSelection.cursor(range.from - marker.length)
-          };
-        }
-      }
+var toggleStyle = (mark2) => (view) => {
+  const { ranges } = view.state.selection;
+  for (const range of ranges) {
+    if (range.from === range.to) {
+      return false;
     }
-    const changes2 = [];
-    const changesAtEnd = [];
-    let blockStart = -1;
-    let blockEnd = -1;
-    let startCovered = false;
-    let endCovered = false;
-    let { from, to } = range;
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        const { name } = node;
-        if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== "codeblock") {
-          blockStart = blockContentStart(node);
-          blockEnd = blockContentEnd(node, state.doc);
-          startCovered = endCovered = false;
-        } else if (name === "Link" || name === "Image" && enable) {
-          if (from < node.from && to > node.from && to <= node.to) {
-            to = node.to;
-          } else if (to > node.to && from >= node.from && from < node.to) {
-            from = node.from;
-          }
-        } else if (IgnoreInline.has(name) && enable) {
-          if (node.from < from && node.to > from) {
-            if (to === from) {
-              to = node.to;
-            }
-            from = node.to;
-          }
-          if (node.from < to && node.to > to) {
-            to = node.from;
-          }
-        } else if (Object.hasOwn(InlineMarker, name)) {
-          const markType = InlineMarker[name];
-          const size = inlineMarkerText(markType).length;
-          const openEnd = node.from + size;
-          const closeStart = node.to - size;
-          if (markType === type) {
-            if (openEnd <= from && closeStart >= from) {
-              startCovered = openEnd === from ? "adjacent" : true;
-            }
-            if (openEnd <= to && closeStart >= to) {
-              endCovered = closeStart === to ? "adjacent" : true;
-            }
-          }
-          if (markType === type || type === 3 && enable) {
-            if (node.from >= from && openEnd <= to) {
-              changes2.push({
-                from: node.from,
-                to: openEnd
-              });
-              if (markType !== type && closeStart >= to) {
-                changesAtEnd.push({
-                  from: skipSpaces(Math.min(to, blockEnd), state.doc, 1, blockEnd),
-                  insert: inlineMarkerText(markType)
-                });
-              }
-            }
-            if (closeStart >= from && node.to <= to) {
-              changes2.push({
-                from: closeStart,
-                to: node.to
-              });
-              if (markType !== type && openEnd <= from) {
-                changes2.push({
-                  from: skipSpaces(Math.max(from, blockStart), state.doc, -1, blockStart),
-                  insert: inlineMarkerText(markType)
-                });
-              }
-            }
-          }
-        }
-      },
-      leave: (node) => {
-        if (Object.hasOwn(Textblocks, node.name) && Textblocks[node.name] !== "codeblock") {
-          const rangeStart = Math.max(from, blockStart);
-          const rangeEnd = Math.min(to, blockEnd);
-          if (enable) {
-            if (!startCovered) {
-              changes2.push({
-                from: rangeStart,
-                insert: marker
-              });
-            }
-            if (!endCovered) {
-              changes2.push({
-                from: rangeEnd,
-                insert: marker
-              });
-            }
-          } else {
-            if (startCovered === "adjacent") {
-              changes2.push({
-                from: from - marker.length,
-                to: from
-              });
-            } else if (startCovered) {
-              changes2.push({
-                from: skipSpaces(rangeStart, state.doc, -1, blockStart),
-                insert: marker
-              });
-            }
-            if (endCovered === "adjacent") {
-              changes2.push({
-                from: to,
-                to: to + marker.length
-              });
-            } else if (endCovered) {
-              changes2.push({
-                from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
-                insert: marker
-              });
-            }
-          }
+    view.dispatch({
+      changes: [
+        {
+          from: range.from,
+          insert: mark2
+        },
+        {
+          from: range.to,
+          insert: mark2
         }
-      }
+      ]
     });
-    const changeSet = state.changes(changes2.concat(changesAtEnd));
-    return {
-      changes: changeSet,
-      range: range.empty && !changeSet.empty ? EditorSelection.cursor(range.head + marker.length) : EditorSelection.range(changeSet.mapPos(range.from, 1), changeSet.mapPos(range.to, -1))
-    };
-  });
-  dispatch(state.update(changes, {
-    userEvent: enable ? "format.style.add" : "format.style.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var addStyle = (style) => setStyle(style, true);
-var removeStyle = (style) => setStyle(style, false);
-var toggleStyle = (style) => (arg) => {
-  const form = getFormatting(arg.state);
-  return setStyle(style, style === 0 ? !form.strong : style === 1 ? !form.emphasis : style === 2 ? !form.strikethrough : !form.code)(arg);
-};
-var toggleStrong = toggleStyle(0);
-var toggleEmphasis = toggleStyle(1);
-var toggleStrikethrough = toggleStyle(2);
-var toggleInlineCode = toggleStyle(3);
-var inlineMarkerText = (type) => type === 0 ? "**" : type === 2 ? "~~" : type === 1 ? "*" : "`";
-var blockContentStart = (node) => {
-  const atx = /^ATXHeading(\d)/.exec(node.name);
-  if (atx) {
-    return Math.min(node.to, node.from + +atx[1] + 1);
   }
-  return node.from;
-};
-var blockContentEnd = (node, doc) => {
-  const setext = /^SetextHeading(\d)/.exec(node.name);
-  const lastLine = doc.lineAt(node.to);
-  if (setext || /^[\s>]*$/.exec(lastLine.text)) {
-    return lastLine.from - 1;
-  }
-  return node.to;
-};
-var skipSpaces = (pos, doc, dir, limit) => {
-  const line = doc.lineAt(pos);
-  while (pos !== limit && line.text[pos - line.from - (dir < 0 ? 1 : 0)] === " ") {
-    pos += dir;
-  }
-  return pos;
+  return true;
 };
 var snippets = {
   codeblock: snippet([
-    //
-    "```#{}",
-    "#{}",
+    "```#{lang}",
+    "	#{}",
     "```"
   ].join("\n")),
   table: snippet([
-    //
     "| #{col1} | #{col2} |",
     "| ---- | ---- |",
     "| #{val1} | #{val2} |",
-    "| #{val3} | #{val4} |",
-    ""
+    "| #{val3} | #{val4} |"
   ].join("\n"))
 };
+var insertCodeblock = (view) => {
+  const { selection: { main }, doc } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.codeblock(view, null, from, from);
+};
 var insertTable = (view) => {
   const { selection: { main }, doc } = view.state;
   const { number } = doc.lineAt(main.anchor);
   const { from } = doc.line(number);
   snippets.table(view, null, from, from);
 };
-var removeLinkInner = (from, to, changes, state) => {
-  syntaxTree2(state).iterate({
-    from,
-    to,
-    enter: (node) => {
-      if (node.name === "Link" && node.from < to && node.to > from) {
-        node.node.cursor().iterate((node2) => {
-          const { name } = node2;
-          if (name === "LinkMark" || name === "LinkLabel") {
-            changes.push({
-              from: node2.from,
-              to: node2.to
-            });
-          } else if (name === "LinkTitle" || name === "URL") {
-            changes.push({
-              from: skipSpaces(node2.from, state.doc, -1),
-              to: skipSpaces(node2.to, state.doc, 1)
-            });
-          }
-        });
-        return false;
-      }
-    }
-  });
-};
-var removeLink = ({ state, dispatch }) => {
-  const changes = [];
-  for (const { from, to } of state.selection.ranges) {
-    removeLinkInner(from, to, changes, state);
-  }
-  if (!changes) {
-    return false;
-  }
-  dispatch(state.update({
-    changes,
-    userEvent: "format.link.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var addLink = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
-    let { from, to } = range;
-    const cutStyles = [];
-    let okay = null;
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name)) {
-          okay = Textblocks[node.name] !== "codeblock" && from >= blockContentStart(node) && to <= blockContentEnd(node, state.doc);
-        } else if (Object.hasOwn(InlineMarker, node.name)) {
-          const sNode = node.node;
-          if (node.from < from && node.to <= to) {
-            if (sNode.firstChild.to === from) {
-              from = node.from;
-            } else {
-              cutStyles.push(sNode);
-            }
-          } else if (node.from >= from && node.to > to) {
-            if (sNode.lastChild.from === to) {
-              to = node.to;
-            } else {
-              cutStyles.push(sNode);
-            }
-          }
-        }
-      }
-    });
-    if (okay === null) {
-      const line = state.doc.lineAt(from);
-      okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
-    }
-    if (!okay) {
-      return {
-        range
-      };
-    }
-    const changes2 = [];
-    const changesAfter = [];
-    removeLinkInner(from, to, changesAfter, state);
-    let cursorOffset = 1;
-    for (const style of cutStyles) {
-      const type = InlineMarker[style.name];
-      const mark2 = inlineMarkerText(type);
-      if (style.from < from) {
-        changes2.push({
-          from: skipSpaces(from, state.doc, -1),
-          insert: mark2
-        });
-        changesAfter.push({
-          from: skipSpaces(from, state.doc, 1, to),
-          insert: mark2
-        });
-      } else {
-        changes2.push({
-          from: skipSpaces(to, state.doc, -1, from),
-          insert: mark2
-        });
-        const after = skipSpaces(to, state.doc, 1);
-        if (after === to) {
-          cursorOffset += mark2.length;
-        }
-        changesAfter.push({
-          from: after,
-          insert: mark2
-        });
-      }
-    }
-    changes2.push({
-      from,
-      insert: "["
-    }, {
-      from: to,
-      insert: "]()"
-    });
-    const changeSet = state.changes(changes2.concat(changesAfter));
-    return {
-      changes: changeSet,
-      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
-    };
-  });
-  if (changes.changes.empty) {
-    return false;
-  }
-  dispatch(state.update(changes, {
-    userEvent: "format.link.add",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var addList = (type) => ({ state, dispatch }) => {
-  let lastBlock = -1;
-  let counter = 1;
-  let first = true;
-  let parentColumn = null;
-  const blocks = [];
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name) && node.name !== "TableCell" || node.name === "Table") {
-          if (first) {
-            let before = node.node.prevSibling;
-            while (before && /Mark$/.test(before.name)) {
-              before = before.prevSibling;
-            }
-            if (before?.name === (type === 0 ? "OrderedList" : "BulletList")) {
-              const item = before.lastChild;
-              const itemLine = state.doc.lineAt(item.from);
-              const itemText = itemLine.text.slice(item.from - itemLine.from);
-              parentColumn = item.from - itemLine.from + /^\s*/.exec(itemText)[0].length;
-              if (type === 0) {
-                const mark2 = /^\s*(\d+)[.)]/.exec(itemText);
-                if (mark2) {
-                  parentColumn += mark2[1].length;
-                  counter = +mark2[1] + 1;
-                }
-              }
-            }
-            first = false;
-          }
-          if (node.from === lastBlock) {
-            return;
-          }
-          lastBlock = node.from;
-          blocks.push({
-            node: node.node,
-            counter,
-            parentColumn
-          });
-          counter++;
-          return false;
-        }
-      },
-      leave: (node) => {
-        if (node.name === "BulletList" || node.name === "OrderedList" || node.name === "Blockquote") {
-          counter = 1;
-          parentColumn = null;
-        }
-      }
-    });
-  }
-  if (!blocks.length) {
-    const { from, to } = state.doc.lineAt(state.selection.main.anchor);
-    if (from === to) {
-      dispatch(state.update({
-        changes: [
-          {
-            from,
-            insert: type === 1 ? "- " : type === 0 ? "1. " : "- [ ] "
-          }
-        ],
-        userEvent: "format.list.add",
-        scrollIntoView: true
-      }));
-      return true;
-    }
-    return false;
-  }
-  const changes = [];
-  for (let i = 0; i < blocks.length; i++) {
-    const { node, counter: counter2, parentColumn: parentColumn2 } = blocks[i];
-    const nodeFrom = node.name === "CodeBlock" ? node.from - 4 : node.from;
-    let padding = nodeFrom > 0 && !/\s/.test(state.doc.sliceString(nodeFrom - 1, nodeFrom)) ? 1 : 0;
-    if (type === 0) {
-      padding += String(counter2).length;
-    }
-    let line = state.doc.lineAt(nodeFrom);
-    const column = nodeFrom - line.from;
-    if (parentColumn2 !== null && parentColumn2 > column) {
-      padding = Math.max(padding, parentColumn2 - column);
-    }
-    let mark2;
-    if (type === 0) {
-      let max = counter2;
-      for (let j = i + 1; j < blocks.length; j++) {
-        if (blocks[j].counter !== max + 1) {
-          break;
-        }
-        max++;
-      }
-      const num = String(counter2);
-      padding = Math.max(String(max).length, padding);
-      mark2 = " ".repeat(Math.max(0, padding - num.length)) + num + ". ";
-    } else {
-      mark2 = " ".repeat(padding) + "- " + (type === 2 ? "[ ] " : "");
-    }
-    changes.push({
-      from: nodeFrom,
-      insert: mark2
-    });
-    while (line.to < node.to) {
-      line = state.doc.lineAt(line.to + 1);
-      const open = /^[\s>]*/.exec(line.text)[0].length;
-      changes.push({
-        from: line.from + Math.min(open, column),
-        insert: " ".repeat(mark2.length)
-      });
-    }
-  }
-  if (type === 0) {
-    const last = blocks[blocks.length - 1];
-    let next = last.node.nextSibling;
-    while (next && /Mark$/.test(next.name)) {
-      next = next.nextSibling;
-    }
-    if (next?.name === "OrderedList") {
-      renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
-    }
-  }
-  dispatch(state.update({
-    changes,
-    userEvent: "format.list.add",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var removeList = (type) => ({ state, dispatch }) => {
-  let lastBlock = -1;
-  const changes = [];
-  const stack = [];
-  const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        const { name } = node;
-        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
-          stack.push(name);
-        } else if (name === "Task" && stack[stack.length - 1] === "BulletList") {
-          stack[stack.length - 1] = "TaskList";
-        }
-      },
-      leave: (node) => {
-        const { name } = node;
-        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
-          stack.pop();
-        } else if (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
-          lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
-          const mark2 = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
-          if (!mark2) {
-            return false;
-          }
-          const column = node.from - line.from;
-          changes.push({
-            from: node.from,
-            to: node.from + mark2[0].length
-          });
-          while (line.to < node.to) {
-            line = state.doc.lineAt(line.to + 1);
-            const open = /^[\s>]*/.exec(line.text)[0].length;
-            if (open > column) {
-              changes.push({
-                from: line.from + column,
-                to: line.from + Math.min(column + mark2[0].length, open)
-              });
-            }
-          }
-          if (node.to >= to) {
-            renumberListItems(node.node.nextSibling, 1, changes, state.doc);
-          }
-          return false;
-        }
-      }
-    });
-  }
-  if (!changes.length) {
-    return false;
-  }
-  dispatch(state.update({
-    changes,
-    userEvent: "format.list.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var toggleList = (type) => (target) => {
-  const formatting2 = getFormatting(target.state);
-  const active = formatting2.listStyle === (type === 1 ? "bullet" : type === 0 ? "ordered" : "task");
-  return (active ? removeList(type) : addList(type))(target);
-};
-var renumberListItems = (item, counter, changes, doc) => {
-  for (; item; item = item.nextSibling) {
-    if (item.name === "ListItem") {
-      const number = /(\s*)(\d+)[.)]/.exec(doc.sliceString(item.from, item.from + 10));
-      if (!number || +number[2] === counter) {
-        break;
-      }
-      const size = number[1].length + number[2].length;
-      const newNum = String(counter);
-      changes.push({
-        from: item.from + Math.max(0, size - newNum.length),
-        to: item.from + size,
-        insert: newNum
-      });
-      counter++;
-    }
-  }
-};
-var setBlockquote = (enable) => ({ state, dispatch }) => {
-  const lines = [];
-  let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name) || node.name === "Table") {
-          if (node.from === lastBlock) {
-            return false;
-          }
-          lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
-          if (line.number > 1) {
-            const prevLine = state.doc.line(line.number - 1);
-            if (/^[>\s]*$/.test(prevLine.text)) {
-              if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
-                lines.push(prevLine);
-              }
-            }
-          }
-          for (; ; ) {
-            lines.push(line);
-            if (line.to >= node.to) {
-              break;
-            }
-            line = state.doc.line(line.number + 1);
-          }
-          if (!enable && line.number < state.doc.lines) {
-            const nextLine = state.doc.line(line.number + 1);
-            if (/^[>\s]*$/.test(nextLine.text)) {
-              lines.push(nextLine);
-            }
-          }
-          return false;
-        }
-      }
-    });
-  }
-  const changes = [];
-  for (const line of lines) {
-    if (enable) {
-      changes.push({
-        from: line.from,
-        insert: /\S/.test(line.text) ? "> " : ">"
-      });
-    } else {
-      const quote = /((?:[\s>\-+*]|\d+[.)])*?)> ?/.exec(line.text);
-      if (quote) {
-        changes.push({
-          from: line.from + quote[1].length,
-          to: line.from + quote[0].length
-        });
-      }
-    }
-  }
-  if (!changes.length) {
-    return false;
-  }
-  dispatch(state.update({
-    changes,
-    userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var addBlockquote = setBlockquote(true);
-var removeBlockquote = setBlockquote(false);
-var toggleBlockquote = (target) => {
-  return (getFormatting(target.state).blockQuote ? removeBlockquote : addBlockquote)(target);
-};
-var addCodeblock = (target) => {
-  const { state, dispatch } = target;
-  const { selection } = state;
-  if (selection.ranges.length === 1 && selection.main.empty) {
-    const { head } = selection.main;
-    const line = state.doc.lineAt(head);
-    if (!/\S/.test(line.text) && head === line.from) {
-      snippets.codeblock(target, null, line.from, line.to);
-      return true;
-    }
-  }
-  const ranges = [];
-  for (const { from, to } of selection.ranges) {
-    let blockFrom = from;
-    let blockTo = to;
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name)) {
-          if (from >= node.from && to <= node.to) {
-            blockFrom = node.from;
-            blockTo = node.to;
-          } else {
-            blockFrom = Math.min(blockFrom, state.doc.lineAt(node.from).from);
-            blockTo = Math.max(blockTo, state.doc.lineAt(node.to).to);
-          }
-        }
-      }
-    });
-    if (ranges.length && ranges[ranges.length - 1].to >= blockFrom - 1) {
-      ranges[ranges.length - 1].to = blockTo;
-    } else {
-      ranges.push({
-        from: blockFrom,
-        to: blockTo
-      });
-    }
-  }
-  if (!ranges.length) {
-    return false;
-  }
-  const changes = ranges.map(({ from, to }) => {
-    const column = from - state.doc.lineAt(from).from;
-    return [
-      {
-        from,
-        insert: "```\n" + " ".repeat(column)
-      },
-      {
-        from: to,
-        insert: "\n" + " ".repeat(column) + "```"
-      }
-    ];
-  });
-  dispatch(state.update({
-    changes,
-    userEvent: "format.codeblock.add",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var removeCodeblock = ({ state, dispatch }) => {
-  const changes = [];
-  let lastBlock = -1;
-  for (const { from, to } of state.selection.ranges) {
-    syntaxTree2(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
-          lastBlock = node.from;
-          const firstLine = state.doc.lineAt(node.from);
-          if (node.name === "FencedCode") {
-            changes.push({
-              from: node.from,
-              to: firstLine.to + 1 + node.from - firstLine.from
-            });
-            const lastLine = state.doc.lineAt(node.to);
-            if (/^([\s>]|[-*+] |\d+[).])*`+$/.test(lastLine.text)) {
-              changes.push({
-                from: lastLine.from - (lastLine.number === firstLine.number + 1 ? 0 : 1),
-                to: lastLine.to
-              });
-            }
-          } else {
-            const column = node.from - firstLine.from;
-            for (let line = firstLine; ; line = state.doc.line(line.number + 1)) {
-              changes.push({
-                from: line.from + column - 4,
-                to: line.from + column
-              });
-              if (line.to >= node.to) {
-                break;
-              }
-            }
-          }
-        }
-      }
-    });
-  }
-  if (!changes.length) {
-    return false;
-  }
-  dispatch(state.update({
-    changes,
-    userEvent: "format.codeblock.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var toggleCodeblock = (target) => {
-  return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
+var toggleBold = toggleStyle("**");
+var toggleItalic = toggleStyle("_");
+var toggleStrikethrough = toggleStyle("~~");
+var toggleList = (view) => {
 };
 var formatting = (options = {}) => {
   return [
     keymap5.of([
       {
         key: "meta-b",
-        run: toggleStrong
+        run: toggleBold
       }
     ]),
     styling()
@@ -2716,209 +1951,6 @@ var styling = () => {
     })
   ];
 };
-var InlineMarker = {
-  Emphasis: 1,
-  StrongEmphasis: 0,
-  InlineCode: 3,
-  Strikethrough: 2
-};
-var IgnoreInline = /* @__PURE__ */ new Set([
-  "Autolink",
-  "CodeMark",
-  "CodeText",
-  "Comment",
-  "EmphasisMark",
-  "Hardbreak",
-  "HeaderMark",
-  "HTMLTag",
-  "LinkMark",
-  "ListMark",
-  "ProcessingInstruction",
-  "QuoteMark",
-  "StrikethroughMark",
-  "SubscriptMark",
-  "SuperscriptMark",
-  "TaskMarker"
-]);
-var Textblocks = {
-  ATXHeading1: "heading1",
-  ATXHeading2: "heading2",
-  ATXHeading3: "heading3",
-  ATXHeading4: "heading4",
-  ATXHeading5: "heading5",
-  ATXHeading6: "heading6",
-  CodeBlock: "codeblock",
-  FencedCode: "codeblock",
-  Paragraph: "paragraph",
-  SetextHeading1: "heading1",
-  SetextHeading2: "heading2",
-  TableCell: "tablecell",
-  Task: "paragraph"
-};
-var getFormatting = (state) => {
-  let blockType = null;
-  const inline = [
-    null,
-    null,
-    null,
-    null
-  ];
-  let link2 = false;
-  let blockQuote = null;
-  let listStyle = null;
-  const stack = [];
-  let currentBlock = null;
-  const advanceInline = (upto) => {
-    if (!currentBlock) {
-      return;
-    }
-    upto = Math.min(upto, currentBlock.end);
-    if (upto <= currentBlock.pos) {
-      return;
-    }
-    for (let i = 0; i < currentBlock.active.length; i++) {
-      if (inline[i] === false) {
-        continue;
-      } else if (currentBlock.active[i]) {
-        inline[i] = true;
-      } else if (/\S/.test(state.doc.sliceString(currentBlock.pos, upto))) {
-        inline[i] = false;
-      }
-    }
-    currentBlock.pos = upto;
-  };
-  const skipInline = (upto) => {
-    if (currentBlock && upto > currentBlock.pos) {
-      currentBlock.pos = Math.min(upto, currentBlock.end);
-    }
-  };
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (range.empty && inline.some((v) => v === null)) {
-      const contextSize = Math.min(range.head, 6);
-      const contextBefore = state.doc.sliceString(range.head - contextSize, range.head);
-      let contextAfter = state.doc.sliceString(range.head, range.head + contextSize);
-      for (let i = 0; i < contextSize; i++) {
-        const ch = contextAfter[i];
-        if (ch !== contextBefore[contextBefore.length - 1 - i] || !/[~`*]/.test(ch)) {
-          contextAfter = contextAfter.slice(0, i);
-          break;
-        }
-      }
-      for (let i = 0; i < inline.length; i++) {
-        const mark2 = inlineMarkerText(i);
-        const found = contextAfter.indexOf(mark2);
-        if (found > -1) {
-          contextAfter = contextAfter.slice(0, found) + contextAfter.slice(found + mark2.length);
-          if (inline[i] === null) {
-            inline[i] = true;
-          }
-        }
-      }
-    }
-    syntaxTree2(state).iterate({
-      from: range.from,
-      to: range.to,
-      enter: (node) => {
-        advanceInline(node.from);
-        const { name } = node;
-        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
-          stack.push(name);
-        } else if (name === "Link") {
-          link2 = true;
-        } else if (Object.hasOwn(Textblocks, name) && (range.empty || node.to > range.from || node.from < range.to)) {
-          if (name === "Task" && stack[stack.length - 1] === "BulletList") {
-            stack[stack.length - 1] = "TaskList";
-          }
-          const blockCode = Textblocks[name];
-          if (blockType === null) {
-            blockType = blockCode;
-          } else if (blockType !== blockCode) {
-            blockType = false;
-          }
-          if (blockCode !== "codeblock" && inline.some((i) => i !== false)) {
-            currentBlock = {
-              pos: Math.max(range.from, node.from),
-              end: Math.min(range.to, node.to),
-              active: [
-                false,
-                false,
-                false,
-                false
-              ]
-            };
-          }
-        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
-          const index = InlineMarker[name];
-          if (range.empty && inline[index] === null) {
-            inline[index] = true;
-          }
-          currentBlock.active[index] = true;
-        } else if (IgnoreInline.has(name)) {
-          skipInline(node.to);
-        }
-      },
-      leave: (node) => {
-        advanceInline(node.to);
-        const { name } = node;
-        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
-          stack.pop();
-        } else if (Object.hasOwn(Textblocks, name)) {
-          let hasList = false;
-          let hasQuote = false;
-          for (let i = stack.length - 1; i >= 0; i--) {
-            if (stack[i] === "Blockquote") {
-              hasQuote = true;
-            } else if (!hasList) {
-              hasList = stack[i] === "TaskList" ? "task" : stack[i] === "BulletList" ? "bullet" : "ordered";
-            }
-          }
-          if (blockQuote === null) {
-            blockQuote = hasQuote;
-          } else if (!hasQuote && blockQuote) {
-            blockQuote = false;
-          }
-          if (listStyle === null) {
-            listStyle = hasList;
-          } else if (listStyle !== hasList) {
-            listStyle = false;
-          }
-          currentBlock = null;
-        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
-          currentBlock.active[InlineMarker[name]] = false;
-        }
-      }
-    });
-  }
-  const { from, to } = state.doc.lineAt(selection.main.anchor);
-  const blankLine = from === to;
-  return {
-    blankLine,
-    blockType: blockType || null,
-    blockQuote: blockQuote ?? false,
-    code: inline[3] ?? false,
-    emphasis: inline[1] ?? false,
-    strong: inline[0] ?? false,
-    strikethrough: inline[2] ?? false,
-    link: link2,
-    listStyle: listStyle || null
-  };
-};
-var useFormattingState = () => {
-  const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView9.updateListener.of((update2) => {
-    if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!state || !compareFormatting(state, newState)) {
-        setState(newState);
-      }
-    }
-  }), []);
-  return [
-    state,
-    observer
-  ];
-};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
@@ -2971,8 +2003,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 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,
     borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
@@ -3026,7 +2058,7 @@ var hr = () => {
 // 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 { Decoration as Decoration7, EditorView as EditorView10, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
     create: (state) => {
@@ -3053,7 +2085,7 @@ var image = (options = {}) => {
         add: buildDecorations4(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView11.decorations.from(field)
+    provide: (field) => EditorView10.decorations.from(field)
   });
 };
 var buildDecorations4 = (from, to, state) => {
@@ -3235,12 +2267,12 @@ 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 { Decoration as Decoration9, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView12.decorations.from(field)
+    provide: (field) => EditorView11.decorations.from(field)
   });
 };
 var update = (state, options) => {
@@ -3333,8 +2365,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 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")
   },
@@ -3559,11 +2591,11 @@ var defaultTheme = {
     fontSize: "16px"
   },
   "&light .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.light", "black"),
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
   "&dark .cm-content": {
-    color: get3(tokens, "extend.semanticColors.base.fg.dark", "white"),
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
   //
@@ -3767,7 +2799,7 @@ var EditorModes = [
 var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
-  const [view, setView] = useState2(null);
+  const [view, setView] = useState(null);
   useImperativeHandle(forwardedRef, () => view, [
     view
   ]);
@@ -3796,7 +2828,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView14.exceptionSink.of((err) => {
+        EditorView13.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
             F: __dxlog_file3,
             L: 134,
@@ -3806,17 +2838,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         }),
         // Theme.
         // TODO(burdon): Make configurable.
-        EditorView14.baseTheme(defaultTheme),
-        EditorView14.theme(theme ?? {}),
-        EditorView14.darkTheme.of(themeMode === "dark"),
-        EditorView14.editorAttributes.of({
+        EditorView13.baseTheme(defaultTheme),
+        EditorView13.theme(theme ?? {}),
+        EditorView13.darkTheme.of(themeMode === "dark"),
+        EditorView13.editorAttributes.of({
           class: slots.editor?.className ?? ""
         }),
-        EditorView14.contentAttributes.of({
+        EditorView13.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
         // State.
-        EditorView14.editable.of(!readonly),
+        EditorView13.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -3827,7 +2859,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy3)
     });
-    const newView = new EditorView14({
+    const newView = new EditorView13({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -3934,49 +2966,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 { At, CaretRight, ChatText, Code, Image, Link, ListBullets, ListChecks, ListNumbers, TextStrikethrough, Table as Table2, TextB, TextItalic } 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";
-var HeadingIcons = {
-  "0": Paragraph,
-  "1": TextHOne,
-  "2": TextHTwo,
-  "3": TextHThree,
-  "4": TextHFour,
-  "5": TextHFive,
-  "6": TextHSix
-};
+import { getSize } from "@dxos/react-ui-theme";
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, state }) => {
+var ToolbarRoot = ({ children, onAction }) => {
   return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction,
-    state
+    onAction
   }, /* @__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"
+    className: "flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden"
   }, 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);
+var ToolbarButton = ({ Icon, onClick, title }) => {
+  const { onAction } = useToolbarContext("ToolbarButton");
+  const handleClick = () => {
+    const action = onClick();
     if (action) {
       onAction?.(action);
-      event.preventDefault();
     }
   };
   return /* @__PURE__ */ React2.createElement(Button, {
     variant: "ghost",
-    classNames: mx4("p-2", active && "ring-[1px]"),
-    onMouseDown: handleClick,
-    title,
-    disabled
+    classNames: "p-2",
+    onClick: handleClick,
+    title
   }, /* @__PURE__ */ React2.createElement(Icon, {
     className: getSize(5)
   }));
@@ -3985,21 +3003,16 @@ var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   className: "grow"
 });
 var MarkdownHeading = () => {
-  const { onAction, state } = useToolbarContext("MarkdownFormatting");
-  const blockType = state ? state.blockType : "paragraph";
-  const header = blockType && /heading(\d)/.exec(blockType);
-  const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
-  const HeadingIcon = HeadingIcons[value ?? "0"];
+  const { onAction } = useToolbarContext("MarkdownFormatting");
   return /* @__PURE__ */ React2.createElement(Select.Root, {
-    disabled: value === null,
-    value: value ?? "0",
-    onValueChange: (value2) => onAction?.({
+    defaultValue: "0",
+    onValueChange: (value) => onAction?.({
       type: "heading",
-      data: parseInt(value2)
+      data: parseInt(value)
     })
-  }, /* @__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.TriggerButton, {
+    classNames: "w-[8rem]"
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, "Paragraph"), [
     1,
@@ -4017,39 +3030,21 @@ 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
+  title: "Bold",
+  onClick: () => ({
+    type: "bold"
   })
 }), /* @__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
+  title: "Italic",
+  onClick: () => ({
+    type: "italic"
   })
 }), /* @__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
+  onClick: () => ({
+    type: "strikethrough"
   })
 }));
 var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
@@ -4057,51 +3052,39 @@ var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
 }, /* @__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
+  onClick: () => ({
+    type: "list"
   })
 }), /* @__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
+  onClick: () => ({
+    type: "list-ordered"
   })
 }), /* @__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
+  onClick: () => ({
+    type: "list-tasks"
   })
 }));
 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
+  title: "Block quite",
+  onClick: () => ({
+    type: "blockquote"
   })
 }), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: CodeBlock,
+  Icon: Code,
   title: "Code block",
-  disable: (s) => !s.blankLine,
-  getState: (s) => s.blockType === "codeblock",
-  onClick: (s) => ({
-    type: "codeblock",
-    data: s ? s.blockType !== "codeblock" : null
+  onClick: () => ({
+    type: "codeblock"
   })
 }), /* @__PURE__ */ React2.createElement(ToolbarButton, {
   Icon: Table2,
   title: "Table",
-  disable: (s) => !s.blankLine,
   onClick: () => ({
     type: "table"
   })
@@ -4111,10 +3094,20 @@ var MarkdownLinks = () => /* @__PURE__ */ React2.createElement("div", {
 }, /* @__PURE__ */ React2.createElement(ToolbarButton, {
   Icon: Link,
   title: "Link",
-  getState: (s) => s.link,
-  onClick: (s) => ({
-    type: "link",
-    data: s ? !s.link : null
+  onClick: () => ({
+    type: "link"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: At,
+  title: "Mention",
+  onClick: () => ({
+    type: "mention"
+  })
+}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  Icon: Image,
+  title: "Image",
+  onClick: () => ({
+    type: "image"
   })
 }));
 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));
@@ -4250,52 +3243,45 @@ var useActionHandler = (view) => {
     if (!view) {
       return;
     }
-    let inlineType, listType;
     switch (action.type) {
       case "heading":
         setHeading(parseInt(action.data))(view);
         break;
-      case "strong":
-      case "emphasis":
-      case "strikethrough":
-      case "code":
-        inlineType = action.type === "strong" ? Inline.Strong : action.type === "emphasis" ? Inline.Emphasis : action.type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
-        (typeof action.data === "boolean" ? setStyle(inlineType, action.data) : toggleStyle(inlineType))(view);
+      case "bold":
+        toggleBold(view);
+        break;
+      case "italic":
+        toggleItalic(view);
         break;
-      case "list-ordered":
-      case "list-bullet":
-      case "list-tasks":
-        listType = action.type === "list-ordered" ? List.Ordered : action.type === "list-bullet" ? List.Bullet : List.Task;
-        (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(view);
+      case "strikethrough":
+        toggleStrikethrough(view);
         break;
-      case "blockquote":
-        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      case "list":
+        toggleList(view);
         break;
       case "codeblock":
-        (action.data === false ? removeCodeblock : addCodeblock)(view);
+        insertCodeblock(view);
         break;
       case "table":
         insertTable(view);
         break;
-      case "link":
-        (action.data === false ? removeLink : addLink)(view);
-        break;
       case "comment":
         createComment(view);
         break;
     }
     setTimeout(() => {
-      if (!view.hasFocus) {
-        view.focus();
-      }
+      view.focus();
+      view.dispatch({
+        selection: view.state.selection
+      });
     });
   };
 };
 
 // packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 var useEditorView = () => {
-  const [view, setView] = useState3(null);
+  const [view, setView] = useState2(null);
   return [
     (ref) => {
       setView(ref);
@@ -4305,15 +3291,15 @@ 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 { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { EditorSelection, EditorState as EditorState3 } from "@codemirror/state";
+import { EditorView as EditorView14 } from "@codemirror/view";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { log as log4 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } 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();
-  const [view, setView] = useState4();
+  const [view, setView] = useState3();
   const parentRef = useRef2(null);
   useEffect3(() => {
     if (parentRef.current) {
@@ -4322,7 +3308,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView15.exceptionSink.of((err) => {
+          EditorView14.exceptionSink.of((err) => {
             log4.catch(err, void 0, {
               F: __dxlog_file5,
               L: 57,
@@ -4331,12 +3317,12 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
             });
           }),
           extensions,
-          EditorView15.updateListener.of(() => {
+          EditorView14.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy4)
       });
-      const view2 = new EditorView15({
+      const view2 = new EditorView14({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4360,7 +3346,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
   useEffect3(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
-        selection = EditorSelection2.single(view.state.doc.line(1).to);
+        selection = EditorSelection.single(view.state.doc.line(1).to);
       }
       if (selection || scrollTo) {
         onUpdate.current = () => {
@@ -4393,19 +3379,19 @@ var createDataExtensions = ({ readonly = false } = {}) => {
   return [
     //
     EditorState3.readOnly.of(readonly),
-    EditorView15.editable.of(!readonly)
+    EditorView14.editable.of(!readonly)
   ];
 };
 var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
   return [
     //
-    EditorView15.baseTheme(defaultTheme),
-    theme && EditorView15.theme(theme),
-    EditorView15.darkTheme.of(themeMode === "dark"),
-    EditorView15.editorAttributes.of({
+    EditorView14.baseTheme(defaultTheme),
+    theme && EditorView14.theme(theme),
+    EditorView14.darkTheme.of(themeMode === "dark"),
+    EditorView14.editorAttributes.of({
       class: slots?.editor?.className ?? ""
     }),
-    EditorView15.contentAttributes.of({
+    EditorView14.contentAttributes.of({
       class: slots?.content?.className ?? ""
     })
   ].filter(isNotFalsy4);
@@ -4413,7 +3399,7 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
 import get4 from "lodash.get";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
@@ -4421,7 +3407,7 @@ import { isAutomergeObject } from "@dxos/react-client/echo";
 var __dxlog_file6 = "/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] = useState5();
+  const [model, setModel] = useState4();
   useEffect4(() => setModel(createModel(props)), [
     identity,
     space,
@@ -4430,7 +3416,7 @@ var useTextModel = (props) => {
   return model;
 };
 var useInMemoryTextModel = ({ id, defaultContent }) => {
-  const [content, setContent] = useState5(defaultContent ?? "");
+  const [content, setContent] = useState4(defaultContent ?? "");
   return {
     id,
     content,
@@ -4490,8 +3476,6 @@ export {
   Cursor,
   Doc,
   EditorModes,
-  Inline,
-  List,
   MarkdownEditor,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
@@ -4500,11 +3484,6 @@ export {
   Toolbar,
   YText,
   YXmlFragment,
-  addBlockquote,
-  addCodeblock,
-  addLink,
-  addList,
-  addStyle,
   autocomplete,
   automerge,
   awareness,
@@ -4514,7 +3493,6 @@ export {
   code2 as code,
   codeTheme,
   comments,
-  compareFormatting,
   createBasicBundle,
   createComment,
   createDataExtensions,
@@ -4527,11 +3505,11 @@ export {
   defaultTheme,
   focusComment,
   formatting,
-  getFormatting,
   getToken,
   heading2 as heading,
   hr,
   image,
+  insertCodeblock,
   insertTable,
   keymap7 as keymap,
   link,
@@ -4544,33 +3522,22 @@ export {
   mention,
   modelState,
   outliner,
-  removeBlockquote,
-  removeCodeblock,
-  removeLink,
-  removeList,
-  removeStyle,
-  setBlockquote,
   setComments,
   setHeading,
   setSelection,
-  setStyle,
   table,
   tags2 as tags,
   tasklist,
   textTheme,
-  toggleBlockquote,
-  toggleCodeblock,
-  toggleEmphasis,
-  toggleInlineCode,
+  toggleBold,
+  toggleItalic,
   toggleList,
   toggleStrikethrough,
-  toggleStrong,
   toggleStyle,
   typewriter,
   useActionHandler,
   useComments,
   useEditorView,
-  useFormattingState,
   useInMemoryTextModel,
   useTextEditor,
   useTextModel,