replace <br /> to line break (#1322)

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

@@ -123,8 +123,10 @@ class Leaf extends React.Component {
     const { block, node, parent, text, index, leaves } = this.props
 
     // COMPAT: If the text is empty and it's the only child, we need to render a
-    // <br/> to get the block to have the proper height.
+    // line break to get the block to have the proper height.
-    if (text == '' && parent.kind == 'block' && parent.text == '') return <br />
+    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/components/text.js

@@ -81,7 +81,7 @@ class Text extends React.Component {
     if (n.node != p.node) return true
 
     // If the node parent is a block node, and it was the last child of the
-    // block, re-render to cleanup extra `<br/>` or `\n`.
+    // block, re-render to cleanup extra `\n`.
     if (n.parent.kind == 'block') {
       const pLast = p.parent.nodes.last()
       const nLast = n.parent.nodes.last()

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

@@ -40,11 +40,11 @@ function findDOMPoint(key, offset) {
   }
 
   // COMPAT: For empty blocks with only a single empty text node, we will have
-  // rendered a `<br/>` instead of a text node.
+  // 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].tagName == 'BR'
+    el.childNodes[0].childNodes[0].hasAttributes('data-slate-empty-block')
   ) {
     return { node: el.childNodes[0], offset: 0 }
   }

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

@@ -19,7 +19,9 @@ export const output = `
   <div style="position:relative">
     <span contenteditable="false" style="pointer-events:none;display:inline-block;width:0;max-width:100%;white-space:nowrap;opacity:0.333"></span>
     <span>
-      <span><br></span>
+      <span>
+        <span data-slate-empty-block="true">\n</span>
+      </span>
     </span>
   </div>
 </div>

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

@@ -17,7 +17,9 @@ export const output = `
   <div style="position:relative">
     <span contenteditable="false" style="pointer-events:none;display:inline-block;width:0;max-width:100%;white-space:nowrap;opacity:0.333"></span>
     <span>
-      <span><br></span>
+      <span>
+        <span data-slate-empty-block="true">\n</span>
+      </span>
     </span>
   </div>
 </div>