fixed readonly change, styled demo select

Author: juliankrispel

demo/client/components/DemoEditor/index.js

@@ -27,7 +27,36 @@ const prismPlugin = createPrismPlugin({
   prism: Prism,
 });
 
-const plugins = [prismPlugin, createMarkdownShortcutsPlugin()];
+const renderLanguageSelect = ({
+  options,
+  onChange,
+  selectedValue,
+  selectedLabel,
+}) => (
+  <div className={styles.switcherContainer}>
+    <div className={styles.switcher}>
+      <select
+        className={styles.switcherSelect}
+        value={selectedValue}
+        onChange={onChange}
+      >
+        {options.map(({ label, value }) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </select>
+      <div className={styles.switcherLabel}>
+        {selectedLabel} {String.fromCharCode(9662)}
+      </div>
+    </div>
+  </div>
+);
+
+const plugins = [
+  prismPlugin,
+  createMarkdownShortcutsPlugin({ renderLanguageSelect }),
+];
 
 const initialEditorState = EditorState.createWithContent(
   convertFromRaw(initialState)
@@ -45,7 +74,6 @@ export default class DemoEditor extends Component {
   };
 
   focus = () => {
-    console.log("damnit");
     this.editor.focus();
   };
 

demo/client/components/DemoEditor/styles.css

@@ -11,3 +11,37 @@
   height: 100%;
   width: 100%;
 }
+
+pre {
+  background: #f9f9f9;
+  padding: 0.2em 0.5em;
+  position: relative;
+}
+
+.switcherContainer {
+  position: absolute;
+  text-align: right;
+  bottom: -23px;
+  right: 3px;
+}
+
+.switcher {
+  display: inline-block;
+  font-family: sans-serif;
+  color: #ccc;
+  letter-spacing: 0.05em;
+  font-size: 12px;
+  padding: 0.3em;
+  cursor: pointer;
+  position: relative;
+}
+
+.switcherSelect {
+  position: absolute;
+  top: 0;
+  cursor: pointer;
+  opacity: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package.json

@@ -96,7 +96,6 @@
     "draft-js-plugins-editor": "~2.0.0-rc.1 || 2.0.0-rc2 || 2.0.0-rc1 || 2.0.0-beta12",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
-    "react-modal": "3.x",
     "react-portal": "^4.1.4"
   },
   "contributors": [
@@ -108,7 +107,6 @@
     "draft-js-checkable-list-item": "^2.0.5",
     "draft-js-prism-plugin": "^0.1.1",
     "immutable": "~3.7.4",
-    "react-modal": "^3.3.2",
-    "react-popover": "^0.4.0"
+    "react-click-outside": "^3.0.1"
   }
 }

src/components/Code/index.js

@@ -1,7 +1,12 @@
 import React, { PureComponent } from "react";
 import { Map } from "immutable";
 import { EditorState, EditorBlock, Modifier } from "draft-js";
-import Modal from "react-modal";
+import enhanceWithClickOutside from "react-click-outside";
+
+const alias = {
+  javascript: "js",
+  jsx: "js",
+};
 
 const languages = {
   bash: "Bash",
@@ -11,7 +16,6 @@ const languages = {
   go: "Go",
   html: "HTML",
   java: "Java",
-  javascript: "JavaScript",
   js: "JavaScript",
   kotlin: "Kotlin",
   mathml: "MathML",
@@ -23,7 +27,21 @@ const languages = {
   swift: "Swift",
 };
 
-const hidden = {};
+const CodeSwitchContainer = enhanceWithClickOutside(
+  class SwitchContainer extends PureComponent {
+    handleClickOutside() {
+      this.props.onClickOutside();
+    }
+
+    render() {
+      return (
+        <div contentEditable={false} onClick={this.props.onClick}>
+          {this.props.children}
+        </div>
+      );
+    }
+  }
+);
 
 class CodeBlock extends PureComponent {
   state = {
@@ -36,57 +54,91 @@ class CodeBlock extends PureComponent {
     const blockKey = this.props.block.getKey();
     const {
       getEditorState,
+      setReadOnly,
       setEditorState,
-      getEditorRef,
     } = this.props.blockProps;
+
     const editorState = getEditorState();
     const selection = editorState.getSelection();
     const language = ev.currentTarget.value;
+    const blockSelection = selection.merge({
+      anchorKey: blockKey,
+      focusKey: blockKey,
+    });
 
     let content = editorState.getCurrentContent();
-    content = Modifier.mergeBlockData(content, selection, Map({ language }));
+    content = Modifier.mergeBlockData(
+      content,
+      blockSelection,
+      Map({ language })
+    );
+    setReadOnly(false);
 
     const newEditorState = EditorState.push(
       editorState,
       content,
       "change-block-data"
     );
 
-    setTimeout(() => {
-      setEditorState(
-        EditorState.forceSelection(newEditorState, content.getSelectionAfter())
-      );
-    }, 2);
+    setEditorState(EditorState.forceSelection(newEditorState, selection));
   };
 
   cancelClicks = event => event.preventDefault();
 
-  preventBubbling = event => event.stopPropagation();
+  onSelectClick = event => {
+    const { setReadOnly } = this.props.blockProps;
+    event.stopPropagation();
+    setReadOnly(true);
+  };
+
+  onClickOutside = () => {
+    const {
+      getEditorState,
+      setReadOnly,
+      setEditorState,
+    } = this.props.blockProps;
+
+    setReadOnly(false);
+
+    const editorState = getEditorState();
+    const selection = editorState.getSelection();
 
-  wat = () => {
-    console.log("yo wtf");
+    setEditorState(EditorState.forceSelection(newEditorState, selection));
   };
 
   render() {
-    const { language } = this.props.blockProps;
+    const { languages, blockProps } = this.props;
+    const { renderLanguageSelect, language: _language } = blockProps;
+
+    const language = alias[_language] || _language;
+    const selectedLabel = languages[language];
+    const selectedValue = language;
+
+    const options = Object.keys(languages).reduce(
+      (acc, val) => [
+        ...acc,
+        {
+          label: languages[val],
+          value: val,
+        },
+      ],
+      []
+    );
 
     return (
       <div>
         <EditorBlock {...this.props} />
-        <div>
-          <select
-            contentEditable={false}
-            onClick={this.preventBubbling}
-            value={language}
-            onChange={this.onChange}
-          >
-            {Object.keys(this.props.languages).map(lang => (
-              <option key={lang} value={lang}>
-                {this.props.languages[lang]}
-              </option>
-            ))}
-          </select>
-        </div>
+        <CodeSwitchContainer
+          onClickOutside={this.onClickOutside}
+          onClick={this.onSelectClick}
+        >
+          {renderLanguageSelect({
+            selectedLabel,
+            selectedValue,
+            onChange: this.onChange,
+            options,
+          })}
+        </CodeSwitchContainer>
       </div>
     );
   }

src/index.js

@@ -26,6 +26,16 @@ import { CODE_BLOCK_REGEX, CODE_BLOCK_TYPE } from "./constants";
 
 const INLINE_STYLE_CHARACTERS = [" ", "*", "_"];
 
+const defaultRenderSelect = ({ options, onChange, selectedValue }) => (
+  <select value={selectedValue} onChange={onChange}>
+    {options.map(({ label, value }) => (
+      <option key={value} value={value}>
+        {label}
+      </option>
+    ))}
+  </select>
+);
+
 function inCodeBlock(editorState) {
   const startKey = editorState.getSelection().getStartKey();
   if (startKey) {
@@ -98,8 +108,18 @@ function checkReturnForState(editorState, ev) {
   return newEditorState;
 }
 
-const createMarkdownPlugin = (config = {}) => {
+const defaultConfig = {
+  renderLanguageSelect: defaultRenderSelect,
+};
+
+const createMarkdownPlugin = (_config = {}) => {
   const store = {};
+
+  const config = {
+    ...defaultConfig,
+    ..._config,
+  };
+
   return {
     store,
     blockRenderMap: Map({
@@ -126,7 +146,10 @@ const createMarkdownPlugin = (config = {}) => {
       return null;
     },
 
-    blockRendererFn(block, { setEditorState, getEditorState, getEditorRef }) {
+    blockRendererFn(
+      block,
+      { setReadOnly, setEditorState, getEditorState, getEditorRef }
+    ) {
       switch (block.getType()) {
         case CHECKABLE_LIST_ITEM: {
           return {
@@ -144,8 +167,9 @@ const createMarkdownPlugin = (config = {}) => {
           return {
             component: CodeBlock,
             props: {
-              getEditorRef,
               setEditorState,
+              renderLanguageSelect: config.renderLanguageSelect,
+              setReadOnly,
               language: block.getData().get("language"),
               getEditorState,
             },