Issue with instanceof HTMLElement

[beezital]

I am trying to integrate https://splidejs.com/ into a custom component type.
When initialising Splide it complains about not finding required elements. After debugging, it turns out that the elements I create in the components of the model are not instanceof HTMLElement when Splide is testing them.
I presume that the component's elements are not instanciated in the canvas' iframe but in the editor's window.
Any hints on how to fix this issue?

I am importing the Splide code in the canvas as described here https://grapesjs.com/docs/modules/Components-js.html#template-related.

canvas: {
        scripts: [
          'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.js'
        ],
        styles: [
          'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css',
        ],
      }

my custom component type looks like

    const splideComponentPlugin = editor => {
      editor.DomComponents.addType('cmp-splide', {
        isComponent: el => el.classList?.contains('splide'),
        model: {
          defaults: {
            tagName: 'div',
            name: 'Component Splide',
            draggable: true,
            attributes: {
              class: 'splide'
            },
            components: `<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>`,
            script: function () {
              console.log('cmp-splide: model.script: Splide', Splide)
              console.log('cmp-splide: this instanceof HTMLElement', this instanceof HTMLElement) // result is false
            }
          }
        },
        view: {
          tagName: 'div',
          init({ editor, el, model }) {
            console.log('cmp-splide: init: model', model)
          },
          onRender({ editor, el, model }) {
            console.log('cmp-splide: onRender: el', el)
          },
        }
      });

https://stackoverflow.com/questions/70637678/integrate-splidejs-into-grapesjs-failing-instanceof-htmlelement

[beezital]

I could work around the issue by patching splidejs as follows (did not submit a PR).
This allowed splidejs to be properly loaded by the script of my new component type.
However IMHO, the question remains regarding the where the elements are created (which window or iframe).
Any comments on this?

/**
 * Tests to see if the given TypeName appears anywhere
 * in the prototype chain of the given subject.
 * This is a lose version of the instanceof operator
 * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof)
 * required when checking the type of elements that cross window and iframe bouderies.
 * 
 * @param subject 
 * @param typeName 
 * @returns `true` if 
 */
function isInstanceOf(subject: any, typeName: string) {
  if (subject === null) {
    return false;
  }
  let p = subject.__proto__;
  while (p !== null) {
    if (p.constructor.name === typeName) {
      return true;
    }
    p = p.__proto__;
  }
  return false;
}

export function isHTMLElement( subject: unknown ): subject is HTMLElement {
  return isInstanceOf( subject, 'HTMLElement' );
}

export function isHTMLButtonElement( subject: unknown ): subject is HTMLButtonElement {
  return isInstanceOf( subject, 'HTMLButtonElement' );
}

[khanhleemtp]

I could work around the issue by patching splidejs as follows (did not submit a PR). This allowed splidejs to be properly loaded by the script of my new component type. However IMHO, the question remains regarding the where the elements are created (which window or iframe). Any comments on this?

/**
 * Tests to see if the given TypeName appears anywhere
 * in the prototype chain of the given subject.
 * This is a lose version of the instanceof operator
 * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof)
 * required when checking the type of elements that cross window and iframe bouderies.
 * 
 * @param subject 
 * @param typeName 
 * @returns `true` if 
 */
function isInstanceOf(subject: any, typeName: string) {
  if (subject === null) {
    return false;
  }
  let p = subject.__proto__;
  while (p !== null) {
    if (p.constructor.name === typeName) {
      return true;
    }
    p = p.__proto__;
  }
  return false;
}

export function isHTMLElement( subject: unknown ): subject is HTMLElement {
  return isInstanceOf( subject, 'HTMLElement' );
}

export function isHTMLButtonElement( subject: unknown ): subject is HTMLButtonElement {
  return isInstanceOf( subject, 'HTMLButtonElement' );
}

I don't know place code in the project

[beezital]

For the records, I have replaced Splide with Swiper.
Swiper does not rely on instanceof HTMLElement out of the box, which simplifies my development.

[mbeslin]

Stumbled to this issue... I'm making some custom widgets for WordPress Elementor, and I'm using SplideJS. I get this same error in Elementor editor but only in Chrome, Firefox is working correctly.