diff --git a/src/modifiers/__test__/changeCurrentInlineStyle-test.js b/src/modifiers/__test__/changeCurrentInlineStyle-test.js index 7f45d70..d93a39b 100644 --- a/src/modifiers/__test__/changeCurrentInlineStyle-test.js +++ b/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" + ) + ); + }); }); diff --git a/src/modifiers/changeCurrentInlineStyle.js b/src/modifiers/changeCurrentInlineStyle.js index c611c76..46095fe 100644 --- a/src/modifiers/changeCurrentInlineStyle.js +++ b/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,