Tiptap: Collaborative Editing

[thomasaull]

Are there any plans on implementing collaborative editing for this plugin? Any pointers on how to start on this?

Prosemirror Demo: https://prosemirror.net/examples/collab/#edit-Example
Prosemirror Docs: https://prosemirror.net/docs/guide/#collab

[thomasaull]

Ok I got it working locally with two editors as long as I delete content. As soon as I try to add content I get an error. Maybe I can work it out though :)

[thomasaull]

I'm stuck…

I tried to create a basic example based on https://prosemirror.net/docs/guide/#collab and the tiptap editor. It works, as long as I just delete text. As soon as I try to add any character the following error happens: TransformError: Invalid content for node paragraph

I suspect it has something to do with the underlying schema, I'm totally new to prosemirror though. Maybe you can give me a hand, since you probably know more about all the underlying structures. I created a minimal testrepo here: https://github.com/thomasaull/tiptap-collab

[philippkuehn]

Hey @thomasaull,

thank you for using tiptap. Support for the collaboration plugin was always on my list but I never found time to look into it. And I definitely need this for Scrumpy 😅 I can reproduce your issue but I'm not sure if this is related to tiptap. Unfortunately the collab demo on the Prosemirror page is very hard to understand. 😩

Maybe we could try to build your collab example in native JS to check if the error still occurs and ask for help on https://discuss.prosemirror.net/.

[thomasaull]

@philippkuehn I actually did a bit more testing last week with the native JS prosemirror library. It did work and apparently it has to do with the schema, but it's a bit weird. What I found out:

• When I create the schema in both of the instances of the Editor seperately, it throws the error
• When I import the schema from an external file or pass it through a prop from Authority.vue it works

So I guess, the error does not happen if you have an actual collaboration use case (just one editor in your Browser syncing via a server). If you're interested you can check the example here: https://github.com/thomasaull/tiptap-collab/commit/af8701a91eb1992be813fb01088e29803cd80c61 (Note: It's using RawEditor.vue instead of Editor.vue and sorry there's some unrelated stuff in this commit aswell)

[peterhollis]

I'd love to see this too 👍

[philippkuehn]

@thomasaull Better late than never! I found the initial issue with integrating the collab plugin into tiptap. Will release a working demo soon! 👍

[thomasaull]

Awesome, looking forward to it @philippkuehn :)

[philippkuehn]

@thomasaull the problem in our implementation is dispatching the transaction.

const transaction = receiveTransaction(
  view.state,
  newData.steps,
  newData.clientIDs
)

every step in newData.steps is still a Step class. In a real world example these steps would be a plain object (because these are received via web sockets or whatever) and you have to bind the prosemirror schema to it like this:

import { Step } from 'prosemirror-transform'
// ...
const transaction = receiveTransaction(
  view.state,
  newData.steps.map(step => Step.fromJSON(schema, step)),
  newData.clientIDs,
)

So for your simplified example of directly communicating editors you have to do something like this:

import { Step } from 'prosemirror-transform'
// ...
const transaction = receiveTransaction(
  view.state,
  JSON.parse(JSON.stringify(newData.steps)).map(step => Step.fromJSON(schema, step)),
  newData.clientIDs,
)

[xerosanyam]

Hi there! Amazing work on tiptap. 👏
Just wanted to know if I can implement collaboration using prosemirror-collab or we need this feature to be implemented before one can use the feature.
I mean what is the difficulty if one tries to use the native collaboration feature.

[alangibson]

It looks like @philippkuehn found a workaround for this issue, but the status is still Open. Are you planning on releasing a fix for this or should we just go with the workaround?

[kwiesmueller]

Would need that feature too, is there any work done on this or would we have to stick to the workaround?

[philippkuehn]

Hey, the prosemirror-collab plugin is not easy to use because you have to use it at your frontend and backend. I didn't find a way to get this running perfectly on my first try. And the default example of prosemirror-collab is unnecessary complex with an absurd feature overload. 😩

But we plan to add collaborative editing into our editor at scrumpy in the next weeks. When done I will provide a working demo with a socket server at the examples page. 💪

[philippkuehn]

Good news: collaboration is finally working! Can hopefully release it the next days.

[philippkuehn]

