@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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>
+  ),
 };

package/src/stories/TextEditor.stories.tsx

@@ -0,0 +1,256 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { openSearchPanel } from '@codemirror/search';
+import React from 'react';
+
+import { log } from '@dxos/log';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import {
+  EditorStory,
+  allExtensions,
+  content,
+  defaultExtensions,
+  global,
+  largeWithImages,
+  links,
+  longText,
+  names,
+  renderLinkButton,
+  text,
+} from './util';
+import { editorMonospace } from '../defaults';
+import {
+  InputModeExtensions,
+  autocomplete,
+  decorateMarkdown,
+  folding,
+  image,
+  listener,
+  mention,
+  selectionState,
+  staticCompletion,
+  typeahead,
+} from '../extensions';
+import { str } from '../testing';
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/TextEditor',
+  render: EditorStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+//
+// Default
+//
+
+export const Default = {
+  render: () => <EditorStory text={text} extensions={defaultExtensions} />,
+};
+
+//
+// Everything
+//
+
+export const Everything = {
+  render: () => <EditorStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
+};
+
+//
+// Empty
+//
+
+export const Empty = {
+  render: () => <EditorStory extensions={defaultExtensions} />,
+};
+
+//
+// Readonly
+//
+
+export const Readonly = {
+  render: () => <EditorStory text={text} extensions={defaultExtensions} readOnly />,
+};
+
+//
+// No Extensions
+//
+
+export const NoExtensions = {
+  render: () => <EditorStory text={text} />,
+};
+
+//
+// Vim
+//
+
+export const Vim = {
+  render: () => (
+    <EditorStory
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
+      extensions={[defaultExtensions, InputModeExtensions.vim]}
+    />
+  ),
+};
+
+//
+// Listener
+//
+
+export const Listener = {
+  render: () => (
+    <EditorStory
+      text={str('# Listener', '', content.footer)}
+      extensions={[
+        listener({
+          onFocus: (focusing) => {
+            log.info('listener', { focusing });
+          },
+          onChange: (text) => {
+            log.info('listener', { text });
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Folding
+//
+
+export const Folding = {
+  render: () => <EditorStory text={text} extensions={[folding()]} />,
+};
+
+//
+// Scrolling
+//
+
+export const Scrolling = {
+  render: () => (
+    <EditorStory
+      text={str('# Large Document', '', longText)}
+      extensions={selectionState({
+        setState: (id, state) => global.set(id, state),
+        getState: (id) => global.get(id),
+      })}
+    />
+  ),
+};
+
+export const ScrollingWithImages = {
+  render: () => (
+    <EditorStory text={str('# Large Document', '', largeWithImages)} extensions={[decorateMarkdown(), image()]} />
+  ),
+};
+
+export const ScrollTo = {
+  render: () => {
+    // NOTE: Selection won't appear if text is reformatted.
+    const word = 'Scroll to here...';
+    const text = str('# Scroll To', longText, '', word, '', longText);
+    const idx = text.indexOf(word);
+    return (
+      <EditorStory
+        text={text}
+        extensions={defaultExtensions}
+        scrollTo={idx}
+        selection={{ anchor: idx, head: idx + word.length }}
+      />
+    );
+  },
+};
+
+//
+// Typescript
+//
+
+export const Typescript = {
+  render: () => (
+    <EditorStory
+      text={content.typescript}
+      lineNumbers
+      extensions={[editorMonospace, javascript({ typescript: true })]}
+    />
+  ),
+};
+
+//
+// Autocomplete
+//
+
+export const Autocomplete = {
+  render: () => (
+    <EditorStory
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
+      extensions={[
+        decorateMarkdown({ renderLinkButton }),
+        autocomplete({
+          onSearch: (text) => {
+            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Typeahead
+//
+
+const completions = ['type', 'AND', 'OR', 'NOT', 'dxos.org'];
+
+export const Typeahead = {
+  render: () => (
+    <EditorStory
+      text={str('# Typeahead', '')}
+      extensions={[
+        decorateMarkdown({ renderLinkButton }),
+        typeahead({
+          onComplete: staticCompletion(completions, completions[0]),
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Mention
+//
+
+export const Mention = {
+  render: () => (
+    <EditorStory
+      text={str('# Mention', '', 'Type @...', content.footer)}
+      extensions={[
+        mention({
+          onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Search
+//
+
+export const Search = {
+  render: () => (
+    <EditorStory
+      text={str('# Search', text)}
+      extensions={defaultExtensions}
+      onReady={(view) => openSearchPanel(view)}
+    />
+  ),
+};