Skip to content
This repository was archived by the owner on Oct 11, 2022. It is now read-only.

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

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 66 additions & 36 deletions src/__test__/plugin-new.test.js
Original file line number Diff line number Diff line change
@@ -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(
13 changes: 10 additions & 3 deletions src/__test__/plugin.test.js
Original file line number Diff line number Diff line change
@@ -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();
6 changes: 6 additions & 0 deletions src/__test__/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { EditorState } from "draft-js";

export const applyMDtoInlineStyleChange = editorState =>
EditorState.set(editorState, {
lastChangeType: "md-to-inline-style",
});
3 changes: 3 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -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();
2 changes: 1 addition & 1 deletion src/modifiers/handleInlineStyle.js
Original file line number Diff line number Diff line change
@@ -61,7 +61,7 @@ const handleInlineStyle = (
newEditorState = EditorState.push(
newEditorState,
newContentState,
"change-inline-style"
"md-to-inline-style"
);

return newEditorState;