Skip to content

fix: add translate=no attribute to Editable component to avoid DOM desynchronization#5959

Merged
dylans merged 1 commit intoianstormtaylor:mainfrom
hiteshshetty-dev:fix/skip-translation
Oct 12, 2025
Merged

fix: add translate=no attribute to Editable component to avoid DOM desynchronization#5959
dylans merged 1 commit intoianstormtaylor:mainfrom
hiteshshetty-dev:fix/skip-translation

Conversation

@hiteshshetty-dev
Copy link
Contributor

Description
This PR adds translate='no' to the Editable component to prevent textareas from getting desynced due to browser or extension-based translations. I’ve verified this behavior in Notion, Google Docs, and Lexical, all of which use either notranslate or skiptranslate class but translate attribute is now widely supported across browsers.

Issue
Fixes: #5951

Example
Before:

Screen.Recording.2025-10-12.at.10.12.56.PM.mov

After:

Screen.Recording.2025-10-12.at.10.14.08.PM.mov

Context
This issue occurs because when the page is translated, all text content is replaced with its translated version. This can cause syncing issues between the DOM text and Slate’s internal state. In particular, when the translated text becomes longer than the original, it results in the point.offset exceeding the valid range in the toDOMPoint function, leading to the error:
Cannot resolve a DOM point from Slate point.

To address this, I checked how other editors handle translation, including Google Docs, Notion, and Lexical, and noticed that they exclude their editable regions from being translated. This approach makes sense since editable content should not be translated unless the translation can be synchronized with the editor’s internal state (editor.children in our case).
Please let me know if this approach works for us.

Checks

  • The new code matches the existing patterns and styles.
  • The tests pass with yarn test.
  • The linter passes with yarn lint. (Fix errors with yarn fix.)
  • The relevant examples still work. (Run examples with yarn start.)
  • You've added a changeset if changing functionality. (Add one with yarn changeset add.)

@changeset-bot
Copy link

changeset-bot bot commented Oct 12, 2025

🦋 Changeset detected

Latest commit: 9674f5e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
slate-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dylans dylans merged commit 622fb11 into ianstormtaylor:main Oct 12, 2025
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

translation cause Cannot resolve a DOM point from Slate point

2 participants