'Custom list blot not work IndentClass (quilljs)
I create custom blot, enter image description here but for some reason the creation of child items does not work when you press tab at the list item. IndentClass does not work and I do not understand how to connect it. Path IndentClass - quill\formats\indent
// eslint-disable-next-line no-unused-vars
import Quill, { ListItem } from 'quill';
let Block = Quill.import('blots/block');
let Container = Quill.import('blots/container');
class NumberListContainer extends Container {}
NumberListContainer.blotName = 'c-number-list-container';
NumberListContainer.tagName = 'OL';
class NumberListItem extends Block {
static create(value) {
const node = super.create();
console.log(typeof value, value, 'value');
node.setAttribute('data-list', value);
return node;
}
static formats(domNode) {
return domNode.getAttribute('data-list') || undefined;
}
static register() {
Quill.register(NumberListContainer);
}
constructor(scroll, domNode) {
console.log( 'value111');
super(scroll, domNode);
const ui = domNode.ownerDocument.createElement('span');
// eslint-disable-next-line no-unused-vars
const listEventHandler = e => {
if (!scroll.isEnabled()) return;
const format = this.statics.formats(domNode, scroll);
if (format === 'checked') {
this.format('list', 'unchecked');
e.preventDefault();
} else if (format === 'unchecked') {
this.format('list', 'checked');
e.preventDefault();
}
};
ui.addEventListener('mousedown', listEventHandler);
ui.addEventListener('touchstart', listEventHandler);
this.attachUI(ui);
}
format(name, value) {
if (name === this.statics.blotName && value) {
this.domNode.setAttribute('data-list', value);
} else {
super.format(name, value);
}
}
}
NumberListItem.blotName = 'c-number-list';
NumberListItem.tagName = 'LI';
NumberListItem.className = 'c-number-list';
NumberListContainer.allowedChildren = [NumberListItem];
NumberListItem.requiredContainer = NumberListContainer;
Quill.register(NumberListContainer);
Quill.register(NumberListItem);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
