remove styles and links inside inline code block

Author: andrewfan

src/modifiers/__test__/changeCurrentInlineStyle-test.js

@@ -44,17 +44,36 @@ describe("changeCurrentInlineStyle", () => {
     );
     expect(newEditorState).not.toEqual(editorState);
     expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
-      rawContentState(
-        "foo bar baz",
-        [
-          {
-            length: 3,
-            offset: 4,
-            style: "CODE",
-          },
-        ],
-        "CODE"
-      )
+      rawContentState("foo bar baz", [
+        {
+          length: 3,
+          offset: 4,
+          style: "CODE",
+        },
+      ])
+    );
+  });
+  it("removes inline styles when applying code style", () => {
+    const text = "`some bold text`";
+    const editorState = createEditorState(text, [
+      {
+        length: 4,
+        offset: 6,
+        style: "BOLD",
+      },
+    ]);
+    const matchArr = ["`some bold text`", "some bold text"];
+    matchArr.index = 0;
+    matchArr.input = text;
+    let newEditorState = changeCurrentInlineStyle(
+      editorState,
+      matchArr,
+      "CODE"
+    );
+    expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+      rawContentState("some bold text", [
+        { length: 14, offset: 0, style: "CODE" },
+      ])
     );
   });
 });

src/modifiers/changeCurrentInlineStyle.js

@@ -1,23 +1,24 @@
 import { OrderedSet } from "immutable";
 import { EditorState, SelectionState, Modifier } from "draft-js";
+import removeInlineStyles from "./removeInlineStyles";
 
 const changeCurrentInlineStyle = (editorState, matchArr, style) => {
-  const currentContent = editorState.getCurrentContent();
   const selection = editorState.getSelection();
   const key = selection.getStartKey();
   const { index } = matchArr;
-  const blockMap = currentContent.getBlockMap();
-  const block = blockMap.get(key);
-  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 = [];
+  let newEditorState = editorState;
+  if (style === "CODE") {
+    newEditorState = removeInlineStyles(newEditorState, wordSelection);
+  }
+  const currentContent = newEditorState.getCurrentContent();
+
   const markdownCharacterLength = (matchArr[0].length - matchArr[1].length) / 2;
 
   let newContentState = currentContent;
@@ -55,7 +56,7 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
     style
   );
 
-  const newEditorState = EditorState.push(
+  newEditorState = EditorState.push(
     editorState,
     newContentState,
     "change-inline-style"

src/modifiers/removeInlineStyles.js

@@ -0,0 +1,17 @@
+import { EditorState, RichUtils, Modifier } from "draft-js";
+
+export default (editorState, selection = editorState.getSelection()) => {
+  const styles = ["BOLD", "ITALIC", "STRIKETHROUGH", "CODE"];
+
+  let newEditorState = EditorState.push(
+    editorState,
+    styles.reduce(
+      (newContentState, style) =>
+        Modifier.removeInlineStyle(newContentState, selection, style),
+      editorState.getCurrentContent()
+    ),
+    "change-inline-style"
+  );
+
+  return RichUtils.toggleLink(newEditorState, selection, null);
+};