@dxos/react-ui-editor 0.6.12-staging.e11e696 → 0.6.13-main.041e8aa

package/src/hooks/useTextEditor.ts

@@ -20,8 +20,8 @@ import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
 import { editorInputMode } from '../extensions';
-import { type EditorSelection, createEditorStateTransaction, documentId } from '../state';
-import { logChanges } from '../util';
+import { type EditorSelection, documentId, createEditorStateTransaction } from '../state';
+import { debugDispatcher } from '../util';
 
 export type UseTextEditor = {
   // TODO(burdon): Rename.
@@ -67,8 +67,6 @@ export const useTextEditor = (
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  // Callback once view is created.
-  const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
 
@@ -89,22 +87,28 @@ export const useTextEditor = (
       }
 
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
-      // NOTE: Don't set selection here in case it is invalid (and crashes the state); dispatch below.
       const state = EditorState.create({
         doc: initialValue,
         selection: initialSelection,
         extensions: [
           id && documentId.of(id),
-          // NOTE: Doesn't catch errors in keymap functions.
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          extensions,
-          EditorView.updateListener.of(() => {
-            setTimeout(() => {
-              onUpdate.current?.();
-            });
-          }),
+          // TODO(burdon): Factor out debug inspector.
+          // ViewPlugin.fromClass(
+          //   class {
+          //     constructor(_view: EditorView) {
+          //       log('construct', { id });
+          //     }
+          //
+          //     destroy() {
+          //       log('destroy', { id });
+          //     }
+          //   },
+          // ),
         ].filter(isNotFalsy),
       });
 
@@ -112,20 +116,16 @@ export const useTextEditor = (
       view = new EditorView({
         parent: parentRef.current,
         state,
-        // NOTE: Uncomment to debug/monitor all transactions.
-        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        dispatchTransactions: (trs, view) => {
-          if (debug) {
-            logChanges(trs);
-          }
-          view.update(trs);
-        },
+        scrollTo: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : undefined,
+        dispatchTransactions: debug ? debugDispatcher : undefined,
       });
 
-      // Move to end of line after document loaded.
-      if (!initialValue && moveToEndOfLine) {
+      // Move to end of line after document loaded (unless selection is specified).
+      if (moveToEndOfLine && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
-        view.dispatch({ selection: { anchor: to } });
+        if (to) {
+          view.dispatch({ selection: { anchor: to } });
+        }
       }
 
       setView(view);
@@ -139,18 +139,16 @@ export const useTextEditor = (
 
   useEffect(() => {
     if (view) {
-      // NOTE: Set selection after first update (since content may rerender on focus).
-      onUpdate.current = () => {
-        onUpdate.current = undefined;
-        view.dispatch(createEditorStateTransaction({ scrollTo, selection }));
-      };
-
       // Remove tabster attribute (rely on custom keymap).
       if (view.state.facet(editorInputMode).noTabster) {
         parentRef.current?.removeAttribute('data-tabster');
       }
+
+      if (scrollTo || selection) {
+        view.dispatch(createEditorStateTransaction(view.state, { scrollTo, selection }));
+      }
     }
-  }, [view, selection, scrollTo]);
+  }, [view, scrollTo, selection]);
 
   useEffect(() => {
     if (view && autoFocus) {

package/src/state/state.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
+import { type EditorState, type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
@@ -42,7 +42,10 @@ export const localStorageStateStoreAdapter: EditorStateOptions = {
   },
 };
 
-export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
+export const createEditorStateTransaction = (
+  state: EditorState,
+  { scrollTo, selection }: EditorSelectionState,
+): TransactionSpec => {
   return {
     selection,
     scrollIntoView: !scrollTo,
@@ -87,7 +90,7 @@ export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}):
           run: (view) => {
             const state = getState(view.state.facet(documentId));
             if (state) {
-              view.dispatch(createEditorStateTransaction(state));
+              view.dispatch(createEditorStateTransaction(view.state, state));
             }
             return true;
           },

package/src/util.ts

@@ -3,6 +3,7 @@
 //
 
 import type { Transaction } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
@@ -19,6 +20,15 @@ export const callbackWrapper = <T extends Function>(fn: T): T =>
     }
   }) as unknown as T;
 
+/**
+ * Log all changes before dispatching them to the view.
+ * https://codemirror.net/docs/ref/#view.EditorView.dispatch
+ */
+export const debugDispatcher = (trs: readonly Transaction[], view: EditorView) => {
+  logChanges(trs);
+  view.update(trs);
+};
+
 export const logChanges = (trs: readonly Transaction[]) => {
   const changes = trs
     .flatMap((tr) => {