fix arrow keys during composing, fix composing in empty blocks

lib/components/content.js

@@ -58,6 +58,7 @@ class Content extends React.Component {
   constructor(props) {
     super(props)
     this.tmp = {}
+    this.forces = 0
   }
 
   /**
@@ -152,12 +153,16 @@ class Content extends React.Component {
   }
 
   /**
-   * On composition end, remove the `isComposing` flag on the next tick.
+   * On composition end, remove the `isComposing` flag on the next tick. Also
+   * increment the `forces` key, which will force the contenteditable element
+   * to completely re-render, since IME puts React in an unreconcilable state.
    *
    * @param {Event} e
    */
 
   onCompositionEnd = (e) => {
+    this.forces++
+
     setTimeout(() => {
       this.tmp.isComposing = false
     })
@@ -254,15 +259,16 @@ class Content extends React.Component {
 
   onKeyDown = (e) => {
     if (this.props.readOnly) return
+    const key = keycode(e.which)
 
-    // When composing, we don't want keydown events that are meant to end the
+    if (
-    // composition to affect the editor state.
+      this.tmp.isComposing &&
-    if (this.tmp.isComposing) {
+      key == 'left' || key == 'right' || key == 'up' || key == 'down'
+    ) {
       e.preventDefault()
       return
     }
 
-    const key = keycode(e.which)
 
     if (
       (key == 'enter') ||
@@ -402,6 +408,7 @@ class Content extends React.Component {
 
     return (
       <div
+        key={`slate-content-${this.forces}`}
         className={className}
         contentEditable={!readOnly}
         suppressContentEditableWarning