GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
628 stars 226 forks source link

Links in mj-text components are not selectable by default #206

Closed ditschedev closed 1 year ago

ditschedev commented 3 years ago

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>
ditschedev commented 3 years ago

@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.

DRoet commented 3 years ago

is this the same behavior as seen on https://grapesjs.com/demo.html ?

ditschedev commented 3 years ago

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.

m-e-conroy commented 3 years ago

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.

ditschedev commented 3 years ago

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.

TudosaOvidiu commented 2 years ago

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.

artf commented 1 year ago

This should be fixed in the latest release.

dangelov commented 1 year ago

Was this fix released? I'm using 1.0.4 and still encountering the same issue.