@dxos/react-ui-editor 0.8.4-main.fffef41 → 0.9.0

package/src/stories/Automerge.stories.tsx

@@ -0,0 +1,177 @@
+//
+// 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 { Obj, Query, Ref } from '@dxos/echo';
+import { DocAccessor, createDocAccessor } from '@dxos/echo-client';
+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 { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
+import { Button, useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
+
+import { translations } from '#translations';
+
+import { useTextEditor } from '../hooks';
+
+const initialContent = 'Hello world!';
+
+type TestObject = {
+  text: string;
+};
+
+type EditorProps = {
+  source: DocAccessor;
+  messenger?: Messenger;
+  identity?: Identity;
+  autoFocus?: boolean;
+};
+
+const Editor = ({ source, messenger, identity, autoFocus }: EditorProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(
+    () => ({
+      autoFocus,
+      initialValue: DocAccessor.getValue(source),
+      extensions: [
+        createBasicExtensions({ placeholder: 'Type here...', search: true }),
+        createThemeExtensions({ themeMode, slots: { scroller: { className: 'p-2' } } }),
+        createDataExtensions({ id: 'test', text: source, messenger, identity }),
+      ],
+    }),
+    [source, themeMode],
+  );
+
+  return <div ref={parentRef} className='flex w-full' />;
+};
+
+const DefaultStory = () => {
+  const [object1, setObject1] = useState<DocAccessor<TestObject>>();
+  const [object2, setObject2] = useState<DocAccessor<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 }} />;
+  }
+
+  return (
+    <div className='h-full w-full grid grid-cols-2 gap-4'>
+      <Editor source={object1} autoFocus />
+      <Editor source={object2} />
+    </div>
+  );
+};
+
+const EchoStory = () => {
+  const { spaceId, index } = useClientStory();
+  const identity = useIdentity();
+  const space = useSpace(spaceId);
+  const objects = useQuery(space?.db, Query.type(TestSchema.Expando, { type: 'test' }));
+
+  const [source, setSource] = useState<DocAccessor>();
+  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(createDocAccessor(content, ['content']));
+  }, [objects]);
+
+  useEffect(() => {
+    if (source) {
+      return;
+    }
+
+    init();
+  }, [objects, source]);
+
+  return (
+    <div className='h-full w-full flex flex-col overflow-hidden'>
+      <pre className='p-2 text-xs text-subdued'>
+        {JSON.stringify({ index, identity: identity?.identityKey.truncate(), spaceId, objects }, null, 2)}
+      </pre>
+      {identity && source ? (
+        <div className='p-2 flex grow overflow-hidden'>
+          <Editor identity={identity} messenger={space} source={source} />
+        </div>
+      ) : (
+        <div className='p-2'>
+          <Button onClick={init}>Init</Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/Automerge',
+  component: Editor as any,
+  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,
+};
+
+// TODO(burdon): Failing (doesn't sync)
+export const WithEcho: Story = {
+  decorators: [
+    withMultiClientProvider({
+      numClients: 2,
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: async ({ space }) => {
+        space.db.add(
+          Obj.make(TestSchema.Expando, {
+            type: 'test',
+            content: Ref.make(Obj.make(TestSchema.Expando, { content: initialContent })),
+          }),
+        );
+      },
+    }),
+  ],
+  render: EchoStory,
+};

package/src/stories/Comments.stories.tsx

@@ -2,25 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import { effect, useSignal } from '@preact/signals-react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type FC } from 'react';
+import React, { type FC, useContext, useMemo } from 'react';
 
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
+import { type Comment } from '@dxos/ui-editor/types';
 
-import { annotations, comments, createExternalCommentSync } from '../extensions';
-import { type Comment } from '../types';
 import { createRenderer, str } from '../util';
-
 import { EditorStory, content, longText } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -34,52 +34,57 @@ type Story = StoryObj<typeof meta>;
 // Comments
 //
 
+const CommentsStory = () => {
+  const registry = useContext(RegistryContext);
+  const commentsAtom = useMemo(() => Atom.make<Comment[]>([]), []);
+
+  return (
+    <EditorStory
+      text={str('# Comments', '', content.paragraphs, content.footer)}
+      extensions={[
+        createExternalCommentSync(
+          'test',
+          (sink) => registry.subscribe(commentsAtom, () => sink()),
+          () => registry.get(commentsAtom),
+        ),
+        comments({
+          id: 'test',
+          renderTooltip: createRenderer(CommentTooltip),
+          onCreate: ({ cursor }) => {
+            const id = PublicKey.random().toHex();
+            const current = registry.get(commentsAtom);
+            registry.set(commentsAtom, [...current, { id, cursor }]);
+            return id;
+          },
+          onSelect: (state) => {
+            const debug = false;
+            if (debug) {
+              log.info('update', {
+                comments: state.comments.length,
+                active: state.selection.current?.slice(0, 8),
+                closest: state.selection.closest?.slice(0, 8),
+              });
+            }
+          },
+        }),
+      ]}
+    />
+  );
+};
+
 export const Comments: Story = {
-  render: () => {
-    const _comments = useSignal<Comment[]>([]);
-    return (
-      <EditorStory
-        text={str('# Comments', '', content.paragraphs, content.footer)}
-        extensions={[
-          createExternalCommentSync(
-            'test',
-            (sink) => effect(() => sink()),
-            () => _comments.value,
-          ),
-          comments({
-            id: 'test',
-            renderTooltip: createRenderer(CommentTooltip),
-            onCreate: ({ cursor }) => {
-              const id = PublicKey.random().toHex();
-              _comments.value = [..._comments.value, { id, cursor }];
-              return id;
-            },
-            onSelect: (state) => {
-              const debug = false;
-              if (debug) {
-                log.info('update', {
-                  comments: state.comments.length,
-                  active: state.selection.current?.slice(0, 8),
-                  closest: state.selection.closest?.slice(0, 8),
-                });
-              }
-            },
-          }),
-        ]}
-      />
-    );
-  },
+  render: () => <CommentsStory />,
 };
 
 const Key: FC<{ char: string }> = ({ char }) => (
-  <span className='flex justify-center items-center is-[24px] bs-[24px] rounded text-xs bg-neutral-200 text-black'>
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded-sm text-xs bg-neutral-200 text-black'>
     {char}
   </span>
 );
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 pli-2 plb-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded-sm'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -3,80 +3,67 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { useMemo } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { attentionSurface, mx } from '@dxos/react-ui-theme';
-
-import { EditorToolbar, useEditorToolbar } from '../components';
-import { editorWidth } from '../defaults';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 import {
-  InputModeExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  documentSlots,
   formattingKeymap,
-  formattingListener,
-} from '../extensions';
-import { type UseTextEditorProps, useTextEditor } from '../hooks';
-import { translations } from '../translations';
-import { type EditorInputMode, type EditorViewMode } from '../types';
+} from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-type StoryProps = { placeholder?: string } & UseTextEditorProps;
+import { translations } from '#translations';
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
-  const { themeMode } = useThemeContext();
+import { Editor } from '../components';
+import { type UseTextEditorProps } from '../hooks';
 
-  const toolbarState = useEditorToolbar({ viewMode: 'source' });
-  const viewMode = toolbarState.viewMode;
-  // TODO(wittjosiah): Provide way to change the input mode.
-  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      autoFocus,
-      initialValue,
-      selectionEnd: true,
-      extensions: [
-        editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly', search: true }),
-        createMarkdownExtensions(),
-        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
-        viewMode === 'source' ? [] : decorateMarkdown(),
-        formattingKeymap(),
-        formattingListener(() => toolbarState),
-      ],
-    }),
-    [editorInputMode, viewMode, themeMode, placeholder],
-  );
+type DefaultStoryProps = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
 
