Form dropdown

Code

<div id="entry-dropdown-with-form"></div>

const app = Redactor('#entry-dropdown-with-form', {
    plugins: ['dropdownForm']
});

// Plugin example
class DropdownFormPlugin {
    static defaultLang = {
        en: {
            dropdownForm: {
                title: 'Callout',
                placeholder: 'Callout text...'
            }
        }
    };

    constructor(app) {
        this.app = app;
    }

    start() {
        this.app.toolbar.add('dropdownForm', {
            title: '## dropdownForm.title ##',
            icon: '<svg ...>',
            command: 'dropdownForm.open',
            position: { after: 'add' }
        });
    }

    open(params = {}, { button, el } = {}) {
        const form = this.app.form.create({
            name: 'dropdownForm',
            command: 'dropdownForm.insert',
            items: {
                text: {
                    type: 'input',
                    placeholder: '## dropdownForm.placeholder ##'
                }
            }
        });

        this.app.dropdown.create('dropdownForm', { form, focus: 'text', width: '260px' });
        this.app.dropdown.open(button || el);
    }

    insert(data = {}) {
        this.app.dropdown.close();

        const text = String(data.text || '').trim();
        if (!text) return;

        const inserter = this.app.getService('inserter');
        inserter.insertHtml(`<p class="callout">${text}</p>`, { caret: 'end' });
    }
}

Redactor.addPlugin('dropdownForm', DropdownFormPlugin);