@dxos/react-ui-editor 0.8.1-main.ae460ac → 0.8.1-staging.391c573

package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,uBAAuB,CAAC;AAM/B,OAAO,EACL,WAAW,EAMX,KAAK,KAAK,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAgBrE,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;;;wDAEsD,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDnE,wBAME;AAsBF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,QAAQ;;;CAmBpB,CAAC"}
+{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,EACL,WAAW,EAMX,KAAK,KAAK,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAgBrE,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;;;wDAEsD,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDnE,wBAME;AAsBF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,QAAQ;;;CAmBpB,CAAC"}

package/dist/types/src/extensions/folding.d.ts

@@ -1,7 +1,13 @@
 import { type Extension } from '@codemirror/state';
-export type FoldingOptions = {};
+export type FoldRange = {
+    from: number;
+    to: number;
+};
+export type FoldState = {
+    foldedRanges: FoldRange[];
+};
 /**
  * https://codemirror.net/examples/gutter
  */
-export declare const folding: (_props?: FoldingOptions) => Extension;
+export declare const folding: (state?: Record<string, FoldState>) => Extension;
 //# sourceMappingURL=folding.d.ts.map

package/dist/types/src/extensions/folding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"folding.d.ts","sourceRoot":"","sources":["../../../../src/extensions/folding.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAQnD,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC;AAEhC;;GAEG;AAEH,eAAO,MAAM,OAAO,YAAY,cAAc,KAAQ,SA0BrD,CAAC"}
+{"version":3,"file":"folding.d.ts","sourceRoot":"","sources":["../../../../src/extensions/folding.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAUnD,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE,SAAS,EAAE,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,WAAW,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAQ,SA6D/D,CAAC"}

package/dist/types/src/extensions/selection.d.ts

@@ -11,14 +11,9 @@ export type EditorSelectionState = {
     scrollTo?: number;
     selection?: EditorSelection;
 };
-export type EditorStateStore = {
-    setState: (id: string, state: EditorSelectionState) => void;
-    getState: (id: string) => EditorSelectionState | undefined;
-};
 export declare const createEditorStateTransaction: ({ scrollTo, selection }: EditorSelectionState) => TransactionSpec;
-export declare const createEditorStateStore: (keyPrefix: string) => EditorStateStore;
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
-export declare const selectionState: ({ getState, setState }?: Partial<EditorStateStore>) => Extension;
+export declare const selectionState: (state?: Record<string, EditorSelectionState>) => Extension;
 //# sourceMappingURL=selection.d.ts.map

package/dist/types/src/extensions/selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../src/extensions/selection.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAStF;;GAEG;AACH,eAAO,MAAM,UAAU,mDAA6B,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,oBAAoB,GAAG,SAAS,CAAC;CAC5D,CAAC;AAIF,eAAO,MAAM,4BAA4B,4BAA6B,oBAAoB,KAAG,eAO5F,CAAC;AAEF,eAAO,MAAM,sBAAsB,cAAe,MAAM,KAAG,gBAWzD,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,cAAc,4BAA4B,OAAO,CAAC,gBAAgB,CAAC,KAAQ,SAuCvF,CAAC"}
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../src/extensions/selection.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOtF;;GAEG;AACH,eAAO,MAAM,UAAU,mDAA6B,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,4BAA4B,4BAA6B,oBAAoB,KAAG,eAO5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,WAAW,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,KAAQ,SAuCjF,CAAC"}

package/dist/types/src/hooks/useTextEditor.d.ts

@@ -1,13 +1,13 @@
 import { type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import { type TabsterTypes } from '@fluentui/react-tabster';
 import { type DependencyList, type KeyboardEventHandler, type RefObject } from 'react';
 import { type MaybeProvider } from '@dxos/util';
 import { type EditorSelection } from '../extensions';
 export type UseTextEditor = {
     parentRef: RefObject<HTMLDivElement>;
     view?: EditorView;
-    focusAttributes: ReturnType<typeof useFocusableGroup> & {
+    focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
         tabIndex: 0;
         onKeyUp: KeyboardEventHandler<HTMLDivElement>;
     };
@@ -31,7 +31,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
     debug?: boolean;
 };
 /**
- * Hook for creating editor.
+ * Creates codemirror text editor.
  */
 export declare const useTextEditor: (props?: MaybeProvider<UseTextEditorProps>, deps?: DependencyList) => UseTextEditor;
 //# sourceMappingURL=useTextEditor.d.ts.map

package/dist/types/src/hooks/useTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgC,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9E,OAAO,EAAmB,KAAK,eAAe,EAA4C,MAAM,eAAe,CAAC;AAGhH,MAAM,MAAM,aAAa,GAAG;IAE1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,aAAa,CAAC,kBAAkB,CAAC,SAClC,cAAc,KACnB,aAsHF,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgC,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9E,OAAO,EAAE,KAAK,eAAe,EAA6D,MAAM,eAAe,CAAC;AAGhH,MAAM,MAAM,aAAa,GAAG;IAE1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,CAAC,EAAE,YAAY,CAAC,mBAAmB,GAAG;QACnD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,aAAa,CAAC,kBAAkB,CAAC,SAClC,cAAc,KACnB,aA+HF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.1-main.ae460ac",
+  "version": "0.8.1-staging.391c573",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,7 +35,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.34.1",
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@lezer/common": "^1.2.2",
     "@lezer/generator": "^1.7.1",
     "@lezer/highlight": "^1.2.1",
@@ -51,20 +51,20 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.1-main.ae460ac",
-    "@dxos/async": "0.8.1-main.ae460ac",
-    "@dxos/context": "0.8.1-main.ae460ac",
-    "@dxos/debug": "0.8.1-main.ae460ac",
-    "@dxos/automerge": "0.8.1-main.ae460ac",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/invariant": "0.8.1-main.ae460ac",
-    "@dxos/display-name": "0.8.1-main.ae460ac",
-    "@dxos/log": "0.8.1-main.ae460ac",
-    "@dxos/live-object": "0.8.1-main.ae460ac",
-    "@dxos/protocols": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-menu": "0.8.1-main.ae460ac",
-    "@dxos/react-hooks": "0.8.1-main.ae460ac",
-    "@dxos/util": "0.8.1-main.ae460ac"
+    "@dxos/async": "0.8.1-staging.391c573",
+    "@dxos/automerge": "0.8.1-staging.391c573",
+    "@dxos/app-graph": "0.8.1-staging.391c573",
+    "@dxos/context": "0.8.1-staging.391c573",
+    "@dxos/debug": "0.8.1-staging.391c573",
+    "@dxos/display-name": "0.8.1-staging.391c573",
+    "@dxos/echo-schema": "0.8.1-staging.391c573",
+    "@dxos/invariant": "0.8.1-staging.391c573",
+    "@dxos/live-object": "0.8.1-staging.391c573",
+    "@dxos/protocols": "0.8.1-staging.391c573",
+    "@dxos/react-hooks": "0.8.1-staging.391c573",
+    "@dxos/log": "0.8.1-staging.391c573",
+    "@dxos/react-ui-menu": "0.8.1-staging.391c573",
+    "@dxos/util": "0.8.1-staging.391c573"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -88,23 +88,23 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/automerge": "0.8.1-main.ae460ac",
-    "@dxos/echo-signals": "0.8.1-main.ae460ac",
-    "@dxos/config": "0.8.1-main.ae460ac",
-    "@dxos/keyboard": "0.8.1-main.ae460ac",
-    "@dxos/random": "0.8.1-main.ae460ac",
-    "@dxos/react-client": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/storybook-utils": "0.8.1-main.ae460ac"
+    "@dxos/keyboard": "0.8.1-staging.391c573",
+    "@dxos/echo-signals": "0.8.1-staging.391c573",
+    "@dxos/config": "0.8.1-staging.391c573",
+    "@dxos/random": "0.8.1-staging.391c573",
+    "@dxos/react-client": "0.8.1-staging.391c573",
+    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
+    "@dxos/storybook-utils": "0.8.1-staging.391c573",
+    "@dxos/react-ui": "0.8.1-staging.391c573",
+    "@dxos/automerge": "0.8.1-staging.391c573"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac",
-    "@dxos/react-client": "0.8.1-main.ae460ac"
+    "@dxos/react-client": "0.8.1-staging.391c573",
+    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
+    "@dxos/react-ui": "0.8.1-staging.391c573"
   },
   "publishConfig": {
     "access": "public"

package/src/TextEditor.stories.tsx

@@ -409,22 +409,14 @@ const headings = str(
     .flat(),
 );
 
-const global = new Map<string, EditorSelectionState>();
+const global: Record<string, EditorSelectionState> = {};
 
 export const Folding = {
   render: () => <DefaultStory text={text} extensions={[folding()]} />,
 };
 
 export const Scrolling = {
-  render: () => (
-    <DefaultStory
-      text={str('# Large Document', '', longText)}
-      extensions={selectionState({
-        setState: (id, state) => global.set(id, state),
-        getState: (id) => global.get(id),
-      })}
-    />
-  ),
+  render: () => <DefaultStory text={str('# Large Document', '', longText)} extensions={selectionState(global)} />,
 };
 
 export const ScrollingWithImages = {

package/src/extensions/folding.tsx

@@ -2,45 +2,88 @@
 // Copyright 2024 DXOS.org
 //
 
-import { codeFolding, foldGutter } from '@codemirror/language';
+import { codeFolding, foldGutter, foldedRanges, foldEffect } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import React from 'react';
 
+import { debounce } from '@dxos/async';
 import { Icon } from '@dxos/react-ui';
 
+import { documentId } from './selection';
 import { createElement, renderRoot } from '../util';
 
-export type FoldingOptions = {};
+export type FoldRange = {
+  from: number;
+  to: number;
+};
+
+export type FoldState = {
+  foldedRanges: FoldRange[];
+};
 
 /**
  * https://codemirror.net/examples/gutter
  */
-// TODO(burdon): Remember folding state (to state).
-export const folding = (_props: FoldingOptions = {}): Extension => [
-  codeFolding({
-    placeholderDOM: () => {
-      return document.createElement('span'); // Collapse content.
-    },
-  }),
-  foldGutter({
-    markerDOM: (open) => {
-      // TODO(burdon): Use sprite directly.
-      const el = createElement('div', { className: 'flex h-full items-center' });
-      return renderRoot(
-        el,
-        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
-      );
-    },
-  }),
-  EditorView.theme({
-    '.cm-foldGutter': {
-      opacity: 0.3,
-      transition: 'opacity 0.3s',
-      width: '32px',
-    },
-    '.cm-foldGutter:hover': {
-      opacity: 1,
-    },
-  }),
-];
+export const folding = (state: Record<string, FoldState> = {}): Extension => {
+  const setState = (id: string, foldState: FoldState) => {
+    state[id] = foldState;
+  };
+  const setStateDebounced = debounce(setState, 1_000);
+  let initialized = false;
+
+  return [
+    codeFolding({
+      placeholderDOM: () => {
+        return document.createElement('span'); // Collapse content.
+      },
+    }),
+    foldGutter({
+      markerDOM: (open) => {
+        // TODO(burdon): Use sprite directly.
+        const el = createElement('div', { className: 'flex h-full items-center' });
+        return renderRoot(
+          el,
+          <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+        );
+      },
+    }),
+    EditorView.theme({
+      '.cm-foldGutter': {
+        opacity: 0.3,
+        transition: 'opacity 0.3s',
+        width: '32px',
+      },
+      '.cm-foldGutter:hover': {
+        opacity: 1,
+      },
+    }),
+    EditorView.updateListener.of(({ view }) => {
+      const id = view.state.facet(documentId);
+      if (!id) {
+        return;
+      }
+
+      // Handle initial state restoration only once
+      if (!initialized) {
+        initialized = true;
+        const foldState = state[id];
+        if (foldState?.foldedRanges?.length) {
+          view.dispatch({
+            effects: foldState.foldedRanges.map((range) => foldEffect.of({ from: range.from, to: range.to })),
+          });
+        }
+        return;
+      }
+
+      // Track fold changes for saving state
+      const decorations = foldedRanges(view.state);
+      const ranges: FoldRange[] = [];
+      decorations.between(0, view.state.doc.length, (from: number, to: number) => {
+        ranges.push({ from, to });
+      });
+      const foldState: FoldState = { foldedRanges: ranges };
+      setStateDebounced?.(id, foldState);
+    }),
+  ];
+};

package/src/extensions/selection.ts

@@ -6,8 +6,6 @@ import { type Extension, Transaction, type TransactionSpec } from '@codemirror/s
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
-import { invariant } from '@dxos/invariant';
-import { isNotFalsy } from '@dxos/util';
 
 import { singleValueFacet } from '../util';
 
@@ -26,11 +24,6 @@ export type EditorSelectionState = {
   selection?: EditorSelection;
 };
 
-export type EditorStateStore = {
-  setState: (id: string, state: EditorSelectionState) => void;
-  getState: (id: string) => EditorSelectionState | undefined;
-};
-
 const stateRestoreAnnotation = 'dxos.org/cm/state-restore';
 
 export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
@@ -42,23 +35,13 @@ export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSele
   };
 };
 
-export const createEditorStateStore = (keyPrefix: string): EditorStateStore => ({
-  getState: (id) => {
-    invariant(id);
-    const state = localStorage.getItem(`${keyPrefix}/${id}`);
-    return state ? JSON.parse(state) : undefined;
-  },
-
-  setState: (id, state) => {
-    invariant(id);
-    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
-  },
-});
-
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
-export const selectionState = ({ getState, setState }: Partial<EditorStateStore> = {}): Extension => {
+export const selectionState = (state: Record<string, EditorSelectionState> = {}): Extension => {
+  const setState = (id: string, selectionState: EditorSelectionState) => {
+    state[id] = selectionState;
+  };
   const setStateDebounced = debounce(setState!, 1_000);
 
   return [
@@ -74,27 +57,24 @@ export const selectionState = ({ getState, setState }: Partial<EditorStateStore>
         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 } });
-        }
+      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 &&
-      keymap.of([
-        {
-          key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
-          run: (view) => {
-            const state = getState(view.state.facet(documentId));
-            if (state) {
-              view.dispatch(createEditorStateTransaction(state));
-            }
-            return true;
-          },
+    keymap.of([
+      {
+        key: 'ctrl-r', // TODO(burdon): Setting to jump back to selection.
+        run: (view) => {
+          const selection = state[view.state.facet(documentId)];
+          if (selection) {
+            view.dispatch(createEditorStateTransaction(selection));
+          }
+          return true;
         },
-      ]),
-  ].filter(isNotFalsy);
+      },
+    ]),
+  ];
 };

