I implement WYSIWYG editor with draftjs and I have a set of rules for typography fixing. I use Modifier.replaceText to replace what I want, but the problem is, when I call it, it removes inlineStyles in replaced text.

Here is a block of code that I use for typography. Inputs are rules (array with rules) and editorState.

rules.forEach(({ toReplace, replace }) => {
   const blockToReplace = [];
   let contentState = editorState.getCurrentContent();
   const blockMap = contentState.getBlockMap();

   blockMap.forEach(contentBlock => {
      const text = contentBlock.getText();
      let matchArr;

      while ((matchArr = toReplace.exec(text)) !== null) {
         const start = matchArr.index;
         const end = start + matchArr[0].length;
         const blockKey = contentBlock.getKey();
         const blockSelection = SelectionState.createEmpty(blockKey).merge({
            anchorOffset: start,
            focusOffset: end,
         });

         blockToReplace.push(blockSelection);
      }
   });

   blockToReplace.reverse().forEach((selectionState) => {
      contentState = Modifier.replaceText(
         contentState,
         selectionState,
         text.replace(search, replace)
      );
    });

    editorState = EditorState.push(editorState, contentState);
});

So, my input is: *bold...*

The wrong output is: *bold*…

Should be: *bold…*

Note: asterisks are for bold designation, change is three dots to horizontal ellipsis (U+2026)

Anybody any idea? I google it for two days and nothing...