init

Author: juliankrispel

demo/client/components/DemoEditor/index.js

@@ -52,7 +52,7 @@ export default class DemoEditor extends Component {
     const { editorState } = this.state;
     return (
       <div className={styles.root}>
-        <div className={styles.editor} onClick={this.focus}>
+        <div className={styles.editor}>
           <Editor
             editorState={editorState}
             onChange={this.onChange}

src/components/Code/index.js

@@ -0,0 +1,75 @@
+import React, { PureComponent } from "react";
+import { Map } from "immutable";
+import { EditorState, EditorBlock, Modifier } from "draft-js";
+
+const languages = {
+  bash: "Bash",
+  c: "C",
+  cpp: "C++",
+  css: "CSS",
+  go: "Go",
+  html: "HTML",
+  java: "Java",
+  javascript: "JavaScript",
+  js: "JavaScript",
+  kotlin: "Kotlin",
+  mathml: "MathML",
+  perl: "Perl",
+  ruby: "Ruby",
+  scala: "Scala",
+  sql: "SQL",
+  svg: "SVG",
+  swift: "Swift",
+};
+
+class CodeBlock extends PureComponent {
+  onChange = ev => {
+    ev.preventDefault();
+    const blockKey = this.props.block.getKey();
+    const { getEditorState, setEditorState } = this.props.blockProps;
+    const editorState = getEditorState();
+    const selection = editorState.getSelection();
+    const language = ev.currentTarget.value;
+
+    let content = editorState.getCurrentContent();
+    content = Modifier.mergeBlockData(content, selection, Map({ language }));
+
+    const newEditorState = EditorState.push(
+      editorState,
+      content,
+      "change-block-data"
+    );
+
+    // setTimeout(() => {
+    //   setEditorState(EditorState.forceSelection(
+    //     newEditorState,
+    //     content.getSelectionAfter()
+    //   ))
+    // }, 3000)
+  };
+
+  render() {
+    const { language } = this.props.blockProps;
+
+    return (
+      <div>
+        <EditorBlock {...this.props} />
+        <div contentEditable={false}>
+          <select value={language} onChange={this.onChange}>
+            {Object.keys(this.props.languages).map(lang => (
+              <option key={lang} value={lang}>
+                {this.props.languages[lang]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    );
+  }
+}
+
+CodeBlock.defaultProps = {
+  languages,
+};
+
+export default CodeBlock;

src/constants.js

@@ -6,3 +6,5 @@ export const inlineMatchers = {
   CODE: [/`([^`]+)`/g],
   STRIKETHROUGH: [/~~([^(?:~~)]+)~~/g],
 };
+
+export const CODE_BLOCK_TYPE = "code-block";

src/index.js

@@ -8,6 +8,7 @@ import {
 
 import { Map } from "immutable";
 
+import CodeBlock from "./components/Code";
 import adjustBlockDepth from "./modifiers/adjustBlockDepth";
 import handleBlockType from "./modifiers/handleBlockType";
 import handleInlineStyle from "./modifiers/handleInlineStyle";
@@ -21,7 +22,7 @@ import changeCurrentBlockType from "./modifiers/changeCurrentBlockType";
 import createLinkDecorator from "./decorators/link";
 import createImageDecorator from "./decorators/image";
 import { replaceText } from "./utils";
-import { CODE_BLOCK_REGEX } from "./constants";
+import { CODE_BLOCK_REGEX, CODE_BLOCK_TYPE } from "./constants";
 
 const INLINE_STYLE_CHARACTERS = [" ", "*", "_"];
 
@@ -104,7 +105,7 @@ const createMarkdownPlugin = (config = {}) => {
     blockRenderMap: Map({
       "code-block": {
         element: "code",
-        wrapper: <pre spellCheck={"false"} />,
+        wrapper: <pre spellCheck="false" />,
       },
     }).merge(checkboxBlockRenderMap),
     decorators: [
@@ -139,6 +140,17 @@ const createMarkdownPlugin = (config = {}) => {
             },
           };
         }
+        case CODE_BLOCK_TYPE: {
+          return {
+            component: CodeBlock,
+            props: {
+              setEditorState,
+              language: block.getData().get("language"),
+              getEditorState,
+            },
+          };
+        }
+
         default:
           return null;
       }