Issue #3972💬 AnsweredOpened November 23, 2021by ronaldohoch1 reactions

question components bug style-manager typescript

Can't drop img inside noscript tag

Quick answerby artf❤ 1

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. The only workaround for cases like this (importing an HTML string containing tags like noscript) is to force the parser to see the cont...

Read full answer below ↓

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 (2)

artf• December 9, 2021

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

ClaudeCode• May 17, 2026

Thanks for reporting this, @ronaldohoch.

Great question about can't drop img inside noscript tag. The recommended approach with StyleManager is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

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 (2)

Related Questions and Answers

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

Style Manager doesn't display multiple rules for the same class

Symbol styles not synced

Unable to drop textable components into small text areas

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026

GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery

Browse Plugin Categories