import {ListPlugin} from'@aomao/engine'

export default class extends ListPlugin {
...
}

cardName = 'checkbox';

export default class extends ListPlugin {
...
    init(){
        super.init()
    }
}

isCurrent(node: NodeInterface) {
    //li node, must include the style of the `CUSTOMZIE_LI_CLASS` custom list, and the first child node under li should be a card, the card name corresponds to the cardName we set
    if (node.name ==='li')
        return (
            node.hasClass(this.editor.list.CUSTOMZIE_LI_CLASS) &&
            node.first()?.attributes(CARD_KEY) === this.cardName
        );
    //ul node should contain `CUSTOMZIE_UI_CLASS` custom list style. And there are also our custom styles
    return node.hasClass(this.editor.list.CUSTOMZIE_UI_CLASS) && node.hasClass('data-list-task');
}

queryState() {
    if (!isEngine(this.editor)) return false;
    return (
        this.editor.list.getPluginNameByNodes(this.editor.change.blocks) ===
        (this.constructor as PluginEntryType).pluginName
    );
}

//Non-engine
if (!isEngine(this.editor)) return;
const { change, list, block } = this.editor;
//First cut the list, <ul><li /><anchor /><li /><focus /><li /></ul> -> <ul><li /></ul><anchor / ><ul><li /><focus /></ul><ul><li /></ul>
list.split();
//Get the current cursor
const range = change.range.get();
//Get all current block nodes after the season
const activeBlocks = block.findBlocks(range);
if (activeBlocks) {
	//Create a marker node at the cursor
	const selection = range.createSelection();
	//Determine whether it belongs to the custom list node of the current plugin type
	if (list.isSpecifiedType(activeBlocks, 'ul', 'checkbox')) {
		//Remove package
		list.unwrap(activeBlocks);
	} else {
		//Convert all currently activated block nodes into a custom list
		const listBlocks = list.toCustomize(
			activeBlocks,
			'checkbox',
			//The value of the checkbox card is determined by the value when the checkbox is defined. For example, whether checked is checked
			{
				checked: boolean,
			},
		) as Array<NodeInterface>;
		//After the conversion is completed, add our custom styles in a loop
		listBlocks.forEach((list) => {
			if (this.editor.node.isList(list)) list.addClass('data-list-task');
		});
	}
	//Remove the mark and restore the cursor
	selection.move();
	//Reselect the new cursor position
	change.range.select(range);
	//Merge adjacent and identical list nodes, if any
	list.merge();
}