@dxos/react-ui-editor 0.6.7 → 0.6.8-main.3be982f

package/dist/lib/browser/index.mjs

@@ -15,6 +15,8 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "selection overlaps existing comment label": "Selection overlaps existing comment",
+        "select text to comment label": "Select text to comment",
         "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table",
@@ -38,10 +40,10 @@ import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
 import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
 import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
+import { getSize as getSize2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
@@ -149,8 +151,8 @@ var styles = EditorView.baseTheme({
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ activateOnTyping, onSearch }) => {
-  return [
+var autocomplete = ({ activateOnTyping, onSearch } = {}) => {
+  const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -163,21 +165,26 @@ var autocomplete = ({ activateOnTyping, onSearch }) => {
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
       tooltipClass: () => "shadow rounded"
-    }),
-    // TODO(burdon): Optional decoration via addToOptions
-    markdownLanguage.data.of({
-      autocomplete: (context) => {
-        const match = context.matchBefore(/\w*/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        return {
-          from: match.from,
-          options: onSearch(match.text.toLowerCase())
-        };
-      }
     })
   ];
+  if (onSearch) {
+    extentions.push(
+      // TODO(burdon): Optional decoration via addToOptions
+      markdownLanguage.data.of({
+        autocomplete: (context) => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || match.from === match.to && !context.explicit) {
+            return null;
+          }
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase())
+          };
+        }
+      })
+    );
+  }
+  return extentions;
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
@@ -1351,12 +1358,43 @@ import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView
 import sortBy from "lodash.sortby";
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "@dxos/async";
-import { log as log4 } from "@dxos/log";
+import { log as log5 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
+// packages/ui/react-ui-editor/src/extensions/util/error.ts
+import { log as log3 } from "@dxos/log";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util/error.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log3.catch(err, void 0, {
+        F: __dxlog_file5,
+        L: 12,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+
 // packages/ui/react-ui-editor/src/extensions/util/overlap.ts
 var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
 
+// packages/ui/react-ui-editor/src/extensions/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+var renderRoot = (node) => {
+  const el = document.createElement("div");
+  createRoot(el).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return el;
+};
+
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
@@ -1368,7 +1406,7 @@ var headings = {
   6: "mbs-4 mbe-2 font-medium text-inherit no-underline"
 };
 var heading = (level) => {
-  return headings[level];
+  return mx(headings[level], "dark:text-primary-400");
 };
 var light = "text-neutral-200 dark:text-neutral-800";
 var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
@@ -1378,7 +1416,10 @@ var strikethrough = "line-through";
 var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
 var codeMark = "font-mono text-primary-500";
 var inlineUrl = mx(code, "px-1");
-var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
+var blockquote = mx("pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 text-transparent");
+
+// packages/ui/react-ui-editor/src/styles/theme.ts
+import get2 from "lodash.get";
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
 import get from "lodash.get";
@@ -1386,20 +1427,258 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get(tokens, path, defaultValue);
 
-// packages/ui/react-ui-editor/src/styles/layout.ts
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorFillLayoutRoot = "bs-full relative";
-var editorFillLayoutEditor = "!absolute inset-0";
+// packages/ui/react-ui-editor/src/styles/theme.ts
+var defaultTheme = {
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
+  },
+  // Scroller.
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
+  ".cm-scroller": {
+    overflowY: "auto",
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
+    lineHeight: 1.5
+  },
+  // Content.
+  ".cm-content": {
+    padding: "unset",
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px"
+  },
+  "&light .cm-content": {
+    color: get2(tokens, "extend.semanticColors.base.fg.light", "black")
+  },
+  "&dark .cm-content": {
+    color: get2(tokens, "extend.semanticColors.base.fg.dark", "red")
+  },
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
+  },
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
+  },
+  "&light .cm-placeholder": {
+    color: get2(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+  },
+  "&dark .cm-placeholder": {
+    color: get2(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+  },
+  //
+  // line
+  //
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "transparent"
+  },
+  //
+  // gutter
+  //
+  ".cm-lineNumbers": {
+    minWidth: "36px"
+  },
+  //
+  // Selection
+  //
+  "&light .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.100")
+  },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.200")
+  },
+  "&dark .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.700")
+  },
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
+    background: get2(tokens, "extend.colors.primary.600")
+  },
+  //
+  // Search
+  //
+  "&light .cm-searchMatch": {
+    backgroundColor: get2(tokens, "extend.colors.yellow.100")
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: get2(tokens, "extend.colors.yellow.700")
+  },
+  //
+  // link
+  //
+  ".cm-link": {
+    color: get2(tokens, "extend.colors.primary.500"),
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem",
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  //
+  // tooltip
+  //
+  ".cm-tooltip": {},
+  "&light .cm-tooltip": {
+    background: `${get2(tokens, "extend.colors.neutral.100")} !important`
+  },
+  "&dark .cm-tooltip": {
+    background: `${get2(tokens, "extend.colors.neutral.900")} !important`
+  },
+  ".cm-tooltip-below": {},
+  //
+  // autocomplete
+  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+  //
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    maxHeight: "20em !important"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  // TODO(burdon): Can we add a class prefix to avoid adding !important?
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: get2(tokens, "extend.colors.primary.500")
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    border: get2(tokens, "extend.colors.neutral.500"),
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important"
+  },
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none !important",
+    opacity: 0.5
+  },
+  //
+  // table
+  //
+  ".cm-table *": {
+    fontFamily: `${get2(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
+  ".cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    textAlign: "left",
+    borderBottom: `1px solid ${get2(tokens, "extend.colors.primary.500")}`,
+    color: get2(tokens, "extend.colors.neutral.500")
+  },
+  ".cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  ".cm-image": {
+    display: "block",
+    height: "0"
+  },
+  ".cm-image.cm-loaded-image": {
+    height: "auto",
+    borderTop: "0.5rem solid transparent",
+    borderBottom: "0.5rem solid transparent"
+  },
+  //
+  // font size
+  // TODO(thure): This appears to be the best or only way to set selection caret heights,
+  //  but it's far more verbose than it needs to be.
+  //
+  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+  //
+  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+  //   return acc;
+  // }, {}),
+  // TODO(burdon): Override vars --cm-background.
+  //  https://www.npmjs.com/package/codemirror-theme-vars
+  /**
+  * Gutters
+  */
+  ".cm-gutters": {
+    background: "transparent"
+  },
+  /**
+  * Panels
+  * TODO(burdon): Needs styling attention (esp. dark mode).
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  ".cm-panel input[type=checkbox]": {
+    marginRight: "0.4rem !important"
+  },
+  "&light .cm-panel": {
+    background: get2(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-panel": {
+    background: get2(tokens, "extend.colors.neutral.850")
+  },
+  ".cm-button": {
+    margin: "4px",
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
+    backgroundImage: "none",
+    border: "none",
+    "&:active": {
+      backgroundImage: "none"
+    }
+  },
+  "&light .cm-button": {
+    background: get2(tokens, "extend.colors.neutral.100"),
+    "&:hover": {
+      background: get2(tokens, "extend.colors.neutral.200")
+    },
+    "&:active": {
+      background: get2(tokens, "extend.colors.neutral.300")
+    }
+  },
+  "&dark .cm-button": {
+    background: get2(tokens, "extend.colors.neutral.800"),
+    "&:hover": {
+      background: get2(tokens, "extend.colors.neutral.700")
+    },
+    "&:active": {
+      background: get2(tokens, "extend.colors.neutral.600")
+    }
+  }
+};
 
 // packages/ui/react-ui-editor/src/util.ts
-import { log as log3 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
+import { log as log4 } from "@dxos/log";
+var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
 var callbackWrapper = (fn) => (...args) => {
   try {
     return fn(...args);
   } catch (err) {
-    log3.catch(err, void 0, {
-      F: __dxlog_file5,
+    log4.catch(err, void 0, {
+      F: __dxlog_file6,
       L: 18,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1422,10 +1701,10 @@ var logChanges = (trs) => {
     return changes2;
   }).filter(Boolean);
   if (changes.length) {
-    log3.info("changes", {
+    log4.info("changes", {
       changes
     }, {
-      F: __dxlog_file5,
+      F: __dxlog_file6,
       L: 39,
       S: void 0,
       C: (f, a) => f(...a)
@@ -1434,7 +1713,7 @@ var logChanges = (trs) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
 var documentId = Facet4.define({
   combine: (values) => values[0]
 });
@@ -1539,8 +1818,8 @@ var commentsDecorations = EditorView7.decorations.compute([
   const decorations = sortBy(comments2 ?? [], (range) => range.range.from)?.flatMap((comment) => {
     const range = comment.range;
     if (!range) {
-      log4.warn("Invalid range:", range, {
-        F: __dxlog_file6,
+      log5.warn("Invalid range:", range, {
+        F: __dxlog_file7,
         L: 181,
         S: void 0,
         C: (f, a) => f(...a)
@@ -1951,9 +2230,9 @@ var useCommentClickListener = (onCommentClick) => {
 // packages/ui/react-ui-editor/src/extensions/debug.ts
 import { syntaxTree } from "@codemirror/language";
 import { StateField as StateField5 } from "@codemirror/state";
-var debugNodeLogger = (log8 = console.log) => {
+var debugNodeLogger = (log9 = console.log) => {
   const logTokens = (state2) => syntaxTree(state2).iterate({
-    enter: (node) => log8(node.type)
+    enter: (node) => log9(node.type)
   });
   return StateField5.define({
     create: (state2) => logTokens(state2),
@@ -1964,11 +2243,11 @@ var debugNodeLogger = (log8 = console.log) => {
 // 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_file8 = "/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_file8,
       L: 11,
       S: void 0,
       A: [
@@ -2025,271 +2304,10 @@ import { EditorState } from "@codemirror/state";
 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 log5 } from "@dxos/log";
+import { log as log6 } from "@dxos/log";
 import { hueTokens } from "@dxos/react-ui-theme";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/themes/default.ts
-import get2 from "lodash.get";
-var defaultTheme = {
-  //
-  // Main layout:
-  // https://codemirror.net/examples/styling
-  //
-  // <div class="cm-editor [cm-focused] [generated classes]">
-  //   <div class="cm-scroller">
-  //     <div class="cm-gutters">
-  //       <div class="cm-gutter [...]">
-  //         <div class="cm-gutterElement">...</div>
-  //       </div>
-  //     </div>
-  //     <div class="cm-content" role="textbox" contenteditable="true">
-  //       <div class="cm-line"></div>
-  //     </div>
-  //     <div class="cm-selectionLayer">
-  //       <div class="cm-selectionBackground"></div>
-  //     </div>
-  //     <div class="cm-cursorLayer">
-  //       <div class="cm-cursor"></div>
-  //     </div>
-  //   </div>
-  // </div>
-  //
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
-  ".cm-scroller": {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
-    overflowY: "auto",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
-    lineHeight: 1.5
-  },
-  ".cm-content": {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
-  },
-  "&light .cm-content": {
-    color: get2(tokens, "extend.semanticColors.base.fg.light", "black"),
-    caretColor: "black"
-  },
-  "&dark .cm-content": {
-    color: get2(tokens, "extend.semanticColors.base.fg.dark", "white"),
-    caretColor: "white"
-  },
-  //
-  // Cursor
-  //
-  "&light .cm-cursor, &light .cm-dropCursor": {
-    borderLeft: "2px solid black"
-  },
-  "&dark .cm-cursor, &dark .cm-dropCursor": {
-    borderLeft: "2px solid white"
-  },
-  "&light .cm-placeholder": {
-    color: get2(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: get2(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
-  },
-  //
-  // line
-  //
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "transparent"
-  },
-  //
-  // gutter
-  //
-  ".cm-gutterElement": {
-    width: "48px"
-  },
-  //
-  // Selection
-  //
-  "&light .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.100")
-  },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.200")
-  },
-  "&dark .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.700")
-  },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.600")
-  },
-  //
-  // Search
-  //
-  "&light .cm-searchMatch": {
-    backgroundColor: get2(tokens, "extend.colors.yellow.100")
-  },
-  "&dark .cm-searchMatch": {
-    backgroundColor: get2(tokens, "extend.colors.yellow.700")
-  },
-  //
-  // link
-  //
-  ".cm-link": {
-    color: get2(tokens, "extend.colors.primary.500"),
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  },
-  //
-  // tooltip
-  //
-  ".cm-tooltip": {
-    border: "none"
-  },
-  "&light .cm-tooltip": {
-    background: `${get2(tokens, "extend.colors.neutral.100")} !important`
-  },
-  "&dark .cm-tooltip": {
-    background: `${get2(tokens, "extend.colors.neutral.900")} !important`
-  },
-  ".cm-tooltip-below": {},
-  //
-  // autocomplete
-  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-  //
-  ".cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip-autocomplete > ul": {
-    maxHeight: "20em !important"
-  },
-  ".cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {},
-  // TODO(burdon): Can we add a class prefix to avoid adding !important?
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
-    paddingLeft: "4px !important",
-    borderBottom: "none !important",
-    color: get2(tokens, "extend.colors.primary.500")
-  },
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none !important",
-    opacity: 0.5
-  },
-  //
-  // table
-  //
-  ".cm-table *": {
-    fontFamily: `${get2(tokens, "fontFamily.mono", []).join(",")} !important`,
-    textDecoration: "none !important"
-  },
-  ".cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get2(tokens, "extend.colors.neutral.500")}`,
-    fontWeight: 100,
-    textAlign: "left",
-    color: get2(tokens, "extend.colors.neutral.500")
-  },
-  ".cm-table-cell": {
-    padding: "2px 16px 2px 0px"
-  },
-  //
-  // image
-  //
-  ".cm-image": {
-    display: "block",
-    height: "0"
-  },
-  ".cm-image.cm-loaded-image": {
-    height: "auto",
-    borderTop: "0.5rem solid transparent",
-    borderBottom: "0.5rem solid transparent"
-  },
-  //
-  // font size
-  // TODO(thure): This appears to be the best or only way to set selection caret heights,
-  //  but it's far more verbose than it needs to be.
-  //
-  // ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
-  //   const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
-  //
-  //   acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
-  //   acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
-  //   return acc;
-  // }, {}),
-  /**
-  * Panels
-  * TODO(burdon): Needs styling attention (esp. dark mode).
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  ".cm-panels": {},
-  ".cm-panel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
-  },
-  "&light .cm-panel": {
-    background: get2(tokens, "extend.colors.neutral.50")
-  },
-  "&dark .cm-panel": {
-    background: get2(tokens, "extend.colors.neutral.850")
-  },
-  ".cm-button": {
-    margin: "4px",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
-    backgroundImage: "none",
-    border: "none",
-    "&:active": {
-      backgroundImage: "none"
-    }
-  },
-  "&light .cm-button": {
-    background: get2(tokens, "extend.colors.neutral.100"),
-    "&:hover": {
-      background: get2(tokens, "extend.colors.neutral.200")
-    },
-    "&:active": {
-      background: get2(tokens, "extend.colors.neutral.300")
-    }
-  },
-  "&dark .cm-button": {
-    background: get2(tokens, "extend.colors.neutral.800"),
-    "&:hover": {
-      background: get2(tokens, "extend.colors.neutral.700")
-    },
-    "&:active": {
-      background: get2(tokens, "extend.colors.neutral.600")
-    }
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/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 preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2313,9 +2331,9 @@ var createBasicExtensions = (_props) => {
   return [
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView9.exceptionSink.of((err) => {
-      log5.catch(err, void 0, {
-        F: __dxlog_file8,
-        L: 92,
+      log6.catch(err, void 0, {
+        F: __dxlog_file9,
+        L: 91,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2393,6 +2411,28 @@ var createDataExtensions = ({ id, text, space, identity }) => {
   return extensions;
 };
 
+// packages/ui/react-ui-editor/src/extensions/folding.tsx
+import { codeFolding, foldGutter } from "@codemirror/language";
+import React2 from "react";
+import { ThemeProvider as ThemeProvider2 } from "@dxos/react-ui";
+import { defaultTx as defaultTx2, getSize, mx as mx2 } from "@dxos/react-ui-theme";
+var folding = (_props = {}) => [
+  codeFolding({
+    placeholderDOM: () => document.createElement("div")
+  }),
+  foldGutter({
+    markerDOM: (open) => {
+      return renderRoot(/* @__PURE__ */ React2.createElement(ThemeProvider2, {
+        tx: defaultTx2
+      }, /* @__PURE__ */ React2.createElement("svg", {
+        className: mx2(getSize(3), "m-3 cursor-pointer", open && "rotate-90")
+      }, /* @__PURE__ */ React2.createElement("use", {
+        href: "/icons.svg#ph--caret-right--regular"
+      }))));
+    }
+  })
+];
+
 // packages/ui/react-ui-editor/src/extensions/listener.ts
 import { EditorView as EditorView10 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
@@ -3004,7 +3044,6 @@ var addList = (type) => {
         renumberListItems(next.firstChild, last.counter + 1, changes, state2.doc);
       }
     }
