@dxos/react-ui-editor 0.3.11-main.f437bee → 0.3.11-main.f4c1077

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

@@ -4,17 +4,15 @@
 
 import '@dxosTheme';
 
-import defaultsDeep from 'lodash.defaultsdeep';
 import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorSlots } from './TextEditor';
+import { TextEditor, type TextEditorProps } from './TextEditor';
 import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
-import { textTheme } from '../../themes';
 
 const initialText = [
   '# TextEditor',
@@ -30,7 +28,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'placeholder' | 'slots'>) => {
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -39,10 +37,9 @@ const Story = ({
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex justify-center'>
         <div className='flex flex-col w-[800px] py-16'>
           <TextEditor model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>
     </div>
@@ -57,49 +54,19 @@ export default {
 };
 
 export const Default = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
-};
-
-export const Listener = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-      extensions={[listener({ onChange: (text) => console.log(text) })]}
-    />
-  ),
+  render: () => <Story placeholder='Enter text...' />,
 };
 
 export const Text = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
+  render: () => <Story text={initialText} placeholder='Enter text...' />,
 };
 
 export const Automerge = {
+  render: () => <Story text={initialText} placeholder='Enter text...' automerge />,
+};
+
+export const Listener = {
   render: () => (
-    <Story
-      automerge
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
+    <Story placeholder='Enter text...' extensions={[listener({ onChange: (text) => console.log(text) })]} />
   ),
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -2,9 +2,9 @@
 // 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 { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
@@ -14,19 +14,22 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useState,
   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 { focusRing, mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
-import { basicBundle, markdownBundle, setCommentRange } from '../../extensions';
-import { type CommentRange, type EditorModel } from '../../hooks';
+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];
 
@@ -43,22 +46,26 @@ 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;
-  focus?: boolean;
-  selection?: { anchor: number; head?: number };
+  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;
 };
 
 /**
@@ -66,108 +73,134 @@ export type TextEditorProps = {
  */
 export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
   (
-    { model, focus, selection, readonly, comments, extensions = [], editorMode, slots = defaultSlots },
+    {
+      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();
 
-    // The editor view ref should only be used as an escape hatch.
     const rootRef = useRef<HTMLDivElement>(null);
     const [view, setView] = useState<EditorView | null>(null);
-    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
-
-    // Focus.
-    useEffect(() => {
-      if (view && focus) {
-        view.focus();
-      }
-    }, [view, focus]);
 
-    // 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]);
+    // 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?.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, comments]);
+    }, [view, autoFocus]);
 
+    // Create editor state and view.
+    // The view is recreated if the model or extensions are changed.
     useEffect(() => {
       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.
+          EditorView.editable.of(!readonly),
+          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/Enter below).
+          editorMode === 'vim' && vim(),
+
           // Custom.
           ...extensions,
-        ].filter(Boolean) as Extension[],
+        ].filter(isNotFalsy),
       });
 
-      // 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();
+      //
+      // EditorView
+      // https://codemirror.net/docs/ref/#view.EditorViewConfig
+      //
       const newView = new EditorView({
-        parent: rootRef.current,
         state,
-        // NOTE: Uncomment to spy on all transactions.
+        parent: rootRef.current,
+        scrollTo,
+        // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-        // dispatch: (transaction, view) => {
-        //   view.update([transaction]);
-        // },
+        dispatchTransactions: (trs, view) => {
+          if (debug) {
+            logChanges(trs);
+          }
+          view.update(trs);
+        },
       });
 
+      view?.destroy();
       setView(newView);
+
       return () => {
         newView?.destroy();
         setView(null);
       };
     }, [rootRef, model, readonly, editorMode, 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;
         switch (key) {
-          // TODO(burdon): ???
-          // case 'Enter': {
-          //   view?.contentDOM.focus();
-          //   break;
-          // }
+          case 'Enter': {
+            view?.focus();
+            break;
+          }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+            if (editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey)) {
+              view?.focus();
+            }
             break;
           }
         }
@@ -178,28 +211,27 @@ export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={rootRef}
+        role='none'
         tabIndex={0}
-        {...slots?.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        {...slots.root}
+        // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
+        ref={rootRef}
       />
     );
   },
 );
 
 export const TextEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          basicBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
+        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        theme={theme}
         slots={updatedSlots}
         {...props}
       />
@@ -207,19 +239,16 @@ export const TextEditor = forwardRef<EditorView, TextEditorProps>(
   },
 );
 
-// TODO(burdon): Remove (Just provide bundle, slots).
 export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
-  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[
-          markdownBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
-          ...extensions,
-        ]}
+        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
+        theme={theme}
         slots={updatedSlots}
         {...props}
       />
@@ -229,20 +258,17 @@ export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2', inputSurface),
+    className: mx('grow', focusRing),
+  },
+  editor: {
+    className: 'bs-full',
   },
 };
 
 export const defaultTextSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
 };
 
 export const defaultMarkdownSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: markdownTheme,
-  },
 };

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

