search

kaoz70 / grapesjs-blocks-bootstrap4

GrapesJS Bootstrap v4 Blocks Plugin
BSD 3-Clause "New" or "Revised" License
153 stars 106 forks source link

Tabs block not being detected properly. #12

Closed simplecommerce closed 4 years ago

simplecommerce commented 5 years ago

Hi,

I am doing some tests with the Tabs block and I noticed an issue.

When I drag and drop it in the canvas, this is the code I see when I inspect it.

<div data-gjs-type="tabs" data-highlightable="1" id="ivkdl" class="gjs-comp-selected">
   <ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="i145a">
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i5mso"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iv1zw"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="ie8bw"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
   </ul>
   <div data-gjs-type="tabs-panes" data-highlightable="1" class="tab-content" id="idfrp">
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

When I call editor.getHtml(), I get the following: 

<div id="ivkdl">
   <ul role="tablist" class="nav nav-tabs">
      <li class="nav-item"><a id="home-tab" 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" 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" 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 id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

When I pass that in the value configuration on my editor and wait for it to load.

I get the following code when I inspect the canvas again: 

<div data-gjs-type="div" data-highlightable="1" id="ivkdl">
   <ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="insrq">
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iofw8"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="il57x"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
      <li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i0w4h"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
   </ul>
   <div data-gjs-type="div" data-highlightable="1" class="tab-content" id="iqv49">
      <div data-gjs-type="div" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
      <div data-gjs-type="div" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
      <div data-gjs-type="div" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
   </div>
</div>

As you can see upon inspection, we seem to have lost the data-gjs-type tabs and tabs-panes and tabs-tabs-panes, they all have converted to div.

This causes an issue because when I want to edit the tabs again, I can no longer click on the tab to display the content for each tab itself.

I am not sure if you can reproduce this on your end?

kaoz70 commented 5 years ago

Hey! Let me check that out, I was going to resolve some tab issues today anyway.

simplecommerce commented 5 years ago

I tried to look at it and did some tests, but could not figure out why some of the components could not be detected properly.

kaoz70 commented 5 years ago

Thanks! Sorry I haven't had time to look into this, I have 3 deadlines to meet next week. I may be able to check it out this weekend.

simplecommerce commented 5 years ago

Hi, for the moment, I created a copy of the code manually, and it seems to work after I define each component with the isComponent function, not really sure why the one in the plugin isn't working.

I found another issue which isn't really related, but I am hoping they will answer in the grapesjs branch.

It's the ID attribute, it keeps regenerating when loading components, importing, etc. Which causes issues because the tabs in bootstrap uses ID to be clickable, so when we reload the components by using the components props in the editor on the initial run, it breaks the tabs.

Did you ever encounter this and fixed it somehow?

kaoz70 commented 5 years ago

I havent seen this, but I really havent used the tabs. Let me check this out also while I'm at it.

simplecommerce commented 5 years ago

I saw your post in GrapesJS, hopefully we will get an answer.

Here is my post in regards to the ID changing, I was able to patch mine, but I hope they will give a better way to handle it.

https://github.com/artf/grapesjs/issues/1875

kaoz70 commented 5 years ago

Hello @simplecommerce, can you please check if the new version fixes this issue?

simplecommerce commented 5 years ago

Hi @kaoz70, sorry I haven't had time to test it yet, when it wasn't working properly, I basically redid my own version using similar code, but I will try to find some time this week-end to test it for sure, thanks for the follow-up! :)

kaoz70 commented 4 years ago

I'm closing this issue for now, if you see that the issue persists feel free to reopen it