@dxos/react-ui-editor 0.3.9-next.7522f7a → 0.3.9

package/src/automerge/demo.ts

@@ -1,106 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Event } from '@dxos/async';
-import {
-  type Doc,
-  next as automerge,
-  type ChangeOptions,
-  type ChangeFn,
-  type Heads,
-  type SyncState,
-} from '@dxos/automerge/automerge';
-
-export class Peer {
-  changeEvent = new Event();
-
-  storage = new Map<string, Uint8Array>();
-  stats = {
-    messagesSent: 0,
-    messagesReceived: 0,
-    bytesSent: 0,
-    bytesReceived: 0,
-    snapshotBytes: 0,
-    incrementalBytes: 0,
-  };
-
-  doc!: Doc<{ text: string }>;
-
-  change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    this.doc = automerge.change(this.doc, options, callback);
-    this._handleChange();
-  }
-
-  changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    const { newDoc, newHeads } = automerge.changeAt(this.doc, scope, options, callback);
-    this.doc = newDoc;
-    this._handleChange();
-    return newHeads;
-  }
-
-  replicate(): { readable: ReadableStream<Uint8Array>; writable: WritableStream<Uint8Array> } {
-    let syncState: SyncState = automerge.initSyncState();
-
-    let unsub: (() => void) | undefined;
-    const readable = new ReadableStream({
-      start: (controller) => {
-        unsub = this.changeEvent.on(() => {
-          const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-          syncState = newState;
-
-          if (msg) {
-            this.stats.messagesSent++;
-            this.stats.bytesSent += msg.byteLength;
-            controller.enqueue(msg);
-          }
-        });
-      },
-      pull: (controller) => {
-        const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-        syncState = newState;
-
-        if (msg) {
-          this.stats.messagesSent++;
-          this.stats.bytesSent += msg.byteLength;
-          controller.enqueue(msg);
-        }
-      },
-      cancel: () => {
-        unsub?.();
-      },
-    });
-
-    const writable = new WritableStream({
-      write: (chunk) => {
-        this.stats.messagesReceived++;
-        this.stats.bytesReceived += chunk.byteLength;
-
-        const [newDoc, newState] = automerge.receiveSyncMessage(this.doc, syncState, chunk);
-        this.doc = newDoc;
-        syncState = newState;
-
-        this._handleChange();
-      },
-    });
-
-    return { readable, writable };
-  }
-
-  private _handleChange() {
-    // TODO(dmaretskyi): Save since + debounce.
-
-    if (this.stats.incrementalBytes > 1024 && this.stats.incrementalBytes > this.stats.snapshotBytes) {
-      const snapshot = automerge.save(this.doc);
-      this.stats.snapshotBytes = snapshot.byteLength;
-      this.stats.incrementalBytes = 0;
-      console.log('snapshot save', snapshot.byteLength);
-    } else {
-      const chunk = automerge.saveIncremental(this.doc);
-      this.stats.incrementalBytes += chunk.length;
-      console.log('incremental save', chunk.length);
-    }
-
-    this.changeEvent.emit();
-  }
-}

package/src/components/Editor/Editor.stories.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React, { useState } from 'react';
-
-import { type PublicKey } from '@dxos/react-client';
-import { TextObject, TextKind, useQuery, useSpace } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
-import { useId } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Editor, type EditorProps } from './Editor';
-import { EditorDocument, types as schema } from '../../testing';
-
-export default {
-  component: Editor,
-  decorators: [withTheme],
-};
-
-const Story = ({ spaceKey, ...params }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {
-  const [generate, setGenerate] = useState(false);
-  const generateId = useId('generate');
-
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  const [document] = useQuery(space, EditorDocument.filter());
-
-  useDataGenerator({
-    generator: generate ? textGenerator : undefined,
-    options: { text: document?.content.content },
-  });
-
-  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>
-      {document?.content.toString().length}
-      <Editor identity={identity} space={space} text={document?.content} {...params} />
-    </main>
-  );
-};
-
-const { spaceKey: markdownSpaceKey, clients: markdownClients } = await setupPeersInSpace({
-  count: 2,
-  schema,
-  onCreateSpace: async (space) => {
-    const document = new EditorDocument({ content: new TextObject('Hello, Storybook!') });
-    await space?.db.add(document);
-  },
-});
-
-export const Markdown = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={markdownSpaceKey} />,
-  decorators: [ClientDecorator({ clients: markdownClients })],
-};
-
-const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace({
-  count: 2,
-  schema,
-  onCreateSpace: async (space) => {
-    const document = new EditorDocument({ content: new TextObject('Hello, Storybook!', TextKind.RICH) });
-    await space?.db.add(document);
-  },
-});
-
-export const Rich = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={richSpaceKey} />,
-  args: {
-    slots: {
-      editor: {
-        className: 'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
-      },
-    },
-  },
-  decorators: [ClientDecorator({ clients: richClients })],
-};