-  const getView = useCallback(() => {
-    invariant(view);
-    return view;
-  }, [view]);
+const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source' }: DefaultStoryProps) => {
+  const { themeMode } = useThemeContext();
 
-  const handleViewModeChange = useCallback((mode: EditorViewMode) => {
-    toolbarState.viewMode = mode;
-  }, []);
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({
+        placeholder,
+        lineWrapping: true,
+        readOnly: viewMode === 'readonly',
+        search: true,
+      }),
+      createThemeExtensions({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: documentSlots,
+      }),
+      createMarkdownExtensions(),
+      viewMode === 'source' ? [] : decorateMarkdown(),
+      formattingKeymap(),
+    ],
+    [viewMode, themeMode, placeholder],
+  );
 
-  // TODO(marijn): This doesn't update the state on view changes.
-  //  Also not sure if view is even guaranteed to exist at this point.
   return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
-      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
-        <div className={mx(editorWidth)} ref={parentRef} />
-      </div>
-    </div>
+    <Editor.Root extensions={extensions} viewMode={viewMode}>
+      <Editor.Content>
+        <Editor.Toolbar classNames='dx-document' />
+        <div className='dx-container dx-document bg-base-surface'>
+          <Editor.View autoFocus={autoFocus} initialValue={initialValue} selectionEnd />
+        </div>
+      </Editor.Content>
+    </Editor.Root>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen', classNames: 'bg-sidebar-surface' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/stories/Experimental.stories.tsx

@@ -7,18 +7,16 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { blast, defaultOptions, dropFile, typewriter } from '../extensions';
-import { str } from '../util';
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { blast, defaultOptions, dropFile, join, snippets } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -29,16 +27,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 //
-// Typewriter
+// Snippets
 //
 
-const typewriterItems = localStorage.getItem('dxos.org/testing/typewriter')?.split(',');
+const snippetItems = localStorage.getItem('org.dxos.testing.snippets')?.split(',');
 
