Dragging a text component inside a <p> tag should convert the text element to a span

[benryanwilliams]

When dragging a text component into a <p> tag, the text component should be inserted as a span instead of a div, since <p> tags can't contain a div or other block elements, and this results in problems when rendering the template. I understand that <p> tags won't be generated by standard blocks inside grapesjs, but if the user is importing html from templates they find online, these are likely to include <p> tags.

[artf]

Yeah, I agree, the way the <p> tag works, it should have its own component logic but I guess that could be handled by a plugin.
In the future, we should have as fewer components in our core as possible and have dedicated plugins that could contain all the necessary components (eg. similar to grapesjs-plugin-forms).

[benryanwilliams]

Yeah that would make sense @artf - do you have any idea of when this would be handled, or how I would implement this for the time being with a plugin? I was thinking I could:

1. Add logic to the text component type that would check whether any of the parent elements are <p> tags, and then
2. If any of the parent elements are <p> tags, convert the component to a span

Or should I just encourage users to not use templates with <p> tags for the time being?

[artf]

I'd say the proper way would be to handle all the logic at the <p> component level, where you should check if the newly added component is of the proper type.