Lightbox Component

Hi @artf I am trying to make a component lightbox as the same as the grape drop. I am not able to update the src of the image Could you please help me with that This is the code that I've written so far

Lightbox block

  bm.add('lightbox', {
    label: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3V7.3C6 6.6 6.6 6 7.3 6h9.4c.7 0 1.3.6 1.3 1.3v9.4zM9.5 13L7 16h10l-3.2-4-2.5 3-1.8-2zm11 7.6v-5H23v5c0 1.3-1.1 2.4-2.4 2.4h-5v-2.4h5zm0-19.6C22 1 23 2.1 23 3.4v5h-2.4v-5h-5V1h5zm-17 2.4v5H1v-5C1 2.1 2.1 1 3.4 1h5v2.4h-5zm0 12.3v4.9h4.8V23H3.4A2.5 2.5 0 011 20.6v-5h2.4z"></path></svg>
    <div class="gjs-block-label">Lightbox</div>`,
    activeOnRender: true,
    droppable: true,
    category: 'Selection',
    content: {
      type: 'lightbox',
      attributes: {
        'data-type': 'image',
        'data-zoomable': 'true' ,
        'class': 'gpd-lightbox',
      },
    },
  });

Component- :

//Adding Lightbox Component
  domc.addType('lightbox', {
    extend: 'default',
    model: {
      defaults: function () {
        return {
          name: 'Lightbox',
          attribues: {
            'data-type': 'image'
          },
          type: 'lightbox',
          tagName: 'a',
          void: false,
          droppable: true,
          content: `<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+"/>`,
          script: `
                var t=this,e=function(){
                  var e='.gpd-lightbox';
                  if(!t._nolb&&!window.__glb){
                    for(var n=document.querySelectorAll(e),r=0;r<n.length;r++){
                      var i=n[r];
                      i.getAttribute('data-gallery')||i.setAttribute('data-gallery',i.id)}
                    window.__glb=window.GLightbox({
                      zoomable:!1,selector:e}
                    )}
                };
                if(window.GLightbox)e();
                else{
                  var n='https://unpkg.com/[email protected]/dist/css/glightbox.min.css';
                  if(document.querySelector("link[href=\"".concat(n,"\"]")))return;
                  var r=document.createElement('link');
                  r.href=n,r.rel='stylesheet',document.head.appendChild(r);
                  var i=document.createElement('script');
                  i.src='https://unpkg.com/[email protected]/dist/js/glightbox.min.js',i.onload=e,document.head.appendChild(i)}
              `
        }
      }
    },
    view: {
      init () {
        this.listenTo(this.model, 'change:src', this.updateSrc)
      },
      events: {
        dblclick: 'onActive'
      },
      onActive () {
        editor.runCommand('open-assets', {
          target: this.model,
          types: ['image'],
          accept: 'image/*'
        })
      },
      updateSrc() {
        // How do i update the src here
      }
    }
  });