Building on QuillJS Round 2

I wrote about using web component in Quill in the previous post. I thought I was real smart about this but turned out there was still a huge issue around the writing experience.

So here goes - in the below editor, you will find that you cannot select INTO the underlined content. You can select over the entire underlined span but not INTO it.

This is a huge issue because when you underline a long span of text, you are prevent the user to select partial of the span. This is very disruptive.

Going back to the Quill native approach

As a reminder of what we talked about in the previous post, we have already moved the text mutation part out of the web component. At this point, there is not much in the web component. So I thought maybe it's time to ditch web component all together.

So, see below new demo. Now you can select into the underlined text

and DOM tree looks like

Summary

The web component approach is very slick and it almost worked. However due to its weird pointer event processing, you probably want to stay away from it when we are building highlighting over text span. For other non-copy-paste-able visual cues, the web component could be extremely helpful.