@dxos/react-ui-editor 0.8.1-staging.9eaf14f → 0.8.2-main.12df754

package/src/stories/TextEditorBasic.stories.tsx

@@ -0,0 +1,289 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { markdown } from '@codemirror/lang-markdown';
+import { openSearchPanel } from '@codemirror/search';
+import React from 'react';
+
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import {
+  DefaultStory,
+  defaultExtensions,
+  allExtensions,
+  text,
+  str,
+  content,
+  longText,
+  largeWithImages,
+  headings,
+  global,
+  renderLinkButton,
+  renderLinkTooltip,
+  links,
+  names,
+} from './story-utils';
+import { editorMonospace } from '../defaults';
+import {
+  InputModeExtensions,
+  selectionState,
+  decorateMarkdown,
+  folding,
+  image,
+  linkTooltip,
+  table,
+  autocomplete,
+  mention,
+} from '../extensions';
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-editor/TextEditor',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: DefaultStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+//
+// Default
+//
+
+export const Default = {
+  render: () => <DefaultStory text={text} extensions={defaultExtensions} />,
+};
+
+//
+// Everything
+//
+
+export const Everything = {
+  render: () => <DefaultStory text={text} extensions={allExtensions} selection={{ anchor: 99, head: 110 }} />,
+};
+
+//
+// Empty
+//
+
+export const Empty = {
+  render: () => <DefaultStory extensions={defaultExtensions} />,
+};
+
+//
+// Readonly
+//
+
+export const Readonly = {
+  render: () => <DefaultStory text={text} extensions={defaultExtensions} readOnly />,
+};
+
+//
+// No Extensions
+//
+
+export const NoExtensions = {
+  render: () => <DefaultStory text={text} />,
+};
+
+//
+// Vim
+//
+
+export const Vim = {
+  render: () => (
+    <DefaultStory
+      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', content.paragraphs)}
+      extensions={[defaultExtensions, InputModeExtensions.vim]}
+    />
+  ),
+};
+
+//
+// Scrolling
+//
+
+export const Folding = {
+  render: () => <DefaultStory text={text} extensions={[folding()]} />,
+};
+
+export const Scrolling = {
+  render: () => (
+    <DefaultStory
+      text={str('# Large Document', '', longText)}
+      extensions={selectionState({
+        setState: (id, state) => global.set(id, state),
+        getState: (id) => global.get(id),
+      })}
+    />
+  ),
+};
+
+export const ScrollingWithImages = {
+  render: () => (
+    <DefaultStory 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 (
+      <DefaultStory
+        text={text}
+        extensions={defaultExtensions}
+        scrollTo={idx}
+        selection={{ anchor: idx, head: idx + word.length }}
+      />
+    );
+  },
+};
+
+//
+// Markdown
+//
+
+export const Blockquote = {
+  render: () => (
+    <DefaultStory
+      text={str('> Blockquote', 'continuation', content.footer)}
+      extensions={decorateMarkdown()}
+      debug='raw'
+    />
+  ),
+};
+
+export const Headings = {
+  render: () => (
+    <DefaultStory text={headings} extensions={decorateMarkdown({ numberedHeadings: { from: 2, to: 4 } })} />
+  ),
+};
+
+export const Links = {
+  render: () => (
+    <DefaultStory text={str(content.links, content.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />
+  ),
+};
+
+export const Image = {
+  render: () => <DefaultStory text={str(content.image, content.footer)} extensions={[image()]} />,
+};
+
+export const Code = {
+  render: () => <DefaultStory text={str(content.codeblocks, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const Lists = {
+  render: () => (
+    <DefaultStory
+      text={str(content.tasks, '', content.bullets, '', content.numbered, content.footer)}
+      extensions={[decorateMarkdown()]}
+    />
+  ),
+};
+
+export const BulletList = {
+  render: () => <DefaultStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const OrderedList = {
+  render: () => <DefaultStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
+};
+
+export const TaskList = {
+  render: () => (
+    <DefaultStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
+  ),
+};
+
+export const Table = {
+  render: () => <DefaultStory text={str(content.table, content.footer)} extensions={[decorateMarkdown(), table()]} />,
+};
+
+//
+// Commented out
+//
+
+export const CommentedOut = {
+  render: () => (
+    <DefaultStory
+      text={str('# Commented out', '', content.comment, content.footer)}
+      extensions={[
+        decorateMarkdown(),
+        markdown(),
+        // commentBlock()
+      ]}
+    />
+  ),
+};
+
+//
+// Typescript
+//
+
+export const Typescript = {
+  render: () => (
+    <DefaultStory
+      text={content.typescript}
+      lineNumbers
+      extensions={[editorMonospace, javascript({ typescript: true })]}
+    />
+  ),
+};
+
+//
+// Custom
+//
+
+export const Autocomplete = {
+  render: () => (
+    <DefaultStory
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', content.footer)}
+      extensions={[
+        decorateMarkdown({ renderLinkButton }),
+        autocomplete({
+          onSearch: (text) => {
+            return links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase()));
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Mention
+//
+
+export const Mention = {
+  render: () => (
+    <DefaultStory
+      text={str('# Mention', '', 'Type @...', content.footer)}
+      extensions={[
+        mention({
+          onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+//
+// Search
+//
+
+export const Search = {
+  render: () => (
+    <DefaultStory
+      text={str('# Search', text)}
+      extensions={defaultExtensions}
+      onReady={(view) => openSearchPanel(view)}
+    />
+  ),
+};

package/src/stories/TextEditorComments.stories.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { effect, useSignal } from '@preact/signals-react';
+import React, { type FC } from 'react';
+
+import { keySymbols, parseShortcut } from '@dxos/keyboard';
+import { PublicKey } from '@dxos/keys';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { DefaultStory, str, content, longText } from './story-utils';
+import { annotations, comments, createExternalCommentSync } from '../extensions';
+import { type Comment } from '../types';
+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;
+
+//
+// Comments
+//
+
+export const Comments = {
+  render: () => {
+    const _comments = useSignal<Comment[]>([]);
+    return (
+      <DefaultStory
+        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) {
+                console.log(
+                  'update',
+                  JSON.stringify({
+                    comments: state.comments.length,
+                    active: state.selection.current?.slice(0, 8),
+                    closest: state.selection.closest?.slice(0, 8),
+                  }),
+                );
+              }
+            },
+          }),
+        ]}
+      />
+    );
+  },
+};
+
+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 CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
+  return (
+    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+      <div>Create comment</div>
+      <div className='flex gap-1'>
+        {keySymbols(parseShortcut(shortcut)).map((char) => (
+          <Key key={char} char={char} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+//
+// Annotations
+//
+
+export const Annotations = {
+  render: () => (
+    <DefaultStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
+  ),
+};

package/src/stories/TextEditorPreview.stories.tsx

@@ -0,0 +1,239 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useState, useEffect, type FC, type KeyboardEvent } 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 { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { DefaultStory, str } from './story-utils';
+import { editorWidth } from '../defaults';
+import {
+  preview,
+  command,
+  image,
+  type PreviewOptions,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  type PreviewRenderProps,
+  type Action,
+} from '../extensions';
+import { RefPopover, useRefPopover } 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));
+  const text = Array.from({ length: 2 }, () => faker.lorem.paragraphs()).join('\n\n');
+  return {
+    label,
+    text,
+  };
+};
+
+// Async lookup.
+// TODO(burdon): Handle error.s
+const useRefTarget = (link: PreviewLinkRef, onLookup: PreviewOptions['onLookup']): PreviewLinkTarget | undefined => {
+  const [target, setTarget] = useState<PreviewLinkTarget | undefined>();
+  useEffect(() => {
+    void onLookup?.(link).then((target) => setTarget(target ?? undefined));
+  }, [link, onLookup]);
+
+  return target;
+};
+
+const PreviewCard = () => {
+  const { link, target } = useRefPopover('PreviewCard');
+  return (
+    <Popover.Portal>
+      <Popover.Content onOpenAutoFocus={(e) => e.preventDefault()}>
+        <Popover.Viewport>
+          <div className='grow truncate'>{link?.label}</div>
+          {target && <div className='line-clamp-3'>{target.text}</div>}
+        </Popover.Viewport>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover.Portal>
+  );
+};
+
+// TODO(burdon): Replace with card.
+const PreviewBlock: FC<PreviewRenderProps> = ({ readonly, link, onAction, onLookup }) => {
+  const target = useRefTarget(link, onLookup);
+  return (
+    <div className='group flex flex-col gap-2'>
+      <div className='flex items-center gap-4'>
+        <div className='grow truncate'>
+          {/* <span className='text-xs text-subdued mie-2'>Prompt</span> */}
+          {link.label}
+        </div>
+        {!readonly && (
+          <div className='flex gap-1'>
+            {(link.suggest && (
+              <>
+                {target && (
+                  <IconButton
+                    classNames='text-green-500'
+                    label='Apply'
+                    icon={'ph--check--regular'}
+                    onClick={() => onAction({ type: 'insert', link, target })}
+                  />
+                )}
+                <IconButton
+                  classNames='text-red-500'
+                  label='Cancel'
+                  icon={'ph--x--regular'}
+                  onClick={() => onAction({ type: 'delete', link })}
+                />
+              </>
+            )) || (
+              <IconButton
+                iconOnly
+                label='Delete'
+                icon={'ph--x--regular'}
+                classNames={hoverableHidden}
+                onClick={() => onAction({ type: 'delete', link })}
+              />
+            )}
+          </div>
+        )}
+      </div>
+      {target && <div className='line-clamp-3'>{target.text}</div>}
+    </div>
+  );
+};
+
+//
+// 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 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;
+      }
+    }
+  };
+
+  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,
+        )}
+      >
+        <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>
+  );
+};