@dxos/react-ui-editor 0.4.3-main.a51bbee → 0.4.3-main.c13b549

package/src/components/TextEditor/TextEditor.tsx

@@ -4,12 +4,13 @@
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+// import { useFocusableGroup } from '@fluentui/react-tabster';
+import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
+  type KeyboardEvent,
   forwardRef,
-  type KeyboardEventHandler,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -22,12 +23,16 @@ import { useThemeContext } from '@dxos/react-ui';
 import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { createBasicBundle, createMarkdownExtensions, editorMode } from '../../extensions';
+import { createBasicBundle, createMarkdownExtensions } 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;
@@ -47,6 +52,7 @@ 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.
@@ -54,6 +60,7 @@ 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;
@@ -67,10 +74,26 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
+    {
+      model,
+      readonly,
+      autoFocus,
+      scrollTo,
+      selection,
+      editorMode,
+      theme,
+      slots = defaultSlots,
+      extensions = [],
+      debug,
+    },
     forwardedRef,
   ) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    // 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 { themeMode } = useThemeContext();
 
     const rootRef = useRef<HTMLDivElement>(null);
@@ -120,15 +143,6 @@ 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),
@@ -137,6 +151,9 @@ 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),
@@ -163,40 +180,44 @@ 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, themeMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
-    // Focus editor on Enter (e.g., when tabbing to this component).
-    const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
-      (event) => {
-        const { key } = event;
+    // 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;
         switch (key) {
           case 'Enter': {
             view?.focus();
             break;
           }
+
+          case 'Escape': {
+            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
+              view?.focus();
+            }
+            break;
+          }
         }
       },
-      [view],
+      [view, editorMode],
     );
 
     return (
       <div
-        role='none'
-        ref={rootRef}
         key={model.id}
+        role='none'
         tabIndex={0}
-        onKeyUp={handleKeyUp}
         {...slots.root}
-        {...tabsterDOMAttribute}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        onKeyUp={handleKeyUp}
+        ref={rootRef}
       />
     );
   },

package/src/extensions/index.ts

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

package/src/index.ts

@@ -2,11 +2,10 @@
 // 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';

package/dist/types/src/extensions/modes.d.ts

@@ -1,11 +0,0 @@
-import { type Extension, Facet } from '@codemirror/state';
-export type EditorMode = 'default' | 'vim' | undefined;
-export type EditorConfig = {
-    type: string;
-    noTabster?: boolean;
-};
-export declare const editorMode: Facet<EditorConfig, EditorConfig>;
-export declare const EditorModes: {
-    [mode: string]: Extension;
-};
-//# sourceMappingURL=modes.d.ts.map

package/dist/types/src/extensions/modes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAgBpD,CAAC"}

package/src/extensions/modes.ts

@@ -1,36 +0,0 @@
-//
-// 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;
-        },
-      },
-    ]),
-  ],
-};