Model highlights/comments as marks instead of annotations to allow for collaborative editing — Note: This post explain the concept of annotations vs marks based on highlighting. The same applies to comments in text. Prosemirror is an awesome toolkit for building rich-text editors. Writing text in the editor is typically the central use case. Yet, working with text can be equally important. …

Aim for diverse biases during your user research. Design a system to have the biases of your team members cancel out each other. — In user research, we aim to unveil the pains, needs, and wants of our users. Ideally, we would dump the brains of all users and then filter for the relevant pieces of information. This being impossible, we rely on indirect techniques like user interviews. …

Cut down technical complexity by focusing on user experience. Avoid unnecessary shared state in collaborative editing. — The Yjs framework adds cutting edge collaborative editing to vanilla Prosemirror text editors. It transforms a “save and close” experience into one where many users write all at the same time. A crucial ingredient for collaborative editing is to show the cursors of the other users, so one can see…

Debounce user input to prevent lag when using positioners with Remirror (Prosemirror) — Positioners are one of Remirror’s power features: They make it easy to position content relative to text in the editor. From bubble menus over the selected text, to showing comments in a sidebar at the height as the commented text — the sky is the limit. In fact, there is…

Tip: Use shadow-box to tune the look of selected nodes in Remirror editor — Remirror allows to build rich-text editors for React apps. Under the hood, it builds on the awesome Prosemirror toolkit. A core concept of Remirror are ReactNodeViews, which allow developers to add custom nodes into a document. For example, a Remirror document might embed a user card with the user’s photo…

Remirror is ready for prime time — After 2.5 years of development and over 200 pre-releases, we’re excited to introduce Remirror v1! 🎯 The overarching goal for v1 was to bring the Remirror core into a shape that can stay stable for the foreseeable future. This work was guided by our learnings from the 0.x …

Why we picked Remirror / Prosemirror as WYSIWYG editor in our React application — One size doesn’t fit all Our users loved when we enabled commenting in the app. Yet, pretty soon they wanted more: On top of the list was the ability to mention other users and to add tags. After some fruitless attempts to add mentioning to our plain text editor, we made the leap and moved…

Adding collaborative editing via webrtc and Lambda/DynamoDB-powered signaling server — Editing richtext is a core feature of our application. When more and more users asked to work together in the same document, it was time to add collaborative editing. For that, Yjs looked like the natural choice because Remirror/Prosemirror, which power our editor, come with a great out-of-the-box integration. But what about serverless?

How to break the tradeoff between strong data separation and low cost per tenant — Architectures for multi-tenant SaaS aim for two conflicting goals: Keep costs per tenant low. This includes the operating costs for the resources, e.g. AWS bill, and the costs for managing the setup. Provide separation between tenants. This includes strong data separation as well as flexibility for tenant-specific configuration like SSO…