- maintain inline styles when applying new one

Author: juliankrispel

src/modifiers/changeCurrentInlineStyle.js

@@ -1,5 +1,7 @@
 import { EditorState, SelectionState, Modifier } from "draft-js";
 
+const STYLES = ["BOLD", "ITALIC", "CODE", "STRIKETHROUGH"];
+
 const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
   const currentContent = editorState.getCurrentContent();
   const selection = editorState.getSelection();
@@ -10,26 +12,63 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
   const currentInlineStyle = block.getInlineStyleAt(index).merge();
   const newStyle = currentInlineStyle.merge([style]);
   const focusOffset = index + matchArr[0].length;
+
   const wordSelection = SelectionState.createEmpty(key).merge({
     anchorOffset: index,
     focusOffset,
   });
+
+  const inlineStyles = [];
+
+  STYLES.forEach(_style =>
+    block.findStyleRanges(
+      styles => styles.getStyle().includes(_style),
+      (start, end) => {
+        if (focusOffset > start && index <= end) {
+          inlineStyles.push({
+            style: _style,
+            start: start >= index ? start : index,
+            end: end > focusOffset ? end : focusOffset,
+          });
+        }
+      }
+    )
+  );
+
+  console.log("yo inline styles", inlineStyles);
+
   let newContentState = Modifier.replaceText(
     currentContent,
     wordSelection,
     matchArr[1],
     newStyle
   );
+
+  const afterSelection = newContentState.getSelectionAfter();
+
+  // re-apply previous styles
+  newContentState = inlineStyles.reduce(
+    (content, { style: _style, start, end }) =>
+      Modifier.applyInlineStyle(
+        content,
+        wordSelection.merge({ anchorOffset: start, focusOffset: end }),
+        _style
+      ),
+    newContentState
+  );
+
   newContentState = Modifier.insertText(
     newContentState,
-    newContentState.getSelectionAfter(),
+    afterSelection,
     character || " "
   );
+
   const newEditorState = EditorState.push(
     editorState,
     newContentState,
     "change-inline-style"
   );
+
   return EditorState.forceSelection(
     newEditorState,
     newContentState.getSelectionAfter()

src/modifiers/handleInlineStyle.js

@@ -13,8 +13,10 @@ const handleInlineStyle = (editorState, character) => {
     .getCurrentContent()
     .getBlockForKey(key)
     .getText();
+
   const line = `${text}${character}`;
   let newEditorState = editorState;
+
   Object.keys(inlineMatchers).some(k => {
     inlineMatchers[k].some(re => {
       let matchArr;