Customized component not rendering as desired

[asdiasx]

Hello everyone,
I'm having problems creating a component (image with link).

When I drag the component from blocks to the canvas, I can hover over and select the new component type. However, after a page refresh, the inner image gains a selectable state, preventing me from clicking on the customized component.

I've tried various approaches, including setting selectable and hoverable to false on view (using onRender). Despite these attempts, the inner image remains selectable.

I'm seeking guidance on resolving this issue. Any hints or solutions would be greatly appreciated.

My code:

export default function addImageLink(editor) {
  const comps = editor.DomComponents;

  comps.addType('img-link', {
    isComponent: (el) => {
      return el.classList.contains('image-link');
    },
    model: {
      defaults: {
        tagName: 'a',
        attributes: {
          style: 'display: inline-block',
        },
        components: `<img data-gjs-selectable="false" data-gjs-hoverable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+">`,
        resizeable: true,
      },
    },
    view: {
      onRender({ el }) {
        const imageView = el.querySelector('img');
        imageView.setAttribute('data-gjs-hoverable', 'false');
        imageView.setAttribute('data-gjs-selectable', 'false');
        el.appendChild(imageView);
      },
    },
  });

  const bm = editor.Blocks;
  bm.add('image-link', {
    label: 'Imagem com link',
    content: { type: 'img-link', attributes: { class: 'image-link' } },
    activate: true,
    attributes: { id: 'blk_imgLink', class: 'fa fa-picture-o' },
  });
}

[artf]

However, after a page refresh, the inner image gains a selectable state, preventing me from clicking on the customized component.

You should provide a reproducible demo to better understand what is happening but the only reasonable scenario for that behavior might be because you're trying to load the output HTML instead of the JSON, which would be wrong.

You can remove your onRender method as it makes no sense, data-gjs-* attributes are only useful for the HTML parser.

[asdiasx]

Hi Artf, thanks for your response!
You're correct about the potential project data mishandling in the code. To address this, we've temporarily injected the missing data back into the img tag during the isComponent process.
While this isn't the ideal fix, it provides us with time to strategize a more suitable approach for the legacy project.

Code sample:

    isComponent: (el) => {
      if (el.classList && el.classList.contains('image-link')) {
        el.style.display = 'inline-block';

        const img = el.querySelector('img')
        if (img) {
          img.style.display = 'block';
          img.style.cursor = 'pointer';
          img.setAttribute('data-gjs-hoverable', 'false');
          img.setAttribute('data-gjs-selectable', 'false');
        }
        return { type: 'img-link', el: el, style: el.style };
      }

Although this workaround is effective for now, we're aware it's not the best solution.

Your insights are invaluable, and I'm grateful for your input!

Best regards!