Grapesjs adds "-2" to ids in the html with localStorage

Question

I tried to reproduce this on your demo and could not, yet I am having the strangest issue. I was hoping you could point me in the right direction when debugging this.

As soon as I store the html in localStorage and refresh the page (you will see a short pause in the screencast), grapesjs magically adds "-2" to every id in the html. See screencast below:

Can you think where in your code this might be happening and why? How do I avoid this?

Thanks @artf

artf · Accepted Answer

It should only happen when you append an HTML that contains an already defined ID, so the editor increments it to avoid conflicts. Are you sure you don't append the same content twice?!

In any case, the function which does the check is here: https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L1262

Which is used here (when you append new content): https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Components.js#L51

artf · Answer

Do you use the latest version?

kickbk · Answer

@artf, yes I do. 0.15.9, although it's the same with prior versions. I tried to remove all the plugins to keep it all very clean, but still getting this as soon as localStorage is generated. Any ideas why or where this may get generated so I can debug?

Grapesjs adds "-2" to ids in the html with localStorage

Question

Answers (3)

Related Questions and Answers

RTE misplaced when opened right after dropping `activeOnRender` component

XSS Vulnerability in Live Preview

Page refresh preventing after click on import

When add a similar page just components ids will be changed

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor

Embed GrapesJS in Your SaaS: A Weekend Guide

Browse Plugin Categories