@dxos/react-ui-editor 0.3.3-main.1b7ca63

package/src/components/Markdown/markdownTags.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { styleTags, Tag } from '@lezer/highlight';
+import { type MarkdownConfig } from '@lezer/markdown';
+
+export const markdownTags = {
+  headingMark: Tag.define(),
+  quoteMark: Tag.define(),
+  listMark: Tag.define(),
+  linkMark: Tag.define(),
+  emphasisMark: Tag.define(),
+  codeMark: Tag.define(),
+  codeText: Tag.define(),
+  inlineCode: Tag.define(),
+  url: Tag.define(),
+  linkReference: Tag.define(),
+  linkLabel: Tag.define(),
+};
+
+export const markdownTagsExtension: MarkdownConfig = {
+  props: [
+    styleTags({
+      HeaderMark: markdownTags.headingMark,
+      QuoteMark: markdownTags.quoteMark,
+      ListMark: markdownTags.listMark,
+      LinkMark: markdownTags.linkMark,
+      EmphasisMark: markdownTags.emphasisMark,
+      CodeMark: markdownTags.codeMark,
+      CodeText: markdownTags.codeText,
+      InlineCode: markdownTags.inlineCode,
+      URL: markdownTags.url,
+      LinkReference: markdownTags.linkReference,
+      LinkLabel: markdownTags.linkLabel,
+    }),
+  ],
+};

package/src/components/Markdown/markdownTheme.ts

@@ -0,0 +1,236 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdownLanguage } from '@codemirror/lang-markdown';
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import get from 'lodash.get';
+
+import { markdownTags } from './markdownTags';
+import { bold, heading, italic, mark, strikethrough, tokens } from '../../styles';
+
+// TODO(burdon): Use theme colors.
+// TODO(burdon): Light mode.
+
+export const chalky = '#e5c07b';
+export const coral = '#e06c75';
+export const cyan = '#56b6c2';
+export const invalid = '#ffffff';
+export const ivory = '#abb2bf';
+export const stone = '#7d8799';
+export const malibu = '#61afef';
+export const sage = '#98c379';
+export const whiskey = '#d19a66';
+export const violet = '#c678dd';
+const _darkBackground = '#21252b';
+export const highlightBackground = '#2c313a';
+const _background = '#282c34';
+export const tooltipBackground = '#353a42';
+const _selection = '#3E4451';
+export const cursor = '#ffffff';
+
+const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
+
+export const markdownTheme = {
+  // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
+  // '&': {
+  //   color: ivory,
+  //   backgroundColor: background
+  // },
+  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  // '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+  //   backgroundColor: selection
+  // },
+  // '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+  // '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+  // '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+  // '.cm-searchMatch': {
+  //   backgroundColor: '#72a1ff59',
+  //   outline: '1px solid #457dff'
+  // },
+  // '.cm-searchMatch.cm-searchMatch-selected': {
+  //   backgroundColor: '#6199ff2f'
+  // },
+  // '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+  // '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+  // '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+  //   backgroundColor: '#bad0f847'
+  // },
+  // '.cm-gutters': {
+  //   backgroundColor: background,
+  //   color: stone,
+  //   border: 'none'
+  // },
+  // '.cm-activeLineGutter': {
+  //   backgroundColor: highlightBackground
+  // },
+  // '.cm-foldPlaceholder': {
+  //   backgroundColor: 'transparent',
+  //   border: 'none',
+  //   color: '#ddd'
+  // },
+
+  '.dark & .cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground,
+  },
+  '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground,
+  },
+  '.dark & .cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory,
+    },
+  },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-line': {
+    paddingInline: 0,
+  },
+  '& .cm-line *': {
+    lineHeight: 1.6,
+  },
+  '& .cm-selectionBackground': {
+    background: get(tokens, 'extend.colors.primary.150', '#00ffff') + 'aa',
+  },
+  '.dark & .cm-selectionBackground': {
+    background: get(tokens, 'extend.colors.primary.500', '#00ffff') + 'aa',
+  },
+  '& .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.100', '#00ffff') + '44',
+  },
+  '.dark & .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.400', '#00ffff') + '44',
+  },
+  '& .cm-content': {
+    caretColor: 'black',
+  },
+  '.dark & .cm-content': {
+    caretColor: cursor,
+  },
+  '& .cm-cursor': {
+    borderLeftColor: 'black',
+  },
+  '.dark & .cm-cursor': {
+    borderLeftColor: cursor,
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
+  '& .cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '.dark & .cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '& .cm-ySelectionInfo': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    padding: '2px 4px',
+    marginBlockStart: '-4px',
+  },
+  '& .cm-ySelection': {
+    display: 'inline-block',
+  },
+  '& .cm-ySelectionCaret': {
+    display: 'inline-block',
+    verticalAlign: 'top',
+  },
+  ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+    const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+    // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+    return acc;
+  }, {}),
+};
+
+export const markdownDarkHighlighting = HighlightStyle.define(
+  [
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid,
+      ],
+      color: 'inherit !important',
+    },
+    {
+      tag: [tags.link, tags.url],
+      color: 'inherit !important',
+      textDecoration: 'none !important',
+    },
+    {
+      tag: [tags.function(tags.variableName), tags.labelName],
+      color: malibu,
+      fontFamily: monospace,
+    },
+    {
+      tag: [
+        markdownTags.codeMark,
+        markdownTags.emphasisMark,
+        markdownTags.headingMark,
+        markdownTags.linkLabel,
+        markdownTags.linkReference,
+        markdownTags.listMark,
+        markdownTags.quoteMark,
+        markdownTags.url,
+        tags.meta,
+        tags.processingInstruction,
+      ],
+      class: mark,
+    },
+    { tag: [markdownTags.codeText, markdownTags.inlineCode], class: 'font-mono' },
+    { tag: tags.emphasis, class: italic },
+    { tag: tags.heading1, class: heading[1] },
+    { tag: tags.heading2, class: heading[2] },
+    { tag: tags.heading3, class: heading[3] },
+    { tag: tags.heading4, class: heading[4] },
+    { tag: tags.heading5, class: heading[5] },
+    { tag: tags.heading6, class: heading[6] },
+    { tag: tags.strikethrough, class: strikethrough },
+    { tag: tags.strong, class: bold },
+  ],
+  { scope: markdownLanguage, all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') } },
+);

