| 1 |
import { addImageToBlock } from '@draft/api/WPApi'; |
| 2 |
import { downloadImage } from '@shared/api/wp'; |
| 3 |
import { useStampedPreview } from '@shared/hooks/useStampedPreview'; |
| 4 |
import { store as blockEditorStore } from '@wordpress/block-editor'; |
| 5 |
import { Button, Spinner } from '@wordpress/components'; |
| 6 |
import { useDispatch, useSelect } from '@wordpress/data'; |
| 7 |
import { store as editPostStore } from '@wordpress/edit-post'; |
| 8 |
import { useState } from '@wordpress/element'; |
| 9 |
import { __ } from '@wordpress/i18n'; |
| 10 |
import { AnimatePresence, motion } from 'framer-motion'; |
| 11 |
|
| 12 |
export const ImagePreview = ({ |
| 13 |
prompt, |
| 14 |
alt, |
| 15 |
size, |
| 16 |
isGenerating, |
| 17 |
id, |
| 18 |
src, |
| 19 |
disclose, |
| 20 |
clearImageResponse, |
| 21 |
}) => { |
| 22 |
const { openGeneralSidebar } = useDispatch(editPostStore); |
| 23 |
const { updateBlockAttributes } = useDispatch(blockEditorStore); |
| 24 |
const [isInserting, setIsInserting] = useState(false); |
| 25 |
const selectedBlock = useSelect( |
| 26 |
(select) => select(blockEditorStore).getSelectedBlock(), |
| 27 |
[], |
| 28 |
); |
| 29 |
const [imgWidth, imgHeight] = size.split('x'); |
| 30 |
const previewSrc = useStampedPreview(src, disclose); |
| 31 |
|
| 32 |
const handleInsert = async (event) => { |
| 33 |
event.preventDefault(); |
| 34 |
setIsInserting(true); |
| 35 |
const image = await downloadImage(id, src, 'ai-generated', null, { |
| 36 |
alt: alt ?? prompt, |
| 37 |
disclose, |
| 38 |
}); |
| 39 |
if (!image) return; |
| 40 |
|
| 41 |
await addImageToBlock(selectedBlock, image, updateBlockAttributes); |
| 42 |
setIsInserting(false); |
| 43 |
openGeneralSidebar('edit-post/block'); |
| 44 |
clearImageResponse(); |
| 45 |
}; |
| 46 |
|
| 47 |
if (src === '' && !isGenerating) return null; |
| 48 |
|
| 49 |
return ( |
| 50 |
<div className="flex flex-col gap-5"> |
| 51 |
<AnimatePresence> |
| 52 |
{isGenerating ? ( |
| 53 |
<motion.div |
| 54 |
initial={{ opacity: 1 }} |
| 55 |
exit={{ opacity: 0 }} |
| 56 |
className="flex aspect-square w-full items-center justify-center" |
| 57 |
style={{ |
| 58 |
background: |
| 59 |
'linear-gradient(135deg, #E8E8E8 47.92%, #F3F3F3 60.42%, #E8E8E8 72.92%)', |
| 60 |
}} |
| 61 |
> |
| 62 |
<Spinner style={{ height: '48px', width: '48px' }} /> |
| 63 |
</motion.div> |
| 64 |
) : ( |
| 65 |
<motion.div |
| 66 |
initial={{ opacity: 0 }} |
| 67 |
animate={{ opacity: 1 }} |
| 68 |
className="bg-gray-100" |
| 69 |
style={{ aspectRatio: Number(imgWidth) / Number(imgHeight) }} |
| 70 |
> |
| 71 |
<img |
| 72 |
alt={prompt} |
| 73 |
src={previewSrc} |
| 74 |
className="block w-full" |
| 75 |
style={{ aspectRatio: Number(imgWidth) / Number(imgHeight) }} |
| 76 |
/> |
| 77 |
</motion.div> |
| 78 |
)} |
| 79 |
</AnimatePresence> |
| 80 |
{isGenerating ? ( |
| 81 |
<p> |
| 82 |
{__('Generating your image: ', 'extendify-local')} |
| 83 |
<span className="font-bold">"{prompt}"</span> |
| 84 |
</p> |
| 85 |
) : ( |
| 86 |
<form onSubmit={handleInsert} className="flex flex-col gap-5"> |
| 87 |
<Button |
| 88 |
type="submit" |
| 89 |
autoFocus |
| 90 |
className="w-full justify-center" |
| 91 |
variant="primary" |
| 92 |
disabled={isInserting} |
| 93 |
> |
| 94 |
{isInserting |
| 95 |
? // translators: "Importing image" means the image is being added to the WordPress post editor |
| 96 |
__('Importing image...', 'extendify-local') |
| 97 |
: __('Use this image', 'extendify-local')} |
| 98 |
</Button> |
| 99 |
<Button |
| 100 |
className="w-full justify-center bg-gray-200 text-gray-800 disabled:bg-gray-300 disabled:text-gray-700" |
| 101 |
onClick={clearImageResponse} |
| 102 |
disabled={isInserting} |
| 103 |
> |
| 104 |
{__('Delete image', 'extendify-local')} |
| 105 |
</Button> |
| 106 |
</form> |
| 107 |
)} |
| 108 |
</div> |
| 109 |
); |
| 110 |
}; |
| 111 |
|
