# code-block-pro/1.27.4/src/editor/components/buttons/copy/CopyButton.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.27.4. 86 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.4/code/src/editor/components/buttons/copy/CopyButton.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.4/raw/src/editor/components/buttons/copy/CopyButton.tsx
- Modified: 2025-06-20T05:22:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.27.4/code/src/editor/components/buttons/copy/CopyButton.tsx#L10-L20`.

```tsx
import { __ } from '@wordpress/i18n';
import stripAnsi from 'strip-ansi';
import { Attributes } from '../../../../types';
import { Clipboard } from './Clipboard';
import { TextSimple } from './TextSimple';
import { TwoSquares } from './TwoSquares';

export const copyButtonTypes = {
    // Poorly named key here, but it's already there so it stays
    heroicons: {
        label: __('Clipboard', 'code-block-pro'),
        Component: Clipboard,
    },
    twoSquares: {
        label: __('Two Squares', 'code-block-pro'),
        Component: TwoSquares,
    },
    textSimple: {
        label: __('Text Simple', 'code-block-pro'),
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        Component: (props: any) => <TextSimple {...props} />,
    },
};

export const CopyButton = ({ attributes }: { attributes: Attributes }) => {
    const {
        copyButtonType,
        copyButtonString,
        copyButtonStringCopied,
        copyButtonUseTextarea,
        useDecodeURI,
        code,
        textColor,
        bgColor: b,
        headerType,
    } = attributes;
    const hasTextButton = copyButtonType === 'textSimple';
    const color = hasTextButton ? b : textColor;
    const bgColor = hasTextButton ? textColor : undefined;
    const { Component } =
        copyButtonTypes?.[copyButtonType as keyof typeof copyButtonTypes] ??
        copyButtonTypes.heroicons;
    const codeToCopy = stripAnsi(
        useDecodeURI ? encodeURIComponent(code ?? '') : (code ?? ''),
    );
    return (
        <span
            // Using a span to prevent aggressive button styling from themes
            role="button"
            tabIndex={0}
            data-encoded={useDecodeURI ? true : undefined}
            data-code={copyButtonUseTextarea ? undefined : codeToCopy}
            style={{
                color: color ?? 'inherit',
                display: 'none',
                backgroundColor: bgColor,
            }}
            aria-label={copyButtonString ?? __('Copy', 'code-block-pro')}
            data-copied-text={
                hasTextButton
                    ? (copyButtonStringCopied ??
                      __('Copied!', 'code-block-pro'))
                    : undefined
            }
            data-has-text-button={hasTextButton ? copyButtonType : undefined}
            data-inside-header-type={hasTextButton ? headerType : undefined}
            aria-live={hasTextButton ? 'polite' : undefined}
            className="code-block-pro-copy-button">
            {copyButtonUseTextarea ? (
                <pre
                    className="code-block-pro-copy-button-pre"
                    aria-hidden="true">
                    <textarea
                        className="code-block-pro-copy-button-textarea"
                        tabIndex={-1}
                        aria-hidden="true"
                        readOnly
                        value={codeToCopy}
                    />
                </pre>
            ) : null}
            <Component text={copyButtonString} />
        </span>
    );
};

```