Fix native IME input at the beginning of a line (#1353)

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

@@ -120,13 +120,7 @@ class Leaf extends React.Component {
    */
 
   renderText() {
-    const { block, node, parent, text, index, leaves } = this.props
+    const { block, node, text, index, leaves } = this.props
-
-    // COMPAT: If the text is empty and it's the only child, we need to render a
-    // line break to get the block to have the proper height.
-    if (text == '' && parent.kind == 'block' && parent.text == '') {
-      return <span data-slate-empty-block>{'\n'}</span>
-    }
 
     // COMPAT: If the text is empty otherwise, it's because it's on the edge of
     // an inline void node, so we render a zero-width space so that the

packages/slate-react/src/utils/find-dom-point.js

@@ -39,16 +39,6 @@ function findDOMPoint(key, offset) {
     start = end
   }
 
-  // COMPAT: For empty blocks with only a single empty text node, we will have
-  // rendered a `<span>` with `\n` inside, instead of a text node.
-  if (
-    el.childNodes.length == 1 &&
-    el.childNodes[0].childNodes.length == 1 &&
-    el.childNodes[0].childNodes[0].hasAttributes('data-slate-empty-block')
-  ) {
-    return { node: el.childNodes[0], offset: 0 }
-  }
-
   return null
 }
 

packages/slate-react/src/utils/find-point.js

@@ -57,9 +57,14 @@ function findPoint(nativeNode, nativeOffset, value) {
   }
 
   // COMPAT: If the parent node is a Slate zero-width space, this is because the
-  // text node has no characters, so the offset can only be zero.
+  // text node should have no characters. However, during IME composition the
-  if (offset != 0 && parentNode.getAttribute('data-slate-zero-width')) {
+  // ASCII characters will be prepended to the zero-width space, so subtract 1
-    offset = 0
+  // from the offset to account for the zero-width space character.
+  if (
+    offset == node.textContent.length &&
+    parentNode.hasAttribute('data-slate-zero-width')
+  ) {
+    offset--
   }
 
   // Get the string value of the offset key attribute.

packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js

@@ -19,7 +19,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-empty-block="true">\n</span>
+        <span data-slate-zero-width="true">\u200B</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/empty-block.js

@@ -17,7 +17,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-empty-block="true">\n</span>
+        <span data-slate-zero-width="true">\u200B</span>
       </span>
     </span>
   </div>