| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import stripAnsi from 'strip-ansi'; |
| 3 |
import { Attributes } from '../../../../types'; |
| 4 |
import { escapeShortcodes } from '../../../../util/code'; |
| 5 |
import { Clipboard } from './Clipboard'; |
| 6 |
import { TextSimple } from './TextSimple'; |
| 7 |
import { TwoSquares } from './TwoSquares'; |
| 8 |
|
| 9 |
export const copyButtonTypes = { |
| 10 |
// Poorly named key here, but it's already there so it stays |
| 11 |
heroicons: { |
| 12 |
label: __('Clipboard', 'code-block-pro'), |
| 13 |
Component: Clipboard, |
| 14 |
}, |
| 15 |
twoSquares: { |
| 16 |
label: __('Two Squares', 'code-block-pro'), |
| 17 |
Component: TwoSquares, |
| 18 |
}, |
| 19 |
textSimple: { |
| 20 |
label: __('Text Simple', 'code-block-pro'), |
| 21 |
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
| 22 |
Component: (props: any) => <TextSimple {...props} />, |
| 23 |
}, |
| 24 |
}; |
| 25 |
|
| 26 |
export const CopyButton = ({ attributes }: { attributes: Attributes }) => { |
| 27 |
const { |
| 28 |
copyButtonType, |
| 29 |
copyButtonString, |
| 30 |
copyButtonStringCopied, |
| 31 |
copyButtonUseTextarea, |
| 32 |
useDecodeURI, |
| 33 |
code, |
| 34 |
textColor, |
| 35 |
bgColor: b, |
| 36 |
headerType, |
| 37 |
useEscapeShortCodes, |
| 38 |
} = attributes; |
| 39 |
const hasTextButton = copyButtonType === 'textSimple'; |
| 40 |
const color = hasTextButton ? b : textColor; |
| 41 |
const bgColor = hasTextButton ? textColor : undefined; |
| 42 |
const { Component } = |
| 43 |
copyButtonTypes?.[copyButtonType as keyof typeof copyButtonTypes] ?? |
| 44 |
copyButtonTypes.heroicons; |
| 45 |
const codeToCopy = stripAnsi( |
| 46 |
useDecodeURI ? encodeURIComponent(code ?? '') : (code ?? ''), |
| 47 |
); |
| 48 |
return ( |
| 49 |
<span |
| 50 |
// Using a span to prevent aggressive button styling from themes |
| 51 |
role="button" |
| 52 |
tabIndex={0} |
| 53 |
data-encoded={useDecodeURI ? true : undefined} |
| 54 |
data-code={ |
| 55 |
copyButtonUseTextarea |
| 56 |
? undefined |
| 57 |
: useEscapeShortCodes |
| 58 |
? escapeShortcodes(codeToCopy) |
| 59 |
: codeToCopy |
| 60 |
} |
| 61 |
style={{ |
| 62 |
color: color ?? 'inherit', |
| 63 |
display: 'none', |
| 64 |
backgroundColor: bgColor, |
| 65 |
}} |
| 66 |
aria-label={copyButtonString ?? __('Copy', 'code-block-pro')} |
| 67 |
data-copied-text={ |
| 68 |
hasTextButton |
| 69 |
? (copyButtonStringCopied ?? |
| 70 |
__('Copied!', 'code-block-pro')) |
| 71 |
: undefined |
| 72 |
} |
| 73 |
data-has-text-button={hasTextButton ? copyButtonType : undefined} |
| 74 |
data-inside-header-type={hasTextButton ? headerType : undefined} |
| 75 |
aria-live={hasTextButton ? 'polite' : undefined} |
| 76 |
className="code-block-pro-copy-button"> |
| 77 |
{copyButtonUseTextarea ? ( |
| 78 |
<pre |
| 79 |
className="code-block-pro-copy-button-pre" |
| 80 |
aria-hidden="true"> |
| 81 |
<textarea |
| 82 |
className="code-block-pro-copy-button-textarea" |
| 83 |
tabIndex={-1} |
| 84 |
aria-hidden="true" |
| 85 |
readOnly |
| 86 |
value={ |
| 87 |
useEscapeShortCodes |
| 88 |
? escapeShortcodes(codeToCopy) |
| 89 |
: codeToCopy |
| 90 |
} |
| 91 |
/> |
| 92 |
</pre> |
| 93 |
) : null} |
| 94 |
<Component text={copyButtonString} /> |
| 95 |
</span> |
| 96 |
); |
| 97 |
}; |
| 98 |
|
