kaoz70/grapesjs-blocks-bootstrap4

GrapesJS Bootstrap v4 Blocks Plugin

grapesjs-blocks-bootstrap4's Issues

Need better icons for blocks

Fontawesome is used for now, since it's currently in the GJS core. But it's hard to correctly represent Bootstrap components with fontawesome icons. We need a better solution.

c is not defined in grapesjs-blocks-bootstrap4.min.js

Changing class_select traits triggers content trait, Setting Button Content the value of said trait

Add the Button to any page and then from the Trait Manager change the Background Color (or any class select trait), this will change the background color, but it will also change the Button Content to be the value of the trait.

So if you change the Background Color for a button it now has the text bg-danger rather than what it was before.

This can be replicated with the base project by just placing the default button.

How to add option element in select field.

Hi Miguel,

Stupid question, how do you add option elements in the select field of the forms?

I looked and I noticed that it seems to use the same traits as the forms package from grapesjs plugin, but I still don't get it.

I noticed that when dropping the select element it adds a default option.

<select class="form-control" id="i54ef"><option value="">- Select option -</option><option value="1">Option 1</option></select>

Like this, but when I click on the select element in the canvas, I don't see the options appear in the options trait.

Thanks!

No unique class for BS4 blocks?

Adopted the GJS Bootstrap 4 plugin and noticed that the elements aren't dropped into the canvas with a Class unlesss it's predefined. The Container seems to have no problems using the cid provided by grapesjs, but elements like the Header and Paragraph section are lacking the use of the cid generated by grapesjs.

Ex of container:

Ex of Header without Dynamic Class:

Problem with css attribute

Hi, im try to set LG-WIDTH for column but HTML code contains bug after

<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div class="container"><div class="row"><div ="col-lg-8" class="col col-lg-8"></div></div></div>

Problem is ="col-lg-8"

Impossible to insert row inside container

I can't figure out how to properly insert a row inside container, maybe because the height is 0 when container is empty.
And the same apply with columns.

Tabs block not being detected properly.

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?

Uncaught ReferenceError: grapesjs is not defined

get this error when I use it with webpack

`
import GrapesJS from 'grapesjs';
import pluginBootstrap4 from 'grapesjs-blocks-bootstrap4
GrapesJS.init({
...
plugins: [ pluginBootstrap4],
...
})

`

and got below error when run it
grapesjs-blocks-bootstrap4.min.js:11 Uncaught ReferenceError: grapesjs is not defined

Issue with react-dom and grapesjs-blocks-bootstrap4

I'm reaching out to report an issue I'm encountering while integrating the grapesjs-blocks-bootstrap4 library into my React application, specifically with React DOM.

When I try to use the grapesjs-blocks-bootstrap4 library in my plugins, I'm getting the following error in the console:
Uncaught TypeError: Cannot set property defaults of # which has only a getter

I have verified that I have correctly imported the necessary dependencies, including React and ReactDOM, and that I am using them correctly in my code. Additionally, I have followed the official documentation of grapesjs-blocks-bootstrap4 to integrate it into my website editor.

I'm wondering if there is an incompatibility between React DOM and grapesjs-blocks-bootstrap4, or if I am doing something wrong in my code. I have also tried searching for similar issues or fixes on the grapesjs-blocks-bootstrap4 GitHub repository, but I haven't found a solution so far.

Extra large device max-width breaking decorations

Description:
When applying certain decorations (e.g. background color) to an element that contains a Bootstrap class, an invalid media query wraps the style added causing browsers to ignore the style.

How to reproduce issue:

1. Start with empty canvas
2. Click on Body
3. Go to Style Manager tab
4. Add Bootstrap class (e.g. jumbotron)
5. Try changing background color under Decorations

Result:

@media (max-width: 100%){
  .jumbotron{
    background-color:#d02121;
  }
}

The default device (Extra Large) shouldn't have @media queries for its styles and is causing browsers to ignore everything underneath it.
The max-width parameter should be omitted when initializing a list of devices in devices.js. I'll be submitting quick a PR for that.

"Cannot set property defaults of #<n>" error while integrating GrapesJS-blocks-boostrap4 plugin

Hi there.
I am trying to add grapesjs-blocks-bootstrap4 plugin in my grapesjs editor in reactjs. When I try adding it, I get the following error.
TypeError: Cannot set property defaults of #<n> which has only a getter at eval (grapes.min.js?a826:2:1) at Module.It (grapes.min.js?a826:2:1) at Function.$ [as extend] (grapes.min.js?a826:2:1) at vr (grapesjs-blocks-bootstrap4.min.js?5902:11:1) at eval (grapesjs-blocks-bootstrap4.min.js?5902:11:1) at eval (grapes.min.js?a826:2:1)

I tried deleting the node modules and installing them again, but still had the same issue. Thank you for your help in advance.

Component type 'media' not found

I think is because line 33 in MediaObject.js
isComponent(el) {
if(el && el.classList && el.classList.contains('media')) {
return {type: 'media'};
}
}

how can i add editable blocks

