mjml
mjml copied to clipboard
Links in mj-text components are not selectable by default
I stumbled upon another odd behaviour. When I create a link inside a mj-text
component using the built-in RTE I cant directly access the link after the editor loaded.
I need to double click the text, to edit the text, then select the link, select another component in the editor to change the focus and then reselect the link which is now accessible. This can't be an expected behaviour or is it?
Here is some mjml to reproduce this:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
This is some text. <a href="https://example.com" title="Test" target="_blank" class="link">This is a link</a>.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
@DRoet Any ideas why this could happen? It's a bit tricky to communicate this to our non technical customers as we get a lot of calls regarding this issue.
is this the same behavior as seen on https://grapesjs.com/demo.html ?
Not really. Once you add a link and reload the page, the link is selectable. When I enable the mjml plugin this behaviour is gone.
I found that you need to double click the text container then deselect the text container, afterwards the links are selectable. That's the only way I found that allows you to select a link.
Yes, thats the current behavior as described in the issue. But this is not expected. Set yourself in a customer perspective with hardly technical knowledge, who would find this out?
I looked at the code and did not find an explanation for this behavior, if so, I‘d have fixed this myself.
I had the same issue. I fixed this by overwriting the isComponent method on the mj-text type:
editor.DomComponents.addType('mj-text', { isComponent: (el: Component) => el.tagName === 'MJ-TEXT', });
With this whenever I focus on a text section, links inside become selectable.
This should be fixed in the latest release.
Was this fix released? I'm using 1.0.4 and still encountering the same issue.