How to create nested inline blots with the same tag name?

575 views Asked by At

I am working with Quill and I am trying to create a custom blot where it would be possible to nest several of this blot. The purpose of this is that I want parts of the text to be shown only if certain conditions are matched, like an if statement. The nesting part it's because it would be possible to add AND and OR operators, besides turning the processing part easier, since I would only need to find the parent and iterate the children.

So far, I have the following Blot structure:

class ConditionBlot extends Inline {
    static create(value) {
        let node = super.create();
        node.setAttribute('idCondition', value.idCondition);
        node.setAttribute('clause', value.clause);
        node.setAttribute('color', value.color);
        node.setAttribute('idConditionBox', value.idConditionBox);
        return node;
    }

    static formats(node) {
        return {
            idCondition: node.getAttribute('idCondition'),
            clause: node.getAttribute('clause'),
            color: node.getAttribute('color'),
            idConditionBox: node.getAttribute('idConditionBox')
        };
    }
}
ConditionBlot.blotName = 'condition';
ConditionBlot.tagName = 'condition';

The problem is that when I call the formatText() function from the Quill editor, it doesn't nest the blot, even though in the user selection there is already a condition blot. But if there is a different blot, it does nest it.

While talking with a coworker, he suggested me to create the blots dynamically, using the create() function provided by Parchment, and changing the tag name for each blot, thus allowing to nest blots. I am wondering if this is the only possible solution or if there is another way that I can accomplish this.

Is there any other way to insert nested blots with the same blotName using regular Quill methods?

0

There are 0 answers