-export const Typewriter: Story = {
+export const Snippets: Story = {
   render: () => (
     <EditorStory
-      text={str('# Typewriter', '', content.paragraphs, content.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
+      text={join('# Snippets', '', content.paragraphs, content.footer)}
+      extensions={[snippets({ items: snippetItems })]}
     />
   ),
 };
@@ -50,17 +48,17 @@ export const Typewriter: Story = {
 export const Blast: Story = {
   render: () => (
     <EditorStory
-      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
+      text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
-        typewriter({ items: typewriterItems }),
+        snippets({ items: snippetItems }),
         blast(
           defaultsDeep(
             {
               effect: 2,
               particleGravity: 0.2,
               particleShrinkRate: 0.995,
-              color: () => [faker.number.int({ min: 100, max: 200 }), 0, 0],
-              // color: () => [faker.number.int(256), faker.number.int(256), faker.number.int(256)],
+              color: () => [random.number.int({ min: 100, max: 200 }), 0, 0],
+              // color: () => [random.number.int(256), random.number.int(256), random.number.int(256)],
             },
             defaultOptions,
           ),
@@ -77,7 +75,7 @@ export const Blast: Story = {
 export const DND: Story = {
   render: () => (
     <EditorStory
-      text={str('# DND', '')}
+      text={join('# DND', '')}
       extensions={[
         dropFile({
           onDrop: (view, event) => {

package/src/stories/Markdown.stories.tsx

@@ -6,17 +6,15 @@ import { markdown } from '@codemirror/lang-markdown';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
-import { str } from '../util';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
 
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -37,7 +35,7 @@ export const Default: Story = {
 export const Blockquote: Story = {
   render: () => (
     <EditorStory
-      text={str('> Blockquote', 'continuation', content.footer)}
+      text={join('> Blockquote', 'continuation', content.footer)}
       extensions={decorateMarkdown()}
       debug='raw'
     />
@@ -49,21 +47,23 @@ export const Headings: Story = {
 };
 
 export const Links: Story = {
-  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+  render: () => (
+    <EditorStory text={join(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
 };
 
 export const Image: Story = {
-  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+  render: () => <EditorStory text={join(content.image, content.footer)} extensions={[image()]} />,
 };
 
 export const Code: Story = {
-  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 export const Lists: Story = {
   render: () => (
     <EditorStory
-      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      text={join(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
       extensions={[decorateMarkdown()]}
     />
   ),
@@ -74,7 +74,7 @@ export const Lists: Story = {
 //
 
 export const BulletList: Story = {
-  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -82,7 +82,7 @@ export const BulletList: Story = {
 //
 
 export const OrderedList: Story = {
-  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+  render: () => <EditorStory text={join(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
 };
 
 //
@@ -91,12 +91,12 @@ export const OrderedList: Story = {
 
 export const TaskList: Story = {
   render: () => (
-    <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+    <EditorStory text={join(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
   ),
 };
 
 export const TaskListEmpty: Story = {
-  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+  render: () => <EditorStory text={join('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
 };
 
 //
@@ -104,7 +104,7 @@ export const TaskListEmpty: Story = {
 //
 
 export const Table: Story = {
-  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+  render: () => <EditorStory text={join(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
 };
 
 //
@@ -114,7 +114,7 @@ export const Table: Story = {
 export const CommentedOut: Story = {
   render: () => (
     <EditorStory
-      text={str('# Commented out', '', content.comment, content.footer)}
+      text={join('# Commented out', '', content.comment, content.footer)}
       extensions={[
         decorateMarkdown(),
         markdown(),

package/src/stories/Outliner.stories.tsx

@@ -3,22 +3,20 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
 import { type EditorController, type EditorMenuGroup, EditorMenuProvider } from '../components';
-import { deleteItem, hashtag, listItemToString, outliner, treeFacet } from '../extensions';
-import { str } from '../util';
-
 import { EditorStory } from './components';
 
-type StoryProps = {
+type DefaultStoryProps = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: StoryProps) => {
+const DefaultStory = ({ text }: DefaultStoryProps) => {
   const [controller, setController] = useState<EditorController | null>(null);
 
   const extensions = useMemo(() => [outliner(), hashtag()], []);
@@ -39,10 +37,11 @@ const DefaultStory = ({ text }: StoryProps) => {
     ],
     [],
   );
+  const getView = useCallback(() => controller?.view ?? null, [controller]);
 
   return (
     <EditorMenuProvider
-      view={controller?.view}
+      getView={getView}
       groups={commandGroups}
       onSelect={({ view, item }) => {
         if (item.onSelect) {
@@ -69,7 +68,7 @@ const DefaultStory = ({ text }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },
@@ -85,7 +84,7 @@ export const Empty: Story = {
 
 export const Basic: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',
@@ -100,7 +99,7 @@ export const Basic: Story = {
 
 export const Nested: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '  - [ ] B',
@@ -115,7 +114,7 @@ export const Nested: Story = {
 
 export const Continuation: Story = {
   args: {
-    text: str(
+    text: join(
       //
       '- [ ] A',
       '- [ ] B',