@dxos/react-ui-editor 0.3.10-next.ef70620 → 0.3.11-main.008b7c6

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

@@ -3,63 +3,47 @@
 //
 
 import '@dxosTheme';
-import { markdown } from '@codemirror/lang-markdown';
-import { ArrowCircleUp } from '@phosphor-icons/react';
-import React, { StrictMode, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+
+import defaultsDeep from 'lodash.defaultsdeep';
+import React, { useRef, useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TextEditor } from './TextEditor';
-import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
+import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
+import { textTheme } from '../../themes';
 
-const text = [
-  '',
-  '',
-  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+const initialText = [
+  '# TextEditor',
   '',
+  'This is the basic plain text editor within minimal formatting.',
+  'You can add custom styles and create custom extensions.',
+  'Or use the MarkdownEditor to edit documents.',
   '',
+  'https://dxos.org',
 ].join('\n');
 
-const hyperLinkTooltip = () =>
-  createHyperlinkTooltip((el, url) => {
-    const web = new URL(url);
-    createRoot(el).render(
-      <StrictMode>
-        <div className='flex gap-1 items-center'>
-          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
-          <p className='pr-1'>{web.origin}</p>
-        </div>
-      </StrictMode>,
-    );
-  });
-
-const Story = ({ automerge }: { automerge?: boolean }) => {
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
+const Story = ({
+  text,
+  automerge,
+  ...props
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+  const ref = useRef<TextEditorRef>(null);
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
-    return <></>;
+    return null;
   }
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center p-8'>
-        <div className='w-[800px]'>
-          <TextEditor
-            model={model}
-            extensions={[
-              markdown(),
-              hyperlinkDecoration({ link: false }),
-              hyperLinkTooltip(),
-              // EditorView.domEventHandlers({
-              //   mousedown: (e, view) => {},
-              // }),
-            ]}
-            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
-          />
+      <div className='flex justify-center overflow-y-scroll'>
+        <div className='flex flex-col w-[800px] py-16'>
+          <TextEditor ref={ref} model={model} {...props} />
+          <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>
     </div>
@@ -67,13 +51,56 @@ const Story = ({ automerge }: { automerge?: boolean }) => {
 };
 
 export default {
+  title: 'react-ui-editor/TextEditor',
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
 };
 
-export const 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) })]}
+    />
+  ),
+};
+
+export const Text = {
+  render: () => (
+    <Story
+      text={initialText}
+      slots={defaultsDeep(
+        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
+        defaultSlots,
+      )}
+    />
+  ),
+};
 
 export const Automerge = {
-  render: () => <Story automerge />,
+  render: () => (
+    <Story
+      automerge
+      text={initialText}
+      slots={defaultsDeep(
+        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
+        defaultSlots,
+      )}
+    />
+  ),
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -7,23 +7,24 @@ import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { vim } from '@replit/codemirror-vim';
 import defaultsDeep from 'lodash.defaultsdeep';
-import get from 'lodash.get';
 import React, {
+  type ComponentProps,
   type KeyboardEvent,
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useState,
-  type ComponentProps,
 } from 'react';
 
-import { isDocAccessor } from '@dxos/echo-schema';
+import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
+import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, basicTheme, markdownBundle, markdownTheme } from './extensions';
-import { type EditorModel, useCollaboration } from '../../hooks';
-import type { ThemeStyles } from '../../styles';
+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];
@@ -37,7 +38,7 @@ export type CursorInfo = {
 };
 
 export type TextEditorRef = {
-  editor: HTMLDivElement | null;
+  root: HTMLDivElement | null;
   state?: EditorState;
   view?: EditorView;
 };
@@ -55,9 +56,11 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
+  readonly?: boolean; // TODO(burdon): Move into model.
+  comments?: CommentRange[]; // TODO(burdon): Move into extension.
   extensions?: Extension[];
-  slots?: TextEditorSlots;
   editorMode?: EditorMode;
