Grapesjs: Components name

[minuwan]

I have two questions.

1. Is there any way to change the built-in components name? I wanted to change the name "Box" to "Div". so the same name appears on select and on the layers/navigator panel. In simple term, if I drag and dropped a div, I need it to be named Div.

2. Any way to add an icon in front of the text of each item type in the layers panel? I mean a box for Div, A list icon for ULs etc...

[NicoEngler]

1. You can use data-gjs-custom-name on your components html.
   <h1 data-gjs-custom-name="Your Name" ...>

2. You can use data-gjs-icon on your components html.
   <h1 data-gjs-icon='<i class="fa fa-arrows"></i>' ...>

Please change your title to something more meaningful so others can find already solved problems better :)

EDIT: you can use data-gjs-name instead of data-gjs-custom-name

[minuwan]

@NicoEngler Any other way to set default custom names for each type? If someone drag and drop content from outside, I want to display those div's names as "Divs" as well. :)

[NicoEngler]

What do you mean with "from the outside"?

[minuwan]

@NicoEngler Outside means contents from other tabs, Since GrapesJS use HTML5 drag and drop option, we can drag and drop content from outside. Also, I have a fully custom block manager, I didn't use Grapes native one, which also can be consider as "outside".

[NicoEngler]

To be honest I haven't thought about that possibility yet but it sounds interesting! One way to approach this would be to listen to the drag event and preprocess the html before actually adding it. Preprocessing would be 1) check what kind of element it is and 2) add desired data-gjs-custom-name attribute to it.

[minuwan]

I thought about it, But the problem is that "data" attribute is visible even after exported.

[NicoEngler]

You´ve lost me on this one. What's exactly is the problem? :)

[minuwan]

I want to label every "Box" as "Divs". (Example: In the navigator/layers, In the badge etc...) by default (In the config or as a function/method).

[NicoEngler]

Well yes, https://github.com/artf/grapesjs/issues/1841#issuecomment-468289285 is still valid.

[artf]

I'd add that if you rely on HTML5 drag & drop, you can use canvas:dragdata event https://grapesjs.com/docs/api/editor.html#available-events

This allows you to make the editor understand "external drops", eg. by default GrapesJS can recognize images, by using canvas:dragdata you can make it recognize files like videos, PDFs, etc.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.