fix: make void node selectable for edge case, close: #1639 (#1734)

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

@@ -66,26 +66,24 @@ class Void extends React.Component {
     }
 
     const spacer = (
-      <Tag
+      <Tag data-slate-spacer style={style}>
-        contentEditable
-        data-slate-spacer
-        suppressContentEditableWarning
-        style={style}
-      >
         {this.renderText()}
       </Tag>
     )
 
-    const content = <Tag draggable={readOnly ? null : true}>{children}</Tag>
+    const content = (
+      <Tag
+        contentEditable={readOnly ? null : false}
+        draggable={readOnly ? null : true}
+      >
+        {children}
+      </Tag>
+    )
 
     this.debug('render', { props })
 
     return (
-      <Tag
+      <Tag data-slate-void data-key={node.key}>
-        data-slate-void
-        data-key={node.key}
-        contentEditable={readOnly ? null : false}
-      >
         {readOnly ? null : spacer}
         {content}
       </Tag>

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

@@ -31,15 +31,15 @@ export const value = (
 
 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div data-slate-void="true" contenteditable="false">
+  <div data-slate-void="true">
-    <div contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
+    <div data-slate-spacer="true" style="height:0;color:transparent;outline:none">
       <span>
         <span>
           <span data-slate-zero-width="z">&#x200B;</span>
         </span>
       </span>
     </div>
-    <div draggable="true">
+    <div contenteditable="false" draggable="true">
       <img src="https://example.com/image.png">
     </div>
   </div>

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

@@ -36,15 +36,15 @@ export const output = `
         <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
-    <span data-slate-void="true" contenteditable="false">
+    <span data-slate-void="true">
-      <span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
+      <span data-slate-spacer="true" style="height:0;color:transparent;outline:none">
         <span>
           <span>
             <span data-slate-zero-width="z">&#x200B;</span>
           </span>
         </span>
       </span>
-      <span draggable="true">
+      <span contenteditable="false" draggable="true">
         <img>
       </span>
     </span>