@dxos/react-ui-editor 0.4.6-main.3500f01 → 0.4.6-main.6d26f8f

package/src/components/TextEditor/TextEditor.tsx

@@ -3,13 +3,13 @@
 //
 
 import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
-import { EditorView, scrollPastEnd } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
   type ComponentProps,
-  type KeyboardEventHandler,
   forwardRef,
+  type KeyboardEventHandler,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -52,8 +52,6 @@ export type TextEditorProps = {
   model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
   readonly?: boolean; // TODO(burdon): Move into model.
   autoFocus?: boolean;
-  scrollPastEnd?: boolean;
-  moveToEndOfLine?: boolean;
   lineWrapping?: boolean;
   scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
   selection?: { anchor: number; head?: number };
@@ -70,19 +68,7 @@ export type TextEditorProps = {
 // TODO(burdon): Replace with useTextEditor.
 export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
-    {
-      model,
-      readonly,
-      autoFocus,
-      scrollTo = EditorView.scrollIntoView(0),
-      moveToEndOfLine,
-      selection,
-      theme,
-      slots = defaultSlots,
-      extensions = [],
-      scrollPastEnd: _scrollPastEnd,
-      debug,
-    },
+    { model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug },
     forwardedRef,
   ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
@@ -97,7 +83,12 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
 
     // Set focus.
     useEffect(() => {
-      if (autoFocus) {
+      if (autoFocus && !view?.hasFocus) {
+        if (view?.state.selection.main?.from === 0) {
+          // Start at end of line.
+          const { to } = view.state.doc.lineAt(0);
+          view?.dispatch({ selection: { anchor: to } });
+        }
         view?.focus();
       }
     }, [view, autoFocus]);
@@ -123,15 +114,12 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
           }),
 
           // Theme.
-          // TODO(burdon): Make base theme configurable.
+          // TODO(burdon): Make configurable.
           EditorView.baseTheme(defaultTheme),
-          theme && EditorView.theme(theme),
+          EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
-          slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
-          slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
-
-          // NOTE: Assumes default line height.
-          _scrollPastEnd && scrollPastEnd(),
+          EditorView.editorAttributes.of({ class: slots.editor?.className ?? '' }),
+          EditorView.contentAttributes.of({ class: slots.content?.className ?? '' }),
 
           // Focus.
           EditorView.updateListener.of((update) => {
@@ -159,7 +147,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       // EditorView
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
       //
-      const view = new EditorView({
+      const newView = new EditorView({
         state,
         parent: rootRef.current,
         scrollTo,
@@ -173,12 +161,8 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
         },
       });
 
-      setView(view);
-
-      if (moveToEndOfLine) {
-        const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({ selection: { anchor: to } });
-      }
+      view?.destroy();
+      setView(newView);
 
       // Remove tabster attribute (rely on custom keymap).
       if (state.facet(editorMode).noTabster) {
@@ -186,7 +170,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       }
 
       return () => {
-        view?.destroy();
+        newView?.destroy();
         setView(null);
       };
       // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
@@ -231,7 +215,6 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       () => [createBasicBundle({ themeMode, placeholder, lineWrapping }), ...(_extensions ?? [])],
       [themeMode, placeholder, lineWrapping, _extensions],
     );
-
     return (
       <BaseTextEditor
         ref={forwardedRef}
@@ -253,7 +236,6 @@ export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
       () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
       [themeMode, placeholder, _extensions],
     );
-
     return (
       <BaseTextEditor
         ref={forwardedRef}
@@ -272,7 +254,7 @@ export const defaultSlots: TextEditorSlots = {
     className: focusRing,
   },
   editor: {
-    className: 'bs-full',
+    className: 'min-bs-full',
   },
 };
 

package/src/components/TextEditor/hooks.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 
 import React, { useMemo, useState } from 'react';
 
-import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -22,6 +22,7 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { editorFillLayoutEditor, editorWithToolbarLayout } from '../../styles';
 import { markdownTheme } from '../../themes';
 import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
@@ -51,7 +52,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          editor: { className: 'p-2' },
+          content: { className: '!p-4' },
         },
       }),
       // TODO(burdon): Move lineWrapping.
@@ -69,16 +70,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
 
   const handleAction = useActionHandler(view);
 
-  // TODO(marijn): This doesn't update the state on view changes.
+  // TODO(marijn) This doesn't update the state on view changes.
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
-      <div role='none' className='grow overflow-hidden'>
-        <div role='textbox' className={mx(textBlockWidth, attentionSurface)} ref={parentRef} />
+      <div role='none' className='overflow-y-auto'>
+        <div role='textbox' className={mx(textBlockWidth, attentionSurface, editorFillLayoutEditor)} ref={parentRef} />
       </div>
     </div>
   );
