search

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.36k stars 4.05k forks source link

BUG: can't drop img inside noscript tag #3972

Closed ronaldohoch closed 2 years ago

ronaldohoch commented 2 years ago

GrapesJS version

What browser are you using?

Brave Versão 1.32.106 Chromium: 96.0.4664.45 (Versão oficial) 64 bits

Reproducible demo link

https://jsfiddle.net/960huLz5/

Describe the bug

How to reproduce the bug?

  1. Open grapesjs
  2. run: editor.addComponents('<noscript><img src=""></noscript>');
  3. Opens the export modal
  4. Check that image is outside noscript tag 4.1. image

What is the expected behavior? Image should stay inside noscript's tag

What is the current behavior? Image don't stay inside noscript tag

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// the code in jsfiddle
const editor = grapesjs.init({
    container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic']
});

editor.addComponents(`<noscript><img src=""></noscript>`);

Here what the parseHtml returns: image It's used in facebook pixel script:

<script id="facebookPixelScript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
            ga('create', '${FacebookPixel["data-value"]}', 'auto');
            ga('send', 'pageview');</script>
            <noscript><img height='1' width='1' style='display:none' src='https://www.facebook.com/tr?id=${FacebookPixel["data-value"]}&ev=PageView&noscript=1' /></noscript>

And i can't find a way to update the component to accept to be droppabble inside noscript tag https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/ComponentImage.js

Code of Conduct

artf commented 2 years ago

Hi @ronaldohoch thanks for the report. What you're saying is true, but unfortunately, this is the parsing result of the native HTML DomParser, so I don't see any proper way to fix it.

const parser = new DOMParser();
console.log(parser.parseFromString(`<noscript><img/></noscript>`, 'text/html'));
// You will see how it'll put <noscript> inside the <head> and <img> inside the <body>

The only workaround for cases like this (importing an HTML string containing tags like noscript) is to force the parser to see the content inside the body.

editor.addComponents(`<body><noscript><img /></noscript></body>`);