From 78496461be072c9fc274562deca6f36a75edc1c7 Mon Sep 17 00:00:00 2001
From: Bruno Campos <brunocampos@gmail.com>
Date: Wed, 20 Dec 2023 22:22:24 -0300
Subject: [PATCH] Added useRawValueOnCopy prop

---
 .changeset/fresh-pans-cough.md |  5 ++++
 README.md                      |  1 +
 src/MentionsInput.js           | 12 ++++----
 src/MentionsInput.spec.js      | 50 ++++++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fresh-pans-cough.md

diff --git a/.changeset/fresh-pans-cough.md b/.changeset/fresh-pans-cough.md
new file mode 100644
index 00000000..17d6e1f6
--- /dev/null
+++ b/.changeset/fresh-pans-cough.md
@@ -0,0 +1,5 @@
+---
+"react-mentions": minor
+---
+
+Added useRawValueOnCopy prop
diff --git a/README.md b/README.md
index 6d2a7f2b..473014b2 100755
--- a/README.md
+++ b/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:
 
diff --git a/src/MentionsInput.js b/src/MentionsInput.js
index 68e6b73d..38201070 100755
--- a/src/MentionsInput.js
+++ b/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) {
diff --git a/src/MentionsInput.spec.js b/src/MentionsInput.spec.js
index f192f1aa..b4b03db2 100644
--- a/src/MentionsInput.spec.js
+++ b/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."
+        )
+      }
+    )
+  });
 })