@@ -118,11 +119,7 @@ export default {
   title: 'react-ui-editor/useTextEditor',
   component: TextEditor,
   decorators: [withTheme],
-  render: (args: StoryProps) => (
-    <Tooltip.Provider>
-      <Story {...args} />
-    </Tooltip.Provider>
-  ),
+  render: (args: StoryProps) => <Story {...args} />,
   parameters: { translations, layout: 'fullscreen' },
 };
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -9,7 +9,6 @@ import React, { type FC, useMemo, useState } from 'react';
 import { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { Tooltip } from '@dxos/react-ui';
 import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -24,6 +23,7 @@ import {
   useFormattingState,
 } from '../../extensions';
 import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
 import translations from '../../translations';
 import { MarkdownEditor } from '../TextEditor';
 
@@ -61,7 +61,7 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
   }
 
   return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
+    <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
         <Toolbar.Separator />
@@ -72,8 +72,9 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         model={model}
         extensions={extensions}
         slots={{
-          root: { className: mx(textBlockWidth) },
-          editor: { className: 'p-2' },
+          root: { className: mx(textBlockWidth, editorFillLayoutRoot) },
+          editor: { className: editorFillLayoutEditor },
+          content: { className: '!pli-2' },
         }}
       />
     </div>
@@ -83,11 +84,7 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
 export default {
   title: 'react-ui-editor/Toolbar',
   component: Toolbar,
-  render: (args: any) => (
-    <Tooltip.Provider>
-      <Story {...args} />
-    </Tooltip.Provider>
-  ),
+  render: (args: any) => <Story {...args} />,
   decorators: [withTheme],
   parameters: { translations, layout: 'fullscreen' },
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -25,7 +25,7 @@ import {
   Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import {
   DensityProvider,
@@ -141,31 +141,11 @@ const MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : undefined;
   const HeadingIcon = HeadingIcons[value ?? '0'];
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
-  const [selectOpen, setSelectOpen] = useState<boolean>(false);
   return (
-    <Tooltip.Root
-      open={tooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen && suppressNextTooltip.current) {
-          suppressNextTooltip.current = false;
-          return setTooltipOpen(false);
-        } else {
-          return setTooltipOpen(nextOpen);
-        }
-      }}
-    >
+    <Tooltip.Root>
       <Select.Root
         disabled={value === null}
         value={value ?? '0'}
-        open={selectOpen}
-        onOpenChange={(nextOpen: boolean) => {
-          if (!nextOpen) {
-            suppressNextTooltip.current = true;
-          }
-          return setSelectOpen(nextOpen);
-        }}
         onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
       >
         <Tooltip.Trigger asChild>

package/src/hooks/useTextEditor.ts

@@ -16,7 +16,7 @@ import { log } from '@dxos/log';
 import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
-import { type ThemeStyles } from '../styles';
+import { type ThemeStyles } from '..//styles';
 import { defaultTheme } from '../themes';
 import { logChanges } from '../util';
 
@@ -26,7 +26,6 @@ export type UseTextEditorOptions = {
   debug?: boolean;
 } & EditorStateConfig;
 
-// TODO(burdon): Return tuple?
 export type UseTextEditor = {
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
@@ -88,7 +87,8 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-  }, [doc, extensions]);
+    // TODO(wittjosiah): Does `parentRef` ever change? Only `.current` changes?
+  }, [parentRef, extensions]);
 
   useEffect(() => {
     if (view) {

package/src/index.ts

@@ -12,7 +12,13 @@ export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-export { getToken, editorWithToolbarLayout, editorFillLayoutRoot, editorFillLayoutEditor } from './styles';
+export {
+  getToken,
+  editorWithToolbarLayout,
+  editorFillLayoutEditor,
+  editorFillLayoutRoot,
+  editorHalfViewportOverscrollContent,
+} from './styles';
 export * from './themes';
 export * from './util';
 export { translations };

package/src/styles/layout.ts

@@ -5,5 +5,8 @@
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-export const editorFillLayoutRoot = 'bs-full relative';
-export const editorFillLayoutEditor = '!absolute inset-0';
+export const editorFillLayoutRoot = 'bs-full overflow-hidden grid';
+export const editorFillLayoutEditor =
+  'bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto';
+
+export const editorHalfViewportOverscrollContent = 'after:block after:min-bs-[50dvh] after:pointer-events-none';

package/src/themes/default.ts

@@ -50,18 +50,14 @@ export const defaultTheme: ThemeStyles = {
     outline: 'none',
   },
 
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   '.cm-scroller': {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
-    overflowY: 'auto',
+    // overflow: 'visible',
     fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
 
   '.cm-content': {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
+    padding: 0,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
   },