readonly mode for atomic blocks. Added editorProps to pluginProps

Author: juliankrispel

packages/atomic-block/.flowconfig

@@ -4,6 +4,7 @@
 .*/node_modules/@octokit/.*
 .*/node_modules/@types/.*
 .*/node_modules/\([a-c]\|[g-h]\|e\|[j-z]\).*/.*
+.*/core/src/.*
 .*/EditorContainer/.*
 
 

packages/atomic-block/src/index.js

@@ -141,22 +141,32 @@ class AtomicBlockPlugin extends Component<Props, State> {
   }
 
   renderChildren = (props: Object) => {
-    const { editorState, setEditorState } = this.props
+    const {
+      editorProps: { readOnly },
+      editorState,
+      setEditorState,
+    } = this.props
 
     const blockKey = props.block.getKey()
     const selection = editorState.getSelection()
     const isFocused =
-      selection.getAnchorKey() === blockKey && selection.isCollapsed()
-
-    return (
-      <AtomicBlock
-        onDeleteBlock={() => this.deleteAtomicBlock(blockKey)}
-        setEditorState={setEditorState}
-        isFocused={isFocused}
-        onClick={() => this.focusBlock(blockKey)}>
-        {this.props.children({ ...props, isFocused })}
-      </AtomicBlock>
-    )
+      selection.getAnchorKey() === blockKey &&
+      selection.isCollapsed() &&
+      readOnly !== true
+
+    if (readOnly) {
+      return this.props.children({ ...props, isFocused })
+    } else {
+      return (
+        <AtomicBlock
+          onDeleteBlock={() => this.deleteAtomicBlock(blockKey)}
+          setEditorState={setEditorState}
+          isFocused={isFocused}
+          onClick={() => this.focusBlock(blockKey)}>
+          {this.props.children({ ...props, isFocused })}
+        </AtomicBlock>
+      )
+    }
   }
 
   handleReturn = (event, editorState) => {
@@ -166,7 +176,12 @@ class AtomicBlockPlugin extends Component<Props, State> {
   }
 
   blockRendererFn = block => {
-    const { type, editorState } = this.props
+    const {
+      type,
+      editorProps: { readOnly },
+      editorState,
+    } = this.props
+
     const content = editorState.getCurrentContent()
 
     if (block.getType() === 'atomic') {
@@ -180,7 +195,7 @@ class AtomicBlockPlugin extends Component<Props, State> {
       if (entityType.toLowerCase() === type.toLowerCase()) {
         return {
           component: this.renderChildren,
-          editable: false,
+          editable: readOnly !== true,
           props: data,
         }
       }

packages/core/src/EditorContainer.js

@@ -22,7 +22,7 @@ export const Context: ContextType = createContext({})
 
 const omitUndefined = obj =>
   Object.keys(obj).reduce(
-    (acc, key) => (obj[key] !== undefined ? { ...acc, key: obj[key] } : acc),
+    (acc, key) => (obj[key] !== undefined ? { ...acc, [key]: obj[key] } : acc),
     {}
   )
 
@@ -119,6 +119,30 @@ export default class EditorContainer extends Component<Props, State> {
       webDriverTestID,
     } = props
 
+    const passedProps = omitUndefined({
+      autoCapitalize,
+      autoComplete,
+      autoCorrect,
+      readOnly,
+      spellCheck,
+      stripPastedStyles,
+      editorKey,
+      tabIndex,
+      placeholder,
+      textAlignment,
+      textDirectionality,
+
+      ariaActiveDescendantID,
+      ariaAutoComplete,
+      ariaControls,
+      ariaDescribedBy,
+      ariaExpanded,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaMultiline,
+      webDriverTestID,
+    })
+
     return {
       ...state,
       editorState:
@@ -129,29 +153,7 @@ export default class EditorContainer extends Component<Props, State> {
           : editorState,
       editorProps: {
         ...state.editorProps,
-        ...omitUndefined({
-          autoCapitalize,
-          autoComplete,
-          autoCorrect,
-          readOnly,
-          spellCheck,
-          stripPastedStyles,
-          editorKey,
-          tabIndex,
-          placeholder,
-          textAlignment,
-          textDirectionality,
-
-          ariaActiveDescendantID,
-          ariaAutoComplete,
-          ariaControls,
-          ariaDescribedBy,
-          ariaExpanded,
-          ariaLabel,
-          ariaLabelledBy,
-          ariaMultiline,
-          webDriverTestID,
-        }),
+        ...passedProps,
       },
     }
   }
@@ -327,6 +329,7 @@ export default class EditorContainer extends Component<Props, State> {
     const pluginProps = {
       registerPlugin: this.registerPlugin,
       setEditorState: this.onChange,
+      editorProps: this.state.editorProps,
       editorRef: this.editorRef,
       editorState: this.state.editorState,
       setEditorProps: editorProps => {

packages/core/src/types.js

@@ -1,8 +1,9 @@
 // @flow
 
-import type { Context } from 'react'
+import type { Ref, Context } from 'react'
 import type { BidiDirection } from 'fbjs/lib/UnicodeBidiDirection'
 import type { DraftTextAlignment } from 'draft-js/lib/DraftTextAlignment'
+import { Editor as DraftEditor } from 'draft-js'
 import type { EditorState } from 'draft-js'
 
 export type StaticProps = {
@@ -32,7 +33,9 @@ export type StaticProps = {
 export type PluginProps = {
   registerPlugin: DraftEditorProps => () => void,
   setEditorState: EditorState => void,
+  editorRef: Ref<DraftEditor>,
   editorState: EditorState,
+  editorProps: StaticProps,
   setEditorProps: (editorProps: StaticProps) => void,
 }