@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/stories/TextEditorBasic.stories.tsx

@@ -1,333 +0,0 @@
-//
-// 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,
-  outliner,
-} 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()]}
-    />
-  ),
-};
-
-//
-// Bullet List
-//
-
-export const BulletList = {
-  render: () => <DefaultStory text={str(content.bullets, content.footer)} extensions={[decorateMarkdown()]} />,
-};
-
-//
-// Ordered List
-//
-
-export const OrderedList = {
-  render: () => <DefaultStory text={str(content.numbered, content.footer)} extensions={[decorateMarkdown()]} />,
-};
-
-//
-// Task List
-//
-
-export const TaskList = {
-  render: () => (
-    <DefaultStory text={str(content.tasks, content.footer)} extensions={[decorateMarkdown()]} debug='raw+tree' />
-  ),
-};
-
-//
-// Outliner
-//
-
-export const Outliner = {
-  render: () => (
-    <DefaultStory
-      // text={str(...content.tasks.split('\n').filter((line) => line.trim().startsWith('-')))}
-      text={str(
-        //
-        '- [ ] A',
-        '- [ ] B',
-        // Continuation lines.
-        '  ## Example',
-        '  Continuation line belonging to B.',
-        '  ```ts',
-        '  const x = 100',
-        '  ```',
-        '  - [ ] C',
-        '    - D Items can have links [like this](https://example.com).',
-      )}
-      extensions={[decorateMarkdown({ listPaddingLeft: 8 }), outliner()]}
-      debug='raw+tree'
-    />
-  ),
-};
-
-//
-// Table
-//
-
-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

@@ -1,99 +0,0 @@
-//
-// 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

@@ -1,239 +0,0 @@
-//
-// 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>
-  );
-};