Remove prismjs from dependencies

Author: ngs

demo/client/components/DemoEditor/index.js

@@ -1,5 +1,19 @@
 import React, { Component } from 'react';
-import Editor from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
+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 {
   // convertToRaw,
@@ -10,26 +24,37 @@ import {
 import styles from './styles.css';
 // import initialState from './initialState';
 
-const markdownShortcutsPlugin = createMarkdownShortcutsPlugin({
-  onChangeCheckbox: (e) => {
-    console.info('Checkbox changed', e); // eslint-disable-line
-  }
-});
+const plugins = [createMarkdownShortcutsPlugin()];
 
-const plugins = [markdownShortcutsPlugin];
+const decorators = [
+  new PrismDecorator({
+    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 contentState = ContentState.createFromBlockArray(convertFromRaw(initialState));
 const contentState = ContentState.createFromText('');
+const initialEditorState = EditorState.createWithContent(contentState);
 
 export default class DemoEditor extends Component {
 
   state = {
-    editorState: EditorState.createWithContent(contentState)
+    editorState: initialEditorState
   };
 
   componentDidMount = () => {
-    if (this.editor) {
-      this.editor.focus();
+    const { editor } = this;
+    if (editor) {
+      setTimeout(editor.focus.bind(editor), 1000);
     }
   }
 
@@ -47,7 +72,8 @@ export default class DemoEditor extends Component {
         {placeholder}
         <div className={styles.editor} onClick={this.focus}>
           <Editor
-            editorState={this.state.editorState}
+            decorators={decorators}
+            editorState={editorState}
             onChange={this.onChange}
             plugins={plugins}
             spellCheck

package.json

@@ -46,7 +46,8 @@
     "css-loader": "^0.26.0",
     "css-modules-require-hook": "^4.0.5",
     "dirty-chai": "^1.2.2",
-    "draft-js-plugins-editor": "^2.0.0-beta5",
+    "draft-js-plugins-editor": "2.0.0-beta7",
+    "draft-js-prism": "^1.0.3",
     "enzyme": "^2.6.0",
     "eslint": "^3.11.1",
     "eslint-config-airbnb": "^13.0.0",
@@ -62,6 +63,7 @@
     "jsdom": "^9.8.3",
     "mocha": "^3.2.0",
     "postcss-loader": "^1.1.1",
+    "prismjs": "^1.6.0",
     "react-addons-pure-render-mixin": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
     "rimraf": "^2.5.4",
@@ -72,12 +74,13 @@
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.2"
   },
+  "peerDependencies": {
+    "draft-js-plugins-editor": "2.0.0-beta7"
+  },
   "dependencies": {
     "decorate-component-with-props": "^1.0.2",
     "draft-js": "^0.9.1",
     "draft-js-checkable-list-item": "^2.0.2",
-    "draft-js-prism": "^1.0.3",
-    "prismjs": "^1.6.0",
     "react": "^15.4.1",
     "react-dom": "^15.4.1"
   }

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   blockRenderMap as checkboxBlockRenderMap, CheckableListItem, CheckableListItemUtils, CHECKABLE_LIST_ITEM
 } from 'draft-js-checkable-list-item';
-import PrismDecorator from 'draft-js-prism';
 
 import { Map } from 'immutable';
 
@@ -29,15 +28,7 @@ const createMarkdownShortcutsPlugin = (config = {}) => {
     }).merge(checkboxBlockRenderMap),
     decorators: [
       createLinkDecorator(config, store),
-      createImageDecorator(config, store),
-      new PrismDecorator({
-        getSyntax(block) {
-          return block.getData().get('language');
-        },
-        render({ type, children }) {
-          return <span className={`prism-token token ${type}`}>{children}</span>;
-        }
-      })
+      createImageDecorator(config, store)
     ],
     initialize({ setEditorState, getEditorState }) {
       store.setEditorState = setEditorState;

src/modifiers/handleNewCodeBlock.js

@@ -1,31 +1,14 @@
-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 changeCurrentBlockType from './changeCurrentBlockType';
 import insertEmptyBlock from './insertEmptyBlock';
 
-
 const handleNewCodeBlock = (editorState) => {
   const contentState = editorState.getCurrentContent();
   const selection = editorState.getSelection();
   const key = selection.getStartKey();
   const currentBlock = contentState.getBlockForKey(key);
   const matchData = /^```([\w-]+)?$/.exec(currentBlock.getText());
   if (matchData && selection.getEndOffset() === currentBlock.getLength()) {
-    let language = matchData[1];
-    if (typeof Prism.languages[language] !== 'object') {
-      language = null;
-    }
+    const language = matchData[1];
     return changeCurrentBlockType(editorState, 'code-block', '', { language });
   }
   const type = currentBlock.getType();