Vizy Custom Bullet List

config.json

{
    "buttons": ["custom-bullet-list"],
    "plugins": ["custom-bullet-list"]
}

custom-bullet-list.js

const inputRegex = /^\s*([-+*])\s$/;

document.addEventListener('onVizyConfigReady', (e) => {
    const { Mark, Node, mergeAttributes, wrappingInputRule } = Craft.Vizy.Config.tiptap.core;

    const CustomBulletList = Node.create({
        name: 'customBulletList',
        group: 'block list',

        addOptions() {
            return {
                itemTypeName: 'listItem',
                HTMLAttributes: {
                    class: ['my-bullet-list']
                },
                keepMarks: false,
                keepAttributes: false,
            }
        },

        content() {
            return `${this.options.itemTypeName}+`
        },

        parseHTML() {
            return [
                {
                    tag: 'ul',
                },
            ]
        },

        renderHTML({ HTMLAttributes }) {
        return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
        },

        addCommands() {
            return {
                toggleCustomBulletList: () => ({ commands, chain }) => {
                    if (this.options.keepAttributes) {
                        return chain().toggleList(this.name, this.options.itemTypeName, this.options.keepMarks).updateAttributes(ListItemName, this.editor.getAttributes(TextStyleName)).run()
                    }

                    return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
                },
            }
        },

        addKeyboardShortcuts() {
            return {
                'Mod-Shift-8': () => this.editor.commands.toggleCustomBulletList(),
            }
        },

        addInputRules() {
            let inputRule = wrappingInputRule({
                find: inputRegex,
                type: this.type,
            })

            if (this.options.keepMarks || this.options.keepAttributes) {
                inputRule = wrappingInputRule({
                    find: inputRegex,
                    type: this.type,
                    keepMarks: this.options.keepMarks,
                    keepAttributes: this.options.keepAttributes,
                    getAttributes: () => { return this.editor.getAttributes(TextStyleName) },
                    editor: this.editor,
                })
            }

            return [
                inputRule,
            ]
        },
    });

    Craft.Vizy.Config.registerExtensions((extensions) => {
        return [
            CustomBulletList,
        ];
    });

    Craft.Vizy.Config.registerButtons((buttons) => {
        return [{
            name: 'custom-bullet-list',
            svg: 'list-ul',
            title: Craft.t('vizy', 'Custom Bullet List'),
            action: (editor) => { return editor.chain().focus().toggleCustomBulletList().run(); },
            isActive: (editor) => { return editor.isActive('customBulletList'); },
        }];
    });
});

CustomBulletList.php

<?php
namespace modules\vizymodule\nodes;

use verbb\vizy\nodes\BulletList;

class CustomBulletList extends BulletList
{
    // Properties
    // =========================================================================

    public static ?string $type = 'customBulletList';

}

CustomBulletListAsset.php

<?php
namespace modules\vizymodule\assets;

use craft\web\AssetBundle;
use craft\web\assets\cp\CpAsset;
use verbb\vizy\web\assets\field\VizyAsset;

class CustomBulletListAsset extends AssetBundle
{
    // Public Methods
    // =========================================================================

    public function init(): void
    {
        $this->sourcePath = '@modules/vizymodule/assets';

        $this->depends = [
            CpAsset::class,
            VizyAsset::class,
        ];

        $this->js = [
            'js/custom-bullet-list.js',
        ];

        parent::init();
    }
}

VizyModule.php

<?php
namespace modules\vizymodule;

use yii\base\Event;

use verbb\vizy\services\Nodes;

use verbb\vizy\events\RegisterPluginEvent;
use verbb\vizy\fields\VizyField;
use verbb\vizy\base\Plugin as VizyPlugin;

use verbb\vizy\events\RegisterNodesEvent;

class VizyModule extends Module
{
    // Public Methods
    // =========================================================================

    public function init()
    {
        parent::init();

        Event::on(VizyField::class, VizyField::EVENT_REGISTER_PLUGINS, function(RegisterPluginEvent $event) {
            $event->plugins[] = new VizyPlugin([
                'handle' => 'custom-bullet-list',
                'assetBundle' => CustomBulletListAsset::class,
            ]);
        });

        Event::on(Nodes::class, Nodes::EVENT_REGISTER_NODES, function(RegisterNodesEvent $event) {
            $event->nodes[] = CustomBulletList::class;
        });
    }

}