QuillJS / Parchment : Controlling Nesting Order?

Question

I'm using QuillJS and Parchment and loving it so far!

That said, I've encountered a minor annoyance that I'm hoping someone knows the answer to. (I've combed the documentation, issues, questions, and even poked at the source code - trying to do due diligence before asking here!)

Is there any way to implicitly or explicitly control the order in which formatting tags are applied?

---

For instance, suppose you go to the QuillJS Playground and paste in the text:

A (bold (italic (underlined))) move!

And even go so far as to format it so it looks like this:

A (bold (italic _(pretend this is underlined)_)) move!

The markup will be something deliciously like this:

<p>A <strong>(bold <em>(italic <u>(underlined)</u>)</em>)</strong> move!</p>

A beautiful little nesting of tags. Note that the order in which you apply the formats doesn't matter - it will always produce the same markup.

---

If instead, you go to the QuillJS Playground and paste in the text:

An (underlined (italic (bold))) move!

And format it so it looks like this:

An _pretend this is (underlined (italic (bold)))all the way to here_ move!

The markup will be something hideously like this:

<p>An <u>(underlined </u>
<em><u>(italic </u></em>
<strong><em><u>(bold)</u></em></strong><em><u>)</u></em>
<u>)</u> move!</p>

It follows the same nesting order as the first example (<u> is always inside of <em> is always inside of <strong>) which is wonderful! It just so happens that the stacking order of our text happens to be forcing it to nest awkwardly.

---

The reason I ask is because I'm defining a custom inline blot <figcaption> and I'd much rather have my markup look like this:

<figcaption>A <strong>bold</strong> move!</figcaption>

instead of this:

<figcaption>A </figcaption>
<strong><figcaption>bold</figcaption></strong>
<figcaption> move!</figcaption>

---

Any ideas? Suggestions?

Thank you for your time!

Answer 1

Eureka!

I did some further digging through the QuillJS source, and stumbled upon this guy:

https://github.com/slab/quill/blob/develop/packages/quill/src/blots/inline.ts#L9

// Lower index means deeper in the DOM tree, since not found (-1) is for embeds
Inline.order = [
  'cursor', 'inline',   // Must be lower
  'code', 'underline', 'strike', 'italic', 'bold', 'script',
  'link'                // Must be higher
];

The nesting order of inline elements is controlled by that array. Given two formats (say, 'bold' and 'underline'), 'underline' will always be nested inside of 'bold' because it occurs first in Inline.order. Likewise, 'link' will always surround 'bold' because 'link' occurs after bold in that order.

To solve my problem, I overwrote Inline.order to be the same, but included my 'caption' blotName at the end of the array:

// Lower index means deeper in the DOM tree, since not found (-1) is for embeds
Inline.order = [
  'cursor', 'inline',   // Must be lower
  'code', 'underline', 'strike', 'italic', 'bold', 'script',
  'link', 'caption'     // Must be higher
];

And it worked!