@dxos/react-ui-editor 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/stories/Markdown.stories.tsx

@@ -0,0 +1,121 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { markdown } from '@codemirror/lang-markdown';
+import React from 'react';
+
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './util';
+import { decorateMarkdown, image, linkTooltip, table } from '../extensions';
+import { str } from '../testing';
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Markdown',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: EditorStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+//
+// Default
+//
+
+export const Default = {
+  render: () => <EditorStory text={text} extensions={defaultExtensions} />,
+};
+
+export const Blockquote = {
+  render: () => (
+    <EditorStory
+      text={str('> Blockquote', 'continuation', content.footer)}
+      extensions={decorateMarkdown()}
+      debug='raw'
+    />
+  ),
+};
+
+export const Headings = {
+  render: () => <EditorStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />,
+};
+
+export const Links = {
+  render: () => <EditorStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+};
+
+export const Image = {
+  render: () => <EditorStory text={str(content.image, content.footer)} extensions={[image()]} />,
+};
+
+export const Code = {
+  render: () => <EditorStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const Lists = {
+  render: () => (
+    <EditorStory
+      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      extensions={[decorateMarkdown()]}
+    />
+  ),
+};
+
+//
+// Bullet List
+//
+
+export const BulletList = {
+  render: () => <EditorStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+//
+// Ordered List
+//
+
+export const OrderedList = {
+  render: () => <EditorStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+//
+// Task List
+//
+
+export const TaskList = {
+  render: () => (
+    <EditorStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+  ),
+};
+
+export const TaskListEmpty = {
+  render: () => <EditorStory text={str('- [ ] ')} extensions={[decorateMarkdown()]} debug='raw+tree' />,
+};
+
+//
+// Table
+//
+
+export const Table = {
+  render: () => <EditorStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+};
+
+//
+// Commented out
+//
+
+export const CommentedOut = {
+  render: () => (
+    <EditorStory
+      text={str('# Commented out', '', content.comment, content.footer)}
+      extensions={[
+        decorateMarkdown(),
+        markdown(),
+        // commentBlock()
+      ]}
+    />
+  ),
+};

package/src/stories/Outliner.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { DropdownMenu } from '@dxos/react-ui';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory } from './util';
+import { RefDropdownMenu } from '../components';
+import { outliner, listItemToString, treeFacet } from '../extensions';
+import { str } from '../testing';
+
+type StoryProps = {
+  text: string;
+};
+
+const DefaultStory = ({ text }: StoryProps) => {
+  return (
+    <RefDropdownMenu.Provider>
+      <EditorStory
+        text={text}
+        extensions={[outliner()]}
+        placeholder=''
+        slots={{}}
+        debug='raw+tree'
+        debugCustom={(view) => {
+          const tree = view.state.facet(treeFacet);
+          const lines: string[] = [];
+          tree.traverse((item) => lines.push(listItemToString(item)));
+          return <pre className='p-1 text-xs text-green-800 dark:text-green-200 overflow-auto'>{lines.join('\n')}</pre>;
+        }}
+      />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content>
+          <DropdownMenu.Viewport>
+            <DropdownMenu.Item onClick={() => console.log('test')}>Test</DropdownMenu.Item>
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </RefDropdownMenu.Provider>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-editor/Outliner',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: DefaultStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Empty = {
+  args: {},
+};
+
+export const Basic = {
+  args: {
+    text: str(
+      //
+      '- [ ] A',
+      '- [ ] B',
+      '- [ ] C',
+      '- [ ] D',
+      '- [ ] E',
+      '- [ ] F',
+      '- [ ] G',
+    ),
+  },
+};
+
+export const Nested = {
+  args: {
+    text: str(
+      //
+      '- [ ] A',
+      '  - [ ] B',
+      '- [ ] C',
+      '  - [ ] D',
+      '    - [ ] E',
+      '    - [ ] F',
+      '- [ ] G',
+    ),
+  },
+};
+
+export const Continuation = {
+  args: {
+    text: str(
+      //
+      '- [ ] A',
+      '- [ ] B',
+      'Continuation line.',
+      '- [ ] C',
+      '',
+      '- [ ] D',
+      '- [ ] E',
+      '- [ ] F',
+      '- [ ] G',
+      '',
+    ),
+  },
+};

package/src/stories/{TextEditorPreview.stories.tsx → Preview.stories.tsx}

@@ -4,73 +4,26 @@
 
 import '@dxos-theme';
 
-import React, { useState, useEffect, type FC, type KeyboardEvent } from 'react';
+import React, { useState, useEffect, type FC } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, Icon, IconButton, Input, Popover } from '@dxos/react-ui';
-import { mx, hoverableHidden } from '@dxos/react-ui-theme';
+import { IconButton, Popover } from '@dxos/react-ui';
+import { hoverableHidden } from '@dxos/react-ui-theme';
 import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
 
-import { DefaultStory, str } from './story-utils';
-import { editorWidth } from '../defaults';
+import { EditorStory } from './util';
+import { RefPopover, useRefPopover } from '../components';
 import {
   preview,
-  command,
   image,
   type PreviewOptions,
   type PreviewLinkRef,
   type PreviewLinkTarget,
   type PreviewRenderProps,
-  type Action,
 } from '../extensions';
-import { RefPopover, useRefPopover } from '../testing';
+import { str } from '../testing';
 import { createRenderer } from '../util';
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-editor/TextEditor',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: DefaultStory,
-  parameters: { layout: 'fullscreen' },
-};
-
-export default meta;
-
-//
-// Preview
-//
-
-export const Preview = {
-  render: () => (
-    <RefPopover.Provider onLookup={handlePreviewLookup}>
-      <DefaultStory
-        text={str(
-          '# Preview',
-          '',
-          'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
-          '',
-          '![DXOS][?dxn:queue:data:123]',
-          '',
-          'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
-          '',
-          '## Deep dive',
-          '',
-          '![ECHO][dxn:queue:data:echo]',
-          '',
-          '',
-        )}
-        extensions={[
-          image(),
-          preview({
-            renderBlock: createRenderer(PreviewBlock),
-            onLookup: handlePreviewLookup,
-          }),
-        ]}
-      />
-      <PreviewCard />
-    </RefPopover.Provider>
-  ),
-};
-
 const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
   faker.seed(ref.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
@@ -82,7 +35,7 @@ const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<Prev
 };
 
 // Async lookup.
-// TODO(burdon): Handle error.s
+// TODO(burdon): Handle errors.
 const useRefTarget = (link: PreviewLinkRef, onLookup: PreviewOptions['onLookup']): PreviewLinkTarget | undefined => {
   const [target, setTarget] = useState<PreviewLinkTarget | undefined>();
   useEffect(() => {
@@ -93,12 +46,12 @@ const useRefTarget = (link: PreviewLinkRef, onLookup: PreviewOptions['onLookup']
 };
 
 const PreviewCard = () => {
-  const { link, target } = useRefPopover('PreviewCard');
+  const { target } = useRefPopover('PreviewCard');
   return (
     <Popover.Portal>
-      <Popover.Content onOpenAutoFocus={(e) => e.preventDefault()}>
+      <Popover.Content classNames='popover-card-width p-2' onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <div className='grow truncate'>{link?.label}</div>
+          <h2 className='grow truncate'>{target?.label}</h2>
           {target && <div className='line-clamp-3'>{target.text}</div>}
         </Popover.Viewport>
         <Popover.Arrow />
@@ -153,87 +106,44 @@ const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLook
   );
 };
 
-//
-// Command
-//
-
-export const Command = {
-  render: () => (
-    <DefaultStory
-      text={str(
-        '# Preview',
-        '',
-        'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
-        '',
-        '![DXOS][dxn:queue:data:123]',
-        '',
-      )}
-      extensions={[
-        preview({
-          renderBlock: createRenderer(PreviewBlock),
-          onLookup: handlePreviewLookup,
-        }),
-        command({
-          renderMenu: createRenderer(CommandMenu),
-          renderDialog: createRenderer(CommandDialog),
-          onHint: () => 'Press / for commands.',
-        }),
-      ]}
-    />
-  ),
-};
-
-const CommandMenu = ({ onAction }: { onAction: () => void }) => {
-  return (
-    <Button classNames='p-1 aspect-square' onClick={onAction}>
-      <Icon icon='ph--sparkle--regular' size={5} />
-    </Button>
-  );
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Preview',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: EditorStory,
+  parameters: { layout: 'fullscreen' },
 };
 
-const CommandDialog = ({ onAction }: { onAction: (action?: Action) => void }) => {
-  const [text, setText] = useState('');
-
-  const handleInsert = () => {
-    // TODO(burdon): Use queue ref.
-    const link = `[${text}](dxn:queue:data:123)`;
-    onAction(text.length ? { type: 'insert', text: link } : undefined);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        handleInsert();
-        break;
-      }
-      case 'Escape': {
-        onAction();
-        break;
-      }
-    }
-  };
+export default meta;
 
-  return (
-    <div className='flex w-full justify-center'>
-      <div
-        className={mx(
-          'flex w-full p-2 gap-2 items-center bg-modalSurface border border-separator rounded-md',
-          editorWidth,
+export const Default = {
+  render: () => (
+    <RefPopover.Provider onLookup={handlePreviewLookup}>
+      <EditorStory
+        text={str(
+          '# Preview',
+          '',
+          'This project is part of the [DXOS][dxn:queue:data:123] SDK.',
+          '',
+          '![DXOS][?dxn:queue:data:123]',
+          '',
+          'It consists of [ECHO][dxn:queue:data:echo], [HALO][dxn:queue:data:halo], and [MESH][dxn:queue:data:mesh].',
+          '',
+          '## Deep dive',
+          '',
+          '![ECHO][dxn:queue:data:echo]',
+          '',
+          '',
+          '',
         )}
-      >
-        <Input.Root>
-          <Input.TextInput
-            autoFocus={true}
-            placeholder='Ask a question...'
-            value={text}
-            onChange={(ev) => setText(ev.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
-          <Icon icon='ph--x--regular' size={5} />
-        </Button>
-      </div>
-    </div>
-  );
+        extensions={[
+          image(),
+          preview({
+            renderBlock: createRenderer(PreviewBlock),
+            onLookup: handlePreviewLookup,
+          }),
+        ]}
+      />
+      <PreviewCard />
+    </RefPopover.Provider>
+  ),
 };