Quill JS custom blot inserting the text "true" instead of the correct text

Question

I'm using Blots to create custom quill elements, but I'm getting some weird results when trying to set the editors contents with a stored Delta. It's kind of difficult to explain with words so I created a codepen with a reproducible scenario. https://codepen.io/jake613/pen/wQLvxa - follow the comments at the top of the javascript section to reproduce

requirement for codepen link

Answer 1

When the delta is created the return of the value() method of your blot is inserted into the delta as insert directive. If your blot class has no value function the default return value is true for some blots. So when you apply that delta the text of your Blot will be true.

Check all parents classes of your blot for the value function and you see what is applied.

In your StarTagBlot class add a function value(). This function has to return the same as you would put into the first parameter of the delta insert method new Delta().insert({StarTagBlot: 'some text'}, attributesData) to display your blot. If you have some text in your custom blot it should be something like this:

class StarTagBlot extends Inline {
...
    //returns what delta expects as insert text
    //if empty only true is returned
    value() {
        return { StarTagBlot: this.domNode.innerText.trim()};
    }
...
}