refactor inline style handlers to keep looking for delimiter matches until none are found

Author: juliankrispel

src/constants.js

@@ -1,10 +1,10 @@
 export const CODE_BLOCK_REGEX = /^```([\w-]+)?\s*$/;
 
 export const inlineMatchers = {
-  BOLD: [/\*\*([^(?**)]+)\*\*$/g, /__([^(?:__)]+)__$/g],
-  ITALIC: [/\*([^*]+)\*$/g, /_([^_]+)_$/g],
-  CODE: [/`([^`]+)`$/g],
-  STRIKETHROUGH: [/~~([^(?:~~)]+)~~$/g],
+  BOLD: [/\*\*(.+)\*\*$/g, /__(.+)__$/g],
+  ITALIC: [/\*(.+)\*$/g, /_(.+)_$/g],
+  CODE: [/`(.+)`$/g],
+  STRIKETHROUGH: [/~~(.+)~~$/g],
 };
 
 export const CODE_BLOCK_TYPE = "code-block";

src/modifiers/__test__/changeCurrentInlineStyle-test.js

@@ -45,7 +45,7 @@ describe("changeCurrentInlineStyle", () => {
     expect(newEditorState).not.toEqual(editorState);
     expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
       rawContentState(
-        "foo bar  baz",
+        "foo bar baz",
         [
           {
             length: 3,
@@ -57,25 +57,4 @@ describe("changeCurrentInlineStyle", () => {
       )
     );
   });
-  it("inserts the character at the end", () => {
-    const text = "foo `bar` baz";
-    const editorState = createEditorState(text, []);
-    const matchArr = ["`bar`", "bar"];
-    matchArr.index = 4;
-    matchArr.input = text;
-    const newEditorState = changeCurrentInlineStyle(
-      editorState,
-      matchArr,
-      "CODE",
-      "\n"
-    );
-    expect(newEditorState).not.toEqual(editorState);
-    const contentState = Draft.convertToRaw(newEditorState.getCurrentContent());
-    expect(contentState.blocks.length).toBe(2);
-    expect(contentState.blocks[0].text).toEqual("foo bar");
-    expect(contentState.blocks[0].inlineStyleRanges).toEqual([
-      { offset: 4, length: 3, style: "CODE" },
-    ]);
-    expect(contentState.blocks[1].text).toEqual(" baz");
-  });
 });

src/modifiers/__test__/handleInlineStyle-test.js

@@ -42,6 +42,66 @@ describe("handleInlineStyle", () => {
   });
 
   const testCases = {
+    "converts a mix of code, bold and italic and strikethrough in one go": {
+      before: {
+        entityMap: {},
+        blocks: [
+          {
+            key: "item1",
+            text: "`h~~el**lo *inline~~***` style",
+            type: "unstyled",
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+          },
+        ],
+      },
+      after: {
+        entityMap: {},
+        blocks: [
+          {
+            key: "item1",
+            text: "hello inline  style",
+            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",
+              },
+            ],
+            entityRanges: [],
+            data: {},
+          },
+        ],
+      },
+      selection: new SelectionState({
+        anchorKey: "item1",
+        anchorOffset: 24,
+        focusKey: "item1",
+        focusOffset: 24,
+        isBackward: false,
+        hasFocus: true,
+      }),
+    },
+
     "converts to bold with astarisks": {
       before: {
         entityMap: {},

src/modifiers/changeCurrentInlineStyle.js

@@ -1,6 +1,6 @@
 import { EditorState, SelectionState, Modifier } from "draft-js";
 
-const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
+const changeCurrentInlineStyle = (editorState, matchArr, style) => {
   const currentContent = editorState.getCurrentContent();
   const selection = editorState.getSelection();
   const key = selection.getStartKey();
@@ -21,18 +21,12 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
 
   let newContentState = currentContent;
 
-  // if appendChar isn't defined add a space
-  // if character is a newline - add empty string and later on - split block
-  let appendChar = character == null ? " " : character;
-  if (character == "\n") appendChar = "";
-
   // remove markdown delimiter at end
-  newContentState = Modifier.replaceText(
+  newContentState = Modifier.removeRange(
     newContentState,
     wordSelection.merge({
       anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
-    }),
-    appendChar
+    })
   );
 
   let afterSelection = newContentState.getSelectionAfter();
@@ -43,12 +37,11 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
   });
 
   // remove markdown delimiter at start
-  newContentState = Modifier.replaceText(
+  newContentState = Modifier.removeRange(
     newContentState,
     wordSelection.merge({
       focusOffset: wordSelection.getAnchorOffset() + markdownCharacterLength,
-    }),
-    ""
+    })
   );
 
   // apply style
@@ -61,11 +54,6 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
     style
   );
 
-  if (character == "\n") {
-    newContentState = Modifier.splitBlock(newContentState, afterSelection);
-    afterSelection = newContentState.getSelectionAfter();
-  }
-
   const newEditorState = EditorState.push(
     editorState,
     newContentState,

src/modifiers/handleInlineStyle.js

@@ -1,20 +1,9 @@
 import changeCurrentInlineStyle from "./changeCurrentInlineStyle";
+import { EditorState, Modifier } from "draft-js";
 import { inlineMatchers } from "../constants";
 
-const handleInlineStyle = (editorState, character) => {
-  const selection = editorState.getSelection();
-  const key = editorState.getSelection().getStartKey();
-  const text = editorState
-    .getCurrentContent()
-    .getBlockForKey(key)
-    .getText()
-    .slice(0, selection.getFocusOffset());
-
-  const line = `${text}`;
+const handleChange = (editorState, line, character) => {
   let newEditorState = editorState;
-
-  var i = 0;
-
   Object.keys(inlineMatchers).some(k => {
     inlineMatchers[k].some(re => {
       let matchArr;
@@ -28,7 +17,6 @@ const handleInlineStyle = (editorState, character) => {
             character
           );
         }
-        i++;
       } while (matchArr);
       return newEditorState !== editorState;
     });
@@ -37,4 +25,51 @@ const handleInlineStyle = (editorState, character) => {
   return newEditorState;
 };
 
+const getLine = (editorState, anchorOffset) => {
+  const selection = editorState.getSelection().merge({ anchorOffset });
+  const key = editorState.getSelection().getStartKey();
+
+  return editorState
+    .getCurrentContent()
+    .getBlockForKey(key)
+    .getText()
+    .slice(0, selection.getFocusOffset());
+};
+
+const handleInlineStyle = (editorState, character) => {
+  let selection = editorState.getSelection();
+  let line = getLine(editorState, selection.getAnchorOffset());
+  let newEditorState = handleChange(editorState, line, "");
+  let lastEditorState = editorState;
+
+  while (newEditorState !== lastEditorState) {
+    lastEditorState = newEditorState;
+    line = getLine(newEditorState, selection.getAnchorOffset());
+    newEditorState = handleChange(newEditorState, line, "");
+  }
+
+  if (newEditorState !== editorState) {
+    let newContentState = newEditorState.getCurrentContent();
+    selection = newEditorState.getSelection();
+
+    if (character === "\n") {
+      newContentState = Modifier.splitBlock(newContentState, selection);
+    } else {
+      newContentState = Modifier.insertText(
+        newContentState,
+        selection,
+        character
+      );
+    }
+
+    newEditorState = EditorState.push(
+      newEditorState,
+      newContentState,
+      "change-inline-style"
+    );
+  }
+
+  return newEditorState;
+};
+
 export default handleInlineStyle;