- remove .eslintignore and .eslintrc since we have prettier

- add inline style matchers to constants
- refactor changeCurrentInlineStyle logic
- correct handleInlineStyle tests

Author: juliankrispel

.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

@@ -1,10 +1,10 @@
 /* eslint-disable no-unused-vars */
 
-import { expect } from "chai";
+//import { expect } from "chai";
 import Draft, { EditorState, SelectionState } from "draft-js";
 import handleInlineStyle from "../handleInlineStyle";
 
-describe("handleInlineStyle", () => {
+describe.only("handleInlineStyle", () => {
   describe("no markup", () => {
     const rawContentState = {
       entityMap: {},
@@ -35,10 +35,10 @@ describe("handleInlineStyle", () => {
     );
     it("does not convert block type", () => {
       const newEditorState = handleInlineStyle(editorState, " ");
-      expect(newEditorState).to.equal(editorState);
-      expect(
-        Draft.convertToRaw(newEditorState.getCurrentContent())
-      ).to.deep.equal(rawContentState);
+      expect(newEditorState).toEqual(editorState);
+      expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+        rawContentState
+      );
     });
   });
 
@@ -231,7 +231,7 @@ describe("handleInlineStyle", () => {
             inlineStyleRanges: [
               {
                 length: 3,
-                offset: 5,
+                offset: 2,
                 style: "ITALIC",
               },
             ],
@@ -250,8 +250,8 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 7, // FIXME
-                offset: 5,
+                length: 3,
+                offset: 2,
                 style: "ITALIC",
               },
               {
@@ -376,7 +376,7 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 3,
+                length: 4,
                 offset: 5,
                 style: "ITALIC",
               },
@@ -396,7 +396,7 @@ describe("handleInlineStyle", () => {
             depth: 0,
             inlineStyleRanges: [
               {
-                length: 7, // FIXME
+                length: 2,
                 offset: 5,
                 style: "ITALIC",
               },
@@ -427,12 +427,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",
               },
@@ -452,14 +452,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: {},
@@ -487,10 +488,12 @@ describe("handleInlineStyle", () => {
       );
       it("converts block type", () => {
         const newEditorState = handleInlineStyle(editorState, character);
-        expect(newEditorState).not.to.equal(editorState);
-        expect(
-          Draft.convertToRaw(newEditorState.getCurrentContent())
-        ).to.deep.equal(after);
+        expect(newEditorState).not.toEqual(editorState);
+        // console.log('actual', JSON.stringify(Draft.convertToRaw(newEditorState.getCurrentContent()), null, 2))
+        // console.log('expected', JSON.stringify(after, null, 2))
+        expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+          after
+        );
       });
     });
   });

src/constants.js

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

src/modifiers/__test__/handleInlineStyle-test.js

@@ -1,11 +1,5 @@
 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();