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

package/src/testing/proto/gen/schema.ts

@@ -0,0 +1,47 @@
+/**
+ * @generated @dxos/echo-typegen src/testing/proto/schema.proto
+ **/
+
+import * as dxos_echo_schema from "@dxos/echo-schema";
+
+export const types = new dxos_echo_schema.TypeCollection();
+
+export type ComposerDocumentProps = {
+  content: dxos_echo_schema.Text;
+};
+
+export class ComposerDocument extends dxos_echo_schema.TypedObject<ComposerDocumentProps> {
+  declare static readonly schema: dxos_echo_schema.Schema;
+
+  static filter(
+    opts?: Partial<ComposerDocumentProps>
+  ): dxos_echo_schema.TypeFilter<ComposerDocument> {
+    return {
+      ...opts,
+      "@type": "dxos.testing.composer.ComposerDocument",
+    } as any;
+  }
+
+  constructor(
+    initValues?: Partial<ComposerDocumentProps>,
+    opts?: dxos_echo_schema.TypedObjectOptions
+  ) {
+    super({ ...initValues }, { schema: ComposerDocument.schema, ...opts });
+  }
+  declare content: dxos_echo_schema.Text;
+}
+
+types.registerPrototype(ComposerDocument, {
+  typename: "dxos.testing.composer.ComposerDocument",
+  props: [
+    {
+      id: "content",
+      type: 5,
+      repeated: false,
+      refName: "dxos.schema.Text",
+      refModelType: "dxos.org/model/text",
+    },
+  ],
+});
+
+types.link();

package/src/testing/proto/index.ts

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

package/src/testing/proto/schema.proto

@@ -0,0 +1,15 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+syntax = "proto3";
+
+import "dxos/schema.proto";
+
+package dxos.testing.composer;
+
+message ComposerDocument {
+  option (object) = true;
+
+  dxos.schema.Text content = 1;
+}

package/src/testing/replicator.ts