package/src/components/RichText/RichText.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useState } from 'react';
+
+import { PublicKey } from '@dxos/react-client';
+import { TextKind } from '@dxos/react-client/echo';
+import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { useId } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { RichTextComposer, type RichTextComposerProps } from './RichText';
+import { Replicator, useYjsModel } from '../../testing';
+
+export default {
+  component: RichTextComposer,
+};
+
+export const Default = {
+  args: {
+    model: {
+      id: 'editor',
+      content: 'Hello, Storybook!',
+    },
+  },
+};
+
+const replicator = new Replicator(TextKind.RICH);
+export const WithYjs = {
+  render: (args: Omit<RichTextComposerProps, 'model'>) => {
+    const [generate, setGenerate] = useState(false);
+    const generateId = useId('generate');
+
+    const [id] = useState(PublicKey.random().toHex());
+    const model = useYjsModel({ id, replicator });
+
+    useDataGenerator({
+      generator: generate ? textGenerator : undefined,
+      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+    });
+
+    return (
+      <main className='flex-1 min-w-0 p-4'>
+        <div id={generateId} className='flex'>
+          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
+          Generate Data
+        </div>
+        <RichTextComposer
+          {...args}
+          model={model}
+          slots={{
+            editor: {
+              className: mx(
+                'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
+                args.slots?.editor?.className,
+              ),
+            },
+          }}
+        />
+      </main>
+    );
+  },
+  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
+  decorators: [ClientDecorator({ count: 2 })],
+};

package/src/components/RichText/RichText.tsx

