0

I am trying to create a button on the Quill toolbar, which when called creates a list-item and wraps it in a parent list-container (if it the parent of the list-item is not already the list-container).

I have followed the example of the List format

 class CustomListContainer extends Container {}
    CustomListContainer.blotName = "custom-list-container";
    CustomListContainer.tagName = "OL";

    class CustomListItem extends Block {
      static create(value) {
        let node = super.create();
        node.setAttribute("data-list", value);
        return node;
      }

      static formats(domNode) {
        return domNode.getAttribute("data-list") || undefined;
      }

      constructor(scroll, domNode) {
        super(scroll, domNode);
        console.log("scroll", scroll);
        console.log("domNode", domNode);
      }

      static register() {
        Quill.register(CustomListContainer);
      }

      format(name, value) {
        if (name === this.statics.blotName && value) {
          this.domNode.setAttribute("data-list", value);
        } else {
          super.format(name, value);
        }
      }
    }

    CustomListItem.blotName = "custom-list-item";
    CustomListItem.tagName = "LI";

    CustomListContainer.allowedChildren = [CustomListItem];
    CustomListItem.requiredContainer = CustomListContainer;

and

Quill.register(CustomListItem)

I expect the user to click on a toolbar button, and its handler will call Quill.insertEmbed(index + 1, 'custom-list-item', true) and for a list container and its child item to be inserted... However, I can see on the DOM that only the list-item gets appended and that there is no CustomListContainer.

It looks like I am missing a step when calling insertEmbed() perhaps?

If someone could guide me to creating a custom list contianer on the DOM, i think adding editable list items through the toolbar would be quite straight forward afterwards

Bob Fanger
  • 28,949
  • 7
  • 62
  • 78

0 Answers0