Yjs is great. Can I integrate Yjs into a custom editor similar to Quill or ProseMirror?

1

Hi,

The YJs performance with Quill or porse mirror is great. I am building a custom editor web app with a lot more toolbar features are per our websites requirement. I wanted to know:

  1. Can we integrated this into a custom editor tool?
  2. How can we achieve that?

Thanks.

2

Hey @Gaman It is great to hear that you had a good experience with Yjs!

ProseMirror and Quill are very adaptable. So it should be no problem at all to modify the toolbar, the design, or adding custom nodes / formatting options. For that I refer to the respective projects.

Yjs integrates over an editor-plugin to the editors. Since the editor data-models are strictly defined (Quill uses the delta format, ProseMirror has a schema definition). Yjs will just sync your data, even if you add custom nodes / formatting options to the editor.

For example, the Atlaskit editor (open-sourced by Atlassian) is based on ProseMirror. It adds a lot of custom nodes to the editor (e.g. tables, mentions, jira issues, …). Syncing still works as you can see in this demo: https://yjs-demos.now.sh/prosemirror-atlaskit/

On the other hand, if you want to write your own editor (not based on any of the editors that Yjs supports). Then you would need to write your own editor plugin.

3

About the demo: https://yjs-demos.now.sh/prosemirror-atlaskit/
Do you know any documentation how to run such setup myself? Is the demo source code available somewhere?

4

Hi @mtrantalainen,

glad you like it :slight_smile:

All demo code is available here: https://github.com/yjs/yjs-demos

You can simply clone the folder that you are interested in and start your project.

The most up-to-date demos are in demos.yjs.dev. now deprecated the setup I used. Can you tell me where you found the yjs-demos.now.sh link so I can fix it?

5

Oh nevermind, I posted it above. Now you know.

1 Like
6

There’s also an old talk that points to old demo: https://www.tag1consulting.com/blog/deep-dive-rich-text-editors-tagteamtalk-002

If you can still update the code at https://yjs-demos.now.sh the best choice might be to put a placeholder page saying that the old demo has been removed plus links to current demo and the github repo.

7

Right, thanks!

now.sh will shutdown my instance very soon anyway. But I’ll ask tag1 to update the link.