TipTap Config

tiptap-config.ts

import { defineTipTapPlugin } from '@typo3/tiptap';

defineTipTapPlugin({
    styleSheets: [
        `path-to-css-file.css`
    ],
    styles: [
        {
            name: 'Red Button',
            allowedTags: ['button', 'a'],
            attributes: {
                'class': 'btn btn-danger',
                'data-example-attribute': 'exampleValue',
            },
        },
    ],
    commands: [
        {
            id: 'openCookieModal',
            label: 'Insert Cookie Modal Button',
            iconIdentifier: 'icon-backend-cookie', // defined with TYPO3 icons API
            sortAfter: 'insertLink',
            // This is the action that will be executed when the command button is triggered
            action: ({ editor }) => {
                const buttonHtml = `
                    <button 
                        class="btn btn-danger" 
                        data-example-attribute="exampleValue"
                    >
                        Open Cookie Modal
                    </button>
                `;

                editor.chain().focus().insertContent(buttonHtml).run();
            },
        },
    ],
})