From fb172dec6fdbb9b38037fb8e11814b6385588513 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjycui@users.noreply.github.com>
Date: Sat, 28 Apr 2018 04:42:53 +0800
Subject: [PATCH] fix: make void node selectable for edge case, close: #1639
 (#1734)

---
 packages/slate-react/src/components/void.js   | 22 +++++++++----------
 .../rendering/fixtures/custom-block-void.js   |  6 ++---
 .../rendering/fixtures/custom-inline-void.js  |  6 ++---
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/slate-react/src/components/void.js b/packages/slate-react/src/components/void.js
index 4f45c9f9f..808eedc32 100644
--- a/packages/slate-react/src/components/void.js
+++ b/packages/slate-react/src/components/void.js
@@ -66,26 +66,24 @@ class Void extends React.Component {
     }
 
     const spacer = (
-      <Tag
-        contentEditable
-        data-slate-spacer
-        suppressContentEditableWarning
-        style={style}
-      >
+      <Tag data-slate-spacer 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
-        data-slate-void
-        data-key={node.key}
-        contentEditable={readOnly ? null : false}
-      >
+      <Tag data-slate-void data-key={node.key}>
         {readOnly ? null : spacer}
         {content}
       </Tag>
diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-void.js b/packages/slate-react/test/rendering/fixtures/custom-block-void.js
index cce0b0a4a..2b19c2276 100644
--- a/packages/slate-react/test/rendering/fixtures/custom-block-void.js
+++ b/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 contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
+  <div data-slate-void="true">
+    <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>
diff --git a/packages/slate-react/test/rendering/fixtures/custom-inline-void.js b/packages/slate-react/test/rendering/fixtures/custom-inline-void.js
index 89b7d5329..f5aadf645 100644
--- a/packages/slate-react/test/rendering/fixtures/custom-inline-void.js
+++ b/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 contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
+    <span data-slate-void="true">
+      <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>