@dxos/react-ui-editor 0.4.8-main.ac78619 → 0.4.8-main.beadd4b

package/src/components/TextEditor/TextEditor.tsx

@@ -2,12 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { EditorState, type Extension, type StateEffect } from '@codemirror/state';
-import { EditorView, scrollPastEnd } from '@codemirror/view';
+import { EditorState, type EditorStateConfig, type StateEffect } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
-import defaultsDeep from 'lodash.defaultsdeep';
 import React, {
-  type ComponentProps,
   type KeyboardEventHandler,
   forwardRef,
   useCallback,
@@ -15,19 +13,12 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
-  useMemo,
 } from 'react';
 
-import { DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
-import { useThemeContext } from '@dxos/react-ui';
-import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { createMarkdownExtensions, editorMode } from '../../extensions';
-import { createBasicExtensions, createThemeExtensions, type EditorModel } from '../../hooks';
-import { type ThemeStyles } from '../../styles';
-import { defaultTheme, markdownTheme, textTheme } from '../../themes';
+import { documentId, editorMode, focusEvent } from '../../extensions';
 import { logChanges } from '../../util';
 
 export type CursorInfo = {
@@ -39,61 +30,49 @@ export type CursorInfo = {
   after?: string;
 };
 
-export type TextEditorSlots = {
-  root?: Omit<ComponentProps<'div'>, 'ref'>;
-  editor?: {
-    className?: string;
-  };
-  content?: {
-    className?: string;
-  };
-};
-
-export type TextEditorProps = {
-  model: EditorModel; // TODO(burdon): Optional (e.g., just provide content if readonly).
-  readonly?: boolean; // TODO(burdon): Move into model.
+export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'extensions'> & {
+  id?: string;
+  className?: string;
   autoFocus?: boolean;
-  scrollPastEnd?: boolean;
+  scrollTo?: StateEffect<unknown>;
   moveToEndOfLine?: boolean;
-  lineWrapping?: boolean;
-  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
-  selection?: { anchor: number; head?: number };
-  placeholder?: string;
-  theme?: ThemeStyles;
-  slots?: TextEditorSlots;
-  extensions?: Extension[];
   debug?: boolean;
+  dataTestId?: string;
 };
 
+let instanceCount = 0;
+
 /**
- * Base text editor.
+ * Thin wrapper for text editor.
+ * Handles tabster and focus management.
  */
-// TODO(burdon): Replace with useTextEditor.
-export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
+// TODO(burdon): Use useTextEditor internally.
+export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
     {
-      model,
-      readonly,
+      id,
+      doc,
+      selection,
+      extensions,
+      className,
       autoFocus,
-      scrollTo = EditorView.scrollIntoView(0),
+      scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
       moveToEndOfLine,
-      selection,
-      theme,
-      slots = defaultSlots,
-      extensions = [],
-      scrollPastEnd: _scrollPastEnd,
       debug,
+      dataTestId,
     },
     forwardedRef,
   ) => {
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-    const { themeMode } = useThemeContext();
+    // NOTE: Increments by 2 in strict mode.
+    const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
 
+    // 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: This does not cause the parent to re-render, so the ref is not available immediately.
+    // 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.
@@ -106,53 +85,32 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
     // Create editor state and view.
     // The view is recreated if the model or extensions are changed.
     useEffect(() => {
-      if (!model || !rootRef.current) {
-        return;
-      }
+      log('updating', { id, instanceId });
 
       //
       // EditorState
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       //
       const state = EditorState.create({
-        doc: typeof model.content === 'string' ? model.content : DocAccessor.getValue(model.content),
+        doc,
         selection,
         extensions: [
-          // TODO(burdon): Doesn't catch errors in keymap functions.
+          id && documentId.of(id),
+          // TODO(burdon): NOTE: Doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
 
-          // Theme.
-          // TODO(burdon): Make base theme configurable.
-          EditorView.baseTheme(defaultTheme),
-          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(),
-
           // Focus.
           EditorView.updateListener.of((update) => {
             update.transactions.forEach((transaction) => {
-              if (transaction.isUserEvent('focus.container')) {
+              if (transaction.isUserEvent(focusEvent)) {
                 rootRef.current?.focus();
               }
             });
           }),
 
-          // State.
-          EditorView.editable.of(!readonly),
-          EditorState.readOnly.of(!!readonly),
-
-          // Storage and replication.
-          // NOTE: This must come before user extensions.
-          model.extension,
-
-          // Custom.
-          ...extensions,
+          extensions,
         ].filter(isNotFalsy),
       });
 
@@ -162,8 +120,9 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       //
       const view = new EditorView({
         state,
-        parent: rootRef.current,
+        parent: rootRef.current!,
         scrollTo,
+
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
         dispatchTransactions: (trs, view) => {
@@ -174,24 +133,24 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
         },
       });
 
-      setView(view);
-
-      if (moveToEndOfLine) {
+      // Position cursor at end of first line.
+      if (moveToEndOfLine && !(scrollTo || selection)) {
         const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({ selection: { anchor: to } });
+        view.dispatch({ selection: { anchor: to } });
       }
 
       // Remove tabster attribute (rely on custom keymap).
       if (state.facet(editorMode).noTabster) {
-        rootRef.current.removeAttribute('data-tabster');
+        rootRef.current?.removeAttribute('data-tabster');
       }
 
+      setView(view);
+
       return () => {
         view?.destroy();
         setView(null);
       };
-      // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
-    }, [rootRef, extensions, model, readonly, themeMode]);
+    }, [doc, selection, extensions]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -211,82 +170,12 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       <div
         role='none'
         ref={rootRef}
-        key={model.id} // TODO(burdon): Remove?
         tabIndex={0}
-        onKeyUp={handleKeyUp}
-        {...slots.root}
+        className={className}
+        data-testid={dataTestId}
         {...tabsterDOMAttribute}
+        onKeyUp={handleKeyUp}
       />
     );
   },
 );
-
-// TODO(burdon): Replace with hooks.
-export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
-  (
-    { readonly, placeholder, lineWrapping = true, theme = textTheme, slots, extensions: _extensions, ...props },
-    forwardedRef,
-  ) => {
-    const { themeMode } = useThemeContext();
-    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
-    const extensions = useMemo(
-      () => [
-        createBasicExtensions({ lineWrapping, placeholder }),
-        createThemeExtensions({ themeMode }),
-        ...(_extensions ?? []),
-      ],
-      [themeMode, placeholder, lineWrapping, _extensions],
-    );
-
-    return (
-      <BaseTextEditor
-        ref={forwardedRef}
-        readonly={readonly}
-        extensions={extensions}
-        theme={theme}
-        slots={updatedSlots}
-        {...props}
-      />
-    );
-  },
-);
-
-// TODO(burdon): Replace with hooks.
-export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
-  ({ readonly, placeholder, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
-    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
-    const extensions = useMemo(
-      () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
-      [themeMode, placeholder, _extensions],
-    );
-
-    return (
-      <BaseTextEditor
-        ref={forwardedRef}
-        readonly={readonly}
-        extensions={extensions}
-        theme={theme}
-        slots={updatedSlots}
-        {...props}
-      />
-    );
-  },
-);
-
-export const defaultSlots: TextEditorSlots = {
-  root: {
-    className: focusRing,
-  },
-  editor: {
-    className: 'bs-full',
-  },
-};
-
-export const defaultTextSlots: TextEditorSlots = {
-  ...defaultSlots,
-};
-
-export const defaultMarkdownSlots: TextEditorSlots = {
-  ...defaultSlots,
-};

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

