fix outsideclick in codeblock

Author: juliankrispel

src/components/Code/index.js

@@ -47,6 +47,8 @@ class CodeBlock extends PureComponent {
       focusKey: blockKey,
     });
 
+    this.setState({ isOpen: false });
+
     let content = editorState.getCurrentContent();
     content = Modifier.mergeBlockData(
       content,
@@ -67,12 +69,14 @@ class CodeBlock extends PureComponent {
   cancelClicks = event => event.preventDefault();
 
   onSelectClick = event => {
+    this.setState({ isOpen: true });
     const { setReadOnly } = this.props.blockProps;
     event.stopPropagation();
     setReadOnly(true);
   };
 
   onClickOutside = () => {
+    if (this.state.isOpen === false) return;
     const {
       getEditorState,
       setReadOnly,
@@ -81,6 +85,8 @@ class CodeBlock extends PureComponent {
 
     setReadOnly(false);
 
+    this.setState({ isOpen: false });
+
     const editorState = getEditorState();
     const selection = editorState.getSelection();
 
@@ -91,6 +97,7 @@ class CodeBlock extends PureComponent {
     const {
       languages,
       renderLanguageSelect,
+      getReadOnly,
       language: _language,
     } = this.props.blockProps;
 
@@ -116,12 +123,13 @@ class CodeBlock extends PureComponent {
           onClickOutside={this.onClickOutside}
           onClick={this.onSelectClick}
         >
-          {renderLanguageSelect({
-            selectedLabel,
-            selectedValue,
-            onChange: this.onChange,
-            options,
-          })}
+          {!getReadOnly() &&
+            renderLanguageSelect({
+              selectedLabel,
+              selectedValue,
+              onChange: this.onChange,
+              options,
+            })}
         </CodeSwitchContainer>
       </div>
     );

src/index.js

@@ -231,7 +231,7 @@ const createMarkdownPlugin = (_config = {}) => {
 
     blockRendererFn(
       block,
-      { setReadOnly, setEditorState, getEditorState, getEditorRef }
+      { setReadOnly, getReadOnly, setEditorState, getEditorState, getEditorRef }
     ) {
       switch (block.getType()) {
         case CHECKABLE_LIST_ITEM: {
@@ -253,6 +253,7 @@ const createMarkdownPlugin = (_config = {}) => {
               setEditorState,
               renderLanguageSelect: config.renderLanguageSelect,
               languages: config.languages,
+              getReadOnly,
               setReadOnly,
               language: block.getData().get("language"),
               getEditorState,