@dxos/react-ui-editor 0.8.1-staging.391c573 → 0.8.1-staging.5be625a

package/src/extensions/folding.tsx

@@ -2,88 +2,45 @@
 // Copyright 2024 DXOS.org
 //
 
-import { codeFolding, foldGutter, foldedRanges, foldEffect } from '@codemirror/language';
+import { codeFolding, foldGutter } 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 FoldRange = {
-  from: number;
-  to: number;
-};
-
-export type FoldState = {
-  foldedRanges: FoldRange[];
-};
+export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
-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);
-    }),
-  ];
-};
+// 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,
+    },
+  }),
+];

package/src/extensions/selection.ts

@@ -6,6 +6,8 @@ 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';
 
@@ -24,6 +26,11 @@ 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 => {
@@ -35,13 +42,23 @@ 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 = (state: Record<string, EditorSelectionState> = {}): Extension => {
-  const setState = (id: string, selectionState: EditorSelectionState) => {
-    state[id] = selectionState;
-  };
+export const selectionState = ({ getState, setState }: Partial<EditorStateStore> = {}): Extension => {
   const setStateDebounced = debounce(setState!, 1_000);
 
   return [
@@ -57,24 +74,27 @@ export const selectionState = (state: Record<string, EditorSelectionState> = {})
         return;
       }
 
-      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 } });
+      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 } });
+        }
       }
     }),
-    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;
+    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;
+          },
         },
-      },
-    ]),
-  ];
+      ]),
+  ].filter(isNotFalsy);
 };

package/src/styles/stack-item-content-class-names.ts

@@ -7,7 +7,7 @@ import { mx } from '@dxos/react-ui-theme';
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
     'dx-focus-ring-inset data-[toolbar=disabled]:pbs-2 attention-surface',
-    role === 'article' ? 'min-bs-0' : '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );
 
 export const stackItemContentToolbarClassNames = (role?: string) =>

package/src/styles/theme.ts

@@ -137,6 +137,7 @@ export const defaultTheme: ThemeStyles = {
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
+    textDecorationColor: 'var(--dx-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
   },

package/src/util/debug.ts

@@ -59,6 +59,6 @@ export const logChanges = (trs: readonly Transaction[]) => {
     .filter(Boolean);
 
   if (changes.length) {
-    log.info('changes', { changes });
+    log('changes', { changes });
   }
 };