feat: add custom copy/paste behaviour

[frontendphil]

Fixes #66

• modify the copied string to include mentions instead of just plain text
• the paste then works out of the box

[jfschwarz]

Not sure, if this is a good solution. Copying text with mentions to an non-react-mentions text input would have a bit of an unexpected result...

[frontendphil]

@jfschwarz yes, but copying text from a mentions input to a mentions input would have the exact expected result ;)

[jfschwarz]

would it be an option to write the markup into the clipboard data as an extra format in addition to text/plain, then read from that one in the paste handling?

[frontendphil]

Not sure what you mean by that. There is only one clipboard you can write to.

[workflow-bot]

Demo page for commit add custom paste behaviour has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[codecov-io]

Codecov Report

Merging #333 into master will increase coverage by 2.95%.
The diff coverage is 87.5%.

@@            Coverage Diff             @@
##           master     #333      +/-   ##
==========================================
+ Coverage   73.86%   76.82%   +2.95%     
==========================================
  Files          22       22              
  Lines         574      630      +56     
  Branches       90       95       +5     
==========================================
+ Hits          424      484      +60     
+ Misses        149      145       -4     
  Partials        1        1

Impacted Files	Coverage Δ
src/MentionsInput.js	67.15% <87.5%> (+6.87%)	⬆️
src/SuggestionsOverlay.js	61.22% <0%> (+2.04%)	⬆️
src/Mention.js	77.77% <0%> (+22.22%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ef42d7b...e427bc2. Read the comment docs.

[frontendphil]

@jfschwarz I could "hide" the new features behind an EXPERIMENTAL__cutCopyPaste prop. WDYT? We would definitively activate this for all our users. This would at least be some reality check whether this is improving the user experience or not.

I'd also do this because currently, I have no idea how to write tests for this. Apparently, you can only really trigger the events with the correct targets etc. when a user interaction has happened on the page.

[workflow-bot]

Demo page for commit add EXPERIMENTAL_cutCopyPaste flag has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[workflow-bot]

Demo page for commit added example has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[jfschwarz]

@frontendphil What I meant is leveraging the possibility to write different formats to the clipboard. I've created a fiddle to demonstrate: https://jsfiddle.net/5np3zayd/1/

[frontendphil]

@jfschwarz nice approach. I'll directly steal that. I thought the data type has to be somewhat meaningful :D

[workflow-bot]

Demo page for commit restrict special copy paste to mentions components has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[frontendphil]

I would probably still have this behind the EXPERIMENTAL flag so that we can safely include this in our live app and see whether this causes any errors or weird behavior. If this is not the case we could enable this as a default feature.

[workflow-bot]

Demo page for commit update enzyme; adjust specs has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[workflow-bot]

Demo page for commit add plain text field to example has been published at:
https://signavio.github.io/react-mentions/improvement/copy-paste

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://react-mentions-git-improvement-copy-paste.wolf-pack.now.sh