Quill: Custom blot does not store values properly into editor state

[puopg]

When creating my own custom blot inheriting from Inline, I provide an object which is not saved in the editor's state. Instead, it simply saves a value of 'true'.

Steps for Reproduction

Create a custom blot and provide an object for it to use as its value.
Here is an example:

class MentionBlot extends Inline {
      static create(value) {
        let node = super.create();
        node.setAttribute('email', value.email);
        return node;
      }

      static value(node) {
        return { email: node.getAttribute('email') };
      }
    }

    MentionBlot.blotName  = 'mention';
    MentionBlot.tagName   = 'p';
    MentionBlot.className = 'mention';

    Quill.register(MentionBlot);

    _quill.insertText(0, 'This is a first Michael Chen I want you to have');
    _quill.formatText(16, 12, { mention: { email: '[email protected]'} });

Expected behavior:

quill.getContents() shows the attributes stored as that object.

Actual behavior:

quill.getContents() shows the attribute simply stored as the value 'true'.

Platforms:

Chrome, OSX

Version:
1.2.2

[puopg]

In the HTML, I get an attribute named email which has the correct email, but if I remove that line and undo that action, the editor rebuilds the blot and since it never saved the data, it renders it in as undefined as the email attribute.

[puopg]

Going to answer my own question, need to use the formats method to do this. I added to the above:

      static formats(node) {
        return { email: node.getAttribute('email') };
      }

and now it properly stores that object into the editor state.

[anztrax]

thanks @puopg , save my day 👍

[bill13996]

@puopg you are genius!! How did you find out the way to solve this problem?