I am participating in the 2022 Spring Recruitment series activities – experience review, click to view the details of the activities.

preface

Time passed so quickly that it was March without noticing. Where did the time go without asking? During the period of appreciating flowers, it’s gold, silver and gold, so I spent all my time on the preparation of appreciating flowers, so I didn’t continue to write more. I have sent the resume and the company, feeling overwhelmed and there is no news. It’s really hard to get into the company, hey (), wait for the news.

Today, in my spare time, I will summarize a problem about copy-to-Clipboard paste copy plug-in encountered in the recent development work. By using this problem, I will tell you how to submit code merge request to other people’s code repository on Github.

background

In the development of the project, we have many functional requirements that need to be copied. In addition, our technology stack is React, so we choose the react-copy-to-clipboard plug-in on NPM to solve the requirements of copying text. The plugin has been used in many of our projects, and all of them have gone live without any feedback on usage issues.

But recently we received a new requirement: that is, in the development of a table presentation requirement, the text in the table is multi-line display, need to copy the text, and then paste into TXT and Excel documents also need to preserve the line feed effect. (+ _ +)? ?? Before copying the basic text is a single line, there is no multi-line text situation, so I think there should be no problem, nothing more than in the assembly of data when the data use join(‘\r\n’) processing and then use plug-in can be used, come, so easy!

The fact is that when everything is ready, paste the copied text into the TXT document, no problem. Then confidently to excel document a paste, oh, how into a line? Bad rollover… What’s going on? Just wait for me to explain

Problems and Methods

Why can’t you wrap it in Excel? React-copy-to-clipboard is a copy of the react-copy-to-clipboard plugin. At its core, the copy() method inside the copy-to-clipboard creates elements using the tag, as shown below:

It is the tag that filters out \r and identifies \n only, which causes pasting in Excel to appear as a single line. Now that I’ve found the problem, how do I fix it to make it line wrap in Excel? The answer is to use the 

 tag. Neither the 
      

        nor the 
       
 tag can implement line breaks.

So why does the 

 tag get line breaks in Excel? Take a look at the explanation on MDN: the 
 element represents predefined formatted text. The text in this element is usually formatted as in the original file, in a typeface of equal width, and whitespace (such as Spaces and newlines) in the text is displayed. In layman's terms, it can retain the original style.


Use Can I Use to see how the 


 tag is compatible across browsers, as shown below:




As you can see, the compatibility is pretty friendly, so it makes me wonder if I should ask the copy-to-Clipboard plugin repository to merge code to meet the display issues in Excel.


First, how to submit PR?


In fact, it is more than a happy thing to make PR requests for other people’s plugin warehouse, at least prove that you have a good eye for finding problems, hahaha. When someone gives you a PR, it’s great because it’s proof that you’ve made a contribution. If there is no merge, it is still an attempt, there is no need to lose heart, see if there is another optimal solution in the work, and propose it later.


Here’s how to submit a PR request on Github. Take copy-to-Clipboard as an example.


1. Fork project


To give PR to open source plug-ins, you must have their library. Search for copy-to-clipboard on Github and find it first.




Then click on fork to fork the project into your repository:




Back in your repository, you can see that the copy-to-Clipboard library has been forked.




2. Clone Project




Then clone the copy-to-clipboard of your own repository locally. Clone the git code for the project please refer to the previous article (suggested collection)


3. Modify the code


When a project is cloned, it is advisable to create a new branch, change the code on the new branch and merge it into the master branch of your repository. In this PR request I created a new dev branch, the development branch, and then committed it and merged it to avoid contaminating the Master branch.




Then modify the code, find index.js in the home folder, and make the following adjustments to the code in the screenshot below: replace the  tag with 


 and comment it.






After you have modified it, test it locally and commit it if there are no problems. Do not use Git Add when you commit your code. Git add index.js is recommended. This will commit only the modified index.js file and not any other hidden files.


