@dxos/react-ui-editor 0.10.0 → 0.11.0

package/src/stories/Automerge.stories.tsx

@@ -2,41 +2,44 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Repo, initSubduction } from '@automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { expect, waitFor } from 'storybook/test';
 
 import { Obj, Query, Ref } from '@dxos/echo';
+import { createObject } from '@dxos/echo-client';
 import { Doc } from '@dxos/echo-doc';
+import { useQuery, useResolveRef } from '@dxos/echo-react';
 import { TestSchema } from '@dxos/echo/testing';
-import { log } from '@dxos/log';
 import { type Messenger } from '@dxos/protocols';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { useSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
 import { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
-import { Button, useThemeContext } from '@dxos/react-ui';
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
-import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
+import { Text } from '@dxos/schema';
+import {
+  type DataExtensionsIdentity,
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 import { translations } from '#translations';
 
 import { useTextEditor } from '../hooks';
 
-const initialContent = 'Hello world!';
+const initialContent = ['# Hello world!', 'Hello Automerge', ''].join('\n\n');
 
-type TestObject = {
-  text: string;
-};
-
-type EditorProps = {
+type EditorProps = ThemedClassName<{
   source: Doc.Accessor;
   messenger?: Messenger;
-  identity?: Identity;
+  identity?: DataExtensionsIdentity;
   autoFocus?: boolean;
-};
+}>;
 
-const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
+const Editor = ({ classNames, source, messenger, identity, autoFocus }: EditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(
     () => ({
@@ -51,42 +54,29 @@ const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
     [source, themeMode],
   );
 
-  return <div ref={parentRef} className='flex w-full' />;
+  return <div ref={parentRef} className={mx('w-full', classNames)} />;
 };
 
+/**
+ * Two editors bound to the same in-process Automerge document (no client or networking). Editing
+ * either column mutates the shared handle; the automerge data extension on the other column observes
+ * the handle's `change` event and reconciles, so the columns stay in sync. For true cross-peer
+ * replication over a transport, see the `WithEcho` story.
+ */
 const DefaultStory = () => {
-  const [object1, setObject1] = useState<Doc.Accessor<TestObject>>();
-  const [object2, setObject2] = useState<Doc.Accessor<TestObject>>();
-
-  useEffect(() => {
-    queueMicrotask(async () => {
-      // Subduction-fork `Repo` constructs a `MemorySigner` internally; WASM must be
-      // initialized first or the constructor throws `'set_subduction_logger' of undefined`.
-      await initSubduction();
-      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
-
-      const object1 = repo1.create<TestObject>();
-      object1.change((doc: TestObject) => {
-        doc.text = initialContent;
-      });
-
-      const object2 = await repo2.find<TestObject>(object1.url);
-      await object2.whenReady();
-
-      setObject1({ handle: object1, path: ['text'] });
-      setObject2({ handle: object2, path: ['text'] });
-    });
-  }, []);
-
-  if (!object1 || !object2) {
-    return <Loading data={{ object1: !!object1, object2: !!object2 }} />;
-  }
+  const source = useMemo<Doc.Accessor>(
+    () => Doc.createAccessor(createObject(Text.make({ content: initialContent })), ['content']),
+    [],
+  );
 
   return (
-    <div className='h-full w-full grid grid-cols-2 gap-4'>
-      <Editor source={object1} autoFocus />
-      <Editor source={object2} />
+    <div className='dx-container grid grid-cols-2 gap-3 p-3'>
+      <div className='dx-container p-2 dx-base-surface rounded-md border border-subdued-separator'>
+        <Editor source={source} autoFocus />
+      </div>
+      <div className='dx-container p-2 dx-base-surface rounded-md border border-subdued-separator'>
+        <Editor source={source} />
+      </div>
     </div>
   );
 };
@@ -96,28 +86,16 @@ const EchoStory = () => {
   const identity = useIdentity();
   const space = useSpace(spaceId);
   const objects = useQuery(space?.db, Query.type(TestSchema.Expando, { type: 'test' }));
+  // NOTE: `objects[0]?.content.target` is not reactive to the ref loading; `useResolveRef`
+  // subscribes to the ref's load event so the editor mounts once the target arrives.
+  const content = useResolveRef(objects[0]?.content);
 
   const [source, setSource] = useState<Doc.Accessor>();
-  const init = useCallback(() => {
-    const content = objects[0]?.content.target;
-    if (!content) {
-      if (objects.length) {
-        // TODO(burdon): Initially ref isn't ready.
-        log.warn('no content', { index, objects: JSON.stringify(objects) });
-      }
-      return;
-    }
-
-    setSource(Doc.createAccessor(content, ['content']));
-  }, [objects]);
-
   useEffect(() => {
-    if (source) {
-      return;
+    if (!source && content) {
+      setSource(Doc.createAccessor(content, ['content']));
     }
-
-    init();
-  }, [objects, source]);
+  }, [content, source]);
 
   return (
     <div className='h-full w-full flex flex-col overflow-hidden'>
@@ -126,43 +104,52 @@ const EchoStory = () => {
       </pre>
       {identity && source ? (
         <div className='p-2 flex grow overflow-hidden'>
-          <Editor identity={identity} messenger={space} source={source} />
+          <Editor
+            identity={{
+              identityKey: identity.identityKey.toHex(),
+              displayName: identity.profile?.displayName,
+              data: identity.profile?.data,
+            }}
+            messenger={space}
+            source={source}
+          />
         </div>
       ) : (
-        <div className='p-2'>
-          <Button onClick={init}>Init</Button>
-        </div>
+        <Loading data={{ identity: !!identity, content: !!content }} />
       )}
     </div>
   );
 };
 
-const meta = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-editor/Automerge',
-  component: Editor as any,
+  render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof DefaultStory>;
+};
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-// TODO(burdon): ERROR: factories.ts:126 Error: Non-base58 character
-export const Default: Story = {
-  render: DefaultStory,
-};
+export const Default: Story = {};
 
-// TODO(burdon): Failing (doesn't sync)
+/**
+ * Two in-memory ECHO peers (no real networking, see `withMultiClientProvider`) sharing a
+ * document, exercising the `Space.postMessage`/`listen` gossip channel and the CodeMirror
+ * `awareness` extension end to end. This covers the same wiring as the (currently skipped,
+ * flaky) composer-app e2e collaboration cursor test, deterministically and without a browser.
+ */
 export const WithEcho: Story = {
   decorators: [
     withMultiClientProvider({
       numClients: 2,
       createIdentity: true,
       createSpace: true,
+      types: [TestSchema.Expando],
       onCreateSpace: async ({ space }) => {
         space.db.add(
           Obj.make(TestSchema.Expando, {
@@ -174,4 +161,38 @@ export const WithEcho: Story = {
     }),
   ],
   render: EchoStory,
+  play: async ({ canvasElement }) => {
+    // ECHO identity/space creation and invitation are async; wait for both peers to mount an editor.
+    const editors = await waitFor(
+      () => {
+        const found = Array.from(canvasElement.querySelectorAll<HTMLElement>('.cm-editor'));
+        void expect(found).toHaveLength(2);
+        return found;
+      },
+      { timeout: 15_000 },
+    );
+
+    const [contentA, contentB] = editors.map((editor) => editor.querySelector<HTMLElement>('.cm-content')!);
+
+    // Initial content replicated from the host's space to the guest. CodeMirror concatenates its
+    // per-line elements without newline separators, so the multiline `initialContent` (with literal
+    // `\n`s) never matches as substring text content; assert on each non-empty line instead.
+    for (const line of initialContent.split('\n').filter(Boolean)) {
+      await expect(contentA).toHaveTextContent(line);
+      await expect(contentB).toHaveTextContent(line);
+    }
+
+    // Focusing peer A broadcasts its cursor position over the gossip channel; peer B renders it
+    // as a `.cm-collab-selectionInfo` decoration.
+    contentA.focus();
+    await waitFor(() => expect(editors[1].querySelector('.cm-collab-selectionInfo')).toBeInTheDocument(), {
+      timeout: 10_000,
+    });
+
+    // And symmetrically in the other direction.
+    contentB.focus();
+    await waitFor(() => expect(editors[0].querySelector('.cm-collab-selectionInfo')).toBeInTheDocument(), {
+      timeout: 10_000,
+    });
+  },
 };

package/src/stories/Blocks.stories.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { random } from '@dxos/random';
+import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import {
+  blocks,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { translations } from '#translations';
+
+import { Editor, type EditorViewProps } from '../components';
+
+random.seed(123);
+
+// `blocks` composes the gutter drag grip (`blockDrag`), the whole-block selection + clipboard
+// (`blockSelection`), and the border/background behind selected blocks (`blockSelectionHighlight`).
+type StoryArgs = Pick<EditorViewProps, 'value'>;
+
+const DefaultStory = (props: StoryArgs) => {
+  const { themeMode } = useThemeContext();
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({ placeholder: 'Type here...' }),
+      createThemeExtensions({ themeMode }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      blocks(),
+    ],
+    [themeMode],
+  );
+
+  return (
+    <Editor.Root>
+      <Editor.View {...props} classNames='dx-container' extensions={extensions} />
+    </Editor.Root>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/Blocks',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const content = Array.from({ length: 30 }, (_, index) => {
+  const roll = random.number.int(10);
+  if (index === 0 || roll < 2) {
+    return `# Header ${index + 1}`;
+  }
+
+  if (roll > 8) {
+    return Array.from(
+      {
+        length: random.number.int({ min: 2, max: 8 }),
+      },
+      (_, itemIndex) => `- Item ${itemIndex + 1}`,
+    ).join('\n');
+  }
+
+  return random.lorem.paragraph();
+}).join('\n\n');
+
+export const Default: Story = {
+  args: { value: content },
+};