@@ -0,0 +1,181 @@
+//
+// Copyright 2022 DXOS.org
+//
+import { mergeAttributes } from '@tiptap/core';
+import Collaboration from '@tiptap/extension-collaboration';
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
+import Heading from '@tiptap/extension-heading';
+import ListItem from '@tiptap/extension-list-item';
+import Placeholder from '@tiptap/extension-placeholder';
+import { type Editor, EditorContent, useEditor as useNaturalEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type ComposerModel, type ComposerSlots } from '../../model';
+import {
+  blockquote,
+  bold,
+  codeBlock,
+  heading,
+  type HeadingLevel,
+  horizontalRule,
+  italic,
+  listItem,
+  orderedList,
+  paragraph,
+  strikethrough,
+  unorderedList,
+  codeWithoutMarks,
+} from '../../styles';
+import { cursorColor } from '../../yjs';
+
+export type TipTapEditor = Editor;
+
+type UseEditorOptions = {
+  model?: ComposerModel;
+  placeholder?: string;
+  slots?: Pick<ComposerSlots, 'editor'>;
+};
+
+const useEditor = ({ model, placeholder = 'Enter text…', slots = {} }: UseEditorOptions) => {
+  const extensions = useMemo(
+    () => [
+      StarterKit.configure({
+        // Extensions
+        history: false,
+        // Nodes
+        blockquote: {
+          HTMLAttributes: {
+            class: blockquote,
+          },
+        },
+        bulletList: {
+          HTMLAttributes: {
+            class: unorderedList,
+          },
+        },
+        codeBlock: {
+          HTMLAttributes: {
+            class: codeBlock,
+          },
+        },
+        heading: false, // (thure): `StarterKit` doesn’t let you configure how headings are rendered, see `Heading` below.
+        horizontalRule: {
+          HTMLAttributes: {
+            class: horizontalRule,
+          },
+        },
+        listItem: false, // (thure): `StarterKit` doesn’t let you configure how list items are rendered, see `ListItem` below.
+        orderedList: {
+          HTMLAttributes: {
+            class: orderedList,
+          },
+        },
+        paragraph: {
+          HTMLAttributes: {
+            class: paragraph,
+          },
+        },
+        // Marks
+        bold: {
+          HTMLAttributes: {
+            class: bold,
+          },
+        },
+        code: {
+          HTMLAttributes: {
+            class: codeWithoutMarks,
+          },
+        },
+        italic: {
+          HTMLAttributes: {
+            class: italic,
+          },
+        },
+        strike: {
+          HTMLAttributes: {
+            class: strikethrough,
+          },
+        },
+      }),
+      Heading.extend({
+        renderHTML({ node, HTMLAttributes }) {
+          const hasLevel = this.options.levels.includes(node.attrs.level);
+          const level: HeadingLevel = hasLevel ? node.attrs.level : this.options.levels[0];
+
+          return [
+            `h${level}`,
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+              class: heading[level],
+            }),
+            0,
+          ];
+        },
+      }),
+      ListItem.extend({
+        renderHTML: ({ HTMLAttributes }) => [
+          'li',
+          mergeAttributes(HTMLAttributes, {
+            marker: '• ',
+            class: listItem,
+          }),
+          ['div', { role: 'none' }, 0],
+        ],
+      }),
+      // https://github.com/ueberdosis/tiptap/tree/main/packages/extension-collaboration
+      ...(model && typeof model.content !== 'string' ? [Collaboration.configure({ fragment: model.content })] : []),
+      ...(model?.provider
+        ? [
+            CollaborationCursor.configure({
+              provider: model.provider,
+              user: model.peer && {
+                name: model.peer.name ?? generateName(model.peer.id),
+                color: cursorColor.color,
+              },
+            }),
+          ]
+        : []),
+      Placeholder.configure({
+        placeholder,
+        emptyEditorClass: 'before:content-[attr(data-placeholder)] before:absolute opacity-50 cursor-text',
+      }),
+    ],
+    [model?.id],
+  );
+
+  return useNaturalEditor(
+    {
+      extensions,
+      editorProps: {
+        attributes: {
+          class: mx('focus:outline-none focus-visible:outline-none', slots.editor?.className),
+          spellcheck: slots.editor?.spellCheck === false ? 'false' : 'true',
+          tabindex: slots.editor?.tabIndex ? String(slots.editor?.tabIndex) : '0',
+        },
+      },
+    },
+    [extensions],
+  );
+};
+
+export type RichTextComposerProps = UseEditorOptions & {
+  slots?: ComposerSlots;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Currently broken.
+export const RichTextComposer = forwardRef<Editor | null, RichTextComposerProps>((props, ref) => {
+  const editor = useEditor(props);
+  useImperativeHandle<Editor | null, Editor | null>(ref, () => editor, [editor]);
+
+  // Reference:
+  // https://tiptap.dev/installation/react
+  // https://github.com/ueberdosis/tiptap
+  // https://tiptap.dev/guide/output/#option-3-yjs
+  return <EditorContent {...props.slots?.root} editor={editor} />;
+});

package/src/components/RichText/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Composer';
+export * from './Markdown';
+export * from './RichText';

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './components';
+export * from './model';
+
+export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
+export { Doc, YText, YXmlFragment } from '@dxos/text-model';

package/src/model.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type ComponentProps, useMemo } from 'react';
+import type * as awarenessProtocol from 'y-protocols/awareness';
+
+import { type Space, type Text } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import type { YText, YXmlFragment } from '@dxos/text-model';
+
+import { SpaceAwarenessProvider } from './yjs';
+
+export type ComposerSlots = {
+  root?: Omit<ComponentProps<'div'>, 'ref'>;
+  editor?: {
+    className?: string;
+    placeholder?: string;
+    spellCheck?: boolean;
+    tabIndex?: number;
+    markdownTheme?: Parameters<typeof EditorView.theme>[0];
+  };
+};
+
+type Awareness = awarenessProtocol.Awareness;
+type Provider = { awareness: Awareness };
+
+// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
+export type ComposerModel = {
+  id: string;
+  content: string | YText | YXmlFragment;
+  provider?: Provider;
+  peer?: {
+    id: string;
+    name?: string;
+  };
+};
+
+export type UseTextModelOptions = {
+  identity?: Identity | null;
+  space?: Space;
+  text?: Text;
+};
+
+// TODO(wittjosiah): Factor out to common package? @dxos/react-client?
+// TODO(burdon): Decouple space (make Composer less dependent on entire stack)?
+export const useTextModel = ({ identity, space, text }: UseTextModelOptions): ComposerModel | undefined => {
+  const provider = useMemo(() => {
+    if (!space || !text?.doc) {
+      return undefined;
+    }
+
+    return new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
+  }, [identity, space, text?.doc]);
+
+  if (!text?.doc || !text?.content) {
+    return undefined;
+  }
+
+  return {
+    id: text.doc.guid,
+    content: text.content,
+    provider,
+    peer: identity
+      ? {
+          id: identity.identityKey.toHex(),
+          name: identity.profile?.displayName,
+        }
+      : undefined,
+  };
+};

