Merge pull request #38 from juliankrispel/disable-inline-styles-in-link

Disable inline styles inside link

Author: mxstbr

src/__test__/plugin.test.js

@@ -129,6 +129,50 @@ describe("draft-js-markdown-plugin", () => {
           expect(store.setEditorState).not.toHaveBeenCalled();
         });
 
+        it("does not handle if current entity is link", () => {
+          currentRawContentState = {
+            entityMap: {
+              "0": {
+                data: {
+                  href: "www.google.com",
+                  url: "http://www.google.com",
+                },
+                mutability: "MUTABLE",
+                type: "LINK",
+              },
+            },
+            blocks: [
+              {
+                key: "item1",
+                text: "what **is** going on",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [],
+                entityRanges: [
+                  {
+                    offset: 0,
+                    key: 0,
+                    length: 20,
+                  },
+                ],
+                data: {},
+              },
+            ],
+          };
+
+          currentSelectionState = currentEditorState.getSelection().merge({
+            focusOffset: 19,
+            anchorOffset: 19,
+          });
+
+          currentEditorState = createEditorState(
+            currentRawContentState,
+            currentSelectionState
+          );
+
+          expect(subject()).toBe("not-handled");
+        });
+
         it("resets curent inline style", () => {
           currentRawContentState = {
             entityMap: {},
@@ -144,6 +188,7 @@ describe("draft-js-markdown-plugin", () => {
               },
             ],
           };
+
           currentSelectionState = currentSelectionState.merge({
             focusOffset: 5,
             anchorOffset: 5,
@@ -435,6 +480,51 @@ describe("draft-js-markdown-plugin", () => {
             expect(subject()).toBe("not-handled");
           });
         });
+        describe("current entity is a link", () => {
+          it("returns not-handled", () => {
+            currentRawContentState = {
+              entityMap: {
+                "0": {
+                  data: {
+                    href: "www.google.com",
+                    url: "http://www.google.com",
+                  },
+                  mutability: "MUTABLE",
+                  type: "LINK",
+                },
+              },
+              blocks: [
+                {
+                  key: "item1",
+                  text: "what **is** going on",
+                  type: "unstyled",
+                  depth: 0,
+                  inlineStyleRanges: [],
+                  entityRanges: [
+                    {
+                      offset: 0,
+                      key: 0,
+                      length: 20,
+                    },
+                  ],
+                  data: {},
+                },
+              ],
+            };
+
+            currentSelectionState = currentEditorState.getSelection().merge({
+              focusOffset: 19,
+              anchorOffset: 19,
+            });
+
+            currentEditorState = createEditorState(
+              currentRawContentState,
+              currentSelectionState
+            );
+
+            expect(subject()).toBe("not-handled");
+          });
+        });
       });
       describe("handlePastedText", () => {
         let pastedText;

src/index.js

@@ -32,6 +32,16 @@ import { CODE_BLOCK_REGEX } from "./constants";
 
 const INLINE_STYLE_CHARACTERS = [" ", "*", "_"];
 
+function inLink(editorState) {
+  const selection = editorState.getSelection();
+  const contentState = editorState.getCurrentContent();
+  const block = contentState.getBlockForKey(selection.getAnchorKey());
+  const entityKey = block.getEntityAt(selection.getFocusOffset());
+  return (
+    entityKey != null && contentState.getEntity(entityKey).getType() === "LINK"
+  );
+}
+
 function inCodeBlock(editorState) {
   const startKey = editorState.getSelection().getStartKey();
   if (startKey) {
@@ -170,8 +180,10 @@ const createMarkdownPlugin = (config = {}) => {
       return "not-handled";
     },
     handleReturn(ev, editorState, { setEditorState }) {
+      if (inLink(editorState)) return "not-handled";
+
       let newEditorState = checkReturnForState(editorState, ev);
-      let selection = newEditorState.getSelection();
+      const selection = newEditorState.getSelection();
 
       // exit code blocks
       if (
@@ -210,9 +222,12 @@ const createMarkdownPlugin = (config = {}) => {
         return "not-handled";
       }
 
-      // If we're in a code block don't add markdown to it
+      // If we're in a code block - don't transform markdown
       if (inCodeBlock(editorState)) return "not-handled";
 
+      // If we're in a link - don't transform markdown
+      if (inLink(editorState)) return "not-handled";
+
       const newEditorState = checkCharacterForState(editorState, character);
       if (editorState !== newEditorState) {
         setEditorState(newEditorState);