Add handling of whitespaces after the inline style change

Author: Axel Wahlen

src/modifiers/__test__/changeCurrentInlineStyle-test.js

@@ -57,4 +57,30 @@ describe("changeCurrentInlineStyle", () => {
       )
     );
   });
+  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: "BOLD",
+          },
+        ],
+        "BOLD"
+      )
+    );
+  });
 });

src/modifiers/changeCurrentInlineStyle.js

@@ -17,16 +17,26 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
     focusOffset,
   });
 
-  const inlineStyles = [];
-  const markdownCharacterLength = (matchArr[0].length - matchArr[1].length) / 2;
+  // 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;
 
+  const inlineStyles = [];
   let newContentState = currentContent;
 
   // remove markdown delimiter at end
   newContentState = Modifier.removeRange(
     newContentState,
     wordSelection.merge({
-      anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
+      anchorOffset:
+        wordSelection.getFocusOffset() -
+        markdownCharacterLength -
+        matchTerminatorLength,
     })
   );
 
@@ -50,11 +60,22 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
     newContentState,
     wordSelection.merge({
       anchorOffset: index,
-      focusOffset: focusOffset - markdownCharacterLength * 2,
+      focusOffset:
+        focusOffset - markdownCharacterLength * 2 - matchTerminatorLength,
     }),
     style
   );
 
+  // 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();
+  }
+
   const newEditorState = EditorState.push(
     editorState,
     newContentState,