-    "Oeswe";
     const changeSet = state2.changes(changes);
     dispatch(state2.update({
       changes: changeSet,
@@ -3512,9 +3551,7 @@ var useFormattingState = () => {
         return prevState;
       });
     }
-  }), [
-    setState
-  ]);
+  }), []);
   return [
     state2,
     observer
@@ -3761,102 +3798,102 @@ var markdownHighlightStyle = (readonly) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/linkPaste.ts
+// packages/ui/react-ui-editor/src/extensions/markdown/link-paste.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { Transaction } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var VALID_PROTOCOLS = [
-  "http:",
-  "https:",
-  "mailto:",
-  "tel:"
-];
-var createTextLink = (text, url) => `[${text}](${url})`;
-var createUrlLink = (url) => {
-  const displayUrl = formatUrlForDisplay(url);
-  return `[${displayUrl}](${url})`;
-};
-var formatUrlForDisplay = (url) => {
-  let formattedUrl = url.replace(/^https?:\/\//, "");
-  formattedUrl = formattedUrl.replace(/^www\./, "");
-  formattedUrl = formattedUrl.replace(/\.com\/$/, ".com");
-  return truncateQueryParams(formattedUrl);
-};
-var truncateQueryParams = (url, maxQueryLength = 15) => {
-  const [urlBase, queryString] = url.split("?");
-  if (!queryString) {
-    return urlBase;
-  }
-  if (queryString.length > maxQueryLength) {
-    const truncatedQuery = queryString.slice(0, maxQueryLength) + "...";
-    return `${urlBase}?${truncatedQuery}`;
-  } else {
-    return `${urlBase}?${queryString}`;
-  }
-};
-var isValidUrl = (str) => {
-  try {
-    const url = new URL(str);
-    return VALID_PROTOCOLS.includes(url.protocol);
-  } catch (e) {
-    return false;
-  }
-};
-var onNextUpdate = (callback) => setTimeout(callback, 0);
 var linkPastePlugin = ViewPlugin5.fromClass(class {
-  constructor(view) {
-    this.view = view;
-  }
   update(update2) {
     for (const tr of update2.transactions) {
       const event = tr.annotation(Transaction.userEvent);
       if (event === "input.paste") {
-        this.handleInputRead(this.view, tr);
-      }
-    }
-  }
-  handleInputRead(view, tr) {
-    const changes = tr.changes;
-    if (changes.empty) {
-      return;
-    }
-    changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-      const insertedText = view.state.sliceDoc(fromB, toB);
-      if (isValidUrl(insertedText) && !this.isInCodeBlock(view.state, fromB)) {
-        const replacedText = tr.startState.sliceDoc(fromA, toA);
-        onNextUpdate(() => {
-          view.dispatch(this.createLinkTransaction(view.state, fromA, toB, insertedText, replacedText));
+        const changes = tr.changes;
+        if (changes.empty) {
+          return;
+        }
+        changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+          const insertedUrl = getValidUrl(update2.view.state.sliceDoc(fromB, toB));
+          if (insertedUrl && isValidPosition(update2.view.state, fromB)) {
+            const replacedText = tr.startState.sliceDoc(fromA, toA);
+            setTimeout(() => {
+              update2.view.dispatch(update2.view.state.update({
+                changes: {
+                  from: fromA,
+                  to: toB,
+                  insert: createLink(insertedUrl, replacedText)
+                }
+              }));
+            });
+          }
         });
       }
-    });
-  }
-  /**
-   * Determines if a given position is within a code block.
-   * Traverses the syntax tree upwards from the position,
-   * checking for CodeBlock or FencedCode nodes.
-   */
-  isInCodeBlock(state2, pos) {
-    const tree = syntaxTree3(state2);
-    let node = tree.resolveInner(pos, -1);
-    while (node) {
-      if (node.name.includes("Code") || node.name.includes("FencedCode")) {
-        return true;
-      }
-      node = node.parent;
     }
-    return false;
-  }
-  createLinkTransaction(state2, from, to, url, text) {
-    const linkText = text.trim() ? createTextLink(text, url) : createUrlLink(url);
-    return state2.update({
-      changes: {
-        from,
-        to,
-        insert: linkText
-      }
-    });
   }
 });
