GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.38k stars 4.05k forks source link

[BUG] SVG Element is not a real SVGElement #2214

Closed Firefox2005 closed 2 years ago

Firefox2005 commented 5 years ago

Behavior I use an external Javascript code that replaces some SVG elements dynamically based on their attributes. The Javascript code first checks for the type of the element to validate, that it is an SVGElement like this:

document.querySelector('#someId') instanceof SVGElement

The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement.

How I create the SVG Element I tried different things but ended up using a Plugin.

component.js

domc.addType('myType', { 
    isComponent: function(el) {
      if(el.tagName == 'svg' && el.classList && el.classList.contains('someClass'))
        return {type: 'myType'};
    },
    extend: 'svg',
    model: {
      defaults: {
        type: 'svg',
        tagName: 'svg',
        name: 'SomeName',
        traits: [...],
        attributes: {
          class:'someClass',
          ...
        },
        script: function () {
          console.log(document.querySelector('.someClass'));
          console.log(document.querySelector('.someClass') instanceof SVGElement)
          ...
        },
      }
    }
});

blocks.js

bm.add('myBlock', {
    label: 'someLabel',
    category: 'someCategory',
    name: 'blockName',
    content: '<svg class="someClass"\
                ...\
              </svg>'
});

Additional Information According to this: https://stackoverflow.com/questions/24174975/document-createelementsvg-instanceof-svgelement-is-false SVG elements are special, but from what I can see in src/dom_components/view/ComponentSvgView.js I assume, that they are created correctly.

Of course there is nothing wrong with the generated HTML-Code when using it, as browsers will then use the correct SVG - it is just not showing up when editing in GrapesJS.

artf commented 5 years ago

The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement.

Weird, seems like a Chromium issue...