@dxos/react-ui-editor 0.6.9 → 0.6.10-main.3cfcc89

package/dist/lib/browser/index.mjs

@@ -26,6 +26,7 @@ var translations_default = [
         "view mode label": "Editor view",
         "preview mode label": "Live preview",
         "readonly mode label": "Read only",
+        "search label": "Search",
         "source mode label": "Source"
       }
     }
@@ -37,282 +38,8 @@ import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: "text-md"
-};
-var theme = {
-  mark: "opacity-50",
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
-  // TODO(burdon): Replace with widget.
-  blockquote: "pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500",
-  heading: (level) => {
-    return mx(headings[level], "dark:text-primary-400");
-  }
-};
-
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import get from "lodash.get";
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
-var getToken = (path, defaultValue) => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
-
-// packages/ui/react-ui-editor/src/styles/theme.ts
-var defaultTheme = {
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  /**
-  * Scroller
-  */
-  ".cm-scroller": {
-    overflowY: "auto"
-  },
-  /**
-  * Content
-  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
-  */
-  ".cm-content": {
-    padding: "unset",
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px",
-    fontFamily: getToken("fontFamily.body"),
-    lineHeight: 1.5
-  },
-  "&light .cm-content": {
-    color: getToken("extend.semanticColors.base.fg.light", "black")
-  },
-  "&dark .cm-content": {
-    color: getToken("extend.semanticColors.base.fg.dark", "white")
-  },
-  /**
-  * Gutters
-  * NOTE: Gutters should have the same top margin as the content.
-  */
-  ".cm-gutters": {
-    background: "transparent"
-  },
-  ".cm-gutter": {},
-  ".cm-gutterElement": {
-    lineHeight: 1.5
-  },
-  //
-  // 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: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
-  },
-  "&dark .cm-placeholder": {
-    color: getToken("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: getToken("extend.colors.primary.100")
-  },
-  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.200")
-  },
-  "&dark .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.700")
-  },
-  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: getToken("extend.colors.primary.600")
-  },
-  //
-  // Search
-  //
-  "&light .cm-searchMatch": {
-    backgroundColor: getToken("extend.colors.yellow.100")
-  },
-  "&dark .cm-searchMatch": {
-    backgroundColor: getToken("extend.colors.yellow.700")
-  },
-  //
-  // link
-  //
-  ".cm-link": {
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem",
-    fontFamily: getToken("fontFamily.body")
-  },
-  "&light .cm-link > span": {
-    color: getToken("extend.colors.primary.600")
-  },
-  "&dark .cm-link > span": {
-    color: getToken("extend.colors.primary.400")
-  },
-  //
-  // tooltip
-  //
-  ".cm-tooltip": {},
-  "&light .cm-tooltip": {
-    background: `${getToken("extend.colors.neutral.100")} !important`
-  },
-  "&dark .cm-tooltip": {
-    background: `${getToken("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]": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
-    paddingLeft: "4px !important",
-    borderBottom: "none !important",
-    color: getToken("extend.colors.primary.500")
-  },
-  ".cm-tooltip.cm-completionInfo": {
-    border: getToken("extend.colors.neutral.500"),
-    width: "360px !important",
-    margin: "-10px 1px 0 1px",
-    padding: "8px !important"
-  },
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: getToken("fontFamily.body")
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none !important",
-    opacity: 0.5
-  },
-  // TODO(burdon): Override vars --cm-background.
-  //  https://www.npmjs.com/package/codemirror-theme-vars
-  /**
-  * 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: getToken("fontFamily.body")
-  },
-  ".cm-panel input[type=checkbox]": {
-    marginRight: "0.4rem !important"
-  },
-  "&light .cm-panel": {
-    background: getToken("extend.colors.neutral.50")
-  },
-  "&dark .cm-panel": {
-    background: getToken("extend.colors.neutral.850")
-  },
-  ".cm-button": {
-    margin: "4px",
-    fontFamily: getToken("fontFamily.body"),
-    backgroundImage: "none",
-    border: "none",
-    "&:active": {
-      backgroundImage: "none"
-    }
-  },
-  "&light .cm-button": {
-    background: getToken("extend.colors.neutral.100"),
-    "&:hover": {
-      background: getToken("extend.colors.neutral.200")
-    },
-    "&:active": {
-      background: getToken("extend.colors.neutral.300")
-    }
-  },
-  "&dark .cm-button": {
-    background: getToken("extend.colors.neutral.800"),
-    "&:hover": {
-      background: getToken("extend.colors.neutral.700")
-    },
-    "&:active": {
-      background: getToken("extend.colors.neutral.600")
-    }
-  },
-  // TODO(burdon): Factor out element specific logic.
-  //
-  // table
-  //
-  ".cm-table *": {
-    fontFamily: `${getToken("fontFamily.mono")} !important`,
-    textDecoration: "none !important"
-  },
-  ".cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    textAlign: "left",
-    borderBottom: `1px solid ${getToken("extend.colors.primary.500")}`,
-    color: getToken("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"
-  }
-};
-
 // 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 { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, MagnifyingGlass, 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 React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
@@ -413,11 +140,11 @@ var annotations = (options = {}) => {
     styles
   ];
 };
-var styles = EditorView.baseTheme({
+var styles = EditorView.theme({
   ".cm-annotation": {
     textDecoration: "underline",
     textDecorationStyle: "wavy",
-    textDecorationColor: "red"
+    textDecorationColor: "var(--dx-error)"
   }
 });
 
@@ -425,7 +152,7 @@ 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 } = {}) => {
+var autocomplete = ({ activateOnTyping, override, 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
@@ -435,6 +162,7 @@ var autocomplete = ({ activateOnTyping, onSearch } = {}) => {
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
       activateOnTyping,
+      override,
       // closeOnBlur: false,
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
@@ -933,7 +661,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles2 = EditorView3.baseTheme({
+var styles2 = EditorView3.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1756,50 +1484,17 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles3 = EditorView7.baseTheme({
+var styles3 = EditorView7.theme({
   ".cm-comment, .cm-comment-current": {
-    cursor: "pointer",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: "2px",
-    transition: "background-color 0.1s ease"
-  },
-  // Light theme.
-  "&light .cm-comment": {
-    backgroundColor: getToken("extend.colors.yellow.50"),
-    mixBlendMode: "darken",
-    borderColor: getToken("extend.colors.yellow.100")
-  },
-  "&light .cm-comment:hover": {
-    backgroundColor: getToken("extend.colors.yellow.100")
-  },
-  "&light .cm-comment-current": {
-    backgroundColor: getToken("extend.colors.primary.100"),
-    borderColor: getToken("extend.colors.primary.200")
-  },
-  "&light .cm-comment-current:hover": {
-    backgroundColor: getToken("extend.colors.primary.150"),
-    borderColor: getToken("extend.colors.primary.250")
-  },
-  // Dark theme.
-  "&dark .cm-comment": {
-    color: getToken("extend.colors.yellow.50"),
-    backgroundColor: getToken("extend.colors.yellow.800"),
-    borderColor: getToken("extend.colors.yellow.700"),
-    mixBlendMode: "plus-lighter"
-  },
-  "&dark .cm-comment:hover": {
-    backgroundColor: getToken("extend.colors.yellow.700"),
-    borderColor: getToken("extend.colors.yellow.650")
-  },
-  "&dark .cm-comment-current": {
-    color: getToken("extend.colors.primary.50"),
-    backgroundColor: getToken("extend.colors.primary.800"),
-    borderColor: getToken("extend.colors.primary.700")
+    margin: "0 -3px",
+    padding: "3px",
+    borderRadius: "3px",
+    backgroundColor: "var(--dx-cmCommentSurface)",
+    color: "var(--dx-cmComment)",
+    cursor: "pointer"
   },
-  "&dark .cm-comment-current:hover": {
-    backgroundColor: getToken("extend.colors.primary.700"),
-    borderColor: getToken("extend.colors.primary.650")
+  ".cm-comment:hover, .cm-comment-current": {
+    textDecoration: "underline"
   }
 });
 var createCommentMark = (id, isCurrent) => Decoration4.mark({
@@ -1818,7 +1513,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log5.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 181,
+        L: 147,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2259,10 +1954,10 @@ var documentId2 = Facet5.define({
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
 import { dropCursor, EditorView as EditorView8 } from "@codemirror/view";
-var styles4 = EditorView8.baseTheme({
+var styles4 = EditorView8.theme({
   ".cm-dropCursor": {
-    borderLeft: `2px solid ${getToken("extend.colors.primary.500")}`,
-    color: getToken("extend.colors.primary.500"),
+    borderLeft: "2px solid var(--dx-accentText)",
+    color: "var(--dx-accentText)",
     padding: "0 4px"
   },
   ".cm-dropCursor:after": {
@@ -2295,89 +1990,318 @@ var dropFile = (options = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, standardKeymap } from "@codemirror/commands";
+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 EditorView9, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap5, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
+import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
 import { log as log6 } from "@dxos/log";
 import { hueTokens } from "@dxos/react-ui-theme";
 import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
-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,
-  bracketMatching: true,
-  closeBrackets: true,
-  drawSelection: true,
-  editable: true,
-  history: true,
-  keymap: "standard",
-  lineWrapping: true,
-  search: true
+
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var headings = {
+  1: "text-4xl",
+  2: "text-3xl",
+  3: "text-2xl",
+  4: "text-xl",
+  5: "text-lg",
+  6: "text-md"
 };
-var keymaps = {
-  // https://codemirror.net/docs/ref/#commands.standardKeymap
-  standard: standardKeymap,
-  // https://codemirror.net/docs/ref/#commands.defaultKeymap
-  default: defaultKeymap
+var theme = {
+  mark: "opacity-50",
+  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
+  codeMark: "font-mono text-primary-500",
+  // TODO(burdon): Replace with widget.
+  blockquote: "pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500",
+  heading: (level) => {
+    return mx(headings[level], "dark:text-primary-400");
+  }
 };
-var createBasicExtensions = (_props) => {
-  const props = defaultsDeep2({}, _props, defaultBasicOptions);
-  return [
-    // NOTE: Doesn't catch errors in keymap functions.
-    EditorView9.exceptionSink.of((err) => {
-      log6.catch(err, void 0, {
-        F: __dxlog_file9,
-        L: 91,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }),
-    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
-    props.bracketMatching && bracketMatching(),
-    props.closeBrackets && closeBrackets(),
-    props.dropCursor && dropCursor2(),
-    props.drawSelection && drawSelection(),
-    props.highlightActiveLine && highlightActiveLine(),
-    props.history && history(),
-    props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView9.lineWrapping,
-    props.placeholder && placeholder(props.placeholder),
-    props.readonly && [
-      EditorState.readOnly.of(true),
-      EditorView9.editable.of(false)
-    ],
-    props.scrollPastEnd && scrollPastEnd(),
-    props.tabSize && EditorState.tabSize.of(props.tabSize),
-    // https://codemirror.net/docs/ref/#view.KeyBinding
-    keymap5.of([
-      ...(props.keymap && keymaps[props.keymap]) ?? [],
-      // NOTE: Tab configured by markdown extension.
-      // 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);
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import get from "lodash.get";
+import { tokens } from "@dxos/react-ui-theme";
+var getToken = (path, defaultValue) => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? "";
+};
+var fontBody = getToken("fontFamily.body");
+var fontMono = getToken("fontFamily.mono");
+
+// packages/ui/react-ui-editor/src/styles/theme.ts
+var defaultTheme = {
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
+  },
+  /**
+  * Scroller
+  */
+  ".cm-scroller": {
+    overflowY: "auto"
+  },
+  /**
+  * Content
+  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+  */
+  ".cm-content": {
+    padding: "unset",
+    fontFamily: fontBody,
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px",
+    lineHeight: 1.5,
+    color: "unset"
+  },
+  /**
+  * Gutters
+  * NOTE: Gutters should have the same top margin as the content.
+  */
+  ".cm-gutters": {
+    background: "unset"
+  },
+  ".cm-gutter": {},
+  ".cm-gutterElement": {
+    fontSize: "16px",
+    lineHeight: 1.5
+  },
+  ".cm-lineNumbers": {
+    minWidth: "36px"
+  },
+  /**
+  * Line.
+  */
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "var(--dx-hoverSurface)"
+  },
+  /**
+  * Cursor (layer).
+  */
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeft: "2px solid var(--dx-cmCursor)"
+  },
+  ".cm-placeholder": {
+    color: "var(--dx-subdued)"
+  },
+  /**
+  * Selection (layer).
+  */
+  ".cm-selectionBackground": {
+    background: "var(--dx-cmSelection)"
+  },
+  /**
+  * Search.
+  * NOTE: Matches comment.
+  */
+  ".cm-searchMatch": {
+    margin: "0 -3px",
+    padding: "3px",
+    borderRadius: "3px",
+    background: "var(--dx-cmHighlightSurface)",
+    color: "var(--dx-cmHighlight)"
+  },
+  ".cm-searchMatch-selected": {
+    textDecoration: "underline"
+  },
+  /**
+  * Link.
+  */
+  ".cm-link": {
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem"
+  },
+  ".cm-link > span": {
+    color: "var(--dx-accentText)"
+  },
+  /**
+  * Tooltip.
+  */
+  ".cm-tooltip": {
+    background: "var(--dx-base)"
+  },
+  ".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]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: "var(--dx-accentText)"
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important",
+    borderColor: "var(--dx-separator)"
+  },
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: fontBody
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none !important",
+    opacity: 0.5
+  },
+  /**
+  * Panels
+  * 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
+  */
+  // TODO(burdon): Apply react-ui-theme or replace panel.
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: fontBody,
+    backgroundColor: "var(--dx-base)"
+  },
+  ".cm-panel input, .cm-panel button, .cm-panel label": {
+    fontFamily: fontBody,
+    fontSize: "14px",
+    all: "unset",
+    margin: "3px !important",
+    padding: "2px 6px !important",
+    outline: "1px solid transparent"
+  },
+  ".cm-panel input, .cm-panel button": {
+    backgroundColor: "var(--dx-input)"
+  },
+  ".cm-panel input:focus, .cm-panel button:focus": {
+    outline: "1px solid var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel label": {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer"
+  },
+  ".cm-panel input.cm-textfield": {},
+  ".cm-panel input[type=checkbox]": {
+    width: "8px",
+    height: "8px",
+    marginRight: "6px !important",
+    padding: "2px !important",
+    color: "var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel button": {
+    "&:hover": {
+      backgroundColor: "var(--dx-accentSurfaceHover) !important"
+    },
+    "&:active": {
+      backgroundColor: "var(--dx-accentSurfaceHover)"
+    }
+  },
+  ".cm-panel.cm-search": {
+    padding: "4px",
+    borderTop: "1px solid var(--dx-separator)"
+  }
+};
+
+// 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,
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: 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, defaultBasicOptions);
+  return [
+    // NOTE: Doesn't catch errors in keymap functions.
+    EditorView9.exceptionSink.of((err) => {
+      log6.catch(err, void 0, {
+        F: __dxlog_file9,
+        L: 92,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }),
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.dropCursor && dropCursor2(),
+    props.drawSelection && drawSelection({
+      cursorBlinkRate: 1200
+    }),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView9.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [
+      EditorState.readOnly.of(true),
+      EditorView9.editable.of(false)
+    ],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+    // https://codemirror.net/docs/ref/#view.KeyBinding
+    keymap5.of([
+      ...(props.keymap && keymaps[props.keymap]) ?? [],
+      // NOTE: Tabs are also configured by markdown extension.
+      // 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 defaultThemeSlots = {
   editor: {
     className: "w-full bs-full"
   }
 };
-var createThemeExtensions = ({ theme: theme2, themeMode, slots: _slots } = {}) => {
+var createThemeExtensions = ({ themeMode, styles: styles5, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView9.baseTheme(defaultTheme),
     EditorView9.darkTheme.of(themeMode === "dark"),
-    theme2 && EditorView9.theme(theme2),
+    EditorView9.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
     slots.editor?.className && EditorView9.editorAttributes.of({
       class: slots.editor.className
     }),
@@ -2411,18 +2335,22 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
 import React2 from "react";
-import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
+import { Icon } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
 var folding = (_props = {}) => [
   codeFolding({
     placeholderDOM: () => document.createElement("div")
   }),
   foldGutter({
     markerDOM: (open) => {
-      return renderRoot(document.createElement("div"), /* @__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"
-      })));
+      return renderRoot(document.createElement("div"), /* @__PURE__ */ React2.createElement(Icon, {
+        icon: "ph--caret-right--regular",
+        classNames: [
+          getSize(3),
+          "m-2 cursor-pointer",
+          open && "rotate-90"
+        ]
+      }));
     }
   })
 ];
@@ -2443,7 +2371,6 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { indentWithTab } from "@codemirror/commands";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
@@ -3792,7 +3719,7 @@ var markdownHighlightStyle = (_options = {}) => {
   ], {
     scope: markdownLanguage2,
     all: {
-      fontFamily: getToken("fontFamily.body")
+      fontFamily: fontBody
     }
   });
 };
@@ -3812,6 +3739,8 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
       base: markdownLanguage3,
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
+      // Don't complete HTML tags.
+      completeHTMLTags: false,
       // Parser extensions.
       extensions: [
         // GFM provided by default.
@@ -3823,7 +3752,6 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
     keymap7.of([
-      // TODO(burdon): Indent by 4 if in task list.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab2,
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
@@ -3834,44 +3762,209 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
   ];
 };
 
+// packages/ui/react-ui-editor/src/extensions/markdown/debug.ts
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { StateField as StateField6 } from "@codemirror/state";
+var debugTree = (cb) => StateField6.define({
+  create: (state2) => cb(convertTreeToJson(state2)),
+  update: (value, tr) => cb(convertTreeToJson(tr.state))
+});
+var convertTreeToJson = (state2) => {
+  const treeToJson = (cursor) => {
+    const node = {
+      type: cursor.type.name,
+      from: cursor.from,
+      to: cursor.to,
+      text: state2.doc.slice(cursor.from, cursor.to).toString(),
+      children: []
+    };
+    if (cursor.firstChild()) {
+      do {
+        node.children.push(treeToJson(cursor));
+      } while (cursor.nextSibling());
+      cursor.parent();
+    }
+    return node;
+  };
+  return treeToJson(syntaxTree3(state2).cursor());
+};
+
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { syntaxTree as syntaxTree7 } 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 { EditorView as EditorView15, 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";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-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;
+// packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { Transaction } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+var adjustChanges = () => {
+  return ViewPlugin5.fromClass(class {
+    update(update2) {
+      const tree = syntaxTree4(update2.state);
+      const adjustments = [];
+      for (const tr of update2.transactions) {
+        const event = tr.annotation(Transaction.userEvent);
+        switch (event) {
+          case "input": {
+            const changes = tr.changes;
+            if (changes.empty) {
+              break;
+            }
+            changes.iterChanges((fromA) => {
+              const node = tree.resolveInner(fromA, 1);
+              if (node?.name === "BulletList") {
+                const { text } = update2.state.doc.lineAt(fromA);
+                if (text.endsWith("]")) {
+                  adjustments.push({
+                    from: fromA,
+                    to: fromA,
+                    insert: " "
+                  });
+                }
+              }
+            });
+            break;
+          }
+          case "input.paste": {
+            const changes = tr.changes;
+            if (changes.empty) {
+              break;
+            }
+            changes.iterChanges((fromA, toA, fromB, toB, text) => {
+              const url = getValidUrl(update2.view.state.sliceDoc(fromB, toB));
+              if (url) {
+                const node = tree.resolveInner(fromA, -1);
+                const invalidPositions = /* @__PURE__ */ new Set([
+                  "Link",
+                  "LinkMark",
+                  "Code",
+                  "CodeText",
+                  "FencedCode",
+                  "URL"
+                ]);
+                if (!invalidPositions.has(node?.name)) {
+                  const replacedText = tr.startState.sliceDoc(fromA, toA);
+                  adjustments.push({
+                    from: fromA,
+                    to: toB,
+                    insert: createLink(url, replacedText)
+                  });
+                }
+              } else {
+                const node = tree.resolveInner(fromA, 1);
+                switch (node?.name) {
+                  case "Task": {
+                    const str = text.toString();
+                    const match = str.match(/\s*- \[[ xX]\]\s*(.+)/);
+                    if (match) {
+                      const [, replacement] = match;
+                      adjustments.push({
+                        from: fromA,
+                        to: toB,
+                        insert: replacement
+                      });
+                    }
+                    break;
+                  }
+                }
+              }
+            });
+            break;
+          }
+        }
       }
-      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)
+      if (adjustments.length) {
+        setTimeout(() => {
+          update2.view.dispatch(update2.view.state.update({
+            changes: adjustments
+          }));
+        });
+      }
+    }
+  });
+};
+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;
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { StateField as StateField7 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView12, WidgetType as WidgetType3 } from "@codemirror/view";
+var image = (_options = {}) => {
+  return StateField7.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();
@@ -3885,7 +3978,7 @@ var preloadImage = (url) => {
 var buildDecorations = (from, to, state2) => {
   const decorations = [];
   const cursor = state2.selection.main.head;
-  syntaxTree3(state2).iterate({
+  syntaxTree5(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -3924,112 +4017,107 @@ var ImageWidget = class extends WidgetType3 {
 var imageUpload = (options = {}) => {
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/link-paste.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { Transaction } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
-var linkPastePlugin = ViewPlugin5.fromClass(class {
-  update(update2) {
-    for (const tr of update2.transactions) {
-      const event = tr.annotation(Transaction.userEvent);
-      if (event === "input.paste") {
-        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)
-                }
-              }));
-            });
-          }
-        });
-      }
-    }
+// packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
+import { EditorView as EditorView13 } from "@codemirror/view";
+var bulletListIndentationWidth = 24;
+var orderedListIndentationWidth = 36;
+var formattingStyles = EditorView13.theme({
+  /**
+  * Horizontal rule.
+  */
+  "& .cm-hr": {
+    display: "inline-block",
+    width: "100%",
+    height: "0",
+    verticalAlign: "middle",
+    borderTop: "1px solid var(--dx-cmSeparator)",
+    opacity: 0.5
+  },
+  /**
+  * Lists.
+  */
+  "& .cm-list-item": {},
+  "& .cm-list-mark": {
+    display: "inline-block",
+    textAlign: "right",
+    paddingRight: "0.5em",
+    fontVariant: "tabular-nums"
+  },
+  "& .cm-list-mark-bullet": {
+    width: `${bulletListIndentationWidth}px`
+  },
+  "& .cm-list-mark-ordered": {
+    width: `${orderedListIndentationWidth}px`
+  },
+  /**
+  * Code and codeblocks.
+  */
+  "& .cm-code": {
+    fontFamily: fontMono
+  },
+  "& .cm-codeblock-line": {
+    background: "var(--dx-cmCodeblock)",
+    paddingInline: "1rem !important"
+  },
+  "& .cm-codeblock-first": {
+    borderTopLeftRadius: ".25rem",
+    borderTopRightRadius: ".25rem"
+  },
+  "& .cm-codeblock-last": {
+    borderBottomLeftRadius: ".25rem",
+    borderBottomRightRadius: ".25rem"
+  },
+  /**
+  * Task list.
+  */
+  "& .cm-task": {
+    display: "inline-block",
+    width: `${bulletListIndentationWidth}px`
+  },
+  "& .cm-task-checkbox": {
+    display: "grid",
+    margin: "0",
+    transform: "translateY(2px)"
+  },
+  /**
+  * Table.
+  */
+  ".cm-table *": {
+    fontFamily: fontMono,
+    textDecoration: "none !important"
+  },
+  ".cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    textAlign: "left",
+    borderBottom: "1px solid var(--dx-cmSeparator)",
+    color: "var(--dx-subdued)"
+  },
+  ".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"
   }
 });
-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 = syntaxTree4(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/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";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField8 } from "@codemirror/state";
+import { Decoration as Decoration6, EditorView as EditorView14, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField7.define({
+  return StateField8.define({
     create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView13.decorations.from(field)
+    provide: (field) => EditorView14.decorations.from(field)
   });
 };
 var update = (state2, _options) => {
@@ -4041,7 +4129,7 @@ var update = (state2, _options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree5(state2).iterate({
+  syntaxTree6(state2).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4202,13 +4290,13 @@ var TextWidget = class extends WidgetType5 {
 };
 var hide = Decoration7.replace({});
 var fencedCodeLine = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line")
+  class: mx2("cm-code cm-codeblock-line")
 });
 var fencedCodeLineFirst = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-first")
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
 var fencedCodeLineLast = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-last")
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
@@ -4234,8 +4322,6 @@ var autoHideTags = /* @__PURE__ */ new Set([
   "SubscriptMark",
   "SuperscriptMark"
 ]);
-var bulletListIndentationWidth = 24;
-var orderedListIndentationWidth = 32;
 var buildDecorations2 = (view, options, focus) => {
   const deco = new RangeSetBuilder3();
   const atomicDeco = new RangeSetBuilder3();
@@ -4244,7 +4330,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file10,
-      L: 159,
+      L: 157,
       S: void 0,
       A: [
         "level > 0",
@@ -4280,10 +4366,10 @@ var buildDecorations2 = (view, options, focus) => {
   const leaveList = () => {
     listLevels.pop();
   };
-  const getCurrentList = () => {
+  const getCurrentListLevel = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file10,
-      L: 181,
+      L: 179,
       S: void 0,
       A: [
         "listLevels.length",
@@ -4333,34 +4419,35 @@ var buildDecorations2 = (view, options, focus) => {
         break;
       }
       case "ListItem": {
-        const list = getCurrentList();
+        const list = getCurrentListLevel();
         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({
+        const line = state2.doc.lineAt(node.from);
+        if (node.from === line.to - 1) {
+          return false;
+        }
+        deco.add(line.from, line.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);`
+            style: `padding-left: ${offset}px; text-indent: -${width}px;`
           }
         }));
