remove void spacers in readonly, add tests

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}

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>

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()

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()

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, '')