Insert custom element in CKEditor5

Question

In CKEditor5 I am creating a plugin to insert a span element to show a tooltip. The idea is to show a tooltip with a (foot)note inside of it while the element itself will display an incremental number. In CKEditor4 I made something like this with:

CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) {
    return {
        title: 'Footnote Properties',
        minWidth: 400,
        minHeight: 100,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'content',
                        label: 'Content of footnote',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;

            var footnote = editor.document.createElement( 'span' );
            footnote.setAttribute('class', 'footnote');
            footnote.setAttribute('data-toggle', 'tooltip');
            footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
            footnote.setText('[FN]');

            editor.insertElement( footnote );
        }
    };
});

[FN] would be transformed in an incremental number.

Now I try to make this plugin with in CKEditor5, but with no success. There are two issues I run in to. Fist, I can't manage to insert the element inside the text. Second, when I want to use the attribute data-toggle this doesn't work because of the - syntax. This is my current code:

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import pilcrowIcon from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class Footnote extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'footnote', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert footnote',
                icon: pilcrowIcon,
                tooltip: true
            } );

            view.on( 'execute', () => {
                const source = prompt( 'Footnote' );

                editor.model.schema.register( 'span', { allowAttributes: ['class', 'data-toggle', 'title'] } );

                editor.model.change( writer => {

                const footnoteElement = writer.createElement( 'span', {
                    class: 'footnote',
                    // data-toggle: 'tooltip',
                    title: source
                });

                editor.model.insertContent( footnoteElement, editor.model.document.selection );
            } );
        } );

            return view;
        } );
    }
}

How can I make sure my span element is inserted and also contains data-toggle="tooltip"?

Answer 1

For anyone who comes across this, there is a good description of how to set up inline elements in the model and view and then map between them here - How to add "target" attribute to `a` tag in ckeditor5?

Based on my experience, you will also need to set up Javascript code for a command that is run when a button is pressed. The command will insert the new information into the model, then this mapping code will convert it to the view (HTML) for display.