Merge pull request #33 from juliankrispel/maintain-sub-styles

Handle inline style changes without removing existing ones

Author: mxstbr

.eslintignore

@@ -1 +1,8 @@
 export const CODE_BLOCK_REGEX = /^```([\w-]+)?\s*$/;
+
+export const inlineMatchers = {
+  BOLD: [/\*\*([^(?**)]+)\*\*/g, /__([^(?:__)]+)__/g],
+  ITALIC: [/\*([^*]+)\*/g, /_([^_]+)_/g],
+  CODE: [/`([^`]+)`/g],
+  STRIKETHROUGH: [/~~([^(?:~~)]+)~~/g],
+};

.eslintrc

@@ -274,7 +274,7 @@ describe("handleInlineStyle", () => {
             inlineStyleRanges: [
               {
                 length: 3,
-                offset: 5,
+                offset: 2,
                 style: "ITALIC",
               },
             ],
@@ -293,8 +293,8 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 7, // FIXME
-                offset: 5,
+                length: 3,
+                offset: 2,
                 style: "ITALIC",
               },
               {
@@ -419,7 +419,7 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 3,
+                length: 4,
                 offset: 5,
                 style: "ITALIC",
               },
@@ -439,7 +439,7 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 7, // FIXME
+                length: 2,
                 offset: 5,
                 style: "ITALIC",
               },
@@ -470,12 +470,12 @@ describe("handleInlineStyle", () => {
         blocks: [
           {
             key: "item1",
-            text: "hello __inline__ style",
+            text: "hello _inline_ style",
             type: "unstyled",
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 3,
+                length: 5,
                 offset: 5,
                 style: "BOLD",
               },
@@ -495,14 +495,15 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 7, // FIXME
+                length: 4,
                 offset: 5,
                 style: "BOLD",
-              } /* { FIXME
-            length: 6,
-            offset: 6,
-            style: 'ITALIC'
-          } */,
+              },
+              {
+                length: 6,
+                offset: 6,
+                style: "ITALIC",
+              },
             ],
             entityRanges: [],
             data: {},

src/constants.js

@@ -10,30 +10,59 @@ 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,
   });
-  let newContentState = Modifier.replaceText(
-    currentContent,
-    wordSelection,
-    matchArr[1],
-    newStyle
-  );
-  newContentState = Modifier.insertText(
+
+  const inlineStyles = [];
+  const markdownCharacterLength = (matchArr[0].length - matchArr[1].length) / 2;
+
+  let newContentState = currentContent;
+
+  // remove markdown delimiter at end
+  newContentState = Modifier.replaceText(
     newContentState,
-    newContentState.getSelectionAfter(),
+    wordSelection.merge({
+      anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
+    }),
     character || " "
   );
+
+  let afterSelection = newContentState.getSelectionAfter();
+
+  afterSelection = afterSelection.merge({
+    anchorOffset: afterSelection.getFocusOffset() - markdownCharacterLength,
+    focusOffset: afterSelection.getFocusOffset() - markdownCharacterLength,
+  });
+
+  // remove markdown delimiter at start
+  newContentState = Modifier.replaceText(
+    newContentState,
+    wordSelection.merge({
+      focusOffset: wordSelection.getAnchorOffset() + markdownCharacterLength,
+    }),
+    ""
+  );
+
+  // apply style
+  newContentState = Modifier.applyInlineStyle(
+    newContentState,
+    wordSelection.merge({
+      anchorOffset: index,
+      focusOffset: focusOffset - markdownCharacterLength * 2,
+    }),
+    style
+  );
+
   const newEditorState = EditorState.push(
     editorState,
     newContentState,
     "change-inline-style"
   );
-  return EditorState.forceSelection(
-    newEditorState,
-    newContentState.getSelectionAfter()
-  );
+
+  return EditorState.forceSelection(newEditorState, afterSelection);
 };
 
 export default changeCurrentInlineStyle;

src/modifiers/__test__/handleInlineStyle-test.js

@@ -1,20 +1,16 @@
 import changeCurrentInlineStyle from "./changeCurrentInlineStyle";
-
-const inlineMatchers = {
-  BOLD: [/\*\*([^(?**)]+)\*\*/g, /__([^(?:__)]+)__/g],
-  ITALIC: [/\*([^*]+)\*/g, /_([^_]+)_/g],
-  CODE: [/`([^`]+)`/g],
-  STRIKETHROUGH: [/~~([^(?:~~)]+)~~/g],
-};
+import { inlineMatchers } from "../constants";
 
 const handleInlineStyle = (editorState, character) => {
   const key = editorState.getSelection().getStartKey();
   const text = editorState
     .getCurrentContent()
     .getBlockForKey(key)
     .getText();
+
   const line = `${text}${character}`;
   let newEditorState = editorState;
+
   Object.keys(inlineMatchers).some(k => {
     inlineMatchers[k].some(re => {
       let matchArr;