@dxos/react-ui-editor 0.6.13-staging.1e988a3 → 0.6.14-main.7bd9c89

package/dist/lib/browser/index.mjs

@@ -1,3 +1,12 @@
+import {
+  Cursor,
+  createEditorStateTransaction,
+  documentId,
+  localStorageStateStoreAdapter,
+  singleValueFacet,
+  state
+} from "./chunk-CIQSMP7K.mjs";
+
 // packages/ui/react-ui-editor/src/translations.ts
 var translationKey = "react-ui-editor";
 var translations_default = [
@@ -34,7 +43,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap11 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -43,54 +52,13 @@ import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNu
 import { createContext } from "@radix-ui/react-context";
 import React3, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
-import { Button, DensityProvider, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
-import { getSize as getSize2 } from "@dxos/react-ui-theme";
+import { Button, DropdownMenu, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
 import { StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
 import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/extensions/cursor.ts
-import { Facet } from "@codemirror/state";
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = Facet.define({
-      combine: (providers) => {
-        return providers[0] ?? defaultCursorConverter;
-      }
-    });
-  }
-  static {
-    this.getCursorFromRange = (state2, range) => {
-      const cursorConverter2 = state2.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state2, cursor) => {
-      const cursorConverter2 = state2.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
-  }
-};
-
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
 var annotationMark = Decoration.mark({
   class: "cm-annotation"
 });
@@ -153,7 +121,7 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
-  const extentions = [
+  const extensions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -170,7 +138,7 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
     })
   ];
   if (onSearch) {
-    extentions.push(
+    extensions.push(
       // TODO(burdon): Optional decoration via addToOptions
       markdownLanguage.data.of({
         autocomplete: (context) => {
@@ -186,7 +154,7 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
       })
     );
   }
-  return extentions;
+  return extensions;
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
@@ -484,7 +452,7 @@ var automerge = (accessor) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
-import { Annotation as Annotation2, Facet as Facet2, RangeSet } from "@codemirror/state";
+import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
 import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
@@ -499,9 +467,7 @@ var dummyProvider = {
   update: () => {
   }
 };
-var awarenessProvider = Facet2.define({
-  combine: (providers) => providers[0] ?? dummyProvider
-});
+var awarenessProvider = singleValueFacet(dummyProvider);
 var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
@@ -516,7 +482,7 @@ var RemoteSelectionsDecorator = class {
   constructor(view) {
     this._ctx = new Context(void 0, {
       F: __dxlog_file2,
-      L: 82
+      L: 80
     });
     this.decorations = RangeSet.of([]);
     this._cursorConverter = view.state.facet(Cursor.converter);
@@ -1144,11 +1110,9 @@ import { RangeSetBuilder } from "@codemirror/state";
 import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/command/state.ts
-import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
-var commandConfig = Facet3.define({
-  combine: (providers) => providers[0]
-});
+var commandConfig = singleValueFacet();
 var commandState = StateField3.define({
   create: () => ({}),
   update: (state2, tr) => {
@@ -1273,6 +1237,51 @@ var clientRectsFor = (dom) => {
   }
 };
 
+// packages/ui/react-ui-editor/src/extensions/util/error.ts
+import { log as log3 } from "@dxos/log";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util/error.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log3.catch(err, void 0, {
+        F: __dxlog_file5,
+        L: 12,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+};
+
+// packages/ui/react-ui-editor/src/extensions/util/overlap.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+
+// packages/ui/react-ui-editor/src/extensions/util/react.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@dxos/react-ui";
+import { defaultTx } from "@dxos/react-ui-theme";
+var createElement = (tag, options, children) => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...Array.isArray(children) ? children : [
+      children
+    ]);
+  }
+  return el;
+};
+var renderRoot = (root, node) => {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
+    tx: defaultTx
+  }, node));
+  return root;
+};
+
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
 var CommandHint = class extends WidgetType2 {
   constructor(content) {
@@ -1355,7 +1364,7 @@ var command = (options) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { Facet as Facet4, StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
+import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap4, Decoration as Decoration4, EditorView as EditorView7, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect, useMemo, useState } from "react";
@@ -1363,51 +1372,6 @@ import { debounce } from "@dxos/async";
 import { log as log5 } from "@dxos/log";
 import { nonNullable } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/extensions/util/error.ts
-import { log as log3 } from "@dxos/log";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/util/error.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      log3.catch(err, void 0, {
-        F: __dxlog_file5,
-        L: 12,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-};
-
-// packages/ui/react-ui-editor/src/extensions/util/overlap.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-
-// packages/ui/react-ui-editor/src/extensions/util/react.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "@dxos/react-ui";
-import { defaultTx } from "@dxos/react-ui-theme";
-var createElement = (tag, options, children) => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (children) {
-    el.append(...Array.isArray(children) ? children : [
-      children
-    ]);
-  }
-  return el;
-};
-var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
-    tx: defaultTx
-  }, node));
-  return root;
-};
-
 // packages/ui/react-ui-editor/src/util.ts
 import { log as log4 } from "@dxos/log";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
