BUG: can't drop img inside noscript tag

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

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?

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

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: 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

I agree to follow this project's Code of Conduct

Answers (1)

artf• December 9, 20211 reactions

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>`);

BUG: can't drop img inside noscript tag

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (1)

Related Questions and Answers

BUG: update() of custom types added to StyleManager is no more triggered when switching between some targets.

BUG: RangeError Maximum call stack size exceeded

BUG: editor.getSelected().toHTML() encodes inline javascript

BUG: XSS vulnerability in iframe attribute src

Paid Plugins That Match This Issue

Browse Plugin Categories