Update nodes on readOnly editor property change (#544)

* Propagate `readOnly` editor property to node components.
Update nodes when `readOnly` changes.

* Add a comment describing the reason of the check.

* Move down the `readOnly` status change check.

src/components/content.js

@@ -761,7 +761,7 @@ class Content extends React.Component {
    */
 
   renderNode = (node) => {
-    const { editor, schema, state } = this.props
+    const { editor, readOnly, schema, state } = this.props
 
     return (
       <Node
@@ -771,6 +771,7 @@ class Content extends React.Component {
         schema={schema}
         state={state}
         editor={editor}
+        readOnly={readOnly}
       />
     )
   }

src/components/node.js

@@ -34,6 +34,7 @@ class Node extends React.Component {
     editor: React.PropTypes.object.isRequired,
     node: React.PropTypes.object.isRequired,
     parent: React.PropTypes.object.isRequired,
+    readOnly: React.PropTypes.bool.isRequired,
     schema: React.PropTypes.object.isRequired,
     state: React.PropTypes.object.isRequired
   }
@@ -96,6 +97,10 @@ class Node extends React.Component {
       return true
     }
 
+    // If the `readOnly` status has changed, we need to re-render in case there is
+    // any user-land logic that depends on it, like nested editable contents.
+    if (nextProps.readOnly !== this.props.readOnly) return true
+
     // If the node has changed, update. PERF: There are certain cases where the
     // node instance will have changed, but it's properties will be exactly the
     // same (copy-paste, delete backwards, etc.) in which case this will not
@@ -253,6 +258,7 @@ class Node extends React.Component {
         node={child}
         parent={this.props.node}
         editor={this.props.editor}
+        readOnly={this.props.readOnly}
         schema={this.props.schema}
         state={this.props.state}
       />
@@ -266,7 +272,7 @@ class Node extends React.Component {
    */
 
   renderElement = () => {
-    const { editor, node, parent, state } = this.props
+    const { editor, node, parent, readOnly, state } = this.props
     const { Component } = this.state
     const children = node.nodes
       .map(child => this.renderNode(child))
@@ -293,6 +299,7 @@ class Node extends React.Component {
         editor={editor}
         parent={parent}
         node={node}
+        readOnly={readOnly}
         state={state}
       >
         {children}