Grapesjs with plugin Ckeditor - Adding Custom Variables

Question

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!