- add readme, remove config argument where it isn't used, made languages configurable

Author: juliankrispel

README.md

@@ -17,6 +17,48 @@ A [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plu
 npm i --save draft-js-markdown-plugin
 ```
 
+## Options
+The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
+
+
+### `renderLanguageSelect`
+
+```js
+renderLanguageSelect = ({
+  // Array of language options
+  options: Array<{ label, value }>,
+  // Callback to select an option
+  onChange: (selectedValue: string) => void,
+  // Value of selected option
+  selectedValue: string,
+  // Label of selected option
+  selectedLabel: string
+}) => React.Node
+```
+
+Code blocks render a select to switch syntax highlighting - `renderLanguageSelect` is a render function that lets you override how this is rendered. 
+
+Here's an example:
+
+```
+import createMarkdownPlugin from 'draft-js-markdown-plugin';
+
+const renderLanguageSelect = ({ options, onChange, selectedValue }) => (
+  <select value={selectedValue} onChange={onChange}>
+    {options.map(({ label, value }) => (
+      <option key={value} value={value}>
+        {label}
+      </option>
+    ))}
+  </select>
+);
+
+const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })
+```
+
+### `languages`
+Dictionary for languages available to code block switcher
+
 ## Usage
 
 ```js

demo/client/components/DemoEditor/index.js

@@ -53,6 +53,12 @@ const renderLanguageSelect = ({
   </div>
 );
 
+const languages = {
+  js: "JavaScript",
+  kotlin: "Kotlin",
+  mathml: "MathML",
+};
+
 const plugins = [
   prismPlugin,
   createMarkdownShortcutsPlugin({ renderLanguageSelect }),

src/components/Code/index.js

@@ -8,25 +8,6 @@ const alias = {
   jsx: "js",
 };
 
-const languages = {
-  bash: "Bash",
-  c: "C",
-  cpp: "C++",
-  css: "CSS",
-  go: "Go",
-  html: "HTML",
-  java: "Java",
-  js: "JavaScript",
-  kotlin: "Kotlin",
-  mathml: "MathML",
-  perl: "Perl",
-  ruby: "Ruby",
-  scala: "Scala",
-  sql: "SQL",
-  svg: "SVG",
-  swift: "Swift",
-};
-
 const CodeSwitchContainer = enhanceWithClickOutside(
   class SwitchContainer extends PureComponent {
     handleClickOutside() {
@@ -103,12 +84,15 @@ class CodeBlock extends PureComponent {
     const editorState = getEditorState();
     const selection = editorState.getSelection();
 
-    setEditorState(EditorState.forceSelection(newEditorState, selection));
+    setEditorState(EditorState.forceSelection(editorState, selection));
   };
 
   render() {
-    const { languages, blockProps } = this.props;
-    const { renderLanguageSelect, language: _language } = blockProps;
+    const {
+      languages,
+      renderLanguageSelect,
+      language: _language,
+    } = this.props.blockProps;
 
     const language = alias[_language] || _language;
     const selectedLabel = languages[language];
@@ -144,8 +128,4 @@ class CodeBlock extends PureComponent {
   }
 }
 
-CodeBlock.defaultProps = {
-  languages,
-};
-
 export default CodeBlock;

src/decorators/image/index.js

@@ -1,8 +1,8 @@
 import createImageStrategy from "./imageStrategy";
 import Image from "../../components/Image";
 
-const createImageDecorator = (config, store) => ({
-  strategy: createImageStrategy(config, store),
+const createImageDecorator = () => ({
+  strategy: createImageStrategy(),
   component: Image,
 });
 

src/decorators/link/index.js

@@ -1,8 +1,8 @@
 import createLinkStrategy from "./linkStrategy";
 import Link from "../../components/Link";
 
-const createLinkDecorator = (config, store) => ({
-  strategy: createLinkStrategy(config, store),
+const createLinkDecorator = () => ({
+  strategy: createLinkStrategy(),
   component: Link,
 });
 

src/index.js

@@ -24,6 +24,25 @@ import createImageDecorator from "./decorators/image";
 import { replaceText } from "./utils";
 import { CODE_BLOCK_REGEX, CODE_BLOCK_TYPE } from "./constants";
 
+const defaultLanguages = {
+  bash: "Bash",
+  c: "C",
+  cpp: "C++",
+  css: "CSS",
+  go: "Go",
+  html: "HTML",
+  java: "Java",
+  js: "JavaScript",
+  kotlin: "Kotlin",
+  mathml: "MathML",
+  perl: "Perl",
+  ruby: "Ruby",
+  scala: "Scala",
+  sql: "SQL",
+  svg: "SVG",
+  swift: "Swift",
+};
+
 const INLINE_STYLE_CHARACTERS = [" ", "*", "_"];
 
 const defaultRenderSelect = ({ options, onChange, selectedValue }) => (
@@ -110,6 +129,7 @@ function checkReturnForState(editorState, ev) {
 
 const defaultConfig = {
   renderLanguageSelect: defaultRenderSelect,
+  languages: defaultLanguages,
 };
 
 const createMarkdownPlugin = (_config = {}) => {
@@ -128,10 +148,7 @@ const createMarkdownPlugin = (_config = {}) => {
         wrapper: <pre spellCheck="false" />,
       },
     }).merge(checkboxBlockRenderMap),
-    decorators: [
-      createLinkDecorator(config, store),
-      createImageDecorator(config, store),
-    ],
+    decorators: [createLinkDecorator(), createImageDecorator()],
     initialize({ setEditorState, getEditorState }) {
       store.setEditorState = setEditorState;
       store.getEditorState = getEditorState;
@@ -169,6 +186,7 @@ const createMarkdownPlugin = (_config = {}) => {
             props: {
               setEditorState,
               renderLanguageSelect: config.renderLanguageSelect,
+              languages: config.languages,
               setReadOnly,
               language: block.getData().get("language"),
               getEditorState,