@dxos/react-ui-editor 0.3.10 → 0.3.11-main.00a28cb

package/src/components/TextEditor/TextEditor.tsx

@@ -15,16 +15,17 @@ import React, {
   useEffect,
   useImperativeHandle,
   useState,
+  useRef,
 } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle } from './extensions';
-import { defaultTheme, markdownTheme, textTheme } from './themes';
-import { type EditorModel } from '../../hooks';
+import { basicBundle, markdownBundle, setCommentRange } from '../../extensions';
+import { type CommentRange, type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
+import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 
 export const EditorModes = ['default', 'vim'] as const;
 export type EditorMode = (typeof EditorModes)[number];
@@ -34,49 +35,55 @@ export type CursorInfo = {
   to: number;
   line: number;
   lines: number;
+  length: number;
   after?: string;
 };
 
-export type TextEditorRef = {
-  root: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
-  editor?: {
-    className?: string;
-    placeholder?: string;
-    spellCheck?: boolean;
-    tabIndex?: number;
-    theme?: ThemeStyles;
-  };
+  // editor?: {
+  //   className?: string;
+  // };
 };
 
+// TODO(burdon): Spellcheck?
 export type TextEditorProps = {
   model: EditorModel;
-  readonly?: boolean;
-  editorMode?: EditorMode;
+  autofocus?: boolean;
+  readonly?: boolean; // TODO(burdon): Move into model.
+  selection?: { anchor: number; head?: number };
+  comments?: CommentRange[]; // TODO(burdon): Move into extension?
   extensions?: Extension[];
+  editorMode?: EditorMode;
+  placeholder?: string;
+  theme?: ThemeStyles;
   slots?: TextEditorSlots;
 };
 
 /**
  * Base text editor.
- * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
+  (
+    { model, autofocus, readonly, selection, comments, extensions = [], editorMode, theme, slots = defaultSlots },
+    forwardedRef,
+  ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const { themeMode } = useThemeContext();
 
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+    // The editor view ref should only be used as an escape hatch.
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [view, setView] = useState<EditorView | null>(null);
+    // 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?
+    useEffect(() => {
+      if (autofocus) {
+        view?.focus();
+      }
+    }, [autofocus, view]);
+
+    // TODO(burdon): Factor out as extension/hook.
     const { awareness, peer } = model;
     useEffect(() => {
       if (awareness && peer) {
@@ -88,30 +95,35 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       }
     }, [awareness, peer, themeMode]);
 
-    // TODO(burdon): Get from model.
-    // useHighlights(view, [
-    //   { id: 'c-1', from: 0, to: 20 },
-    //   { id: 'c-2', from: 100, to: 120 },
-    // ]);
+    // TODO(burdon): Factor out as extension/hook.
+    useEffect(() => {
+      if (view && comments !== undefined) {
+        view.dispatch({
+          effects: setCommentRange.of({ model, comments }),
+        });
+      }
+    }, [view, comments]);
 
     useEffect(() => {
-      if (!root) {
+      if (!model || !rootRef.current) {
         return;
       }
 
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc: model.text(),
+        // TODO(burdon): Composer should store and set selection when switching documents.
+        selection,
         extensions: [
           readonly && EditorState.readOnly.of(readonly),
 
-          // TODO(burdon): Factor out VIM mode?
+          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
           editorMode === 'vim' && vim(),
 
           // Theme.
-          // TODO(burdon): Make optional.
+          // TODO(burdon): Make theme configurable.
           EditorView.baseTheme(defaultTheme),
-          EditorView.theme(slots?.editor?.theme ?? {}),
-          // TODO(burdon): themeMode doesn't change in storybooks.
+          EditorView.theme(theme ?? {}),
           EditorView.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
@@ -124,39 +136,37 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 
       // 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 be hit except when changing between text objects.
+      // Ideally this should not happen except when changing between text objects.
       view?.destroy();
-      setView(
-        new EditorView({
-          state,
-          parent: root,
-          // NOTE: Uncomment to spy on all transactions.
-          // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-          // dispatch: (transaction, view) => {
-          //   view.update([transaction]);
-          // },
-        }),
-      );
-      setState(state);
+      const newView = new EditorView({
+        parent: rootRef.current,
+        state,
+        // NOTE: Uncomment to spy on all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        // dispatch: (transaction, view) => {
+        //   view.update([transaction]);
+        // },
+      });
 
+      setView(newView);
       return () => {
-        view?.destroy();
-        setView(undefined);
-        setState(undefined);
+        newView?.destroy();
+        setView(null);
       };
-    }, [root, model, themeMode, readonly, editorMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
+          // TODO(burdon): Is this required (for vim mode?)
+          // case 'Enter': {
+          //   view?.contentDOM.focus();
+          //   break;
+          // }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
             break;
           }
         }
@@ -167,42 +177,46 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        role='none'
         tabIndex={0}
-        {...slots?.root}
-        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
         onKeyUp={handleKeyUp}
+        {...slots.root}
+        {...(editorMode !== 'vim' && tabsterDOMAttribute)}
+        ref={rootRef}
       />
     );
   },
 );
 
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, extensions = [], theme = textTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultTextSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[basicBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
   },
 );
 
-export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+// TODO(burdon): Remove (Just provide bundle, slots).
+export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, placeholder, extensions = [], theme = markdownTheme, slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder }), ...extensions]}
+        theme={theme}
+        slots={updatedSlots}
         {...props}
       />
     );
@@ -211,20 +225,14 @@ export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
 
 export const defaultSlots: TextEditorSlots = {
   root: {
-    className: mx('p-2', inputSurface),
+    className: mx('w-full p-2 overflow-y-auto', inputSurface),
   },
 };
 
 export const defaultTextSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: textTheme,
-  },
 };
 
 export const defaultMarkdownSlots: TextEditorSlots = {
   ...defaultSlots,
-  editor: {
-    theme: markdownTheme,
-  },
 };

package/src/{hooks/automerge → components/TextEditor}/automerge.stories.tsx

@@ -2,19 +2,29 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@preact/signals-react'; // Register react integration
+import '@dxosTheme';
+
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { EditorView } from '@codemirror/view';
+import '@preact/signals-react'; // Register react integration
 import { basicSetup } from 'codemirror';
 import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-// TODO(burdon): Why separate imports?
 import { type Prop } from '@dxos/automerge/automerge';
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
+import { Filter, setGlobalAutomergePreference } 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';
+import { ClientRepeater } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/storybook-utils';
 
-import { type IDocHandle } from './handle';
-import { automergePlugin } from './plugin';
+import { MarkdownEditor } from './TextEditor';
+import { type IDocHandle, automerge, awareness } from '../../extensions';
+import { useTextModel } from '../../hooks';
+
+// TODO(burdon): Move to components.
 
 type EditorProps = {
   handle: IDocHandle;
@@ -28,7 +38,7 @@ const Editor = ({ handle, path }: EditorProps) => {
   useEffect(() => {
     const view = (editorRoot.current = new EditorView({
       doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automergePlugin(handle, path)],
+      extensions: [basicSetup, automerge({ handle, path }), awareness()],
       parent: containerRef.current as any,
     }));
 
@@ -85,8 +95,57 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
+  render: () => <Story />,
 };
 
-export const Default = {
-  render: () => <Story />,
+export const Default = {};
+
+const EchoStory = ({ id, spaceKey }: { id: number; spaceKey: PublicKey }) => {
+  const identity = useIdentity();
+  const space = useSpace(spaceKey);
+  // TODO(dmaretskyi): useQuery doesn't work.
+  const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
+
+  const model = useTextModel({
+    text: obj?.content,
+    identity,
+    space,
+  });
+
+  if (!model) {
+    return null;
+  }
+
+  return (
+    // <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+    <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex flex-col w-[800px] py-16'>
+        <MarkdownEditor model={model} />
+        <div className='flex shrink-0 h-[300px]'></div>
+      </div>
+    </div>
+    // </div>
+  );
+};
+
+export const WithEcho = {
+  render: () => {
+    setGlobalAutomergePreference(true);
+    return (
+      <ClientRepeater
+        count={2}
+        createSpace
+        onCreateSpace={async (space) => {
+          space.db.add(
+            new Expando({
+              type: 'test',
+              content: new TextObject('Hello world!'),
+            }),
+          );
+        }}
+        Component={EchoStory}
+      />
+    );
+  },
+  decorators: [withTheme],
 };

package/src/components/TextEditor/codemirror.stories.ts

@@ -17,7 +17,8 @@ import { type Identity } from '@dxos/react-client/halo';
 import { joinCommonSpace, TestBuilder, textGenerator } from '@dxos/react-client/testing';
 import { YText } from '@dxos/text-model';
 
-import { cursorColor, SpaceAwarenessProvider } from '../../hooks';
+import { YAwarenessProvider } from '../../hooks';
+import { cursorColor } from '../../styles';
 import { EditorDocument, types as schema } from '../../testing';
 
 export default {
@@ -35,7 +36,7 @@ const updateEditor = async (id: number, editor: HTMLDivElement, identity: Identi
     return;
   }
 
-  const { awareness } = new SpaceAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
+  const { awareness } = new YAwarenessProvider({ space, doc, channel: `yjs.awareness.${text.id}` });
   awareness.setLocalStateField('user', {
     name: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
     // TODO(wittjosiah): Pick colours from theme based on identity key.