@dxos/react-ui-editor 0.6.12-staging.e11e696 → 0.6.12

package/dist/lib/browser/index.mjs

@@ -1,12 +1,3 @@
-import {
-  Cursor,
-  createEditorStateTransaction,
-  documentId,
-  localStorageStateStoreAdapter,
-  singleValueFacet,
-  state
-} from "./chunk-AZWYO7TE.mjs";
-
 // packages/ui/react-ui-editor/src/translations.ts
 var translationKey = "react-ui-editor";
 var translations_default = [
@@ -43,7 +34,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-editor/src/index.ts
-import { keymap as keymap10 } from "@codemirror/view";
+import { keymap as keymap11 } from "@codemirror/view";
 import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
@@ -59,6 +50,47 @@ import { getSize as getSize2 } from "@dxos/react-ui-theme";
 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"
 });
@@ -121,7 +153,7 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
 var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
-  const extensions = [
+  const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
     // TODO(burdon): Set custom keymap.
@@ -138,7 +170,7 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
     })
   ];
   if (onSearch) {
-    extensions.push(
+    extentions.push(
       // TODO(burdon): Optional decoration via addToOptions
       markdownLanguage.data.of({
         autocomplete: (context) => {
@@ -154,7 +186,7 @@ var autocomplete = ({ activateOnTyping, override, onSearch } = {}) => {
       })
     );
   }
-  return extensions;
+  return extentions;
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
@@ -452,7 +484,7 @@ var automerge = (accessor) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
-import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
+import { Annotation as Annotation2, Facet as Facet2, 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";
@@ -467,7 +499,9 @@ var dummyProvider = {
   update: () => {
   }
 };
-var awarenessProvider = singleValueFacet(dummyProvider);
+var awarenessProvider = Facet2.define({
+  combine: (providers) => providers[0] ?? dummyProvider
+});
 var RemoteSelectionChangedAnnotation = Annotation2.define();
 var awareness = (provider = dummyProvider) => {
   return [
@@ -482,7 +516,7 @@ var RemoteSelectionsDecorator = class {
   constructor(view) {
     this._ctx = new Context(void 0, {
       F: __dxlog_file2,
-      L: 80
+      L: 82
     });
     this.decorations = RangeSet.of([]);
     this._cursorConverter = view.state.facet(Cursor.converter);
@@ -1110,9 +1144,11 @@ 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 { StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
 import { showTooltip } from "@codemirror/view";
-var commandConfig = singleValueFacet();
+var commandConfig = Facet3.define({
+  combine: (providers) => providers[0]
+});
 var commandState = StateField3.define({
   create: () => ({}),
   update: (state2, tr) => {
@@ -1319,7 +1355,7 @@ var command = (options) => {
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
+import { Facet as Facet4, 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";
@@ -1416,6 +1452,9 @@ 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();
@@ -1486,7 +1525,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log5.warn("Invalid range:", range, {
         F: __dxlog_file7,
-        L: 143,
+        L: 147,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1648,13 +1687,15 @@ var createComment = (view) => {
   }
   return false;
 };
-var optionsFacet = singleValueFacet();
+var optionsFacet = Facet4.define({
+  combine: (providers) => providers[0]
+});
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
   const handleSelect = debounce((state2) => options.onSelect?.(state2), 200);
   return [
     optionsFacet.of(options),
-    options.id ? documentId.of(options.id) : void 0,
+    documentId.of(options.id),
     commentsState,
     commentsDecorations,
     handleCommentClick,
@@ -1662,17 +1703,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 {
@@ -1697,7 +1738,7 @@ var comments = (options = {}) => {
       // TODO(burdon): Hide on change triggered immediately?
       // hideOnChange: true,
       hoverTime: 1e3
-    }),
+    }) : [],
     //
     // Track deleted ranges and update ranges for decorations.
     //
@@ -1766,8 +1807,8 @@ var comments = (options = {}) => {
         });
       }
     }),
-    options.onUpdate && trackPastedComments(options.onUpdate)
-  ].filter(nonNullable);
+    options.onUpdate ? trackPastedComments(options.onUpdate) : []
+  ];
 };
 var scrollThreadIntoView = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -1894,6 +1935,25 @@ 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({
@@ -1956,9 +2016,11 @@ 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",
-  mark: "opacity-50",
+  // 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");
   }
@@ -2001,11 +2063,9 @@ 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)",
-    borderRight: "none"
+    background: "var(--surface-bg)"
   },
   ".cm-gutter": {},
   ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
@@ -2026,7 +2086,7 @@ var defaultTheme = {
     paddingInline: 0
   },
   ".cm-activeLine": {
-    background: "var(--dx-cmActiveLine)"
+    background: "var(--dx-hoverSurface)"
   },
   /**
   * Cursor (layer).
@@ -2174,7 +2234,7 @@ var defaultTheme = {
 };
 
 // packages/ui/react-ui-editor/src/extensions/factories.ts
-var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
+var __dxlog_file9 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
 var defaultBasicOptions = {
   allowMultipleSelections: true,
@@ -2199,7 +2259,7 @@ var createBasicExtensions = (_props) => {
     // NOTE: Doesn't catch errors in keymap functions.
     EditorView9.exceptionSink.of((err) => {
       log6.catch(err, void 0, {
-        F: __dxlog_file8,
+        F: __dxlog_file9,
         L: 93,
         S: void 0,
         C: (f, a) => f(...a)
@@ -2296,10 +2356,9 @@ var folding = (_props = {}) => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      const el = createElement("div", {
+      return renderRoot(createElement("div", {
         className: "flex h-full items-center"
-      });
-      return renderRoot(el, /* @__PURE__ */ React2.createElement(Icon, {
+      }), /* @__PURE__ */ React2.createElement(Icon, {
         icon: "ph--caret-right--regular",
         classNames: [
           getSize(3),
@@ -3286,7 +3345,7 @@ var getFormatting = (state2) => {
     null
   ];
   let link = false;
-  let blockQuote2 = null;
+  let blockQuote = null;
   let listStyle = null;
   const stack = [];
   let currentBlock = null;
@@ -3395,10 +3454,10 @@ var getFormatting = (state2) => {
               hasList = stack[i] === "TaskList" ? "task" : stack[i] === "BulletList" ? "bullet" : "ordered";
             }
           }
-          if (blockQuote2 === null) {
-            blockQuote2 = hasQuote;
-          } else if (!hasQuote && blockQuote2) {
-            blockQuote2 = false;
+          if (blockQuote === null) {
+            blockQuote = hasQuote;
+          } else if (!hasQuote && blockQuote) {
+            blockQuote = false;
           }
           if (listStyle === null) {
             listStyle = hasList;
@@ -3417,7 +3476,7 @@ var getFormatting = (state2) => {
   return {
     blankLine,
     blockType: blockType || null,
-    blockQuote: blockQuote2 ?? false,
+    blockQuote: blockQuote ?? false,
     code: inline[3] ?? false,
     emphasis: inline[1] ?? false,
     strong: inline[0] ?? false,
@@ -3668,6 +3727,12 @@ var markdownHighlightStyle = (_options = {}) => {
       ],
       class: theme.code
     },
+    {
+      tag: [
+        markdownTags.QuoteMark
+      ],
+      class: theme.blockquote
+    },
     {
       tag: [
         markdownTags.TableCell
@@ -3749,7 +3814,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 invariant3 } from "@dxos/invariant";
+import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
@@ -4012,15 +4077,6 @@ 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": {
@@ -4180,7 +4236,7 @@ var TableWidget = class extends WidgetType4 {
 };
 
 // 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 __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts";
 var Unicode = {
   emDash: "\u2014",
   bullet: "\u2022",
@@ -4203,7 +4259,6 @@ 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);
@@ -4271,9 +4326,6 @@ 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")
 });
@@ -4313,9 +4365,9 @@ var buildDecorations2 = (view, options, focus) => {
   const { state: state2 } = view;
   const headerLevels = [];
   const getHeaderLevels = (node, level) => {
-    invariant3(level > 0, void 0, {
-      F: __dxlog_file9,
-      L: 178,
+    invariant4(level > 0, void 0, {
+      F: __dxlog_file10,
+      L: 176,
       S: void 0,
       A: [
         "level > 0",
@@ -4352,9 +4404,9 @@ var buildDecorations2 = (view, options, focus) => {
     listLevels.pop();
   };
   const getCurrentListLevel = () => {
-    invariant3(listLevels.length, void 0, {
-      F: __dxlog_file9,
-      L: 200,
+    invariant4(listLevels.length, void 0, {
+      F: __dxlog_file10,
+      L: 198,
       S: void 0,
       A: [
         "listLevels.length",
@@ -4447,30 +4499,7 @@ 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) {
@@ -4480,18 +4509,16 @@ var buildDecorations2 = (view, options, focus) => {
           if (block.from > node.to) {
             break;
           }
-          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)) {
+          const first = block.from <= node.from;
+          const last = block.to >= node.to && /^(\s>)*-->$/.test(state2.doc.sliceString(block.from, block.to));
+          deco.add(block.from, block.from, first ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine);
+          if (!editing && (first || last)) {
             atomicDeco.add(block.from, block.to, hide);
           }
         }
         break;
       }
-      //
       // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-      //
       case "FencedCode": {
         for (const block of view.viewportLineBlocks) {
           if (block.to < node.from) {
@@ -4510,9 +4537,7 @@ var buildDecorations2 = (view, options, focus) => {
         }
         return false;
       }
-      //
       // Link > [LinkMark, URL]
-      //
       case "Link": {
         const marks = node.node.getChildren("LinkMark");
         const urlNode = node.node.getChild("URL");
@@ -4539,9 +4564,7 @@ var buildDecorations2 = (view, options, focus) => {
         }
         break;
       }
-      //
       // HR
-      //
       case "HorizontalRule": {
         if (!editingRange(state2, node, focus)) {
           deco.add(node.from, node.to, horizontalRule);
@@ -4638,42 +4661,40 @@ 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) => {
-  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;
+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
+        }
+      };
     }
-    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_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
 var mention = ({ onSearch }) => {
   return autocompletion2({
     // TODO(burdon): Not working.
@@ -4688,7 +4709,7 @@ var mention = ({ onSearch }) => {
         log7.info("completion context", {
           context
         }, {
-          F: __dxlog_file10,
+          F: __dxlog_file11,
           L: 26,
           S: void 0,
           C: (f, a) => f(...a)
@@ -4709,6 +4730,7 @@ 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";
@@ -4723,7 +4745,9 @@ var EditorInputModes = [
   "vim",
   "vscode"
 ];
-var editorInputMode = singleValueFacet({});
+var editorInputMode = Facet6.define({
+  combine: (modes) => modes[0] ?? {}
+});
 var InputModeExtensions = {
   default: [],
   vscode: [
@@ -4754,8 +4778,101 @@ 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 keymap9 } from "@codemirror/view";
+import { keymap as keymap10 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -4765,7 +4882,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap9.of([
+    keymap10.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -5196,20 +5313,20 @@ var Toolbar = {
 };
 
 // packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView18 } 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 = EditorView17.theme({
+var editorGutter = EditorView18.theme({
   // Match margin from content.
   ".cm-gutters": {
     marginTop: "16px",
     paddingRight: "1rem"
   }
 });
-var editorMonospace = EditorView17.theme({
+var editorMonospace = EditorView18.theme({
   ".cm-content": {
     fontFamily: fontMono
   }
@@ -5222,12 +5339,12 @@ var useActionHandler = (view) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView18 } from "@codemirror/view";
+import { EditorView as EditorView19 } 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 isNotFalsy3 } from "@dxos/util";
-var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
+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";
 var instanceCount = 0;
 var useTextEditor = (props = {}, deps = []) => {
   const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } = useMemo3(() => getProviderValue(props), deps ?? []);
@@ -5243,8 +5360,8 @@ var useTextEditor = (props = {}, deps = []) => {
         instanceId,
         doc: initialValue?.length ?? 0
       }, {
-        F: __dxlog_file11,
-        L: 78,
+        F: __dxlog_file13,
+        L: 76,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5264,26 +5381,27 @@ var useTextEditor = (props = {}, deps = []) => {
         doc: initialValue,
         selection: initialSelection,
         extensions: [
-          id && documentId.of(id),
+          id && documentId2.of(id),
           // NOTE: Doesn't catch errors in keymap functions.
-          EditorView18.exceptionSink.of((err) => {
+          EditorView19.exceptionSink.of((err) => {
             log8.catch(err, void 0, {
-              F: __dxlog_file11,
-              L: 100,
+              F: __dxlog_file13,
+              L: 98,
               S: void 0,
               C: (f, a) => f(...a)
             });
           }),
           extensions,
-          EditorView18.updateListener.of(() => {
+          EditorView19.updateListener.of(() => {
             setTimeout(() => {
               onUpdate.current?.();
             });
           })
-        ].filter(isNotFalsy3)
+        ].filter(isNotFalsy4)
       });
-      view2 = new EditorView18({
+      view2 = new EditorView19({
         parent: parentRef.current,
+        selection: initialSelection,
         state: state2,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
@@ -5308,8 +5426,8 @@ var useTextEditor = (props = {}, deps = []) => {
       log8("destroy", {
         id
       }, {
-        F: __dxlog_file11,
-        L: 135,
+        F: __dxlog_file13,
+        L: 134,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -5407,7 +5525,7 @@ export {
   debugTree,
   decorateMarkdown,
   defaultOptions,
-  documentId,
+  documentId2 as documentId,
   dropFile,
   editorContent,
   editorFullWidth,
@@ -5423,7 +5541,7 @@ export {
   image,
   imageUpload,
   insertTable,
-  keymap10 as keymap,
+  keymap11 as keymap,
   linkTooltip,
   listener,
   localStorageStateStoreAdapter,
@@ -5446,7 +5564,6 @@ export {
   setHeading,
   setSelection,
   setStyle,
-  singleValueFacet,
   state,
   table,
   tags2 as tags,