Addition of a "Copy Code" button to the code editing interface

[perminder-17]

Increasing Access

1.Enhanced Usability: The "Copy Code" button would simplify the task of copying code, reducing the need to manually select and
copy text, which can be error-prone and time-consuming.
2.Improved Productivity: Users can save time and effort when sharing or moving code within your platform, increasing overall
productivity.
3.User Satisfaction: Implementing user-requested features like this can enhance overall user satisfaction, demonstrating that you
listen to and value user feedback.

Feature request details

I propose the addition of a "Copy Code" button to the code editing interface. This button would allow users to easily copy the code from the text area created for writing and editing code. The feature aims to streamline the process of copying code snippets and would be particularly useful for users who frequently share code with others or need to move code between different parts of your platform.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[KSSaiTeja]

Good feature request!! can i work on this..

[pankajdharmik4]

I want to work on this issue

[perminder-17]

@lindapaiste

[KSSaiTeja]

@perminder-17 Share your ideas that how to add copy button..

[perminder-17]

I am working on it.

[perminder-17]

I have successfully done the PR. Please see @lindapaiste.

[lindapaiste]

@perminder-17 has written all of the code for this in #2451, but we are not sure exactly what the button should look like and where it should go in the layout. If any of you have a good eye for design then feel free to share your thoughts!

One option would be an icon button, similar to what GitHub uses:

I also think that the UI in the mockups in this issue is better than what's in #2451 because the button is smaller and located closer to the code. This is a non-essential feature so we don't want too much emphasis on the button.

[heyhimansh]

Hey, could you also consider adding a reset button adjacent to the copy button to reset the whole code and start from the beginning.

[nirajbagdi]

I've just submitted a pull request to address this feature. @lindapaiste your feedback and review would be greatly appreciated.

[lindapaiste]

Another thought: we should re-use the "Copied to Clipboard" tooltip which we have in the Share modal.

The code for this tooltip is in the CopyableInput component and it's already got theming, translation, etc. My cleanup PR of that component #2360 is still pending. But now I want to go back and break off a sub-component (or hook) with just the copying and tooltip which can be used here as well.

We're also using an npm package clipboard in that component. I'm not sure if it provides any benefit? You all have been writing the copying with native JS and seems pretty straight-forward.

[perminder-17]

Hi @lindapaiste I liked your idea of reusing the tooltip and copying feature from the share Modal as:

1. We will have cleaner code.
2. We will be able to reuse these pre-built components when multiple copying features are required, promoting code reusability and reducing duplication.
3. Since we have installed the package, we can leverage its features and capabilities as part of our development process.
4. We will benefit from easier customization and simplified copying functionality, making our application development more efficient and user-friendly.

But the problem is:

1. While breaking down the components for the tooltip and copying feature is possible, it may introduce additional complexity and code structure. We should carefully consider whether such a separation is necessary for the current use case.
2. Currently, there doesn't appear to be a clear need for the copying feature in multiple places within the application. Therefore, introducing the complexity of breaking down the feature into separate components might not be justified.
3. As previously discussed, the copying button is not a critical or essential feature for the application. Given its relatively minor role, adding a tooltip solely for this feature may not be the most efficient use of development resources.

In my opinion, the existing code remains readable and maintainable, with only a few lines added for the copying feature. If we identify additional areas in the future where the copying feature is required, we can reconsider the architecture at that time. However, I respect your opinion, and if you believe implementing the feature differently would be beneficial, I'm open to discussing and implementing it accordingly.

[nirajbagdi]

Hello @lindapaiste,

In response to your suggestion to incorporate a tooltip after copying, I've recently implemented this in my latest commit for issue #2462.

🔄 Changes Made:

• I've restructured the code by separating the Copying Logic and Tooltip display functionality into a seperate, reusable component. This change allows us to effortlessly integrate the same Tooltip and Copying functionality into other components, promoting codebase cleanliness and preventing code duplication.

• Furthermore, I've shifted from using the clipboard package to leveraging the Native Clipboard API for copying, as it enjoys robust support across a wide range of browsers.

📚 Additional Context:

For the basis of this implementation, I referred to the CopyableInput component from issue #2360. Using it as a foundation, I extracted the Copying Logic and Tooltip display functionality into a new component called CopyableTooltip. This design choice ensures a seamless integration of Tooltip and Copying functionality into various components, eliminating the need for redundant logic and reducing the potential for errors.

Kindly review the code in issue #2462, and I welcome any feedback or suggestions you may have.

[nirajbagdi]

Hello @lindapaiste,

I hope you're doing well. I wanted to gently remind you about the pull request I submitted last week for issue #2462. As a newcomer, I'm excited about my first potential merge and would really appreciate your feedback whenever you get a chance.

Thank you for your time!

[nirajbagdi]

Hello @lindapaiste,

Hope you're well. Just wanted to check in on my PR #2462 from a couple of months back. I've attached the video of what the feature looks like. Any chance you could share your thoughts when you get a moment?

Thanks a bunch!

Copy.with.Tooltip.mp4