fix findDOMPoint for void nodes with content length

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

@@ -134,7 +134,11 @@ 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 (editor.query('isVoid', parent)) {
-      return <span data-slate-zero-width="z">{'\uFEFF'}</span>
+      return (
+        <span data-slate-zero-width="z" data-slate-length={parent.text.length}>
+          {'\uFEFF'}
+        </span>
+      )
     }
 
     // COMPAT: If this is the last text node in an empty block, render a zero-
@@ -147,7 +151,7 @@ class Leaf extends React.Component {
       parent.nodes.last() === node
     ) {
       return (
-        <span data-slate-zero-width="n">
+        <span data-slate-zero-width="n" data-slate-length={0}>
           {'\uFEFF'}
           <br />
         </span>
@@ -158,7 +162,11 @@ class Leaf extends React.Component {
     // 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">{'\uFEFF'}</span>
+      return (
+        <span data-slate-zero-width="z" data-slate-length={0}>
+          {'\uFEFF'}
+        </span>
+      )
     }
 
     // COMPAT: Browsers will collapse trailing new lines at the end of blocks,

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

@@ -21,7 +21,10 @@ function findDOMPoint(point, win = window) {
 
   for (const text of texts) {
     const node = text.childNodes[0]
-    const { length } = node.textContent
+    const length = text.hasAttribute('data-slate-length')
+      ? parseInt(text.getAttribute('data-slate-length'), 10)
+      : node.textContent.length
+
     const end = start + length
 
     if (point.offset <= end) {

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

@@ -63,7 +63,7 @@ export const output = `
    <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="n">&#xFEFF;<br /></span>
+        <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
       </span>
     </span>
   </div>
@@ -71,7 +71,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span data-slate-leaf="true">
-          <span data-slate-zero-width="z">&#xFEFF;</span>
+          <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
         </span>
       </span>
     </div>
@@ -82,7 +82,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="n">&#xFEFF;<br /></span>
+        <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
       </span>
     </span>
   </div>
@@ -90,7 +90,7 @@ export const output = `
     <div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
       <span>
         <span data-slate-leaf="true">
-          <span data-slate-zero-width="z">&#xFEFF;</span>
+          <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
         </span>
       </span>
     </div>

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

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

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

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

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

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

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

@@ -45,7 +45,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -57,7 +57,7 @@ export const output = `
     </a>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -69,7 +69,7 @@ export const output = `
     </a>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -81,7 +81,7 @@ export const output = `
     </a>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
   </div>

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

@@ -46,14 +46,14 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#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 data-slate-leaf="true">
-            <span data-slate-zero-width="z">&#xFEFF;</span>
+            <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
           </span>
         </span>
       </span>
@@ -63,7 +63,7 @@ export const output = `
     </span>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="n">&#xFEFF;<br /></span>
+        <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
       </span>
     </span>
   </div>

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

@@ -41,7 +41,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -53,7 +53,7 @@ export const output = `
     </a>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
   </div>

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

@@ -21,7 +21,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <span style="position:relative">
@@ -33,7 +33,7 @@ export const output = `
     </span>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
   </div>

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

@@ -19,7 +19,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="n">&#xFEFF;<br /></span>
+        <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
       </span>
     </span>
   </div>

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

@@ -45,7 +45,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="z">&#xFEFF;</span>
+        <span data-slate-zero-width="z" data-slate-length="0">&#xFEFF;</span>
       </span>
     </span>
     <span data-slate-void="true">
@@ -55,7 +55,7 @@ export const output = `
     </span>
     <span>
       <span data-slate-leaf="true">
-        <span data-slate-zero-width="n">&#xFEFF;<br /></span>
+        <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br /></span>
       </span>
     </span>
   </div>