WYSIWYG Editors and Collaborative Edit Safety

I don’t think there was any public conclusion although one or more people may have implemented one of the proposed solutions. If it’s just plaintext, then @mizzao’s Sharejs plugin is probably the best.

Im still working on it :slight_smile: from what I’ve found, there are two big open source projects for this. First is ShareJS + Quill, which uses operational transformations, or you could implement your own ot type for use with ShareJS and then build your own text editor. The other option is ProseMirror, which uses a model similar to git in which if you have to pull down the latest content version before pushing changes, and it has some conflict resolution logic. Both of these projects are usable but definitely still in their early stages. I originally went down the Quill path but I’m working on a POC using ProseMirror now, with the data driven by Meteor publications + methods. Some day it’ll be done, but it’s fairly complex so I keep getting lazy and putting it off for other features. I suggest reading this article if you’re interested in ProseMirror http://marijnhaverbeke.nl/blog/collaborative-editing.html

Utopia edit looks pretty cool. There’s been a ton of activity in the sync / simultaneous editing genre for npm in the last few years. ShareJS is one of the most mature. I’ve also been following SwarmJS for a while now. It’s still going through a lot of changes and by no means production ready. I think that’s generally the state of sync editors right now, particularly ones that support HTML - a few solutions but none production ready.

any interest in collaborating on a solution? I’d be interested to put some dev time towards working on a package (public or private) that adds Prosmirror. I’ve actually just been waiting for Meteor 1.3 to start that myself.

sure, I’m by no means an expert on how ProseMirror works so it’d be good to get a second pair of eyes on it. maybe a few other ppl in the Meteor community would find it helpful and pitch in as well. I’ve got some notes on how it may work using Meteor’s data layer, I think a good place to start would be to get some notes up on a place where others can view and contribute to nail down the planning phase. I’ve been waiting on the ProseMirror author to update the website example repo, which contains his example of a simple collaborative server but it’s a bit behind the latest changes

This topic caught my eye, as I’ve been dealing with complex integrations of WYSIWYG editors in browsers for years. Prosemirror looks interesting, and hats off to Marijn—Building a tool like this in under a year on his own is an impressive feat. I also like his approach to being compensated—I hope it works out!

Since no-one else has brought it up, I wanted to chime in and mention the work that the folks over at CKSource are doing with their next generation of CKEditor (version 5). Their approach is similar to Prosemirror at a high-level (modularized npm approach, abstracted document model, collaborative editing, etc.), but is being developed by a full team that has been in the trenches for years.

High-level info on CKEditor 5:

  • An overview of the project’s goals
  • Blog with bi-monthly updates on project status

Though CK5 is still in development (while Prosemirror is available now), I suspect CKSource will be able to iterate and improve it more rapidly than Prosemirror, though I’d be over-the-moon-thrilled if both projects flourished!

Food for thought. :slight_smile:

3 Likes

(Since as a new user, I can only include two URLs per post…)

You can follow CK5’s development in their primary Github repos: ckeditor5-core, ckeditor5

The project has quite a few other repos, but these are where you’ll find the most activity and discussion.

1 Like

I’m certainly willing to contribute to a projects which has meets my requirements. Those include:

  • Simultaneous editing
  • Authorship
  • Support for HTML storage
  • Framework agnostic (not just a meteor package, should be jsfiddle-able)
  • A formatter open enough to work with. Making TinyMCE plugins is easy enough, although I’m no fan of TinyMCE. Or CKEditor.
  • Last but definitely not least: the ability to associate with selections of content. Like google docs comments.

I sure wish Google Docs were open and embeddable with a full API. EtherPad got me excited at one point but it was dreadful when I tried it out and very black-boxy. ProseMirror looks fantastic. Has anyone tried it out and have comments on how ready it is for real-world use?

Just to be clear, I think what @efrancis mentioned and what I offered to help with was just integration of Prosemirror into Meteor. This is really just developing the sever-side component that manages the passing of change-sets/operations to connected clients working on the same doc.

It seems you might be looking to develop a new editor or extend an existing one with whatever functionality is missing from your list. If that’s you interest, especially the latter, it would probably be best to contribute to the editors themselves. But then again, maybe I’m misunderstanding you.

