Merge pull request #141 from onebar/dont-unstick-inlinestyles-done-by-other-plugins

if inline style was applied by other plugin md plugin should not unst…

Author: mxstbr

src/__test__/plugin-new.test.js

@@ -1,10 +1,6 @@
-import Draft, {
-  EditorState,
-  SelectionState,
-  ContentBlock,
-  convertToRaw,
-} from "draft-js";
+import Draft, { EditorState, SelectionState, convertToRaw } from "draft-js";
 import createMarkdownPlugin from "../";
+import { applyMDtoInlineStyleChange } from "./utils";
 
 describe("markdown", () => {
   it("should convert asteriks to bold text", () => {
@@ -76,15 +72,14 @@ describe("markdown", () => {
     );
   });
 
-  it("should not have sticky inline styles", () => {
+  it("should not unstick inline styles if they were not added by md-to-inline-style change", () => {
     const { handleBeforeInput } = createMarkdownPlugin();
-    const setEditorState = jest.fn();
     const boldInlineStyleRange = {
       length: 4,
       offset: 5,
       style: "BOLD",
     };
-    const before = EditorState.moveSelectionToEnd(
+    const editorState = EditorState.moveSelectionToEnd(
       EditorState.createWithContent(
         Draft.convertFromRaw({
           entityMap: {},
@@ -102,7 +97,39 @@ describe("markdown", () => {
         })
       )
     );
-    expect(handleBeforeInput("a", before, { setEditorState })).toEqual(
+    expect(handleBeforeInput("a", editorState, {})).toEqual("not-handled");
+  });
+
+  it("should not have sticky inline styles", () => {
+    const { handleBeforeInput } = createMarkdownPlugin();
+    const setEditorState = jest.fn();
+    const boldInlineStyleRange = {
+      length: 4,
+      offset: 5,
+      style: "BOLD",
+    };
+    const editorState = applyMDtoInlineStyleChange(
+      EditorState.moveSelectionToEnd(
+        EditorState.createWithContent(
+          Draft.convertFromRaw({
+            entityMap: {},
+            blocks: [
+              {
+                key: "item1",
+                text: "Some text",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [boldInlineStyleRange],
+                entityRanges: [],
+                data: {},
+              },
+            ],
+          })
+        )
+      )
+    );
+
+    expect(handleBeforeInput("a", editorState, { setEditorState })).toEqual(
       "handled"
     );
     const raw = convertToRaw(
@@ -120,34 +147,37 @@ describe("markdown", () => {
       offset: 5,
       style: "BOLD",
     };
-    const before = EditorState.moveSelectionToEnd(
-      EditorState.createWithContent(
-        Draft.convertFromRaw({
-          entityMap: {},
-          blocks: [
-            {
-              key: "item1",
-              text: "Some text",
-              type: "unstyled",
-              depth: 0,
-              inlineStyleRanges: [boldInlineStyleRange],
-              entityRanges: [],
-              data: {},
-            },
-            {
-              key: "item2",
-              text: "",
-              type: "unstyled",
-              depth: 0,
-              inlineStyleRanges: [],
-              entityRanges: [],
-              data: {},
-            },
-          ],
-        })
+    const editorState = applyMDtoInlineStyleChange(
+      EditorState.moveSelectionToEnd(
+        EditorState.createWithContent(
+          Draft.convertFromRaw({
+            entityMap: {},
+            blocks: [
+              {
+                key: "item1",
+                text: "Some text",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [boldInlineStyleRange],
+                entityRanges: [],
+                data: {},
+              },
+              {
+                key: "item2",
+                text: "",
+                type: "unstyled",
+                depth: 0,
+                inlineStyleRanges: [],
+                entityRanges: [],
+                data: {},
+              },
+            ],
+          })
+        )
       )
     );
-    expect(handleBeforeInput("a", before, { setEditorState })).toEqual(
+
+    expect(handleBeforeInput("a", editorState, { setEditorState })).toEqual(
       "handled"
     );
     const raw = convertToRaw(

src/__test__/plugin.test.js

@@ -3,6 +3,7 @@ import {
   CheckableListItem,
   CheckableListItemUtils,
 } from "draft-js-checkable-list-item";
+import { applyMDtoInlineStyleChange } from "./utils";
 
 import {
   defaultInlineWhitelist,
@@ -474,8 +475,12 @@ describe("draft-js-markdown-plugin", () => {
         let character;
         beforeEach(() => {
           character = " ";
-          subject = () =>
-            plugin.handleBeforeInput(character, store.getEditorState(), store);
+          subject = editorState =>
+            plugin.handleBeforeInput(
+              character,
+              editorState || store.getEditorState(),
+              store
+            );
           currentRawContentState = {
             entityMap: {},
             blocks: [
@@ -572,7 +577,9 @@ describe("draft-js-markdown-plugin", () => {
                 anchorOffset: 5,
               });
 
-              expect(subject()).toBe("handled");
+              expect(
+                subject(applyMDtoInlineStyleChange(store.getEditorState()))
+              ).toBe("handled");
               expect(store.setEditorState).toHaveBeenCalled();
               newEditorState = store.setEditorState.mock.calls[0][0];
               const block = newEditorState.getCurrentContent().getLastBlock();

src/__test__/utils.js

@@ -0,0 +1,6 @@
+import { EditorState } from "draft-js";
+
+export const applyMDtoInlineStyleChange = editorState =>
+  EditorState.set(editorState, {
+    lastChangeType: "md-to-inline-style",
+  });

src/index.js

@@ -205,6 +205,9 @@ function checkReturnForState(config, editorState, ev) {
 const unstickyInlineStyles = (character, editorState) => {
   const selection = editorState.getSelection();
   if (!selection.isCollapsed()) return editorState;
+  if (editorState.getLastChangeType() !== "md-to-inline-style") {
+    return editorState;
+  }
 
   const startOffset = selection.getStartOffset();
   const content = editorState.getCurrentContent();

src/modifiers/handleInlineStyle.js

@@ -61,7 +61,7 @@ const handleInlineStyle = (
     newEditorState = EditorState.push(
       newEditorState,
       newContentState,
-      "change-inline-style"
+      "md-to-inline-style"
     );
 
     return newEditorState;