-        const line = state2.doc.sliceString(start.from, node.to);
-        const whitespace = line.match(/^ */)?.[0].length ?? 0;
+        const text = state2.doc.sliceString(line.from, node.to);
+        const whitespace = text.match(/^ */)?.[0].length ?? 0;
         if (whitespace) {
-          atomicDeco.add(start.from, start.from + whitespace, hide);
+          atomicDeco.add(line.from, line.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);
+        const next = tree.resolve(node.to + 1, 1);
+        if (next?.name === "TaskMarker") {
+          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
-        const list = getCurrentList();
-        const label = list.type === "OrderedList" ? `${++list.number}.` : "-";
-        atomicDeco.add(node.from, node.to, Decoration7.replace({
+        const list = getCurrentListLevel();
+        const label = list.type === "OrderedList" ? `${++list.number}.` : "\u2022";
+        atomicDeco.add(node.from, node.to + 1, Decoration7.replace({
           widget: new TextWidget(label, list.type === "OrderedList" ? "cm-list-mark cm-list-mark-ordered" : "cm-list-mark cm-list-mark-bullet")
         }));
         break;
@@ -4368,10 +4455,7 @@ var buildDecorations2 = (view, options, focus) => {
       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);
+          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
         }
         break;
       }
@@ -4461,7 +4545,7 @@ var buildDecorations2 = (view, options, focus) => {
       }
     }
   };
-  const tree = syntaxTree6(state2);
+  const tree = syntaxTree7(state2);
   if (options.numberedHeadings?.from === void 0) {
     for (const { from, to } of view.visibleRanges) {
       tree.iterate({
@@ -4490,13 +4574,14 @@ var decorateMarkdown = (options = {}) => {
         ({ 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) {
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
           ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
           this.clearUpdate();
         } else if (update2.selectionSet) {
           this.scheduleUpdate(update2.view);
         }
       }
+      // Defer update in case moving through the document.
       scheduleUpdate(view) {
         this.clearUpdate();
         this.pendingUpdate = setTimeout(() => {
@@ -4516,88 +4601,24 @@ var decorateMarkdown = (options = {}) => {
       }
     }, {
       provide: (plugin) => [
-        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)
+        EditorView15.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView15.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView15.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
       ]
     }),
-    formattingStyles,
-    linkPastePlugin,
     image(),
-    table()
+    table(),
+    adjustChanges(),
+    formattingStyles
   ];
 };
-var formattingStyles = EditorView14.baseTheme({
-  "& .cm-code": {
-    fontFamily: getToken("fontFamily.mono")
-  },
-  "& .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: ".25rem",
-    borderTopRightRadius: ".25rem"
-  },
-  "& .cm-codeblock-last": {
-    borderBottomLeftRadius: ".25rem",
-    borderBottomRightRadius: ".25rem"
-  },
-  "&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.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": {
-    display: "grid",
-    margin: "0",
-    transform: "translateY(2px)"
-  },
-  "& .cm-list-item": {},
-  "& .cm-list-mark": {
-    display: "inline-block",
-    textAlign: "right",
-    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/link.ts
-import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { syntaxTree as syntaxTree8 } 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 = syntaxTree7(view.state).resolveInner(pos, side);
+  const syntax = syntaxTree8(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;
@@ -4715,7 +4736,7 @@ var InputModeExtensions = {
 
 // packages/ui/react-ui-editor/src/extensions/state.ts
 import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView15, keymap as keymap9 } from "@codemirror/view";
+import { EditorView as EditorView16, keymap as keymap9 } from "@codemirror/view";
 import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant5 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
@@ -4753,7 +4774,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView15.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView16.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction2.userEvent.of(stateRestoreAnnotation)
@@ -4768,7 +4789,7 @@ var state = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView15.updateListener.of(({ view, transactions }) => {
+    EditorView16.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId2);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -4893,96 +4914,32 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
     }
   }, children))));
 };
-var ToolbarToggleButton = ({ Icon, children, ...props }) => {
+var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
   return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon2, {
     className: iconStyles
   }), /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
   }, 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 }) => {
+var ToolbarButton = ({ Icon: Icon2, children, ...props }) => {
   return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon2, {
     className: iconStyles
   }), /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))));
 };
