[QUESTION] ID changes when importing html or passing html in components prop in config.

@simplecommerce new release published

Anyone have any idea for this issue?

My issue happens when I use for example, bootstrap tabs, in order to make them work and load the right tab, it uses the ID, but since the ID is being regenerated when I load the editor with my components again (for editing), the tabs no longer work, since all ID are replaced and incremented.

Initial drag and drop.

<div tabs-container="" id="iqwah">
  <ul role="tablist" class="nav nav-tabs">
    <li class="nav-item">
      <a id="home-tab-3" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a>
    </li>
    <li class="nav-item">
      <a id="profile-tab-3" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a>
    </li>
    <li class="nav-item">
      <a id="contact-tab-3" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="home-3" aria-labelledby="home-tab">
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile-3" aria-labelledby="profile-tab">
    </div>
    <div role="tabpanel" class="tab-pane fade" id="contact-3" aria-labelledby="contact-tab">
    </div>
  </div>
</div>

Reload

<div tabs-container="" id="iqwah">
  <ul role="tablist" class="nav nav-tabs">
    <li class="nav-item">
      <a id="home-tab-3" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a>
    </li>
    <li class="nav-item">
      <a id="profile-tab-3" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a>
    </li>
    <li class="nav-item">
      <a id="contact-tab-3" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade show active" id="home-3" aria-labelledby="home-tab">
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile-3" aria-labelledby="profile-tab">
    </div>
    <div role="tabpanel" class="tab-pane fade" id="contact-3" aria-labelledby="contact-tab">
    </div>
  </div>
</div>

As you can see, my id's have changed.

same issue here.if i have use that id in code, id change when(id-2) reload template to grapejs (auto added "-2" to my id) , if i dont use that id in any part of my code, is fine, id wont change