how can I add bootstrap editable blocks, please help me I need it so much. how can I get built-in editable blocks?

row{ display: table}

Hi,
Every time I add a row, grapes add this css

.row{ display:table; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; width:100%; }

This code makes bootstrap row not working.
Is possible to disable the auto add of row css?

thank you

Video Block : In HTML5 Source mode, video url previously correctly saved is replaced with the BigBuckBunny video on editor loading

I'm adding a video. The video is in mp4 format and is saved online. The video is playable if i put the link in the bvrowser address bar.
So, I use the Video Block to insert this video in the editor. In the settings view I choose "HTML5 Source" mode then i paste my video url and save the work; All it's fine.

Later I open my editor again for changing other stuff on the same page, and .. ta-dah! the previously correctly saved video url is replaced with the default BigBuckBunny video.

I'm using grapesjs - 0.16.30 and the latest version of grapesjs-blocks-bootstrap4.

Any suggestion/support for this? Thanks!

Column Push and Pull function

Hey!

Great addon so far! I wanted to know if it's possible to use the push and pull function from bootstrap for the columns.

Greetings!

Component setting should be a select instead it is a text field

try to add an alert object to the canvas.
When you inspect the component settings , Context setting should be a select,containing the different alert types , like "danger","info" and so on.

I also tried to create the same alert inside a container and a row and it suddendly the Context setting worked as expected.

Coould you please tell me if it is a correct behavior or an issue ?

Thank you

Rudy

Could you please update the project to work with break-change from GrapesJS v0.20.1?

Thanks

Malformed HTML because of class_select Trait

Hello,
I'm discovering grapesJS and this plugin.
I tried collapse and it seems to malform code (div ="show") and doesn't collapse:

<h1 class="display-4">Hello!
          </h1>
          <div ="show" class="collapse show">
            <p class="lead">
              <a href="" class="link"></a>This is demo content from 
              <code draggable="true">index.html</code>. For development, you shouldn&#039;t edit this file. Instead, you can copy and rename it to 
              <code draggable="true">_index.html</code>. The next time the server starts, the new file will be served, and it will be ignored by git.
            </p>
          </div>

Or maybe I'm wrong :)
Please let me know

Background images do not work at all.

I cannot see any background images in the style manager and if I set one it does not show up in the canvas.

Column component doesn't recognize starting values of device classes

See index.html. Need to create a custom trait type which maps a list of classes to a select, and can set the default option based on the presence of one of those classes.

platforma wireframes support?

Hi @kaoz70, how can i add platforma collection of components and UI elements in this grapesJS any idea?

component remove event fires on changing select options in select's trait

(component remove event fires on changing select options in select's trait) this thing is creating an issue beacuse when we are using (comps.reset(optComps);) reset function then it fires this component remove event .
please tell there is anything we can do with that whether using reset can we right our custom js for that . please reply it's urgent .
Thank you

Youtube Video configuration missing on loading content

Hello!

When we insert a video block and configure it with the Youtube provider, after inserting the video ID it works correctly, however if we upload the same content for editing, the provider comes as html5 and the configuration is lost, being necessary to change it and enter the video ID again.

Thanks ;-)

Text content goes off when we anything is typed in the Text, Header or Paragraph content.

Steps to reproduce:-

1. Drag the header onto the canvas.
2. Type something.
3. Click outside of the component.

Note:-
I have observed that if we press enter key more than once after writing the content, then the content stays.

Container, Row, and Column

When you added two columns and tried to changed the color of one of the column it changed both of columns, As per checking on the style it uses the class instead of the generated ID.

Unable to switch tab in editor

How can I switch tabs within the editor?

How to add single block from panel ?

Great plugin! But can I add only Card block to grapesjs panel ?

Thanks!

Issue Selecting PluginsOpts

What is the correct syntax for determining which items to show on the right sidebar?

I tried to add them to what is shown here (Container, Row, Column, Column Break, Media Object, etc.) but it fails...

Please advise.

Thanks!

Asset manager no longer opens for images when using this plugin

Using the code in index.html, dragging and dropping an image block, then double-clicking it doesn't open the asset manager.

Removing this plugin makes this functionality work.

Container doesn't have height when View Components is off

notice this on Row block too if the Row block inside a container

steps to reproduce:

1. drag and drop the Container block to canvas.
2. toggle off the View Components on the options panel

related: #20

Unable to add space in button text

I am unable to add space in the button text, tried to edit the source files but no luck, help is appreciated.

Selecting dropdown component in the Canvas triggers the Bootstrap JS (toggles show class)

There is a warning for deprecated method

You can see the warning when change the trait on Tab panel Is Active.

grapes.min.js:2 The event 'change:selectedComponent' is deprecated, replace it with 'component:toggled'

Have problem with js file

Hello z1lk!
When I try to connect this file 'grapesjs-blocks-bootstrap4.min.js' i have the error
" Uncaught SyntaxError: Unexpected token } " - can you help me with it?

bs 5 update ?

hello did you plan to update to bootstrap 5 ?
regards