← All changes
|
src/Draft/components/image-generation/ImagePreview.jsx
+9
-2
3.1.2
→
3.2.1
View file →
| @@ -1,6 +1,7 @@ | ||
| 1 | 1 | import { addImageToBlock } from '@draft/api/WPApi'; |
| 2 | 2 | import { downloadImage } from '@shared/api/wp'; |
| 3 | +import { useStampedPreview } from '@shared/hooks/useStampedPreview'; | |
| 3 | 4 | import { store as blockEditorStore } from '@wordpress/block-editor'; |
| 4 | 5 | import { Button, Spinner } from '@wordpress/components'; |
| 5 | 6 | import { useDispatch, useSelect } from '@wordpress/data'; |
| 6 | 7 | import { store as editPostStore } from '@wordpress/edit-post'; |
| @@ -9,12 +10,14 @@ | ||
| 9 | 10 | import { AnimatePresence, motion } from 'framer-motion'; |
| 10 | 11 | |
| 11 | 12 | export const ImagePreview = ({ |
| 12 | 13 | prompt, |
| 14 | + alt, | |
| 13 | 15 | size, |
| 14 | 16 | isGenerating, |
| 15 | 17 | id, |
| 16 | 18 | src, |
| 19 | + disclose, | |
| 17 | 20 | clearImageResponse, |
| 18 | 21 | }) => { |
| 19 | 22 | const { openGeneralSidebar } = useDispatch(editPostStore); |
| 20 | 23 | const { updateBlockAttributes } = useDispatch(blockEditorStore); |
| @@ -23,13 +26,17 @@ | ||
| 23 | 26 | (select) => select(blockEditorStore).getSelectedBlock(), |
| 24 | 27 | [], |
| 25 | 28 | ); |
| 26 | 29 | const [imgWidth, imgHeight] = size.split('x'); |
| 30 | + const previewSrc = useStampedPreview(src, disclose); | |
| 27 | 31 | |
| 28 | 32 | const handleInsert = async (event) => { |
| 29 | 33 | event.preventDefault(); |
| 30 | 34 | setIsInserting(true); |
| 31 | - const image = await downloadImage(id, src, 'ai-generated'); | |
| 35 | + const image = await downloadImage(id, src, 'ai-generated', null, { | |
| 36 | + alt: alt ?? prompt, | |
| 37 | + disclose, | |
| 38 | + }); | |
| 32 | 39 | if (!image) return; |
| 33 | 40 | |
| 34 | 41 | await addImageToBlock(selectedBlock, image, updateBlockAttributes); |
| 35 | 42 | setIsInserting(false); |
| @@ -62,9 +69,9 @@ | ||
| 62 | 69 | style={{ aspectRatio: Number(imgWidth) / Number(imgHeight) }} |
| 63 | 70 | > |
| 64 | 71 | <img |
| 65 | 72 | alt={prompt} |
| 66 | - src={src} | |
| 73 | + src={previewSrc} | |
| 67 | 74 | className="block w-full" |
| 68 | 75 | style={{ aspectRatio: Number(imgWidth) / Number(imgHeight) }} |
| 69 | 76 | /> |
| 70 | 77 | </motion.div> |