+  slots?: TextEditorSlots;
 };
 
 /**
@@ -65,66 +68,87 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, extensions = [], slots, editorMode }, forwardedRef) => {
+  ({ model, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
+    const [root, setRoot] = useState<HTMLDivElement | null>(null);
+    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
+      { state?: EditorState; view?: EditorView } | undefined
+    >();
+    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+
+    // 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]);
 
-    const [parent, setParent] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-    useImperativeHandle(
-      forwardedRef,
-      () => ({
-        editor: parent,
-        state,
-        view,
-      }),
-      [view, state, parent],
-    );
-
-    // TODO(burdon): Pass in extension?
-    const collaboration = useCollaboration(model, themeMode);
+    // TODO(burdon): Factor out as extension.
+    useEffect(() => {
+      if (view && comments?.length) {
+        view.dispatch({
+          effects: setCommentRange.of({ model, comments }),
+        });
+      }
+    }, [view, comments]);
 
     useEffect(() => {
-      if (!parent) {
+      if (!root) {
         return;
       }
 
-      const initialText = isDocAccessor(model.content)
-        ? get(model.content.handle.docSync(), model.content.path)
-        : model.content?.toString();
-
+      // TODO(burdon): Remember cursor position.
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
-        doc: initialText,
+        doc: model.text(),
         extensions: [
-          // TODO(burdon): Factor out VIM mode?
-          editorMode === 'vim' && vim(),
+          readonly && EditorState.readOnly.of(readonly),
 
-          // Replication.
-          collaboration,
+          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
+          editorMode === 'vim' && vim(),
 
           // Theme.
-          slots?.editor?.theme && EditorView.theme(slots?.editor?.theme),
+          // TODO(burdon): Make theme configurable.
+          EditorView.baseTheme(defaultTheme),
+          EditorView.theme(slots?.editor?.theme ?? {}),
+          EditorView.darkTheme.of(themeMode === 'dark'),
+
+          // Storage and replication.
+          model.extension,
 
           // Custom.
           ...extensions,
         ].filter(Boolean) as Extension[],
       });
 
-      setState(state);
-
       // 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 }));
+      setEditor({
+        state,
+        view: 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]);
+          // },
+        }),
+      });
 
       return () => {
         view?.destroy();
-        setView(undefined);
-        setState(undefined);
+        setEditor(undefined);
       };
-    }, [parent, model.content, themeMode, editorMode]);
+    }, [root, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -136,7 +160,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
             break;
           }
         }
@@ -147,7 +171,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setParent}
+        ref={setRoot}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -158,14 +182,15 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const extensions = [...(_extensions ?? []), basicBundle({ themeMode, placeholder: slots?.editor?.placeholder })];
+    const slots = defaultsDeep({}, _slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={extensions}
-        slots={defaultsDeep({}, slots, { editor: { theme: basicTheme } })}
+        readonly={readonly}
+        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );
@@ -173,16 +198,37 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ extensions: _extensions, slots, ...props }, forwardedRef) => {
+  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const extensions = [...(_extensions ?? []), markdownBundle({ themeMode })];
+    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
-        extensions={extensions}
-        slots={defaultsDeep({}, slots, { editor: { theme: markdownTheme } })}
+        readonly={readonly}
+        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
+        slots={slots}
         {...props}
       />
     );
   },
 );
+
+export const defaultSlots: TextEditorSlots = {
+  root: {
+    className: mx('p-2', inputSurface),
+  },
+};
+
+export const defaultTextSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: textTheme,
+  },
+};
+
+export const defaultMarkdownSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme,
+  },
+};

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

@@ -2,17 +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';
 
 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, automergePlugin } from './automerge-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;
@@ -26,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,
     }));
 
@@ -81,9 +93,59 @@ const Story = () => {
 };
 
 export default {
-  title: 'Automerge',
+  title: 'react-ui-editor/Automerge',
+  component: Editor,
+  render: () => <Story />,
 };
 
-export const AutomergeRepo = {
-  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.

package/src/components/TextEditor/index.ts

@@ -3,6 +3,6 @@
 //
 
 export { tags } from '@lezer/highlight';
+export { type Extension } from '@codemirror/state';
 
-export * from './extensions';
 export * from './TextEditor';

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

@@ -16,6 +16,7 @@ import { MarkdownEditor } from './TextEditor';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {
+  title: 'react-ui-editor/YJS',
   component: MarkdownEditor,
   decorators: [withTheme],
 };

package/src/extensions/autocomplete.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// https://codemirror.net/examples/autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.autocompletion
+// https://codemirror.net/docs/ref/#autocomplete.Completion
+
+import {
+  autocompletion,
+  completionKeymap,
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+} from '@codemirror/autocomplete';
+import { keymap } from '@codemirror/view';
+
+export type AutocompleteResult = Completion;
+
+export type AutocompleteOptions = {
+  onSearch: (text: string) => Completion[];
+};
+
+/**
+ * Autocomplete extension.
+ */
+export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
+  return [
+    // https://codemirror.net/docs/ref/#view.keymap
+    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    keymap.of(completionKeymap),
+
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    autocompletion({
+      // TODO(burdon): Set custom keymap.
+      // defaultKeymap: false,
+
+      // Don't start unless key press.
+      activateOnTyping: false,
+
+      // TODO(burdon): Option to create new page?
+      // TODO(burdon): Optional decoration via addToOptions
+      override: [
+        (context: CompletionContext): CompletionResult | null => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || (match.from === match.to && !context.explicit)) {
+            return null;
+          }
+
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase()),
+          };
+        },
+      ],
+    }),
+  ];
+};