Allow custom inline style matcher

package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-js-markdown-plugin",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "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

@@ -542,7 +542,8 @@ describe("draft-js-markdown-plugin", () => {
               expect(modifierSpy).toHaveBeenCalledWith(
                 defaultInlineWhitelist,
                 currentEditorState,
-                " "
+                " ",
+                undefined
               );
             });
             it("unstickys inline style", () => {
@@ -660,115 +661,6 @@ describe("draft-js-markdown-plugin", () => {
           expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
         });
       });
-      describe("handlePastedText", () => {
-        let pastedText;
-        let html;
-        beforeEach(() => {
-          pastedText = `_hello world_
-          Hello`;
-          html = undefined;
-          subject = () =>
-            plugin.handlePastedText(
-              pastedText,
-              html,
-              store.getEditorState(),
-              store
-            );
-        });
-        [
-          "replaceText",
-          // TODO(@mxstbr): This broke when switching mocha->jest, fix it!
-          // 'insertEmptyBlock',
-          "handleBlockType",
-          "handleImage",
-          "handleLink",
-          "handleInlineStyle",
-        ].forEach(modifier => {
-          describe(modifier, () => {
-            beforeEach(() => {
-              createMarkdownPlugin.__Rewire__(modifier, modifierSpy); // eslint-disable-line no-underscore-dangle
-            });
-            it("returns handled", () => {
-              expect(subject()).toBe("handled");
-              expect(modifierSpy).toHaveBeenCalled();
-            });
-          });
-        });
-        describe("nothing in clipboard", () => {
-          beforeEach(() => {
-            pastedText = "";
-          });
-          it("returns not-handled", () => {
-            expect(subject()).toBe("not-handled");
-          });
-        });
-        describe("pasted just text", () => {
-          beforeEach(() => {
-            pastedText = "hello";
-            createMarkdownPlugin.__Rewire__("replaceText", modifierSpy); // eslint-disable-line no-underscore-dangle
-          });
-          it("returns handled", () => {
-            expect(subject()).toBe("handled");
-            expect(modifierSpy).toHaveBeenCalledWith(
-              currentEditorState,
-              "hello"
-            );
-          });
-        });
-        describe("pasted just text with new line code", () => {
-          beforeEach(() => {
-            pastedText = "hello\nworld";
-            const rawContentState = {
-              entityMap: {},
-              blocks: [
-                {
-                  key: "item1",
-                  text: "",
-                  type: "unstyled",
-                  depth: 0,
-                  inlineStyleRanges: [],
-                  entityRanges: [],
-                  data: {},
-                },
-              ],
-            };
-            const otherRawContentState = {
-              entityMap: {},
-              blocks: [
-                {
-                  key: "item2",
-                  text: "H1",
-                  type: "header-one",
-                  depth: 0,
-                  inlineStyleRanges: [],
-                  entityRanges: [],
-                  data: {},
-                },
-              ],
-            };
-            /* eslint-disable no-underscore-dangle */
-            createMarkdownPlugin.__Rewire__("replaceText", () =>
-              createEditorState(rawContentState, currentSelectionState)
-            );
-            createMarkdownPlugin.__Rewire__("checkReturnForState", () =>
-              createEditorState(otherRawContentState, currentSelectionState)
-            );
-            /* eslint-enable no-underscore-dangle */
-          });
-          it("return handled", () => {
-            expect(subject()).toBe("handled");
-          });
-        });
-        describe("passed `html` argument", () => {
-          beforeEach(() => {
-            pastedText = "# hello";
-            html = "<h1>hello</h1>";
-          });
-          it("returns not-handled", () => {
-            expect(subject()).toBe("not-handled");
-          });
-        });
-      });
     });
   });
 });

src/index.js

@@ -131,7 +131,8 @@ function checkCharacterForState(config, editorState, character) {
     newEditorState = handleInlineStyle(
       config.features.inline,
       editorState,
-      character
+      character,
+      config.customInlineMatchers
     );
   }
   return newEditorState;
@@ -415,64 +416,6 @@ const createMarkdownPlugin = (_config = {}) => {
         }
       }
     },
