fix webkit modify styles for read-only mode, closes #137

examples/read-only/index.js

@@ -17,7 +17,7 @@ class ReadOnly extends React.Component {
    */
 
   state = {
-    state: Plain.deserialize('This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing persmissions.')
+    state: Plain.deserialize('This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing permissions.')
   };
 
   /**

lib/components/content.js

@@ -399,17 +399,18 @@ class Content extends React.Component {
       .map(node => this.renderNode(node))
       .toArray()
 
-    const style = {
+    let style = {
-      ...this.props.style,
-      // COMPAT: Prevent iOS from showing the BIU formatting menu, which causes
-      // the internal state to get out of sync in weird ways.
-      WebkitUserModify: 'read-write-plaintext-only',
       // Prevent the default outline styles.
       outline: 'none',
       // Preserve adjacent whitespace and new lines.
       whiteSpace: 'pre-wrap',
       // Allow words to break if they are too long.
-      wordWrap: 'break-word'
+      wordWrap: 'break-word',
+      // COMPAT: Prevent iOS from showing the BIU formatting menu, which causes
+      // the internal state to get out of sync in weird ways.
+      ...(readOnly ? {} : { WebkitUserModify: 'read-write-plaintext-only' }),
+      // Allow for passed-in styles to override anything.
+      ...this.props.style,
     }
 
     return (