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
Show file tree
Hide file tree
Changes from 1 commit
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
106 changes: 70 additions & 36 deletions src/__test__/plugin-new.test.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Draft, {
EditorState,
SelectionState,
ContentBlock,
convertToRaw,
} from "draft-js";
import Draft, { EditorState, SelectionState, convertToRaw } from "draft-js";
import createMarkdownPlugin from "../";

const applyMDtoInlineStyleChange = editorState =>
EditorState.set(editorState, {
lastChangeType: "md-to-inline-style",
});

describe("markdown", () => {
it("should convert asteriks to bold text", () => {
const { handleBeforeInput } = createMarkdownPlugin();
Expand Down Expand Up @@ -76,15 +76,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: {},
Expand All @@ -102,7 +101,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(
Expand All @@ -120,34 +151,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(
Expand Down
17 changes: 14 additions & 3 deletions src/__test__/plugin.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ import {
import { Map, List } from "immutable";
import createMarkdownPlugin from "../";

const applyMDtoInlineStyleChange = editorState =>
Copy link
Author

@andrewfan andrewfan Oct 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure what is better

  • copy this function from new tests and leave it here until old styled tests will be migrated (will they?)
  • simply import it from new tests

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simply import it from new tests, old tests will stay as they are I'm pretty sure!

EditorState.set(editorState, {
lastChangeType: "md-to-inline-style",
});

describe("draft-js-markdown-plugin", () => {
afterEach(() => {
/* eslint-disable no-underscore-dangle */
Expand Down Expand Up @@ -474,8 +479,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: [
Expand Down Expand Up @@ -572,7 +581,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();
Expand Down
3 changes: 3 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/modifiers/handleInlineStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const handleInlineStyle = (
newEditorState = EditorState.push(
newEditorState,
newContentState,
"change-inline-style"
"md-to-inline-style"
);

return newEditorState;
Expand Down