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

Commit 6db0e4d

Browse files
juliankrispeljuliankrispel
committed
consolidate changes
2 parents dd69ecf + 7002ed8 commit 6db0e4d

File tree

5 files changed

+120
-59
lines changed

5 files changed

+120
-59
lines changed

‎src/constants.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { CHECKABLE_LIST_ITEM } from "draft-js-checkable-list-item";
33
export const CODE_BLOCK_REGEX = /^```([\w-]+)?\s*$/;
44

55
export const inlineMatchers = {
6-
BOLD: [/\*\*([^(?**)]+)\*\*$/g, /__([^(?:__)]+)__$/g],
7-
ITALIC: [/\*([^*]+)\*$/g, /_([^_]+)_$/g],
8-
CODE: [/`([^`]+)`$/g],
9-
STRIKETHROUGH: [/~~([^(?:~~)]+)~~$/g],
6+
BOLD: [/\*\*(.+)\*\*$/g, /__(.+)__$/g],
7+
ITALIC: [/\*(.+)\*$/g, /_(.+)_$/g],
8+
CODE: [/`(.+)`$/g],
9+
STRIKETHROUGH: [/~~(.+)~~$/g],
1010
};
1111

1212
export const CODE_BLOCK_TYPE = "code-block";

‎src/modifiers/__test__/changeCurrentInlineStyle-test.js‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe("changeCurrentInlineStyle", () => {
4545
expect(newEditorState).not.toEqual(editorState);
4646
expect(Draft.convertToRaw(newEditorState.getCurrentContent())).toEqual(
4747
rawContentState(
48-
"foo bar baz",
48+
"foo bar baz",
4949
[
5050
{
5151
length: 3,
@@ -57,25 +57,4 @@ describe("changeCurrentInlineStyle", () => {
5757
)
5858
);
5959
});
60-
it("inserts the character at the end", () => {
61-
const text = "foo `bar` baz";
62-
const editorState = createEditorState(text, []);
63-
const matchArr = ["`bar`", "bar"];
64-
matchArr.index = 4;
65-
matchArr.input = text;
66-
const newEditorState = changeCurrentInlineStyle(
67-
editorState,
68-
matchArr,
69-
"CODE",
70-
"\n"
71-
);
72-
expect(newEditorState).not.toEqual(editorState);
73-
const contentState = Draft.convertToRaw(newEditorState.getCurrentContent());
74-
expect(contentState.blocks.length).toBe(2);
75-
expect(contentState.blocks[0].text).toEqual("foo bar");
76-
expect(contentState.blocks[0].inlineStyleRanges).toEqual([
77-
{ offset: 4, length: 3, style: "CODE" },
78-
]);
79-
expect(contentState.blocks[1].text).toEqual(" baz");
80-
});
8160
});

‎src/modifiers/__test__/handleInlineStyle-test.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,66 @@ describe("handleInlineStyle", () => {
4747
});
4848

4949
const testCases = {
50+
"converts a mix of code, bold and italic and strikethrough in one go": {
51+
before: {
52+
entityMap: {},
53+
blocks: [
54+
{
55+
key: "item1",
56+
text: "`h~~el**lo *inline~~***` style",
57+
type: "unstyled",
58+
depth: 0,
59+
inlineStyleRanges: [],
60+
entityRanges: [],
61+
data: {},
62+
},
63+
],
64+
},
65+
after: {
66+
entityMap: {},
67+
blocks: [
68+
{
69+
key: "item1",
70+
text: "hello inline style",
71+
type: "unstyled",
72+
depth: 0,
73+
inlineStyleRanges: [
74+
{
75+
length: 12,
76+
offset: 0,
77+
style: "CODE",
78+
},
79+
{
80+
length: 11,
81+
offset: 1,
82+
style: "STRIKETHROUGH",
83+
},
84+
{
85+
length: 9,
86+
offset: 3,
87+
style: "BOLD",
88+
},
89+
{
90+
length: 6,
91+
offset: 6,
92+
style: "ITALIC",
93+
},
94+
],
95+
entityRanges: [],
96+
data: {},
97+
},
98+
],
99+
},
100+
selection: new SelectionState({
101+
anchorKey: "item1",
102+
anchorOffset: 24,
103+
focusKey: "item1",
104+
focusOffset: 24,
105+
isBackward: false,
106+
hasFocus: true,
107+
}),
108+
},
109+
50110
"converts to bold with astarisks": {
51111
before: {
52112
entityMap: {},

‎src/modifiers/changeCurrentInlineStyle.js‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { EditorState, SelectionState, Modifier } from "draft-js";
22

3-
const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
3+
const changeCurrentInlineStyle = (editorState, matchArr, style) => {
44
const currentContent = editorState.getCurrentContent();
55
const selection = editorState.getSelection();
66
const key = selection.getStartKey();
@@ -21,18 +21,12 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
2121

2222
let newContentState = currentContent;
2323

24-
// if appendChar isn't defined add a space
25-
// if character is a newline - add empty string and later on - split block
26-
let appendChar = character == null ? " " : character;
27-
if (character == "\n") appendChar = "";
28-
2924
// remove markdown delimiter at end
30-
newContentState = Modifier.replaceText(
25+
newContentState = Modifier.removeRange(
3126
newContentState,
3227
wordSelection.merge({
3328
anchorOffset: wordSelection.getFocusOffset() - markdownCharacterLength,
34-
}),
35-
appendChar
29+
})
3630
);
3731

3832
let afterSelection = newContentState.getSelectionAfter();
@@ -43,12 +37,11 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
4337
});
4438

4539
// remove markdown delimiter at start
46-
newContentState = Modifier.replaceText(
40+
newContentState = Modifier.removeRange(
4741
newContentState,
4842
wordSelection.merge({
4943
focusOffset: wordSelection.getAnchorOffset() + markdownCharacterLength,
50-
}),
51-
""
44+
})
5245
);
5346

5447
// apply style
@@ -61,11 +54,6 @@ const changeCurrentInlineStyle = (editorState, matchArr, style, character) => {
6154
style
6255
);
6356

64-
if (character == "\n") {
65-
newContentState = Modifier.splitBlock(newContentState, afterSelection);
66-
afterSelection = newContentState.getSelectionAfter();
67-
}
68-
6957
const newEditorState = EditorState.push(
7058
editorState,
7159
newContentState,

‎src/modifiers/handleInlineStyle.js‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
11
import changeCurrentInlineStyle from "./changeCurrentInlineStyle";
2+
import { EditorState, Modifier } from "draft-js";
23
import { inlineMatchers } from "../constants";
34

4-
const handleInlineStyle = (whitelist, editorState, character) => {
5-
const selection = editorState.getSelection();
6-
const key = editorState.getSelection().getStartKey();
7-
const text = editorState
8-
.getCurrentContent()
9-
.getBlockForKey(key)
10-
.getText()
11-
.slice(0, selection.getFocusOffset());
12-
13-
const line = `${text}`;
5+
const handleChange = (editorState, line, whitelist) => {
146
let newEditorState = editorState;
15-
16-
var i = 0;
17-
187
Object.keys(inlineMatchers)
198
.filter(matcher => whitelist.includes(matcher))
209
.some(k => {
@@ -26,11 +15,9 @@ const handleInlineStyle = (whitelist, editorState, character) => {
2615
newEditorState = changeCurrentInlineStyle(
2716
newEditorState,
2817
matchArr,
29-
k,
30-
character
18+
k
3119
);
3220
}
33-
i++;
3421
} while (matchArr);
3522
return newEditorState !== editorState;
3623
});
@@ -39,4 +26,51 @@ const handleInlineStyle = (whitelist, editorState, character) => {
3926
return newEditorState;
4027
};
4128

29+
const getLine = (editorState, anchorOffset) => {
30+
const selection = editorState.getSelection().merge({ anchorOffset });
31+
const key = editorState.getSelection().getStartKey();
32+
33+
return editorState
34+
.getCurrentContent()
35+
.getBlockForKey(key)
36+
.getText()
37+
.slice(0, selection.getFocusOffset());
38+
};
39+
40+
const handleInlineStyle = (whitelist, editorState, character) => {
41+
let selection = editorState.getSelection();
42+
let line = getLine(editorState, selection.getAnchorOffset());
43+
let newEditorState = handleChange(editorState, line, whitelist);
44+
let lastEditorState = editorState;
45+
46+
while (newEditorState !== lastEditorState) {
47+
lastEditorState = newEditorState;
48+
line = getLine(newEditorState, selection.getAnchorOffset());
49+
newEditorState = handleChange(newEditorState, line, whitelist);
50+
}
51+
52+
if (newEditorState !== editorState) {
53+
let newContentState = newEditorState.getCurrentContent();
54+
selection = newEditorState.getSelection();
55+
56+
if (character === "\n") {
57+
newContentState = Modifier.splitBlock(newContentState, selection);
58+
} else {
59+
newContentState = Modifier.insertText(
60+
newContentState,
61+
selection,
62+
character
63+
);
64+
}
65+
66+
newEditorState = EditorState.push(
67+
newEditorState,
68+
newContentState,
69+
"change-inline-style"
70+
);
71+
}
72+
73+
return newEditorState;
74+
};
75+
4276
export default handleInlineStyle;

0 commit comments

Comments
 (0)