search

zalify / easy-email-editor

Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
https://email.maocanhua.cn/
MIT License
1.56k stars 327 forks source link

Mozilla Firefox text select problem #136

Open seyitgokce opened 2 years ago

seyitgokce commented 2 years ago

Hi,

When i added a text block or i want edit a text block, i cant select text with mouse click at Firefox browser. Not any problem at Chrome / IE browser.

Thanks

m-Ryan commented 2 years ago

https://github.com/arco-design/easy-email/issues/82

We used shadow dom to isolate styles, but the selection API is not widely supported. Maybe we will migrate shadow dom to iframe. Related: https://github.com/WICG/webcomponents/issues/79#issuecomment-988103206

applibs commented 1 year ago

When I open FF with debug console there is unsupported function for ShadowRoot API: getSelection. See https://caniuse.com/mdn-api_shadowroot_getselection . Can you fix it please at this line? const range = (getShadowRoot() as any).getSelection().getRangeAt(0);

Is it possible use this polyfill? https://github.com/GoogleChromeLabs/shadow-selection-polyfill

a-sokolova-dev commented 1 year ago

When I open FF with debug console there is unsupported function for ShadowRoot API: getSelection. See https://caniuse.com/mdn-api_shadowroot_getselection . Can you fix it please at this line? const range = (getShadowRoot() as any).getSelection().getRangeAt(0);

Is it possible use this polyfill? https://github.com/GoogleChromeLabs/shadow-selection-polyfill

Hi @applibs!

I've had the same issue and I found that you can use this polyfill as a workaround. It's not complete, but it does solve the problem for Firefox and Safari.

Here's the link to the original discussion: https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/11

Hope this helps :)

applibs commented 1 year ago

I am not participiant and I dont want be. Please fix it for others too. Thx.

Otherwise, Mozila has a whole other set of problems and it's basically unusable in FF.

  1. Double-click selection when text is formatted
  2. normal selection when text is formatted
  3. Select placeholder

Please change this line: backgroundColor: 'var(--color-bg-5);', with: backgroundColor: 'var(--color-bg-5)',

FF does not like semicolon there.