Skip to content

Commit

Permalink
Fix DraftJS error when pasting over non-collapsed selection
Browse files Browse the repository at this point in the history
addText uses insertText, so the handlePastedText method was failing if a user
was highlighting text and then pasting to replace the highlighted text.

(error was: Target range must be collapsed for `insertText`)

A similar method, replaceText, has been aded, and the handlePastedText method
has been updated to use replaceText instead.
  • Loading branch information
Rose Robertson committed May 23, 2017
1 parent 2ad0547 commit 32f18f8
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 8 deletions.
4 changes: 2 additions & 2 deletions src/__test__/plugin-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ describe('draft-js-markdown-shortcuts-plugin', () => {
subject = () => plugin.handlePastedText(pastedText, html, store);
});
[
'addText',
'replaceText',
'addEmptyBlock',
'handleBlockType',
'handleImage',
Expand Down Expand Up @@ -342,7 +342,7 @@ describe('draft-js-markdown-shortcuts-plugin', () => {
describe('pasted just text', () => {
beforeEach(() => {
pastedText = 'hello';
createMarkdownShortcutsPlugin.__Rewire__('addText', modifierSpy); // eslint-disable-line no-underscore-dangle
createMarkdownShortcutsPlugin.__Rewire__('replaceText', modifierSpy); // eslint-disable-line no-underscore-dangle
});
it('returns handled', () => {
expect(subject()).to.equal('handled');
Expand Down
27 changes: 25 additions & 2 deletions src/__test__/utils-test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { expect } from 'chai';
import Draft, { EditorState } from 'draft-js';
import { addText, addEmptyBlock } from '../utils';
import Draft, { EditorState, SelectionState } from 'draft-js';
import { addText, replaceText, addEmptyBlock } from '../utils';

describe('utils test', () => {
it('is loaded', () => {
expect(addText).to.be.a('function');
expect(replaceText).to.be.a('function');
expect(addEmptyBlock).to.be.a('function');
});

Expand Down Expand Up @@ -45,4 +46,26 @@ describe('utils test', () => {
const lastBlock = currentContent.getLastBlock();
expect(lastBlock.getText()).to.equal(randomText);
});

it('should replaceText', () => {
let newEditorState = EditorState.createWithContent(Draft.convertFromRaw(newRawContentState));
const randomText = Date.now().toString(32);
let currentContent = newEditorState.getCurrentContent();
let lastBlock = currentContent.getLastBlock();
const newSelection = new SelectionState({
anchorKey: lastBlock.getKey(),
anchorOffset: 0,
focusKey: lastBlock.getKey(),
focusOffset: lastBlock.getText().length
});
newEditorState = EditorState.forceSelection(newEditorState, newSelection);

newEditorState = replaceText(newEditorState, randomText);
currentContent = newEditorState.getCurrentContent();
expect(currentContent.hasText()).to.equal(true);
lastBlock = currentContent.getLastBlock();
expect(lastBlock.getText()).to.equal(randomText);
const firstBlock = currentContent.getFirstBlock();
expect(firstBlock.getText()).to.equal(randomText);
});
});
8 changes: 4 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import leaveList from './modifiers/leaveList';
import insertText from './modifiers/insertText';
import createLinkDecorator from './decorators/link';
import createImageDecorator from './decorators/image';
import { addText, addEmptyBlock } from './utils';
import { replaceText, addEmptyBlock } from './utils';

const INLINE_STYLE_CHARACTERS = [' ', '*', '_'];

Expand Down Expand Up @@ -140,16 +140,16 @@ const createMarkdownShortcutsPlugin = (config = {}) => {
let buffer = [];
for (let i = 0; i < text.length; i++) { // eslint-disable-line no-plusplus
if (INLINE_STYLE_CHARACTERS.indexOf(text[i]) >= 0) {
newEditorState = addText(newEditorState, buffer.join('') + text[i]);
newEditorState = replaceText(newEditorState, buffer.join('') + text[i]);
newEditorState = checkCharacterForState(newEditorState, text[i]);
buffer = [];
} else if (text[i].charCodeAt(0) === 10) {
newEditorState = addText(newEditorState, buffer.join(''));
newEditorState = replaceText(newEditorState, buffer.join(''));
newEditorState = addEmptyBlock(newEditorState);
newEditorState = checkReturnForState(newEditorState, {});
buffer = [];
} else if (i === text.length - 1) {
newEditorState = addText(newEditorState, buffer.join('') + text[i]);
newEditorState = replaceText(newEditorState, buffer.join('') + text[i]);
buffer = [];
} else {
buffer.push(text[i]);
Expand Down
5 changes: 5 additions & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ export function addText(editorState, bufferText) {
return EditorState.push(editorState, contentState, 'insert-characters');
}

export function replaceText(editorState, bufferText) {
const contentState = Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), bufferText);
return EditorState.push(editorState, contentState, 'insert-characters');
}

export function addEmptyBlock(editorState) {
let contentState = editorState.getCurrentContent();
const emptyBlock = getEmptyContentBlock();
Expand Down

0 comments on commit 32f18f8

Please sign in to comment.