Chrome translation breaks the editor

[gaetan-wap]

Chrome translation breaks the editor

When editing a slate editor while Chrome translation is activated, the editor breaks.

What's the current behavior?

Steps to reproduce:

• Go to https://www.slatejs.org/examples/richtext
• Activate google translate (Right click > Translate to whatever is your language)
• Add content in the editor
• Enjoy the great white on red fullscreen smiley

Slate-react: 0.58.4 Browser: Chrome OS: Windows / Linux (at least)

What's the expected behavior?

I am not sure. The best would be to prevent translation in the Editor I guess ?

Related issues

• https://github.com/facebook/react/issues/11538#issuecomment-417504600

[gaetan-wap]

It seems to work. Thanks a lot.

I only found this as a documentation. It seems to also works on div element. No need to use a span around all leaves. Using it at the root of the editor is enough.

I had tried the translate="no" attribute at various depth of de DOM and it did not work.

Edit: This was an answer to a comment that have been deleted. It suggested to use class="notranslate".

[hkrutzer]

That was my comment, I assumed you had already found class="notranslate" because it is mentioned in the linked issue, so I removed it, but it is a rather long issue so I guess not :) Slate could add notranslate by default but I don't think that is a good idea.

[gaetan-wap]

I don't think it is a good idea neither. I guess it is up to them to make it work on all sites.

Sadly users won't make the difference.

[cactusanil]

we are also facing the same issue do we have any appropriate solution

[dylans]

The best solution I've seen is at https://github.com/facebook/react/issues/11538#issuecomment-1890055300