Replace "zero width whitspace" with "zero width no break" character (#2234)

This fixes https://github.com/ianstormtaylor/slate/issues/2231 where
a rogue empty line appears before an inline block.

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

@@ -133,7 +133,7 @@ class Leaf extends React.Component {
     // COMPAT: Render text inside void nodes with a zero-width space.
     // So the node can contain selection but the text is not visible.
     if (schema.isVoid(parent)) {
-      return <span data-slate-zero-width="z">{'\u200B'}</span>
+      return <span data-slate-zero-width="z">{'\uFEFF'}</span>
     }
 
     // COMPAT: If this is the last text node in an empty block, render a zero-
@@ -145,14 +145,14 @@ class Leaf extends React.Component {
       parent.text === '' &&
       parent.nodes.last() === node
     ) {
-      return <span data-slate-zero-width="n">{'\u200B'}</span>
+      return <span data-slate-zero-width="n">{'\uFEFF'}</span>
     }
 
     // COMPAT: If the text is empty, it's because it's on the edge of an inline
     // node, so we render a zero-width space so that the selection can be
     // inserted next to it still.
     if (text === '') {
-      return <span data-slate-zero-width="z">{'\u200B'}</span>
+      return <span data-slate-zero-width="z">{'\uFEFF'}</span>
     }
 
     // COMPAT: Browsers will collapse trailing new lines at the end of blocks,

packages/slate-react/test/rendering/fixtures/custom-block-blurred.js

@@ -51,7 +51,7 @@ export const output = `
    <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -59,7 +59,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>
@@ -70,7 +70,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -78,7 +78,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>

packages/slate-react/test/rendering/fixtures/custom-block-focused.js

@@ -49,7 +49,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -57,7 +57,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>
@@ -68,7 +68,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -76,7 +76,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>

packages/slate-react/test/rendering/fixtures/custom-block-selected.js

@@ -49,7 +49,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -57,7 +57,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>
@@ -68,7 +68,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="n">​</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>
@@ -76,7 +76,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>

packages/slate-react/test/rendering/fixtures/custom-block-void.js

@@ -42,7 +42,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span>
-          <span data-slate-zero-width="z">&#x200B;</span>
+          <span data-slate-zero-width="z">&#xFEFF;</span>
         </span>
       </span>
     </div>

packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js

@@ -39,7 +39,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -49,7 +49,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -59,7 +59,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -69,7 +69,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/custom-inline-void.js

@@ -40,14 +40,14 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <span data-slate-void="true" contenteditable="false">
       <span data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
         <span>
           <span>
-            <span data-slate-zero-width="z">&#x200B;</span>
+            <span data-slate-zero-width="z">&#xFEFF;</span>
           </span>
         </span>
       </span>
@@ -57,7 +57,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="n">&#x200B;</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/custom-inline.js

@@ -37,7 +37,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -47,7 +47,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
   </div>

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

@@ -19,7 +19,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <span style="position:relative">
@@ -29,7 +29,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</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-zero-width="n">\u200B</span>
+        <span data-slate-zero-width="n">\uFEFF</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js

@@ -41,7 +41,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="z">&#xFEFF;</span>
       </span>
     </span>
     <span data-slate-void="true">
@@ -51,7 +51,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="n">&#x200B;</span>
+        <span data-slate-zero-width="n">&#xFEFF;</span>
       </span>
     </span>
   </div>