Merge pull request #71 from cusxio/entity

custom entity

Author: mxstbr

README.md

@@ -57,6 +57,7 @@ const markdownPlugin = createMarkdownPlugin({ renderLanguageSelect })
 ```
 
 ### `languages`
+
 Dictionary for languages available to code block switcher
 
 #### Example:
@@ -70,6 +71,7 @@ const markdownPlugin = createMarkdownPlugin({ languages })
 ```
 
 ### `features`
+
 A list of enabled features, by default all features are turned on.
 
 ```js
@@ -79,7 +81,7 @@ features = {
 }
 ```
 
-#### Example
+#### Example:
 
 ```
 // this will only enable BOLD for inline and CODE
@@ -125,6 +127,30 @@ import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item"
 ]
 ```
 
+### `entityType`
+
+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`.
+
+#### Example:
+
+```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];
+```
 
 ## Usage
 

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 "../";
@@ -514,14 +518,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,
+                " ",
+                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, " ");
+              expect(modifierSpy).toHaveBeenCalledWith(
+                currentEditorState,
+                " ",
+                ENTITY_TYPE.LINK
+              );
             });
           });
         });

src/constants.js

@@ -11,6 +11,11 @@ export const inlineMatchers = {
 
 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,
 });
 

src/decorators/link/__test__/linkStrategy-test.js

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

src/decorators/link/index.js

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

src/decorators/link/linkStrategy.js

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

src/index.js

@@ -33,6 +33,7 @@ import { replaceText } from "./utils";
 import {
   CODE_BLOCK_REGEX,
   CODE_BLOCK_TYPE,
+  ENTITY_TYPE,
   defaultInlineWhitelist,
   defaultBlockWhitelist,
 } from "./constants";
@@ -101,13 +102,17 @@ function checkCharacterForState(config, editorState, character) {
     editorState === newEditorState &&
     config.features.inline.includes("IMAGE")
   ) {
-    newEditorState = handleImage(editorState, character);
+    newEditorState = handleImage(
+      editorState,
+      character,
+      config.entityType.IMAGE
+    );
   }
   if (
     editorState === newEditorState &&
     config.features.inline.includes("LINK")
   ) {
-    newEditorState = handleLink(editorState, character);
+    newEditorState = handleLink(editorState, character, config.entityType.LINK);
   }
   if (
     newEditorState === editorState &&
@@ -204,6 +209,7 @@ const defaultConfig = {
     inline: defaultInlineWhitelist,
     block: defaultBlockWhitelist,
   },
+  entityType: ENTITY_TYPE,
 };
 
 const createMarkdownPlugin = (_config = {}) => {
@@ -216,6 +222,10 @@ const createMarkdownPlugin = (_config = {}) => {
       ...defaultConfig.features,
       ..._config.features,
     },
+    entityType: {
+      ...defaultConfig.entityType,
+      ..._config.entityType,
+    },
   };
 
   return {
@@ -226,7 +236,14 @@ const createMarkdownPlugin = (_config = {}) => {
         wrapper: <pre spellCheck="false" />,
       },
     }).merge(checkboxBlockRenderMap),
-    decorators: [createLinkDecorator(), createImageDecorator()],
+    decorators: [
+      createLinkDecorator({
+        entityType: config.entityType.LINK,
+      }),
+      createImageDecorator({
+        entityType: config.entityType.IMAGE,
+      }),
+    ],
     initialize({ setEditorState, getEditorState }) {
       store.setEditorState = setEditorState;
       store.getEditorState = getEditorState;