fix ime double input with mark (#4158)

* fix ime double when apply mark

* add changeset

* refactor to use auto-incrementing key and add comments for it

* Update lovely-walls-knock.md

* Update lovely-walls-knock.md

Co-authored-by: Ian Storm Taylor <ian@ianstormtaylor.com>

.changeset/lovely-walls-knock.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fixed a bug that resulted in doubly-input characters when using an IME.

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

@@ -4,6 +4,9 @@ import String from './string'
 import { PLACEHOLDER_SYMBOL } from '../utils/weak-maps'
 import { RenderLeafProps } from './editable'
 
+// auto-incrementing key for String component, force it refresh to
+// prevent inconsistent rendering by React with IME input
+let keyForString = 0
 /**
  * Individual leaves in a text node with unique formatting.
  */
@@ -43,7 +46,13 @@ const Leaf = (props: {
   }, [placeholderRef])
 
   let children = (
-    <String isLast={isLast} leaf={leaf} parent={parent} text={text} />
+    <String
+      key={keyForString++}
+      isLast={isLast}
+      leaf={leaf}
+      parent={parent}
+      text={text}
+    />
   )
 
   if (leaf[PLACEHOLDER_SYMBOL]) {