Merge pull request #46 from michaelgmcd/master

fix: only insert empty block for headers and blockquote when at end of line

Author: juliankrispel

src/__test__/plugin.test.js

@@ -254,32 +254,66 @@ describe("draft-js-markdown-plugin", () => {
           expect(newEditorState.getCurrentInlineStyle().size).toBe(0);
         });
 
-        const testInsertNewBlock = type => () => {
-          createMarkdownPlugin.__Rewire__("insertEmptyBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
-          currentRawContentState = {
-            entityMap: {},
-            blocks: [
-              {
-                key: "item1",
-                text: "Hello",
-                type,
-                depth: 0,
-                inlineStyleRanges: [],
-                entityRanges: [],
-                data: {},
-              },
-            ],
-          };
-          expect(subject()).toBe("handled");
-          expect(modifierSpy).toHaveBeenCalledTimes(1);
-          expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
-        };
-        ["one", "two", "three", "four", "five", "six"].forEach(level => {
-          describe(`on header-${level}`, () => {
-            it(
-              "inserts new empty block",
-              testInsertNewBlock(`header-${level}`)
-            );
+        const emptyBlockTypes = [
+          "blockquote",
+          "header-one",
+          "header-two",
+          "header-three",
+          "header-four",
+          "header-five",
+          "header-six",
+        ];
+
+        emptyBlockTypes.forEach(type => {
+          describe(`on ${type}`, () => {
+            const text = "Hello";
+            beforeEach(() => {
+              createMarkdownPlugin.__Rewire__("insertEmptyBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
+              currentRawContentState = {
+                entityMap: {},
+                blocks: [
+                  {
+                    key: "item1",
+                    text,
+                    type,
+                    depth: 0,
+                    inlineStyleRanges: [],
+                    entityRanges: [],
+                    data: {},
+                  },
+                ],
+              };
+            });
+
+            describe("at the end of line", () => {
+              beforeEach(() => {
+                currentSelectionState = currentEditorState
+                  .getSelection()
+                  .merge({
+                    focusOffset: text.length,
+                    anchorOffset: text.length,
+                  });
+
+                currentEditorState = createEditorState(
+                  currentRawContentState,
+                  currentSelectionState
+                );
+              });
+              it("inserts new empty block", () => {
+                expect(subject()).toBe("handled");
+                expect(modifierSpy).toHaveBeenCalledTimes(1);
+                expect(store.setEditorState).toHaveBeenCalledWith(
+                  newEditorState
+                );
+              });
+            });
+            describe("when not at the end of the line", () => {
+              it("does not handle", () => {
+                expect(subject()).toBe("not-handled");
+                expect(modifierSpy).not.toHaveBeenCalled();
+                expect(store.setEditorState).not.toHaveBeenCalled();
+              });
+            });
           });
         });
         ["ctrlKey", "shiftKey", "metaKey", "altKey"].forEach(key => {
@@ -289,7 +323,27 @@ describe("draft-js-markdown-plugin", () => {
               props[key] = true;
               event = new window.KeyboardEvent("keydown", props);
             });
-            it("inserts new empty block", testInsertNewBlock("blockquote"));
+            it("inserts new empty block", () => {
+              createMarkdownPlugin.__Rewire__("insertEmptyBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
+              const text = "Hello";
+              currentRawContentState = {
+                entityMap: {},
+                blocks: [
+                  {
+                    key: "item1",
+                    text,
+                    type: "any type",
+                    depth: 0,
+                    inlineStyleRanges: [],
+                    entityRanges: [],
+                    data: {},
+                  },
+                ],
+              };
+              expect(subject()).toBe("handled");
+              expect(modifierSpy).toHaveBeenCalledTimes(1);
+              expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
+            });
           });
         });
         it("handles new code block", () => {

src/index.js

@@ -122,23 +122,28 @@ function checkReturnForState(config, editorState, ev) {
   let newEditorState = editorState;
   const contentState = editorState.getCurrentContent();
   const selection = editorState.getSelection();
+  const isCollapsed = selection.isCollapsed();
   const key = selection.getStartKey();
+  const endOffset = selection.getEndOffset();
   const currentBlock = contentState.getBlockForKey(key);
+  const blockLength = currentBlock.getLength();
   const type = currentBlock.getType();
   const text = currentBlock.getText();
 
   if (/-list-item$/.test(type) && text === "") {
     newEditorState = leaveList(editorState);
   }
 
+  const modifierKeyPressed =
+    ev.ctrlKey || ev.shiftKey || ev.metaKey || ev.altKey;
+  const isAtEndOfLine = endOffset === blockLength;
+  const atEndOfHeader = /^header-/.test(type) && isAtEndOfLine;
+  const atEndOfBlockQuote = type === "blockquote" && isAtEndOfLine;
+
   if (
     newEditorState === editorState &&
-    (ev.ctrlKey ||
-      ev.shiftKey ||
-      ev.metaKey ||
-      ev.altKey ||
-      /^header-/.test(type) ||
-      type === "blockquote")
+    isCollapsed &&
+    (modifierKeyPressed || atEndOfHeader || atEndOfBlockQuote)
   ) {
     // transform markdown (if we aren't in a codeblock that is)
     if (!inCodeBlock(editorState)) {