@dxos/react-ui-editor 0.4.8-main.457648 → 0.4.8-main.483207a

package/dist/lib/browser/index.mjs

@@ -15,6 +15,7 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table"
       }
@@ -23,17 +24,17 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
-import { log as log9 } from "@dxos/log";
+import { log as log7 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
@@ -121,8 +122,8 @@ var annotations = (options = {}) => {
       annotationsState
     ], (state2) => {
       const annotations2 = state2.field(annotationsState);
-      const decorations = annotations2.map((annotation2) => {
-        const range = Cursor.getRangeFromCursor(state2, annotation2.cursor);
+      const decorations = annotations2.map((annotation) => {
+        const range = Cursor.getRangeFromCursor(state2, annotation.cursor);
         return range && annotationMark.range(range.from, range.to);
       }).filter(isNotFalsy);
       return Decoration.set(decorations);
@@ -474,13 +475,13 @@ var automerge = (accessor) => {
     ViewPlugin.fromClass(class {
       constructor(_view) {
         this._view = _view;
-        accessor.handle.addListener("change", this._handleChange.bind(this));
+        this._handleChange = () => {
+          syncer.reconcile(this._view, false);
+        };
+        accessor.handle.addListener("change", this._handleChange);
       }
       destroy() {
-        accessor.handle.removeListener("change", this._handleChange.bind(this));
-      }
-      _handleChange() {
-        syncer.reconcile(this._view, false);
+        accessor.handle.removeListener("change", this._handleChange);
       }
     }),
     // Reconcile local updates.
@@ -1195,7 +1196,7 @@ var commandState = StateField3.define({
                       }
                     });
                   }
-                  setTimeout(() => view2.focus());
+                  requestAnimationFrame(() => view2.focus());
                 });
               }
             };
@@ -1831,14 +1832,14 @@ var focusComment = (view, id, center = true) => {
     });
   }
 };
