How do I drag and drop a “textable” block directly into a text?

[bgrand-ch]

Hello,

I need to drag-and-drop a “textable” block into a text.

I have implemented the external drag-and-drop of a block according to the example provided here:
#2595 (comment)

I can drag-and-drop a “textable” component into a text, but not a block directly into a text.

External drag-and-drop of a block works great, except for this particular case.

How do I drag-and-drop a “textable” block directly into a text?

Thanks for your help.

[mosh-tudor]

@bgrand-ch Have you tried textable: true option?

  editor.DomComponents.addType(..., {
    extend: 'text',
    model: {
      defaults: {
        name: 'Your component',
        tagName: 'span',
        textable: true, // <-- this

For me this works perfectly.

[bgrand-ch]

Hello,

@mosh-tudor Thanks for your reply.

Yes, I use textable: true for my textable components.

Context: I have "external" blocks with canvas:dragdata to drag-and-drop.

OK:

1. Drag-and-drop a block inside an existing component (not inside a text component).
2. Once block is dropped, drag-and-drop the resulting textable component inside a text component.
3. No problem, it works.

Not OK:

1. Try to drag-and-drop a (textable) block inside an existing text component.
2. The resulting component of the block is textable, but cannot be drag-and-drop directly inside a text component.
3. Problem, it doesn't work.

[mosh-tudor]

@bgrand-ch
For me this only works in combination with tagName: 'span', (you need an inline element)

[bgrand-ch]

Thanks for the information.

Works well with an “internal” block and drag-and-drop from the “gjs-blocks-cs” panel. Does not work with an “external” block and drag-and-drop from a React modal component that is not in the GrapesJS blocks panel.

[artf]

@bgrand-ch are you able to provide a reproducible demo?

[bgrand-ch]

I'm going to take the time to do a demo next week. Thanks for all your help.

[bgrand-ch]

@artf @mohamedsalem401 @danstarns Hello,

Do you have any idea about the source of the problem?

Thank you in advance for your help.

Have a nice day.