From 35e897865551d56cb52e13f2dc60dae47bafa8fb Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Sat, 14 Oct 2017 10:10:47 -0700
Subject: [PATCH] remove void spacers in readonly, add tests

---
 .../slate-react/src/components/content.js     |  2 +-
 packages/slate-react/src/components/void.js   | 18 +++----
 .../fixtures/readonly-custom-block-void.js    | 36 +++++++++++++
 .../fixtures/readonly-custom-inline-void.js   | 50 +++++++++++++++++++
 packages/slate-react/test/rendering/index.js  |  7 +--
 5 files changed, 99 insertions(+), 14 deletions(-)
 create mode 100644 packages/slate-react/test/rendering/fixtures/readonly-custom-block-void.js
 create mode 100644 packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js

diff --git a/packages/slate-react/src/components/content.js b/packages/slate-react/src/components/content.js
index 97a08c14e..916b73e61 100644
--- a/packages/slate-react/src/components/content.js
+++ b/packages/slate-react/src/components/content.js
@@ -825,7 +825,7 @@ class Content extends React.Component {
         key={this.tmp.forces}
         ref={this.ref}
         data-key={document.key}
-        contentEditable={!readOnly}
+        contentEditable={readOnly ? null : true}
         suppressContentEditableWarning
         className={className}
         onBeforeInput={this.onBeforeInput}
diff --git a/packages/slate-react/src/components/void.js b/packages/slate-react/src/components/void.js
index 24d04fe15..cc3011ee4 100644
--- a/packages/slate-react/src/components/void.js
+++ b/packages/slate-react/src/components/void.js
@@ -87,6 +87,7 @@ class Void extends React.Component {
    */
 
   onDragEnter = (event) => {
+    if (this.props.readOnly) return
     event.preventDefault()
   }
 
@@ -97,6 +98,7 @@ class Void extends React.Component {
    */
 
   onDragOver = (event) => {
+    if (this.props.readOnly) return
     event.preventDefault()
   }
 
@@ -126,13 +128,9 @@ class Void extends React.Component {
     const { props } = this
     const { children, node, readOnly } = props
     const Tag = node.kind == 'block' ? 'div' : 'span'
-    let style
-
-    if (!readOnly) {
-      style = {
-        height: '0',
-        color: 'transparent'
-      }
+    const style = {
+      height: '0',
+      color: 'transparent'
     }
 
     this.debug('render', { props })
@@ -146,10 +144,10 @@ class Void extends React.Component {
         onDragEnter={this.onDragEnter}
         onDragStart={this.onDragStart}
       >
-        <Tag style={style}>
+        {!readOnly && <Tag style={style}>
           {this.renderText()}
-        </Tag>
-        <Tag contentEditable={false}>
+        </Tag>}
+        <Tag contentEditable={readOnly ? null : false}>
           {children}
         </Tag>
       </Tag>
diff --git a/packages/slate-react/test/rendering/fixtures/readonly-custom-block-void.js b/packages/slate-react/test/rendering/fixtures/readonly-custom-block-void.js
new file mode 100644
index 000000000..bbf489800
--- /dev/null
+++ b/packages/slate-react/test/rendering/fixtures/readonly-custom-block-void.js
@@ -0,0 +1,36 @@
+/** @jsx h */
+
+import React from 'react'
+import h from '../../helpers/h'
+
+export const schema = {
+  nodes: {
+    image: (props) => {
+      return (
+        React.createElement('img', { src: props.node.data.get('src'), ...props.attributes })
+      )
+    }
+  }
+}
+
+export const props = {
+  readOnly: true,
+}
+
+export const state = (
+  <state>
+    <document>
+      <image src="https://example.com/image.png" />
+    </document>
+  </state>
+)
+
+export const output = `
+<div data-slate-editor="true">
+  <div data-slate-void="true">
+    <div>
+      <img src="https://example.com/image.png">
+    </div>
+  </div>
+</div>
+`.trim()
diff --git a/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js b/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js
new file mode 100644
index 000000000..fdca540fb
--- /dev/null
+++ b/packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js
@@ -0,0 +1,50 @@
+/** @jsx h */
+
+import React from 'react'
+import h from '../../helpers/h'
+
+export const schema = {
+  nodes: {
+    emoji: (props) => {
+      return (
+        React.createElement('img', props.attributes)
+      )
+    }
+  }
+}
+
+export const props = {
+  readOnly: true,
+}
+
+export const state = (
+  <state>
+    <document>
+      <paragraph>
+        <emoji />
+      </paragraph>
+    </document>
+  </state>
+)
+
+export const output = `
+<div data-slate-editor="true">
+  <div style="position:relative">
+    <span>
+      <span>
+        <span data-slate-zero-width="true">&#x200A;</span>
+      </span>
+    </span>
+    <span data-slate-void="true">
+      <span>
+        <img>
+      </span>
+    </span>
+    <span>
+      <span>
+        <span data-slate-zero-width="true">&#x200A;</span>
+      </span>
+    </span>
+  </div>
+</div>
+`.trim()
diff --git a/packages/slate-react/test/rendering/index.js b/packages/slate-react/test/rendering/index.js
index a18a97f90..93372ea40 100644
--- a/packages/slate-react/test/rendering/index.js
+++ b/packages/slate-react/test/rendering/index.js
@@ -19,14 +19,15 @@ describe('rendering', () => {
   for (const test of tests) {
     it(test, async () => {
       const module = require(resolve(dir, test))
-      const { state, schema, output } = module
-      const props = {
+      const { state, schema, output, props } = module
+      const p = {
         state,
         schema,
         onChange() {},
+        ...(props || {}),
       }
 
-      const string = ReactDOM.renderToStaticMarkup(<Editor {...props} />)
+      const string = ReactDOM.renderToStaticMarkup(<Editor {...p} />)
       const expected = parse5.serialize(parse5.parseFragment(output))
         .trim()
         .replace(/\n/gm, '')