- handle markdown transformation when on list

- reset current inline style upon enter

Author: juliankrispel

src/__test__/plugin.test.js

@@ -98,16 +98,18 @@ describe("draft-js-markdown-plugin", () => {
       it("is loaded", () => {
         expect(typeof createMarkdownPlugin).toBe("function");
       });
+
       it("initialize", () => {
         plugin.initialize(store);
         expect(plugin.store).toEqual(store);
       });
+
       describe("handleReturn", () => {
         beforeEach(() => {
           subject = () =>
             plugin.handleReturn(event, store.getEditorState(), store);
         });
-        it("does always handle", () => {
+        it("does not handle", () => {
           currentRawContentState = {
             entityMap: {},
             blocks: [
@@ -122,10 +124,37 @@ describe("draft-js-markdown-plugin", () => {
               },
             ],
           };
-          expect(subject()).toBe("handled");
+          expect(subject()).toBe("not-handled");
           expect(modifierSpy).not.toHaveBeenCalledTimes(1);
           expect(store.setEditorState).not.toHaveBeenCalled();
         });
+
+        it("resets curent inline style", () => {
+          currentRawContentState = {
+            entityMap: {},
+            blocks: [
+              {
+                key: "item1",
+                text: "item1",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [{ offset: 0, length: 5, style: "BOLD" }],
+                entityRanges: [],
+                data: {},
+              },
+            ],
+          };
+          currentSelectionState = currentSelectionState.merge({
+            focusOffset: 5,
+            anchorOffset: 5,
+          });
+
+          expect(subject()).toBe("handled");
+          expect(store.setEditorState).toHaveBeenCalled();
+          newEditorState = store.setEditorState.mock.calls[0][0];
+          expect(newEditorState.getCurrentInlineStyle().size).toBe(0);
+        });
+
         it("leaves from list", () => {
           createMarkdownPlugin.__Rewire__("leaveList", modifierSpy); // eslint-disable-line no-underscore-dangle
           currentRawContentState = {
@@ -146,6 +175,38 @@ describe("draft-js-markdown-plugin", () => {
           expect(modifierSpy).toHaveBeenCalledTimes(1);
           expect(store.setEditorState).toHaveBeenCalledWith(newEditorState);
         });
+
+        it("adds list item and transforms markdown", () => {
+          // createMarkdownPlugin.__Rewire__("leaveList", modifierSpy); // eslint-disable-line no-underscore-dangle
+          currentRawContentState = {
+            entityMap: {},
+            blocks: [
+              {
+                key: "item1",
+                text: "**some bold text**",
+                type: "unordered-list-item",
+                depth: 0,
+                inlineStyleRanges: [],
+                entityRanges: [],
+                data: {},
+              },
+            ],
+          };
+          currentSelectionState = currentSelectionState.merge({
+            focusOffset: 18,
+            anchorOffset: 18,
+          });
+          expect(subject()).toBe("handled");
+          // expect(modifierSpy).toHaveBeenCalledTimes(1);
+          expect(store.setEditorState).toHaveBeenCalledTimes(1);
+          newEditorState = store.setEditorState.mock.calls[0][0];
+          const newRawContentState = Draft.convertToRaw(
+            newEditorState.getCurrentContent()
+          );
+          expect(newRawContentState.blocks.length).toBe(2);
+          expect(newEditorState.getCurrentInlineStyle().size).toBe(0);
+        });
+
         const testInsertNewBlock = type => () => {
           createMarkdownPlugin.__Rewire__("insertEmptyBlock", modifierSpy); // eslint-disable-line no-underscore-dangle
           currentRawContentState = {

src/index.js

@@ -6,7 +6,7 @@ import {
   CHECKABLE_LIST_ITEM,
 } from "draft-js-checkable-list-item";
 
-import { Map, OrderedSet } from "immutable";
+import { Map, OrderedSet, is } from "immutable";
 import {
   getDefaultKeyBinding,
   Modifier,
@@ -67,9 +67,11 @@ function checkReturnForState(editorState, ev) {
   const currentBlock = contentState.getBlockForKey(key);
   const type = currentBlock.getType();
   const text = currentBlock.getText();
+
   if (/-list-item$/.test(type) && text === "") {
     newEditorState = leaveList(editorState);
   }
+
   if (
     newEditorState === editorState &&
     (ev.ctrlKey ||
@@ -163,20 +165,36 @@ const createMarkdownPlugin = (config = {}) => {
       let newEditorState = checkReturnForState(editorState, ev);
       let selection = newEditorState.getSelection();
 
-      newEditorState = checkCharacterForState(newEditorState, "");
+      if (
+        inCodeBlock(editorState) &&
+        !is(editorState.getImmutable(), newEditorState.getImmutable())
+      ) {
+        setEditorState(newEditorState);
+        return "handled";
+      }
+
+      newEditorState = checkCharacterForState(newEditorState, "\n");
       let content = newEditorState.getCurrentContent();
 
-      content = Modifier.splitBlock(content, selection);
+      // if there are actually no changes but the editorState has a
+      // current inline style we want to split the block
+      if (
+        is(editorState.getImmutable(), newEditorState.getImmutable()) &&
+        editorState.getCurrentInlineStyle().size > 0
+      ) {
+        content = Modifier.splitBlock(content, selection);
+      }
 
-      setEditorState(
-        EditorState.push(
-          resetInlineStyle(newEditorState),
-          content,
-          "split-block"
-        )
-      );
+      newEditorState = resetInlineStyle(newEditorState);
+
+      if (!is(editorState.getImmutable(), newEditorState.getImmutable())) {
+        setEditorState(
+          EditorState.push(newEditorState, content, "split-block")
+        );
+        return "handled";
+      }
 
-      return "handled";
+      return "not-handled";
     },
     handleBeforeInput(character, editorState, { setEditorState }) {
       if (character !== " ") {

src/modifiers/__test__/changeCurrentInlineStyle-test.js

@@ -70,18 +70,12 @@ describe("changeCurrentInlineStyle", () => {
       "\n"
     );
     expect(newEditorState).not.toEqual(editorState);
-    expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
-      rawContentState(
-        "foo bar\n baz",
-        [
-          {
-            length: 3,
-            offset: 4,
-            style: "CODE",
-          },
-        ],
-        "CODE"
-      )
-    );
+    const contentState = Draft.convertToRaw(newEditorState.getCurrentContent());
+    expect(contentState.blocks.length).toBe(2);
+    expect(contentState.blocks[0].text).toEqual("foo bar");
+    expect(contentState.blocks[0].inlineStyleRanges).toEqual([
+      { offset: 4, length: 3, style: "CODE" },
+    ]);
+    expect(contentState.blocks[1].text).toEqual(" baz");
   });
 });

src/modifiers/changeCurrentInlineStyle.js

@@ -21,13 +21,16 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
 
   let newContentState = currentContent;
 
+  let appendChar = character == null ? " " : character;
+  if (character == "\n") appendChar = "";
+
   // remove markdown delimiter at end
   newContentState = Modifier.replaceText(
     newContentState,
     wordSelection.merge({
       anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
     }),
-    character == null ? " " : character
+    appendChar
   );
 
   let afterSelection = newContentState.getSelectionAfter();
@@ -56,6 +59,11 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
     style
   );
 
+  if (character == "\n") {
+    newContentState = Modifier.splitBlock(newContentState, afterSelection);
+    afterSelection = newContentState.getSelectionAfter();
+  }
+
   const newEditorState = EditorState.push(
     editorState,
     newContentState,

src/modifiers/resetInlineStyle.js

@@ -2,4 +2,6 @@ import { OrderedSet } from "immutable";
 import { EditorState } from "draft-js";
 
 export default editorState =>
-  EditorState.setInlineStyleOverride(editorState, OrderedSet());
+  editorState.getCurrentInlineStyle().size === 0
+    ? editorState
+    : EditorState.setInlineStyleOverride(editorState, OrderedSet());