@@ -1417,12 +1381,16 @@ var callbackWrapper = (fn) => (...args) => {
   } catch (err) {
     log4.catch(err, void 0, {
       F: __dxlog_file6,
-      L: 18,
+      L: 19,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 };
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
+};
 var logChanges = (trs) => {
   const changes = trs.flatMap((tr) => {
     if (tr.changes.empty) {
@@ -1443,7 +1411,7 @@ var logChanges = (trs) => {
       changes
     }, {
       F: __dxlog_file6,
-      L: 39,
+      L: 49,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1452,9 +1420,6 @@ var logChanges = (trs) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/comments.ts";
-var documentId = Facet4.define({
-  combine: (values) => values[0]
-});
 var setComments = StateEffect3.define();
 var setSelection = StateEffect3.define();
 var setCommentState = StateEffect3.define();
@@ -1525,7 +1490,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log5.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 147,
+        L: 143,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1687,15 +1652,13 @@ var createComment = (view) => {
   }
   return false;
 };
-var optionsFacet = Facet4.define({
-  combine: (providers) => providers[0]
-});
+var optionsFacet = singleValueFacet();
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state2) => options.onSelect?.(state2), 200);
   return [
     optionsFacet.of(options),
-    documentId.of(options.id),
+    options.id ? documentId.of(options.id) : void 0,
     commentsState,
     commentsDecorations,
     handleCommentClick,
@@ -1703,17 +1666,17 @@ var comments = (options = {}) => {
     //
     // Keymap.
     //
-    options.onCreate ? keymap4.of([
+    options.onCreate && keymap4.of([
       {
         key: shortcut,
         run: callbackWrapper(createComment)
       }
-    ]) : [],
+    ]),
     //
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover ? hoverTooltip((view, pos) => {
+    options.onHover && hoverTooltip((view, pos) => {
       const selection = view.state.selection.main;
       if (selection && pos >= selection.from && pos <= selection.to) {
         return {
@@ -1738,7 +1701,7 @@ var comments = (options = {}) => {
       // TODO(burdon): Hide on change triggered immediately?
       // hideOnChange: true,
       hoverTime: 1e3
-    }) : [],
+    }),
     //
     // Track deleted ranges and update ranges for decorations.
     //
@@ -1807,8 +1770,8 @@ var comments = (options = {}) => {
         });
       }
     }),
-    options.onUpdate ? trackPastedComments(options.onUpdate) : []
-  ];
+    options.onUpdate && trackPastedComments(options.onUpdate)
+  ].filter(nonNullable);
 };
 var scrollThreadIntoView = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -1840,8 +1803,11 @@ var scrollThreadIntoView = (view, id, center = true) => {
   }
 };
 var selectionOverlapsComment = (state2) => {
+  const commentState = state2.field(commentsState, false);
+  if (commentState === void 0) {
+    return false;
+  }
   const { selection } = state2;
-  const commentState = state2.field(commentsState);
   for (const range of selection.ranges) {
     if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
       return true;
@@ -1935,25 +1901,6 @@ var debugNodeLogger = (log9 = console.log) => {
   });
 };
 
