Create prism plugin

Author: ngs

demo/client/components/DemoEditor/index.js

@@ -1,18 +1,5 @@
 import React, { Component } from 'react';
 import Editor from 'draft-js-plugins-editor';
-import PrismDecorator from 'draft-js-prism';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-scala';
-import 'prismjs/components/prism-go';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-kotlin';
-import 'prismjs/components/prism-perl';
-import 'prismjs/components/prism-ruby';
-import 'prismjs/components/prism-swift';
 
 import createMarkdownShortcutsPlugin from 'draft-js-markdown-shortcuts-plugin'; // eslint-disable-line
 import Draft, {
@@ -22,29 +9,15 @@ import Draft, {
   EditorState,
 } from 'draft-js';
 import styles from './styles.css';
-// import initialState from './initialState';
+import prismPlugin from '../../plugins/prism';
 
 window.Draft = Draft;
 
-const plugins = [createMarkdownShortcutsPlugin()];
-
-const decorators = [
-  new PrismDecorator({
-    prism: Prism,
-    getSyntax(block) {
-      const language = block.getData().get('language');
-      if (typeof Prism.languages[language] === 'object') {
-        return language;
-      }
-      return null;
-    },
-    render({ type, children }) {
-      return <span className={`prism-token token ${type}`}>{children}</span>;
-    }
-  })
+const plugins = [
+  prismPlugin,
+  createMarkdownShortcutsPlugin()
 ];
 
-// const contentState = ContentState.createFromBlockArray(convertFromRaw(initialState));
 const contentState = ContentState.createFromText('');
 const initialEditorState = EditorState.createWithContent(contentState);
 
@@ -78,7 +51,6 @@ export default class DemoEditor extends Component {
         {placeholder}
         <div className={styles.editor} onClick={this.focus}>
           <Editor
-            decorators={decorators}
             editorState={editorState}
             onChange={this.onChange}
             plugins={plugins}

demo/client/plugins/prism.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Prism from 'prismjs';
+import PrismDecorator from 'draft-js-prism';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-scala';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-kotlin';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-swift';
+
+const prismPlugin = {
+  decorators: [
+    new PrismDecorator({
+      prism: Prism,
+      getSyntax(block) {
+        const language = block.getData().get('language');
+        if (typeof Prism.languages[language] === 'object') {
+          return language;
+        }
+        return null;
+      },
+      render({ type, children }) {
+        return <span className={`prism-token token ${type}`}>{children}</span>;
+      }
+    })
+  ]
+};
+
+export default prismPlugin;