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

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,
+    },
+  };
 };