@@ -0,0 +1,191 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// TODO(wittjosiah): Remove. Use DXOS protocols to reduce duplicate functionality weighing down apps.
+import * as decoding from 'lib0/decoding';
+import * as encoding from 'lib0/encoding';
+import { Observable } from 'lib0/observable';
+import { useMemo } from 'react';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as syncProtocol from 'y-protocols/sync';
+import { Doc } from 'yjs';
+
+import { Event } from '@dxos/async';
+import { log } from '@dxos/log';
+import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
+
+import { type ComposerModel } from '../model';
+import { cursorColor } from '../yjs';
+
+type Awareness = awarenessProtocol.Awareness;
+
+const messageSync = 0;
+const messageAwareness = 1;
+const messageQueryAwareness = 3;
+
+/**
+ * Yjs awareness provider in-memory.
+ */
+export class AwarenessProvider extends Observable<any> {
+  private readonly _remoteUpdate: Event<Uint8Array>;
+  private readonly _awareness: Awareness;
+  private readonly _doc: Doc;
+
+  constructor({ update, doc, awareness }: { update: Event<Uint8Array>; doc: Doc; awareness?: Awareness }) {
+    super();
+    this._remoteUpdate = update;
+    this._doc = doc;
+    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
+
+    this._doc.on('update', this._handleDocUpdate.bind(this));
+    this._awareness.on('update', this._handleAwarenessUpdate.bind(this));
+    this._remoteUpdate.on(this._handleRemoteUpdate.bind(this));
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('beforeunload', this._handleBeforeUnload.bind(this));
+    } else if (typeof process !== 'undefined') {
+      process.on('exit', this._handleBeforeUnload.bind(this));
+    }
+
+    // Post queryAwareness.
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    void this._remoteUpdate.emit(encoding.toUint8Array(encoderAwarenessQuery));
+
+    // Post local awareness state.
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoderAwarenessState,
+      awarenessProtocol.encodeAwarenessUpdate(this.awareness, [this._doc.clientID]),
+    );
+    void this._remoteUpdate.emit(encoding.toUint8Array(encoderAwarenessState));
+  }
+
+  get awareness(): Awareness {
+    return this._awareness;
+  }
+
+  private _handleDocUpdate(update: Uint8Array, origin: any) {
+    log('doc update', { update, origin });
+    const encoder = encoding.createEncoder();
+    encoding.writeVarUint(encoder, messageSync);
+    syncProtocol.writeUpdate(encoder, update);
+    this._remoteUpdate.emit(encoding.toUint8Array(encoder));
+  }
+
+  private _handleAwarenessUpdate({ added, updated, removed }: any, origin: any) {
+    log('awareness update', { added, updated, removed, origin });
+    const changedClients = added.concat(updated).concat(removed);
+    const encoderAwareness = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwareness, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoderAwareness,
+      awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients),
+    );
+    this._remoteUpdate.emit(encoding.toUint8Array(encoderAwareness));
+  }
+
+  private _handleRemoteUpdate(payload: Uint8Array) {
+    log('remote update', { payload });
+    const data = new Uint8Array(Array.from(Object.values(payload)));
+    const encoder = this._readMessage(data);
+    if (encoder) {
+      this._remoteUpdate.emit(encoding.toUint8Array(encoder));
+    }
+  }
+
+  private _readMessage(message: Uint8Array) {
+    const decoder = decoding.createDecoder(message);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder);
+
+    let sendReply = false;
+    switch (messageType) {
+      case messageSync: {
+        encoding.writeVarUint(encoder, messageSync);
+        syncProtocol.readSyncMessage(decoder, encoder, this._doc, this);
+        break;
+      }
+
+      case messageAwareness: {
+        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
+        break;
+      }
+
+      case messageQueryAwareness: {
+        encoding.writeVarUint(encoder, messageAwareness);
+        encoding.writeVarUint8Array(
+          encoder,
+          awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())),
+        );
+        sendReply = true;
+        break;
+      }
+
+      default: {
+        console.error('Invalid message:', messageType);
+        return encoder;
+      }
+    }
+
+    if (!sendReply) {
+      // Nothing has been written, no answer created.
+      return null;
+    }
+
+    return encoder;
+  }
+
+  private _handleBeforeUnload() {
+    awarenessProtocol.removeAwarenessStates(this._awareness, [this._doc.clientID], 'window unload');
+  }
+}
+
+/**
+ * This mocks the replication across the swarm.
+ */
+export class Replicator {
+  private readonly _update = new Event<Uint8Array>();
+  private _peers: ComposerModel[] = [];
+
+  constructor(private readonly _kind: TextKind) {}
+
+  setPeers(peers: ComposerModel[]) {
+    this._peers = peers;
+  }
+
+  createPeer = (id: string, doc: Doc = new Doc()): ComposerModel => {
+    const provider = new AwarenessProvider({ update: this._update, doc });
+    provider.awareness.setLocalStateField('user', {
+      name: 'Anonymous ' + Math.floor(Math.random() * 100),
+      color: cursorColor.color,
+      colorLight: cursorColor.light,
+    });
+
+    // TODO(burdon): Create concrete class that implements SyncModel?
+    const model: ComposerModel = {
+      id: doc.guid,
+      content: this._kind === TextKind.PLAIN ? doc.getText('content') : doc.getXmlFragment('content'),
+      provider,
+      peer: { id },
+    };
+
+    this._peers.push(model);
+
+    return model;
+  };
+}
+
+export type UseYjsModelOptions = {
+  replicator: Replicator;
+  id: string;
+  doc?: Doc;
+};
+
+export const useYjsModel = ({ replicator, id, doc }: UseYjsModelOptions): ComposerModel => {
+  const peer = useMemo(() => replicator.createPeer(id, doc), [doc]);
+
+  return peer;
+};

package/src/yjs/cursors.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// Copied from https://github.com/yjs/y-codemirror.next#example.
+
+import * as random from 'lib0/random';
+
+const cursorColors = [
+  { color: '#30bced', light: '#30bced33' },
+  { color: '#6eeb83', light: '#6eeb8333' },
+  { color: '#ffbc42', light: '#ffbc4233' },
+  { color: '#ecd444', light: '#ecd44433' },
+  { color: '#ee6352', light: '#ee635233' },
+  { color: '#9ac2c9', light: '#9ac2c933' },
+  { color: '#8acb88', light: '#8acb8833' },
+  { color: '#1be7ff', light: '#1be7ff33' },
+];
+
+// Select a random color for this user.
+export const cursorColor = cursorColors[random.uint32() % cursorColors.length];

