@dxos/react-ui-editor 0.4.8-main.27faba7 → 0.4.8-main.512e4c8

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -1,524 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import { type EditorView } from '@codemirror/view';
-import { ArrowSquareOut, X } from '@phosphor-icons/react';
-import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, type KeyboardEvent, StrictMode, useRef, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { TextObject } from '@dxos/echo-schema';
-import { keySymbols, parseShortcut } from '@dxos/keyboard';
-import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { Button, DensityProvider, Input, ThemeProvider } from '@dxos/react-ui';
-import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { MarkdownEditor, type TextEditorProps } from './TextEditor';
-import {
-  annotations,
-  autocomplete,
-  blast,
-  command,
-  comments,
-  decorateMarkdown,
-  defaultOptions,
-  dnd,
-  formatting,
-  image,
-  linkTooltip,
-  mention,
-  table,
-  typewriter,
-  useComments,
-  EditorModes,
-  type CommandAction,
-  type CommandOptions,
-  type CommentsOptions,
-  listener,
-} from '../../extensions';
-import { type Comment, useTextModel } from '../../hooks';
-import translations from '../../translations';
-
-faker.seed(101);
-
-const str = (...lines: string[]) => lines.join('\n');
-
-const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
-
-const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
-
-const text = {
-  tasks: str(
-    //
-    '## Tasks',
-    '',
-    '- [x] decorator',
-    '- [ ] checkbox',
-    '  - [ ] state',
-    '    - [ ] indent',
-    '    - [x] style',
-    '',
-  ),
-
-  list: str(
-    //
-    '## List',
-    '',
-    '- new york',
-    '- london',
-    '- tokyo',
-    '',
-  ),
-
-  numbered: str(
-    //
-    '## Numbered',
-    '',
-    '1. one',
-    '2. two',
-    '3. three',
-    '',
-  ),
-
-  code: str(
-    '## Code',
-    '',
-    '```',
-    '$ ls -las',
-    '```',
-    '',
-    '```tsx',
-    'const Component = () => {',
-    '  const x = 100;',
-    '',
-    '  return () => <div>Test</div>;',
-    '};',
-    '```',
-    '',
-  ),
-
-  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).',
-    '',
-  ),
-
-  table: str(
-    '# Table',
-    '',
-    `| ${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(),
-  ),
-
-  paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
-
-  footer: str('', '', '', '', ''),
-};
-
-const document = str(
-  '# Markdown',
-  '',
-  '> 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.',
-  '',
-  'This is all about https://dxos.org and related technologies.',
-  '',
-  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
-  '',
-  '---',
-  text.links,
-  '---',
-  text.list,
-  '---',
-  text.tasks,
-  '---',
-  text.numbered,
-  '---',
-  text.code,
-  '---',
-  text.headings,
-  '---',
-  text.table,
-  '---',
-  text.image,
-  text.footer,
-);
-
-const links = [
-  { 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)' },
-];
-
-const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
-
-const hover =
-  'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
-
-const renderLinkTooltip = (el: Element, url: string) => {
-  const web = new URL(url);
-  createRoot(el).render(
-    <StrictMode>
-      <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        {web.origin}
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
-      </a>
-    </StrictMode>,
-  );
-};
-
-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 onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
-  createRoot(el).render(
-    <StrictMode>
-      <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>
-    </StrictMode>,
-  );
-};
-
-const renderLinkButton = (el: Element, url: string) => {
-  createRoot(el).render(
-    <StrictMode>
-      <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
-      </a>
-    </StrictMode>,
-  );
-};
-
-type StoryProps = {
-  id?: string;
-  text?: string;
-  comments?: Comment[];
-} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'extensions'>;
-
-const Story = ({ id = 'test', text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
-  const [item] = useState({ text: new TextObject(text) });
-  const view = useRef<EditorView>(null);
-  const model = useTextModel({ text: item.text });
-  useComments(view.current, id, comments);
-  if (!model) {
-    return null;
-  }
-
-  return (
-    <MarkdownEditor
-      ref={view}
-      model={model}
-      placeholder={placeholder}
-      slots={{
-        root: { className: mx(textBlockWidth, 'min-bs-dvh') },
-        editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
-      }}
-      {...props}
-    />
-  );
-};
-
-export default {
-  title: 'react-ui-editor/MarkdownEditor',
-  component: MarkdownEditor,
-  decorators: [withTheme],
-  render: Story,
-  parameters: { translations, layout: 'fullscreen' },
-};
-
-const defaults = [
-  autocomplete({
-    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-  }),
-  decorateMarkdown({ renderLinkButton }),
-  formatting(),
-  image(),
-  linkTooltip(renderLinkTooltip),
-  table(),
-];
-
-export const Default = {
-  render: () => <Story text={document} extensions={defaults} />,
-};
-
-export const Readonly = {
-  render: () => <Story text={document} extensions={defaults} readonly />,
-};
-
-export const NoExtensions = {
-  render: () => <Story text={document} />,
-};
-
-const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
-
-const largeWithImages = faker.helpers
-  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
-  .flatMap((x) => x)
-  .join('\n\n');
-
-export const Empty = {
-  render: () => <Story />,
-};
-
-export const Scrolling = {
-  render: () => <Story text={str('# Large Document', '', large)} />,
-};
-
-export const ScrollingWithImages = {
-  render: () => <Story text={str('# Large Document', '', largeWithImages)} extensions={[image()]} />,
-};
-
-export const Links = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
-};
-
-export const Image = {
-  render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
-};
-
-export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[decorateMarkdown()]} />,
-};
-
-export const Lists = {
-  render: () => (
-    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[decorateMarkdown()]} />
-  ),
-};
-
-export const Table = {
-  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
-};
-
-// export const Outliner = {
-//   render: () => (
-//     <Story
-//       text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
-//       extensions={[outliner()]}
-//     />
-//   ),
-// };
-
-export const Autocomplete = {
-  render: () => (
-    <Story
-      text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
-      extensions={[
-        decorateMarkdown({ renderLinkButton }),
-        autocomplete({
-          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-        }),
-      ]}
-    />
-  ),
-};
-
-export const Mention = {
-  render: () => (
-    <Story
-      text={str('# Mention', '', 'Type @...', text.footer)}
-      extensions={[
-        mention({
-          onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
-        }),
-      ]}
-    />
-  ),
-};
-
-const CommandDialog: FC<{ onClose: (action?: CommandAction) => void }> = ({ onClose }) => {
-  const [text, setText] = useState('');
-  const handleInsert = () => {
-    onClose(text.length ? { insert: text + '\n' } : undefined);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter': {
-        handleInsert();
-        break;
-      }
-      case 'Escape': {
-        onClose();
-        break;
-      }
-    }
-  };
-
-  return (
-    <DensityProvider density='fine'>
-      <div className={mx('flex items-center p-2 gap-2 border rounded-md', baseSurface)}>
-        <Input.Root>
-          <Input.TextInput
-            autoFocus={true}
-            placeholder='Enter command.'
-            value={text}
-            onChange={({ target: { value } }) => setText(value)}
-            onKeyDown={handleKeyDown}
-          />
-        </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onClose()}>
-          <X className={getSize(5)} />
-        </Button>
-      </div>
-    </DensityProvider>
-  );
-};
-
-const renderCommandDialog: CommandOptions['onRender'] = (el, onClose) => {
-  createRoot(el).render(
-    <StrictMode>
-      <ThemeProvider tx={defaultTx}>
-        <CommandDialog onClose={onClose} />
-      </ThemeProvider>
-    </StrictMode>,
-  );
-};
-
-export const Command = {
-  render: () => (
-    <Story
-      text={str('# Command', '')}
-      extensions={[command({ onRender: renderCommandDialog, onHint: () => 'Press / for commands.' })]}
-    />
-  ),
-};
-
-export const Comments = {
-  render: () => {
-    const [_comments, setComments] = useState<Comment[]>([]);
-
-    return (
-      <Story
-        text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={_comments}
-        extensions={[
-          comments({
-            onHover: onCommentsHover,
-            onCreate: ({ cursor }) => {
-              const id = PublicKey.random().toHex();
-              setComments((commentRanges) => [...commentRanges, { 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),
-                  }),
-                );
-              }
-            },
-          }),
-        ]}
-      />
-    );
-  },
-};
-
-export const Vim = {
-  render: () => (
-    <Story
-      text={str('# Vim Mode', '', 'The distant future. The year 2000.', '', text.paragraphs)}
-      extensions={[defaults, EditorModes.vim]}
-    />
-  ),
-};
-
-export const Annotations = {
-  render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
-};
-
-export const DND = {
-  render: () => <Story text={str('# DND', '')} extensions={[dnd()]} />,
-};
-
-const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
-
-export const Listener = {
-  render: () => (
-    <Story
-      text={str('# Listener', '', text.footer)}
-      extensions={[
-        listener({
-          onFocus: (focusing) => {
-            console.log({ focusing });
-          },
-          onChange: (text) => {
-            console.log({ text });
-          },
-        }),
-      ]}
-    />
-  ),
-};
-
-export const Typewriter = {
-  render: () => (
-    <Story
-      text={str('# Typewriter', '', text.paragraphs, text.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
-    />
-  ),
-};
-
-export const Blast = {
-  render: () => (
-    <Story
-      text={str('# Blast', '', text.paragraphs, text.code, text.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,
-          ),
-        ),
-      ]}
-    />
-  ),
-};

package/src/extensions/outliner.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-
-export type OutlinerOptions = {};
-
-// TODO(burdon): Experimental component: multiple hierarchical draggable editor sections.
-export const outliner = (options: OutlinerOptions = {}): Extension => {
-  return [];
-};

package/src/hooks/useEditorView.ts

@@ -1,32 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { type MutableRefObject, useRef, useState } from 'react';
-
-/**
- * Hook for accessing the editor view.
- * @deprecated
- *
- * ```tsx
- * const Test = () => {
- *   const [editorRef, viewInvalidated] = useEditorView();
- *   useEffect(() => {
- *     if (editorRef.current && !viewInvalidated) {
- *       editorView?.focus();
- *     }
- *   }, [editorView]);
- *   return <TextEditor ref={editorRef} />;
- * };
- * ```
- */
-export const useEditorView = (id: string): [MutableRefObject<EditorView | null>, boolean] => {
-  const editorRef = useRef<EditorView | null>(null);
-  const [prev, setPrev] = useState<[EditorView | null, string]>([null, '']);
-  if (prev[0] !== editorRef.current) {
-    setPrev([editorRef.current, id]);
-  }
-
-  return [editorRef, prev[1] !== id];
-};

package/src/hooks/useTextModel.ts

@@ -1,121 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import get from 'lodash.get';
-import { type Dispatch, type SetStateAction, useState, useMemo } from 'react';
-
-import { generateName } from '@dxos/display-name';
-import { type AutomergeTextCompat, getRawDoc } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { isAutomergeObject, type Space, type TextObject } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
-import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
-import { hexToHue } from '@dxos/util';
-
-import { SpaceAwarenessProvider } from './awareness-provider';
-import { type EditorModel } from './defs';
-import { automerge, awareness } from '../extensions';
-import { type DocAccessor } from '../extensions/automerge/defs';
-
-export type useTextExtensionsProps = {
-  id: string;
-  text: DocAccessor;
-  space?: Space;
-  identity?: Identity;
-};
-
-// TODO(burdon): Factor out automerge defs and extension (not hook).
-export const useTextExtensions = ({ id, text, space, identity }: useTextExtensionsProps): Extension[] => {
-  const extensions: Extension[] = [automerge(text)];
-
-  const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } =
-    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
-
-  if (space && identity) {
-    const awarenessProvider = new SpaceAwarenessProvider({
-      space,
-      channel: `awareness.${id}`,
-      peerId: identity.identityKey.toHex(),
-      info: {
-        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
-        color: cursorDarkValue,
-        lightColor: cursorLightValue,
-      },
-    });
-
-    extensions.push(awareness(awarenessProvider));
-  }
-
-  return extensions;
-};
-
-export type UseTextModelProps = {
-  text?: TextObject;
-  space?: Space;
-  identity?: Identity | null;
-};
-
-/**
- * @deprecated
- */
-// TODO(burdon): Remove once automerge lands.
-export const useTextModel = (props: UseTextModelProps): EditorModel | undefined =>
-  useMemo(() => createModel(props), Object.values(props));
-
-/**
- * For use primarily in stories & tests so the dependence on TextObject can be avoided.
- * @deprecated
- */
-// TODO(burdon): Remove.
-export const useInMemoryTextModel = ({
-  id,
-  defaultContent,
-}: {
-  id: string;
-  defaultContent?: string;
-}): EditorModel & { setContent: Dispatch<SetStateAction<string>> } => {
-  const [content, setContent] = useState(defaultContent ?? '');
-  return { id, content, text: () => content, setContent };
-};
-
-const createModel = ({ space, identity, text }: UseTextModelProps): EditorModel | undefined => {
-  if (!text) {
-    return undefined;
-  }
-
-  invariant(isAutomergeObject(text));
-  const obj = text as any as AutomergeTextCompat;
-  const doc = getRawDoc(obj, [obj.field]);
-
-  const peerId = identity?.identityKey.toHex();
-  const { cursorLightValue, cursorDarkValue } =
-    hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
-
-  const awarenessProvider =
-    space &&
-    new SpaceAwarenessProvider({
-      space,
-      channel: `automerge.awareness.${obj.id}`,
-      info: {
-        displayName: identity ? identity.profile?.displayName ?? generateName(identity.identityKey.toHex()) : undefined,
-        color: cursorLightValue,
-        lightColor: cursorDarkValue,
-      },
-      peerId: identity?.identityKey.toHex() ?? 'Anonymous',
-    });
-
-  const extensions = [automerge({ handle: doc.handle, path: doc.path })];
-  if (awarenessProvider) {
-    extensions.push(awareness(awarenessProvider));
-  }
-
-  return {
-    id: obj.id,
-    content: doc,
-    text: () => get(doc.handle.docSync(), doc.path),
-    extension: extensions,
-  };
-};