package/src/styles/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './markdown';
+export * from './tokens';

package/src/styles/markdown.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export const heading: Record<HeadingLevel, string> = {
+  1: 'mbs-4 mbe-2 text-4xl font-semibold text-inherit no-underline',
+  2: 'mbs-4 mbe-2 text-3xl font-bold text-inherit no-underline',
+  3: 'mbs-4 mbe-2 text-2xl font-bold text-inherit no-underline',
+  4: 'mbs-4 mbe-2 text-xl font-extrabold text-inherit no-underline',
+  5: 'mbs-4 mbe-2 text-lg font-extrabold text-inherit no-underline',
+  6: 'mbs-4 mbe-2 font-black text-inherit no-underline',
+};
+
+export const blockquote = 'mlb-2 border-is-4 border-neutral-500/50 pis-5';
+
+// TODO(thure): Tailwind was not seeing `[&>li:before]:content-["•"]` as a utility class, but it would work if instead of `"•"` it was `"X"`… why?
+export const unorderedList =
+  'mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2';
+export const orderedList =
+  'mlb-2 grid grid-cols-[min-content_1fr]  [&>li:before]:content-[counters(section,_".")_"._"] [counter-reset:section] [&>li:before]:mlb-1';
+
+export const listItem = 'contents before:[counter-increment:section]';
+
+export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
+
+export const horizontalRule = 'mlb-4 border-neutral-500/50';
+
+export const paragraph = 'mlb-1';
+
+export const bold = 'font-bold';
+
+export const code = 'font-mono bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5';
+
+export const placeholder = 'font-mono';
+
+export const codeWithoutMarks = mx(code, 'pli-1.5 mli-0.5');
+
+export const italic = 'italic';
+
+export const strikethrough = 'line-through';
+
+export const mark = '!font-normal !no-underline !text-inherit opacity-40';

package/src/styles/tokens.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
+
+// TODO(thure): Why export the whole theme? Can this be done differently?
+export const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;

package/src/testing/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './proto';
+export * from './replicator';