Skip to content

Commit 655c2d3

Browse files
ngsngs
authored
Merge pull request #40 from gnestor/inline-style-regex
Add surrounding whitespace to inlineMatchers
2 parents 5bafd40 + f86c8f4 commit 655c2d3

File tree

6 files changed

+37
-45
lines changed

6 files changed

+37
-45
lines changed

‎src/__test__/plugin-test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,6 @@ describe('draft-js-markdown-shortcuts-plugin', () => {
341341
});
342342
[
343343
'replaceText',
344-
'insertEmptyBlock',
345344
'handleBlockType',
346345
'handleImage',
347346
'handleLink',

‎src/index.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,20 @@ import createLinkDecorator from './decorators/link';
1919
import createImageDecorator from './decorators/image';
2020
import { replaceText } from './utils';
2121

22-
const INLINE_STYLE_CHARACTERS = [' ', '*', '_'];
23-
2422
function checkCharacterForState(editorState, character) {
2523
let newEditorState = handleBlockType(editorState, character);
24+
const contentState = editorState.getCurrentContent();
25+
const selection = editorState.getSelection();
26+
const key = selection.getStartKey();
27+
const currentBlock = contentState.getBlockForKey(key);
28+
const type = currentBlock.getType();
2629
if (editorState === newEditorState) {
2730
newEditorState = handleImage(editorState, character);
2831
}
2932
if (editorState === newEditorState) {
3033
newEditorState = handleLink(editorState, character);
3134
}
32-
if (editorState === newEditorState) {
35+
if (editorState === newEditorState && type !== 'code-block') {
3336
newEditorState = handleInlineStyle(editorState, character);
3437
}
3538
return newEditorState;
@@ -61,7 +64,9 @@ function checkReturnForState(editorState, ev) {
6164
newEditorState = insertText(editorState, '\n');
6265
}
6366
}
64-
67+
if (editorState === newEditorState) {
68+
newEditorState = handleInlineStyle(editorState, '\n');
69+
}
6570
return newEditorState;
6671
}
6772

@@ -128,7 +133,7 @@ const createMarkdownShortcutsPlugin = (config = {}) => {
128133
return 'not-handled';
129134
},
130135
handleBeforeInput(character, editorState, { setEditorState }) {
131-
if (character !== ' ') {
136+
if (character.match(/[A-z0-9_*~`]/)) {
132137
return 'not-handled';
133138
}
134139
const newEditorState = checkCharacterForState(editorState, character);
@@ -145,7 +150,7 @@ const createMarkdownShortcutsPlugin = (config = {}) => {
145150
let newEditorState = editorState;
146151
let buffer = [];
147152
for (let i = 0; i < text.length; i++) { // eslint-disable-line no-plusplus
148-
if (INLINE_STYLE_CHARACTERS.indexOf(text[i]) >= 0) {
153+
if (text[i].match(/[^A-z0-9_*~`]/)) {
149154
newEditorState = replaceText(newEditorState, buffer.join('') + text[i]);
150155
newEditorState = checkCharacterForState(newEditorState, text[i]);
151156
buffer = [];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('changeCurrentInlineStyle', () => {
3232
it('changes block type', () => {
3333
const text = 'foo `bar` baz';
3434
const editorState = createEditorState(text, []);
35-
const matchArr = ['`bar`', 'bar'];
35+
const matchArr = ['`bar` ', '`', 'bar', '`', ' '];
3636
matchArr.index = 4;
3737
matchArr.input = text;
3838
const newEditorState = changeCurrentInlineStyle(
@@ -41,7 +41,7 @@ describe('changeCurrentInlineStyle', () => {
4141
expect(
4242
Draft.convertToRaw(newEditorState.getCurrentContent())
4343
).to.deep.equal(
44-
rawContentState('foo bar baz', [{
44+
rawContentState('foo bar baz', [{
4545
length: 3,
4646
offset: 4,
4747
style: 'CODE'

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('handleInlineStyle', () => {
5858
entityMap: {},
5959
blocks: [{
6060
key: 'item1',
61-
text: 'hello inline style',
61+
text: 'hello inline style',
6262
type: 'unstyled',
6363
depth: 0,
6464
inlineStyleRanges: [{
@@ -96,7 +96,7 @@ describe('handleInlineStyle', () => {
9696
entityMap: {},
9797
blocks: [{
9898
key: 'item1',
99-
text: 'hello inline style',
99+
text: 'hello inline style',
100100
type: 'unstyled',
101101
depth: 0,
102102
inlineStyleRanges: [{
@@ -134,7 +134,7 @@ describe('handleInlineStyle', () => {
134134
entityMap: {},
135135
blocks: [{
136136
key: 'item1',
137-
text: 'hello inline style',
137+
text: 'hello inline style',
138138
type: 'unstyled',
139139
depth: 0,
140140
inlineStyleRanges: [{
@@ -172,7 +172,7 @@ describe('handleInlineStyle', () => {
172172
entityMap: {},
173173
blocks: [{
174174
key: 'item1',
175-
text: 'hello inline style',
175+
text: 'hello inline style',
176176
type: 'unstyled',
177177
depth: 0,
178178
inlineStyleRanges: [{
@@ -214,7 +214,7 @@ describe('handleInlineStyle', () => {
214214
entityMap: {},
215215
blocks: [{
216216
key: 'item1',
217-
text: 'hello inline style',
217+
text: 'hello inline style',
218218
type: 'unstyled',
219219
depth: 0,
220220
inlineStyleRanges: [{
@@ -256,7 +256,7 @@ describe('handleInlineStyle', () => {
256256
entityMap: {},
257257
blocks: [{
258258
key: 'item1',
259-
text: 'hello inline style',
259+
text: 'hello inline style',
260260
type: 'unstyled',
261261
depth: 0,
262262
inlineStyleRanges: [{
@@ -294,7 +294,7 @@ describe('handleInlineStyle', () => {
294294
entityMap: {},
295295
blocks: [{
296296
key: 'item1',
297-
text: 'hello inline style',
297+
text: 'hello inline style',
298298
type: 'unstyled',
299299
depth: 0,
300300
inlineStyleRanges: [{
@@ -339,7 +339,7 @@ describe('handleInlineStyle', () => {
339339
entityMap: {},
340340
blocks: [{
341341
key: 'item1',
342-
text: 'hello inline style',
342+
text: 'hello inline style',
343343
type: 'unstyled',
344344
depth: 0,
345345
inlineStyleRanges: [{
@@ -386,7 +386,7 @@ describe('handleInlineStyle', () => {
386386
entityMap: {},
387387
blocks: [{
388388
key: 'item1',
389-
text: 'hello inline style',
389+
text: 'hello inline style',
390390
type: 'unstyled',
391391
depth: 0,
392392
inlineStyleRanges: [{

‎src/modifiers/changeCurrentInlineStyle.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ const changeCurrentInlineStyle = (editorState, matchArr, style) => {
1111
const newStyle = currentInlineStyle.merge([style]);
1212
const focusOffset = index + matchArr[0].length;
1313
const wordSelection = SelectionState.createEmpty(key).merge({
14-
anchorOffset: index,
14+
anchorOffset: index + matchArr[0].indexOf(matchArr[1]),
1515
focusOffset
1616
});
1717
let newContentState = Modifier.replaceText(
1818
currentContent,
1919
wordSelection,
20-
matchArr[1],
20+
matchArr[2],
2121
newStyle
2222
);
2323
newContentState = Modifier.insertText(
2424
newContentState,
2525
newContentState.getSelectionAfter(),
26-
' '
26+
matchArr[4]
2727
);
2828
const newEditorState = EditorState.push(
2929
editorState,

‎src/modifiers/handleInlineStyle.js‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
import changeCurrentInlineStyle from './changeCurrentInlineStyle';
22

33
const inlineMatchers = {
4-
BOLD: [
5-
/\*\*([^(?:**)]+)\*\*/g,
6-
/__([^(?:__)]+)__/g
7-
],
8-
ITALIC: [
9-
/\*([^*]+)\*/g,
10-
/_([^_]+)_/g
11-
],
12-
CODE: [
13-
/`([^`]+)`/g
14-
],
15-
STRIKETHROUGH: [
16-
/~~([^(?:~~)]+)~~/g
17-
]
4+
BOLD: /(?:^|\s|\n|[^A-z0-9_*~`])(\*{2}|_{2})((?!\1).*?)(\1)($|\s|\n|[^A-z0-9_*~`])/g,
5+
ITALIC: /(?:^|\s|\n|[^A-z0-9_*~`])(\*{1}|_{1})((?!\1).*?)(\1)($|\s|\n|[^A-z0-9_*~`])/g,
6+
CODE: /(?:^|\s|\n|[^A-z0-9_*~`])(`)((?!\1).*?)(\1)($|\s|\n|[^A-z0-9_*~`])/g,
7+
STRIKETHROUGH: /(?:^|\s|\n|[^A-z0-9_*~`])(~{2})((?!\1).*?)(\1)($|\s|\n|[^A-z0-9_*~`])/g
188
};
199

2010
const handleInlineStyle = (editorState, character) => {
@@ -23,16 +13,14 @@ const handleInlineStyle = (editorState, character) => {
2313
const line = `${text}${character}`;
2414
let newEditorState = editorState;
2515
Object.keys(inlineMatchers).some((k) => {
26-
inlineMatchers[k].some((re) => {
27-
let matchArr;
28-
do {
29-
matchArr = re.exec(line);
30-
if (matchArr) {
31-
newEditorState = changeCurrentInlineStyle(newEditorState, matchArr, k);
32-
}
33-
} while (matchArr);
34-
return newEditorState !== editorState;
35-
});
16+
const re = inlineMatchers[k];
17+
let matchArr;
18+
do {
19+
matchArr = re.exec(line);
20+
if (matchArr) {
21+
newEditorState = changeCurrentInlineStyle(newEditorState, matchArr, k);
22+
}
23+
} while (matchArr);
3624
return newEditorState !== editorState;
3725
});
3826
return newEditorState;

0 commit comments

Comments
 (0)