@@ -4,79 +4,80 @@
 
 import '@dxosTheme';
 
-import React, { type FC, useMemo, useState } from 'react';
+import React, { type FC, 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 { Tooltip, useThemeContext } from '@dxos/react-ui';
+import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
+  type Comment,
   decorateMarkdown,
   comments,
-  formatting,
-  image,
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
+  formattingKeymap,
   table,
   useComments,
   useFormattingState,
+  createMarkdownExtensions,
+  image,
 } from '../../extensions';
-import { type Comment, useActionHandler, useEditorView, useTextModel } from '../../hooks';
+import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
 import translations from '../../translations';
-import { MarkdownEditor } from '../TextEditor';
 
 faker.seed(101);
 
-const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) => {
+const Story: FC<{ content: string }> = ({ content }) => {
+  const { themeMode } = useThemeContext();
   const [item] = useState({ text: new TextObject(content) });
-  const [_comments, setComments] = useState<Comment[]>([]);
-  const [editorRef, viewInvalidated] = useEditorView(id);
-  const model = useTextModel({ text: item.text });
+  const { id, doc, accessor } = useDocAccessor(item.text);
   const [formattingState, formattingObserver] = useFormattingState();
-  const extensions = useMemo(
-    () => [
-      decorateMarkdown(),
-      comments({
-        onCreate: ({ cursor }) => {
-          const id = PublicKey.random().toHex();
-          setComments((comments) => [...comments, { id, cursor }]);
-          return id;
-        },
-      }),
-      formatting(),
-      image(),
-      table(),
-      formattingObserver,
-    ],
-    [],
+  const { parentRef, view } = useTextEditor(
+    () => ({
+      id,
+      doc,
+      extensions: [
+        createBasicExtensions(),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
+        createDataExtensions({ id, text: accessor }),
+        comments({
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            setComments((comments) => [...comments, { id, cursor }]);
+            return id;
+          },
+        }),
+        decorateMarkdown(),
+        formattingKeymap(),
+        image(),
+        table(),
+        formattingObserver,
+      ],
+    }),
+    [id, accessor, themeMode],
   );
 
-  useComments(viewInvalidated ? null : editorRef.current, id, _comments);
-  const handleAction = useActionHandler(editorRef.current);
+  const [_comments, setComments] = useState<Comment[]>([]);
+  useComments(view, id, _comments);
 
-  if (!model) {
-    return null;
-  }
+  const handleAction = useActionHandler(view);
 
   return (
     <div role='none' className='fixed inset-0 flex flex-col'>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
+        <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
         <Toolbar.Separator />
-        <Toolbar.Extended />
+        <Toolbar.Actions />
       </Toolbar.Root>
-
-      <MarkdownEditor
-        ref={editorRef}
-        model={model}
-        extensions={extensions}
-        slots={{
-          root: { className: mx(textBlockWidth) },
-          editor: { className: 'p-2' },
-        }}
-      />
+      <div ref={parentRef} className={textBlockWidth} />
     </div>
   );
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -7,6 +7,7 @@ import {
   ChatText,
   Code,
   CodeBlock,
+  Image,
   Link,
   ListBullets,
   ListChecks,
@@ -25,7 +26,8 @@ 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, useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 import {
   DensityProvider,
@@ -34,7 +36,8 @@ import {
   type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
-  type ToolbarToggleGroupItemProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
@@ -111,9 +114,9 @@ type ButtonProps = {
   disabled?: (state: Formatting) => boolean;
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
+type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
 
-const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
@@ -132,6 +135,27 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
+type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+
+const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
@@ -227,7 +251,7 @@ const MarkdownStyles = () => {
       value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
       {markdownStyles.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -235,7 +259,7 @@ const MarkdownStyles = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -253,14 +277,14 @@ const MarkdownLists = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ? `list-${state.listStyle}` : ''}>
       {markdownLists.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -292,7 +316,7 @@ const MarkdownBlocks = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={value?.type ?? ''}>
       {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -300,7 +324,7 @@ const MarkdownBlocks = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -315,38 +339,68 @@ const MarkdownStandard = () => (
   </>
 );
 
-const MarkdownExtended = () => {
+// TODO(burdon): Make extensible.
+export type MarkdownCustomOptions = {
+  onUpload?: (file: File) => Promise<{ url?: string }>;
+};
+
+const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
+  // https://react-dropzone.js.org/#src
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+    },
+  });
+  useEffect(() => {
+    if (onUpload && acceptedFiles.length) {
+      setTimeout(async () => {
+        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+        const f = acceptedFiles[0];
+        const file = new File([f], f.name, {
+          type: f.type,
+          lastModified: f.lastModified,
+        });
+
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({ type: 'image', data: url });
+        }
+      });
+    }
+  }, [acceptedFiles]);
+
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button
-          variant='ghost'
-          data-testid='editor.toolbar.comment'
-          onClick={() => onAction?.({ type: 'comment' })}
-          classNames={buttonStyles}
-        >
-          <ChatText className={iconStyles} />
-          <span className='sr-only'>{t('comment label')}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('comment label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <>
+      <input {...getInputProps()} />
+      <ToolbarButton value='image' Icon={Image} onClick={() => open()}>
+        {t('image label')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+// TODO(burdon): Make extensible.
+const MarkdownActions = () => {
+  const { onAction } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
+      {t('comment label')}
+    </ToolbarButton>
   );
 };
 
 export const Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended,
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions,
 };
 
 export { useToolbarContext };