-var useComments = (view, id, comments2 = []) => {
+var useComments = (view, id, comments2) => {
   useEffect(() => {
     if (view) {
       if (id === view.state.facet(documentId)) {
         view.dispatch({
           effects: setComments.of({
             id,
-            comments: comments2
+            comments: comments2 ?? []
           })
         });
       }
@@ -1850,76 +1851,14 @@ var useComments = (view, id, comments2 = []) => {
   ]);
 };
 
-// packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts
-import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView8 } from "@codemirror/view";
-import { log as log5 } from "@dxos/log";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/cursor-line-margin.ts";
-var annotation = "cursorLineMargin";
-var lineAtPos = (s, pos) => s.doc.lineAt(pos).number;
-var cursorLineMargin = (options = {
-  lines: 3
-}) => {
-  const { lines } = options;
-  if (!lines || lines <= 0) {
-    return [];
-  }
-  return EditorView8.updateListener.of(({ transactions, state: state2, selectionSet, startState, view }) => {
-    if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
-      return;
-    }
-    const s = state2;
-    const { main } = s.selection;
-    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 - lines;
-    if (needsScrollTop && needsScrollBot) {
-      log5.warn("is cursorScrollMargin too large for the editor size?", void 0, {
-        F: __dxlog_file6,
-        L: 65,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      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: EditorView8.scrollIntoView(s.selection.main.head, {
-        y: needsScrollTop ? "start" : "end",
-        yMargin: view.defaultLineHeight * lines
-      })
-    });
-  });
-};
-
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
 import { invariant as invariant3 } from "@dxos/invariant";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
 var documentId2 = Facet5.define({
   combine: (providers) => {
     invariant3(providers.length <= 1, void 0, {
-      F: __dxlog_file7,
+      F: __dxlog_file6,
       L: 11,
       S: void 0,
       A: [
@@ -1932,33 +1871,51 @@ var documentId2 = Facet5.define({
 });
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { EditorView as EditorView9 } from "@codemirror/view";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/dnd.ts";
-var dnd = () => {
-  return EditorView9.domEventHandlers({
-    drop: (event, view) => {
-      log6.info("domEventHandlersDrop", {
-        event
-      }, {
-        F: __dxlog_file8,
-        L: 14,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  });
+import { dropCursor, EditorView as EditorView8 } from "@codemirror/view";
+var styles4 = EditorView8.baseTheme({
+  ".cm-dropCursor": {
+    borderLeft: `2px solid ${getToken("extend.colors.primary.500")}`,
+    color: getToken("extend.colors.primary.500"),
+    padding: "0 4px"
+  },
+  ".cm-dropCursor:after": {
+    content: '"\u2190"'
+  }
+});
+var dropFile = (options = {}) => {
+  return [
+    styles4,
+    dropCursor(),
+    EditorView8.domEventHandlers({
+      drop: (event, view) => {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        const pos = view.posAtCoords(event);
+        if (files?.length && pos !== null) {
+          view.dispatch({
+            selection: {
+              anchor: pos
+            }
+          });
+          options.onDrop?.(view, {
+            files
+          });
+        }
+      }
+    })
+  ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-import { closeBrackets } from "@codemirror/autocomplete";
-import { history } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
+import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
-import { EditorView as EditorView10, crosshairCursor, drawSelection, dropCursor, highlightActiveLine, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import { generateName } from "@dxos/display-name";
-import { log as log7 } from "@dxos/log";
+import { log as log5 } from "@dxos/log";
 import { hueTokens } from "@dxos/react-ui-theme";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
 
@@ -2163,50 +2120,75 @@ var defaultTheme = {
   *   </div>
   * </div
   */
-  ".cm-panels": {
-    border: `1px solid ${get3(tokens, "extend.colors.neutral.200")}`
-  },
+  ".cm-panels": {},
   ".cm-panel": {
-    background: get3(tokens, "extend.colors.neutral.50"),
     fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.850")
+  },
   ".cm-button": {
     margin: "4px",
     fontFamily: get3(tokens, "fontFamily.body", []).join(","),
-    background: get3(tokens, "extend.colors.neutral.100"),
     backgroundImage: "none",
     border: "none",
+    "&:active": {
+      backgroundImage: "none"
+    }
+  },
+  "&light .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.100"),
     "&:hover": {
       background: get3(tokens, "extend.colors.neutral.200")
     },
     "&:active": {
-      background: get3(tokens, "extend.colors.neutral.300"),
-      backgroundImage: "none"
+      background: get3(tokens, "extend.colors.neutral.300")
     }
   },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
+  "&dark .cm-button": {
+    background: get3(tokens, "extend.colors.neutral.800"),
+    "&:hover": {
+      background: get3(tokens, "extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: get3(tokens, "extend.colors.neutral.600")
+    }
   }
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
-var defaults = {
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var defaultBasicOptions = {
+  allowMultipleSelections: true,
   bracketMatching: true,
   closeBrackets: true,
   drawSelection: true,
   editable: true,
   history: true,
-  lineWrapping: true
+  keymap: "standard",
+  lineWrapping: true,
+  search: true
+};
+var keymaps = {
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  standard: standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.defaultKeymap
+  default: defaultKeymap
 };
 var createBasicExtensions = (_props) => {
-  const props = defaultsDeep2({}, _props, defaults);
+  const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
-    // TODO(burdon): Doesn't catch errors in keymap functions.
-    EditorView10.exceptionSink.of((err) => {
-      log7.catch(err, void 0, {
-        F: __dxlog_file9,
-        L: 78,
+    // NOTE: Doesn't catch errors in keymap functions.
+    EditorView9.exceptionSink.of((err) => {
+      log5.catch(err, void 0, {
+        F: __dxlog_file7,
+        L: 91,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2214,37 +2196,50 @@ var createBasicExtensions = (_props) => {
     props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
-    props.crosshairCursor && crosshairCursor(),
-    props.dropCursor && dropCursor(),
+    props.dropCursor && dropCursor2(),
     props.drawSelection && drawSelection(),
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView10.lineWrapping,
+    props.lineWrapping && EditorView9.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readonly && [
       EditorState.readOnly.of(true),
-      EditorView10.editable.of(false)
+      EditorView9.editable.of(false)
     ],
     props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize)
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap5.of([
+      ...(props.keymap && keymaps[props.keymap]) ?? [],
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      ...props.indentWithTab ? [
+        indentWithTab
+      ] : [],
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...props.closeBrackets ? closeBracketsKeymap : [],
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...props.history ? historyKeymap : [],
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...props.search ? searchKeymap : []
+    ].filter(isNotFalsy2))
   ].filter(isNotFalsy2);
 };
-var defaultSlots = {
+var defaultThemeSlots = {
   editor: {
     className: "w-full bs-full"
   }
 };
 var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
-  const slots = defaultsDeep2({}, _slots, defaultSlots);
+  const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView10.baseTheme(defaultTheme),
-    EditorView10.darkTheme.of(themeMode === "dark"),
-    theme && EditorView10.theme(theme),
-    slots.editor?.className && EditorView10.editorAttributes.of({
+    EditorView9.baseTheme(defaultTheme),
+    EditorView9.darkTheme.of(themeMode === "dark"),
+    theme && EditorView9.theme(theme),
+    slots.editor?.className && EditorView9.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView10.contentAttributes.of({
+    slots.content?.className && EditorView9.contentAttributes.of({
       class: slots.content.className
     })
   ].filter(isNotFalsy2);
@@ -2272,614 +2267,108 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView11 } from "@codemirror/view";
+import { EditorView as EditorView10 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView11.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView10.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView11.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView10.updateListener.of((update2) => {
     onChange(update2.state.doc.toString());
   }));
   return extensions;
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-import { closeBracketsKeymap } from "@codemirror/autocomplete";
-import { historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
-import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { searchKeymap } from "@codemirror/search";
-import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { keymap as keymap5 } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
-import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags, styleTags, Tag } from "@lezer/highlight";
-import { Table } from "@lezer/markdown";
-var markdownTags = {
-  Blockquote: Tag.define(),
-  CodeMark: Tag.define(),
-  CodeText: Tag.define(),
-  EmphasisMark: Tag.define(),
-  HeaderMark: Tag.define(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-  // Custom.
-  TableCell: Tag.define()
-};
-Table.defineNodes?.forEach((node) => {
-  switch (node?.name) {
-    case "TableCell": {
-      node.style = markdownTags.TableCell;
-      break;
+// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
+import { snippet } from "@codemirror/autocomplete";
+import { syntaxTree } from "@codemirror/language";
+import { EditorSelection } from "@codemirror/state";
+import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
+import { useMemo, useState } from "react";
+var formattingEquals = (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: state2, dispatch }) => {
+  const { selection: { ranges }, doc } = state2;
+  const changes = [];
+  let prevBlock = -1;
+  for (const range of ranges) {
+    let sawBlock = false;
+    syntaxTree(state2).iterate({
+      from: range.from,
+      to: range.to,
+      enter: (node) => {
+        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);
+        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)
+            });
+          }
+        }
+      }
+    });
+    let line;
+    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state2.doc.lineAt(range.from)).text)) {
+      changes.push({
+        from: line.from,
+        to: line.to,
+        insert: "#".repeat(level) + " "
+      });
     }
   }
-});
-var markdownTagsExtensions = [
-  Table,
-  {
-    props: [
-      styleTags(markdownTags)
-    ]
-  }
-];
-var markdownHighlightStyle = (readonly) => {
-  return HighlightStyle.define([
-    {
-      tag: [
-        tags.keyword,
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-        tags.color,
-        tags.constant(tags.name),
-        tags.standard(tags.name),
-        tags.definition(tags.name),
-        tags.separator,
-        tags.typeName,
-        tags.className,
-        tags.number,
-        tags.changed,
-        tags.annotation,
-        tags.modifier,
-        tags.self,
-        tags.namespace,
-        tags.operator,
-        tags.operatorKeyword,
-        tags.escape,
-        tags.regexp,
-        tags.special(tags.string),
-        tags.meta,
-        tags.comment,
-        tags.atom,
-        tags.bool,
-        tags.special(tags.variableName),
-        tags.processingInstruction,
-        tags.string,
-        tags.inserted,
-        tags.invalid
-      ],
-      color: "inherit !important"
-    },
-    // Markdown marks.
-    {
-      tag: [
-        tags.meta,
-        tags.processingInstruction,
-        markdownTags.LinkLabel,
-        markdownTags.LinkReference,
-        markdownTags.ListMark
-      ],
-      class: mark
-    },
-    // Markdown marks.
-    {
-      tag: [
-        markdownTags.CodeMark,
-        markdownTags.HeaderMark,
-        markdownTags.QuoteMark,
-        markdownTags.EmphasisMark
-      ],
-      class: mark
-    },
-    // E.g., code block language (after ```).
-    {
-      tag: [
-        tags.function(tags.variableName),
-        tags.labelName
-      ],
-      class: codeMark
-    },
-    {
-      tag: [
-        tags.monospace
-      ],
-      class: "font-mono"
-    },
-    // Headings.
-    {
-      tag: tags.heading1,
-      class: heading(1)
-    },
-    {
-      tag: tags.heading2,
-      class: heading(2)
-    },
-    {
-      tag: tags.heading3,
-      class: heading(3)
-    },
-    {
-      tag: tags.heading4,
-      class: heading(4)
-    },
-    {
-      tag: tags.heading5,
-      class: heading(5)
-    },
-    {
-      tag: tags.heading6,
-      class: heading(6)
-    },
-    // Emphasis.
-    {
-      tag: tags.emphasis,
-      class: italic
-    },
-    {
-      tag: tags.strong,
-      class: bold
-    },
-    {
-      tag: tags.strikethrough,
-      class: strikethrough
-    },
-    // Naked URLs.
-    {
-      tag: [
-        markdownTags.URL
-      ],
-      class: inlineUrl
-    },
-    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-    // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
-    // when a language is specified. In this case, the syntax highlighting extensions will colorize
-    // the code, but all other CSS properties will be inherited.
-    // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
-    {
-      tag: [
-        markdownTags.CodeText,
-        markdownTags.InlineCode
-      ],
-      class: code
-    },
-    {
-      tag: [
-        markdownTags.QuoteMark
-      ],
-      class: blockquote
-    },
-    {
-      tag: [
-        markdownTags.TableCell
-      ],
-      class: "font-mono"
-    }
-  ], {
-    scope: markdownLanguage2,
-    all: {
-      fontFamily: getToken("fontFamily.body", []).join(",")
-    }
-  });
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var createMarkdownExtensions = ({ themeMode } = {}) => {
-  return [
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
-    markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage3,
-      // Languages for syntax highlighting fenced code blocks.
-      codeLanguages: languages,
-      // Parser extensions.
-      extensions: [
-        // GFM provided by default.
-        markdownTagsExtensions
-      ]
-    }),
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-    // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle()),
-    keymap5.of([
-      // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.standardKeymap
-      ...standardKeymap
-    ])
-  ];
-};
-
-// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var HorizontalRuleWidget = class extends WidgetType3 {
-  toDOM() {
-    const el = document.createElement("span");
-    el.className = "cm-hr";
-    return el;
-  }
-};
-var LinkButton = class extends WidgetType3 {
-  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 WidgetType3 {
-  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 ch-checkbox ch-focus-ring -mbs-0.5";
-    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 = Decoration5.replace({});
-var fencedCodeLine = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line")
-});
-var fencedCodeLineFirst = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
-});
-var fencedCodeLineLast = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
-});
-var horizontalRule = Decoration5.replace({
-  widget: new HorizontalRuleWidget()
-});
-var checkedTask = Decoration5.replace({
-  widget: new CheckboxWidget(true)
-});
-var uncheckedTask = Decoration5.replace({
-  widget: new CheckboxWidget(false)
-});
-var editingRange = (state2, range, focus) => {
-  const { readOnly, selection: { main: { head } } } = state2;
-  return focus && !readOnly && head >= range.from && head <= range.to;
-};
-var MarksByParent = /* @__PURE__ */ new Set([
-  "CodeMark",
-  "EmphasisMark",
-  "StrikethroughMark",
-  "SubscriptMark",
-  "SuperscriptMark"
-]);
-var buildDecorations = (view, options, focus) => {
-  const deco = new RangeSetBuilder2();
-  const atomicDeco = new RangeSetBuilder2();
-  const { state: state2 } = view;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state2).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (node.name === "FencedCode") {
-          const editing = editingRange(state2, node, focus);
-          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 && /^(\s>)*```$/.test(state2.doc.sliceString(block.from, block.to));
-            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
-            if (!editing && (first || last)) {
-              atomicDeco.add(block.from, block.to, hide);
-            }
-          }
-          return false;
-        } else if (node.name === "Link") {
-          const marks = node.node.getChildren("LinkMark");
-          const urlNode = node.node.getChild("URL");
-          const editing = editingRange(state2, node, focus);
-          if (urlNode && marks.length >= 2) {
-            const url = state2.sliceDoc(urlNode.from, urlNode.to);
-            if (!editing) {
-              atomicDeco.add(node.from, marks[0].to, hide);
-            }
-            deco.add(marks[0].to, marks[1].from, Decoration5.mark({
-              tagName: "a",
-              attributes: {
-                class: "cm-link",
-                href: url,
-                rel: "noreferrer",
-                target: "_blank"
-              }
-            }));
-            if (!editing) {
-              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration5.replace({
-                widget: new LinkButton(url, options.renderLinkButton)
-              }) : hide);
-            }
-          }
-        } else if (node.name === "HeaderMark") {
-          const parent = node.node.parent;
-          if (/^ATX/.test(parent.name) && !editingRange(state2, state2.doc.lineAt(node.from), focus)) {
-            const next = state2.doc.sliceString(node.to, node.to + 1);
-            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
-          }
-        } else if (node.name === "HorizontalRule") {
-          if (!editingRange(state2, node, focus)) {
-            deco.add(node.from, node.to, horizontalRule);
-          }
-        } else if (node.name === "TaskMarker") {
-          if (!editingRange(state2, node, focus)) {
-            const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
-            atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
-              class: "cm-task"
-            }));
-            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
-          }
-        } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state2, node.node.parent, focus)) {
-            atomicDeco.add(node.from, node.to, hide);
-          }
-        }
-      }
-    });
-  }
-  return {
-    deco: deco.finish(),
-    atomicDeco: atomicDeco.finish()
-  };
-};
-var forceUpdate = StateEffect4.define();
-var decorateMarkdown = (options = {}) => {
-  return [
-    ViewPlugin4.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
-      }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
-          this.clearUpdate();
-        } else if (update2.selectionSet) {
-          this.scheduleUpdate(update2.view);
-        }
-      }
-      // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
-      //  the cursor will float in space or be in the wrong position after the decoration is applied.
-      scheduleUpdate(view) {
-        this.clearUpdate();
-        this.pendingUpdate = setTimeout(() => {
-          view.dispatch({
-            effects: forceUpdate.of(null)
-          });
-        }, options.selectionChangeDelay);
-      }
-      clearUpdate() {
-        if (this.pendingUpdate) {
-          clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = void 0;
-        }
-      }
-      destroy() {
-        this.clearUpdate();
-      }
-    }, {
-      provide: (plugin) => [
-        EditorView12.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView12.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
-        EditorView12.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
-      ]
-    }),
-    formattingStyles
-  ];
-};
-var formattingStyles = EditorView12.baseTheme({
-  "& .cm-code": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
-  },
-  "& .cm-codeblock-line": {
-    paddingInline: "1rem !important"
-  },
-  "& .cm-codeblock-end": {
-    display: "inline-block",
-    width: "100%",
-    position: "relative",
-    "&::after": {
-      position: "absolute",
-      inset: 0,
-      content: '""'
-    }
-  },
-  "& .cm-codeblock-first": {
-    borderTopLeftRadius: ".5rem",
-    borderTopRightRadius: ".5rem"
-  },
-  "& .cm-codeblock-last": {
-    borderBottomLeftRadius: ".5rem",
-    borderBottomRightRadius: ".5rem"
-  },
-  "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
-    background: getToken("extend.semanticColors.input.light"),
-    mixBlendMode: "darken"
-  },
-  "&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line": {
-    background: getToken("extend.semanticColors.input.dark"),
-    mixBlendMode: "lighten"
-  },
-  "& .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"
-  }
-});
-
-// packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
-import { snippet } from "@codemirror/autocomplete";
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView13, keymap as keymap6 } from "@codemirror/view";
-import { useState, useMemo } from "react";
-var compareFormatting = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
-var Inline;
-(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: state2, dispatch }) => {
-  const { selection: { ranges }, doc } = state2;
-  const changes = [];
-  let prevBlock = -1;
-  for (const range of ranges) {
-    let sawBlock = false;
-    syntaxTree2(state2).iterate({
-      from: range.from,
-      to: range.to,
-      enter: (node) => {
-        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);
-        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)
-            });
-          }
-        }
-      }
-    });
-    let line;
-    if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state2.doc.lineAt(range.from)).text)) {
-      changes.push({
-        from: line.from,
-        to: line.to,
-        insert: "#".repeat(level) + " "
-      });
-    }
-  }
-  if (!changes.length) {
-    return false;
+  if (!changes.length) {
+    return false;
   }
   const changeSet = state2.changes(changes);
   dispatch(state2.update({
@@ -2924,7 +2413,7 @@ var setStyle = (type, enable) => ({ state: state2, dispatch }) => {
     let startCovered = false;
     let endCovered = false;
     let { from, to } = range;
-    syntaxTree2(state2).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3124,7 +2613,7 @@ var insertTable = (view) => {
   snippets.table(view, null, from, from);
 };
 var removeLinkInner = (from, to, changes, state2) => {
-  syntaxTree2(state2).iterate({
+  syntaxTree(state2).iterate({
     from,
     to,
     enter: (node) => {
@@ -3163,12 +2652,12 @@ var removeLink = ({ state: state2, dispatch }) => {
   }));
   return true;
 };
-var addLink = ({ state: state2, dispatch }) => {
+var addLink = ({ url, image: image2 } = {}) => ({ state: state2, dispatch }) => {
   const changes = state2.changeByRange((range) => {
     let { from, to } = range;
     const cutStyles = [];
     let okay = null;
-    syntaxTree2(state2).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3234,15 +2723,15 @@ var addLink = ({ state: state2, dispatch }) => {
     }
     changes2.push({
       from,
-      insert: "["
+      insert: image2 ? "![" : "["
     }, {
       from: to,
-      insert: "]()"
+      insert: `](${url ?? ""})`
     });
     const changeSet = state2.changes(changes2.concat(changesAfter));
     return {
       changes: changeSet,
-      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset)
+      range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0))
     };
   });
   if (changes.changes.empty) {
@@ -3261,7 +2750,7 @@ var addList = (type) => ({ state: state2, dispatch }) => {
   let parentColumn = null;
   const blocks = [];
   for (const { from, to } of state2.selection.ranges) {
-    syntaxTree2(state2).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3348,541 +2837,1097 @@ var addList = (type) => ({ state: state2, dispatch }) => {
         if (blocks[j].counter !== max + 1) {
           break;
         }
-        max++;
+        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 = state2.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, state2.doc);
+    }
+  }
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
+    changes: changeSet,
+    selection: state2.selection.map(changeSet, 1),
+    userEvent: "format.list.add",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var removeList = (type) => ({ state: state2, dispatch }) => {
+  let lastBlock = -1;
+  const changes = [];
+  const stack = [];
+  const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
+  for (const { from, to } of state2.selection.ranges) {
+    syntaxTree(state2).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 = state2.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 = state2.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, state2.doc);
+          }
+          return false;
+        }
+      }
+    });
+  }
+  if (!changes.length) {
+    return false;
+  }
+  dispatch(state2.update({
+    changes,
+    userEvent: "format.list.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var toggleList = (type) => (target) => {
+  const formatting = getFormatting(target.state);
+  const active = formatting.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: state2, dispatch }) => {
+  const lines = [];
+  let lastBlock = -1;
+  for (const { from, to } of state2.selection.ranges) {
+    const sawBlock = false;
+    syntaxTree(state2).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (Object.hasOwn(Textblocks, node.name) || node.name === "Table") {
+          if (node.from === lastBlock) {
+            return false;
+          }
+          lastBlock = node.from;
+          let line2 = state2.doc.lineAt(node.from);
+          if (line2.number > 1) {
+            const prevLine = state2.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);
+              }
+            }
+          }
+          for (; ; ) {
+            lines.push(line2);
+            if (line2.to >= node.to) {
+              break;
+            }
+            line2 = state2.doc.line(line2.number + 1);
+          }
+          if (!enable && line2.number < state2.doc.lines) {
+            const nextLine = state2.doc.line(line2.number + 1);
+            if (/^[>\s]*$/.test(nextLine.text)) {
+              lines.push(nextLine);
+            }
+          }
+          return false;
+        }
+      }
+    });
+    let line;
+    if (!sawBlock && enable && from === to && !/\S/.test((line = state2.doc.lineAt(from)).text)) {
+      lines.push(line);
+    }
+  }
+  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;
+  }
+  const changeSet = state2.changes(changes);
+  dispatch(state2.update({
+    changes: changeSet,
+    selection: state2.selection.map(changeSet, 1),
+    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: state2, dispatch } = target;
+  const { selection } = state2;
+  if (selection.ranges.length === 1 && selection.main.empty) {
+    const { head } = selection.main;
+    const line = state2.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;
+    syntaxTree(state2).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, state2.doc.lineAt(node.from).from);
+            blockTo = Math.max(blockTo, state2.doc.lineAt(node.to).to);
+          }
+        }
       }
-      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 = state2.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 (ranges.length && ranges[ranges.length - 1].to >= blockFrom - 1) {
+      ranges[ranges.length - 1].to = blockTo;
+    } else {
+      ranges.push({
+        from: blockFrom,
+        to: blockTo
       });
     }
   }
-  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, state2.doc);
-    }
+  if (!ranges.length) {
+    return false;
   }
-  const changeSet = state2.changes(changes);
+  const changes = ranges.map(({ from, to }) => {
+    const column = from - state2.doc.lineAt(from).from;
+    return [
+      {
+        from,
+        insert: "```\n" + " ".repeat(column)
+      },
+      {
+        from: to,
+        insert: "\n" + " ".repeat(column) + "```"
+      }
+    ];
+  });
   dispatch(state2.update({
-    changes: changeSet,
-    selection: state2.selection.map(changeSet, 1),
-    userEvent: "format.list.add",
+    changes,
+    userEvent: "format.codeblock.add",
     scrollIntoView: true
   }));
   return true;
 };
-var removeList = (type) => ({ state: state2, dispatch }) => {
-  let lastBlock = -1;
+var removeCodeblock = ({ state: state2, dispatch }) => {
   const changes = [];
-  const stack = [];
-  const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
+  let lastBlock = -1;
   for (const { from, to } of state2.selection.ranges) {
-    syntaxTree2(state2).iterate({
+    syntaxTree(state2).iterate({
       from,
       to,
       enter: (node) => {
+        if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
+          lastBlock = node.from;
+          const firstLine = state2.doc.lineAt(node.from);
+          if (node.name === "FencedCode") {
+            changes.push({
+              from: node.from,
+              to: firstLine.to + 1 + node.from - firstLine.from
+            });
+            const lastLine = state2.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 = state2.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(state2.update({
+    changes,
+    userEvent: "format.codeblock.remove",
+    scrollIntoView: true
+  }));
+  return true;
+};
+var toggleCodeblock = (target) => {
+  return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
+};
+var formattingKeymap = (options = {}) => {
+  return [
+    keymap6.of([
+      {
+        key: "meta-b",
+        run: toggleStrong
+      }
+    ])
+  ];
+};
+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 = (state2) => {
+  let blockType = null;
+  const inline = [
+    null,
+    null,
+    null,
+    null
+  ];
+  let link = 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(state2.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 } = state2;
+  for (const range of selection.ranges) {
+    if (range.empty && inline.some((v) => v === null)) {
+      const contextSize = Math.min(range.head, 6);
+      const contextBefore = state2.doc.sliceString(range.head - contextSize, range.head);
+      let contextAfter = state2.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;
+          }
+        }
+      }
+    }
+    syntaxTree(state2).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 === "Task" && stack[stack.length - 1] === "BulletList") {
-          stack[stack.length - 1] = "TaskList";
+        } else if (name === "Link") {
+          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";
+          }
+          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 (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
-          lastBlock = node.from;
-          let line = state2.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 = state2.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)
-              });
+        } 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 (node.to >= to) {
-            renumberListItems(node.node.nextSibling, 1, changes, state2.doc);
+          if (blockQuote === null) {
+            blockQuote = hasQuote;
+          } else if (!hasQuote && blockQuote) {
+            blockQuote = false;
           }
-          return 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;
         }
       }
     });
   }
-  if (!changes.length) {
-    return false;
-  }
-  dispatch(state2.update({
-    changes,
-    userEvent: "format.list.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var toggleList = (type) => (target) => {
-  const formatting = getFormatting(target.state);
-  const active = formatting.listStyle === (type === 1 ? "bullet" : type === 0 ? "ordered" : "task");
-  return (active ? removeList(type) : addList(type))(target);
+  const { from, to } = state2.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,
+    listStyle: listStyle || null
+  };
 };
-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
+var useFormattingState = () => {
+  const [state2, setState] = useState();
+  const observer = useMemo(() => EditorView11.updateListener.of((update2) => {
+    if (update2.docChanged || update2.selectionSet) {
+      setState((prevState) => {
+        const newState = getFormatting(update2.state);
+        if (!prevState || !formattingEquals(prevState, newState)) {
+          return newState;
+        }
+        return prevState;
       });
-      counter++;
     }
-  }
+  }), [
+    setState
+  ]);
+  return [
+    state2,
+    observer
+  ];
 };
-var setBlockquote = (enable) => ({ state: state2, dispatch }) => {
-  const lines = [];
-  let lastBlock = -1;
-  for (const { from, to } of state2.selection.ranges) {
-    const sawBlock = false;
-    syntaxTree2(state2).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name) || node.name === "Table") {
-          if (node.from === lastBlock) {
-            return false;
-          }
-          lastBlock = node.from;
-          let line2 = state2.doc.lineAt(node.from);
-          if (line2.number > 1) {
-            const prevLine = state2.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);
-              }
-            }
-          }
-          for (; ; ) {
-            lines.push(line2);
-            if (line2.to >= node.to) {
-              break;
-            }
-            line2 = state2.doc.line(line2.number + 1);
-          }
-          if (!enable && line2.number < state2.doc.lines) {
-            const nextLine = state2.doc.line(line2.number + 1);
-            if (/^[>\s]*$/.test(nextLine.text)) {
-              lines.push(nextLine);
-            }
-          }
-          return false;
-        }
-      }
-    });
-    let line;
-    if (!sawBlock && enable && from === to && !/\S/.test((line = state2.doc.lineAt(from)).text)) {
-      lines.push(line);
-    }
+
+// packages/ui/react-ui-editor/src/extensions/markdown/action.ts
+var processAction = (view, action) => {
+  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);
+      break;
+    case "list-ordered":
+    case "list-bullet":
+    case "list-task":
+      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);
+      break;
+    case "blockquote":
+      (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
+      break;
+    case "codeblock":
+      (action.data === false ? removeCodeblock : addCodeblock)(view);
+      break;
+    case "table":
+      insertTable(view);
+      break;
+    case "link":
+      (action.data === false ? removeLink : addLink())(view);
+      break;
+    case "image":
+      addLink({
+        url: action.data,
+        image: true
+      })(view);
+      break;
+    case "comment":
+      createComment(view);
+      break;
   }
-  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
-        });
-      }
+  requestAnimationFrame(() => {
+    if (!view.hasFocus) {
+      view.focus();
     }
-  }
-  if (!changes.length) {
-    return false;
-  }
-  const changeSet = state2.changes(changes);
-  dispatch(state2.update({
-    changes: changeSet,
-    selection: state2.selection.map(changeSet, 1),
-    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: state2, dispatch } = target;
-  const { selection } = state2;
-  if (selection.ranges.length === 1 && selection.main.empty) {
-    const { head } = selection.main;
-    const line = state2.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(state2).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, state2.doc.lineAt(node.from).from);
-            blockTo = Math.max(blockTo, state2.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
-      });
+
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+import { completionKeymap as completionKeymap2 } from "@codemirror/autocomplete";
+import { defaultKeymap as defaultKeymap2, indentWithTab as indentWithTab2 } from "@codemirror/commands";
+import { markdownLanguage as markdownLanguage3, markdown } from "@codemirror/lang-markdown";
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { lintKeymap } from "@codemirror/lint";
+import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
+import { keymap as keymap7 } from "@codemirror/view";
+
+// packages/ui/react-ui-editor/src/extensions/markdown/highlight.ts
+import { markdownLanguage as markdownLanguage2 } from "@codemirror/lang-markdown";
+import { HighlightStyle } from "@codemirror/language";
+import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
+};
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
     }
   }
