diff --git a/src/__test__/plugin-new.test.js b/src/__test__/plugin-new.test.js index b94f130..ac04fed 100644 --- a/src/__test__/plugin-new.test.js +++ b/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( diff --git a/src/__test__/plugin.test.js b/src/__test__/plugin.test.js index c9fcf8e..aa5f82b 100755 --- a/src/__test__/plugin.test.js +++ b/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(); diff --git a/src/__test__/utils.js b/src/__test__/utils.js new file mode 100644 index 0000000..d45245c --- /dev/null +++ b/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", + }); diff --git a/src/index.js b/src/index.js index 3bd3bc1..2324c92 100755 --- a/src/index.js +++ b/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(); diff --git a/src/modifiers/handleInlineStyle.js b/src/modifiers/handleInlineStyle.js index f52971c..ed38b81 100644 --- a/src/modifiers/handleInlineStyle.js +++ b/src/modifiers/handleInlineStyle.js @@ -61,7 +61,7 @@ const handleInlineStyle = ( newEditorState = EditorState.push( newEditorState, newContentState, - "change-inline-style" + "md-to-inline-style" ); return newEditorState;