How to paste plain text into the React Mention target element?

When incorporating the React Mention into your application, you may encounter situations where you need to paste text without preserving any source formatting, such as the color scheme from an IDE like VSCode.
This article guides you through the process of intercepting the paste event to ensure only plain text is inserted into the React Mention component.

Pasting Plain Text into the Mention Target Element

To prevent the pasted text from retaining its original formatting, you can intercept the paste event within your React Mention component. The following code snippet demonstrates how to achieve this:

 const emailData = data[temp];
 const commentTarget = '#commentsMention';
 const commentFields = { text: 'Name' };

const handlePaste = (e) => {
  e.preventDefault();
  const text = e.clipboardData.getData('text/plain');
  document.execCommand('inserttext', false, text);
};

return (
  <div className="control-pane">
    <div
      id="commentsMention"
      onPaste={handlePaste}
      placeholder="Type @ and select your comments"
    ></div>   
     <MentionComponent
          dataSource={emailData}
          target={commentTarget}
          fields={commentFields}
      ></MentionComponent>    
  </div>
);
export default Default;

In the above example, the handlePaste function is used to intercept the paste event. It prevents the default paste behavior and retrieves the plain text from the clipboard data. The document.execCommand method is then used to insert the plain text into the MentionComponent.

Sample

To see the implementation in action, you can refer to the following sample on StackBlitz:

React Plain Text Paste Demo

Conclusion

I hope you enjoyed learning on how to paste plain text into the React Mention target element.

You can refer to our React Mention feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Mentionexample to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!