@dxos/react-ui-editor 0.6.5 → 0.6.6-staging.23d123d

package/src/hooks/useTextEditor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorSelection, EditorState } from '@codemirror/state';
+import { EditorState, type EditorStateConfig, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import {
@@ -17,10 +17,10 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { isNotFalsy } from '@dxos/util';
+import { useDefaultValue } from '@dxos/react-ui';
+import { isNotFalsy, type MaybeFunction } from '@dxos/util';
 
-import { type TextEditorProps } from '../components';
-import { documentId } from '../extensions';
+import { documentId, editorInputMode } from '../extensions';
 import { logChanges } from '../util';
 
 export type UseTextEditor = {
@@ -32,14 +32,50 @@ export type UseTextEditor = {
   };
 };
 
-export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
+export type CursorInfo = {
+  from: number;
+  to: number;
+  line: number;
+  lines: number;
+  length: number;
+  after?: string;
+};
+
+export type UseTextEditorProps = Pick<EditorStateConfig, 'selection' | 'extensions'> & {
+  id?: string;
+  initialValue?: string;
+  className?: string;
+  autoFocus?: boolean;
+  scrollTo?: StateEffect<unknown>;
+  moveToEndOfLine?: boolean;
+  debug?: boolean;
+};
+
+let instanceCount = 0;
 
 /**
  * Hook for creating editor.
  */
-export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: DependencyList = []): UseTextEditor => {
-  let { id, doc, selection, extensions, autoFocus, scrollTo, debug } = useMemo<UseTextEditorProps>(cb, deps ?? []);
-
+export const useTextEditor = (
+  props: MaybeFunction<UseTextEditorProps> = {},
+  deps: DependencyList = [],
+): UseTextEditor => {
+  const {
+    id,
+    initialValue,
+    selection,
+    extensions,
+    autoFocus,
+    scrollTo: _scrollTo,
+    moveToEndOfLine,
+    debug,
+  } = useMemo<UseTextEditorProps>(() => {
+    return typeof props === 'function' ? props() : props;
+  }, deps ?? []);
+
+  // NOTE: Increments by 2 in strict mode.
+  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
+  const scrollTo = useDefaultValue(_scrollTo, EditorView.scrollIntoView(0, { yMargin: 0 }));
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
@@ -47,12 +83,20 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
   useEffect(() => {
     let view: EditorView;
     if (parentRef.current) {
-      log('create', { id });
+      log('create', { id, instanceId, doc: initialValue?.length ?? 0 });
+
+      let initialSelection = selection;
+      if (moveToEndOfLine && selection === undefined) {
+        const index = initialValue?.indexOf('\n');
+        const anchor = !index || index === -1 ? 0 : index;
+        initialSelection = { anchor };
+      }
 
       // 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,
+        doc: initialValue,
+        selection: initialSelection,
         extensions: [
           id && documentId.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.
@@ -70,6 +114,7 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
       view = new EditorView({
         parent: parentRef.current,
         scrollTo,
+        selection: initialSelection,
         state,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
@@ -81,6 +126,12 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
         },
       });
 
+      // Move to end of line after document loaded.
+      if (!initialValue && moveToEndOfLine) {
+        const { to } = view.state.doc.lineAt(0);
+        view.dispatch({ selection: { anchor: to } });
+      }
+
       setView(view);
     }
 
@@ -92,27 +143,29 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
 
   useEffect(() => {
     if (view) {
-      // Select end of line if not specified.
-      if (!selection && !view.state.selection.main.anchor) {
-        selection = EditorSelection.single(view.state.doc.line(1).to);
-      }
-
-      // Set selection after first update (since content may rerender on focus).
-      // TODO(burdon): Make invisible until first render?
-      if (selection || scrollTo) {
+      // TODO(burdon): Set selection after first update (since content may rerender on focus)?
+      if (scrollTo) {
         onUpdate.current = () => {
           onUpdate.current = undefined;
-          view.dispatch({ selection, effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
+          view.dispatch({ effects: scrollTo && [scrollTo], scrollIntoView: !scrollTo });
         };
       }
 
-      if (autoFocus) {
-        view.focus();
+      // Remove tabster attribute (rely on custom keymap).
+      if (view.state.facet(editorInputMode).noTabster) {
+        parentRef.current?.removeAttribute('data-tabster');
       }
     }
-  }, [view, autoFocus, selection, scrollTo]);
+  }, [view, selection, scrollTo]);
+
+  useEffect(() => {
+    if (view && autoFocus) {
+      view.focus();
+    }
+  }, [autoFocus, view]);
 
   const focusableGroup = useFocusableGroup({ tabBehavior: 'limited' });
+
   // Focus editor on Enter (e.g., when tabbing to this component).
   const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     (event) => {
@@ -130,6 +183,5 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
   );
 
   const focusAttributes = { tabIndex: 0 as const, ...focusableGroup, onKeyUp: handleKeyUp };
-
   return { parentRef, view, focusAttributes };
 };

package/src/themes/default.ts

@@ -152,19 +152,34 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-tooltip': {
     border: 'none',
-    background: 'unset',
+  },
+  '&light .cm-tooltip': {
+    background: `${get(tokens, 'extend.colors.neutral.100')} !important`,
+  },
+  '&dark .cm-tooltip': {
+    background: `${get(tokens, 'extend.colors.neutral.900')} !important`,
   },
   '.cm-tooltip-below': {},
 
   //
   // autocomplete
+  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
   //
   '.cm-tooltip-autocomplete': {
     marginTop: '4px',
     marginLeft: '-3px',
   },
-  '.cm-tooltip-autocomplete ul li': {},
-  '.cm-tooltip-autocomplete ul li[aria-selected]': {},
+  '.cm-tooltip-autocomplete > ul': {
+    maxHeight: '20em !important',
+  },
+  '.cm-tooltip-autocomplete > ul > li': {},
+  '.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
+  // TODO(burdon): Can we add a class prefix to avoid adding !important?
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
+    paddingLeft: '4px !important',
+    borderBottom: 'none !important',
+    color: get(tokens, 'extend.colors.primary.500'),
+  },
   '.cm-completionIcon': {
     display: 'none',
   },
@@ -172,7 +187,8 @@ export const defaultTheme: ThemeStyles = {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
   },
   '.cm-completionMatchedText': {
-    textDecoration: 'none',
+    textDecoration: 'none !important',
+    opacity: 0.5,
   },
 
   //

package/src/translations.ts

@@ -25,6 +25,10 @@ export default [
         'heading level label_zero': 'Paragraph',
         'heading level label_one': 'Heading level {{count}}',
         'heading level label_other': 'Heading level {{count}}',
+        'view mode label': 'Editor view',
+        'preview mode label': 'Live preview',
+        'readonly mode label': 'Read only',
+        'source mode label': 'Source',
       },
     },
   },

package/dist/types/src/components/TextEditor/TextEditor.d.ts

@@ -1,34 +0,0 @@
-import { type EditorStateConfig, type StateEffect } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import React from 'react';
-export type CursorInfo = {
-    from: number;
-    to: number;
-    line: number;
-    lines: number;
-    length: number;
-    after?: string;
-};
-export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'extensions'> & {
-    id?: string;
-    className?: string;
-    autoFocus?: boolean;
-    scrollTo?: StateEffect<unknown>;
-    moveToEndOfLine?: boolean;
-    debug?: boolean;
-    dataTestId?: string;
-};
-/**
- * Thin wrapper for text editor.
- * Handles tabster and focus management.
- */
-export declare const TextEditor: React.ForwardRefExoticComponent<Pick<EditorStateConfig, "doc" | "selection" | "extensions"> & {
-    id?: string | undefined;
-    className?: string | undefined;
-    autoFocus?: boolean | undefined;
-    scrollTo?: StateEffect<unknown> | undefined;
-    moveToEndOfLine?: boolean | undefined;
-    debug?: boolean | undefined;
-    dataTestId?: string | undefined;
-} & React.RefAttributes<EditorView | null>>;
-//# sourceMappingURL=TextEditor.d.ts.map

package/dist/types/src/components/TextEditor/TextEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAQN,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,EAAE,KAAK,GAAG,WAAW,GAAG,YAAY,CAAC,GAAG;IAC1F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF;;;GAGG;AAEH,eAAO,MAAM,UAAU;;;;;;;;2CAqItB,CAAC"}

package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,KAA6E,MAAM,OAAO,CAAC;AAclG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EA0BL,KAAK,OAAO,EAGb,MAAM,kBAAkB,CAAC;AA4L1B,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,YAAY,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CtD,wBAME;AAeF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAIF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAiCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAaf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}

package/dist/types/src/components/TextEditor/index.d.ts

@@ -1,2 +0,0 @@
-export * from './TextEditor';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/TextEditor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/hooks/useTextEditor.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAwBpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBA2Ee,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAH3B,wBASE;AAEF,eAAO,MAAM,OAAO;;CAKnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

package/src/components/TextEditor/TextEditor.tsx

@@ -1,184 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { EditorState, type EditorStateConfig, type StateEffect } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
-import React, {
-  type KeyboardEventHandler,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-
-import { log } from '@dxos/log';
-import { useDefaultValue } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
-
-import { documentId, editorMode, focusEvent } from '../../extensions';
-import { logChanges } from '../../util';
-
-export type CursorInfo = {
-  from: number;
-  to: number;
-  line: number;
-  lines: number;
-  length: number;
-  after?: string;
-};
-
-export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'extensions'> & {
-  id?: string;
-  className?: string;
-  autoFocus?: boolean;
-  scrollTo?: StateEffect<unknown>;
-  moveToEndOfLine?: boolean;
-  debug?: boolean;
-  dataTestId?: string;
-};
-
-let instanceCount = 0;
-
-/**
- * Thin wrapper for text editor.
- * Handles tabster and focus management.
- */
-// TODO(burdon): Use useTextEditor internally.
-export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
-  (
-    {
-      id,
-      // TODO(wittjosiah): Rename initialText?
-      doc,
-      selection,
-      extensions,
-      className,
-      autoFocus,
-      scrollTo: propsScrollTo,
-      moveToEndOfLine,
-      debug,
-      dataTestId,
-    },
-    forwardedRef,
-  ) => {
-    // NOTE: Increments by 2 in strict mode.
-    const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-    const scrollTo = useDefaultValue(propsScrollTo, EditorView.scrollIntoView(0, { yMargin: 0 }));
-
-    // TODO(burdon): Make tabster optional.
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-    const rootRef = useRef<HTMLDivElement>(null);
-    const [view, setView] = useState<EditorView | null>(null);
-
-    // The view ref can be used to focus the editor.
-    // NOTE: Ref updates do not cause the parent to re-render; also the ref is not available immediately.
-    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
-
-    // Set focus.
-    useEffect(() => {
-      if (autoFocus) {
-        view?.focus();
-      }
-    }, [view, autoFocus]);
-
-    // Create editor state and view.
-    // The view is recreated if the model or extensions are changed.
-    useEffect(() => {
-      log('create', { id, instanceId });
-
-      //
-      // EditorState
-      // 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,
-        extensions: [
-          id && documentId.of(id),
-          // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
-          EditorView.exceptionSink.of((err) => {
-            log.catch(err);
-          }),
-
-          // Focus.
-          EditorView.updateListener.of((update) => {
-            update.transactions.forEach((transaction) => {
-              if (transaction.isUserEvent(focusEvent)) {
-                rootRef.current?.focus();
-              }
-            });
-          }),
-
-          extensions,
-        ].filter(isNotFalsy),
-      });
-
-      //
-      // EditorView
-      // https://codemirror.net/docs/ref/#view.EditorViewConfig
-      //
-      const view = new EditorView({
-        state,
-        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);
-        },
-      });
-
-      // Position cursor at end of first line.
-      if (moveToEndOfLine && !(scrollTo || selection)) {
-        const { to } = view.state.doc.lineAt(0);
-        view.dispatch({ selection: { anchor: to } });
-      }
-
-      // Remove tabster attribute (rely on custom keymap).
-      if (state.facet(editorMode).noTabster) {
-        rootRef.current?.removeAttribute('data-tabster');
-      }
-
-      setView(view);
-
-      return () => {
-        log('destroy', { id, instanceId });
-        view?.destroy();
-      };
-    }, [id, selection, scrollTo, editorMode, extensions]);
-
-    // 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;
-          }
-        }
-      },
-      [view],
-    );
-
-    return (
-      <div
-        role='none'
-        ref={rootRef}
-        tabIndex={0}
-        className={className}
-        data-testid={dataTestId}
-        {...tabsterDOMAttribute}
-        onKeyUp={handleKeyUp}
-      />
-    );
-  },
-);

package/src/components/TextEditor/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './TextEditor';