@dxos/react-ui-editor 0.3.11-main.4eab977 → 0.3.11-main.4faaf44

package/src/components/TextEditor/TextEditor.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { EditorState, type Extension } from '@codemirror/state';
+import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
@@ -14,18 +14,21 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
   useState,
 } from 'react';
 
-import { generateName } from '@dxos/display-name';
+import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
+import { attentionSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle, setCommentRange } from '../../extensions';
-import { type CommentRange, type EditorModel } from '../../hooks';
+import { basicBundle, markdownBundle } from '../../extensions';
+import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
+import { logChanges } from '../../util';
 
+// TODO(burdon): Change to enum?
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
 
@@ -34,133 +37,157 @@ export type CursorInfo = {
   to: number;
   line: number;
   lines: number;
+  length: number;
   after?: string;
 };
 
-export type TextEditorRef = {
-  root: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
   editor?: {
     className?: string;
-    placeholder?: string;
-    spellCheck?: boolean;
-    tabIndex?: number;
-    theme?: ThemeStyles;
+  };
+  content?: {
+    className?: string;
   };
 };
 
+// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
-  model: EditorModel;
+  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
-  comments?: CommentRange[]; // TODO(burdon): Move into extension.
-  extensions?: Extension[];
-  editorMode?: EditorMode;
+  autoFocus?: boolean;
+  lineWrapping?: boolean;
+  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  selection?: { anchor: number; head?: number };
+  editorMode?: EditorMode; // TODO(burdon): Factor out.
+  placeholder?: string;
+  theme?: ThemeStyles;
   slots?: TextEditorSlots;
+  extensions?: Extension[];
+  debug?: boolean;
 };
 
 /**
  * Base text editor.
- * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
+  (
+    {
+      model,
+      readonly,
+      autoFocus,
+      scrollTo,
+      selection,
+      editorMode,
+      theme,
+      slots = defaultSlots,
+      extensions = [],
+      debug,
+    },
+    forwardedRef,
+  ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
-      { state?: EditorState; view?: EditorView } | undefined
-    >();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
-
-    // TODO(burdon): Factor out as extension.
-    const { awareness, peer } = model;
-    useEffect(() => {
-      if (awareness && peer) {
-        awareness.setLocalStateField('user', {
-          name: peer.name ?? generateName(peer.id),
-          color: getColorForValue({ value: peer.id, type: 'color' }),
-          colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-        });
-      }
-    }, [awareness, peer, themeMode]);
+    const { themeMode } = useThemeContext();
+
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [view, setView] = useState<EditorView | null>(null);
+
+    // The view ref can be used to focus the editor.
+    // NOTE: This does not cause the parent to re-render, so the ref is not available immediately.
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
 
-    // TODO(burdon): Factor out as extension.
+    // Set focus.
     useEffect(() => {
-      if (view && comments?.length) {
-        view.dispatch({
-          effects: setCommentRange.of({ model, comments }),
-        });
+      if (autoFocus) {
+        view?.focus();
       }
-    }, [view, comments]);
+    }, [view, autoFocus]);
 
+    // Create editor state and view.
+    // The view is recreated if the model or extensions are changed.
     useEffect(() => {
-      if (!root) {
+      if (!model || !rootRef.current) {
         return;
       }
 
-      // TODO(burdon): Remember cursor position.
+      //
+      // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      //
       const state = EditorState.create({
         doc: model.text(),
+        selection,
         extensions: [
-          readonly && EditorState.readOnly.of(readonly),
-
-          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
-          editorMode === 'vim' && vim(),
+          // TODO(burdon): Doesn't catch errors in keymap functions.
+          EditorView.exceptionSink.of((err) => {
+            log.catch(err);
+          }),
 
           // Theme.
-          // TODO(burdon): Make theme configurable.
+          // TODO(burdon): Make configurable.
           EditorView.baseTheme(defaultTheme),
-          EditorView.theme(slots?.editor?.theme ?? {}),
+          EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
+          EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
+          EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
+
+          // State.
+          EditorState.readOnly.of(!!readonly),
 
           // Storage and replication.
+          // NOTE: This must come before user extensions.
           model.extension,
 
+          // TODO(burdon): Factor out (requires special handling for Escape/focus).
+          editorMode === 'vim' && vim(),
+
           // Custom.
           ...extensions,
         ].filter(Boolean) as Extension[],
       });
 
-      // NOTE: This repaints the editor.
-      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
-      // Ideally this should not happen except when changing between text objects.
-      view?.destroy();
-      setEditor({
+      //
+      // EditorView
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      //
+      const newView = new EditorView({
         state,
-        view: new EditorView({
-          state,
-          parent: root,
-          // NOTE: Uncomment to spy on all transactions.
-          // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-          // dispatch: (transaction, view) => {
-          //   view.update([transaction]);
-          // },
-        }),
+        parent: rootRef.current,
+        scrollTo,
+        // 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);
+        },
       });
 
+      view?.destroy();
+      setView(newView);
+
       return () => {
-        view?.destroy();
-        setEditor(undefined);
+        newView?.destroy();
+        setView(null);
       };
-    }, [root, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
+    // Handles tab/focus.
+    // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
           case 'Enter': {
-            view?.contentDOM.focus();
+            view?.focus();
             break;
           }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
+              rootRef.current?.focus();
+            }
             break;
           }
         }
@@ -171,42 +198,46 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        role='none'
         tabIndex={0}
-        {...slots?.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
+        {...slots.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        ref={rootRef}
       />
     );
   },
 );
 
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+// TODO(burdon): Single-line/scroll.
+export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultTextSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[basicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
   },
 );
 
-export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[markdownBundle({ themeMode, placeholder }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
@@ -215,20 +246,18 @@ export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2', inputSurface),
+    // TODO(burdon): Add focusRing by default/as property?
+    className: mx('flex flex-col grow overflow-y-auto', attentionSurface),
+  },
+  editor: {
+    className: 'h-full p-2',
   },
 };
 
 export const defaultTextSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
 };
 
 export const defaultMarkdownSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: markdownTheme,
-  },
 };