-var ViewModeIcons = {
-  preview: PencilSimple,
-  readonly: PencilSimpleSlash,
-  source: MarkdownLogo
-};
-var MarkdownView = ({ mode }) => {
-  const { t } = useTranslation(translationKey);
-  const { onAction } = useToolbarContext("ViewMode");
-  const ModeIcon = ViewModeIcons[mode ?? "preview"];
-  const suppressNextTooltip = useRef(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
-    open: tooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && suppressNextTooltip.current) {
-        suppressNextTooltip.current = false;
-        return setTooltipOpen(false);
-      } else {
-        return setTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
-    open: selectOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setSelectOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button, {
-    variant: "ghost",
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React3.createElement("span", {
-    className: "sr-only"
-  }, t("mode label")), /* @__PURE__ */ React3.createElement(ModeIcon, {
-    className: iconStyles
-  }), /* @__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__ */ React3.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
-    const Icon = ViewModeIcons[value];
-    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
-      key: value,
-      checked: value === mode,
-      onClick: () => onAction?.({
-        type: "view-mode",
-        data: value
-      })
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      className: iconStyles
-    }), /* @__PURE__ */ React3.createElement("span", {
-      className: "whitespace-nowrap grow"
-    }, t(`${value} mode label`)), /* @__PURE__ */ React3.createElement(Check, {
-      className: value === mode ? "visible" : "invisible"
-    }));
-  })), /* @__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,
   "1": TextHOne,
@@ -5038,7 +4995,7 @@ var MarkdownHeading = () => {
     classNames: "is-min md:is-min",
     onCloseAutoFocus: (e) => e.preventDefault()
   }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, Object.keys(HeadingIcons).map((level) => {
-    const Icon = HeadingIcons[level];
+    const Icon2 = HeadingIcons[level];
     return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
       key: level,
       checked: value === level,
@@ -5050,7 +5007,7 @@ var MarkdownHeading = () => {
       className: "sr-only"
     }, t("heading level label", {
       count: parseInt(level)
-    })), /* @__PURE__ */ React3.createElement(Icon, {
+    })), /* @__PURE__ */ React3.createElement(Icon2, {
       className: iconStyles
     }), /* @__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))));
@@ -5088,10 +5045,10 @@ var MarkdownStyles = () => {
   return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
     value: markdownStyles.filter(({ getState }) => state2 && getState(state2)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
+  }, markdownStyles.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
-    Icon,
+    Icon: Icon2,
     disabled: state2?.blockType === "codeblock",
     onClick: state2 ? () => onAction?.({
       type,
@@ -5122,10 +5079,10 @@ var MarkdownLists = () => {
   return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state2?.listStyle ? `list-${state2.listStyle}` : ""
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
+  }, markdownLists.map(({ type, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
-    Icon,
+    Icon: Icon2,
     onClick: state2 ? () => onAction?.({
       type,
       data: !getState(state2)
@@ -5157,10 +5114,10 @@ var MarkdownBlocks = () => {
   return /* @__PURE__ */ React3.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: value?.type ?? ""