-  if (!ranges.length) {
-    return false;
+});
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
   }
-  const changes = ranges.map(({ from, to }) => {
-    const column = from - state2.doc.lineAt(from).from;
-    return [
-      {
-        from,
-        insert: "```\n" + " ".repeat(column)
-      },
-      {
-        from: to,
-        insert: "\n" + " ".repeat(column) + "```"
-      }
-    ];
+];
+var markdownHighlightStyle = (readonly) => {
+  return HighlightStyle.define([
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid
+      ],
+      color: "inherit !important"
+    },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark
+      ],
+      class: mark
+    },
+    // Markdown marks.
+    {
+      tag: [
+        markdownTags.CodeMark,
+        markdownTags.HeaderMark,
+        markdownTags.QuoteMark,
+        markdownTags.EmphasisMark
+      ],
+      class: mark
+    },
+    // E.g., code block language (after ```).
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.labelName
+      ],
+      class: codeMark
+    },
+    {
+      tag: [
+        tags.monospace
+      ],
+      class: "font-mono"
+    },
+    // Headings.
+    {
+      tag: tags.heading1,
+      class: heading(1)
+    },
+    {
+      tag: tags.heading2,
+      class: heading(2)
+    },
+    {
+      tag: tags.heading3,
+      class: heading(3)
+    },
+    {
+      tag: tags.heading4,
+      class: heading(4)
+    },
+    {
+      tag: tags.heading5,
+      class: heading(5)
+    },
+    {
+      tag: tags.heading6,
+      class: heading(6)
+    },
+    // Emphasis.
+    {
+      tag: tags.emphasis,
+      class: italic
+    },
+    {
+      tag: tags.strong,
+      class: bold
+    },
+    {
+      tag: tags.strikethrough,
+      class: strikethrough
+    },
+    // Naked URLs.
+    {
+      tag: [
+        markdownTags.URL
+      ],
+      class: inlineUrl
+    },
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
+    // when a language is specified. In this case, the syntax highlighting extensions will colorize
+    // the code, but all other CSS properties will be inherited.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
+    {
+      tag: [
+        markdownTags.CodeText,
+        markdownTags.InlineCode
+      ],
+      class: code
+    },
+    {
+      tag: [
+        markdownTags.QuoteMark
+      ],
+      class: blockquote
+    },
+    {
+      tag: [
+        markdownTags.TableCell
+      ],
+      class: "font-mono"
+    }
+  ], {
+    scope: markdownLanguage2,
+    all: {
+      fontFamily: getToken("fontFamily.body", []).join(",")
+    }
   });
