Ckeditor5

[gellweiler]

I used your code (thanks) as a base to write a quick and dirty Ckeditor5 plugin. Here is the code for reference:

/* eslint-disable  @typescript-eslint/no-explicit-any */
/**
 * A plugin to enable placeholder tokens to be inserted into the CKEditor message.
 */

import {
    Plugin,
    Collection,
    createDropdown,
    addListToDropdown
} from 'ckeditor5';
import { extend } from 'jquery';

import {ListDropdownButtonDefinition, ListDropdownItemDefinition} from "@ckeditor/ckeditor5-ui/src/dropdown/utils";

interface PlaceholderConfig {
    format: string;
    placeholders: string[];
    labelStyle: string;
    label: string;
}

class PlaceholderSelect extends Plugin {
    public static get pluginName() {
        return 'Timestamp' as const;
    }

    public init(): void {
        const editor = this.editor;

        //  array of placeholders to choose from that'll be inserted into the editor
        const placeholders : string[][] = [];

        // init the default config - empty placeholders
        const defaultConfig : PlaceholderConfig = {
            format: "[[%placeholder%]]",
            placeholders: [],
            labelStyle: '',
            label: "Placeholder"
        };

        // merge defaults with the passed in items
        const config : PlaceholderConfig = extend(
            defaultConfig,
            editor.config.get('placeholder_select') || {},
            true
        );

        // run through an create the set of items to use
        for (let i = 0; i < config.placeholders.length; i++) {
            // get our potentially custom placeholder format
            const placeholder = config.format.replace(
                "%placeholder%",
                config.placeholders[i]
            );
            placeholders.push([
                placeholder,
                config.placeholders[i],
                config.placeholders[i],
            ]);
        }

        // add the menu to the editor
        editor.ui.componentFactory.add("placeholderSelect", () => {
            const dropdown = createDropdown( undefined );

            dropdown.buttonView.labelStyle = config.labelStyle;

            dropdown.buttonView.set({
                label: config.label,
                withText: true
            });

            const items: Collection<ListDropdownItemDefinition> = new Collection();
            for (const placeholder of placeholders) {
                console.log("placeholder", placeholder);
                const button: ListDropdownButtonDefinition = {
                    type: 'button',
                    model:{
                        id: placeholder[0],
                        withText: true,
                        label: placeholder[1]
                    }
                } as unknown as ListDropdownButtonDefinition; // see: https://github.com/ckeditor/ckeditor5/issues/8556#issuecomment-2267015058
                items.add(button);
            }
            addListToDropdown(dropdown, items);

            dropdown.on('execute', (eventInfo: any) => {
                const { id, label } = eventInfo.source;

                editor.fire("saveSnapshot");
                editor.execute( 'insertText', { text: id } );
                editor.fire("saveSnapshot");
            });

            return dropdown;
        });
    }
}

export default PlaceholderSelect;