feat: realtime collaborative editing

[benjie]

Description

This PR replaces #238; adding yjs support for the new Remirror. This can be demonstrated with the following code in the playground (advanced mode):

import React, { FC } from "react";
import { YjsExtension } from "remirror/extension/yjs";
import { RemirrorProvider, useManager, useRemirror } from "remirror/react";

const EXTENSIONS = [new YjsExtension()];

/**
 * This component contains the editor and any toolbars/chrome it requires.
 */
const SmallEditor: FC = () => {
  const { getRootProps } = useRemirror();

  return (
    <div>
      <div {...getRootProps()} />
    </div>
  );
};

const SmallEditorWrapper = () => {
  const extensionManager = useManager(EXTENSIONS);

  return (
    <RemirrorProvider
      manager={extensionManager}
    >
      <SmallEditor />
    </RemirrorProvider>
  );
};

export default SmallEditorWrapper;

As recommended by @dmonad in #238 we've switched over to y-webrtc so that the editing Just Works ™️ rather than requiring an external server.

Checklist

• I have read the contributing document.
• My code follows the code style of this project and pnpm run fix completed successfully.
• I have updated the documentation where necessary.
• New code is unit tested and all current tests pass when running pnpm run test .

Screenshots

Future tasks

• Make work as controlled component
• Allow configuring the provider (e.g. to use different channels)
• In playground, allow setting the channel as part of the URL/config so can copy URL and send to a collaborator.

[changeset-bot]

💥 No Changeset

Latest commit: a883ece

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

🚀 Deployed on https://5ef873260942e2037ed68dba--remirror-docs.netlify.app

[benjie]

We have it working with other extensions too!!

[ifiokjr]

🤣

[dmonad]

This is fixed in y-webrtc@10.1.5 - I forgot to publish the tsc files.

It might be a good idea to remove the Observable import from lib0. Just because of this import, this extension won't run in node<12 because lib0 is an esm module. The modules in the Yjs repo are not affected because their bundle points to lib0/dist/[module].cjs which is a commonjs module.

[dmonad]

Well.. let me know if it is not fixed 😉 Trying to keep the typescript definitions up to date.

[benjie]

Awesome; Ifi was planning to contribute back some improved typings, but good to know they’re available soon! We need a “provider” type that all providers implement (webrtc, websockets), is there such a thing, @dmonad?

[dmonad]

That's a good idea. No there is not at the moment, but I'll add one in the next release yjs/yjs#215

[benjie]

Awesome 🙌