package/src/yjs/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './cursors';
+export * from './space-provider';

package/src/yjs/space-provider.ts

@@ -0,0 +1,126 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as decoding from 'lib0/decoding';
+import * as encoding from 'lib0/encoding';
+import { Observable } from 'lib0/observable';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import { type Doc } from 'yjs';
+
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+import { type GossipMessage } from '@dxos/react-client/mesh';
+
+type Awareness = awarenessProtocol.Awareness;
+
+// Based on https://github.com/yjs/y-webrtc/blob/88baab2/src/y-webrtc.js.
+
+const messageAwareness = 1;
+const messageQueryAwareness = 3;
+
+/**
+ * Yjs awareness provider on top of a DXOS space.
+ */
+export class SpaceAwarenessProvider extends Observable<any> {
+  private readonly _space: Space;
+  private readonly _awareness: Awareness;
+  private readonly _clientId: number;
+  private readonly _channel: string;
+
+  constructor({ space, doc, channel, awareness }: { space: Space; doc: Doc; channel: string; awareness?: Awareness }) {
+    super();
+    this._space = space;
+    this._awareness = awareness ?? new awarenessProtocol.Awareness(doc);
+    this._channel = channel;
+    this._clientId = doc.clientID;
+
+    this._awareness.on('update', this._handleAwarenessUpdate.bind(this));
+    this._space.listen(this._channel, this._handleSpaceMessage.bind(this));
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('beforeunload', this._handleBeforeUnload.bind(this));
+    } else if (typeof process !== 'undefined') {
+      process.on('exit', this._handleBeforeUnload.bind(this));
+    }
+
+    // Post queryAwareness.
+    const encoderAwarenessQuery = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessQuery));
+
+    // Post local awareness state.
+    const encoderAwarenessState = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwarenessState, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoderAwarenessState,
+      awarenessProtocol.encodeAwarenessUpdate(this.awareness, [this._clientId]),
+    );
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwarenessState));
+  }
+
+  get awareness(): Awareness {
+    return this._awareness;
+  }
+
+  private _handleAwarenessUpdate({ added, updated, removed }: any, origin: any) {
+    log('awareness update', { added, updated, removed, origin });
+    const changedClients = added.concat(updated).concat(removed);
+    const encoderAwareness = encoding.createEncoder();
+    encoding.writeVarUint(encoderAwareness, messageAwareness);
+    encoding.writeVarUint8Array(
+      encoderAwareness,
+      awarenessProtocol.encodeAwarenessUpdate(this._awareness, changedClients),
+    );
+    void this._space.postMessage(this._channel, encoding.toUint8Array(encoderAwareness));
+  }
+
+  private _handleSpaceMessage({ payload }: GossipMessage) {
+    log('space message', payload);
+    const data = new Uint8Array(Array.from(Object.values(payload)));
+    const encoder = this._readMessage(data);
+    if (encoder) {
+      void this._space.postMessage(this._channel, encoding.toUint8Array(encoder));
+    }
+  }
+
+  private _readMessage(message: Uint8Array) {
+    const decoder = decoding.createDecoder(message);
+    const encoder = encoding.createEncoder();
+    const messageType = decoding.readVarUint(decoder);
+
+    let sendReply = false;
+    switch (messageType) {
+      case messageAwareness: {
+        awarenessProtocol.applyAwarenessUpdate(this._awareness, decoding.readVarUint8Array(decoder), this);
+        break;
+      }
+
+      case messageQueryAwareness: {
+        encoding.writeVarUint(encoder, messageAwareness);
+        encoding.writeVarUint8Array(
+          encoder,
+          awarenessProtocol.encodeAwarenessUpdate(this._awareness, Array.from(this._awareness.getStates().keys())),
+        );
+        sendReply = true;
+        break;
+      }
+
+      default: {
+        console.error('Invalid message:', messageType);
+        return encoder;
+      }
+    }
+
+    if (!sendReply) {
+      // Nothing has been written, no answer created.
+      return null;
+    }
+
+    return encoder;
+  }
+
+  private _handleBeforeUnload() {
+    awarenessProtocol.removeAwarenessStates(this._awareness, [this._clientId], 'window unload');
+  }
+}