fix: remove carriage returns from pasted strings (#367)

src/MentionsInput.js

@@ -1,15 +1,4 @@
-import isEqual from 'lodash/isEqual'
-import isNumber from 'lodash/isNumber'
-import keys from 'lodash/keys'
-import omit from 'lodash/omit'
-import values from 'lodash/values'
-import PropTypes from 'prop-types'
 import React, { Children } from 'react'
-import ReactDOM from 'react-dom'
-import { defaultStyle } from 'substyle'
-
-import Highlighter from './Highlighter'
-import SuggestionsOverlay from './SuggestionsOverlay'
 import {
   applyChangeToValue,
   countSuggestions,
@@ -25,6 +14,17 @@ import {
   spliceString,
 } from './utils'
 
+import Highlighter from './Highlighter'
+import PropTypes from 'prop-types'
+import ReactDOM from 'react-dom'
+import SuggestionsOverlay from './SuggestionsOverlay'
+import { defaultStyle } from 'substyle'
+import isEqual from 'lodash/isEqual'
+import isNumber from 'lodash/isNumber'
+import keys from 'lodash/keys'
+import omit from 'lodash/omit'
+import values from 'lodash/values'
+
 export const makeTriggerRegex = function(trigger, options = {}) {
   if (trigger instanceof RegExp) {
     return trigger
@@ -357,7 +357,8 @@ class MentionsInput extends React.Component {
       markupStartIndex,
       markupEndIndex,
       pastedMentions || pastedData
-    )
+    ).replace(/\r/g, '')
+
     const newPlainTextValue = getPlainText(newValue, config)
 
     const eventMock = { target: { ...event.target, value: newValue } }
@@ -657,7 +658,10 @@ class MentionsInput extends React.Component {
       left: caretOffsetParentRect.left + caretPosition.left,
       top: caretOffsetParentRect.top + caretPosition.top + caretHeight,
     }
-    const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    const viewportHeight = Math.max(
+      document.documentElement.clientHeight,
+      window.innerHeight || 0
+    )
 
     if (!suggestions) {
       return
@@ -689,9 +693,11 @@ class MentionsInput extends React.Component {
       // guard for mentions suggestions list clipped by bottom edge of window if allowSuggestionsAboveCursor set to true.
       // Move the list up above the caret if it's getting cut off by the bottom of the window, provided that the list height
       // is small enough to NOT cover up the caret
-      if (allowSuggestionsAboveCursor &&
-          top + suggestions.offsetHeight > viewportHeight &&
-          suggestions.offsetHeight < top - caretHeight) {
+      if (
+        allowSuggestionsAboveCursor &&
+        top + suggestions.offsetHeight > viewportHeight &&
+        suggestions.offsetHeight < top - caretHeight
+      ) {
         position.top = Math.max(0, top - suggestions.offsetHeight - caretHeight)
       } else {
         position.top = top
@@ -708,9 +714,15 @@ class MentionsInput extends React.Component {
       // guard for mentions suggestions list clipped by bottom edge of window if allowSuggestionsAboveCursor set to true.
       // move the list up above the caret if it's getting cut off by the bottom of the window, provided that the list height
       // is small enough to NOT cover up the caret
-      if (allowSuggestionsAboveCursor &&
-          viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight &&
-          suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop) {
+      if (
+        allowSuggestionsAboveCursor &&
+        viewportRelative.top -
+          highlighter.scrollTop +
+          suggestions.offsetHeight >
+          viewportHeight &&
+        suggestions.offsetHeight <
+          caretOffsetParentRect.top - caretHeight - highlighter.scrollTop
+      ) {
         position.top = top - suggestions.offsetHeight - caretHeight
       } else {
         position.top = top

src/MentionsInput.spec.js

@@ -1,8 +1,8 @@
-import { mount } from 'enzyme'
-import React from 'react'
+import { Mention, MentionsInput } from './index'
 
+import React from 'react'
 import { makeTriggerRegex } from './MentionsInput'
-import { Mention, MentionsInput } from './index'
+import { mount } from 'enzyme'
 
 const data = [
   { id: 'first', value: 'First entry' },
@@ -374,8 +374,8 @@ describe('MentionsInput', () => {
 
       const event = new Event('paste', { bubbles: true })
       event.clipboardData = {
-        getData: jest.fn(
-          type => (type === 'text/react-mentions' ? pastedText : '')
+        getData: jest.fn(type =>
+          type === 'text/react-mentions' ? pastedText : ''
         ),
       }
 
@@ -417,6 +417,37 @@ describe('MentionsInput', () => {
       expect(newPlainTextValue).toMatchSnapshot()
     })
 
+    it('should remove carriage returns from pasted values', () => {
+      const pastedText =
+        "Hi First, \r\n\r\nlet's add Second to the conversation."
+
+      const event = new Event('paste', { bubbles: true })
+
+      event.clipboardData = {
+        getData: jest.fn(type => (type === 'text/plain' ? pastedText : '')),
+      }
+
+      const onChange = jest.fn()
+
+      component.setProps({ onChange, value: '' })
+
+      expect(onChange).not.toHaveBeenCalled()
+
+      const textarea = component.find('textarea')
+
+      textarea.getDOMNode().dispatchEvent(event)
+
+      const [[, newValue, newPlainTextValue]] = onChange.mock.calls
+
+      expect(newValue).toEqual(
+        "Hi First, \n\nlet's add Second to the conversation."
+      )
+
+      expect(newPlainTextValue).toEqual(
+        "Hi First, \n\nlet's add Second to the conversation."
+      )
+    })
+
     it('should fallback to the browsers behaviour if the "paste" event does not support clipboardData', () => {
       // IE 11 has no clipboardData attached to the event and only supports mime type "text"
       // therefore, the new mechanism should ignore those events and let the browser handle them