+var createLink = (url, label) => {
+  const { host, pathname } = url;
+  const [, extension] = pathname.split(".");
+  const imageExtensions = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "svg",
+    "webp"
+  ];
+  if (imageExtensions.includes(extension)) {
+    return `![${label || host}](${url})`;
+  }
+  if (!label) {
+    label = createLinkLabel(url);
+  }
+  return `[${label}](${url})`;
+};
+var createLinkLabel = (url) => {
+  let { protocol, host, pathname } = url;
+  if (protocol === "http:" || protocol === "https:") {
+    protocol = "";
+  }
+  host = host.replace(/^www\./, "");
+  return [
+    protocol,
+    host
+  ].filter(Boolean).join("//") + (pathname !== "/" ? pathname : "");
+};
+var getValidUrl = (str) => {
+  const validProtocols = [
+    "http:",
+    "https:",
+    "mailto:",
+    "tel:"
+  ];
+  try {
+    const url = new URL(str);
+    if (!validProtocols.includes(url.protocol)) {
+      return void 0;
+    }
+    return url;
+  } catch (_err) {
+    return void 0;
+  }
+};
+var isValidPosition = (state2, pos) => {
+  const invalidPositions = /* @__PURE__ */ new Set([
+    "Link",
+    "LinkMark",
+    "Code",
+    "FencedCode"
+  ]);
+  const tree = syntaxTree3(state2);
+  let node = tree.resolveInner(pos, -1);
+  while (node) {
+    if (invalidPositions.has(node.name)) {
+      return false;
+    }
+    node = node.parent;
+  }
+  return true;
+};
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
 var createMarkdownExtensions = ({ themeMode } = {}) => {
@@ -3896,18 +3933,204 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect4 } from "@codemirror/state";
+import { EditorView as EditorView14, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
+import { invariant as invariant4 } from "@dxos/invariant";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree4 } 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 ViewPlugin6 } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var HorizontalRuleWidget = class extends WidgetType3 {
+import { StateField as StateField6 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
+var image = (_options = {}) => {
+  return StateField6.define({
+    create: (state2) => {
+      return Decoration5.set(buildDecorations(0, state2.doc.length, state2));
+    },
+    update: (value, tr) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state)
+      });
+    },
+    provide: (field) => EditorView12.decorations.from(field)
+  });
+};
+var preloaded = /* @__PURE__ */ new Set();
+var preloadImage = (url) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement("img");
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+var buildDecorations = (from, to, state2) => {
+  const decorations = [];
+  const cursor = state2.selection.main.head;
+  syntaxTree4(state2).iterate({
+    enter: (node) => {
+      if (node.name === "Image") {
+        const urlNode = node.node.getChild("URL");
+        if (urlNode) {
+          const hide2 = state2.readOnly || cursor < node.from || cursor > node.to;
+          const url = state2.sliceDoc(urlNode.from, urlNode.to);
+          preloadImage(url);
+          decorations.push(Decoration5.replace({
+            block: true,
+            widget: new ImageWidget(url)
+          }).range(hide2 ? node.from : node.to, node.to));
+        }
+      }
+    },
+    from,
+    to
+  });
+  return decorations;
+};
+var ImageWidget = class extends WidgetType3 {
+  constructor(_url) {
+    super();
+    this._url = _url;
+  }
+  eq(other) {
+    return this._url === other._url;
+  }
+  toDOM(view) {
+    const img = document.createElement("img");
+    img.setAttribute("src", this._url);
+    img.setAttribute("class", "cm-image");
+    img.onload = () => img.classList.add("cm-loaded-image");
+    return img;
+  }
+};
+var imageUpload = (options = {}) => {
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
+var table = (options = {}) => {
+  return StateField7.define({
+    create: (state2) => update(state2, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView13.decorations.from(field)
+  });
+};
+var update = (state2, _options) => {
+  const builder = new RangeSetBuilder2();
+  const cursor = state2.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
+    return table2.rows?.[table2.rows.length - 1];
+  };
+  syntaxTree5(state2).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        case "Table": {
+          tables.push({
+            from: node.from,
+            to: node.to
+          });
+          break;
+        }
+        case "TableHeader": {
+          getTable().header = [];
+          break;
+        }
+        case "TableRow": {
+          (getTable().rows ??= []).push([]);
+          break;
+        }
+        case "TableCell": {
+          const row = getRow();
+          if (row) {
+            row.push(state2.sliceDoc(node.from, node.to));
+          } else {
+            getTable().header?.push(state2.sliceDoc(node.from, node.to));
+          }
+          break;
+        }
+      }
+    }
+  });
+  tables.forEach((table2) => {
+    const replace = state2.readOnly || cursor < table2.from || cursor > table2.to;
+    if (replace) {
+      builder.add(table2.from, table2.to, Decoration6.replace({
+        block: true,
+        widget: new TableWidget(table2)
+      }));
+    } else {
+      builder.add(table2.from, table2.to, Decoration6.mark({
+        class: "cm-table"
+      }));
+    }
+  });
+  return builder.finish();
+};
+var TableWidget = class extends WidgetType4 {
+  constructor(_table) {
+    super();
+    this._table = _table;
+  }
+  eq(other) {
+    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
+  }
+  toDOM(view) {
+    const div = document.createElement("div");
+    const table2 = div.appendChild(document.createElement("table"));
+    const header = table2.appendChild(document.createElement("thead"));
+    const tr = header.appendChild(document.createElement("tr"));
+    this._table.header?.forEach((cell) => {
+      const th = document.createElement("th");
+      th.setAttribute("class", "cm-table-head");
+      tr.appendChild(th).textContent = cell;
+    });
+    const body = table2.appendChild(document.createElement("tbody"));
+    this._table.rows?.forEach((row) => {
+      const tr2 = body.appendChild(document.createElement("tr"));
+      row.forEach((cell) => {
+        const td = document.createElement("td");
+        td.setAttribute("class", "cm-table-cell");
+        tr2.appendChild(td).textContent = cell;
+      });
+    });
+    return div;
+  }
+  ignoreEvent(e) {
+    return !/^mouse/.test(e.type);
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var HorizontalRuleWidget = class extends WidgetType5 {
   toDOM() {
     const el = document.createElement("span");
     el.className = "cm-hr";
     return el;
   }
 };
-var LinkButton = class extends WidgetType3 {
+var LinkButton = class extends WidgetType5 {
   constructor(url, render) {
     super();
     this.url = url;
@@ -3922,7 +4145,7 @@ var LinkButton = class extends WidgetType3 {
     return el;
   }
 };
-var CheckboxWidget = class extends WidgetType3 {
+var CheckboxWidget = class extends WidgetType5 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -3932,14 +4155,14 @@ var CheckboxWidget = class extends WidgetType3 {
   }
   toDOM(view) {
     const input = document.createElement("input");
-    input.className = "cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5";
+    input.className = "cm-task-checkbox ch-checkbox ch-focus-ring";
     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 pos = view.posAtDOM(span);
         const text = view.state.sliceDoc(pos, pos + 3);
         if (text === (this._checked ? "[x]" : "[ ]")) {
           view.dispatch({
@@ -3953,157 +4176,302 @@ var CheckboxWidget = class extends WidgetType3 {
         }
       };
     }
-    return input;
+    const span = document.createElement("span");
+    span.className = "cm-task";
+    span.appendChild(input);
+    return span;
   }
   ignoreEvent() {
     return false;
   }
 };
-var hide = Decoration5.replace({});
-var fencedCodeLine = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line")
+var TextWidget = class extends WidgetType5 {
+  constructor(text, className) {
+    super();
+    this.text = text;
+    this.className = className;
+  }
+  toDOM() {
+    const el = document.createElement("span");
+    if (this.className) {
+      el.className = this.className;
+    }
+    el.innerText = this.text;
+    return el;
+  }
+};
+var hide = Decoration7.replace({});
+var fencedCodeLine = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line")
 });
-var fencedCodeLineFirst = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
+var fencedCodeLineFirst = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
-var fencedCodeLineLast = Decoration5.line({
-  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
+var fencedCodeLineLast = Decoration7.line({
+  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
 var commentBlockLineLast = fencedCodeLineLast;
-var horizontalRule = Decoration5.replace({
+var horizontalRule = Decoration7.replace({
   widget: new HorizontalRuleWidget()
 });
-var checkedTask = Decoration5.replace({
+var checkedTask = Decoration7.replace({
   widget: new CheckboxWidget(true)
 });
-var uncheckedTask = Decoration5.replace({
+var uncheckedTask = Decoration7.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([
+var autoHideTags = /* @__PURE__ */ new Set([
   "CodeMark",
+  "CodeInfo",
   "EmphasisMark",
   "StrikethroughMark",
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var buildDecorations = (view, options, focus) => {
-  const deco = new RangeSetBuilder2();
-  const atomicDeco = new RangeSetBuilder2();
+var bulletListIndentationWidth = 24;
+var orderedListIndentationWidth = 32;
+var buildDecorations2 = (view, options, focus) => {
+  const deco = new RangeSetBuilder3();
+  const atomicDeco = new RangeSetBuilder3();
   const { state: state2 } = view;
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree4(state2).iterate({
-      from,
-      to,
-      enter: (node) => {
-        switch (node.name) {
-          case "CommentBlock": {
-            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 ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine);
-              if (!editing && (first || last)) {
-                atomicDeco.add(block.from, block.to, hide);
+  const headerLevels = [];
+  const getHeaderLevels = (node, level) => {
+    invariant4(level > 0, void 0, {
+      F: __dxlog_file10,
+      L: 157,
+      S: void 0,
+      A: [
+        "level > 0",
+        ""
+      ]
+    });
+    if (level > headerLevels.length) {
+      const len = headerLevels.length;
+      headerLevels.length = level;
+      headerLevels.fill(null, len);
+      headerLevels[level - 1] = {
+        type: node.name,
+        from: node.from,
+        to: node.to,
+        level,
+        number: 0
+      };
+    } else {
+      headerLevels.splice(level);
+    }
+    return headerLevels.slice(0, level);
+  };
+  const listLevels = [];
+  const enterList = (node) => {
+    listLevels.push({
+      type: node.name,
+      from: node.from,
+      to: node.to,
+      level: listLevels.length,
+      number: 0
+    });
+  };
+  const leaveList = () => {
+    listLevels.pop();
+  };
+  const getCurrentList = () => {
+    invariant4(listLevels.length, void 0, {
+      F: __dxlog_file10,
+      L: 179,
+      S: void 0,
+      A: [
+        "listLevels.length",
+        ""
+      ]
+    });
+    return listLevels[listLevels.length - 1];
+  };
+  const enterNode = (node) => {
+    switch (node.name) {
+      case "ATXHeading1":
+      case "ATXHeading2":
+      case "ATXHeading3":
+      case "ATXHeading4":
+      case "ATXHeading5":
+      case "ATXHeading6": {
+        const level = parseInt(node.name["ATXHeading".length]);
+        const headers = getHeaderLevels(node, level);
+        if (options.numberedHeadings?.from !== void 0) {
+          headers[level - 1].number++;
+        }
+        const editing = editingRange(state2, node, focus);
+        if (!editing) {
+          const mark2 = node.node.firstChild;
+          if (mark2?.name === "HeaderMark") {
+            let text = view.state.sliceDoc(mark2.to, node.to).trim();
+            const { from, to } = options.numberedHeadings ?? {};
+            if (from && (!to || level <= to)) {
+              const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".");
+              if (num.length) {
+                text = `${num} ${text}`;
               }
             }
-            break;
+            deco.add(node.from, node.to, Decoration7.replace({
+              widget: new TextWidget(text, heading(level))
+            }));
           }
-          case "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;
+        }
+        return false;
+      }
+      case "BulletList":
+      case "OrderedList": {
+        enterList(node);
+        break;
+      }
+      case "ListItem": {
+        const list = getCurrentList();
+        const width = list.type === "OrderedList" ? orderedListIndentationWidth : bulletListIndentationWidth;
+        const offset = ((list.level ?? 0) + 1) * width;
+        const start = state2.doc.lineAt(node.from);
+        deco.add(start.from, start.from, Decoration7.line({
+          class: "cm-list-item",
+          attributes: {
+            // Subtract 0.25em to account for the space CM adds to Paragraph nodes following the ListItem.
+            // Note: This makes the cursor appear to be left of the margin.
+            style: `padding-left: ${offset}px; text-indent: calc(-${width}px - 0.25em);`
           }
-          case "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);
-              }
-            }
-            break;
+        }));
+        const line = state2.doc.sliceString(start.from, node.to);
+        const whitespace = line.match(/^ */)?.[0].length ?? 0;
+        if (whitespace) {
+          atomicDeco.add(start.from, start.from + whitespace, hide);
+        }
+        break;
+      }
+      case "ListMark": {
+        const task = tree.resolve(node.to + 1, 1).name === "TaskMarker";
+        if (task) {
+          atomicDeco.add(node.from, node.to, hide);
+          break;
+        }
+        const list = getCurrentList();
+        const label = list.type === "OrderedList" ? `${++list.number}.` : "-";
+        atomicDeco.add(node.from, node.to, Decoration7.replace({
+          widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
+        }));
+        break;
+      }
+      case "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, Decoration7.mark({
+            class: "cm-task-checkbox"
+          }));
+          atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+        }
+        break;
+      }
+      case "CommentBlock": {
+        const editing = editingRange(state2, node, focus);
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
           }
-          case "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);
-            }
+          if (block.from > node.to) {
             break;
           }
-          case "HorizontalRule": {
-            if (!editingRange(state2, node, focus)) {
-              deco.add(node.from, node.to, horizontalRule);
-            }
-            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 ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine);
+          if (!editing && (first || last)) {
+            atomicDeco.add(block.from, block.to, hide);
           }
-          case "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);
-            }
-            break;
+        }
+        break;
+      }
+      case "FencedCode": {
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
           }
-          case "ListItem": {
-            const start = state2.doc.lineAt(node.from);
-            deco.add(start.from, start.from, Decoration5.line({
-              class: "cm-list-item"
-            }));
+          if (block.from > node.to) {
             break;
           }
-          default: {
-            if (MarksByParent.has(node.name)) {
-              if (!editingRange(state2, node.node.parent, focus)) {
-                atomicDeco.add(node.from, node.to, hide);
-              }
+          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);
+          const editing = editingRange(state2, node, focus);
+          if (!editing && (first || last)) {
+            atomicDeco.add(block.from, block.to, hide);
+          }
+        }
+        return false;
+      }
+      case "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, Decoration7.mark({
+            tagName: "a",
+            attributes: {
+              class: "cm-link",
+              href: url,
+              rel: "noreferrer",
+              target: "_blank"
             }
+          }));
+          if (!editing) {
+            atomicDeco.add(marks[1].from, node.to, options.renderLinkButton ? Decoration7.replace({
+              widget: new LinkButton(url, options.renderLinkButton)
+            }) : hide);
+          }
+        }
+        break;
+      }
+      case "HorizontalRule": {
+        if (!editingRange(state2, node, focus)) {
+          deco.add(node.from, node.to, horizontalRule);
+        }
+        break;
+      }
+      default: {
+        if (autoHideTags.has(node.name)) {
+          if (!editingRange(state2, node.node.parent, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
         }
       }
+    }
+  };
+  const leaveNode = (node) => {
+    switch (node.name) {
+      case "BulletList":
+      case "OrderedList": {
+        leaveList();
+        break;
+      }
+    }
+  };
+  const tree = syntaxTree6(state2);
+  if (options.numberedHeadings?.from === void 0) {
+    for (const { from, to } of view.visibleRanges) {
+      tree.iterate({
+        from,
+        to,
+        enter: wrapWithCatch(enterNode),
+        leave: wrapWithCatch(leaveNode)
+      });
+    }
+  } else {
+    tree.iterate({
+      enter: wrapWithCatch(enterNode),
+      leave: wrapWithCatch(leaveNode)
     });
   }
   return {
@@ -4116,11 +4484,11 @@ var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin6.fromClass(class {
       constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(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));
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
           this.clearUpdate();
         } else if (update2.selectionSet) {
           this.scheduleUpdate(update2.view);
@@ -4145,15 +4513,17 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       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)
+        EditorView14.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView14.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView14.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
       ]
     }),
-    formattingStyles
+    formattingStyles,
+    image(),
+    table()
   ];
 };
-var formattingStyles = EditorView12.baseTheme({
+var formattingStyles = EditorView14.baseTheme({
   "& .cm-code": {
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
@@ -4171,12 +4541,12 @@ var formattingStyles = EditorView12.baseTheme({
     }
   },
   "& .cm-codeblock-first": {
-    borderTopLeftRadius: ".5rem",
-    borderTopRightRadius: ".5rem"
+    borderTopLeftRadius: ".25rem",
+    borderTopRightRadius: ".25rem"
   },
   "& .cm-codeblock-last": {
-    borderBottomLeftRadius: ".5rem",
-    borderBottomRightRadius: ".5rem"
+    borderBottomLeftRadius: ".25rem",
+    borderBottomRightRadius: ".25rem"
   },
   "&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line": {
     background: getToken("extend.semanticColors.input.light"),
@@ -4191,106 +4561,40 @@ var formattingStyles = EditorView12.baseTheme({
     width: "100%",
     height: "0",
     verticalAlign: "middle",
-    borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
+    borderTop: `1px solid ${getToken("extend.colors.primary.500")}`,
+    opacity: 0.5
   },
   "& .cm-task": {
+    display: "inline-block",
+    width: `calc(${bulletListIndentationWidth}px - 0.25em)`,
     color: getToken("extend.colors.blue.500")
   },
   "& .cm-task-checkbox": {
-    marginLeft: "4px",
-    marginRight: "4px"
+    display: "grid",
+    margin: "0",
+    transform: "translateY(2px)"
+  },
+  "& .cm-list-item": {},
+  "& .cm-list-mark": {
+    display: "inline-block",
+    textAlign: "right",
+    color: getToken("extend.colors.neutral.500"),
+    fontVariant: "tabular-nums"
+  },
+  "& .cm-list-mark-bullet": {
+    width: `${bulletListIndentationWidth}px`
+  },
+  "& .cm-list-mark-ordered": {
+    width: `${orderedListIndentationWidth}px`
   }
 });
 
-// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { StateField as StateField6 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField6.define({
-    create: (state2) => {
-      return Decoration6.set(buildDecorations2(0, state2.doc.length, state2));
-    },
-    update: (value, tr) => {
-      if (!tr.docChanged && !tr.selection) {
-        return value;
-      }
-      const cursor = tr.state.selection.main.head;
-      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-      let from = Math.min(cursor, oldCursor);
-      let to = Math.max(cursor, oldCursor);
-      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        from = Math.min(from, fromB);
-        to = Math.max(to, toB);
-      });
-      from = tr.state.doc.lineAt(from).from;
-      to = tr.state.doc.lineAt(to).to;
-      return value.map(tr.changes).update({
-        filterFrom: from,
-        filterTo: to,
-        filter: () => false,
-        add: buildDecorations2(from, to, tr.state)
-      });
-    },
-    provide: (field) => EditorView13.decorations.from(field)
-  });
-};
-var preloaded = /* @__PURE__ */ new Set();
-var preloadImage = (url) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement("img");
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-var buildDecorations2 = (from, to, state2) => {
-  const decorations = [];
-  const cursor = state2.selection.main.head;
-  syntaxTree5(state2).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const hide2 = state2.readOnly || cursor < node.from || cursor > node.to;
-          const url = state2.sliceDoc(urlNode.from, urlNode.to);
-          preloadImage(url);
-          decorations.push(Decoration6.replace({
-            block: true,
-            widget: new ImageWidget(url)
-          }).range(hide2 ? node.from : node.to, node.to));
-        }
-      }
-    },
-    from,
-    to
-  });
-  return decorations;
-};
-var ImageWidget = class extends WidgetType4 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other._url;
-  }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    img.onload = () => img.classList.add("cm-loaded-image");
-    return img;
-  }
-};
-var imageUpload = (options = {}) => {
-};
-
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
-  const syntax = syntaxTree6(view.state).resolveInner(pos, side);
+  const syntax = syntaxTree7(view.state).resolveInner(pos, side);
   let link = null;
   for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
     link = node.name === "Link" ? node : null;
