@dxos/react-ui-editor 0.4.5-main.f8d6c4e → 0.4.5

package/dist/lib/browser/index.mjs

@@ -1,3 +1,27 @@
+// packages/ui/react-ui-editor/src/translations.ts
+var translationKey = "react-ui-editor";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "strong label": "Bold",
+        "emphasis label": "Italics",
+        "strikethrough label": "Strikethrough",
+        "code label": "Code",
+        "link label": "Link",
+        "list-bullet label": "Bullet list",
+        "list-ordered label": "Numbered list",
+        "list-task label": "Task list",
+        "blockquote label": "Block quote",
+        "codeblock label": "Code block",
+        "comment label": "Create comment",
+        "heading label": "Heading level",
+        "table label": "Create table"
+      }
+    }
+  }
+];
+
 // packages/ui/react-ui-editor/src/index.ts
 import { keymap as keymap8 } from "@codemirror/view";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
@@ -8,7 +32,7 @@ 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 EditorView15 } from "@codemirror/view";
+import { EditorView as EditorView14 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
@@ -102,8 +126,8 @@ var annotations = (options = {}) => {
       annotationsState
     ], (state) => {
       const annotations2 = state.field(annotationsState);
-      const decorations = annotations2.map((annotation) => {
-        const range = Cursor.getRangeFromCursor(state, annotation.cursor);
+      const decorations = annotations2.map((annotation2) => {
+        const range = Cursor.getRangeFromCursor(state, annotation2.cursor);
         return range && annotationMark.range(range.from, range.to);
       }).filter(isNotFalsy);
       return Decoration.set(decorations);
@@ -765,10 +789,10 @@ var blast = (options = defaultOptions) => {
   const getPoint = (view, pos) => {
     const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
     const element = document.elementFromPoint(x, y);
-    const { offsetLeft: left = 0, offsetTop: top2 = 0 } = view.scrollDOM.parentElement ?? {};
+    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
     const point = {
       x: x - left,
-      y: y - top2
+      y: y - top
     };
     return {
       element,
@@ -1116,8 +1140,8 @@ var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue)
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
 var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorFillLayoutRoot = "min-bs-full grid";
-var editorFillLayoutEditor = "min-bs-full";
+var editorFillLayoutRoot = "bs-full overflow-hidden grid";
+var editorFillLayoutEditor = "bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto";
 var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
 
 // packages/ui/react-ui-editor/src/util.ts
@@ -1553,15 +1577,66 @@ var useComments = (view, id, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/listener.ts
+// packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
+import { Facet as Facet4, Transaction } from "@codemirror/state";
 import { EditorView as EditorView7 } from "@codemirror/view";
+var cursorLineMarginFacet = Facet4.define({
+  combine: (input) => input[0] ?? 3
+});
+var annotation = "cursorLineMargin";
+var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
+var cursorLineMargin = EditorView7.updateListener.of(({ transactions, state, selectionSet, startState, view }) => {
+  if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
+    return;
+  }
+  const s = state;
+  const { main } = s.selection;
+  const cursorLineMargin2 = s.facet(cursorLineMarginFacet);
+  const rect = view.dom.getBoundingClientRect();
+  const viewportTop = rect.top - view.documentTop;
+  const viewportBottom = rect.bottom - view.documentTop;
+  const mainLine = lineAtPos(s, main.head);
+  const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
+  const botLineBlk = view.lineBlockAtHeight(viewportBottom);
+  const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
+  const visBotLine = botLineBlk.bottom >= viewportBottom ? visBotLineDoc : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
+  const needsScrollTop = false;
+  const needsScrollBot = mainLine >= visBotLine - cursorLineMargin2;
+  if (needsScrollTop && needsScrollBot) {
+    console.warn("is cursorScrollMargin too large for the editor size?");
+    return;
+  }
+  if (!needsScrollTop && !needsScrollBot) {
+    return;
+  }
+  if (selectionSet) {
+    const { head } = startState.selection.main;
+    const oldMainLine = lineAtPos(startState, head);
+    if (needsScrollTop && oldMainLine < mainLine) {
+      return;
+    }
+    if (needsScrollBot && oldMainLine > mainLine) {
+      return;
+    }
+  }
+  view.dispatch({
+    annotations: Transaction.userEvent.of(annotation),
+    effects: EditorView7.scrollIntoView(s.selection.main.head, {
+      y: needsScrollTop ? "start" : "end",
+      yMargin: view.defaultLineHeight * cursorLineMargin2
+    })
+  });
+});
+
+// packages/ui/react-ui-editor/src/extensions/listener.ts
+import { EditorView as EditorView8 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView7.focusChangeEffect.of((_, focused) => {
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
   }));
-  onChange && extensions.push(EditorView7.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView8.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
@@ -1576,7 +1651,7 @@ import { languages } from "@codemirror/language-data";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView9, highlightActiveLine as highlightActiveLine2, keymap as keymap4, placeholder as placeholder2 } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
@@ -1770,7 +1845,7 @@ var markdownHighlightStyle = (readonly) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => {
   return [
-    lineWrapping && EditorView8.lineWrapping,
+    lineWrapping && EditorView9.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
     // https://github.com/codemirror/basic-setup
@@ -1820,12 +1895,207 @@ var createMarkdownExtensions = ({ themeMode, placeholder: _placeholder, lineWrap
   ].filter(isNotFalsy3);
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/code.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView9, Decoration as Decoration4, WidgetType as WidgetType2 } from "@codemirror/view";
+import { EditorView as EditorView10, Decoration as Decoration4, WidgetType as WidgetType2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var styles4 = EditorView9.baseTheme({
+var FencedCodeBoundary = class extends WidgetType2 {
+  constructor(_className) {
+    super();
+    this._className = _className;
+  }
+  toDOM() {
+    const el = document.createElement("span");
+    el.innerHTML = "&nbsp;";
+    el.className = mx2("cm-code cm-codeblock", this._className);
+    return el;
+  }
+};
+var HorizontalRuleWidget = class extends WidgetType2 {
+  toDOM() {
+    const el = document.createElement("span");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var LinkButton = class extends WidgetType2 {
+  constructor(url, render) {
+    super();
+    this.url = url;
+    this.render = render;
+  }
+  eq(other) {
+    return this.url === other.url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this.render(el, this.url);
+    return el;
+  }
+};
+var CheckboxWidget = class extends WidgetType2 {
+  constructor(_checked) {
+    super();
+    this._checked = _checked;
+  }
+  eq(other) {
+    return this._checked === other._checked;
+  }
+  toDOM(view) {
+    const input = document.createElement("input");
+    input.className = "cm-task-checkbox";
+    input.type = "checkbox";
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute("disabled", "true");
+    } else {
+      input.onmousedown = (event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? "[x]" : "[ ]")) {
+          view.dispatch({
+            changes: {
+              from: pos + 1,
+              to: pos + 2,
+              insert: this._checked ? " " : "x"
+            }
+          });
+          event.preventDefault();
+        }
+      };
+    }
+    return input;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var hide = Decoration4.replace({});
+var fencedCodeTop = Decoration4.replace({
+  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-first")
+});
+var fencedCodeBottom = Decoration4.replace({
+  widget: new FencedCodeBoundary("cm-codeblock-end cm-codeblock-last")
+});
+var horizontalRule = Decoration4.replace({
+  widget: new HorizontalRuleWidget()
+});
+var checkedTask = Decoration4.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedTask = Decoration4.replace({
+  widget: new CheckboxWidget(false)
+});
+var editingRange = (state, range) => {
+  const { readOnly, selection: { main: { head } } } = state;
+  return !readOnly && head >= range.from && head <= range.to;
+};
+var MarksByParent = /* @__PURE__ */ new Set([
+  "CodeMark",
+  "EmphasisMark",
+  "StrikethroughMark",
+  "SubscriptMark",
+  "SuperscriptMark"
+]);
+var buildDecorations = (view, options) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name === "FencedCode") {
+          const editing = editingRange(state, node);
+          for (const block of view.viewportLineBlocks) {
+            if (block.to < node.from) {
+              continue;
+            }
+            if (block.from > node.to) {
+              break;
+            }
+            const first = block.from <= node.from;
+            const last = block.to >= node.to;
+            if (!editing && (first || last)) {
+              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
+            } else {
+              builder.add(block.from, block.from, Decoration4.line({
+                class: mx2("cm-code cm-codeblock-line", first && "cm-codeblock-first", last && "cm-codeblock-last")
+              }));
+            }
+          }
+          return false;
+        } else if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const urlNode = node.node.getChild("URL");
+          const editing = editingRange(state, node);
+          if (urlNode && marks.length >= 2) {
+            const url = state.sliceDoc(urlNode.from, urlNode.to);
+            if (!editing) {
+              builder.add(node.from, marks[0].to, hide);
+            }
+            builder.add(marks[0].to, marks[1].from, Decoration4.mark({
+              tagName: "a",
+              attributes: {
+                class: "cm-link",
+                href: url,
+                rel: "noreferrer",
+                target: "_blank"
+              }
+            }));
+            if (!editing) {
+              builder.add(marks[1].from, node.to, options.renderLinkButton ? Decoration4.replace({
+                widget: new LinkButton(url, options.renderLinkButton)
+              }) : hide);
+            }
+          }
+        } else if (node.name === "HeaderMark") {
+          const parent = node.node.parent;
+          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
+            const next = state.doc.sliceString(node.to, node.to + 1);
+            builder.add(node.from, node.to + (next === " " ? 1 : 0), hide);
+          }
+        } else if (node.name === "HorizontalRule") {
+          if (!editingRange(state, node)) {
+            builder.add(node.from, node.to, horizontalRule);
+          }
+        } else if (node.name === "TaskMarker") {
+          if (!editingRange(state, node)) {
+            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === "x";
+            builder.add(node.from - 2, node.from - 1, Decoration4.mark({
+              class: "cm-task"
+            }));
+            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+          }
+        } else if (MarksByParent.has(node.name)) {
+          if (!editingRange(state, node.node.parent)) {
+            builder.add(node.from, node.to, hide);
+          }
+        }
+      }
+    });
+  }
+  return builder.finish();
+};
+var decorateMarkdown = (options = {}) => {
+  return [
+    ViewPlugin3.fromClass(class {
+      constructor(view) {
+        this.decorations = buildDecorations(view, options);
+      }
+      update(update2) {
+        if (update2.docChanged || update2.selectionSet || update2.viewportChanged) {
+          this.decorations = buildDecorations(update2.view, options);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    formattingStyles
+  ];
+};
+var formattingStyles = EditorView10.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -1873,82 +2143,28 @@ var styles4 = EditorView9.baseTheme({
     "&::after": {
       background: getToken("extend.semanticColors.input.dark")
     }
+  },
+  "& .cm-hr": {
+    display: "inline-block",
+    width: "100%",
+    height: "0",
+    verticalAlign: "middle",
+    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+  },
+  "& .cm-task": {
+    color: getToken("extend.colors.blue.500")
+  },
+  "& .cm-task-checkbox": {
+    marginLeft: "4px",
+    marginRight: "4px"
   }
 });
-var getLineRange = (lines, from, to) => {
-  const start = lines.findIndex((line) => line.from >= from);
-  const end = lines.findIndex((line) => line.to >= to);
-  return [
-    start,
-    end
-  ];
-};
-var LineWidget = class extends WidgetType2 {
-  constructor(_className) {
-    super();
-    this._className = _className;
-  }
-  toDOM() {
-    const el = document.createElement("span");
-    el.innerHTML = "&nbsp;";
-    el.className = mx2("cm-code cm-codeblock", this._className);
-    return el;
-  }
-};
-var top = new LineWidget("cm-codeblock-end cm-codeblock-first");
-var bottom = new LineWidget("cm-codeblock-end cm-codeblock-last");
-var buildDecorations = (view) => {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const blocks = view.viewportLineBlocks;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        if (node.name === "FencedCode") {
-          const editing = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
-          const range = getLineRange(blocks, node.from, node.to);
-          for (let i = range[0]; i <= range[1]; i++) {
-            const block = blocks[i];
-            if (!editing && (i === range[0] || i === range[1])) {
-              builder.add(block.from, block.to, Decoration4.replace({
-                widget: i === range[0] ? top : bottom
-              }));
-            } else {
-              builder.add(block.from, block.from, Decoration4.line({
-                class: mx2("cm-code cm-codeblock-line", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-              }));
-            }
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var code2 = () => {
-  return [
-    ViewPlugin3.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations(update2.view);
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles4
-  ];
-};
 
 // 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 Decoration5, EditorView as EditorView10, keymap as keymap5, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { EditorSelection } from "@codemirror/state";
+import { EditorView as EditorView11, keymap as keymap5 } 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;
@@ -1969,6 +2185,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
   const changes = [];
   let prevBlock = -1;
   for (const range of ranges) {
+    let sawBlock = false;
     syntaxTree2(state).iterate({
       from: range.from,
       to: range.to,
@@ -1976,6 +2193,7 @@ var setHeading = (level) => ({ state, dispatch }) => {
         if (!Object.hasOwn(Textblocks, node.name) || prevBlock === node.from) {
           return;
         }
+        sawBlock = true;
         prevBlock = node.from;
         const blockType = Textblocks[node.name];
         const isHeading = /heading(\d)/.exec(blockType);
@@ -2020,12 +2238,22 @@ var setHeading = (level) => ({ state, dispatch }) => {
         }
       }
     });
+    let line;
+    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state.doc.lineAt(range.from)).text)) {
+      changes.push({
+        from: line.from,
+        to: line.to,
+        insert: "#".repeat(level) + " "
+      });
+    }
   }
   if (!changes.length) {
     return false;
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: "format.setHeading",
     scrollIntoView: true
   }));
@@ -2097,10 +2325,16 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
           const closeStart = node.to - size;
           if (markType === type) {
             if (openEnd <= from && closeStart >= from) {
-              startCovered = openEnd === from ? "adjacent" : true;
+              startCovered = !enable && openEnd === skipMarkers(from, node.node, -1, openEnd) ? {
+                from: node.from,
+                to: openEnd
+              } : true;
             }
             if (openEnd <= to && closeStart >= to) {
-              endCovered = closeStart === to ? "adjacent" : true;
+              endCovered = !enable && closeStart === skipMarkers(to, node.node, 1, closeStart) ? {
+                from: closeStart,
+                to: node.to
+              } : true;
             }
           }
           if (markType === type || type === 3 && enable) {
@@ -2149,22 +2383,16 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
               });
             }
           } else {
-            if (startCovered === "adjacent") {
-              changes2.push({
-                from: from - marker.length,
-                to: from
-              });
+            if (typeof startCovered === "object") {
+              changes2.push(startCovered);
             } 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
-              });
+            if (typeof endCovered === "object") {
+              changes2.push(endCovered);
             } else if (endCovered) {
               changes2.push({
                 from: skipSpaces(rangeEnd, state.doc, 1, blockEnd),
@@ -2175,6 +2403,15 @@ var setStyle = (type, enable) => ({ state, dispatch }) => {
         }
       }
     });
+    if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
+      return {
+        changes: {
+          from: range.head,
+          insert: marker + marker
+        },
+        range: EditorSelection.cursor(range.head + marker.length)
+      };
+    }
     const changeSet = state.changes(changes2.concat(changesAtEnd));
     return {
       changes: changeSet,
@@ -2220,6 +2457,19 @@ var skipSpaces = (pos, doc, dir, limit) => {
   }
   return pos;
 };
+var skipMarkers = (pos, tree, dir, limit) => {
+  for (; ; ) {
+    const next = tree.resolve(pos, dir);
+    if (!IgnoreInline.has(next.name)) {
+      return pos;
+    }
+    const moveTo = dir < 0 ? next.from : next.to;
+    if (limit != null && (dir < 0 ? moveTo < limit : moveTo > limit)) {
+      return pos;
+    }
+    pos = moveTo;
+  }
+};
 var snippets = {
   codeblock: snippet([
     //
@@ -2498,8 +2748,10 @@ var addList = (type) => ({ state, dispatch }) => {
       renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
     }
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: "format.list.add",
     scrollIntoView: true
   }));
@@ -2593,6 +2845,7 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   const lines = [];
   let lastBlock = -1;
   for (const { from, to } of state.selection.ranges) {
+    const sawBlock = false;
     syntaxTree2(state).iterate({
       from,
       to,
@@ -2602,9 +2855,9 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             return false;
           }
           lastBlock = node.from;
-          let line = state.doc.lineAt(node.from);
-          if (line.number > 1) {
-            const prevLine = state.doc.line(line.number - 1);
+          let line2 = state.doc.lineAt(node.from);
+          if (line2.number > 1) {
+            const prevLine = state.doc.line(line2.number - 1);
             if (/^[>\s]*$/.test(prevLine.text)) {
               if (!enable || lines.length && lines[lines.length - 1].number === prevLine.number - 1) {
                 lines.push(prevLine);
@@ -2612,14 +2865,14 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
             }
           }
           for (; ; ) {
-            lines.push(line);
-            if (line.to >= node.to) {
+            lines.push(line2);
+            if (line2.to >= node.to) {
               break;
             }
-            line = state.doc.line(line.number + 1);
+            line2 = state.doc.line(line2.number + 1);
           }
-          if (!enable && line.number < state.doc.lines) {
-            const nextLine = state.doc.line(line.number + 1);
+          if (!enable && line2.number < state.doc.lines) {
+            const nextLine = state.doc.line(line2.number + 1);
             if (/^[>\s]*$/.test(nextLine.text)) {
               lines.push(nextLine);
             }
@@ -2628,6 +2881,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
         }
       }
     });
+    let line;
+    if (!sawBlock && enable && from === to && !/\S/.test((line = state.doc.lineAt(from)).text)) {
+      lines.push(line);
+    }
   }
   const changes = [];
   for (const line of lines) {
@@ -2649,8 +2906,10 @@ var setBlockquote = (enable) => ({ state, dispatch }) => {
   if (!changes.length) {
     return false;
   }
+  const changeSet = state.changes(changes);
   dispatch(state.update({
-    changes,
+    changes: changeSet,
+    selection: state.selection.map(changeSet, 1),
     userEvent: enable ? "format.blockquote.add" : "format.blockquote.remove",
     scrollIntoView: true
   }));
@@ -2782,56 +3041,7 @@ var formatting = (options = {}) => {
         key: "meta-b",
         run: toggleStrong
       }
-    ]),
-    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, Decoration5.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
-    })
+    ])
   ];
 };
 var InlineMarker = {
@@ -2881,7 +3091,7 @@ var getFormatting = (state) => {
     null,
     null
   ];
-  let link2 = false;
+  let link = false;
   let blockQuote = null;
   let listStyle = null;
   const stack = [];
@@ -2943,7 +3153,7 @@ var getFormatting = (state) => {
         if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
           stack.push(name);
         } else if (name === "Link") {
-          link2 = true;
+          link = 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";
@@ -3018,13 +3228,13 @@ var getFormatting = (state) => {
     emphasis: inline[1] ?? false,
     strong: inline[0] ?? false,
     strikethrough: inline[2] ?? false,
-    link: link2,
+    link,
     listStyle: listStyle || null
   };
 };
 var useFormattingState = () => {
   const [state, setState] = useState(null);
-  const observer = useMemo(() => EditorView10.updateListener.of((update2) => {
+  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       const newState = getFormatting(update2.state);
       if (!state || !compareFormatting(state, newState)) {
@@ -3038,117 +3248,14 @@ var useFormattingState = () => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
-import { Decoration as Decoration6, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var buildDecorations2 = (view) => {
-  const builder = new RangeSetBuilder3();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(state).iterate({
-      enter: (node) => {
-        switch (node.name) {
-          case "ATXHeading1":
-          case "ATXHeading2":
-          case "ATXHeading3":
-          case "ATXHeading4":
-          case "ATXHeading5":
-          case "ATXHeading6": {
-            const mark2 = node.node.getChild("HeaderMark");
-            if (mark2) {
-              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
-                builder.add(mark2.from, mark2.to + 1, Decoration6.replace({}));
-              }
-            }
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var heading2 = () => {
-  return [
-    ViewPlugin5.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations2(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations2(update2.view);
-      }
-    }, {
-      decorations: (value) => value.decorations
-    })
-  ];
-};
-
-// 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 Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin6, WidgetType as WidgetType3 } from "@codemirror/view";
-var styles5 = EditorView11.baseTheme({
-  "& .cm-hr": {
-    // Note that block-level decorations should not have vertical margins,
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
-  }
-});
-var HorizontalRuleWidget = class extends WidgetType3 {
-  toDOM() {
-    const el = document.createElement("div");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var decoration = Decoration7.replace({
-  widget: new HorizontalRuleWidget()
-});
-var buildDecorations3 = (view) => {
-  const builder = new RangeSetBuilder4();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree4(state).iterate({
-      enter: (node) => {
-        if (node.name === "HorizontalRule") {
-          if (cursor <= node.from || cursor >= node.to) {
-            builder.add(node.from, node.to, decoration);
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var hr = () => {
-  return [
-    ViewPlugin6.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations3(view);
-      }
-      update(update2) {
-        this.decorations = buildDecorations3(update2.view);
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles5
-  ];
-};
-
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView12, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField4.define({
     create: (state) => {
-      return Decoration8.set(buildDecorations4(0, state.doc.length, state));
+      return Decoration5.set(buildDecorations2(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -3168,26 +3275,26 @@ var image = (options = {}) => {
         filterFrom: from,
         filterTo: to,
         filter: () => false,
-        add: buildDecorations4(from, to, tr.state)
+        add: buildDecorations2(from, to, tr.state)
       });
     },
     provide: (field) => EditorView12.decorations.from(field)
   });
 };
-var buildDecorations4 = (from, to, state) => {
+var buildDecorations2 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  syntaxTree5(state).iterate({
+  syntaxTree3(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 hide2 = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          decorations.push(Decoration8.replace({
+          decorations.push(Decoration5.replace({
             block: true,
             widget: new ImageWidget(url)
-          }).range(hide ? node.from : node.to, node.to));
+          }).range(hide2 ? node.from : node.to, node.to));
         }
       }
     },
@@ -3196,7 +3303,7 @@ var buildDecorations4 = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType4 {
+var ImageWidget = class extends WidgetType3 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -3214,146 +3321,43 @@ var ImageWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration9, ViewPlugin as ViewPlugin7, WidgetType as WidgetType5 } from "@codemirror/view";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
-var link = (options = {}) => {
-  const extensions = [
-    ViewPlugin7.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations5(view, options);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations5(update2.view, options);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    })
-  ];
-  if (options.onHover) {
-    extensions.push(
-      // https://codemirror.net/examples/tooltip
-      // https://codemirror.net/docs/ref/#view.hoverTooltip
-      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
-      hoverTooltip2((view, 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;
-        }
-        const url = link2 && link2.getChild("URL");
-        if (!url || !link2) {
-          return null;
-        }
-        const urlText = view.state.sliceDoc(url.from, url.to);
-        return {
-          pos: link2.from,
-          end: link2.to,
-          above: true,
-          create: () => {
-            const el = document.createElement("div");
-            el.className = tooltipContent({}, "pli-2 plb-1");
-            options.onHover(el, urlText);
-            return {
-              dom: el,
-              offset: {
-                x: 0,
-                y: 4
-              }
-            };
-          }
-        };
-      })
-    );
-  }
-  return extensions;
-};
-var LinkButton = class extends WidgetType5 {
-  constructor(_url, _onAttach) {
-    super();
-    this._url = _url;
-    this._onAttach = _onAttach;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const el = document.createElement("span");
-    this._onAttach(el, this._url);
-    return el;
-  }
-};
-var LinkText = class extends WidgetType5 {
-  constructor(_text, _url) {
-    super();
-    this._text = _text;
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
+var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
+  const syntax = syntaxTree4(view.state).resolveInner(pos, side);
+  let link = null;
+  for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
+    link = node.name === "Link" ? node : null;
+  }
+  const url = link && link.getChild("URL");
+  if (!url || !link) {
+    return null;
   }
-  toDOM(view) {
-    const link2 = document.createElement("a");
-    link2.setAttribute("class", "cm-link");
-    link2.textContent = this._text;
-    if (this._url) {
-      link2.setAttribute("rel", "noreferrer");
-      link2.setAttribute("target", "_blank");
-      link2.href = this._url;
-    } else {
-      link2.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: view.posAtDOM(link2)
-          }
-        });
+  const urlText = view.state.sliceDoc(url.from, url.to);
+  return {
+    pos: link.from,
+    end: link.to,
+    above: true,
+    create: () => {
+      const el = document.createElement("div");
+      el.className = tooltipContent({}, "pli-2 plb-1");
+      render(el, urlText);
+      return {
+        dom: el,
+        offset: {
+          x: 0,
+          y: 4
+        }
       };
     }
-    return link2;
-  }
-};
-var buildDecorations5 = (view, options) => {
-  const builder = new RangeSetBuilder5();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree6(state).iterate({
-      enter: (node) => {
-        if (node.name === "Link") {
-          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, Decoration9.replace({
-              widget: new LinkText(text, options.link ? url : void 0)
-            }));
-          }
-          if (options.onRender) {
-            builder.add(node.to, node.to, Decoration9.replace({
-              widget: new LinkButton(url, options.onRender)
-            }));
-          }
-          return false;
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
+  };
+});
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration10, EditorView as EditorView13, WidgetType as WidgetType6 } from "@codemirror/view";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField5.define({
     create: (state) => update(state, options),
@@ -3362,7 +3366,7 @@ var table = (options = {}) => {
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder6();
+  const builder = new RangeSetBuilder2();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -3370,7 +3374,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree7(state).iterate({
+  syntaxTree5(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -3401,17 +3405,17 @@ var update = (state, options) => {
     }
   });
   tables.forEach((table2) => {
-    const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
-    hide && builder.add(table2.from, table2.to, Decoration10.replace({
+    const hide2 = state.readOnly || cursor < table2.from || cursor > table2.to;
+    hide2 && builder.add(table2.from, table2.to, Decoration6.replace({
       widget: new TableWidget(table2)
     }));
-    builder.add(table2.from, table2.to, Decoration10.mark({
+    builder.add(table2.from, table2.to, Decoration6.mark({
       class: "cm-table"
     }));
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType6 {
+var TableWidget = class extends WidgetType4 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -3448,103 +3452,6 @@ 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 EditorView14, Decoration as Decoration11, WidgetType as WidgetType7, ViewPlugin as ViewPlugin8 } from "@codemirror/view";
-var styles6 = EditorView14.baseTheme({
-  "& .cm-task": {
-    color: getToken("extend.colors.blue.500")
-  },
-  "& .cm-task-checkbox": {
-    marginLeft: "4px",
-    marginRight: "4px"
-  }
-});
-var CheckboxWidget = class extends WidgetType7 {
-  constructor(_checked) {
-    super();
-    this._checked = _checked;
-  }
-  eq(other) {
-    return this._checked === other._checked;
-  }
-  toDOM(view) {
-    const input = document.createElement("input");
-    input.className = "cm-task-checkbox";
-    input.type = "checkbox";
-    input.checked = this._checked;
-    if (view.state.readOnly) {
-      input.setAttribute("disabled", "true");
-    } else {
-      input.onmousedown = (event) => {
-        const pos = view.posAtDOM(input);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? "[x]" : "[ ]")) {
-          view.dispatch({
-            changes: {
-              from: pos + 1,
-              to: pos + 2,
-              insert: this._checked ? " " : "x"
-            }
-          });
-          event.preventDefault();
-        }
-      };
-    }
-    return input;
-  }
-  ignoreEvent() {
-    return false;
-  }
-};
-var checkedDecoration = Decoration11.replace({
-  widget: new CheckboxWidget(true)
-});
-var uncheckedDecoration = Decoration11.replace({
-  widget: new CheckboxWidget(false)
-});
-var buildDecorations6 = (view) => {
-  const builder = new RangeSetBuilder7();
-  const { state } = view;
-  const cursor = state.selection.main.head;
-  for (const { from, to } of view.visibleRanges) {
-    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, Decoration11.mark({
-              class: "cm-task"
-            }));
-            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
-          }
-        }
-      },
-      from,
-      to
-    });
-  }
-  return builder.finish();
-};
-var tasklist = (options = {}) => {
-  return [
-    ViewPlugin8.fromClass(class {
-      constructor(view) {
-        this.decorations = buildDecorations6(view);
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations6(update2.view);
-        }
-      }
-    }, {
-      decorations: (value) => value.decorations
-    }),
-    styles6
-  ];
-};
-
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 var mention = ({ onSearch }) => {
@@ -3575,10 +3482,10 @@ var mention = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet4 } from "@codemirror/state";
+import { Facet as Facet5 } from "@codemirror/state";
 import { keymap as keymap6 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
-var editorMode = Facet4.define({
+var editorMode = Facet5.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
@@ -3942,7 +3849,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
       selection,
       extensions: [
         // TODO(burdon): Doesn't catch errors in keymap functions.
-        EditorView15.exceptionSink.of((err) => {
+        EditorView14.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
             L: 113,
@@ -3952,17 +3859,17 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         }),
         // Theme.
         // TODO(burdon): Make configurable.
-        EditorView15.baseTheme(defaultTheme),
-        EditorView15.theme(theme ?? {}),
-        EditorView15.darkTheme.of(themeMode === "dark"),
-        EditorView15.editorAttributes.of({
+        EditorView14.baseTheme(defaultTheme),
+        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 ?? ""
         }),
         // Focus.
-        EditorView15.updateListener.of((update2) => {
+        EditorView14.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
             if (transaction.isUserEvent("focus.container")) {
               rootRef.current?.focus();
@@ -3970,7 +3877,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
           });
         }),
         // State.
-        EditorView15.editable.of(!readonly),
+        EditorView14.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
@@ -3979,7 +3886,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const newView = new EditorView15({
+    const newView = new EditorView14({
       state,
       parent: rootRef.current,
       scrollTo,
@@ -4096,32 +4003,12 @@ var defaultMarkdownSlots = {
 import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2 from "react";
-import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/translations.ts
-var translationKey = "react-ui-editor";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "strong label": "Strong",
-        "emphasis label": "Emphasis",
-        "strikethrough label": "Strike-through",
-        "code label": "Code",
-        "list-bullet label": "Bullet list",
-        "list-ordered label": "Numbered list",
-        "list-task label": "Task list",
-        "blockquote label": "Block quote",
-        "codeblock label": "Code block",
-        "comment label": "Create comment",
-        "heading label": "Heading level"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
 var HeadingIcons = {
   "0": Paragraph,
   "1": TextHOne,
@@ -4150,7 +4037,9 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
 var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
@@ -4158,7 +4047,7 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: iconStyles
   }), /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, children));
+  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   role: "separator",
@@ -4171,13 +4060,15 @@ var MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
-  return /* @__PURE__ */ React2.createElement(Select.Root, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Select.Root, {
     disabled: value === null,
     value: value ?? "0",
     onValueChange: (value2) => onAction?.({
       type: "heading",
       data: parseInt(value2)
     })
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
@@ -4187,7 +4078,7 @@ var MarkdownHeading = () => {
     className: "sr-only"
   }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
     className: iconStyles
-  }))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+  })))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, /* @__PURE__ */ React2.createElement(Paragraph, {
     className: iconStyles
@@ -4213,7 +4104,7 @@ var MarkdownHeading = () => {
     className: iconStyles
   }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
     className: iconStyles
-  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
+  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var markdownStyles = [
   {
@@ -4301,8 +4192,7 @@ var markdownBlocks = [
   {
     type: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockType === "codeblock",
-    disabled: (state) => !state.blankLine
+    getState: (state) => state.blockType === "codeblock"
   },
   {
     type: "table",
@@ -4333,7 +4223,9 @@ var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragmen
 var MarkdownExtended = () => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
@@ -4344,7 +4236,7 @@ var MarkdownExtended = () => {
     className: iconStyles
   }), /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, t("comment label")));
+  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -4535,7 +4427,7 @@ var useEditorView = (id) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView15 } from "@codemirror/view";
 import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
@@ -4552,7 +4444,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView16.exceptionSink.of((err) => {
+          EditorView15.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
               L: 60,
@@ -4561,12 +4453,12 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
             });
           }),
           extensions,
-          EditorView16.updateListener.of(() => {
+          EditorView15.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy5)
       });
-      view2 = new EditorView16({
+      view2 = new EditorView15({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4624,19 +4516,19 @@ var createDataExtensions = ({ readonly = false } = {}) => {
   return [
     //
     EditorState3.readOnly.of(readonly),
-    EditorView16.editable.of(!readonly)
+    EditorView15.editable.of(!readonly)
   ];
 };
 var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
   return [
     //
-    EditorView16.baseTheme(defaultTheme),
-    theme && EditorView16.theme(theme),
-    EditorView16.darkTheme.of(themeMode === "dark"),
-    EditorView16.editorAttributes.of({
+    EditorView15.baseTheme(defaultTheme),
+    theme && EditorView15.theme(theme),
+    EditorView15.darkTheme.of(themeMode === "dark"),
+    EditorView15.editorAttributes.of({
       class: slots?.editor?.className ?? ""
     }),
-    EditorView16.contentAttributes.of({
+    EditorView15.contentAttributes.of({
       class: slots?.content?.className ?? ""
     })
   ].filter(isNotFalsy5);
@@ -4736,7 +4628,6 @@ export {
   awarenessProvider,
   blast,
   callbackWrapper,
-  code2 as code,
   codeTheme,
   comments,
   compareFormatting,
@@ -4745,6 +4636,9 @@ export {
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
+  cursorLineMargin,
+  cursorLineMarginFacet,
+  decorateMarkdown,
   defaultMarkdownSlots,
   defaultOptions,
   defaultSlots,
@@ -4759,12 +4653,10 @@ export {
   formatting,
   getFormatting,
   getToken,
-  heading2 as heading,
-  hr,
   image,
   insertTable,
   keymap8 as keymap,
-  link,
+  linkTooltip,
   listener,
   logChanges,
   markdownHighlightStyle,
@@ -4786,7 +4678,6 @@ export {
   setStyle,
   table,
   tags2 as tags,
-  tasklist,
   textTheme,
   toggleBlockquote,
   toggleCodeblock,
@@ -4796,6 +4687,7 @@ export {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  translations_default as translations,
   typewriter,
   useActionHandler,
   useComments,