As part of our project to build a Meteor platform for authoring collaborative learning exercises FROG, we had the need to embed collaborative editing deeply, including simple text, rich text, and even collaboratively editable forms - we use react-jsonschema-forms very extensively in our tool, and wanted to see if we could make these collaboratively editable.
We had a student (Dario Anongba) work with us for one semester on this project. Initially we wanted him to look at embedding ShareDB into Meteor, inspired by the work of mizzao. As his work progressed, we realized we could release a pure JS package, instead of a Meteor package, with React components that make it extremely easy to begin using ShareDB, including a simple textarea, the Quill editor, and most interesting, react-jsonschema-form (RJF). RJF is a tool made by Mozilla which can generate very complex forms based on a simple JSON object specification. Our package supports most of the RJF functionality, and let’s you easily construct a form with multiple text fields, checkboxes, select menus etc, which are all synced to a ShareDB collection, maintaining cursor position for the text fields, etc.
We published the work in the package collab-react-components. We hope this would be useful to the community, and would love feedback about the API design, the implementation etc. . He also had some early work on coordinating between ShareDB collections and Mongo collections, which can be found here, but in the end we decided to go towards a pure JS package, because we will not need this kind of one-to-one mapping in our Meteor app anyway. Adding this to a Meteor app is as simple as dropping two lines in server.js, and using the components in the client imports.
We’d also like to express our gratitude to the authors of Meteor and the community, it’s an amazing platform to develop on.
One final thing that you might find interesting is the way we handle shared data between learning activities. The idea is that learning activities are pluggable NPM packages, which should not know anything about Meteor or database structure etc. Instead, they export React components, which receive as props data, an arbitrarily complex JSON object, and dataFn, a collection of functions to operate on the data structure. In the background, all the synchronization is done with ShareDB at ot-json0, and it works really well. Our platform is in rapid development, but if you’re interested, the main files to look at are
an example activity - a fully fledged chat, which live-updates, in 30 not very dense lines (imagine that the groups are split into groups, which generates different collections, so that you will have multiple chat “rooms” at the same time). The beauty is that there is nothing in all the files above specific to chat, and the same thing works just as well for our other activities.
Would love to keep in touch with anyone using ShareDB for interesting stuff, or using Meteor for synchronous collaboration etc.
CHILI - EPFL