@dxos/react-ui-editor 0.4.8-main.8cb190e → 0.4.8-main.a32da92

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