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

package/src/stories/Command.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useState, type KeyboardEvent } from 'react';
+
+import { Button, Icon, Input, DropdownMenu } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory } from './util';
+import { RefDropdownMenu } from '../components';
+import { editorWidth } from '../defaults';
+import { command, type Action, floatingMenu } from '../extensions';
+import { str } from '../testing';
+import { createRenderer } from '../util';
+
+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>
+  );
+};
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Command',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: () => (
+    <RefDropdownMenu.Provider>
+      <EditorStory
+        text={str('# Command', '', '', '')}
+        extensions={[
+          floatingMenu(),
+          command({
+            renderDialog: createRenderer(CommandDialog),
+            onHint: () => 'Press / for commands.',
+          }),
+        ]}
+      />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content>
+          <DropdownMenu.Viewport>
+            <DropdownMenu.Item onClick={() => console.log('!')}>Test</DropdownMenu.Item>
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </RefDropdownMenu.Provider>
+  ),
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Default = {};

package/src/stories/Comments.stories.tsx

@@ -0,0 +1,98 @@
+//
+// 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 { log } from '@dxos/log';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory, content, longText } from './util';
+import { annotations, comments, createExternalCommentSync } from '../extensions';
+import { str } from '../testing';
+import { type Comment } from '../types';
+import { createRenderer } from '../util';
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Comments',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: EditorStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+//
+// Comments
+//
+
+export const Comments = {
+  render: () => {
+    const _comments = useSignal<Comment[]>([]);
+    return (
+      <EditorStory
+        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) {
+                log.info('update', {
+                  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: () => (
+    <EditorStory text={str('# Annotations', '', longText)} extensions={[annotations({ match: /volup/gi })]} />
+  ),
+};

package/src/stories/EditorToolbar.stories.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj } from '@storybook/react';
+import React, { useCallback, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { useThemeContext } from '@dxos/react-ui';
+import { attentionSurface, mx } from '@dxos/react-ui-theme';
+import { type Meta, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { EditorToolbar, useEditorToolbarState } from '../components';
+import { editorWidth } from '../defaults';
+import {
+  type EditorInputMode,
+  type EditorViewMode,
+  InputModeExtensions,
+  createMarkdownExtensions,
+  createBasicExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  formattingKeymap,
+  useFormattingState,
+} from '../extensions';
+import { useTextEditor, type UseTextEditorProps } from '../hooks';
+import translations from '../translations';
+
+type StoryProps = { placeholder?: string } & UseTextEditorProps;
+
+const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
+  const { themeMode } = useThemeContext();
+  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
+  const viewMode = toolbarState.viewMode;
+  const trackFormatting = useFormattingState(toolbarState);
+  // TODO(wittjosiah): Provide way to change the input mode.
+  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
+  const { parentRef, view } = useTextEditor(
+    () => ({
+      autoFocus,
+      initialValue,
+      moveToEndOfLine: true,
+      extensions: [
+        editorInputMode ? InputModeExtensions[editorInputMode] : [],
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        viewMode === 'source' ? [] : decorateMarkdown(),
+        formattingKeymap(),
+        trackFormatting,
+      ],
+    }),
+    [editorInputMode, viewMode, themeMode, placeholder],
+  );
+
+  const getView = useCallback(() => {
+    invariant(view);
+    return view;
+  }, [view]);
+
+  const handleViewModeChange = useCallback((mode: EditorViewMode) => {
+    toolbarState.viewMode = mode;
+  }, []);
+
+  // TODO(marijn): This doesn't update the state on view changes.
+  //  Also not sure if view is even guaranteed to exist at this point.
+  return (
+    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
+      <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
+        <div className={mx(editorWidth)} ref={parentRef} />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'ui/react-ui-editor/EditorToolbar',
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations, layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    autoFocus: true,
+    placeholder: 'Text...',
+    initialValue: '# Demo\n\nThis is a document.\n\n',
+  },
+};

package/src/stories/Experimental.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import defaultsDeep from 'lodash.defaultsdeep';
+import React from 'react';
+
+import { log } from '@dxos/log';
+import { faker } from '@dxos/random';
+import { withLayout, withTheme, type Meta } from '@dxos/storybook-utils';
+
+import { EditorStory, content } from './util';
+import { typewriter, blast, defaultOptions, dropFile } from '../extensions';
+import { str } from '../testing';
+
+const meta: Meta<typeof EditorStory> = {
+  title: 'ui/react-ui-editor/Experimental',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: EditorStory,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+//
+// Typewriter
+//
+
+const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+
+export const Typewriter = {
+  render: () => (
+    <EditorStory
+      text={str('# Typewriter', '', content.paragraphs, content.footer)}
+      extensions={[typewriter({ items: typewriterItems })]}
+    />
+  ),
+};
+
+//
+// Blast
+//
+
+export const Blast = {
+  render: () => (
+    <EditorStory
+      text={str('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
+      extensions={[
+        typewriter({ items: typewriterItems }),
+        blast(
+          defaultsDeep(
+            {
+              effect: 2,
+              particleGravity: 0.2,
+              particleShrinkRate: 0.995,
+              color: () => [faker.number.int({ min: 100, max: 200 }), 0, 0],
+              // color: () => [faker.number.int(256), faker.number.int(256), faker.number.int(256)],
+            },
+            defaultOptions,
+          ),
+        ),
+      ]}
+    />
+  ),
+};
+
+//
+// DND
+//
+
+export const DND = {
+  render: () => (
+    <EditorStory
+      text={str('# DND', '')}
+      extensions={[
+        dropFile({
+          onDrop: (view, event) => {
+            log.info('drop', event);
+          },
+        }),
+      ]}
+    />
+  ),
+};

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