Merge pull request #36 from juliankrispel/handle-return

Use keyBindingFn for handling enter

Author: mxstbr

src/__test__/plugin.test.js

@@ -1,4 +1,3 @@
-import sinon from "sinon";
 import Draft, { EditorState, SelectionState, ContentBlock } from "draft-js";
 import {
   CheckableListItem,
@@ -99,10 +98,12 @@ 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 = () =>
@@ -127,6 +128,33 @@ describe("draft-js-markdown-plugin", () => {
           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 = {
@@ -147,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,12 +6,19 @@ import {
   CHECKABLE_LIST_ITEM,
 } from "draft-js-checkable-list-item";
 
-import { Map } from "immutable";
-
+import { Map, OrderedSet, is } from "immutable";
+import {
+  getDefaultKeyBinding,
+  Modifier,
+  EditorState,
+  RichUtils,
+  DefaultDraftInlineStyle,
+} from "draft-js";
 import adjustBlockDepth from "./modifiers/adjustBlockDepth";
 import handleBlockType from "./modifiers/handleBlockType";
 import handleInlineStyle from "./modifiers/handleInlineStyle";
 import handleNewCodeBlock from "./modifiers/handleNewCodeBlock";
+import resetInlineStyle from "./modifiers/resetInlineStyle";
 import insertEmptyBlock from "./modifiers/insertEmptyBlock";
 import handleLink from "./modifiers/handleLink";
 import handleImage from "./modifiers/handleImage";
@@ -60,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 ||
@@ -72,7 +81,15 @@ function checkReturnForState(editorState, ev) {
       /^header-/.test(type) ||
       type === "blockquote")
   ) {
-    newEditorState = insertEmptyBlock(editorState);
+    // transform markdown (if we aren't in a codeblock that is)
+    if (!inCodeBlock(editorState)) {
+      newEditorState = checkCharacterForState(newEditorState, "\n");
+    }
+    if (newEditorState === editorState) {
+      newEditorState = insertEmptyBlock(newEditorState);
+    } else {
+      newEditorState = RichUtils.toggleBlockType(newEditorState, type);
+    }
   }
   if (
     newEditorState === editorState &&
@@ -154,17 +171,35 @@ const createMarkdownPlugin = (config = {}) => {
     },
     handleReturn(ev, editorState, { setEditorState }) {
       let newEditorState = checkReturnForState(editorState, ev);
-      if (editorState !== newEditorState) {
+      let selection = newEditorState.getSelection();
+
+      // exit code blocks
+      if (
+        inCodeBlock(editorState) &&
+        !is(editorState.getImmutable(), newEditorState.getImmutable())
+      ) {
         setEditorState(newEditorState);
         return "handled";
       }
 
-      // If we're in a code block don't add markdown to it
-      if (inCodeBlock(editorState)) return "not-handled";
+      newEditorState = checkCharacterForState(newEditorState, "\n");
+      let content = newEditorState.getCurrentContent();
 
-      newEditorState = checkCharacterForState(editorState, "\n");
-      if (editorState !== newEditorState) {
-        setEditorState(newEditorState);
+      // 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);
+      }
+
+      newEditorState = resetInlineStyle(newEditorState);
+
+      if (!is(editorState.getImmutable(), newEditorState.getImmutable())) {
+        setEditorState(
+          EditorState.push(newEditorState, content, "split-block")
+        );
         return "handled";
       }
 

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,18 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
 
   let newContentState = currentContent;
 
+  // if appendChar isn't defined add a space
+  // if character is a newline - add empty string and later on - split block
+  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 || " "
+    appendChar
   );
 
   let afterSelection = newContentState.getSelectionAfter();
@@ -56,6 +61,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

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