653ec12300
Co-authored-by: Nick Taylor <nick@iamdeveloper.com> Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { Button } from '@crayons';
|
|
|
|
function linksToMarkdownForm(imageLinks) {
|
|
return imageLinks.map((imageLink) => ``).join('\n');
|
|
}
|
|
|
|
const CopyIcon = () => (
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
className="crayons-icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
role="img"
|
|
aria-labelledby="fc5f15add1e114844f5e"
|
|
>
|
|
<title id="fc5f15add1e114844f5e">Copy Markdown for image</title>
|
|
<path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z" />
|
|
</svg>
|
|
);
|
|
|
|
CopyIcon.displayName = 'CopyIcon';
|
|
|
|
export const ClipboardButton = ({
|
|
onCopy,
|
|
imageUrls,
|
|
showCopyMessage = false,
|
|
}) => (
|
|
<clipboard-copy
|
|
onClick={onCopy}
|
|
for="image-markdown-copy-link-input"
|
|
aria-live="polite"
|
|
className="flex items-center flex-1"
|
|
aria-controls="image-markdown-copy-link-announcer"
|
|
>
|
|
<input
|
|
data-testid="markdown-copy-link"
|
|
type="text"
|
|
className="crayons-textfield mr-2"
|
|
id="image-markdown-copy-link-input"
|
|
readOnly="true"
|
|
value={linksToMarkdownForm(imageUrls)}
|
|
/>
|
|
<Button
|
|
className="spec__image-markdown-copy"
|
|
variant="ghost"
|
|
contentType="icon"
|
|
icon={CopyIcon}
|
|
/>
|
|
<span
|
|
id="image-markdown-copy-link-announcer"
|
|
role="alert"
|
|
className={`fs-s ${showCopyMessage ? '' : 'opacity-0'}`}
|
|
>
|
|
Copied!
|
|
</span>
|
|
</clipboard-copy>
|
|
);
|
|
|
|
ClipboardButton.displayName = 'ClipboardButton';
|
|
|
|
ClipboardButton.propTypes = {
|
|
onCopy: PropTypes.func.isRequired,
|
|
imageUrls: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
showCopyMessage: PropTypes.bool.isRequired,
|
|
};
|