@dxos/react-ui-editor 0.4.3-main.1ddf290 → 0.4.3-main.2a46fc0

package/src/components/TextEditor/TextEditor.tsx

@@ -4,13 +4,12 @@
 
 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';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
-  type KeyboardEvent,
   forwardRef,
+  type KeyboardEventHandler,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -23,16 +22,12 @@ import { useThemeContext } from '@dxos/react-ui';
 import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { createBasicBundle, createMarkdownExtensions } from '../../extensions';
+import { createBasicBundle, createMarkdownExtensions, editorMode } 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];
-
 export type CursorInfo = {
   from: number;
   to: number;
@@ -52,7 +47,6 @@ export type TextEditorSlots = {
   };
 };
 
-// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
@@ -60,7 +54,6 @@ export type TextEditorProps = {
   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;
@@ -74,26 +67,10 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    {
-      model,
-      readonly,
-      autoFocus,
-      scrollTo,
-      selection,
-      editorMode,
-      theme,
-      slots = defaultSlots,
-      extensions = [],
-      debug,
-    },
+    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
     forwardedRef,
   ) => {
-    // TODO(burdon): Hook causes error even if properties are not spread into div.
-    //  Uncaught TypeError: Cannot read properties of undefined (reading 'relatedTarget')
-    //  Uses event.detail, which is deprecated (not event.details). At runtime the event has a property `details`.
-    //  https://github.com/microsoft/tabster/blob/master/src/State/FocusedElement.ts#L348 (e.detail.relatedTarget)
-    //  https://github.com/microsoft/keyborg/blob/49e49b2c3ba0a5f6cc518ac46825d7551def8109/src/FocusEvent.ts#L58
-    // const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
     const { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -143,6 +120,15 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
           EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
 
+          // Focus.
+          EditorView.updateListener.of((update) => {
+            update.transactions.forEach((transaction) => {
+              if (transaction.isUserEvent('focus.container')) {
+                rootRef.current?.focus();
+              }
+            });
+          }),
+
           // State.
           EditorView.editable.of(!readonly),
           EditorState.readOnly.of(!!readonly),
@@ -151,9 +137,6 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
           // NOTE: This must come before user extensions.
           model.extension,
 
-          // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
-          editorMode === 'vim' && vim(),
-
           // Custom.
           ...extensions,
         ].filter(isNotFalsy),
@@ -180,44 +163,40 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
       view?.destroy();
       setView(newView);
 
+      // Remove tabster attribute (rely on custom keymap).
+      if (state.facet(editorMode).noTabster) {
+        rootRef.current.removeAttribute('data-tabster');
+      }
+
       return () => {
         newView?.destroy();
         setView(null);
       };
-    }, [rootRef, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, themeMode]);
 
-    // Handles tab/focus.
-    // Pressing Escape focuses the outer div (to support tab navigation); pressing Enter refocuses the editor.
-    // TODO(burdon): Convert to keymap?
-    const handleKeyUp = useCallback(
-      (event: KeyboardEvent) => {
-        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    // Focus editor on Enter (e.g., when tabbing to this component).
+    const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+      (event) => {
+        const { key } = event;
         switch (key) {
           case 'Enter': {
             view?.focus();
             break;
           }
-
-          case 'Escape': {
-            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
-              view?.focus();
-            }
-            break;
-          }
         }
       },
-      [view, editorMode],
+      [view],
     );
 
     return (
       <div
-        key={model.id}
         role='none'
+        ref={rootRef}
+        key={model.id}
         tabIndex={0}
-        {...slots.root}
-        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
-        ref={rootRef}
+        {...slots.root}
+        {...tabsterDOMAttribute}
       />
     );
   },

package/src/extensions/index.ts

@@ -13,5 +13,6 @@ export * from './cursor';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
+export * from './modes';
 export * from './outliner';
 export * from './typewriter';

package/src/extensions/modes.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension, Facet } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { vim } from '@replit/codemirror-vim';
+
+export type EditorMode = 'default' | 'vim' | undefined;
+
+export type EditorConfig = {
+  type: string;
+  noTabster?: boolean;
+};
+
+export const editorMode = Facet.define<EditorConfig, EditorConfig>({
+  combine: (modes) => modes[0] ?? {},
+});
+
+export const EditorModes: { [mode: string]: Extension } = {
+  default: [],
+  vim: [
+    vim(),
+    editorMode.of({ type: 'vim', noTabster: true }),
+    keymap.of([
+      {
+        key: 'Alt-Escape',
+        run: (view) => {
+          // Focus container for tab navigation.
+          view.dispatch({ userEvent: 'focus.container' });
+          return true;
+        },
+      },
+    ]),
+  ],
+};

package/src/index.ts

@@ -2,10 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export { type Extension, type EditorState } from '@codemirror/state';
+export { type EditorView, keymap } from '@codemirror/view';
+
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
-export { type Extension } from '@codemirror/state';
-export { type EditorView, keymap } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';