@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.8ad58eb

package/src/components/Markdown/Markdown.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 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 { withTheme } from '@dxos/storybook-utils';
-
-import { MarkdownEditor } from './Markdown';
-import { Replicator, useYjsModel } from '../../testing';
-
-export default {
-  component: MarkdownEditor,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    model: {
-      id: 'editor',
-      content: 'Hello, Storybook!',
-    },
-  },
-};
-
-const replicator = new Replicator(TextKind.PLAIN);
-
-export const WithYjs = {
-  render: () => {
-    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>
-        <MarkdownEditor model={model} />
-      </main>
-    );
-  },
-  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
-  decorators: [ClientDecorator({ count: 2 })],
-};

package/src/components/Markdown/Markdown.tsx

@@ -1,214 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, type Extension, StateField, type Text } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  keymap,
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  placeholder,
-  rectangularSelection,
-  EditorView,
-} from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
-import { vim } from '@replit/codemirror-vim';
-import React, {
-  type KeyboardEvent,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-  useMemo,
-  useCallback,
-} from 'react';
-import { yCollab } from 'y-codemirror.next';
-
-import { generateName } from '@dxos/display-name';
-import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue } from '@dxos/react-ui-theme';
-import { YText } from '@dxos/text-model';
-
-import { markdownTagsExtension } from './markdownTags';
-import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
-import { type EditorModel, type EditorSlots } from '../../model';
-
-export const EditorModes = ['default', 'vim'] as const;
-export type EditorMode = (typeof EditorModes)[number];
-
-export type MarkdownEditorProps = {
-  model?: EditorModel;
-  slots?: EditorSlots;
-  editorMode?: EditorMode;
-  extensions?: Extension[];
-  onChange?: (content: string | Text) => void;
-};
-
-export type MarkdownEditorRef = {
-  editor: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
-export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
-    const { id, content, provider, peer } = model ?? {};
-    const { themeMode } = useThemeContext();
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-
-    const [parent, setParent] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-
-    useImperativeHandle(forwardedRef, () => ({
-      editor: parent,
-      state,
-      view,
-    }));
-
-    const listenChangesExtension = useMemo(
-      () =>
-        StateField.define({
-          create: () => null,
-          update: (_value, transaction) => {
-            if (transaction.docChanged && onChange) {
-              onChange(transaction.newDoc);
-            }
-            return null;
-          },
-        }),
-      [onChange],
-    );
-
-    useEffect(() => {
-      if (provider && peer) {
-        provider.awareness.setLocalStateField('user', {
-          name: peer.name ?? generateName(peer.id),
-          color: getColorForValue({ value: peer.id, type: 'color' }),
-          colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-        });
-      }
-    }, [provider, peer, themeMode]);
-
-    useEffect(() => {
-      if (!parent) {
-        return;
-      }
-
-      const state = EditorState.create({
-        doc: content?.toString(),
-        extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
-          listenChangesExtension,
-
-          ...(editorMode === 'vim' ? [vim()] : []),
-
-          // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          drawSelection(),
-          dropCursor(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching(),
-          closeBrackets(),
-          autocompletion(),
-          rectangularSelection(),
-          crosshairCursor(),
-          highlightActiveLine(),
-          highlightSelectionMatches(),
-          placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
-            ...foldKeymap,
-            ...completionKeymap,
-            ...lintKeymap,
-            indentWithTab,
-          ]),
-          EditorView.lineWrapping,
-
-          // Themes.
-          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
-          EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
-          ...(themeMode === 'dark'
-            ? [syntaxHighlighting(oneDarkHighlightStyle)]
-            : [syntaxHighlighting(defaultHighlightStyle)]),
-          // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-          syntaxHighlighting(markdownDarkHighlighting),
-
-          // Replication and awareness (incl. remote selection).
-          ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
-
-          // Custom.
-          ...extensions,
-        ],
-      });
-
-      setState(state);
-
-      // NOTE: This repaints the editor.
-      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
-      // Ideally this should not be hit except when changing between text objects.
-      view?.destroy();
-      setView(new EditorView({ state, parent }));
-
-      return () => {
-        view?.destroy();
-        setView(undefined);
-        setState(undefined);
-      };
-    }, [parent, content, provider?.awareness, themeMode, editorMode]);
-
-    const handleKeyUp = useCallback(
-      (event: KeyboardEvent) => {
-        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
-        switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
-
-          case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
-            break;
-          }
-        }
-      },
-      [view, editorMode],
-    );
-
-    return (
-      <div
-        tabIndex={0}
-        ref={setParent}
-        key={id}
-        {...slots.root}
-        {...(editorMode !== 'vim' ? tabsterDOMAttribute : {})}
-        onKeyUp={handleKeyUp}
-      />
-    );
-  },
-);

package/src/components/Markdown/index.ts

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

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

@@ -1,70 +0,0 @@
-//
-// 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 { withTheme } from '@dxos/storybook-utils';
-
-import { RichTextEditor, type RichTextEditorProps } from './RichText';
-import { Replicator, useYjsModel } from '../../testing';
-
-export default {
-  component: RichTextEditor,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    model: {
-      id: 'editor',
-      content: 'Hello, Storybook!',
-    },
-  },
-};
-
-const replicator = new Replicator(TextKind.RICH);
-export const WithYjs = {
-  render: (args: Omit<RichTextEditorProps, '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>
-        <RichTextEditor
-          {...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

@@ -1,181 +0,0 @@
-//
-// 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 EditorModel, type EditorSlots } 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?: EditorModel;
-  placeholder?: string;
-  slots?: Pick<EditorSlots, '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 RichTextEditorProps = UseEditorOptions & {
-  slots?: EditorSlots;
-};
-
-/**
- * @deprecated
- */
-// TODO(burdon): Currently broken.
-export const RichTextEditor = forwardRef<Editor | null, RichTextEditorProps>((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

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

package/src/components/TextEditor/theme.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import get from 'lodash.get';
-import { type StyleSpec } from 'style-mod';
-
-import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
-
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
-
-/**
- * https://codemirror.net/examples/styling
- */
-// TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
-export const defaultStyles: {
-  [selector: string]: StyleSpec;
-} = {
-  '&.cm-focused': {
-    outline: 'none',
-  },
-  '.cm-placeholder': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-  '& .cm-scroller': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-    overflow: 'visible',
-  },
-  '.cm-tooltip': {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
-};