-  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
+  }, markdownBlocks.map(({ type, disabled, getState, Icon: Icon2 }) => /* @__PURE__ */ React3.createElement(ToolbarToggleButton, {
     key: type,
     value: type,
-    Icon,
+    Icon: Icon2,
     disabled: !state2 || disabled?.(state2),
     onClick: state2 ? () => onAction?.({
       type,
@@ -5212,16 +5169,86 @@ var MarkdownCustom = ({ onUpload } = {}) => {
     onClick: () => open()
   }, t("image label")));
 };
+var ViewModeIcons = {
+  preview: PencilSimple,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo
+};
+var MarkdownView = ({ mode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext("ViewMode");
+  const ModeIcon = ViewModeIcons[mode ?? "preview"];
+  const suppressNextTooltip = useRef(false);
+  const [tooltipOpen, setTooltipOpen] = useState3(false);
+  const [selectOpen, setSelectOpen] = useState3(false);
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
+    open: tooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (nextOpen && suppressNextTooltip.current) {
+        suppressNextTooltip.current = false;
+        return setTooltipOpen(false);
+      } else {
+        return setTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    open: selectOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setSelectOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "sr-only"
+  }, t("mode label")), /* @__PURE__ */ React3.createElement(ModeIcon, {
+    className: iconStyles
+  }), /* @__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__ */ React3.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
+    const Icon2 = ViewModeIcons[value];
+    return /* @__PURE__ */ React3.createElement(DropdownMenu.CheckboxItem, {
+      key: value,
+      checked: value === mode,
+      onClick: () => onAction?.({
+        type: "view-mode",
+        data: value
+      })
+    }, /* @__PURE__ */ React3.createElement(Icon2, {
+      className: iconStyles
+    }), /* @__PURE__ */ React3.createElement("span", {
+      className: "whitespace-nowrap grow"
+    }, t(`${value} mode label`)), /* @__PURE__ */ React3.createElement(Check, {
+      className: value === mode ? "visible" : "invisible"
+    }));
+  })), /* @__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 MarkdownActions = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownActions");
   const { t } = useTranslation(translationKey);
-  let toolTipKey = "comment label";
+  let commentToolTipKey = "comment label";
   if (state2?.comment) {
-    toolTipKey = "selection overlaps existing comment label";
+    commentToolTipKey = "selection overlaps existing comment label";
   } else if (state2?.selection === false) {
-    toolTipKey = "select text to comment label";
+    commentToolTipKey = "select text to comment label";
   }
   return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ToolbarButton, {
+    value: "search",
+    Icon: MagnifyingGlass,
+    onClick: () => onAction?.({
+      type: "search"
+    })
+  }, t("search label")), /* @__PURE__ */ React3.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
     "data-testid": "editor.toolbar.comment",
