@dxos/react-ui-editor 0.6.8-main.046e6cf → 0.6.8-staging.77f93a3

package/dist/lib/browser/index.mjs

@@ -1387,45 +1387,42 @@ 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, {
+var renderRoot = (root, node) => {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
     tx: defaultTx
   }, node));
-  return el;
+  return root;
 };
 
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
-  1: "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-  2: "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-  3: "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-  4: "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-  5: "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-  6: "mbs-4 mbe-2 font-medium text-inherit no-underline"
-};
-var heading = (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);
-var bold = "font-bold";
-var italic = "italic";
-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-orange-500 dark:border-orange-500 text-transparent");
-
-// packages/ui/react-ui-editor/src/styles/theme.ts
-import get2 from "lodash.get";
+  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 = void 0) => get(tokens, path, defaultValue);
+var getToken = (path, defaultValue) => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? "";
+};
 
 // packages/ui/react-ui-editor/src/styles/theme.ts
 var defaultTheme = {
@@ -1436,21 +1433,21 @@ var defaultTheme = {
   // Scroller.
   // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   ".cm-scroller": {
-    overflowY: "auto",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
-    lineHeight: 1.5
+    overflowY: "auto"
   },
   // Content.
   ".cm-content": {
     padding: "unset",
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px"
+    fontSize: "16px",
+    fontFamily: getToken("fontFamily.body"),
+    lineHeight: 1.5
   },
   "&light .cm-content": {
-    color: get2(tokens, "extend.semanticColors.base.fg.light", "black")
+    color: getToken("extend.semanticColors.base.fg.light", "black")
   },
   "&dark .cm-content": {
-    color: get2(tokens, "extend.semanticColors.base.fg.dark", "red")
+    color: getToken("extend.semanticColors.base.fg.dark", "white")
   },
   //
   // Cursor
@@ -1462,10 +1459,10 @@ var defaultTheme = {
     borderLeft: "2px solid white"
   },
   "&light .cm-placeholder": {
-    color: get2(tokens, "extend.semanticColors.description.light", "rgba(0,0,0,.2)")
+    color: getToken("extend.semanticColors.description.light", "rgba(0,0,0,.2)")
   },
   "&dark .cm-placeholder": {
-    color: get2(tokens, "extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
+    color: getToken("extend.semanticColors.description.dark", "rgba(255,255,255,.2)")
   },
   //
   // line
@@ -1486,46 +1483,51 @@ var defaultTheme = {
   // Selection
   //
   "&light .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.100")
+    background: getToken("extend.colors.primary.100")
   },
   "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.200")
+    background: getToken("extend.colors.primary.200")
   },
   "&dark .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.700")
+    background: getToken("extend.colors.primary.700")
   },
   "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.600")
+    background: getToken("extend.colors.primary.600")
   },
   //
   // Search
   //
   "&light .cm-searchMatch": {
-    backgroundColor: get2(tokens, "extend.colors.yellow.100")
+    backgroundColor: getToken("extend.colors.yellow.100")
   },
   "&dark .cm-searchMatch": {
-    backgroundColor: get2(tokens, "extend.colors.yellow.700")
+    backgroundColor: getToken("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(",")
+    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: `${get2(tokens, "extend.colors.neutral.100")} !important`
+    background: `${getToken("extend.colors.neutral.100")} !important`
   },
   "&dark .cm-tooltip": {
-    background: `${get2(tokens, "extend.colors.neutral.900")} !important`
+    background: `${getToken("extend.colors.neutral.900")} !important`
   },
   ".cm-tooltip-below": {},
   //
@@ -1541,14 +1543,13 @@ var defaultTheme = {
   },
   ".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")