-// packages/ui/react-ui-editor/src/extensions/doc.ts
-import { Facet as Facet5 } from "@codemirror/state";
-import { invariant as invariant3 } from "@dxos/invariant";
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/doc.ts";
-var documentId2 = Facet5.define({
-  combine: (providers) => {
-    invariant3(providers.length <= 1, void 0, {
-      F: __dxlog_file8,
-      L: 14,
-      S: void 0,
-      A: [
-        "providers.length <= 1",
-        ""
-      ]
-    });
-    return providers[0];
-  }
-});
-
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
 import { dropCursor, EditorView as EditorView8 } from "@codemirror/view";
 var styles4 = EditorView8.theme({
@@ -2016,11 +1963,9 @@ var headings = {
   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",
+  mark: "opacity-50",
   heading: (level) => {
     return mx(headings[level], "dark:text-primary-400");
   }
@@ -2063,9 +2008,11 @@ var defaultTheme = {
   /**
   * Gutters
   * NOTE: Gutters should have the same top margin as the content.
+  * NOTE: They can't be transparent since the content needs to scroll below.
   */
   ".cm-gutters": {
-    background: "var(--surface-bg)"
+    background: "var(--surface-bg)",
+    borderRight: "none"
   },
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
@@ -2086,7 +2033,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "var(--dx-hoverSurface)"
+    background: "var(--dx-cmActiveLine)"
   },
   /**
   * Cursor (layer).
@@ -2234,7 +2181,7 @@ var defaultTheme = {
 };
 
 // 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 __dxlog_file8 = "/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,
@@ -2259,7 +2206,7 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView9.exceptionSink.of((err) => {
       log6.catch(err, void 0, {
-        F: __dxlog_file9,
+        F: __dxlog_file8,
         L: 93,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2347,7 +2294,6 @@ import { codeFolding, foldGutter } from "@codemirror/language";
 import { EditorView as EditorView10 } from "@codemirror/view";
 import React2 from "react";
 import { Icon } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
 var folding = (_props = {}) => [
   codeFolding({
     placeholderDOM: () => {
@@ -2356,12 +2302,13 @@ var folding = (_props = {}) => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      return renderRoot(createElement("div", {
+      const el = createElement("div", {
         className: "flex h-full items-center"
-      }), /* @__PURE__ */ React2.createElement(Icon, {
+      });
+      return renderRoot(el, /* @__PURE__ */ React2.createElement(Icon, {
         icon: "ph--caret-right--regular",
+        size: 3,
         classNames: [
-          getSize(3),
           "mx-3 cursor-pointer",
           open && "rotate-90"
         ]
@@ -2371,7 +2318,8 @@ var folding = (_props = {}) => [
   EditorView10.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
-      transition: "opacity 0.3s"
+      transition: "opacity 0.3s",
+      width: "32px"
     },
     ".cm-foldGutter:hover": {
       opacity: 1
@@ -3345,7 +3293,7 @@ var getFormatting = (state2) => {
     null
   ];
   let link = false;
-  let blockQuote = null;
+  let blockQuote2 = null;
   let listStyle = null;
   const stack = [];
   let currentBlock = null;
@@ -3454,10 +3402,10 @@ var getFormatting = (state2) => {
               hasList = stack[i] === "TaskList" ? "task" : stack[i] === "BulletList" ? "bullet" : "ordered";
             }
           }
-          if (blockQuote === null) {
-            blockQuote = hasQuote;
-          } else if (!hasQuote && blockQuote) {
-            blockQuote = false;
+          if (blockQuote2 === null) {
+            blockQuote2 = hasQuote;
+          } else if (!hasQuote && blockQuote2) {
+            blockQuote2 = false;
           }
           if (listStyle === null) {
             listStyle = hasList;
@@ -3476,7 +3424,7 @@ var getFormatting = (state2) => {
   return {
     blankLine,
     blockType: blockType || null,
-    blockQuote: blockQuote ?? false,
+    blockQuote: blockQuote2 ?? false,
     code: inline[3] ?? false,
     emphasis: inline[1] ?? false,
     strong: inline[0] ?? false,
@@ -3727,12 +3675,6 @@ var markdownHighlightStyle = (_options = {}) => {
       ],
       class: theme.code
     },
-    {
-      tag: [
-        markdownTags.QuoteMark
-      ],
-      class: theme.blockquote
-    },
     {
       tag: [
         markdownTags.TableCell
@@ -3814,7 +3756,7 @@ var convertTreeToJson = (state2) => {
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect4 } from "@codemirror/state";
 import { EditorView as EditorView16, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { invariant as invariant4 } from "@dxos/invariant";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
@@ -4077,6 +4019,15 @@ var formattingStyles = EditorView14.theme({
     width: `${orderedListIndentationWidth}px`
   },
   /**
+  * Blockquote.
+  */
+  "& .cm-blockquote": {
+    background: "var(--dx-cmCodeblock)",
+    borderLeft: "2px solid var(--dx-cmSeparator)",
+    paddingLeft: "1rem",
+    margin: "0"
+  },
+  /**
   * Code and codeblocks.
   */
   "& .cm-code": {
@@ -4236,7 +4187,7 @@ var TableWidget = class extends WidgetType4 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4259,6 +4210,7 @@ var LinkButton = class extends WidgetType5 {
   eq(other) {
     return this.url === other.url;
   }
+  // TODO(burdon): Create icon and link directly without react?
   toDOM(view) {
     const el = document.createElement("span");
     this.render(el, this.url);
@@ -4326,6 +4278,9 @@ var TextWidget = class extends WidgetType5 {
   }
 };
 var hide = Decoration7.replace({});
+var blockQuote = Decoration7.line({
+  class: mx2("cm-blockquote")
+});
 var fencedCodeLine = Decoration7.line({
   class: mx2("cm-code cm-codeblock-line")
 });
@@ -4365,9 +4320,9 @@ var buildDecorations2 = (view, options, focus) => {
   const { state: state2 } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant4(level > 0, void 0, {
-      F: __dxlog_file10,
-      L: 176,
+    invariant3(level > 0, void 0, {
+      F: __dxlog_file9,
+      L: 178,
       S: void 0,
       A: [
         "level > 0",
@@ -4404,9 +4359,9 @@ var buildDecorations2 = (view, options, focus) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant4(listLevels.length, void 0, {
-      F: __dxlog_file10,
-      L: 198,
+    invariant3(listLevels.length, void 0, {
+      F: __dxlog_file9,
+      L: 200,
       S: void 0,
       A: [
         "listLevels.length",
@@ -4499,7 +4454,30 @@ var buildDecorations2 = (view, options, focus) => {
         atomicDeco.add(line.from, to, checked ? checkedTask : uncheckedTask);
         break;
       }
+      //
+      // Blockquote > QuoteMark > Paragraph
+      //
+      case "Blockquote": {
+        const editing = editingRange(state2, node, focus);
+        const quoteMark = node.node.getChild("QuoteMark");
+        const paragraph = node.node.getChild("Paragraph");
+        if (!editing && quoteMark && paragraph) {
+          atomicDeco.add(quoteMark.from, paragraph.from, hide);
+        }
+        for (const block of view.viewportLineBlocks) {
+          if (block.to < node.from) {
+            continue;
+          }
+          if (block.from > node.to) {
+            break;
+          }
+          deco.add(block.from, block.from, blockQuote);
+        }
+        break;
+      }
+      //
       // CommentBlock
+      //
       case "CommentBlock": {
         const editing = editingRange(state2, node, focus);
         for (const block of view.viewportLineBlocks) {
@@ -4509,16 +4487,18 @@ var buildDecorations2 = (view, options, focus) => {
           if (block.from > node.to) {
             break;
           }
-          const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*-->$/.test(state2.doc.sliceString(block.from, block.to));
-          deco.add(block.from, block.from, first ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine);
-          if (!editing && (first || last)) {
+          const isFirst = block.from <= node.from;
+          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state2.doc.sliceString(block.from, block.to));
+          deco.add(block.from, block.from, isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine);
+          if (!editing && (isFirst || isLast)) {
             atomicDeco.add(block.from, block.to, hide);
           }
         }
         break;
       }
+      //
       // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
+      //
       case "FencedCode": {
         for (const block of view.viewportLineBlocks) {
           if (block.to < node.from) {
@@ -4537,7 +4517,9 @@ var buildDecorations2 = (view, options, focus) => {
         }
         return false;
       }
+      //
       // Link > [LinkMark, URL]
+      //
       case "Link": {
         const marks = node.node.getChildren("LinkMark");
         const urlNode = node.node.getChild("URL");
@@ -4564,7 +4546,9 @@ var buildDecorations2 = (view, options, focus) => {
         }
         break;
       }
+      //
       // HR
+      //
       case "HorizontalRule": {
         if (!editingRange(state2, node, focus)) {
           deco.add(node.from, node.to, horizontalRule);
@@ -4661,40 +4645,42 @@ var decorateMarkdown = (options = {}) => {
 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 = 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;
-  }
-  const url = link && link.getChild("URL");
-  if (!url || !link) {
-    return null;
-  }
-  const urlText = view.state.sliceDoc(url.from, url.to);
-  return {
-    pos: link.from,
-    end: link.to,
-    above: true,
-    create: () => {
-      const el = document.createElement("div");
-      el.className = tooltipContent({}, "pli-2 plb-1");
-      render(el, urlText);
-      return {
-        dom: el,
-        offset: {
-          x: 0,
-          y: 4
-        }
-      };
+var linkTooltip = (render) => {
+  return hoverTooltip2((view, 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;
     }
-  };
-});
+    const url = link && link.getChild("URL");
+    if (!url || !link) {
+      return null;
+    }
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement("div");
+        el.className = tooltipContent({}, "pli-2 plb-1");
+        render(el, urlText);
+        return {
+          dom: el,
+          offset: {
+            x: 0,
+            y: 4
+          }
+        };
+      }
+    };
+  });
+};
 
 // packages/ui/react-ui-editor/src/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
 import { log as log7 } from "@dxos/log";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -4709,7 +4695,7 @@ var mention = ({ onSearch }) => {
         log7.info("completion context", {
           context
         }, {
-          F: __dxlog_file11,
+          F: __dxlog_file10,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -4730,7 +4716,6 @@ var mention = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/modes.ts
-import { Facet as Facet6 } from "@codemirror/state";
 import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
@@ -4745,9 +4730,7 @@ var EditorInputModes = [
   "vim",
   "vscode"
 ];
-var editorInputMode = Facet6.define({
-  combine: (modes) => modes[0] ?? {}
-});
+var editorInputMode = singleValueFacet({});
 var InputModeExtensions = {
   default: [],
   vscode: [
@@ -4778,101 +4761,8 @@ var InputModeExtensions = {
   ]
 };
 
-// packages/ui/react-ui-editor/src/extensions/state.ts
-import { Transaction as Transaction2 } from "@codemirror/state";
-import { EditorView as EditorView17, 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";
-var __dxlog_file12 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/state.ts";
-var stateRestoreAnnotation = "dxos.org/cm/state-restore";
-var keyPrefix = "dxos.org/react-ui-editor/state";
-var localStorageStateStoreAdapter = {
-  getState: (id) => {
-    invariant5(id, void 0, {
-      F: __dxlog_file12,
-      L: 34,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    const state2 = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state2 ? JSON.parse(state2) : void 0;
-  },
-  setState: (id, state2) => {
-    invariant5(id, void 0, {
-      F: __dxlog_file12,
-      L: 40,
-      S: void 0,
-      A: [
-        "id",
-        ""
-      ]
-    });
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state2));
-  }
-};
-var createEditorStateTransaction = ({ scrollTo, selection }) => {
-  return {
-    selection,
-    scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView17.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).
-    // EditorView.domEventHandlers({
-    //   scroll: (event) => {
-    //     setStateDebounced(id, {});
-    //   },
-    // }),
-    EditorView17.updateListener.of(({ view, transactions }) => {
-      const id = view.state.facet(documentId2);
-      if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
-        return;
-      }
-      if (setState) {
-        const { scrollTop } = view.scrollDOM;
-        const pos = view.posAtCoords({
-          x: 0,
-          y: scrollTop
-        });
-        if (pos !== null) {
-          const { anchor, head } = view.state.selection.main;
-          setStateDebounced(id, {
-            scrollTo: pos,
-            selection: {
-              anchor,
-              head
-            }
-          });
-        }
-      }
-    }),
-    getState && keymap9.of([
-      {
-        key: "ctrl-r",
-        run: (view) => {
-          const state2 = getState(view.state.facet(documentId2));
-          if (state2) {
-            view.dispatch(createEditorStateTransaction(state2));
-          }
-          return true;
-        }
-      }
-    ])
-  ].filter(isNotFalsy3);
-};
-
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap9 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4882,7 +4772,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap10.of([
+    keymap9.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -4929,7 +4819,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-var iconStyles = getSize2(5);
+var iconStyles = getSize(5);
 var buttonStyles = "min-bs-0 p-2";
 var tooltipProps = {
   side: "top",
@@ -4944,8 +4834,6 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
   return /* @__PURE__ */ React3.createElement(ToolbarContextProvider, {
     onAction,
     state: state2
-  }, /* @__PURE__ */ React3.createElement(DensityProvider, {
-    density: "fine"
   }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
     elevation: "chrome"
   }, /* @__PURE__ */ React3.createElement(NaturalToolbar.Root, {
@@ -4956,7 +4844,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
     style: {
       contain: "layout"
     }
-  }, children))));
+  }, children)));
 };
 var ToolbarToggleButton = ({ Icon: Icon2, children, ...props }) => {
   return /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
@@ -5313,20 +5201,20 @@ var Toolbar = {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView17 } from "@codemirror/view";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 var margin = "!mt-[1rem]";
 var editorContent = mx3(margin, "!mli-auto w-full max-w-[min(50rem,100%-2rem)]");
 var editorFullWidth = mx3(margin);
 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 = EditorView18.theme({
+var editorGutter = EditorView17.theme({
   // Match margin from content.
   ".cm-gutters": {
     marginTop: "16px",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView18.theme({
+var editorMonospace = EditorView17.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -5339,17 +5227,16 @@ var useActionHandler = (view) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView19 } 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";
-import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
-var __dxlog_file13 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+import { getProviderValue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
   const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
   const [instanceId] = useState4(() => `text-editor-${++instanceCount}`);
-  const onUpdate = useRef2();
   const [view, setView] = useState4();
   const parentRef = useRef2(null);
   useEffect3(() => {
@@ -5360,7 +5247,7 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file13,
+        F: __dxlog_file11,
         L: 76,
         S: void 0,
         C: (f, a) => f(...a)
@@ -5379,46 +5266,38 @@ var useTextEditor = (props = {}, deps = []) => {
       }
       const state2 = EditorState2.create({
         doc: initialValue,
-        selection: initialSelection,
+        // selection: initialSelection,
         extensions: [
-          id && documentId2.of(id),
-          // NOTE: Doesn't catch errors in keymap functions.
-          EditorView19.exceptionSink.of((err) => {
+          id && documentId.of(id),
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
+          EditorView18.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
-              F: __dxlog_file13,
+              F: __dxlog_file11,
               L: 98,
               S: void 0,
               C: (f, a) => f(...a)
             });
-          }),
-          extensions,
-          EditorView19.updateListener.of(() => {
-            setTimeout(() => {
-              onUpdate.current?.();
-            });
           })
-        ].filter(isNotFalsy4)
+        ].filter(isNotFalsy3)
       });
-      view2 = new EditorView19({
+      view2 = new EditorView18({
         parent: parentRef.current,
-        selection: initialSelection,
         state: state2,
-        // NOTE: Uncomment to debug/monitor all transactions.
-        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        dispatchTransactions: (trs, view3) => {
-          if (debug) {
-            logChanges(trs);
-          }
-          view3.update(trs);
-        }
+        scrollTo: scrollTo ? EditorView18.scrollIntoView(scrollTo, {
+          yMargin: 96
+        }) : void 0,
+        dispatchTransactions: debug ? debugDispatcher : void 0
       });
-      if (!initialValue && moveToEndOfLine) {
+      if (moveToEndOfLine && !initialSelection) {
         const { to } = view2.state.doc.lineAt(0);
-        view2.dispatch({
-          selection: {
-            anchor: to
-          }
-        });
+        if (to) {
+          view2.dispatch({
+            selection: {
+              anchor: to
+            }
+          });
+        }
       }
       setView(view2);
     }
@@ -5426,8 +5305,8 @@ var useTextEditor = (props = {}, deps = []) => {
       log8("destroy", {
         id
       }, {
-        F: __dxlog_file13,
-        L: 134,
+        F: __dxlog_file11,
+        L: 135,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5436,21 +5315,33 @@ var useTextEditor = (props = {}, deps = []) => {
   }, deps);
   useEffect3(() => {
     if (view) {
-      onUpdate.current = () => {
-        onUpdate.current = void 0;
-        view.dispatch(createEditorStateTransaction({
+      if (view.state.facet(editorInputMode).noTabster) {
+        parentRef.current?.removeAttribute("data-tabster");
+      }
+      if (scrollTo || selection) {
+        if (selection && selection.anchor > view.state.doc.length) {
+          log8.warn("invalid selection", {
+            length: view.state.doc.length,
+            scrollTo,
+            selection
+          }, {
+            F: __dxlog_file11,
+            L: 149,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return;
+        }
+        view.dispatch(createEditorStateTransaction(view.state, {
           scrollTo,
           selection
         }));
-      };
-      if (view.state.facet(editorInputMode).noTabster) {
-        parentRef.current?.removeAttribute("data-tabster");
       }
     }
   }, [
     view,
-    selection,
-    scrollTo
+    scrollTo,
+    selection
   ]);
   useEffect3(() => {
     if (view && autoFocus) {
@@ -5521,11 +5412,12 @@ export {
   createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
+  debugDispatcher,
   debugNodeLogger,
   debugTree,
   decorateMarkdown,
   defaultOptions,
-  documentId2 as documentId,
+  documentId,
   dropFile,
   editorContent,
   editorFullWidth,
@@ -5541,7 +5433,7 @@ export {
   image,
   imageUpload,
   insertTable,
-  keymap11 as keymap,
+  keymap10 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,
@@ -5564,6 +5456,7 @@ export {
   setHeading,
   setSelection,
   setStyle,
+  singleValueFacet,
   state,
   table,
   tags2 as tags,