Grapesjs with plugin Ckeditor - Adding Custom Variables

[nathan-da-silva]

Here is my current code for GrapesJS:

var editor = grapesjs.init({
    container : '#gjs',
    fromElement: true,
    style: '.txt-red{color: red}',
    plugins: ['grapesjs-preset-newsletter', 'grapesjs-plugin-ckeditor'],
    storageManager: false,
    pluginsOpts: {
      'grapesjs-preset-newsletter': {
        
      },
      'grapesjs-plugin-ckeditor': {
        onToolbar: el => {
          el.style.minWidth = '350px';
        },
        options: {
          startupFocus: true,
          extraAllowedContent: '*(*);*{*}',
          allowedContent: true,
          enterMode: 2,
          extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
          toolbar: [
            { name: 'styles', items: ['Font', 'FontSize' ] },
            ['Bold', 'Italic', 'Underline', 'Strike'],
            {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
            {name: 'links', items: ['Link', 'Unlink']},
            {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
          ],
        }
      }        
    }     
});

What I want to be able to do is extend the Ckeditor and add a custom dropdown to select PHP variables. So for example, if select an option added called 'Booking Date', it will input a placeholder like {booking_date} but the code will insert something like <?php echo $booking_date; ?>

I already know how to do this with editor.BlockManager but the issue with this is that you can't insert blocks within text editor blocks.

Any ideas?

Thanks!