@@ -5229,7 +5256,7 @@ var MarkdownActions = () => {
       type: "comment"
     }),
     disabled: !state2 || state2.comment || !state2.selection
-  }, t(toolTipKey)));
+  }, t(commentToolTipKey)));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -5242,23 +5269,21 @@ var Toolbar = {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView16 } from "@codemirror/view";
-var editorContent = "!mt-[16px] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]";
+import { EditorView as EditorView17 } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var margin = "!mt-[16px]";
+var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
+var editorFullWidth = mx3(margin, "!ml-[3rem]");
 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({
+var editorGutter = EditorView17.theme({
+  // Match margin from content.
   ".cm-gutters": {
-    // Match margin from content.
-    marginTop: "16px",
-    marginBottom: "16px",
-    // Inside within content margin.
-    marginRight: "-32px",
-    width: "32px",
-    backgroundColor: "transparent !important"
+    marginTop: "16px"
   }
 });
-var editorMonospace = EditorView16.baseTheme({
+var editorMonospace = EditorView17.theme({
   ".cm-content": {
-    fontFamily: `${getToken("fontFamily.mono")} !important`
+    fontFamily: fontMono
   }
 });
 
@@ -5269,7 +5294,7 @@ var useActionHandler = (view) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } 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 log8 } from "@dxos/log";
@@ -5315,7 +5340,7 @@ var useTextEditor = (props = {}, deps = []) => {
         extensions: [
           id && documentId2.of(id),
           // NOTE: Doesn't catch errors in keymap functions.
-          EditorView17.exceptionSink.of((err) => {
+          EditorView18.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
               L: 100,
@@ -5324,14 +5349,14 @@ var useTextEditor = (props = {}, deps = []) => {
             });
           }),
           extensions,
-          EditorView17.updateListener.of(() => {
+          EditorView18.updateListener.of(() => {
             setTimeout(() => {
               onUpdate.current?.();
             });
           })
         ].filter(isNotFalsy4)
       });
-      view2 = new EditorView17({
+      view2 = new EditorView18({
         parent: parentRef.current,
         selection: initialSelection,
         state: state2,
@@ -5445,6 +5470,7 @@ export {
   command,
   comments,
   commentsState,
+  convertTreeToJson,
   createBasicExtensions,
   createComment,
   createDataExtensions,
@@ -5453,11 +5479,13 @@ export {
   createMarkdownExtensions,
   createThemeExtensions,
   debugNodeLogger,
+  debugTree,
   decorateMarkdown,
   defaultOptions,
   documentId2 as documentId,
   dropFile,
   editorContent,
+  editorFullWidth,
   editorGutter,
   editorInputMode,
   editorMonospace,
@@ -5467,7 +5495,6 @@ export {
   formattingEquals,
   formattingKeymap,
   getFormatting,
-  getToken,
   image,
   imageUpload,
   insertTable,