The above commit just changes the dev branch, then merges the dev branch into the Master branch, and this part is complete.


4. Submit PR


When the code is modified and submitted, the following screen will appear when you enter your own copy-to-Clipboard repository.




Since Github found that some files were changed, do you need to submit PR? Just click on Caompare & Pull Request to get to the PR request page.




The red boxes in the image above indicate areas that need to be selected and filled in. You need to pick the right branch to merge, and if you don’t pick the right branch, people might not merge with you. The screenshot I see here is due to the FACT that I have requested the PR before, and the dev branch is used here for the demo, so make sure you select the right branch. Then fill in the title and description of the merge and click the Create Pull Request button.


5. Review records


After a PR request is created, you can see your requested PR request in the pull Request of the repository.




As you can see, this time we’re heading “Fix: Replace labels to keep newlines when copying to Excel.”


6. Modify the information


You may not be clear or use the wrong words when filling in the information, which can be changed, only the selected branches cannot be changed.




The image above is a screenshot of the official PR request. Edit in the upper right allows you to change the title of the merge, and the content in the middle allows you to change the previously filled description. As you can see, I wrote the description: Replace the  tag with the 


 tag to preserve line breaks when copying and pasting text into Excel.




At this point, how to request PR process is introduced to the end, here is waiting for the open source library author to merge you.


Two, the solution?


The ABOVE PR request is still waiting, but in our work, we cannot wait for others to merge before we solve the problem. The problem has already happened and is placed there. We still have to solve what should be solved and dealt with. What if someone doesn’t merge PR and we don’t solve the problem? That’s not going to happen, so write a simple, practical way to copy text yourself. The code is as follows:


import {message} from 'antd'; /** * const copy = (text: string) => {let textarea = document.createElement('textarea'); document.body.appendChild(input); textarea.value = text; textarea.select(); document.execCommand('copy'); Message. success(' Copy successful! '); textarea.remove(); }Copy the code


Note: To preserve line breaks, use textarea. Input does not preserve line breaks


The code above is a simple method of copying text, not as elaborate as others have written, but enough to meet the needs of copying text in real development work. The react-copy-to-clipboard plugin is designed to handle styles and error situations. If you don’t already know how to use the react-copy-to-Clipboard plugin, you can use the following code: The most basic code is the code shown above. Now that the code is provided, if you are in need of copying text, you may wish to refer to the past and use ^_^


At this point, there’s nothing left to talk about in this article. If you’re patient enough to read this article, you’ll at least know how to solve this problem when you use the react-copy-to-clipboard plugin to copy content into Excel and display it on a new line. Second, you know how to make PR requests to someone else’s plugin repository in the future.


Finally, XDM see the article so far, click a like 👍 to go oh, 3Q^_^


Past wonderful articles


    

  • Check out the best and most detailed Git tutorials to own
    • 

  • Let’s see how our team developed front-end development specifications
    • 

  • A summary of common browser compatibility problems and solutions in front-end development
    • 

  • How do I zoom in and out of page elements in a front-end project?
    • 

  • How to use Antd Table to create Echarts maps in React projects?
    • 

  • How to introduce and use external fonts in Vue or React projects?
    • 

  • How to use the Amap plugin and wrap popover components in React projects?
    • 

  • Data Visualization – How do I use the Echarts plug-in and encapsulate diagram components in React projects?
    • 

  • How can I change the default DatePicker week selector in Antd?
    • 

  • How to encapsulate the Vue watermark component and how to use it in React?
    • 

  • The most powerful rich text editor? TinyMCE Series [3]
    • 

  • The most powerful rich text editor? TinyMCE Series [2]
    • 

  • The most powerful rich text editor? TinyMCE Series of articles [1]
    • 

  • React project to implement a Checkbox style effect component
    • 

  • 2022 First update: 3 Progress bar effects in front end projects
    • 

  • Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
    • 

  • If ancient have programmers writing summaries, probably is such | 2021 year-end summary
    • 



After the language


Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.