merge

Author: juliankrispel

README.md

@@ -17,9 +17,64 @@ A [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plu
 npm i --save draft-js-markdown-plugin
 ```
 
+## Usage
+
+```js
+import React, { Component } from 'react';
+import Editor from 'draft-js-plugins-editor';
+import createMarkdownPlugin from 'draft-js-markdown-plugin';
+import { EditorState } from 'draft-js';
+
+export default class DemoEditor extends Component {
+
+  state = {
+    editorState: EditorState.createEmpty(),
+    plugins: [createMarkdownPlugin()]
+  };
+
+  onChange = (editorState) => {
+    this.setState({
+      editorState,
+    });
+  };
+
+  render() {
+    return (
+      <Editor
+        editorState={this.state.editorState}
+        onChange={this.onChange}
+        plugins={this.state.plugins}
+      />
+    );
+  }
+}
+```
+
+### Add code block syntax highlighting
+
+Using the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!
+
+```JS
+// Install prismjs and draft-js-prism-plugin
+import Prism from 'prismjs';
+import createPrismPlugin from 'draft-js-prism-plugin';
+
+class Editor extends Component {
+  state = {
+    plugins: [
+      // Add the Prism plugin to the plugins array 
+      createPrismPlugin({
+        prism: Prism
+      }),
+      createMarkdownPlugin()
+    ]
+  }
+}
+```
+
 ## Options
-The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
 
+The `draft-js-markdown-plugin` is configurable. Just pass a config object. Here are the available options:
 
 ### `renderLanguageSelect`
 
@@ -57,6 +112,7 @@ const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })
 ```
 
 ### `languages`
+
 Dictionary for languages available to code block switcher
 
 #### Example:
@@ -70,6 +126,7 @@ const markdownPlugin = createMarkdownPlugin({ languages })
 ```
 
 ### `features`
+
 A list of enabled features, by default all features are turned on.
 
 ```js
@@ -79,7 +136,7 @@ features = {
 }
 ```
 
-#### Example
+#### Example:
 
 ```
 // this will only enable BOLD for inline and CODE
@@ -125,60 +182,29 @@ import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item"
 ]
 ```
 
+### `entityType`
 
-## Usage
-
-```js
-import React, { Component } from 'react';
-import Editor from 'draft-js-plugins-editor';
-import createMarkdownPlugin from 'draft-js-markdown-plugin';
-import { EditorState } from 'draft-js';
-
-export default class DemoEditor extends Component {
-
-  state = {
-    editorState: EditorState.createEmpty(),
-    plugins: [createMarkdownPlugin()]
-  };
-
-  onChange = (editorState) => {
-    this.setState({
-      editorState,
-    });
-  };
-
-  render() {
-    return (
-      <Editor
-        editorState={this.state.editorState}
-        onChange={this.onChange}
-        plugins={this.state.plugins}
-      />
-    );
-  }
-}
-```
-
-### Add code block syntax highlighting
-
-Using the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin) you can easily add syntax highlighting support to your code blocks!
+To interoperate this plugin with other DraftJS plugins, i.e. [`draft-js-plugins`](https://github.com/draft-js-plugins/draft-js-plugins), you might need to customize the `LINK` and `IMAGE` entity type created by `draft-js-markdown-plugin`.
 
-```JS
-// Install prismjs and draft-js-prism-plugin
-import Prism from 'prismjs';
-import createPrismPlugin from 'draft-js-prism-plugin';
+#### Example:
 
-class Editor extends Component {
-  state = {
-    plugins: [
-      // Add the Prism plugin to the plugins array 
-      createPrismPlugin({
-        prism: Prism
-      }),
-      createMarkdownPlugin()
-    ]
-  }
-}
+```js
+import createMarkdownPlugin from "draft-js-markdown-plugin";
+import createFocusPlugin from "draft-js-focus-plugin";
+import createImagePlugin from "draft-js-image-plugin";
+
+const entityType = {
+  IMAGE: "IMAGE",
+};
+
+const focusPlugin = createFocusPlugin();
+const imagePlugin = createImagePlugin({
+  decorator: focusPlugin.decorator,
+});
+// For `draft-js-image-plugin` to work, the entity type of an image must be `IMAGE`.
+const markdownPlugin = createMarkdownPlugin({ entityType });
+
+const editorPlugins = [focusPlugin, imagePlugin, markdownPlugin];
 ```
 
 ## Why fork the `markdown-shortcuts-plugin`?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-js-markdown-plugin",
