My pain building a WYSIWYG editor with contenteditable | Hacker News Reader

My pain building a WYSIWYG editor with contenteditable

answerly.io

35 pointsthunderbong10 comments

I feel your pain. Have you seen prose mirror? It should do everything you listed. It takes some time getting it up and running and understanding the api but after that it seems really consistent. If you end up creating your own library you should read the blog from marijn haverbeke (creator of prosemirror and codemirror) it gives a lot of insights into building a WYSIWYG editor. I think another problem is that keyboard events are not fired on mobile so your solution might not work there. https://marijnhaverbeke.nl/blog/

Seconding ProseMirror [1] as the least buggy editor implementation on top of contenteditable I’ve seen yet. It also supports JSON serialization and has plenty of support for complex custom pieces of content in the document.

The ProseMirror API is quite low-level-feeling for many use cases, however, and TipTap [2] is doing a good job of building a friendlier wrapper around it.

That said, neither of these are perfect and there are bugs here and there, especially on mobile devices, but they’re better than any other solution I’ve seen so far.

[1] https://prosemirror.net/

[2] https://tiptap.dev/

Personally I always prefer to skip the DOM-serialized editors and just go to something like Quill or Slate, which is end-to-end JSON.

Last I evaluated them, they had some bugs that wouldn’t work for my use case. For example, Quill has the annoying bug on mobile Safari of blocking the native behavior of capitalizing the first letter of a new line.

I don’t remember what I found in Slate, however, and it’s possible it may be much better now.

Ah, one of the bugs with Slate was with spell-checking. On mobile Safari, at least, its text nodes aren’t marked by spell check unless they’re interacted with by the user after they’ve been typed.

As I’d said, they all have bugs, including ProseMirror. I just found that PM solved most of the ones I cared about relatively well.

ProseMirror is probably the best option out there, but I found it pretty hard to wrap my head around its API.

The docs are detailed and exhaustive but did not help me much understand how to actually use it. I had to read Marijns code which I found hard to follow.

I started this introduction to PM (which is incomplete since I stopped using it) but I think will help anyone trying to use it.

https://github.com/PierBover/prosemirror-cookbook

> The docs are detailed and exhaustive but did not help me much understand how to actually use it. I had to read Marijns code which I found hard to follow.

That was also my experience. Your examples would've helped me a lot a couple of months ago. Thanks for writing it down!

My pleasure.

I'm actually a bit embarrassed that I abandoned it considering it's my most starred repo... but I haven't touched PM in months and don't have much time to pick it up again.

I had to replicate the SharePoint people picker: "resolved" values are styled and are removed as a whole with a single backspace/delete. SP was doing something super neat: it used ::after and content with an empty tag. A pretty neat trick, if you don't need to embed HTML (as content only supports plain text).

The bulk of my time was spent removing text formatting on paste, and Safari bugs.

I believe you can also achieve this by setting contenteditable="off" on an inline element to make the whole thing removable with backspace.

Reply on news.ycombinator.com