I’ll plug my project as a possible home for such planning. It’s a fancy schmancy wiki engine called humon. I’d integrate the editor as soon as we can get a working package out and then we’d actually be dogfooding the package if we did any more planning or discussions.

If not no worries.

Did you have any code already written or not really?

What do people think about http://quilljs.com/ ? To me it looks like the best out there, but just lack integration with Meteor.

I’m also wondering how to get ProseMirror collab module working, and how to get it into Meteor. I tried out the demo, but it’s not a collaborative editor. There’s some hints on how to use the collab module in the documentation, but I couldn’t get it working.

here’s the ProseMirror collab demo https://prosemirror.net/demo/collab.html#edit-Example
and here’s the guide on building a collaborative implementation http://prosemirror.net/guide/collab.html

What do people think about http://quilljs.com/ ? To me it looks like the best out there, but just lack integration with Meteor.

I just looked at Quill, they’ve made a lot of progress since last time I played with it. I still haven’t found a single demo of it being used collaboratively though, it seems like it’s possible but nobody has published anything about it. It may be possible to use Meteor’s data system to keep in sync with the remote document and use the rich text ot-type to handle changing the local document. Is ShareJS necessary at that point? Reading the Quill blog though, they say that they’ve moved to a new document model called Parchment, the rich-text ot-type that was built for ShareJS looks like it’s for the old Quill document model so I’m not sure if that would work. I for one don’t want to build my own ot type so that may be a deal breaker.

@funkyeah I don’t have any meaningful code, just dumbly with hooking up ProseMirror to a publication without any conflict resolution

but lets keep this discussion going!

@mitar Quill is maybe the most polished editor but @efrancis is correct in the assessment of collaborative editing state in quill. In theory it is possible with their data model approach but there would be a fair bit of technically challenging work to write a custom ot-type and make it seamlessly work with sharejs. I am also guessing that sharejs on the server pretty much lives outside the context of meteor… this is not inherently an issue but certainly lessens the overall solutions integration with Meteor.

If I understand correctly, Prosemirror depends more on a central authority managing change-sets (and less on true operational transform) than sharejs which makes the server side code needed for Prosemirror significantly simpler.

@dtwist in this regard I think CK5 and Quill are kind of on the same playing field. They are designing editors that have a data-model that is supportive of adding real-time collaboration through OT or CRDT’s but real-time collaboration is not a first class citizen and implementing it will not be trivial.

To my understanding people behind sharejs and quill are the same and also made ot-types already:

What I think is the only piece missing is using DDP for transport, instead of custom sharejs one.

No I don’t believe they are the same… or at least the contributors are not the same:


I’m less sure about this but it may be that as @efrancis pointed out the new data model for quill does not match the ot-type they made for the previous data-model.

How about authorization and shareJS’s concept of sessions? would we need to replace those as well or do they just live out in the shareJS sandbox and we adapt to its model? Same for DB, does it require a separate instance of a DB or do you think its sensible to wire that side of sharejs into the DB mongo DB used by the rest of the app?

Hm, I had in mind jhchen:

To me it seems that what all you are asking is at least in his head if not also in some code somewhere.

@mitar Here’s a good interview discussing ShareJS and QuillJS by the Share author https://devchat.tv/js-jabber/142-jsj-sharejs-with-joseph-gentle They cover a broad range of topics around OT, CRDT, distributed systems, collaboration, and lots of other stuff in this domain. It’s worth a listen for anyone interested in the topic. Share+Quill were built by different people but they collaborated together on the rich-text ot-type. Sadly Quill has moved onto a different document model since then, so their efforst were essentially lost unless you wanna be stuck to an older version of Quill :disappointed:

Ohhh. :frowning: This is so sad to hear. So this is why there was no updates after I saw all this efforts in the past.

Slightly related, I have also been looking into completely distributed approaches. People around scuttlebutt seems to also do interesting things: https://github.com/dominictarr/scuttlebutt

For example, they have a text editing CRDS defined: https://github.com/dominictarr/r-edit

They made a secure version: https://github.com/ssbc

Pretty amazing work: https://github.com/ssbc/patchwork