-  "version": "1.4.1",
+  "version": "2.0.2",
   "description": "A DraftJS plugin for supporting Markdown syntax shortcuts, fork of draft-js-markdown-shortcuts-plugin",
   "main": "lib/index.js",
   "scripts": {

src/__test__/plugin.test.js

@@ -4,7 +4,11 @@ import {
   CheckableListItemUtils,
 } from "draft-js-checkable-list-item";
 
-import { defaultInlineWhitelist, defaultBlockWhitelist } from "../constants";
+import {
+  defaultInlineWhitelist,
+  defaultBlockWhitelist,
+  ENTITY_TYPE,
+} from "../constants";
 
 import { Map, List } from "immutable";
 import createMarkdownPlugin from "../";
@@ -224,37 +228,6 @@ describe("draft-js-markdown-plugin", () => {
           expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
         });
 
-        it("adds list item and transforms markdown", () => {
-          // createMarkdownPlugin.__Rewire__("leaveList", modifierSpy); // eslint-disable-line no-underscore-dangle
-          currentRawContentState = {
-            entityMap: {},
-            blocks: [
-              {
-                key: "item1",
-                text: "**some bold text**",
-                type: "unordered-list-item",
-                depth: 0,
-                inlineStyleRanges: [],
-                entityRanges: [],
-                data: {},
-              },
-            ],
-          };
-          currentSelectionState = currentSelectionState.merge({
-            focusOffset: 18,
-            anchorOffset: 18,
-          });
-          expect(subject()).toBe("handled");
-          // expect(modifierSpy).toHaveBeenCalledTimes(1);
-          expect(store.setEditorState).toHaveBeenCalledTimes(1);
-          newEditorState = store.setEditorState.mock.calls[0][0];
-          const newRawContentState = Draft.convertToRaw(
-            newEditorState.getCurrentContent()
-          );
-          expect(newRawContentState.blocks.length).toBe(2);
-          expect(newEditorState.getCurrentInlineStyle().size).toBe(0);
-        });
-
         const emptyBlockTypes = [
           "blockquote",
           "header-one",
@@ -333,7 +306,6 @@ describe("draft-js-markdown-plugin", () => {
               event = new window.KeyboardEvent("keydown", props);
             });
             it("inserts new empty block", () => {
-              createMarkdownPlugin.__Rewire__("insertEmptyBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
               const text = "Hello";
               currentRawContentState = {
                 entityMap: {},
@@ -349,9 +321,8 @@ describe("draft-js-markdown-plugin", () => {
                   },
                 ],
               };
-              expect(subject()).toBe("handled");
-              expect(modifierSpy).toHaveBeenCalledTimes(1);
-              expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
+              expect(subject()).toBe("not-handled");
+              expect(store.setEditorState).not.toHaveBeenCalled();
             });
           });
         });
@@ -516,14 +487,33 @@ describe("draft-js-markdown-plugin", () => {
             ],
           };
         });
