@dxos/react-ui-editor 0.4.8-main.97e86fe → 0.4.8-main.a32da92

package/src/components/TextEditor/TextEditor.tsx

@@ -18,7 +18,7 @@ import React, {
 import { log } from '@dxos/log';
 import { isNotFalsy } from '@dxos/util';
 
-import { documentId, editorMode } from '../../extensions';
+import { documentId, editorMode, focusEvent } from '../../extensions';
 import { logChanges } from '../../util';
 
 export type CursorInfo = {
@@ -34,7 +34,7 @@ export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'ext
   id?: string;
   className?: string;
   autoFocus?: boolean;
-  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  scrollTo?: StateEffect<unknown>;
   moveToEndOfLine?: boolean;
   debug?: boolean;
   dataTestId?: string;
@@ -56,14 +56,14 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       extensions,
       className,
       autoFocus,
-      scrollTo = EditorView.scrollIntoView(0),
+      scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
       moveToEndOfLine,
       debug,
       dataTestId,
     },
     forwardedRef,
   ) => {
-    // TODO(burdon): Increments by 2!
+    // NOTE: Increments by 2 in strict mode.
     const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
 
     // TODO(burdon): Make tabster optional.
@@ -104,7 +104,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
           // Focus.
           EditorView.updateListener.of((update) => {
             update.transactions.forEach((transaction) => {
-              if (transaction.isUserEvent('focus.container')) {
+              if (transaction.isUserEvent(focusEvent)) {
                 rootRef.current?.focus();
               }
             });
@@ -122,6 +122,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         state,
         parent: rootRef.current!,
         scrollTo,
+
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
         dispatchTransactions: (trs, view) => {
@@ -132,12 +133,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         },
       });
 
-      setView(view);
-
-      // Position cursor at end of line.
-      if (moveToEndOfLine) {
+      // Position cursor at end of first line.
+      if (moveToEndOfLine && !(scrollTo || selection)) {
         const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({ selection: { anchor: to } });
+        view.dispatch({ selection: { anchor: to } });
       }
 
       // Remove tabster attribute (rely on custom keymap).
@@ -145,6 +144,8 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         rootRef.current?.removeAttribute('data-tabster');
       }
 
+      setView(view);
+
       return () => {
         view?.destroy();
         setView(null);

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -76,7 +76,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
         <Toolbar.Separator />
         <Toolbar.Extended />
       </Toolbar.Root>
-      <div role='textbox' ref={parentRef} className={textBlockWidth} />;
+      <div ref={parentRef} className={textBlockWidth} />;
     </div>
   );
 };

package/src/extensions/index.ts

@@ -18,5 +18,6 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './state';
 export * from './types';
 export * from './typewriter';

package/src/extensions/modes.ts

@@ -6,6 +6,8 @@ import { type Extension, Facet } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 
+export const focusEvent = 'focus.container';
+
 export type EditorMode = 'default' | 'vim' | undefined;
 
 export type EditorConfig = {
@@ -27,7 +29,7 @@ export const EditorModes: { [mode: string]: Extension } = {
         key: 'Alt-Escape',
         run: (view) => {
           // Focus container for tab navigation.
-          view.dispatch({ userEvent: 'focus.container' });
+          view.dispatch({ userEvent: focusEvent });
           return true;
         },
       },

package/src/extensions/state.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, Transaction } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { debounce } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+import { isNotFalsy } from '@dxos/util';
+
+import { documentId } from './doc';
+
+const scrollAnnotation = 'dxos.org/cm/scrolling';
+
+// NOTE: Serializable.
+export type SelectionState = {
+  scrollTo: {
+    from: number;
+  };
+  selection: {
+    anchor: number;
+    head?: number;
+  };
+};
+
+export type StateOptions = {
+  setState: (id: string, state: SelectionState) => void;
+  getState: (id: string) => SelectionState | undefined;
+};
+
+const keyPrefix = 'dxos.org/react-ui-editor/state';
+export const localStorageStateStoreAdapter: StateOptions = {
+  setState: (id, state) => {
+    invariant(id);
+    localStorage.setItem(`${keyPrefix}/${id}`, JSON.stringify(state));
+  },
+  getState: (id) => {
+    invariant(id);
+    const state = localStorage.getItem(`${keyPrefix}/${id}`);
+    return state ? JSON.parse(state) : undefined;
+  },
+};
+
+/**
+ * Track scrolling and selection state to be restored when switching to document.
+ */
+export const state = ({ getState, setState }: Partial<StateOptions> = {}): Extension => {
+  const setStateDebounced = debounce(setState!, 1_000);
+
+  return [
+    // TODO(burdon): Track scrolling (currently only updates when cursor moves).
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
+      // TODO(burdon): Don't react to initial scroll.
+      const id = view.state.facet(documentId);
+      if (!id || transactions.some((tr) => tr.isUserEvent(scrollAnnotation))) {
+        return;
+      }
+
+      if (setState) {
+        const { top } = view.dom.getBoundingClientRect();
+        const pos = view.posAtCoords({ x: 0, y: top });
+        if (pos !== null) {
+          const { anchor, head } = view.state.selection.main;
+          setStateDebounced(id, {
+            scrollTo: { from: pos, yMargin: 0 },
+            selection: { anchor, head },
+          });
+        }
+      }
+    }),
+    getState &&
+      keymap.of([
+        {
+          key: 'ctrl-r', // TODO(burdon): Setting to jump back to bookmark.
+          run: (view) => {
+            const state = getState(view.state.facet(documentId));
+            if (state) {
+              view.dispatch({
+                effects: EditorView.scrollIntoView(state.scrollTo.from, { yMargin: 0 }),
+                selection: state.selection,
+                annotations: Transaction.userEvent.of(scrollAnnotation),
+              });
+            }
+            return true;
+          },
+        },
+      ]),
+  ].filter(isNotFalsy);
+};

package/src/hooks/useTextEditor.stories.tsx

@@ -67,7 +67,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='grow overflow-hidden'>
-        <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
+        <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
       </div>
     </div>
   );
@@ -117,7 +117,7 @@ export default {
 export const Default = {
   render: () => {
     const { parentRef } = useTextEditor();
-    return <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
   },
 };
 
@@ -127,7 +127,7 @@ export const Basic = {
     const { parentRef } = useTextEditor(() => ({
       extensions: [createBasicExtensions({ placeholder: 'Enter text...' }), createThemeExtensions({ themeMode })],
     }));
-    return <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
+    return <div className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />;
   },
 };