@@ -4319,112 +4623,10 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
   };
 });
 
-// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
-import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
-var table = (options = {}) => {
-  return StateField7.define({
-    create: (state2) => update(state2, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView14.decorations.from(field)
-  });
-};
-var update = (state2, options) => {
-  const builder = new RangeSetBuilder3();
-  const cursor = state2.selection.main.head;
-  const tables = [];
-  const getTable = () => tables[tables.length - 1];
-  const getRow = () => {
-    const table2 = getTable();
-    return table2.rows?.[table2.rows.length - 1];
-  };
-  syntaxTree7(state2).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        case "Table": {
-          tables.push({
-            from: node.from,
-            to: node.to
-          });
-          break;
-        }
-        case "TableHeader": {
-          getTable().header = [];
-          break;
-        }
-        case "TableRow": {
-          (getTable().rows ??= []).push([]);
-          break;
-        }
-        case "TableCell": {
-          const row = getRow();
-          if (row) {
-            row.push(state2.sliceDoc(node.from, node.to));
-          } else {
-            getTable().header?.push(state2.sliceDoc(node.from, node.to));
-          }
-          break;
-        }
-      }
-    }
-  });
-  tables.forEach((table2) => {
-    const replace = state2.readOnly || cursor < table2.from || cursor > table2.to;
-    if (replace) {
-      builder.add(table2.from, table2.to, Decoration7.replace({
-        block: true,
-        widget: new TableWidget(table2)
-      }));
-    } else {
-      builder.add(table2.from, table2.to, Decoration7.mark({
-        class: "cm-table"
-      }));
-    }
-  });
-  return builder.finish();
-};
-var TableWidget = class extends WidgetType5 {
-  constructor(_table) {
-    super();
-    this._table = _table;
-  }
-  eq(other) {
-    return this._table.header?.join() === other._table.header?.join() && this._table.rows?.join() === other._table.rows?.join();
-  }
-  toDOM(view) {
-    const table2 = document.createElement("table");
-    {
-      const header = table2.appendChild(document.createElement("thead"));
-      const tr = header.appendChild(document.createElement("tr"));
-      this._table.header?.forEach((cell) => {
-        const th = document.createElement("th");
-        th.setAttribute("class", "cm-table-head");
-        tr.appendChild(th).textContent = cell;
-      });
-    }
-    {
-      const body = table2.appendChild(document.createElement("tbody"));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement("tr"));
-        row.forEach((cell) => {
-          const td = document.createElement("td");
-          td.setAttribute("class", "cm-table-cell");
-          tr.appendChild(td).textContent = cell;
-        });
-      });
-    }
-    return table2;
-  }
-  ignoreEvent(e) {
-    return !/^mouse/.test(e.type);
-  }
-};
-
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+import { log as log7 } from "@dxos/log";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -4436,10 +4638,10 @@ var mention = ({ onSearch }) => {
     icons: false,
     override: [
       (context) => {
-        log6.info("completion context", {
+        log7.info("completion context", {
           context
         }, {
-          F: __dxlog_file9,
+          F: __dxlog_file11,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -4512,15 +4714,15 @@ var InputModeExtensions = {
 import { Transaction as Transaction2 } 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 { invariant as invariant5 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
+var __dxlog_file12 = "/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_file10,
+    invariant5(id, void 0, {
+      F: __dxlog_file12,
       L: 35,
       S: void 0,
       A: [
@@ -4531,8 +4733,8 @@ var localStorageStateStoreAdapter = {
     localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
   },
   getState: (id) => {
-    invariant4(id, void 0, {
-      F: __dxlog_file10,
+    invariant5(id, void 0, {
+      F: __dxlog_file12,
       L: 39,
       S: void 0,
       A: [
@@ -4653,26 +4855,26 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-var iconStyles = getSize(5);
+var iconStyles = getSize2(5);
 var buttonStyles = "min-bs-0 p-2";
 var tooltipProps = {
   side: "top",
   classNames: "z-10"
 };
-var ToolbarSeparator = () => /* @__PURE__ */ React.createElement("div", {
+var ToolbarSeparator = () => /* @__PURE__ */ React3.createElement("div", {
   role: "separator",
   className: "grow"
 });
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
 var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
-  return /* @__PURE__ */ React.createElement(ToolbarContextProvider, {
+  return /* @__PURE__ */ React3.createElement(ToolbarContextProvider, {
     onAction,
     state: state2
-  }, /* @__PURE__ */ React.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React3.createElement(DensityProvider, {
     density: "fine"
-  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Root, {
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
     classNames: [
       "p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden",
       classNames
@@ -4683,30 +4885,30 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
   }, children))));
 };
 var ToolbarToggleButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroupItem, {
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon, {
     className: iconStyles
-  }), /* @__PURE__ */ React.createElement("span", {
+  }), /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
 };
 var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon, {
     className: iconStyles
-  }), /* @__PURE__ */ React.createElement("span", {
+  }), /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
 };
 var ViewModeIcons = {
   preview: PencilSimple,
@@ -4720,7 +4922,7 @@ var MarkdownView = ({ mode }) => {
   const suppressNextTooltip = useRef(false);
   const [tooltipOpen, setTooltipOpen] = useState3(false);
   const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
       if (nextOpen && suppressNextTooltip.current) {
@@ -4730,7 +4932,7 @@ var MarkdownView = ({ mode }) => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -4738,39 +4940,39 @@ var MarkdownView = ({ mode }) => {
       }
       return setSelectOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React3.createElement(Button, {
     variant: "ghost",
     classNames: buttonStyles
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, t("mode label")), /* @__PURE__ */ React.createElement(ModeIcon, {
+  }, t("mode label")), /* @__PURE__ */ React3.createElement(ModeIcon, {
     className: iconStyles
-  }), /* @__PURE__ */ React.createElement(CaretDown, null))))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React3.createElement(CaretDown, null))))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
     classNames: "is-min md:is-min",
     onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
     const Icon = ViewModeIcons[value];
-    return /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
+    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
       key: value,
       checked: value === mode,
       onClick: () => onAction?.({
         type: "view-mode",
         data: value
       })
-    }, /* @__PURE__ */ React.createElement(Icon, {
+    }, /* @__PURE__ */ React3.createElement(Icon, {
       className: iconStyles
-    }), /* @__PURE__ */ React.createElement("span", {
+    }), /* @__PURE__ */ React3.createElement("span", {
       className: "whitespace-nowrap grow"
-    }, t(`${value} mode label`)), /* @__PURE__ */ React.createElement(Check, {
+    }, t(`${value} mode label`)), /* @__PURE__ */ React3.createElement(Check, {
       className: value === mode ? "visible" : "invisible"
     }));
-  })), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
 };
 var HeadingIcons = {
   "0": Paragraph,
@@ -4791,7 +4993,7 @@ var MarkdownHeading = () => {
   const suppressNextTooltip = useRef(false);
   const [tooltipOpen, setTooltipOpen] = useState3(false);
   const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
     open: tooltipOpen,
     onOpenChange: (nextOpen) => {
       if (nextOpen && suppressNextTooltip.current) {
@@ -4801,7 +5003,7 @@ var MarkdownHeading = () => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -4809,75 +5011,75 @@ var MarkdownHeading = () => {
       }
       return setSelectOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React3.createElement(Button, {
     variant: "ghost",
     classNames: buttonStyles,
     disabled: value === null
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, t("heading label")), /* @__PURE__ */ React.createElement(HeadingIcon, {
+  }, t("heading label")), /* @__PURE__ */ React3.createElement(HeadingIcon, {
     className: iconStyles
-  }), /* @__PURE__ */ React.createElement(CaretDown, null))))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, {
+  }), /* @__PURE__ */ React3.createElement(CaretDown, null))))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
     classNames: "is-min md:is-min",
     onCloseAutoFocus: (e) => e.preventDefault()
-  }, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
     const Icon = HeadingIcons[level];
-    return /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
+    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
       key: level,
       checked: value === level,
       onClick: () => onAction?.({
         type: "heading",
         data: level
       })
-    }, /* @__PURE__ */ React.createElement("span", {
+    }, /* @__PURE__ */ React3.createElement("span", {
       className: "sr-only"
     }, t("heading level label", {
       count: parseInt(level)
-    })), /* @__PURE__ */ React.createElement(Icon, {
+    })), /* @__PURE__ */ React3.createElement(Icon, {
       className: iconStyles
-    }), /* @__PURE__ */ React.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React.createElement(Check, null)));
-  })), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+    }), /* @__PURE__ */ React3.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React3.createElement(Check, null)));
+  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
 };
 var markdownStyles = [
   {
     type: "strong",
     Icon: TextB,
-    getState: (state2) => state2.strong
+    getState: (state2) => !!state2?.strong
   },
   {
     type: "emphasis",
     Icon: TextItalic,
-    getState: (state2) => state2.emphasis
+    getState: (state2) => !!state2?.emphasis
   },
   {
     type: "strikethrough",
     Icon: TextStrikethrough,
-    getState: (state2) => state2.strikethrough
+    getState: (state2) => !!state2?.strikethrough
   },
   {
     type: "code",
     Icon: Code,
-    getState: (state2) => state2.code
+    getState: (state2) => !!state2?.code
   },
   {
     type: "link",
     Icon: Link,
-    getState: (state2) => state2.link
+    getState: (state2) => !!state2?.link
   }
 ];
 var MarkdownStyles = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4908,10 +5110,10 @@ var markdownLists = [
 var MarkdownLists = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4925,7 +5127,7 @@ var markdownBlocks = [
   {
     type: "blockquote",
     Icon: Quotes,
-    getState: (state2) => state2.blockQuote
+    getState: (state2) => !!state2?.blockQuote
   },
   {
     type: "codeblock",
@@ -4943,10 +5145,10 @@ var MarkdownBlocks = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
   const value = markdownBlocks.find(({ getState }) => state2 && getState(state2));
-  return /* @__PURE__ */ React.createElement(NaturalToolbar.ToggleGroup, {
+  return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React.createElement(ToolbarToggleButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
     Icon,
@@ -4957,7 +5159,7 @@ var MarkdownBlocks = () => {
     }) : void 0
   }, t(`${type} label`))));
 };