-        ["handleImage", "handleLink"].forEach(modifier => {
+        ["handleImage"].forEach(modifier => {
           describe(modifier, () => {
             beforeEach(() => {
               createMarkdownPlugin.__Rewire__(modifier, modifierSpy); // eslint-disable-line no-underscore-dangle
             });
             it("returns handled", () => {
               expect(subject()).toBe("handled");
-              expect(modifierSpy).toHaveBeenCalledWith(currentEditorState, " ");
+              expect(modifierSpy).toHaveBeenCalledWith(
+                currentEditorState,
+                " ",
+                ENTITY_TYPE.IMAGE
+              );
+            });
+          });
+        });
+        ["handleLink"].forEach(modifier => {
+          describe(modifier, () => {
+            beforeEach(() => {
+              createMarkdownPlugin.__Rewire__(modifier, modifierSpy); // eslint-disable-line no-underscore-dangle
+            });
+            it("returns handled", () => {
+              expect(subject()).toBe("handled");
+              expect(modifierSpy).toHaveBeenCalledWith(
+                currentEditorState,
+                " ",
+                ENTITY_TYPE.LINK
+              );
             });
           });
         });
@@ -615,6 +605,27 @@ describe("draft-js-markdown-plugin", () => {
             expect(subject()).toBe("not-handled");
           });
         });
+        it("handles new code block on space", () => {
+          createMarkdownPlugin.__Rewire__("handleNewCodeBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
+          currentRawContentState = {
+            entityMap: {},
+            blocks: [
+              {
+                key: "item1",
+                text: "```",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [],
+                entityRanges: [],
+                data: {},
+              },
+            ],
+          };
+          character = " ";
+          expect(subject()).toBe("handled");
+          expect(modifierSpy).toHaveBeenCalledTimes(1);
+          expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
+        });
       });
       describe("handlePastedText", () => {
         let pastedText;

src/components/Code/index.js

@@ -73,10 +73,16 @@ class CodeBlock extends PureComponent {
     const { setReadOnly } = this.props.blockProps;
     event.stopPropagation();
     setReadOnly(true);
+    this.setState({
+      isOpen: true,
+    });
   };
 
   onClickOutside = () => {
     if (this.state.isOpen === false) return;
+    this.setState({
+      isOpen: false,
+    });
     const {
       getEditorState,
       setReadOnly,

src/constants.js

@@ -3,14 +3,19 @@ import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item";
 export const CODE_BLOCK_REGEX = /^```([\w-]+)?\s*$/;
 
 export const inlineMatchers = {
-  BOLD: [/\*\*(.+)\*\*$/g, /__(.+)__$/g],
-  ITALIC: [/\*(.+)\*$/g, /_(.+)_$/g],
-  CODE: [/`(.+)`$/g],
-  STRIKETHROUGH: [/~~(.+)~~$/g],
+  BOLD: [/\*(.+)\*$/g],
+  ITALIC: [/_(.+)_$/g],
+  CODE: [/`([^`]+)`$/g],
+  STRIKETHROUGH: [/~(.+)~$/g],
 };
 
 export const CODE_BLOCK_TYPE = "code-block";
 
+export const ENTITY_TYPE = {
+  IMAGE: "IMG",
+  LINK: "LINK",
+};
+
 export const defaultInlineWhitelist = [
   "BOLD",
   "ITALIC",

src/decorators/image/__test__/imageStrategy-test.js

@@ -1,4 +1,5 @@
 import Draft from "draft-js";
+import { ENTITY_TYPE } from "../../../constants";
 import createImageStrategy from "../imageStrategy";
 
 describe("imageStrategy", () => {
@@ -34,7 +35,9 @@ describe("imageStrategy", () => {
   });
   it("callbacks range", () => {
     const block = contentState.getBlockForKey("dtehj");
-    const strategy = createImageStrategy();
+    const strategy = createImageStrategy({
+      entityType: ENTITY_TYPE.IMAGE,
+    });
     const cb = jest.fn();
     expect(typeof block).toBe("object");
     strategy(block, cb, contentState);

src/decorators/image/imageStrategy.js

@@ -1,10 +1,10 @@
-const createImageStrategy = () => {
+const createImageStrategy = ({ entityType }) => {
   const findImageEntities = (contentBlock, callback, contentState) => {
     contentBlock.findEntityRanges(character => {
       const entityKey = character.getEntity();
       return (
         entityKey !== null &&
-        contentState.getEntity(entityKey).getType() === "IMG"
+        contentState.getEntity(entityKey).getType() === entityType
       );
     }, callback);
   };

src/decorators/image/index.js

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