Add copy to clipboard icon

[survivant]

Description

I added the copy to clipboard feature

Contribution Checklist:

• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

[martinsefcik]

Based on contributing.md file Bruno is using Tabler icons, so probably should be replaced with Tabler icon to not mix icons from different collections.

[survivant]

agree

[martinsefcik]

What do you think about the following styling?

Recording.2023-12-13.004345.mp4

[survivant]

I'm not really a react dev, so I have know idea how to do it. It's true that I never changed the layout theme.

[martinsefcik]

I just slightly modified CodeView component to:

    <StyledWrapper>
      <CopyToClipboard className="copy-to-clipboard" text={snippet} onCopy={() => toast.success('Copied to clipboard!')}>
        <IconCopy size={20} strokeWidth={1.5}/>
      </CopyToClipboard>
      <CodeEditor
        readOnly
        value={snippet}
        font={get(preferences, 'font.codeFont', 'default')}
        theme={storedTheme}
        mode={lang}
      />
    </StyledWrapper>

introduced new StyledWrapper for that component:

import styled from 'styled-components';

const StyledWrapper = styled.div`
  position: relative;

  .copy-to-clipboard {
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }
`;

export default StyledWrapper;

[survivant]

@martinsefcik Thanks a lot for the help. It's really appreciated.

[helloanoop]

Thank you so much @survivant @martinsefcik !