-var MarkdownStandard = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MarkdownHeading, null), /* @__PURE__ */ React.createElement(MarkdownStyles, null), /* @__PURE__ */ React.createElement(MarkdownLists, null), /* @__PURE__ */ React.createElement(MarkdownBlocks, null));
+var MarkdownStandard = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(MarkdownHeading, null), /* @__PURE__ */ React3.createElement(MarkdownStyles, null), /* @__PURE__ */ React3.createElement(MarkdownLists, null), /* @__PURE__ */ React3.createElement(MarkdownBlocks, null));
 var MarkdownCustom = ({ onUpload } = {}) => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
@@ -4995,7 +5197,7 @@ var MarkdownCustom = ({ onUpload } = {}) => {
   }, [
     acceptedFiles
   ]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", getInputProps()), /* @__PURE__ */ React.createElement(ToolbarButton, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("input", getInputProps()), /* @__PURE__ */ React3.createElement(ToolbarButton, {
     value: "image",
     Icon: Image,
     onClick: () => open()
@@ -5004,7 +5206,13 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownActions");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToolbarButton, {
+  let toolTipKey = "comment label";
+  if (state2?.comment) {
+    toolTipKey = "selection overlaps existing comment label";
+  } else if (state2?.selection === false) {
+    toolTipKey = "select text to comment label";
+  }
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
@@ -5012,7 +5220,7 @@ var MarkdownActions = () => {
       type: "comment"
     }),
     disabled: !state2 || state2.comment || !state2.selection