package/src/hooks/useTextEditor.ts

@@ -4,7 +4,7 @@
 
 import { EditorState, type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
 import {
   type DependencyList,
   type KeyboardEventHandler,
@@ -19,14 +19,14 @@ import {
 import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
-import { editorInputMode, type EditorSelection, documentId, createEditorStateTransaction } from '../extensions';
+import { type EditorSelection, documentId, createEditorStateTransaction, editorInputMode } from '../extensions';
 import { debugDispatcher } from '../util';
 
 export type UseTextEditor = {
   // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
-  focusAttributes: ReturnType<typeof useFocusableGroup> & {
+  focusAttributes?: TabsterTypes.TabsterDOMAttribute & {
     tabIndex: 0;
     onKeyUp: KeyboardEventHandler<HTMLDivElement>;
   };
@@ -55,7 +55,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
 let instanceCount = 0;
 
 /**
- * Hook for creating editor.
+ * Creates codemirror text editor.
  */
 export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
@@ -155,9 +155,11 @@ export const useTextEditor = (
     }
   }, [autoFocus, view]);
 
-  const focusableGroup = useFocusableGroup({
+  const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: 'limited',
-    ignoreDefaultKeydown: { Escape: view?.state.facet(editorInputMode).noTabster },
+    ignoreDefaultKeydown: {
+      Escape: view?.state.facet(editorInputMode).noTabster,
+    },
   });
 
   // Focus editor on Enter (e.g., when tabbing to this component).
@@ -176,6 +178,13 @@ export const useTextEditor = (
     [view],
   );
 
-  const focusAttributes = { tabIndex: 0 as const, ...focusableGroup, onKeyUp: handleKeyUp };
-  return { parentRef, view, focusAttributes };
+  return {
+    parentRef,
+    view,
+    focusAttributes: {
+      tabIndex: 0 as const,
+      ...focusableGroupAttrs,
+      onKeyUp: handleKeyUp,
+    },
+  };
 };