Merge pull request #84 from withspectrum/fix-code-block

Fix code block

Author: mxstbr

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,6 +69,7 @@ class CodeBlock extends PureComponent {
   cancelClicks = event => event.preventDefault();
 
   onSelectClick = event => {
+    this.setState({ isOpen: true });
     const { setReadOnly } = this.props.blockProps;
     event.stopPropagation();
     setReadOnly(true);
@@ -76,9 +79,7 @@ class CodeBlock extends PureComponent {
   };
 
   onClickOutside = () => {
-    if (!this.state.isOpen) {
-      return;
-    }
+    if (this.state.isOpen === false) return;
     this.setState({
       isOpen: false,
     });
@@ -90,6 +91,8 @@ class CodeBlock extends PureComponent {
 
     setReadOnly(false);
 
+    this.setState({ isOpen: false });
+
     const editorState = getEditorState();
     const selection = editorState.getSelection();
 
@@ -100,6 +103,7 @@ class CodeBlock extends PureComponent {
     const {
       languages,
       renderLanguageSelect,
+      getReadOnly,
       language: _language,
     } = this.props.blockProps;
 
@@ -125,12 +129,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

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

src/modifiers/handleNewCodeBlock.js

@@ -1,6 +1,6 @@
 import changeCurrentBlockType from "./changeCurrentBlockType";
 import insertEmptyBlock from "./insertEmptyBlock";
-import splitBlockAndChange from './splitBlockAndChange';
+import splitBlockAndChange from "./splitBlockAndChange";
 import { CODE_BLOCK_REGEX } from "../constants";
 
 const handleNewCodeBlock = editorState => {
@@ -20,8 +20,18 @@ const handleNewCodeBlock = editorState => {
     if (language) {
       data.language = language;
     }
-    const editorStateWithCodeBlock = changeCurrentBlockType(editorState, "code-block", "", data);
-    return splitBlockAndChange(editorStateWithCodeBlock, undefined, undefined, false)
+    const editorStateWithCodeBlock = changeCurrentBlockType(
+      editorState,
+      "code-block",
+      "",
+      data
+    );
+    return splitBlockAndChange(
+      editorStateWithCodeBlock,
+      undefined,
+      undefined,
+      false
+    );
   }
   const type = currentBlock.getType();
   if (type === "code-block" && isLast) {