Currently, RichText's internal value has separated text from formatting, which is great for searching the text and easily applying formatting. The formatting data is a sparse array that is filled at the positions where the text is respectively formatted. For example, if text is formatted from position 2-5 in bold and from position 2-10 with a link, then you'll find arrays in the sparse array from position 2-10 that includes the bold format from 2-5 and the link format from 2-10.

This format is great for manipulating the data, but not so great for serialising it back to a tree format (DOM or HTML). In order to do so, you need to go over each position one by one and build up a tree based on what formats you have.

How can we make that better?

One way could be to store formats with ranges in a Map, for example { type: 'bold' }: [ 2, 5 ]. We can then make a custom iterator that gives us the formats in the right order for a tree: ordered by range start and then the length of the range.

Now we no longer have to go over each position to build up a tree. We can add slices of text in one go as we go over formats in order.

Format APIs should also be straightforward to implement. applyFormat( value, format, start, end ) is just a matter of adding the format to the Map. For slice it would mean splitting the intersecting formats at a certain position. Some operations become easier, some a bit harder, but that's ok. The area where we should optimise for speed is converting to/from a tree, not the value operations, which run significantly less often.

Thoughts?