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,

src/modifiers/changeCurrentInlineStyle.js

@@ -1,5 +1,6 @@
 import { OrderedSet } from "immutable";
 import { EditorState, SelectionState, Modifier } from "draft-js";
+import removeInlineStyles from "./removeInlineStyles";
 
 const changeCurrentInlineStyle = (editorState, matchArr, style) => {
   const currentContent = editorState.getCurrentContent();
@@ -8,25 +9,45 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
   const { index } = matchArr;
   const blockMap = currentContent.getBlockMap();
   const block = blockMap.get(key);
-  const currentInlineStyle = block.getInlineStyleAt(index).merge();
-  const newStyle = currentInlineStyle.merge([style]);
+  const currentInlineStyle = block.getInlineStyleAt(index);
+  // do not modify the text if it is inside code style
+  const hasCodeStyle = currentInlineStyle.find(style => style === "CODE");
+  if (hasCodeStyle) {
+    return editorState;
+  }
   const focusOffset = index + matchArr[0].length;
 
   const wordSelection = SelectionState.createEmpty(key).merge({
     anchorOffset: index,
     focusOffset,
   });
 
-  const inlineStyles = [];
-  const markdownCharacterLength = (matchArr[0].length - matchArr[1].length) / 2;
+  let newEditorState = editorState;
 
-  let newContentState = currentContent;
+  // remove all styles if applying code style
+  if (style === "CODE") {
+    newEditorState = removeInlineStyles(newEditorState, wordSelection);
+  }
+
+  let newContentState = newEditorState.getCurrentContent();
+
+  // check if match contains a terminator group at the end
+  let matchTerminatorLength = 0;
+  if (matchArr.length == 3) {
+    matchTerminatorLength = matchArr[2].length;
+  }
+
+  const markdownCharacterLength =
+    (matchArr[0].length - matchArr[1].length - matchTerminatorLength) / 2;
 
   // remove markdown delimiter at end
   newContentState = Modifier.removeRange(
     newContentState,
     wordSelection.merge({
-      anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
+      anchorOffset:
+        wordSelection.getFocusOffset() -
+        markdownCharacterLength -
+        matchTerminatorLength,
     })
   );
 
@@ -50,12 +71,23 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
     newContentState,
     wordSelection.merge({
       anchorOffset: index,
-      focusOffset: focusOffset - markdownCharacterLength * 2,
+      focusOffset:
+        focusOffset - markdownCharacterLength * 2 - matchTerminatorLength,
     }),
     style
   );
 
-  const newEditorState = EditorState.push(
+  // Check if a terminator exists and re-add it after the styled text
+  if (matchTerminatorLength > 0) {
+    newContentState = Modifier.insertText(
+      newContentState,
+      afterSelection,
+      matchArr[2]
+    );
+    afterSelection = newContentState.getSelectionAfter();
+  }
+
+  newEditorState = EditorState.push(
     editorState,
     newContentState,
     "change-inline-style"

src/modifiers/handleInlineStyle.js

@@ -4,12 +4,14 @@ import { inlineMatchers } from "../constants";
 import insertText from "./insertText";
 import { getCurrentLine as getLine } from "../utils";
 
-const handleChange = (editorState, line, whitelist) => {
+const handleChange = (editorState, line, whitelist, customInlineMatchers) => {
   let newEditorState = editorState;
-  Object.keys(inlineMatchers)
+  const matchers = Object.assign({}, inlineMatchers, customInlineMatchers);
+
+  Object.keys(matchers)
     .filter(matcher => whitelist.includes(matcher))
     .some(k => {
-      inlineMatchers[k].some(re => {
+      matchers[k].some(re => {
         let matchArr;
         do {
           matchArr = re.exec(line);
@@ -31,19 +33,30 @@ const handleChange = (editorState, line, whitelist) => {
 const handleInlineStyle = (
   whitelist,
   editorStateWithoutCharacter,
-  character
+  character,
+  customInlineMatchers = {}
 ) => {
   const editorState = insertText(editorStateWithoutCharacter, character);
   let selection = editorState.getSelection();
   let line = getLine(editorState);
-  let newEditorState = handleChange(editorState, line, whitelist);
+  let newEditorState = handleChange(
+    editorState,
+    line,
+    whitelist,
+    customInlineMatchers
+  );
   let lastEditorState = editorState;
 
   // Recursively resolve markdown, e.g. _*text*_ should turn into both italic and bold
   while (newEditorState !== lastEditorState) {
     lastEditorState = newEditorState;
     line = getLine(newEditorState);
-    newEditorState = handleChange(newEditorState, line, whitelist);
+    newEditorState = handleChange(
+      newEditorState,
+      line,
+      whitelist,
+      customInlineMatchers
+    );
   }
 
   if (newEditorState !== editorState) {

src/modifiers/removeInlineStyles.js

@@ -0,0 +1,17 @@
+import { EditorState, RichUtils, Modifier } from "draft-js";
+
+export default (editorState, selection = editorState.getSelection()) => {
+  const styles = ["BOLD", "ITALIC", "STRIKETHROUGH", "CODE"];
+
+  let newEditorState = EditorState.push(
+    editorState,
+    styles.reduce(
+      (newContentState, style) =>
+        Modifier.removeInlineStyle(newContentState, selection, style),
+      editorState.getCurrentContent()
+    ),
+    "change-inline-style"
+  );
+
+  return RichUtils.toggleLink(newEditorState, selection, null);
+};