Automatic characters around quotes: is there a good model?


in my editor I want to put automatic delimiters – e.g. “”, «», ‘’ – around quotes.

A portion of the text is modeled as a quote setting a certain Mark on it.

So the first problem is detecting when that mark is applied or removed.

Then comes detecting adjacent text nodes with that mark, because only the first one will have the opening delimiter (say “«”) before, and only the last will have the closing one (“»”) after.

Consider this HTML fragment:

<p>A paragraph with <q>a quote that <em>contains</em> an emphasis</q>.</p>

The quote is made of three text nodes, all with the “quote mark”, but only the second one with both the “quote” and the “emphasis” mark.

Anyways, I was able to solve those problems.

The biggest problem has been modeling those delimiters.

The first idea is to use Decorations.

In particular, I added inline decorations to the first and last of the adjacent nodes with the quote mark, so that I could use the CSS ::before and ::after selectors to show the delimiters.

The problem with decorations is that they are not part of the document, so the cursor can’t move on both sides of the delimiter. Here I’m putting a “|” to represent the cursor in the previous example:

A paragraph with |«a quote that contains an emphasis».

When you press the right arrow key, the cursor moves to this position:

A paragraph with «a| quote that contains an emphasis».

Instead of the one the user would expect:

A paragraph with «|a quote that contains an emphasis».

So I opted for a leaf node to represent the delimiters, that are automatically inserted with appendTransaction() when you modify quotes.

Now the problem is that those auto-delimiters are nodes, so they are part of the document. The solution I found is ignoring those nodes when serializing (exporting, saving) the document.

It’s working, but it’s fragile and easily susceptible to interactions with other mechanisms (an example is here, which was also the trigger to start this discussion).