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

Author: hiteshshetty-dev

.changeset/warm-dolphins-rescue.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Adds translate='no' to Editable component to skip DOM from translation

packages/slate-react/src/components/editable.tsx

@@ -1030,6 +1030,7 @@ export const Editable = forwardRef(
               <Component
                 role={readOnly ? undefined : 'textbox'}
                 aria-multiline={readOnly ? undefined : true}
+                translate="no"
                 {...attributes}
                 // COMPAT: Certain browsers don't support the `beforeinput` event, so we'd
                 // have to use hacks to make these replacement-based features work.

packages/slate-react/test/editable.spec.tsx

@@ -200,5 +200,42 @@ describe('slate-react', () => {
       expect(onChange).toHaveBeenCalled()
       expect(onSelectionChange).not.toHaveBeenCalled()
     })
+
+    describe('translate="no"', () => {
+      test('should have translate="no" attribute', () => {
+        const editor = withReact(createEditor())
+        const initialValue = [{ type: 'block', children: [{ text: 'test' }] }]
+
+        const { container } = render(
+          <Slate
+            editor={editor}
+            initialValue={initialValue}
+            onChange={() => {}}
+          >
+            <Editable />
+          </Slate>
+        )
+
+        const editableElement = container.querySelector('[data-slate-editor]')
+        expect(editableElement?.getAttribute('translate')).toBe('no')
+      })
+      test('should allow override of translate attribute', () => {
+        const editor = withReact(createEditor())
+        const initialValue = [{ type: 'block', children: [{ text: 'test' }] }]
+
+        const { container } = render(
+          <Slate
+            editor={editor}
+            initialValue={initialValue}
+            onChange={() => {}}
+          >
+            <Editable translate="yes" />
+          </Slate>
+        )
+
+        const editableElement = container.querySelector('[data-slate-editor]')
+        expect(editableElement?.getAttribute('translate')).toBe('yes')
+      })
+    })
   })
 })