Added useRawValueOnCopy prop

.changeset/fresh-pans-cough.md

@@ -0,0 +1,5 @@
+---
+"react-mentions": minor
+---
+
+Added useRawValueOnCopy prop

README.md

@@ -64,6 +64,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | forceSuggestionsAboveCursor | boolean                                                 | false          | Forces the SuggestionList to be rendered above the cursor                              |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
 | customSuggestionsContainer  | function(children)                                      | empty function | Allows customizing the container of the suggestions                                    |
+| useRawValueOnCopy           | boolean                                                 | false          | Returns the raw value (with tags) when copying the content                             |
 
 Each data source is configured using a `Mention` component, which has the following props:
 

src/MentionsInput.js

@@ -76,6 +76,7 @@ const propTypes = {
   forceSuggestionsAboveCursor: PropTypes.bool,
   ignoreAccents: PropTypes.bool,
   a11ySuggestionsListLabel: PropTypes.string,
+  useRawValueOnCopy: PropTypes.bool,
 
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
@@ -110,6 +111,7 @@ class MentionsInput extends React.Component {
     ignoreAccents: false,
     singleLine: false,
     allowSuggestionsAboveCursor: false,
+    useRawValueOnCopy: false,
     onKeyDown: () => null,
     onSelect: () => null,
     onBlur: () => null,
@@ -428,14 +430,14 @@ class MentionsInput extends React.Component {
     )
     const markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, 'END')
 
+    const textValue = event.target.value.slice(selectionStart, selectionEnd)
+    const rawValue = value.slice(markupStartIndex, markupEndIndex)
+
     event.clipboardData.setData(
       'text/plain',
-      event.target.value.slice(selectionStart, selectionEnd)
-    )
-    event.clipboardData.setData(
-      'text/react-mentions',
-      value.slice(markupStartIndex, markupEndIndex)
+      this.props.useRawValueOnCopy ? rawValue : textValue
     )
+    event.clipboardData.setData('text/react-mentions', rawValue)
   }
 
   supportsClipboardActions(event) {

src/MentionsInput.spec.js

@@ -476,4 +476,54 @@ describe('MentionsInput', () => {
       expect(preventDefault).not.toHaveBeenCalled()
     })
   })
+
+  describe('when using the useRawValueOnCopy', () => {
+    const plainTextValue = "Hi First, \n\nlet's add Second to the conversation."
+    const value =
+      "Hi @[First](first), \n\nlet's add @[Second](second) to the conversation."
+
+    it.each(['cut', 'copy'])(
+      'should copy the raw value to the clipboard.',
+      (eventType) => {
+        const component = mount(
+          <MentionsInput value={value} useRawValueOnCopy>
+            <Mention trigger="@[__display__](__id__)" data={data} />
+          </MentionsInput>,
+          {
+            attachTo: host,
+          }
+        )
+
+        const textarea = component.find('textarea')
+
+        const selectionStart = plainTextValue.indexOf('First') + 2
+        const selectionEnd = plainTextValue.length
+
+        textarea.simulate('select', {
+          target: { selectionStart, selectionEnd },
+        })
+        textarea.getDOMNode().setSelectionRange(selectionStart, selectionEnd)
+
+        const setData = jest.fn()
+
+        const event = new Event(eventType, { bubbles: true })
+        event.clipboardData = { setData }
+
+        textarea.getDOMNode().dispatchEvent(event)
+
+        expect(setData).toHaveBeenCalledTimes(2)
+
+        expect(setData).toHaveBeenNthCalledWith(
+          1,
+          'text/plain',
+          "@[First](first), \n\nlet's add @[Second](second) to the conversation."
+        )
+        expect(setData).toHaveBeenNthCalledWith(
+          2,
+          'text/react-mentions',
+          "@[First](first), \n\nlet's add @[Second](second) to the conversation."
+        )
+      }
+    )
+  });
 })