-    handlePastedText(text, html, editorState, { setEditorState }) {
-      let newEditorState = editorState;
-      let buffer = [];
-
-      if (html) {
-        return "not-handled";
-      }
-
-      // If we're in a code block don't add markdown to it
-      if (inCodeBlock(editorState)) {
-        setEditorState(insertText(editorState, text));
-        return "handled";
-      }
-
-      for (let i = 0; i < text.length; i++) {
-        // eslint-disable-line no-plusplus
-        if (INLINE_STYLE_CHARACTERS.indexOf(text[i]) >= 0) {
-          newEditorState = replaceText(
-            newEditorState,
-            buffer.join("") + text[i]
-          );
-          newEditorState = checkCharacterForState(
-            config,
-            newEditorState,
-            text[i]
-          );
-          buffer = [];
-        } else if (text[i].charCodeAt(0) === 10) {
-          newEditorState = replaceText(newEditorState, buffer.join(""));
-          const tmpEditorState = checkReturnForState(
-            config,
-            newEditorState,
-            {}
-          );
-          if (newEditorState === tmpEditorState) {
-            newEditorState = insertEmptyBlock(tmpEditorState);
-          } else {
-            newEditorState = tmpEditorState;
-          }
-          buffer = [];
-        } else if (i === text.length - 1) {
-          newEditorState = replaceText(
-            newEditorState,
-            buffer.join("") + text[i]
-          );
-          buffer = [];
-        } else {
-          buffer.push(text[i]);
-        }
-      }
-
-      if (editorState !== newEditorState) {
-        setEditorState(newEditorState);
-        return "handled";
-      }
-
-      return "not-handled";
-    },
   };
 };
 

src/modifiers/__test__/changeCurrentInlineStyle-test.js

@@ -43,17 +43,62 @@ describe("changeCurrentInlineStyle", () => {
       "CODE"
     );
     expect(newEditorState).not.toEqual(editorState);
+    expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+      rawContentState("foo bar baz", [
+        {
+          length: 3,
+          offset: 4,
+          style: "CODE",
+        },
+      ])
+    );
+  });
+  it("removes inline styles when applying code style", () => {
+    const text = "`some bold text`";
+    const editorState = createEditorState(text, [
+      {
+        length: 4,
+        offset: 6,
+        style: "BOLD",
+      },
+    ]);
+    const matchArr = ["`some bold text`", "some bold text"];
+    matchArr.index = 0;
+    matchArr.input = text;
+    let newEditorState = changeCurrentInlineStyle(
+      editorState,
+      matchArr,
+      "CODE"
+    );
+    expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+      rawContentState("some bold text", [
+        { length: 14, offset: 0, style: "CODE" },
+      ])
+    );
+  });
+  it("handles a style terminator properly", () => {
+    const text = "foo **bar** baz";
+    const editorState = createEditorState(text, []);
+    const matchArr = ["**bar** ", "bar", " "];
+    matchArr.index = 4;
+    matchArr.input = text;
+    const newEditorState = changeCurrentInlineStyle(
+      editorState,
+      matchArr,
+      "BOLD"
+    );
+    expect(newEditorState).not.toEqual(editorState);
     expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
       rawContentState(
         "foo bar baz",
         [
           {
             length: 3,
             offset: 4,
-            style: "CODE",
+            style: "BOLD",
           },
         ],
-        "CODE"
+        "BOLD"
       )
     );
   });

src/modifiers/__test__/handleInlineStyle-test.js

@@ -47,14 +47,14 @@ describe("handleInlineStyle", () => {
   });
 
   const testCases = {
-    "converts a mix of code, bold and italic and strikethrough in one go": {
-      character: "`",
+    "converts a mix of bold and italic and strikethrough in one go": {
+      character: "*",
       before: {
         entityMap: {},
         blocks: [
           {
             key: "item1",
-            text: "`h~el*lo _inline~_* style",
+            text: "*h~ello _inline~_ style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [],
@@ -72,32 +72,55 @@ describe("handleInlineStyle", () => {
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
-              {
-                length: 12,
-                offset: 0,
-                style: "CODE",
-              },
-              {
-                length: 11,
-                offset: 1,
-                style: "STRIKETHROUGH",
-              },
-              {
-                length: 9,
-                offset: 3,
-                style: "BOLD",
-              },
-              {
-                length: 6,
-                offset: 6,
-                style: "ITALIC",
-              },
+              { length: 12, offset: 0, style: "BOLD" },
+              { length: 11, offset: 1, style: "STRIKETHROUGH" },
+              { length: 6, offset: 6, style: "ITALIC" },
             ],
             entityRanges: [],
             data: {},
           },
         ],
       },
+      selection: new SelectionState({
+        anchorKey: "item1",
+        anchorOffset: 17,
+        focusKey: "item1",
+        focusOffset: 17,
+        isBackward: false,
+        hasFocus: true,
+      }),
+    },
+
+    "should not covert inside the code style": {
+      character: "`",
+      before: {
+        entityMap: {},
+        blocks: [
+          {
+            key: "item1",
+            text: "`h~el*lo _inline~_* style",
+            type: "unstyled",
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+          },
+        ],
+      },
+      after: {
+        entityMap: {},
+        blocks: [
+          {
+            key: "item1",
+            text: "h~el*lo _inline~_* style",
+            type: "unstyled",
+            depth: 0,
+            inlineStyleRanges: [{ length: 18, offset: 0, style: "CODE" }],
+            entityRanges: [],
+            data: {},
+          },
+        ],
+      },
       selection: new SelectionState({
         anchorKey: "item1",
         anchorOffset: 19,