BUG: a tag inside button is removed
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Latest
Reproducible demo link
https://codesandbox.io/s/interesting-bell-xntbtr
Describe the bug
How to reproduce the bug?
- go to the codesandbox
- drag and drop Custom Code block.
- put this code inside the Custom Code editor and click Save:
<button class="btn bg-primary text-white">
<a href="https://www.example.com/" target="_blank">Click me</a>
</button>
- Click the button.
- The button should open the href link when you click it but it's not. Noticed that the a tag is removed inside the button tag
What is the expected behavior?
<a> tag is not removed
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
This happens because of the button implementation in the forms plugin, which allows only textnodes as children.
If you remove the form plugin you'll be able to see the <a> element (if you prefer you can also extend the button component with your own logic).
so what is the code of "normal" implementation of the button? btw, may I know why do you make the button to behave like that on the forms plugin?
If I recall properly the main reason there was a problem with inline text editing with button elements, so that approach was the easiest way to fix a common issue.
I guess the "normal" implementation would be to skip/overwrite the init method but you should think on how to properly handle the inline text editing.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3759
BUG: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link htt...
Issue #3939
BUG: Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
Issue #4732
BUG: Tabs behaviour after HTML import
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 107 (MacOS) Reproducible demo link...
Issue #4094
BUG: When drag and drop block into editor in Chrome, not able to drag and drop block
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 97.0.4692.71 (Official Build) (64-...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.