package/src/components/Editor/Editor.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { forwardRef, memo, type Ref } from 'react';
-
-import { YXmlFragment } from '@dxos/text-model';
-
-import { type EditorSlots, useTextModel, type UseTextModelOptions } from '../../model';
-import { MarkdownEditor, type MarkdownEditorRef } from '../Markdown';
-import { RichTextEditor, type TipTapEditor } from '../RichText';
-
-export type EditorProps = UseTextModelOptions & {
-  slots?: EditorSlots;
-};
-
-/**
- * Memoized editor which depends on DXOS platform.
- * Determines which editor to render based on the kind of text.
- */
-// NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
-// TODO(wittjosiah): Factor out?
-export const Editor = memo(
-  forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
-    const model = useTextModel(params);
-    if (!model) {
-      return null;
-    }
-
-    if (model?.content instanceof YXmlFragment) {
-      return <RichTextEditor ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
-    } else {
-      return <MarkdownEditor ref={forwardedRef as Ref<MarkdownEditorRef>} model={model} slots={slots} />;
-    }
-  }),
-);

package/src/components/Editor/index.ts

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

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

@@ -1,70 +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],
-};
-
-const content = [
-  '',
-  '',
-  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
-  '',
-  'This is a link: https://www.dxos.org',
-  '',
-  '',
-].join('\n');
-
-export const Default = {
-  args: {
-    model: {
-      id: 'editor',
-      content,
-    },
-  },
-};
-
-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,239 +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 { GFM } from '@lezer/markdown';
-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 { markdownHighlightStyle, 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;
-  showWidgets?: boolean;
-  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,
-
-          // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
-          // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          // https://codemirror.net/docs/ref/#codemirror.basicSetup
-          autocompletion(),
-          bracketMatching(),
-          closeBrackets(),
-          crosshairCursor(),
-          dropCursor(),
-          drawSelection(),
-          highlightActiveLine(),
-          highlightActiveLineGutter(),
-          highlightSelectionMatches(),
-          highlightSpecialChars(),
-          history(),
-          indentOnInput(),
-          placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
-          rectangularSelection(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          EditorState.allowMultipleSelections.of(true),
-          EditorView.lineWrapping,
-
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...completionKeymap,
-            ...defaultKeymap,
-            ...foldKeymap,
-            ...historyKeymap,
-            ...lintKeymap,
-            ...searchKeymap,
-            indentWithTab,
-          ]),
-
-          // Main extension.
-          // https://github.com/codemirror/lang-markdown
-          markdown({
-            base: markdownLanguage,
-            codeLanguages: languages,
-            extensions: [
-              // TODO(burdon): This seems to upgrade the parser.
-              // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
-              // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-              // https://github.github.com/gfm
-              // GFM,
-
-              // Custom styling.
-              markdownTagsExtension,
-            ],
-          }),
-
-          // Theme.
-          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(markdownHighlightStyle),
-
-          // Settings.
-          ...(editorMode === 'vim' ? [vim()] : []),
-
-          // TODO(burdon): Move to extensions.
-          // Replication and awareness (incl. remote selection).
-          // https://codemirror.net/docs/ref/#collab
-          ...(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 })],
-};