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

package/src/stories/TextEditorSpecial.stories.tsx

@@ -1,107 +0,0 @@
-//
-// 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 { DefaultStory, str, content } from './story-utils';
-import { typewriter, blast, defaultOptions, dropFile, listener } 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;
-
-//
-// Listener
-//
-
-export const Listener = {
-  render: () => (
-    <DefaultStory
-      text={str('# Listener', '', content.footer)}
-      extensions={[
-        listener({
-          onFocus: (focusing) => {
-            console.log({ focusing });
-          },
-          onChange: (text) => {
-            console.log({ text });
-          },
-        }),
-      ]}
-    />
-  ),
-};
-
-//
-// Typewriter
-//
-
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
-
-export const Typewriter = {
-  render: () => (
-    <DefaultStory
-      text={str('# Typewriter', '', content.paragraphs, content.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
-    />
-  ),
-};
-
-//
-// Blast
-//
-
-export const Blast = {
-  render: () => (
-    <DefaultStory
-      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: () => (
-    <DefaultStory
-      text={str('# DND', '')}
-      extensions={[
-        dropFile({
-          onDrop: (view, event) => {
-            log.info('drop', event);
-          },
-        }),
-      ]}
-    />
-  ),
-};

package/src/stories/story-utils.tsx

@@ -1,327 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Completion } from '@codemirror/autocomplete';
-import { type Extension } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import React, { useEffect, useState, type FC } from 'react';
-
-import { Expando } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/keys';
-import { live } from '@dxos/live-object';
-import { faker } from '@dxos/random';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
-import { useThemeContext, Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { editorContent, editorGutter } from '../defaults';
-import {
-  type DebugNode,
-  type EditorSelectionState,
-  createDataExtensions,
-  createBasicExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  debugTree,
-  folding,
-  formattingKeymap,
-  image,
-  linkTooltip,
-  table,
-} from '../extensions';
-import { useTextEditor, type UseTextEditorProps } from '../hooks';
-import { createRenderer } from '../util';
-
-// Utility functions
-export const str = (...lines: string[]) => lines.join('\n');
-
-export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
-
-export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
-
-export const code = str(
-  '// Code',
-  'const Component = () => {',
-  '  const x = 100;',
-  '',
-  '  return () => <div>Test</div>;',
-  '};',
-);
-
-// Content blocks for stories
-export const content = {
-  tasks: str(
-    //
-    '### TaskList',
-    '',
-    `- [x] ${faker.lorem.sentences()}`,
-    `- [ ] ${faker.lorem.sentences()}`,
-    `  - [ ] ${faker.lorem.sentences()}`,
-    `    - [ ] ${faker.lorem.sentences()}`,
-    `    - [x] ${faker.lorem.sentences()}`,
-    '',
-  ),
-
-  bullets: str(
-    //
-    '### BulletList',
-    '',
-    `- ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `  - ${faker.lorem.sentences()}`,
-    `- ${faker.lorem.sentences()}`,
-    '',
-  ),
-
-  numbered: str(
-    //
-    '### OrderedList (part 1)',
-    '',
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `    1. ${faker.lorem.sentences()}`,
-    `        1. ${faker.lorem.sentences()}`,
-    `1. ${faker.lorem.sentences()}`,
-    '',
-    '### OrderedList (part 2)',
-    '',
-    `1. ${faker.lorem.sentences()}`,
-    '',
-  ),
-
-  typescript: code,
-
-  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
-
-  comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
-
-  links: str(
-    '### Links',
-    '',
-    'This is a naked link https://dxos.org within a sentence.',
-    '',
-    'Take a look at [DXOS](https://dxos.org) and how to [get started](https://docs.dxos.org/guide/getting-started.html).',
-    '',
-    'This is all about https://dxos.org and related technologies.',
-    '',
-  ),
-
-  table: str(
-    '### Tables',
-    '',
-    `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
-    `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
-    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
-    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
-    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
-    '',
-  ),
-
-  image: str('### Image', '', img),
-
-  headings: str(
-    ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
-  ),
-
-  formatting: str('### Formatting', '', 'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.', ''),
-
-  blockquotes: str(
-    '### Blockquotes',
-    '',
-    '> This is a block quote.',
-    '',
-    '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
-    '',
-    '> This is ...',
-    '... a multi-line ...',
-    'block quote.',
-    '',
-  ),
-
-  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
-
-  footer: str('', '', '', '', ''),
-};
-
-// Combined text for stories
-export const text = str(
-  '# Markdown',
-  'Composer Markdown Editor',
-  '',
-
-  '---',
-  '## Basics',
-  content.blockquotes,
-  content.formatting,
-  content.links,
-
-  '---',
-  '## Lists',
-  content.bullets,
-  content.tasks,
-  content.numbered,
-
-  '---',
-  '## Misc',
-  content.codeblocks,
-  content.table,
-  content.image,
-  content.footer,
-  '=== LAST LINE ===',
-);
-
-// Shared links for autocomplete
-export const links: Completion[] = [
-  { label: 'DXOS', apply: '[DXOS](https://dxos.org)' },
-  { label: 'GitHub', apply: '[DXOS GitHub](https://github.com/dxos)' },
-  { label: 'Automerge', apply: '[Automerge](https://automerge.org/)' },
-  { label: 'IPFS', apply: '[Protocol Labs](https://docs.ipfs.tech)' },
-  { label: 'StackEdit', apply: '[StackEdit](https://stackedit.io/app)' },
-];
-
-export const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
-
-const hover =
-  'rounded-sm text-baseText text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
-
-const LinkTooltip: FC<{ url: string }> = ({ url }) => {
-  const web = new URL(url);
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover, 'flex items-center gap-2')}>
-      {web.origin}
-      <Icon icon='ph--arrow-square-out--regular' size={4} />
-    </a>
-  );
-};
-
-export const renderLinkTooltip = createRenderer(LinkTooltip);
-
-const LinkButton: FC<{ url: string }> = ({ url }) => {
-  return (
-    <a href={url} target='_blank' rel='noreferrer' className={mx(hover)}>
-      <Icon icon='ph--arrow-square-out--regular' size={4} classNames='inline-block mis-1 mb-[3px]' />
-    </a>
-  );
-};
-
-export const renderLinkButton = createRenderer(LinkButton);
-
-// Shared extensions
-export const defaultExtensions: Extension[] = [
-  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100 }),
-  formattingKeymap(),
-  linkTooltip(renderLinkTooltip),
-];
-
-export const allExtensions: Extension[] = [
-  decorateMarkdown({ renderLinkButton, selectionChangeDelay: 100, numberedHeadings: { from: 2, to: 4 } }),
-  formattingKeymap(),
-  linkTooltip(renderLinkTooltip),
-  image(),
-  table(),
-  folding(),
-];
-
-// Long text for scrolling stories
-export const longText = faker.helpers
-  .multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 })
-  .join('\n\n');
-
-export const largeWithImages = faker.helpers
-  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
-  .flatMap((x) => x)
-  .join('\n\n');
-
-export const headings = str(
-  ...[1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 2, 3, 3, 2, 2, 6, 1]
-    .map((level) => ['#'.repeat(level) + ' ' + faker.lorem.sentence(3), faker.lorem.sentences(), ''])
-    .flat(),
-);
-
-export const global = new Map<string, EditorSelectionState>();
-
-// Type definitions
-export type DebugMode = 'raw' | 'tree' | 'raw+tree';
-
-export type StoryProps = {
-  id?: string;
-  debug?: DebugMode;
-  text?: string;
-  readOnly?: boolean;
-  placeholder?: string;
-  lineNumbers?: boolean;
-  onReady?: (view: EditorView) => void;
-} & Pick<UseTextEditorProps, 'scrollTo' | 'selection' | 'extensions'>;
-
-// Default story component
-export const DefaultStory = ({
-  id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
-  debug,
-  text,
-  extensions,
-  readOnly,
-  placeholder = 'New document.',
-  scrollTo,
-  selection,
-  lineNumbers,
-  onReady,
-}: StoryProps) => {
-  const [object] = useState(createObject(live(Expando, { content: text ?? '' })));
-  const { themeMode } = useThemeContext();
-  const [tree, setTree] = useState<DebugNode>();
-  const { parentRef, focusAttributes, view } = useTextEditor(
-    () => ({
-      id,
-      initialValue: text,
-      extensions: [
-        createDataExtensions({ id, text: createDocAccessor(object, ['content']) }),
-        createBasicExtensions({ readOnly, placeholder, lineNumbers, scrollPastEnd: true }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({
-          themeMode,
-          syntaxHighlighting: true,
-          slots: {
-            content: {
-              className: editorContent,
-            },
-          },
-        }),
-        editorGutter,
-        extensions || [],
-        debug ? debugTree(setTree) : [],
-      ],
-      scrollTo,
-      selection,
-    }),
-    [object, extensions, themeMode],
-  );
-
-  useEffect(() => {
-    if (view) {
-      onReady?.(view);
-    }
-  }, [view]);
-
-  return (
-    <div className='flex w-full'>
-      <div role='none' className='flex w-full overflow-hidden' ref={parentRef} {...focusAttributes} />
-      {debug && (
-        <div className='flex flex-col w-[800px] border-l border-separator divide-y divide-separator overflow-auto'>
-          {(debug === 'raw' || debug === 'raw+tree') && (
-            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>{view?.state.doc.toString()}</pre>
-          )}
-          {(debug === 'tree' || debug === 'raw+tree') && (
-            <pre className='p-1 font-mono text-xs text-green-800 dark:text-green-200'>
-              {JSON.stringify(tree, null, 2)}
-            </pre>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/testing/RefPopover.tsx

@@ -1,74 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../extensions';
-
-const customEventOptions = { capture: true, passive: false };
-
-// Create a context for the dxn value.
-type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
-const REF_POPOVER = 'RefPopover';
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
-
-type RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
-
-const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      const { ref, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  useEffect(() => {
-    return rootRef
-      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
-      : undefined;
-  }, [rootRef]);
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    </RefPopoverContextProvider>
-  );
-};
-
-export const RefPopover = {
-  Provider: RefPopoverProvider,
-};
-
-export { useRefPopover };
-
-export type { RefPopoverProviderProps, RefPopoverValue };

package/src/testing/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './RefPopover';