It's done! 🎉
A collaboration demo is online here.
You can see the client-side implementation here.
You can see the server-side implementation here.

[jeromepin]

Nice work ! 😃 The server-side implementation relies on prosemirror-transform to manipulate step according to the schema. What would be necessary to have a such server in another language ? Reimplement functions from prosemirror-transform ?

[philippkuehn]

@jeromepin This is indeed a tough challenge. We will implement collab into scrumpy over the next weeks. Our backend built on PHP so we will try to communicate between a PHP and Node server 🤞

I know there are some other ideas of implemention collab server-side in the forum.

[jeromepin]

@philippkuehn Can you tell us why you chose to add the Node server (and handle the inter-process communication) rather than implement the server-side stuff in PHP ? Less work to do maybe ?

[kwiesmueller]

@jeromepin I plan to build a Golang server implementation for this in the next few days. Hope to have some good shareable results soon.
Happy to keep you posted.

[qyloxe]

Can you tell us who is "us" in your question? Jerome and Pin are two
persons?
:-)
sorry, cant help myself :-)

On Wed, 8 May 2019 at 12:52, Jerome Pin [e-mail] wrote:

@philippkuehn https://github.com/philippkuehn Can you tell us why you
chose to add the Node server (and handle the inter-process communication)
rather than implement the server-side stuff in PHP ? Less work to do maybe ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/scrumpy/tiptap/issues/74#issuecomment-490440886, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AADSENAZKMI27BYS44VAUSLPUKWFHANCNFSM4GAQHJ6Q
.

[jeromepin]

@kwiesmueller I don't know yet which language I'm gonna use but I'll be happy to see what you will do with Go. I see there is some port in Python.

@qyloxe Can you tell us who is "us" in your question ? 😛 It works both ways ! Btw, we are way more than two in my head 😂

[philippkuehn]

@jeromepin yeah at this moment we don't really want to rebuild prosemirror 😅

[wahengchang]

@thomasaull did you come up with any solution ?
i m trying with a realtime db, firebase, as the db. and looking for vue components solution on the frontend side. no luck til now. :(

[philippkuehn]

@wahengchang the collab example doesn't help you?

[wahengchang]

@philippkuehn this is very helpful example with both demo and source code.

Because my backend server is running on Firebase realtime database, It seem like I have a lot to do in modifying the interfaces on both soket.io server and vue module (onInit()), for fetching data and update data work.

[wahengchang]

@philippkuehn , everything working so great with firebase realtime database. just three things bothering me.

• losing focus when it update/Editor.destory()
• having problem integrating with codehighlight.
• why do we save the field steps on socket.io exmaple? as I see steps will never be used.

if there is more info please let me know (I did read the doc tiptap.scrumpy.io).

[wahengchang]

not sure if i have the luck to have more support, there is how i use <Editor />:
https://github.com/wahengchang/realtime-js-editor/blob/master/components/rooms/EditorCore.vue

[philippkuehn]

@wahengchang

losing focus when it update/Editor.destory()

update and destroy are two completely different things. On update, focus should be the same. On destroy the editor is losing focus.

having problem integrating with codehighlight

what is the problem? can you share a codesandbox/gif/screencast?

why do we save the field steps on socket.io exmaple? as I see steps will never be used.

Of course this steps will be used. And I think that your solution won't work as expected. A server has to check if the stored version is the same as the clients version. If so all steps will be applied to the stored document on the server and all steps are sent back to all clients. You'll also receive your own steps again. In this moment these steps are getting confirmed. Now you know that you don't have to send these steps again (the collab extension is doing that for you). I also implemented locking on the server side to prevent that two simultaneous requests won't overwrite each other.

Maybe it's helpful to read this, this and this resource for a better understanding.

[LionsAd]

We are going into a different direction:

We will likely use https://github.com/y-js/y-prosemirror/tree/master to bind prosemirror to yJS.

The advantage of that approach is that due to the usage of CRDT (instead of OT) the server-side component can be really light (and probably even be implemented in go or python or ...).

Here is an older example, which is really simple IMHO - given how complex collab is:

https://yjs.website/tutorial-prosemirror.html#

I kinda liked the approach as prosemirror's collab works more like GIT and less like OT (ShareDB, Google Docs) or CRDT (Apple Notes).