Merge pull request #37 from juliankrispel/apply-transform-only-when-cursor-at-end-of-delimiter

Only apply markdown transformation if cursor at the end of a matching string

Author: mxstbr

src/constants.js

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

src/modifiers/__test__/handleInlineStyle-test.js

@@ -79,9 +79,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -123,9 +123,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -167,9 +167,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -310,9 +310,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -398,9 +398,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -456,9 +456,9 @@ describe("handleInlineStyle", () => {
       },
       selection: new SelectionState({
         anchorKey: "item1",
-        anchorOffset: 14,
+        anchorOffset: 16,
         focusKey: "item1",
-        focusOffset: 14,
+        focusOffset: 16,
         isBackward: false,
         hasFocus: true,
       }),
@@ -529,7 +529,25 @@ describe("handleInlineStyle", () => {
         EditorState.createWithContent(contentState),
         selection
       );
-      it("converts block type", () => {
+
+      const wrongSelectionState = selection.merge({
+        anchorOffset: 0,
+        focusOffset: 0,
+      });
+      const sameEditorState = EditorState.forceSelection(
+        editorState,
+        wrongSelectionState
+      );
+
+      it("does not convert markdown to style or block type if selection is at the wrong place", () => {
+        const newEditorState = handleInlineStyle(sameEditorState, character);
+        expect(newEditorState).toEqual(sameEditorState);
+        expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
+          before
+        );
+      });
+
+      it("converts markdown to style or block type", () => {
         const newEditorState = handleInlineStyle(editorState, character);
         expect(newEditorState).not.toEqual(editorState);
         expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(

src/modifiers/handleInlineStyle.js

@@ -2,15 +2,19 @@ import changeCurrentInlineStyle from "./changeCurrentInlineStyle";
 import { inlineMatchers } from "../constants";
 
 const handleInlineStyle = (editorState, character) => {
+  const selection = editorState.getSelection();
   const key = editorState.getSelection().getStartKey();
   const text = editorState
     .getCurrentContent()
     .getBlockForKey(key)
-    .getText();
+    .getText()
+    .slice(0, selection.getFocusOffset());
 
-  const line = `${text}${character}`;
+  const line = `${text}`;
   let newEditorState = editorState;
 
+  var i = 0;
+
   Object.keys(inlineMatchers).some(k => {
     inlineMatchers[k].some(re => {
       let matchArr;
@@ -24,6 +28,7 @@ const handleInlineStyle = (editorState, character) => {
             character
           );
         }
+        i++;
       } while (matchArr);
       return newEditorState !== editorState;
     });