[Bug]: How to use components

Question

Using GrapesJS 0.15.10 I cant get the components to work the way I intent. Its probable me, so if its a question, feel free to adjust the title of the issue. (its a follow up of https://github.com/artf/grapesjs/issues/2195)

I've made a pen (hope thats ok, didnt see the fiddle templates) for my example: https://codepen.io/jogai/pen/yLNJgLZ?editors=1011

I see the same behavior in chrome & firefox.

Expected to have a row with text that is not selectable/draggable/highlightable but instead the row has text that is draggable into the other component.

Expected attributes of the component:

data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false"

But instead the attributes are:

data-gjs-type="cell" draggable="true" data-highlightable="1"

data-gjs-type is fine, the others have a wrong value, hoverable is missing entirely, one is missing data-gjs completely, and one is missing the -gjs- part.

Answers (3)

pouyamiralayi• February 18, 20200 reactions

Hi @Jogai you must also specify the data-gjs-draggable on the <td>:

            <table width="770" cellpadding="0" cellspacing="0" style="background-color:#CAD;">
                <tr style="display:block;padding:15px;">
                    <td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
                        Component text 1
                    </td>
                </tr>
                <tr style="display:block;padding:15px;">
                    <td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
                        Component text 2
                    </td>
                </tr>
            </table>

Cheers!

Jogai• February 19, 20200 reactions

Thanks. At least thats an improvement, but still the other properties are not taken into account, and if you try tro drag it (since the drag arrows still show up) it throws an error and then the whole editor is in a broken state. I updated the example.

Jogai• February 20, 20200 reactions

Updated the example. Its sort of a followup on https://github.com/artf/grapesjs/issues/2195

My assumption is wrong that draggable needs data-gjs- prefix, because the html part without using component doesnt have that either. Still the child td is not seen as part of the component.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Question

Answers (3)

Related Questions and Answers

[QUESTION] How to create custom block made of grapesjs components?

[Question] How to work with Custom Components

[question] Cannot read property 'indexOf' of undefined

[Bug] getComponents method doesn't return tree of components

Paid Plugins That Match This Issue

Browse Plugin Categories