mjml icon indicating copy to clipboard operation
mjml copied to clipboard

Button text is not modifiable in demo site

Open KevinShea1990 opened this issue 4 years ago • 0 comments

In the demo, button text cannot be modified in firefox.

How to reproduce

  1. In Firefox version 84.0.2 or similar builds, open demo site: https://grapesjs.com/demo-mjml.html
  2. Load a mjml with a button in it. For example:

<mjml> <mj-body> <mj-section> <mj-column> <mj-text> <p style="font-family: sans-serif; font-size: 14px; font-weight: 400; margin: 0px 0px 15px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> <span style="font-size:16px;">Hi there,<br></span> </p> <p style="font-family: sans-serif; font-size: 14px; font-weight: 400; margin: 0px 0px 15px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> <span style="font-size:16px;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</span> <br> </p> </mj-text> <mj-button font-size="28px" background-color="#3498db" __="1" width="360px" id="ij4r">Button <br> </mj-button> <mj-text> <p style="font-family: sans-serif; font-size: 14px; font-weight: 400; margin: 0px 0px 15px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> <span style="font-size:16px;">This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.<br></span> </p> <p style="font-family: sans-serif; font-size: 14px; font-weight: 400; margin: 0px 0px 15px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> <span style="font-size:16px;">Good luck! Hope it works.</span> <br> </p> </mj-text> <mj-text align="center" id="izsp"> <div> <span class="apple-link" style="color: rgb(153, 153, 153); font-size: 12px; text-align: center; font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br></span> </div> <div> <span class="apple-link" style="color: rgb(153, 153, 153); font-size: 12px; text-align: center; font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br></span> </div> <div> <span class="apple-link" style="color: rgb(153, 153, 153); font-size: 12px; text-align: center; font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Company Inc, 3 Abbey Road, San Francisco CA 94102</span> </div> <div> <span class="apple-link" style="color: rgb(153, 153, 153); font-size: 12px; text-align: center; font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><br></span> </div> <span style="color: rgb(153, 153, 153); font-family: sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Don't like these emails?<span>&nbsp;</span></span> <a data-cke-saved-href="http://i.imgur.com/CScmqnj.gif" href="http://i.imgur.com/CScmqnj.gif" style="color: rgb(153, 153, 153); text-decoration: underline; font-size: 12px; text-align: center; font-family: sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246);">Unsubscribe</a> <span style="color: rgb(153, 153, 153); font-family: sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 246); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">.</span> <br> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>

  1. Double click the button, the first time the text is editable. Then single click the button, the cursor disappears and button text becomes unmodifiable from now on. User has to change focus to other places of the editor and then refocus the button and double click it to make it editable again.

KevinShea1990 avatar Jan 09 '21 13:01 KevinShea1990