-  }, t("comment label")));
+  }, t(toolTipKey)));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -5024,6 +5232,21 @@ var Toolbar = {
   Actions: MarkdownActions
 };
 
+// packages/ui/react-ui-editor/src/defaults.ts
+import { EditorView as EditorView16 } from "@codemirror/view";
+var editorContent = "!mt-[16px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]";
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
+var editorGutter = EditorView16.baseTheme({
+  ".cm-gutters": {
+    // Match margin from content.
+    marginTop: "16px",
+    // Inside within content margin.
+    marginRight: "-32px",
+    width: "32px",
+    backgroundColor: "transparent !important"
+  }
+});
+
 // packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
 var useActionHandler = (view) => {
   return (action) => view && processAction(view, action);
@@ -5031,20 +5254,20 @@ var useActionHandler = (view) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView16 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { useCallback, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
-import { log as log7 } from "@dxos/log";
+import { log as log8 } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-ui";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
   const { id, initialValue, selection, extensions, autoFocus, scrollTo: _scrollTo, moveToEndOfLine, debug } = useMemo3(() => {
     return typeof props === "function" ? props() : props;
   }, deps ?? []);
   const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const scrollTo = useDefaultValue(_scrollTo, EditorView16.scrollIntoView(0, {
+  const scrollTo = useDefaultValue(_scrollTo, EditorView17.scrollIntoView(0, {
     yMargin: 0
   }));
   const onUpdate = useRef2();
@@ -5053,12 +5276,12 @@ var useTextEditor = (props = {}, deps = []) => {
   useEffect3(() => {
     let view2;
     if (parentRef.current) {
-      log7("create", {
+      log8("create", {
         id,
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file13,
         L: 86,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5076,22 +5299,22 @@ var useTextEditor = (props = {}, deps = []) => {
         selection: initialSelection,
         extensions: [
           id && documentId2.of(id),
-          // TODO(burdon): Doesn't catch errors in keymap functions.
-          EditorView16.exceptionSink.of((err) => {
-            log7.catch(err, void 0, {
-              F: __dxlog_file11,
+          // NOTE: Doesn't catch errors in keymap functions.
+          EditorView17.exceptionSink.of((err) => {
+            log8.catch(err, void 0, {
+              F: __dxlog_file13,
               L: 104,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView16.updateListener.of(() => {
+          EditorView17.updateListener.of(() => {
             onUpdate.current?.();
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView16({
+      view2 = new EditorView17({
         parent: parentRef.current,
         scrollTo,
         selection: initialSelection,
@@ -5116,10 +5339,10 @@ var useTextEditor = (props = {}, deps = []) => {
       setView(view2);
     }
     return () => {
-      log7("destroy", {
+      log8("destroy", {
         id
       }, {
-        F: __dxlog_file11,
+        F: __dxlog_file13,
         L: 139,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5219,14 +5442,14 @@ export {
   debugNodeLogger,
   decorateMarkdown,
   defaultOptions,
-  defaultTheme,
   documentId2 as documentId,
   dropFile,
-  editorFillLayoutEditor,
-  editorFillLayoutRoot,
+  editorContent,
+  editorGutter,
   editorInputMode,
   editorWithToolbarLayout,
   focusEvent,
+  folding,
   formattingEquals,
   formattingKeymap,
   getFormatting,