How to implement a web-based rich text editor in 2023?

Hi everyone!

I’ve recently wrote up a piece about the current state of web-based rich text editing, and I thought it might be of interest to this community here.

At this point big thanks to @marijn for dedicating so much time to ProseMirror. It’s a beautiful, clearly scoped reliable piece of software. After co-developing our own rich text editor library (Substance.js) for several years I found myself using ProseMirror for my latest projects:

  • letsken.com (free community for knowledge exchange; ProseMirror is used for article editing and comments)
  • editable.website (edit websites inline, as an alternative to bloated/slow CMS)

In both cases I came up with a custom-tailored super strict document model, macros and keybindings. The first project is realized with React, the second (which I’m planning to open source) is based on SvelteKit. The experience with combining SvelteKit and ProseMirror was amazing so far. I’m going to do more advanced things in the coming weeks and will share my experience.

Happy to have a discussion about the topic either here or in the comments over at letsken.com.

Have a great day!

4 Likes

Thanks for sharing! I didn’t know yet that Dominic was leaving Meta.

Hey cool! ProseMirror and SvelteKit is also my jam. If you need help, I wouldn’t mind working on that stack together in some capacity.

2 Likes

I’d love to make this a joint effort. Currently there’s <PlainTextEditor> and <RichTextEditor> components that need a bit of work to support single-line vs. multi-line editing, maxCharacters, placeholders and an improved mobile experience with a reliable floating toolbar (the current sticky one will scroll out of view when you open the soft keyboard).

The idea is to keep things really simple and the implementation canonical. Rather than packaging it up as a a customizable npm package, I want to just make available a SvelteKit example project of an editable website in action. Designers shouldn’t be afraid to touch the markup to customize the style. And developers shouldn’t be afraid to add additional pages, and even adjust the behavior of the editing components and create their own by modifying the example code.

Up for a chat some time next week? You can reach me via email (michael at letsken dot com).

If it was possible to make something simple and useful that would be a definite win. I think many projects die by million of cuts of over-abstraction. I sent an email :+1:

1 Like

It’s going to be super interesting to see how you have integrated this with SvelteKit, i’m in the same boat currently using ProseMirror in a (for me) complex setup with many different types of nodes and custom interactive node views and stuff, but it feels like the code is getting complex very quickly.

Looking forward to see some more code for inspiration!

2 Likes

Me neither. Truly sad news for Meta.

But it seems Dominic is back and now working on Svelte (maybe related to editing?).

https://twitter.com/_mql/status/1640778976485318663

In other news, I’ve released “editable-website” as open source and it got quite a bit of interest on HackerNews today. Feel free to use it as a starting point for integrating ProseMirror with Svelte. And share your ideas for improvements. :slight_smile:

Links: