@dxos/react-ui-editor 0.8.1 → 0.8.2-main.10c050d

package/src/stories/Preview.stories.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useState, useEffect, type FC } from 'react';
+
+import { faker } from '@dxos/random';
+import { IconButton, Popover } from '@dxos/react-ui';
+import { hoverableHidden } from '@dxos/react-ui-theme';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory } from './util';
+import { RefPopover, useRefPopover } from '../components';
+import {
+  preview,
+  image,
+  type PreviewOptions,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  type PreviewRenderProps,
+} from '../extensions';
+import { str } from '../testing';
+import { createRenderer } from '../util';
+
+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 errors.
+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 { target } = useRefPopover('PreviewCard');
+  return (
+    <Popover.Portal>
+      <Popover.Content classNames='popover-card-width p-2' onOpenAutoFocus={(event) => event.preventDefault()}>
+        <Popover.Viewport>
+          <h2 className='grow truncate'>{target?.label}</h2>
+          {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>
+  );
+};
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Preview',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: EditorStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+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]',
+          '',
+          '',
+          '',
+        )}
+        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)}
+    />
+  ),
+};