-  dispatch(state2.update({
-    changes,
-    userEvent: "format.codeblock.add",
-    scrollIntoView: true
-  }));
-  return true;
 };
-var removeCodeblock = ({ state: state2, dispatch }) => {
-  const changes = [];
-  let lastBlock = -1;
-  for (const { from, to } of state2.selection.ranges) {
-    syntaxTree2(state2).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Textblocks[node.name] === "codeblock" && lastBlock !== node.from) {
-          lastBlock = node.from;
-          const firstLine = state2.doc.lineAt(node.from);
-          if (node.name === "FencedCode") {
-            changes.push({
-              from: node.from,
-              to: firstLine.to + 1 + node.from - firstLine.from
-            });
-            const lastLine = state2.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 = state2.doc.line(line.number + 1)) {
-              changes.push({
-                from: line.from + column - 4,
-                to: line.from + column
-              });
-              if (line.to >= node.to) {
-                break;
-              }
+
+// packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
+var createMarkdownExtensions = ({ themeMode } = {}) => {
+  return [
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    // https://codemirror.net/5/mode/markdown/index.html (demo).
+    markdown({
+      // GRM by default (vs strict CommonMark):
+      // Table, TaskList, Strikethrough, and Autolink.
+      // NOTE: This extends the parser; it doesn't affect rendering.
+      // https://github.github.com/gfm
+      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+      base: markdownLanguage3,
+      // Languages for syntax highlighting fenced code blocks.
+      codeLanguages: languages,
+      // Parser extensions.
+      extensions: [
+        // GFM provided by default.
+        markdownTagsExtensions
+      ]
+    }),
+    // https://github.com/codemirror/theme-one-dark
+    themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+    // Custom styles.
+    syntaxHighlighting(markdownHighlightStyle()),
+    keymap7.of([
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      indentWithTab2,
+      // https://codemirror.net/docs/ref/#commands.defaultKeymap
+      ...defaultKeymap2,
+      ...completionKeymap2,
+      ...lintKeymap
+    ])
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var HorizontalRuleWidget = class extends WidgetType3 {
+  toDOM() {
+    const el = document.createElement("span");
+    el.className = "cm-hr";
+    return el;
+  }
+};
+var LinkButton = class extends WidgetType3 {
+  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 WidgetType3 {
+  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 ch-checkbox ch-focus-ring -mbs-0.5";
+    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;
   }
-  if (!changes.length) {
+  ignoreEvent() {
     return false;
   }
-  dispatch(state2.update({
-    changes,
-    userEvent: "format.codeblock.remove",
-    scrollIntoView: true
-  }));
-  return true;
-};
-var toggleCodeblock = (target) => {
-  return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
-};
-var formattingKeymap = (options = {}) => {
-  return [
-    keymap6.of([
-      {
-        key: "meta-b",
-        run: toggleStrong
-      }
-    ])
-  ];
 };
-var InlineMarker = {
-  Emphasis: 1,
-  StrongEmphasis: 0,
-  InlineCode: 3,
-  Strikethrough: 2
+var hide = Decoration5.replace({});
+var fencedCodeLine = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line")
+});
+var fencedCodeLineFirst = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+});
+var fencedCodeLineLast = Decoration5.line({
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
+});
+var horizontalRule = Decoration5.replace({
+  widget: new HorizontalRuleWidget()
+});
+var checkedTask = Decoration5.replace({
+  widget: new CheckboxWidget(true)
+});
+var uncheckedTask = Decoration5.replace({
+  widget: new CheckboxWidget(false)
+});
+var editingRange = (state2, range, focus) => {
+  const { readOnly, selection: { main: { head } } } = state2;
+  return focus && !readOnly && head >= range.from && head <= range.to;
 };
-var IgnoreInline = /* @__PURE__ */ new Set([
-  "Autolink",
+var MarksByParent = /* @__PURE__ */ new Set([
   "CodeMark",
-  "CodeText",
-  "Comment",
   "EmphasisMark",
-  "Hardbreak",
-  "HeaderMark",
-  "HTMLTag",
-  "LinkMark",
-  "ListMark",
-  "ProcessingInstruction",
-  "QuoteMark",
   "StrikethroughMark",
   "SubscriptMark",
-  "SuperscriptMark",
-  "TaskMarker"
+  "SuperscriptMark"
 ]);
-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 = (state2) => {
-  let blockType = null;
-  const inline = [
-    null,
-    null,
-    null,
-    null
-  ];
-  let link = 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(state2.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 } = state2;
-  for (const range of selection.ranges) {
-    if (range.empty && inline.some((v) => v === null)) {
-      const contextSize = Math.min(range.head, 6);
-      const contextBefore = state2.doc.sliceString(range.head - contextSize, range.head);
-      let contextAfter = state2.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;
-          }
-        }
-      }
-    }
+var buildDecorations = (view, options, focus) => {
+  const deco = new RangeSetBuilder2();
+  const atomicDeco = new RangeSetBuilder2();
+  const { state: state2 } = view;
+  for (const { from, to } of view.visibleRanges) {
     syntaxTree2(state2).iterate({
-      from: range.from,
-      to: range.to,
+      from,
+      to,
       enter: (node) => {
-        advanceInline(node.from);
-        const { name } = node;
-        if (name === "BulletList" || name === "OrderedList" || name === "Blockquote") {
-          stack.push(name);
-        } else if (name === "Link") {
-          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";
-          }
-          const blockCode = Textblocks[name];
-          if (blockType === null) {
-            blockType = blockCode;
-          } else if (blockType !== blockCode) {
-            blockType = false;
+        if (node.name === "FencedCode") {
+          const editing = editingRange(state2, node, focus);
+          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 && /^(\s>)*```$/.test(state2.doc.sliceString(block.from, block.to));
+            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
+            if (!editing && (first || last)) {
+              atomicDeco.add(block.from, block.to, hide);
+            }
           }
-          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
-              ]
-            };
+          return false;
+        } else if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const urlNode = node.node.getChild("URL");
+          const editing = editingRange(state2, node, focus);
+          if (urlNode && marks.length >= 2) {
+            const url = state2.sliceDoc(urlNode.from, urlNode.to);
+            if (!editing) {
+              atomicDeco.add(node.from, marks[0].to, hide);
+            }
+            deco.add(marks[0].to, marks[1].from, Decoration5.mark({
+              tagName: "a",
+              attributes: {
+                class: "cm-link",
+                href: url,
+                rel: "noreferrer",
+                target: "_blank"
+              }
+            }));
+            if (!editing) {
+              atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration5.replace({
+                widget: new LinkButton(url, options.renderLinkButton)
+              }) : hide);
+            }
           }
-        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
-          const index = InlineMarker[name];
-          if (range.empty && inline[index] === null) {
-            inline[index] = true;
+        } else if (node.name === "HeaderMark") {
+          const parent = node.node.parent;
+          if (/^ATX/.test(parent.name) && !editingRange(state2, state2.doc.lineAt(node.from), focus)) {
+            const next = state2.doc.sliceString(node.to, node.to + 1);
+            atomicDeco.add(node.from, node.to + (next === " " ? 1 : 0), hide);
           }
-          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";
-            }
+        } else if (node.name === "HorizontalRule") {
+          if (!editingRange(state2, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
           }
-          if (blockQuote === null) {
-            blockQuote = hasQuote;
-          } else if (!hasQuote && blockQuote) {
-            blockQuote = false;
+        } else if (node.name === "TaskMarker") {
+          if (!editingRange(state2, node, focus)) {
+            const checked = state2.doc.sliceString(node.from + 1, node.to - 1) === "x";
+            atomicDeco.add(node.from - 2, node.from - 1, Decoration5.mark({
+              class: "cm-task"
+            }));
+            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
           }
-          if (listStyle === null) {
-            listStyle = hasList;
-          } else if (listStyle !== hasList) {
-            listStyle = false;
+        } else if (MarksByParent.has(node.name)) {
+          if (!editingRange(state2, node.node.parent, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
-          currentBlock = null;
-        } else if (Object.hasOwn(InlineMarker, name) && currentBlock) {
-          currentBlock.active[InlineMarker[name]] = false;
         }
       }
     });
   }
-  const { from, to } = state2.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,
-    listStyle: listStyle || null
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
   };
 };
-var useFormattingState = () => {
-  const [state2, setState] = useState(null);
-  const observer = useMemo(() => EditorView13.updateListener.of((update2) => {
-    if (update2.docChanged || update2.selectionSet) {
-      const newState = getFormatting(update2.state);
-      if (!state2 || !compareFormatting(state2, newState)) {
-        setState(newState);
-      }
-    }
-  }), []);
+var forceUpdate = StateEffect4.define();
+var decorateMarkdown = (options = {}) => {
   return [
-    state2,
-    observer
+    ViewPlugin4.fromClass(class {
+      constructor(view) {
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
+        }
+      }
+      // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
+      //  the cursor will float in space or be in the wrong position after the decoration is applied.
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = setTimeout(() => {
+          view.dispatch({
+            effects: forceUpdate.of(null)
+          });
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
+        }
+      }
+      destroy() {
+        this.clearUpdate();
+      }
+    }, {
+      provide: (plugin) => [
+        EditorView12.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration5.none),
+        EditorView12.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration5.none)
+      ]
+    }),
+    formattingStyles
   ];
 };
+var formattingStyles = EditorView12.baseTheme({
+  "& .cm-code": {
+    fontFamily: getToken("fontFamily.mono", []).join(",")
+  },
+  "& .cm-codeblock-line": {
+    paddingInline: "1rem !important"
+  },
+  "& .cm-codeblock-end": {
+    display: "inline-block",
+    width: "100%",
+    position: "relative",
+    "&::after": {
+      position: "absolute",
+      inset: 0,
+      content: '""'
+    }
+  },
+  "& .cm-codeblock-first": {
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
+  },
+  "& .cm-codeblock-last": {
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
+  },
+  "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
+    background: getToken("extend.semanticColors.input.light"),
+    mixBlendMode: "darken"
+  },
+  "&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line": {
+    background: getToken("extend.semanticColors.input.dark"),
+    mixBlendMode: "lighten"
+  },
+  "& .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"
+  }
+});
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField5.define({
     create: (state2) => {
@@ -3909,7 +3954,7 @@ var image = (options = {}) => {
         add: buildDecorations2(from, to, tr.state)
       });
     },
-    provide: (field) => EditorView14.decorations.from(field)
+    provide: (field) => EditorView13.decorations.from(field)
   });
 };
 var preloaded = /* @__PURE__ */ new Set();
@@ -3959,6 +4004,8 @@ var ImageWidget = class extends WidgetType4 {
     return img;
   }
 };
+var imageUpload = (options = {}) => {
+};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
@@ -3997,12 +4044,12 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView15, WidgetType as WidgetType5 } from "@codemirror/view";
+import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField6.define({
     create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView15.decorations.from(field)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var update = (state2, options) => {
@@ -4096,8 +4143,8 @@ var TableWidget = class extends WidgetType5 {
 
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log8 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+import { log as log6 } from "@dxos/log";
+var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -4109,10 +4156,10 @@ var mention = ({ onSearch }) => {
     icons: false,
     override: [
       (context) => {
-        log8.info("completion context", {
+        log6.info("completion context", {
           context
         }, {
-          F: __dxlog_file10,
+          F: __dxlog_file8,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -4134,21 +4181,30 @@ var mention = ({ onSearch }) => {
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
 import { Facet as Facet6 } from "@codemirror/state";
-import { keymap as keymap7 } from "@codemirror/view";
+import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var focusEvent = "focus.container";
 var editorMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
 var EditorModes = {
   default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorMode.of({
+      type: "vscode"
+    }),
+    keymap8.of(vscodeKeymap)
+  ],
   vim: [
+    // https://github.com/replit/codemirror-vim
     vim(),
     editorMode.of({
       type: "vim",
       noTabster: true
     }),
-    keymap7.of([
+    keymap8.of([
       {
         key: "Alt-Escape",
         run: (view) => {
@@ -4163,18 +4219,18 @@ var EditorModes = {
 };
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
-import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView16, keymap as keymap8 } from "@codemirror/view";
+import { Transaction } from "@codemirror/state";
+import { EditorView as EditorView15, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
 var scrollAnnotation = "dxos.org/cm/scrolling";
 var keyPrefix = "dxos.org/react-ui-editor/state";
 var localStorageStateStoreAdapter = {
   setState: (id, state2) => {
     invariant4(id, void 0, {
-      F: __dxlog_file11,
+      F: __dxlog_file9,
       L: 35,
       S: void 0,
       A: [
@@ -4186,7 +4242,7 @@ var localStorageStateStoreAdapter = {
   },
   getState: (id) => {
     invariant4(id, void 0, {
-      F: __dxlog_file11,
+      F: __dxlog_file9,
       L: 39,
       S: void 0,
       A: [
@@ -4202,7 +4258,7 @@ var state = ({ getState, setState } = {}) => {
   const setStateDebounced = debounce2(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
-    EditorView16.updateListener.of(({ view, changes, transactions }) => {
+    EditorView15.updateListener.of(({ view, changes, transactions }) => {
       const id = view.state.facet(documentId2);
       if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
         return;
@@ -4228,18 +4284,18 @@ var state = ({ getState, setState } = {}) => {
         }
       }
     }),
-    getState && keymap8.of([
+    getState && keymap9.of([
       {
         key: "ctrl-r",
         run: (view) => {
           const state2 = getState(view.state.facet(documentId2));
           if (state2) {
             view.dispatch({
-              effects: EditorView16.scrollIntoView(state2.scrollTo.from, {
+              effects: EditorView15.scrollIntoView(state2.scrollTo.from, {
                 yMargin: 0
               }),
               selection: state2.selection,
-              annotations: Transaction2.userEvent.of(scrollAnnotation)
+              annotations: Transaction.userEvent.of(scrollAnnotation)
             });
           }
           return true;
@@ -4250,7 +4306,7 @@ var state = ({ getState, setState } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4260,7 +4316,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap9.of([
+    keymap10.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4307,9 +4363,9 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
 var instanceCount = 0;
-var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView17.scrollIntoView(0, {
+var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, className, autoFocus, scrollTo = EditorView16.scrollIntoView(0, {
   yMargin: 0
 }), moveToEndOfLine, debug, dataTestId }, forwardedRef) => {
   const [instanceId] = useState2(() => `text-editor-${++instanceCount}`);
@@ -4330,11 +4386,11 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     autoFocus
   ]);
   useEffect2(() => {
-    log9("updating", {
+    log7("create", {
       id,
       instanceId
     }, {
-      F: __dxlog_file12,
+      F: __dxlog_file10,
       L: 88,
       S: void 0,
       C: (f, a) => f(...a)
@@ -4345,16 +4401,16 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
       extensions: [
         id && documentId2.of(id),
         // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
-        EditorView17.exceptionSink.of((err) => {
-          log9.catch(err, void 0, {
-            F: __dxlog_file12,
+        EditorView16.exceptionSink.of((err) => {
+          log7.catch(err, void 0, {
+            F: __dxlog_file10,
             L: 101,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Focus.
-        EditorView17.updateListener.of((update2) => {
+        EditorView16.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
             if (transaction.isUserEvent(focusEvent)) {
               rootRef.current?.focus();
@@ -4364,7 +4420,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
         extensions
       ].filter(isNotFalsy4)
     });
-    const view2 = new EditorView17({
+    const view2 = new EditorView16({
       state: state2,
       parent: rootRef.current,
       scrollTo,
@@ -4390,8 +4446,16 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
     }
     setView(view2);
     return () => {
+      log7("destroy", {
+        id,
+        instanceId
+      }, {
+        F: __dxlog_file10,
+        L: 150,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
-      setView(null);
     };
   }, [
     doc,
@@ -4421,9 +4485,10 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-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 { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useRef as useRef2, useState as useState3 } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useDropzone } from "react-dropzone";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4457,7 +4522,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
 };
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
-var ToolbarButton = ({ Icon, children, ...props }) => {
+var ToolbarToggleButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
@@ -4470,6 +4535,19 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, 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",
   className: "grow"
@@ -4580,7 +4658,7 @@ var MarkdownStyles = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4614,7 +4692,7 @@ var MarkdownLists = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4649,7 +4727,7 @@ var MarkdownBlocks = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4661,78 +4739,73 @@ var MarkdownBlocks = () => {
   }, t(`${type} label`))));
 };
 var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
-var MarkdownExtended = () => {
+var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      "image/*": [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif"
+      ]
+    }
+  });
+  useEffect3(() => {
+    if (onUpload && acceptedFiles.length) {
+      requestAnimationFrame(async () => {
+        const f = acceptedFiles[0];
+        const file = new File([
+          f
+        ], f.name, {
+          type: f.type,
+          lastModified: f.lastModified
+        });
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({
+            type: "image",
+            data: url
+          });
+        }
+      });
+    }
+  }, [
+    acceptedFiles
+  ]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("input", getInputProps()), /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "image",
+    Icon: Image,
+    onClick: () => open()
+  }, t("image label")));
+};
+var MarkdownActions = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
-    }),
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(ChatText, {
-    className: iconStyles
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+    })
+  }, t("comment label")));
 };
 var Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions
 };
 
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
 var useActionHandler = (view) => {
-  return (action) => {
-    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);
-        break;
-      case "list-ordered":
-      case "list-bullet":
-      case "list-task":
-        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);
-        break;
-      case "blockquote":
-        (action.data === false ? removeBlockquote : action.data === true ? addBlockquote : toggleBlockquote)(view);
-        break;
-      case "codeblock":
-        (action.data === false ? removeCodeblock : addCodeblock)(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();
-      }
-    });
-  };
+  return (action) => view && processAction(view, action);
 };
 
 // packages/ui/react-ui-editor/src/hooks/useDocAccessor.ts
@@ -4750,40 +4823,48 @@ var useDocAccessor = (text) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
-import { EditorView as EditorView18 } from "@codemirror/view";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { log as log10 } from "@dxos/log";
+import { EditorView as EditorView17 } from "@codemirror/view";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { log as log8 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
-var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = (cb = () => ({}), deps = []) => {
   let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo3(cb, deps ?? []);
   const onUpdate = useRef3();
   const [view, setView] = useState4();
   const parentRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     let view2;
     if (parentRef.current) {
+      log8("create", {
+        id
+      }, {
+        F: __dxlog_file11,
+        L: 36,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       const state2 = EditorState3.create({
         doc,
         selection,
         extensions: [
           id && documentId2.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView18.exceptionSink.of((err) => {
-            log10.catch(err, void 0, {
-              F: __dxlog_file13,
-              L: 44,
+          EditorView17.exceptionSink.of((err) => {
+            log8.catch(err, void 0, {
+              F: __dxlog_file11,
+              L: 46,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView18.updateListener.of(() => {
+          EditorView17.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy5)
       });
-      view2 = new EditorView18({
+      view2 = new EditorView17({
         parent: parentRef.current,
         scrollTo,
         state: state2,
@@ -4799,10 +4880,18 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
       setView(view2);
     }
     return () => {
+      log8("destroy", {
+        id
+      }, {
+        F: __dxlog_file11,
+        L: 74,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       view2?.destroy();
     };
   }, deps);
-  useEffect3(() => {
+  useEffect4(() => {
     if (view) {
       if (!selection && !view.state.selection.main.anchor) {
         selection = EditorSelection2.single(view.state.doc.line(1).to);
@@ -4861,30 +4950,30 @@ export {
   callbackWrapper,
   command,
   comments,
-  compareFormatting,
   createBasicExtensions,
   createComment,
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
-  cursorLineMargin,
   decorateMarkdown,
   defaultOptions,
   defaultTheme,
-  dnd,
   documentId2 as documentId,
+  dropFile,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
   editorMode,
   editorWithToolbarLayout,
   focusComment,
   focusEvent,
+  formattingEquals,
   formattingKeymap,
   getFormatting,
   getToken,
   image,
+  imageUpload,
   insertTable,
-  keymap10 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,
@@ -4893,6 +4982,7 @@ export {
   markdownTags,
   markdownTagsExtensions,
   mention,
+  processAction,
   removeBlockquote,
   removeCodeblock,
   removeLink,