@@ -13,7 +13,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
-import { Filter, setGlobalAutomergePreference } from '@dxos/echo-schema';
+import { Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -130,7 +130,6 @@ const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
 
 export const WithEcho = {
   render: () => {
-    setGlobalAutomergePreference(true);
     return (
       <ClientRepeater
         count={2}

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

@@ -0,0 +1,111 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { TextEditor } from './TextEditor';
+import {
+  code,
+  createMarkdownExtensions,
+  formatting,
+  heading,
+  hr,
+  image,
+  link,
+  table,
+  tasklist,
+  useFormattingState,
+} from '../../extensions';
+import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
+import { markdownTheme } from '../../themes';
+import { Toolbar } from '../Toolbar';
+
+// TODO(burdon): Demo toolbar with hooks.
+// TODO(burdon): Build components from hooks and adapters for model/extensions, etc.
+// TODO(burdon): Remove BaseTextEditor.
+// TODO(burdon): Move scrolling container layout/logic into TextEditor/MarkdownEditor components.
+// TODO(burdon): Define keymap in composer framework format.
+
+type StoryProps = {
+  autoFocus?: boolean;
+  placeholder?: string;
+  doc?: string;
+  readonly?: boolean;
+};
+
+const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
+  const { themeMode } = useThemeContext();
+  const [formattingState, trackFormatting] = useFormattingState();
+  const { parentRef, view } = useTextEditor({
+    autoFocus,
+    doc,
+    extensions: [
+      //
+      createDataExtensions({ readonly }),
+      createThemeExtensions({
+        themeMode,
+        theme: markdownTheme,
+        slots: {
+          // TODO(burdon): Document classes re base theme.
+          //  Semantic tokens (e.g., replacement of input surface).
+          editor: {
+            className: 'h-full p-4 bg-white text-black dark:bg-black dark:text-white',
+          },
+        },
+      }),
+      // TODO(burdon): Move lineWrapping.
+      createMarkdownExtensions({ placeholder, lineWrapping: true }),
+      // TODO(burdon): Move into markdown bundle (with React callbacks).
+      code(),
+      formatting(),
+      heading(),
+      hr(),
+      image(),
+      link(),
+      table(),
+      tasklist(),
+      trackFormatting,
+    ],
+  });
+
+  const handleAction = useActionHandler(view);
+
+  // FIXME This doesn't update the state on view changes. Also not
+  // sure if view is even guaranteed to exist at this point.
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
+          <Toolbar.Root onAction={handleAction} state={formattingState}>
+            <Toolbar.Markdown />
+          </Toolbar.Root>
+
+          {/* TODO(burdon): Handle scrolling in component wrapper (like this). */}
+          <div role='none' className='h-full overflow-y-auto' ref={parentRef} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/useTextEditor',
+  component: TextEditor,
+  decorators: [withTheme],
+  render: (args: StoryProps) => <Story {...args} />,
+};
+
+export const Default = {
+  args: {
+    autoFocus: true,
+    placeholder: 'Text...',
+    doc: '# Demo\n\nThis is a document.\n\n',
+  },
+};

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

@@ -0,0 +1,102 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+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 { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Toolbar } from './Toolbar';
+import {
+  code,
+  comments,
+  formatting,
+  heading,
+  image,
+  table,
+  tasklist,
+  useComments,
+  useFormattingState,
+} from '../../extensions';
+import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { MarkdownEditor } from '../TextEditor';
+
+faker.seed(101);
+
+const Story: FC<{ content: string }> = ({ content }) => {
+  const [item] = useState({ text: new TextObject(content) });
+  const [_comments, setComments] = useState<Comment[]>([]);
+  const [editorRef, editorView] = useEditorView();
+  const model = useTextModel({ text: item.text });
+  const [formattingState, formattingObserver] = useFormattingState();
+  const extensions = useMemo(
+    () => [
+      code(),
+      comments({
+        onCreate: ({ cursor }) => {
+          const id = PublicKey.random().toHex();
+          setComments((comments) => [...comments, { id, cursor }]);
+          return id;
+        },
+      }),
+      formatting(),
+      heading(),
+      image(),
+      table(),
+      tasklist(),
+      formattingObserver,
+    ],
+    [],
+  );
+
+  useComments(editorView, _comments);
+  const handleAction = useActionHandler(editorView);
+
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
+          <Toolbar.Root onAction={handleAction} state={formattingState}>
+            <Toolbar.Markdown />
+            <Toolbar.Separator />
+            <Toolbar.Extended />
+          </Toolbar.Root>
+          <MarkdownEditor ref={editorRef} model={model} extensions={extensions} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/Toolbar',
+  component: Toolbar,
+  render: (args: any) => <Story {...args} />,
+  decorators: [withTheme],
+};
+
+const content = [
+  'Demo',
+  '',
+  'The editor supports **Markdown** styles.',
+  '',
+  faker.lorem.paragraph({ min: 5, max: 8 }),
+  '',
+  '',
+].join('\n');
+
+export const Default = {
+  args: {
+    content,
+  },
+};