YjsPlugin dynamic provider import + Y-Sweet provider integration

[apolubek]

💡 Ideas for YjsPlugin improvements

1. It would be nice for YjsPlugin to dynamically import provider dependencies depending on the provider options passed to YjsPlugin.configure as for now all of them need to be installed even if not used.
   E.g if just webrtc provider is used, @hocuspocus/provider needs to be installed anyways and vice-versa (it's because all providers are exported https://github.com/udecode/plate/blob/main/packages/yjs/src/lib/providers/index.ts and their libraries imported when importing this file from BaseYjsPlugin.ts).

2. I also created an Y-Sweet provider based on already available providers, so you can add it if you want to extend Yjs providers config.

import {
  AuthEndpoint,
  createYjsProvider,
  YSweetProviderParams,
  YSweetProvider,
  STATUS_OFFLINE,
  STATUS_ERROR,
  STATUS_CONNECTED,
} from "@y-sweet/client";
import * as Y from "yjs";
import { Awareness } from "y-protocols/awareness";
import { ProviderEventHandlers, UnifiedProvider, YjsProviderType } from "./types";

type YSweetProviderOptions = {
  docId: string;
  authEndpoint: AuthEndpoint;
};

export class YSweetProviderWrapper implements UnifiedProvider {
  private _isConnected = false;
  private _isSynced = false;
  private provider: YSweetProvider;
  private _doc: Y.Doc;
  private onConnect?: () => void;
  private onDisconnect?: () => void;
  private onError?: (error: Error) => void;
  private onSyncChange?: (isSynced: boolean) => void;
  private _onStatus: (data: any) => void;

  destroy = () => {
    if (this._isConnected) {
      this.provider.disconnect();
      this.provider.off("status", this._onStatus);
      this.provider.off("sync", this._onSync);
    }
  };
  disconnect = () => {
    if (this._isConnected) {
      this.provider.disconnect();
      this._isConnected = false;

      if (this._isSynced) {
        this._isSynced = false;
      }
    }
  };

  type: YjsProviderType = "ysweet";

  constructor({
    awareness,
    doc,
    options: { docId, authEndpoint },
    onConnect,
    onError,
    onDisconnect,
    onSyncChange,
  }: {
    doc?: Y.Doc;
    awareness?: Awareness;
    options: YSweetProviderOptions;
  } & ProviderEventHandlers) {
    this.onConnect = onConnect;
    this.onDisconnect = onDisconnect;
    this.onError = onError;
    this.onSyncChange = onSyncChange;

    const providerOptions: Partial<YSweetProviderParams> = {
      awareness,
      showDebuggerLink: process.env.NODE_ENV === "development",
    };
    this._doc = doc ?? new Y.Doc();
    try {
      this.provider = createYjsProvider(this._doc, docId, authEndpoint, providerOptions);
    } catch (error) {
      console.error(error);
      this.provider = createYjsProvider(this._doc, docId, authEndpoint, { ...providerOptions, connect: false });
    }

    this._onStatus = (data) => {
      if (data?.status === STATUS_CONNECTED) {
        this.onConnect?.();
      }
      if (data?.status === STATUS_ERROR) {
        this.onError?.(data);
      }
      if (data?.status === STATUS_OFFLINE) {
        this.onDisconnect?.();
      }
    };

    this.provider.on("status", this._onStatus);

    this.provider.on("sync", this._onSync);
  }

  private _onSync = (isSynced: unknown) => {
    if (typeof isSynced === "boolean") {
      this._isSynced = isSynced;
      this.onSyncChange?.(isSynced);
    }
  };

  connect() {
    try {
      void this.provider.connect();
    } catch (error) {
      console.error(error);
      this._isConnected = false;
    }
  }

  get awareness() {
    return this.provider.awareness;
  }

  get document() {
    return this._doc;
  }

  get isConnected() {
    return this._isConnected;
  }

  get isSynced() {
    return this._isSynced;
  }
}

[zbeyens]

That looks good. Feel free to open a PR!