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

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

@@ -8,7 +8,7 @@ import { EditorView } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { StrictMode, useRef, useState } from 'react';
+import React, { type FC, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
@@ -19,28 +19,30 @@ import { withTheme } from '@dxos/storybook-utils';
 import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
 import {
   autocomplete,
+  blast,
+  code,
+  comments,
+  defaultOptions,
+  hr,
+  image,
   listener,
   link,
+  mention,
+  table,
   tasklist,
-  tooltip,
-  type TooltipOptions,
+  typewriter,
+  type CommentsOptions,
   type LinkOptions,
-  comments,
-  table,
-  image,
-  mention,
-  blast,
-  demo,
-  defaultOptions,
-  highlight,
-  code,
-} from './extensions';
-import { useTextModel } from '../../hooks';
+  mermaid,
+} from '../../extensions';
+import { type CommentRange, useTextModel } from '../../hooks';
 
 // Extensions:
 // TODO(burdon): Table of contents.
 // TODO(burdon): Front-matter
 
+faker.seed(101);
+
 const str = (...lines: string[]) => lines.join('\n');
 
 const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
@@ -55,6 +57,7 @@ const text = {
     '  - [ ] state',
     '  - [ ] indent',
     '  - [x] style',
+    '',
   ),
 
   list: str(
@@ -63,6 +66,7 @@ const text = {
     '- new york',
     '- london',
     '- tokyo',
+    '',
   ),
 
   numbered: str(
@@ -87,8 +91,8 @@ const text = {
     '',
     '  return () => <div>Test</div>;',
     '};',
+    '```',
     '',
-    '```'
   ),
 
   links: str(
@@ -103,11 +107,11 @@ const text = {
   table: str(
     '# Table',
     '',
-    `| ${faker.lorem.word().padStart(8)} | ${faker.lorem.word().padStart(8)} | ${faker.lorem.word().padStart(8)} |`,
-    '|----------|----------|----------|',
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
+    `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
+    `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     '', // TODO(burdon): Possible GFM parsing bug if no newline?
   ),
 
@@ -119,6 +123,8 @@ const text = {
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
+  mermaid: str('```mermaid', 'graph TD;', 'A-->B;', 'A-->C;', 'B-->D;', 'C-->D;', '```'),
+
   footer: str('', '', '', '', '')
 };
 
@@ -147,7 +153,6 @@ const document = str(
   text.table,
   '---',
   text.image,
-  '',
   text.footer,
 );
 
@@ -162,7 +167,7 @@ const links = [
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const onHover: TooltipOptions['onHover'] = (el, url) => {
+const onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -174,7 +179,28 @@ const onHover: TooltipOptions['onHover'] = (el, url) => {
   );
 };
 
-const onRender: LinkOptions['onRender'] = (el, url) => {
+const Key: FC<{ char: string }> = ({ char }) => (
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+    {char}
+  </span>
+);
+
+const onCommentsHover: CommentsOptions['onHover'] = (el) => {
+  createRoot(el).render(
+    <StrictMode>
+      <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+        <div>Create comment</div>
+        {/* TODO(burdon): Unify shortcuts. */}
+        <div className='flex gap-1'>
+          <Key char='⌘' />
+          <Key char="'" />
+        </div>
+      </div>
+    </StrictMode>,
+  );
+};
+
+const onRenderLink: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
@@ -184,14 +210,14 @@ const onRender: LinkOptions['onRender'] = (el, url) => {
   );
 };
 
-// TODO(burdon): Pass in model.
-const Story = ({
-  text,
-  automerge,
-  ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'readonly' | 'extensions' | 'slots'>) => {
+type StoryProps = {
+  text?: string;
+  automerge?: boolean;
+} & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
+
+const Story = ({ text, automerge, ...props }: StoryProps) => {
   const ref = useRef<TextEditorRef>(null);
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
     return null;
@@ -221,11 +247,11 @@ const extensions = [
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
+  hr(),
   image(),
-  link({ onRender }),
+  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
   table(),
   tasklist(),
-  tooltip({ onHover }),
 ];
 
 export const Default = {
@@ -236,12 +262,27 @@ export const Readonly = {
   render: () => <Story text={document} extensions={extensions} readonly />,
 };
 
-export const Tooltips = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[tooltip({ onHover })]} />,
+export const NoExtensions = {
+  render: () => <Story text={document} />,
+};
+
+// TODO(burdon): Cursor bug if no newline after BR (cursor down just loops back to start of each paragraph).
+export const HorizontalRule = {
+  render: () => (
+    <Story
+      text={str('# Horizontal Rule', '', text.paragraphs, '---', '', text.paragraphs, '---', '', text.paragraphs)}
+      extensions={[hr()]}
+    />
+  ),
 };
 
 export const Links = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[link({ onRender })]} />,
+  render: () => (
+    <Story
+      text={str(text.links, text.footer)}
+      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
+    />
+  ),
 };
 
 export const Code = {
@@ -256,7 +297,7 @@ export const Image = {
   render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
 };
 
-export const TaskList = {
+export const Tasklist = {
   render: () => (
     <Story
       text={str(text.tasks, '', text.list, text.footer)}
@@ -277,7 +318,7 @@ export const Autocomplete = {
     <Story
       text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
       extensions={[
-        link({ onRender }),
+        link({ onRender: onRenderLink }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -301,48 +342,56 @@ export const Mention = {
   ),
 };
 
-const mark = () => `[^${PublicKey.random().toHex()}]`;
-export const Comments = {
-  render: () => (
-    <Story
-      text={str(text.paragraphs, mark(), '', mark(), text.footer)}
-      extensions={[
-        comments({
-          onCreate: () => PublicKey.random().toHex(),
-          onUpdate: (info) => {
-            // console.log('update', info);
-          },
-        }),
-        highlight(),
-      ]}
-    />
-  ),
+export const Mermaid = {
+  render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
 };
 
-export const Diagnostics = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        // Cursor moved.
-        EditorView.updateListener.of((update) => {
-          console.log('update', update.view.state.selection.main.head);
-        }),
-      ]}
-    />
-  ),
+export const Comments = {
+  render: () => {
+    const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
+
+    return (
+      <Story
+        text={str('# Comments', '', text.paragraphs, text.footer)}
+        comments={commentsStates}
+        extensions={[
+          comments({
+            onHover: onCommentsHover,
+            onCreate: (relPos) => {
+              const id = PublicKey.random().toHex();
+              setCommentStates((comments) => [...comments, { id, cursor: relPos }]);
+              return id;
+            },
+            onSelect: (state) => {
+              const debug = false;
+              if (debug) {
+                console.log(
+                  'update',
+                  JSON.stringify({
+                    active: state.active?.slice(0, 8),
+                    closest: state.closest?.slice(0, 8),
+                    ranges: state.ranges.length,
+                  }),
+                );
+              }
+            },
+          }),
+        ]}
+      />
+    );
+  },
 };
 
-export const Demo = {
-  render: () => <Story text={str(text.paragraphs, text.footer)} extensions={[demo()]} />,
+export const Typewriter = {
+  render: () => <Story text={str('# Typewriter', '', text.paragraphs, text.footer)} extensions={[typewriter()]} />,
 };
 
 export const Blast = {
   render: () => (
     <Story
-      text={str(text.paragraphs, text.code, text.paragraphs)}
+      text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
       extensions={[
-        demo({
+        typewriter({
           items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
         }),
         blast(
@@ -362,6 +411,16 @@ export const Blast = {
   ),
 };
 
-export const NoExtensions = {
-  render: () => <Story text={document} />,
+export const Diagnostics = {
+  render: () => (
+    <Story
+      text={document}
+      extensions={[
+        // Cursor moved.
+        EditorView.updateListener.of((update) => {
+          console.log('update', update.view.state.selection.main.head);
+        }),
+      ]}
+    />
+  ),
 };

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

@@ -12,8 +12,9 @@ import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
-import { textTheme } from './themes';
+import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
+import { textTheme } from '../../themes';
 
 const initialText = [
   '# TextEditor',
@@ -31,7 +32,7 @@ const Story = ({
   ...props
 }: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
   const ref = useRef<TextEditorRef>(null);
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
     return null;
@@ -67,6 +68,18 @@ export const Default = {
   ),
 };
 
+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

package/src/components/TextEditor/TextEditor.tsx

@@ -21,10 +21,10 @@ 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];
@@ -56,9 +56,10 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
-  readonly?: boolean;
-  editorMode?: EditorMode;
+  readonly?: boolean; // TODO(burdon): Move into model.
+  comments?: CommentRange[]; // TODO(burdon): Move into extension.
   extensions?: Extension[];
+  editorMode?: EditorMode;
   slots?: TextEditorSlots;
 };
 
@@ -67,16 +68,16 @@ export type TextEditorProps = {
  * 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) => {
+  ({ 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, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
+    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
+      { state?: EditorState; view?: EditorView } | undefined
+    >();
     useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
-    // TODO(burdon): Factor out?
+    // TODO(burdon): Factor out as extension.
     const { awareness, peer } = model;
     useEffect(() => {
       if (awareness && peer) {
@@ -88,30 +89,34 @@ 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.
+    useEffect(() => {
+      if (view && comments?.length) {
+        view.dispatch({
+          effects: setCommentRange.of({ model, comments }),
+        });
+      }
+    }, [view, comments]);
 
     useEffect(() => {
       if (!root) {
         return;
       }
 
+      // TODO(burdon): Remember cursor position.
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc: model.text(),
         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.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
@@ -124,10 +129,11 @@ 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({
+      setEditor({
+        state,
+        view: new EditorView({
           state,
           parent: root,
           // NOTE: Uncomment to spy on all transactions.
@@ -136,15 +142,13 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           //   view.update([transaction]);
           // },
         }),
-      );
-      setState(state);
+      });
 
       return () => {
         view?.destroy();
-        setView(undefined);
-        setState(undefined);
+        setEditor(undefined);
       };
-    }, [root, model, themeMode, readonly, editorMode]);
+    }, [root, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {

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.

package/src/components/TextEditor/index.ts

@@ -5,7 +5,4 @@
 export { tags } from '@lezer/highlight';
 export { type Extension } from '@codemirror/state';
 
-export * from './extensions';
-export * from './themes';
-
 export * from './TextEditor';

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

@@ -12,7 +12,7 @@ import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-cli
 import { useId, Input } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor } from '../../components';
+import { MarkdownEditor } from './TextEditor';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {