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