Merge pull request #5 from ngs/fix-prism

Fix code block handling return

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;

package.json

@@ -106,6 +106,7 @@
     "decorate-component-with-props": "^1.0.2",
     "draft-js": "^0.9.1",
     "draft-js-checkable-list-item": "^2.0.2",
+    "immutable": "^3.8.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1"
   }

src/__test__/plugin-test.js

@@ -167,8 +167,8 @@ describe('draft-js-markdown-shortcuts-plugin', () => {
             entityMap: {},
             blocks: [{
               key: 'item1',
-              text: '',
-              type: '```',
+              text: '```',
+              type: 'unstyled',
               depth: 0,
               inlineStyleRanges: [],
               entityRanges: [],

src/modifiers/__test__/handleNewCodeBlock-test.js

@@ -96,17 +96,17 @@ describe('handleNewCodeBlock', () => {
       }]
     };
     const contentState = Draft.convertFromRaw(beforeRawContentState);
-    const selection = new SelectionState({
-      anchorKey: 'item1',
-      anchorOffset: 21,
-      focusKey: 'item1',
-      focusOffset: 21,
-      isBackward: false,
-      hasFocus: true
-    });
-    const editorState = EditorState.forceSelection(
-      EditorState.createWithContent(contentState), selection);
     it('adds new line inside code block', () => {
+      const selection = new SelectionState({
+        anchorKey: 'item1',
+        anchorOffset: 21,
+        focusKey: 'item1',
+        focusOffset: 21,
+        isBackward: false,
+        hasFocus: true
+      });
+      const editorState = EditorState.forceSelection(
+        EditorState.createWithContent(contentState), selection);
       const newEditorState = handleNewCodeBlock(editorState);
       expect(newEditorState).not.to.equal(editorState);
       expect(
@@ -115,6 +115,25 @@ describe('handleNewCodeBlock', () => {
         afterRawContentState
       );
     });
+    it('does not add new line even inside code block', () => {
+      const selection = new SelectionState({
+        anchorKey: 'item1',
+        anchorOffset: 10,
+        focusKey: 'item1',
+        focusOffset: 10,
+        isBackward: false,
+        hasFocus: true
+      });
+      const editorState = EditorState.forceSelection(
+        EditorState.createWithContent(contentState), selection);
+      const newEditorState = handleNewCodeBlock(editorState);
+      expect(newEditorState).to.equal(editorState);
+      expect(
+        Draft.convertToRaw(newEditorState.getCurrentContent())
+      ).to.deep.equal(
+        beforeRawContentState
+      );
+    });
   });
 
   describe('in unstyled block without three backquotes', () => {

src/modifiers/handleNewCodeBlock.js

@@ -7,7 +7,8 @@ const handleNewCodeBlock = (editorState) => {
   const key = selection.getStartKey();
   const currentBlock = contentState.getBlockForKey(key);
   const matchData = /^```([\w-]+)?$/.exec(currentBlock.getText());
-  if (matchData && selection.getEndOffset() === currentBlock.getLength()) {
+  const isLast = selection.getEndOffset() === currentBlock.getLength();
+  if (matchData && isLast) {
     const data = {};
     const language = matchData[1];
     if (language) {
@@ -16,7 +17,7 @@ const handleNewCodeBlock = (editorState) => {
     return changeCurrentBlockType(editorState, 'code-block', '', data);
   }
   const type = currentBlock.getType();
-  if (type === 'code-block') {
+  if (type === 'code-block' && isLast) {
     return insertEmptyBlock(editorState, 'code-block', currentBlock.getData());
   }
   return editorState;