fix ime double input with mark (ianstormtaylor#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>
beorn · Apr 13, 2021 · 6346527 · 6346527
1 parent 6ce60e1
commit 6346527
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/lovely-walls-knock.md b/.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.
diff --git a/packages/slate-react/src/components/leaf.tsx b/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]) {