Issue #3272💬 AnsweredOpened February 17, 2021by ThomasPof0 reactions

Id are added to <img/> on double click on it

Quick answerby ThomasPof

The id seems to be added way before opening the asset manager :clone and run the projectadd an image on the index.html fileinspect this image element : there is the id in the dom element

Read full answer below ↓

Question

Version: 0.16.37 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? It's about the GrapesJS-mjml plugin : this syntax doesn't accept id's on elements. But AssetsManager add ids to image elements. I would like to not add id attributes to <img> tags Steps to reproduceclone and run the projectadd an image on the index.html fileopen the code viewer : no iddouble click on the imageclose the asset manageropen the code viewer : an id has been added to the tag You can find the GrapesJS-mjml issue here : https://github.com/artf/grapesjs-mjml/issues/179

Answers (4)

ThomasPofFebruary 17, 2021

The id seems to be added way before opening the asset manager :

  • clone and run the project
  • add an image on the index.html file
  • inspect this image element : there is the id in the dom element
ThomasPofFebruary 17, 2021

Found a clue in /Users/thomaspopoff/Sites/grapesjs/src/code_manager/model/HtmlGenerator.js line 10, the opts.cleanId is always undefined. I don't know how to set it to true to remove auto-generated ids

ThomasPofFebruary 17, 2021

Ok sorry for all my self-talk : there is an option opts.cleanId inside getHtml() function you can configure to remove auto-generated ids...

GJSBlockMay 17, 2026

Thanks for reporting this, @ThomasPof. The issue with id are added to <img/> on double click on it appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state. What to try: Ad...

Related Questions and Answers

Continue research with similar issue discussions.

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 →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.