@dxos/react-ui-editor 0.3.9-main.501fe30 → 0.3.9-main.52d137d

package/src/automerge/automerge.stories.tsx

@@ -2,20 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@preact/signals-react'; // Register react integration
-import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
+import { basicSetup } from '@codemirror/basic-setup';
 import { EditorView } from '@codemirror/view';
-import { basicSetup } from 'codemirror';
-import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { type Prop } from '@dxos/automerge/automerge';
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+import { type Prop, next as automerge } from '@dxos/automerge/automerge';
 
-import { type IDocHandle, automergePlugin } from './automerge-plugin';
+import { plugin as amgPlugin, reconcile } from './automerge-plugin';
+import { Peer } from './demo';
 
 type EditorProps = {
-  handle: IDocHandle;
+  handle: Peer;
   path: Prop[];
 };
 
@@ -24,13 +21,27 @@ const Editor = ({ handle, path }: EditorProps) => {
   const editorRoot = useRef<EditorView>();
 
   useEffect(() => {
+    const doc = handle.doc;
+    const source = doc.text; // this should use path
+    const plugin = amgPlugin(doc, path);
     const view = (editorRoot.current = new EditorView({
-      doc: get(handle.docSync()!, path),
-      extensions: [basicSetup, automergePlugin(handle, path)],
+      doc: source,
+      extensions: [basicSetup, plugin],
+      dispatch: (transaction) => {
+        view.update([transaction]);
+        reconcile(handle, view);
+      },
       parent: containerRef.current as any,
     }));
 
+    const handleChange = () => {
+      reconcile(handle, view);
+    };
+
+    handle.changeEvent.on(handleChange);
+
     return () => {
+      handle.changeEvent.off(handleChange);
       view.destroy();
     };
   }, []);
@@ -39,29 +50,31 @@ const Editor = ({ handle, path }: EditorProps) => {
 };
 
 const Story = () => {
-  const [object1, setObject1] = useState<DocHandle<any> | null>(null);
-  const [object2, setObject2] = useState<DocHandle<any> | null>(null);
+  const [object1, setObject1] = useState<Peer | null>(null);
+  const [object2, setObject2] = useState<Peer | null>(null);
+  const [stats1, setStats1] = useState<any>({});
+  const [stats2, setStats2] = useState<any>({});
 
   useEffect(() => {
-    queueMicrotask(async () => {
-      const repo1 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
-      const repo2 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
-
-      const object1 = repo1.create();
-      object1.change((doc: any) => {
-        doc.text = 'Hello world!';
-      });
-
-      const object2 = repo2.find(object1.url);
-      await object2.whenReady();
-
-      setObject1(object1);
-      setObject2(object2);
-    });
+    const object1 = new Peer();
+    object1.doc = automerge.from({ text: 'Hello world!' });
+
+    const object2 = new Peer();
+    object2.doc = automerge.init();
+
+    const r1 = object1.replicate();
+    const r2 = object2.replicate();
+
+    void r1.readable.pipeTo(r2.writable);
+    void r2.readable.pipeTo(r1.writable);
+
+    setObject1(object1);
+    setObject2(object2);
+
+    setInterval(() => {
+      setStats1({ ...object1.stats });
+      setStats2({ ...object2.stats });
+    }, 500);
   }, []);
 
   if (!object1 || !object2) {
@@ -72,9 +85,11 @@ const Story = () => {
     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', width: '100vw' }}>
       <div>
         <Editor handle={object1} path={['text']} />
+        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats1, null, 2)}</div>
       </div>
       <div>
         <Editor handle={object2} path={['text']} />
+        <div style={{ whiteSpace: 'pre' }}>{JSON.stringify(stats2, null, 2)}</div>
       </div>
     </div>
   );

package/src/automerge/demo.ts

@@ -0,0 +1,106 @@
+//
+// 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

@@ -9,7 +9,7 @@ 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 { setupPeersInSpace, textGenerator, useDataGenerator, ClientRepeater } from '@dxos/react-client/testing';
+import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -56,7 +56,8 @@ const { spaceKey: markdownSpaceKey, clients: markdownClients } = await setupPeer
 });
 
 export const Markdown = {
-  render: () => <ClientRepeater Component={Story} clients={markdownClients} args={{ spaceKey: markdownSpaceKey }} />,
+  render: (args: { id: number }) => <Story {...args} spaceKey={markdownSpaceKey} />,
+  decorators: [ClientDecorator({ clients: markdownClients })],
 };
 
 const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace({
@@ -69,7 +70,7 @@ const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace
 });
 
 export const Rich = {
-  render: () => <ClientRepeater Component={Story} clients={richClients} args={{ spaceKey: richSpaceKey }} />,
+  render: (args: { id: number }) => <Story {...args} spaceKey={richSpaceKey} />,
   args: {
     slots: {
       editor: {
@@ -77,4 +78,5 @@ export const Rich = {
       },
     },
   },
+  decorators: [ClientDecorator({ clients: richClients })],
 };

package/src/components/Editor/Editor.tsx

@@ -16,6 +16,7 @@ export type EditorProps = UseTextModelOptions & {
 
 /**
  * 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.
@@ -23,10 +24,6 @@ export type EditorProps = UseTextModelOptions & {
 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 {

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

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 
 import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
-import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
 import { useId } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -20,51 +20,40 @@ export default {
   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,
+      content: 'Hello, Storybook!',
     },
   },
 };
 
 const replicator = new Replicator(TextKind.PLAIN);
 
-const Story = () => {
-  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>
-  );
-};
-
 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?
-  render: () => <ClientRepeater count={2} Component={Story} />,
+  decorators: [ClientDecorator({ count: 2 })],
 };

package/src/components/Markdown/Markdown.tsx

@@ -30,7 +30,6 @@ import {
   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,
@@ -49,17 +48,16 @@ import { getColorForValue } from '@dxos/react-ui-theme';
 import { YText } from '@dxos/text-model';
 
 import { markdownTagsExtension } from './markdownTags';
-import { markdownHighlightStyle, markdownTheme } from './markdownTheme';
+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;
+  model?: EditorModel;
   slots?: EditorSlots;
   editorMode?: EditorMode;
-  showWidgets?: boolean;
   extensions?: Extension[];
   onChange?: (content: string | Text) => void;
 };
@@ -118,73 +116,50 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       const state = EditorState.create({
         doc: content?.toString(),
         extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
+          // 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.
+          ...(editorMode === 'vim' ? [vim()] : []),
+
           // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          // https://codemirror.net/docs/ref/#codemirror.basicSetup
-          autocompletion(),
+          highlightActiveLineGutter(),
+          highlightSpecialChars(),
+          history(),
+          drawSelection(),
+          dropCursor(),
+          EditorState.allowMultipleSelections.of(true),
+          indentOnInput(),
+          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
           bracketMatching(),
           closeBrackets(),
+          autocompletion(),
+          rectangularSelection(),
           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,
+            ...searchKeymap,
             ...historyKeymap,
+            ...foldKeymap,
+            ...completionKeymap,
             ...lintKeymap,
-            ...searchKeymap,
             indentWithTab,
           ]),
+          EditorView.lineWrapping,
 
-          // 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.
+          // 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(markdownHighlightStyle),
-
-          // Settings.
-          ...(editorMode === 'vim' ? [vim()] : []),
+          syntaxHighlighting(markdownDarkHighlighting),
 
-          // 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.

package/src/components/Markdown/markdownTheme.ts

@@ -32,10 +32,6 @@ export const cursor = '#ffffff';
 
 const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
 
-// TODO(burdon): Subtle difference in layout for documents and stacks.
-// TODO(burdon): On first character, height of editor changes by a few pixels.
-// TODO(burdon): Is the '&' prefix required? If so, document.
-
 export const markdownTheme = {
   // TODO(thure): consider whether these commented-out rules from one-dark-theme should be integrated.
   // '&': {
@@ -168,13 +164,6 @@ export const markdownTheme = {
   '& .cm-yLineSelection': {
     margin: '0',
   },
-  '.cm-link': {
-    color: 'rgb(20 89 208)',
-    textDecorationLine: 'underline',
-    textDecorationThickness: '1px',
-    textUnderlineOffset: '2px',
-    borderRadius: '.125rem',
-  },
   ...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.
@@ -185,7 +174,7 @@ export const markdownTheme = {
   }, {}),
 };
 
-export const markdownHighlightStyle = HighlightStyle.define(
+export const markdownDarkHighlighting = HighlightStyle.define(
   [
     {
       tag: [

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

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 
 import { PublicKey } from '@dxos/react-client';
 import { TextKind } from '@dxos/react-client/echo';
-import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
+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';
@@ -31,42 +31,40 @@ export const Default = {
 };
 
 const replicator = new Replicator(TextKind.RICH);
+export const WithYjs = {
+  render: (args: Omit<RichTextEditorProps, 'model'>) => {
+    const [generate, setGenerate] = useState(false);
+    const generateId = useId('generate');
 
-const Story = (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 },
-  });
+    const [id] = useState(PublicKey.random().toHex());
+    const model = useYjsModel({ id, replicator });
 
-  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>
-  );
-};
+    useDataGenerator({
+      generator: generate ? textGenerator : undefined,
+      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
+    });
 
-export const WithYjs = {
+    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?
-  render: () => <ClientRepeater count={2} Component={Story} />,
+  decorators: [ClientDecorator({ count: 2 })],
 };