+    color: getToken("extend.colors.primary.500")
   },
   ".cm-tooltip.cm-completionInfo": {
-    border: get2(tokens, "extend.colors.neutral.500"),
+    border: getToken("extend.colors.neutral.500"),
     width: "360px !important",
     margin: "-10px 1px 0 1px",
     padding: "8px !important"
@@ -1557,7 +1558,7 @@ var defaultTheme = {
     display: "none"
   },
   ".cm-completionLabel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: getToken("fontFamily.body")
   },
   ".cm-completionMatchedText": {
     textDecoration: "none !important",
@@ -1567,14 +1568,14 @@ var defaultTheme = {
   // table
   //
   ".cm-table *": {
-    fontFamily: `${get2(tokens, "fontFamily.mono", []).join(",")} !important`,
+    fontFamily: `${getToken("fontFamily.mono")} !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")
+    borderBottom: `1px solid ${getToken("extend.colors.primary.500")}`,
+    color: getToken("extend.colors.neutral.500")
   },
   ".cm-table-cell": {
     padding: "2px 16px 2px 0px"
@@ -1591,19 +1592,6 @@ var defaultTheme = {
     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
   /**
@@ -1630,20 +1618,20 @@ var defaultTheme = {
   */
   ".cm-panels": {},
   ".cm-panel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    fontFamily: getToken("fontFamily.body")
   },
   ".cm-panel input[type=checkbox]": {
     marginRight: "0.4rem !important"
   },
   "&light .cm-panel": {
-    background: get2(tokens, "extend.colors.neutral.50")
+    background: getToken("extend.colors.neutral.50")
   },
   "&dark .cm-panel": {
-    background: get2(tokens, "extend.colors.neutral.850")
+    background: getToken("extend.colors.neutral.850")
   },
   ".cm-button": {
     margin: "4px",
-    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
+    fontFamily: getToken("fontFamily.body"),
     backgroundImage: "none",
     border: "none",
     "&:active": {
@@ -1651,21 +1639,21 @@ var defaultTheme = {
     }
   },
   "&light .cm-button": {
-    background: get2(tokens, "extend.colors.neutral.100"),
+    background: getToken("extend.colors.neutral.100"),
     "&:hover": {
-      background: get2(tokens, "extend.colors.neutral.200")
+      background: getToken("extend.colors.neutral.200")
     },
     "&:active": {
-      background: get2(tokens, "extend.colors.neutral.300")
+      background: getToken("extend.colors.neutral.300")
     }
   },
   "&dark .cm-button": {
-    background: get2(tokens, "extend.colors.neutral.800"),
+    background: getToken("extend.colors.neutral.800"),
     "&:hover": {
-      background: get2(tokens, "extend.colors.neutral.700")
+      background: getToken("extend.colors.neutral.700")
     },
     "&:active": {
-      background: get2(tokens, "extend.colors.neutral.600")
+      background: getToken("extend.colors.neutral.600")
     }
   }
 };
@@ -1828,8 +1816,8 @@ var commentsDecorations = EditorView7.decorations.compute([
     } else if (range.from === range.to) {
       return void 0;
     }
-    const mark2 = createCommentMark(comment.comment.id, comment.comment.id === current);
-    return mark2.range(range.from, range.to);
+    const mark = createCommentMark(comment.comment.id, comment.comment.id === current);
+    return mark.range(range.from, range.to);
   }).filter(nonNullable);
   return Decoration4.set(decorations);
 });
@@ -2248,7 +2236,7 @@ var documentId2 = Facet5.define({
   combine: (providers) => {
     invariant3(providers.length <= 1, void 0, {
       F: __dxlog_file8,
-      L: 11,
+      L: 14,
       S: void 0,
       A: [
         "providers.length <= 1",
@@ -2297,7 +2285,7 @@ var dropFile = (options = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, standardKeymap } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
@@ -2357,10 +2345,9 @@ var createBasicExtensions = (_props) => {
     // 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
-      ] : [],
+      // ...(props.indentWithTab ? [indentWithTab] : []),
       // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
       ...props.closeBrackets ? closeBracketsKeymap : [],
       // https://codemirror.net/docs/ref/#commands.historyKeymap
@@ -2375,12 +2362,12 @@ var defaultThemeSlots = {
     className: "w-full bs-full"
   }
 };
-var createThemeExtensions = ({ theme, themeMode, slots: _slots } = {}) => {
+var createThemeExtensions = ({ theme: theme2, themeMode, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
     EditorView9.baseTheme(defaultTheme),
     EditorView9.darkTheme.of(themeMode === "dark"),
-    theme && EditorView9.theme(theme),
+    theme2 && EditorView9.theme(theme2),
     slots.editor?.className && EditorView9.editorAttributes.of({
       class: slots.editor.className
     }),
@@ -2414,21 +2401,18 @@ 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 { ThemeProvider as ThemeProvider2 } from "@dxos/react-ui";
-import { defaultTx as defaultTx2, getSize, mx as mx2 } from "@dxos/react-ui-theme";
+import { 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", {
+      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"
-      }))));
+      })));
     }
   })
 ];
@@ -2449,6 +2433,7 @@ 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";
@@ -2870,28 +2855,28 @@ var addLink = ({ url, image: image2 } = {}) => {
       let cursorOffset = 1;
       for (const style of cutStyles) {
         const type = InlineMarker[style.name];
-        const mark2 = inlineMarkerText(type);
+        const mark = inlineMarkerText(type);
         if (style.from < from) {
           changes2.push({
             from: skipSpaces(from, state2.doc, -1),
-            insert: mark2
+            insert: mark
           });
           changesAfter.push({
             from: skipSpaces(from, state2.doc, 1, to),
-            insert: mark2
+            insert: mark
           });
         } else {
           changes2.push({
             from: skipSpaces(to, state2.doc, -1, from),
-            insert: mark2
+            insert: mark
           });
           const after = skipSpaces(to, state2.doc, 1);
           if (after === to) {
-            cursorOffset += mark2.length;
+            cursorOffset += mark.length;
           }
           changesAfter.push({
             from: after,
-            insert: mark2
+            insert: mark
           });
         }
       }
@@ -2942,10 +2927,10 @@ var addList = (type) => {
                 const itemText = itemLine.text.slice(item.from - itemLine.from);
                 parentColumn = item.from - itemLine.from + /^\s*/.exec(itemText)[0].length;
                 if (type === 0) {
-                  const mark2 = /^\s*(\d+)[.)]/.exec(itemText);
-                  if (mark2) {
-                    parentColumn += mark2[1].length;
-                    counter = +mark2[1] + 1;
+                  const mark = /^\s*(\d+)[.)]/.exec(itemText);
+                  if (mark) {
+                    parentColumn += mark[1].length;
+                    counter = +mark[1] + 1;
                   }
                 }
               }
@@ -3006,7 +2991,7 @@ var addList = (type) => {
       if (parentColumn2 !== null && parentColumn2 > column) {
         padding = Math.max(padding, parentColumn2 - column);
       }
-      let mark2;
+      let mark;
       if (type === 0) {
         let max = counter2;
         for (let j = i + 1; j < blocks.length; j++) {
@@ -3017,20 +3002,20 @@ var addList = (type) => {
         }
         const num = String(counter2);
         padding = Math.max(String(max).length, padding);
-        mark2 = " ".repeat(Math.max(0, padding - num.length)) + num + ". ";
+        mark = " ".repeat(Math.max(0, padding - num.length)) + num + ". ";
       } else {
-        mark2 = " ".repeat(padding) + "- " + (type === 2 ? "[ ] " : "");
+        mark = " ".repeat(padding) + "- " + (type === 2 ? "[ ] " : "");
       }
       changes.push({
         from: nodeFrom,
-        insert: mark2
+        insert: mark
       });
       while (line.to < node.to) {
         line = state2.doc.lineAt(line.to + 1);
         const open = /^[\s>]*/.exec(line.text)[0].length;
         changes.push({
           from: line.from + Math.min(open, column),
-          insert: " ".repeat(mark2.length)
+          insert: " ".repeat(mark.length)
         });
       }
     }
@@ -3079,14 +3064,14 @@ var removeList = (type) => {
           } else if (name === "ListItem" && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
             lastBlock = node.from;
             let line = state2.doc.lineAt(node.from);
-            const mark2 = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
-            if (!mark2) {
+            const mark = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
+            if (!mark) {
               return false;
             }
             const column = node.from - line.from;
             changes.push({
               from: node.from,
-              to: node.from + mark2[0].length
+              to: node.from + mark[0].length
             });
             while (line.to < node.to) {
               line = state2.doc.lineAt(line.to + 1);
@@ -3094,7 +3079,7 @@ var removeList = (type) => {
               if (open > column) {
                 changes.push({
                   from: line.from + column,
-                  to: line.from + Math.min(column + mark2[0].length, open)
+                  to: line.from + Math.min(column + mark[0].length, open)
                 });
               }
             }
@@ -3337,7 +3322,7 @@ var removeCodeblock = ({ state: state2, dispatch }) => {
 var toggleCodeblock = (target) => {
   return (getFormatting(target.state).blockType === "codeblock" ? removeCodeblock : addCodeblock)(target);
 };
-var formattingKeymap = (options = {}) => {
+var formattingKeymap = (_options = {}) => {
   return [
     keymap6.of([
       {
@@ -3441,10 +3426,10 @@ var getFormatting = (state2) => {
         }
       }
       for (let i = 0; i < inline.length; i++) {
-        const mark2 = inlineMarkerText(i);
-        const found = contextAfter.indexOf(mark2);
+        const mark = inlineMarkerText(i);
+        const found = contextAfter.indexOf(mark);
         if (found > -1) {
-          contextAfter = contextAfter.slice(0, found) + contextAfter.slice(found + mark2.length);
+          contextAfter = contextAfter.slice(0, found) + contextAfter.slice(found + mark.length);
           if (inline[i] === null) {
             inline[i] = true;
           }
@@ -3653,7 +3638,7 @@ var markdownTagsExtensions = [
     ]
   }
 ];
-var markdownHighlightStyle = (readonly) => {
+var markdownHighlightStyle = (_options = {}) => {
   return HighlightStyle.define([
     {
       tag: [
@@ -3691,6 +3676,7 @@ var markdownHighlightStyle = (readonly) => {
         tags.inserted,
         tags.invalid
       ],
+      // TODO(burdon): Explain.
       color: "inherit !important"
     },
     // Markdown marks.
@@ -3702,26 +3688,29 @@ var markdownHighlightStyle = (readonly) => {
         markdownTags.LinkReference,
         markdownTags.ListMark
       ],
-      class: mark
+      class: theme.mark
     },
     // Markdown marks.
     {
       tag: [
+        //
         markdownTags.CodeMark,
         markdownTags.HeaderMark,
         markdownTags.QuoteMark,
         markdownTags.EmphasisMark
       ],
-      class: mark
+      class: theme.mark
     },
     // E.g., code block language (after ```).
     {
       tag: [
+        //
         tags.function(tags.variableName),
         tags.labelName
       ],
-      class: codeMark
+      class: theme.codeMark
     },
+    // Fonts.
     {
       tag: [
         tags.monospace
@@ -3731,40 +3720,40 @@ var markdownHighlightStyle = (readonly) => {
     // Headings.
     {
       tag: tags.heading1,
-      class: heading(1)
+      class: theme.heading(1)
     },
     {
       tag: tags.heading2,
-      class: heading(2)
+      class: theme.heading(2)
     },
     {
       tag: tags.heading3,
-      class: heading(3)
+      class: theme.heading(3)
     },
     {
       tag: tags.heading4,
-      class: heading(4)
+      class: theme.heading(4)
     },
     {
       tag: tags.heading5,
-      class: heading(5)
+      class: theme.heading(5)
     },
     {
       tag: tags.heading6,
-      class: heading(6)
+      class: theme.heading(6)
     },
     // Emphasis.
     {
       tag: tags.emphasis,
-      class: italic
+      class: "italic"
     },
     {
       tag: tags.strong,
-      class: bold
+      class: "font-bold"
     },
     {
       tag: tags.strikethrough,
-      class: strikethrough
+      class: "line-through"
     },
     // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
@@ -3776,13 +3765,13 @@ var markdownHighlightStyle = (readonly) => {
         markdownTags.CodeText,
         markdownTags.InlineCode
       ],
-      class: code
+      class: theme.code
     },
     {
       tag: [
         markdownTags.QuoteMark
       ],
-      class: blockquote
+      class: theme.blockquote
     },
     {
       tag: [
@@ -3793,108 +3782,11 @@ var markdownHighlightStyle = (readonly) => {
   ], {
     scope: markdownLanguage2,
     all: {
-      fontFamily: getToken("fontFamily.body", []).join(",")
+      fontFamily: getToken("fontFamily.body")
     }
   });
 };
 
-// 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 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)
-                }
-              }));
-            });
-          }
-        });
-      }
-    }
-  }
-});
-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 } = {}) => {
   return [
@@ -3920,8 +3812,8 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
     themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
     // Custom styles.
     syntaxHighlighting(markdownHighlightStyle()),
-    linkPastePlugin,
     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
@@ -3940,7 +3832,7 @@ 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 { 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 = {}) => {
@@ -3983,7 +3875,7 @@ var preloadImage = (url) => {
 var buildDecorations = (from, to, state2) => {
   const decorations = [];
   const cursor = state2.selection.main.head;
-  syntaxTree4(state2).iterate({
+  syntaxTree3(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4022,6 +3914,103 @@ 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)
+                }
+              }));
+            });
+          }
+        });
+      }
+    }
+  }
+});
+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";
@@ -4244,7 +4233,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getHeaderLevels = (node, level) => {
     invariant4(level > 0, void 0, {
       F: __dxlog_file10,
-      L: 157,
+      L: 158,
       S: void 0,
       A: [
         "level > 0",
@@ -4283,7 +4272,7 @@ var buildDecorations2 = (view, options, focus) => {
   const getCurrentList = () => {
     invariant4(listLevels.length, void 0, {
       F: __dxlog_file10,
-      L: 179,
+      L: 180,
       S: void 0,
       A: [
         "listLevels.length",
@@ -4306,20 +4295,23 @@ var buildDecorations2 = (view, options, focus) => {
           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}`;
-              }
+        if (editing) {
+          break;
+        }
+        const mark = node.node.firstChild;
+        if (mark?.name === "HeaderMark") {
+          const { from, to = 6 } = options.numberedHeadings ?? {};
+          const text = view.state.sliceDoc(node.from, node.to);
+          const len = text.match(/[#\s]+/)[0].length;
+          if (!from || level < from || level > to) {
+            atomicDeco.add(mark.from, mark.from + len, hide);
+          } else {
+            const num = headers.slice(from - 1).map((level2) => level2?.number ?? 0).join(".") + " ";
+            if (num.length) {
+              atomicDeco.add(mark.from, mark.from + len, Decoration7.replace({
+                widget: new TextWidget(num, theme.heading(level))
+              }));
             }
-            deco.add(node.from, node.to, Decoration7.replace({
-              widget: new TextWidget(text, heading(level))
-            }));
           }
         }
         return false;
@@ -4519,13 +4511,14 @@ var decorateMarkdown = (options = {}) => {
       ]
     }),
     formattingStyles,
+    linkPastePlugin,
     image(),
     table()
   ];
 };
 var formattingStyles = EditorView14.baseTheme({
   "& .cm-code": {
-    fontFamily: getToken("fontFamily.mono", []).join(",")
+    fontFamily: getToken("fontFamily.mono")
   },
   "& .cm-codeblock-line": {
     paddingInline: "1rem !important"
@@ -4578,7 +4571,6 @@ var formattingStyles = EditorView14.baseTheme({
   "& .cm-list-mark": {
     display: "inline-block",
     textAlign: "right",
-    color: getToken("extend.colors.neutral.500"),
     fontVariant: "tabular-nums"
   },
   "& .cm-list-mark-bullet": {
@@ -4717,57 +4709,69 @@ import { debounce as debounce2 } from "@dxos/async";
 import { invariant as invariant5 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy3 } from "@dxos/util";
 var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
-var scrollAnnotation = "dxos.org/cm/scrolling";
+var stateRestoreAnnotation = "dxos.org/cm/state-restore";
 var keyPrefix = "dxos.org/react-ui-editor/state";
 var localStorageStateStoreAdapter = {
-  setState: (id, state2) => {
+  getState: (id) => {
     invariant5(id, void 0, {
       F: __dxlog_file12,
-      L: 35,
+      L: 34,
       S: void 0,
       A: [
         "id",
         ""
       ]
     });
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
+    const state2 = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state2 ? JSON.parse(state2) : void 0;
   },
-  getState: (id) => {
+  setState: (id, state2) => {
     invariant5(id, void 0, {
       F: __dxlog_file12,
-      L: 39,
+      L: 40,
       S: void 0,
       A: [
         "id",
         ""
       ]
     });
-    const state2 = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state2 ? JSON.parse(state2) : void 0;
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
   }
 };
+var createEditorStateTransaction = ({ scrollTo, selection }) => {
+  return {
+    selection,
+    scrollIntoView: !scrollTo,
+    effects: scrollTo ? EditorView15.scrollIntoView(scrollTo, {
+      yMargin: 96
+    }) : void 0,
+    annotations: Transaction2.userEvent.of(stateRestoreAnnotation)
+  };
+};
 var state = ({ getState, setState } = {}) => {
   const setStateDebounced = debounce2(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
-    EditorView15.updateListener.of(({ view, changes, transactions }) => {
+    // EditorView.domEventHandlers({
+    //   scroll: (event) => {
+    //     setStateDebounced(id, {});
+    //   },
+    // }),
+    EditorView15.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId2);
-      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+      if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
       }
       if (setState) {
-        const { top } = view.dom.getBoundingClientRect();
+        const { scrollTop } = view.scrollDOM;
         const pos = view.posAtCoords({
           x: 0,
-          y: top
+          y: scrollTop
         });
         if (pos !== null) {
           const { anchor, head } = view.state.selection.main;
           setStateDebounced(id, {
-            scrollTo: {
-              from: pos,
-              yMargin: 0
-            },
+            scrollTo: pos,
             selection: {
               anchor,
               head
@@ -4782,13 +4786,7 @@ var state = ({ getState, setState } = {}) => {
         run: (view) => {
           const state2 = getState(view.state.facet(documentId2));
           if (state2) {
-            view.dispatch({
-              effects: EditorView15.scrollIntoView(state2.scrollTo.from, {
-                yMargin: 0
-              }),
-              selection: state2.selection,
-              annotations: Transaction2.userEvent.of(scrollAnnotation)
-            });
+            view.dispatch(createEditorStateTransaction(state2));
           }
           return true;
         }
@@ -5234,12 +5232,13 @@ var Toolbar = {
 
 // 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 editorContent = "!mt-[16px] !mb-[32px] !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",
+    marginBottom: "16px",
     // Inside within content margin.
     marginRight: "-32px",
     width: "32px",
@@ -5258,18 +5257,14 @@ 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 log8 } from "@dxos/log";
-import { useDefaultValue } from "@dxos/react-ui";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 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(() => {
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => {
     return typeof props === "function" ? props() : props;
   }, deps ?? []);
   const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const scrollTo = useDefaultValue(_scrollTo, EditorView17.scrollIntoView(0, {
-    yMargin: 0
-  }));
   const onUpdate = useRef2();
   const [view, setView] = useState4();
   const parentRef = useRef2(null);
@@ -5282,12 +5277,16 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue?.length ?? 0
       }, {
         F: __dxlog_file13,
-        L: 86,
+        L: 78,
         S: void 0,
         C: (f, a) => f(...a)
       });
-      let initialSelection = selection;
-      if (moveToEndOfLine && selection === void 0) {
+      let initialSelection;
+      if (selection?.anchor && initialValue?.length) {
+        if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
+          initialSelection = selection;
+        }
+      } else if (moveToEndOfLine && selection === void 0) {
         const index = initialValue?.indexOf("\n");
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = {
@@ -5303,20 +5302,21 @@ var useTextEditor = (props = {}, deps = []) => {
           EditorView17.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
               F: __dxlog_file13,
-              L: 104,
+              L: 100,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
           EditorView17.updateListener.of(() => {
-            onUpdate.current?.();
+            setTimeout(() => {
+              onUpdate.current?.();
+            });
           })
         ].filter(isNotFalsy4)
       });
       view2 = new EditorView17({
         parent: parentRef.current,
-        scrollTo,
         selection: initialSelection,
         state: state2,
         // NOTE: Uncomment to debug/monitor all transactions.
@@ -5343,7 +5343,7 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file13,
-        L: 139,
+        L: 136,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5352,17 +5352,13 @@ var useTextEditor = (props = {}, deps = []) => {
   }, deps);
   useEffect3(() => {
     if (view) {
-      if (scrollTo) {
-        onUpdate.current = () => {
-          onUpdate.current = void 0;
-          view.dispatch({
-            effects: scrollTo && [
-              scrollTo
-            ],
-            scrollIntoView: !scrollTo
-          });
-        };
-      }
+      onUpdate.current = () => {
+        onUpdate.current = void 0;
+        view.dispatch(createEditorStateTransaction({
+          scrollTo,
+          selection
+        }));
+      };
       if (view.state.facet(editorInputMode).noTabster) {
         parentRef.current?.removeAttribute("data-tabster");
       }
@@ -5436,6 +5432,7 @@ export {
   createBasicExtensions,
   createComment,
   createDataExtensions,
+  createEditorStateTransaction,
   createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,