How to make a context menu in a custom ckeditor5 widget?

Question

I made a inline widget similar a placeholder (ckeditor4), but now I want to render a dropdown when the widget is selected to show options values to replace the placeholder. I trying use BalloonPanelView but no success until now, someone have a idea about how to make it?

this.editor.editing.view.document.on('click', (evt, data) => {
    evt.stop();
    const element = data.target;
    if (element && element.hasClass('placeholder')) {
        if (!element.getAttribute('data-is-fixed')) {
            const balloonPanelView = new BalloonPanelView();
            balloonPanelView.render();
            ['option1', 'option2', 'option3'].forEach((value) => {
                const view = new View();
                view.set({
                    label: value,
                    withText: true
                });
                balloonPanelView.content.add(view);
            });
            balloonPanelView.pin({
                target: element
            });
        }
    }
});

Answer 1

I found the solution using ContextualBalloon class:

import ContextualBalloon from "@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon";

// Define ballon
const balloon = editor.plugins.get(ContextualBalloon);

const placeholderOptions = // Here I defined list with buttons '<li><button></li>' 

// Finnaly render ballon
balloon.add({
    view: placeholderOptions,
    singleViewMode: true,
    position: {
         target: data.domTarget
    }
});