Component Scripts Not Working as Expected In Firefox and Safari

[RakulAgn]

editor.DomComponents.addType(popupCoupon, {
    isComponent: el => el.tagName === 'p',
    model: {
      defaults: {
        tagName: 'p',
        droppable: false,
        style: {
          padding: '12px 12px 12px 12px',
          margin: '0px',
          'font-size': '20px',
          'text-align': 'center',
        },
        highlightable: false,
        attributes: {
          name: popupCoupon,
          id: popupCoupon,
          class: `${popupCouponClass} text-font-style text-font-family text-font-size text-alignment text-spacing text-font-color text-line-height`,
        },
        stylable: [
          'width',
          'height',
          'color',
          'background-color',
          'text-align',
          'font-family',
          'font-size',
          'font-weight',
          'padding',
          'border-radius',
          'border-width',
          'border-color',
          'border-style',
        ],
        traits: [
          {
            type: couponCodeTrait,
            name: couponCodeTrait,
            label: 'Coupon Code',
          },
        ],
        script: function () {
          this.addEventListener('click', () => {
            const textToCopy = this.textContent;

            navigator.clipboard.writeText(textToCopy).then(
              function () {
                const toast = document.createElement('div');
                toast.textContent = 'Coupon code copied to clipboard!';
                toast.style.position = 'fixed';
                toast.style.bottom = '20px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'black';
                toast.style.color = 'white';
                toast.style.padding = '10px';
                toast.style.borderRadius = '5px';
                toast.style.zIndex = '10000000';
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.5s ease';
                document.body.appendChild(toast);

                setTimeout(() => {
                  toast.style.opacity = '1';
                }, 10);

                setTimeout(() => {
                  toast.style.opacity = '0';
                  setTimeout(() => {
                    document.body.removeChild(toast);
                  }, 500);
                }, 3000);
              },
              function (err) {
                console.error('Could not copy text: ', err);
              },
            );
          });
        },
      },
    },
  });

So this is Code Generator Once Getting from JS Function

setTimeout(()=>{
        (()=>{
        var items = shadowRoot.querySelectorAll('#coupon-2');
          for (var i = 0, len = items.length; i < len; i++) {
            (function(){
this.addEventListener("click",()=>{navigator.clipboard.writeText(this.getInnerHTML()).then(function(){const e=document.createElement("div");e.textContent="Coupon code copied to clipboard!",e.style.position="fixed",e.style.bottom="20px",e.style.left="50%",e.style.transform="translateX(-50%)",e.style.backgroundColor="black",e.style.color="white",e.style.padding="10px",e.style.borderRadius="5px",e.style.zIndex="10000000",e.style.opacity="0",e.style.transition="opacity 0.5s ease",shadowRoot.appendChild(e),setTimeout(()=>{e.style.opacity="1"},10),setTimeout(()=>{e.style.opacity="0",setTimeout(()=>{shadowRoot.removeChild(e)},500)},3e3)},function(e){console.error("Could not copy text: ",e)})})
}.bind(items[i]))();
          }
        })()
        },0)

and the Error is Occured

Uncaught TypeError: this.getInnerHTML is not a function

[artf]

I'm not able to reproduce with the same component code and it's not clear from where this.getInnerHTML() is coming (it should be textToCopy there). Are you able to create a reproducible demo?

[RakulAgn]

Hey @artf I have Setup a Reproducible Demo Here is link below
https://codesandbox.io/p/sandbox/grapesjs-7n3kvp

[artf]

Try to read carefully this section, you can't use this.getInnerHTML() or anything editor-related inside the script. You have to use script-props if you need something from the component itself.