| @@ -1,4 +1,5 @@ | ||
| 1 | +import { navigateTo } from '@draft/hooks/useRouter'; | |
| 1 | 2 | import { magic } from '@draft/svg'; |
| 2 | 3 | import { render } from '@shared/lib/dom'; |
| 3 | 4 | import { BlockControls } from '@wordpress/block-editor'; |
| 4 | 5 | import { |
| @@ -33,44 +34,55 @@ | ||
| 33 | 34 | ? frame.querySelector(`[data-block="${blockId}"]`) |
| 34 | 35 | : document.querySelector(`[data-block="${blockId}"]`); |
| 35 | 36 | if (!block) return; |
| 36 | 37 | |
| 38 | + const openSidebarTo = (slug) => { | |
| 39 | + openGeneralSidebar('extendify-draft/draft'); | |
| 40 | + navigateTo(slug); | |
| 41 | + }; | |
| 42 | + | |
| 37 | 43 | const parentSelector = |
| 38 | 44 | '.block-editor-media-placeholder .components-form-file-upload'; |
| 39 | - const placeHolder = Object.assign(document.createElement('div'), { | |
| 40 | - className: 'components-form-file-upload', | |
| 45 | + const anchor = block.querySelector(parentSelector); | |
| 46 | + if (!anchor) return; | |
| 47 | + | |
| 48 | + const generatePlaceholder = Object.assign(document.createElement('div'), { | |
| 49 | + className: 'components-form-file-generate-image', | |
| 41 | 50 | }); |
| 42 | - block.querySelector(parentSelector)?.after(placeHolder); | |
| 51 | + const unsplashPlaceholder = Object.assign(document.createElement('div'), { | |
| 52 | + className: 'components-form-file-search-unsplash', | |
| 53 | + }); | |
| 54 | + anchor.after(generatePlaceholder, unsplashPlaceholder); | |
| 43 | 55 | |
| 44 | - let root; | |
| 45 | - const component = ( | |
| 46 | - <> | |
| 56 | + let generateRoot, unsplashRoot; | |
| 57 | + const id = requestAnimationFrame(() => { | |
| 58 | + generateRoot = render( | |
| 47 | 59 | <Button |
| 48 | 60 | variant="primary" |
| 49 | 61 | __next40pxDefaultSize |
| 50 | - onClick={async () => { | |
| 51 | - openGeneralSidebar('extendify-draft/draft'); | |
| 52 | - await new Promise((r) => requestAnimationFrame(r)); | |
| 53 | - const btn = document.getElementById( | |
| 54 | - 'extendify-draft-image-gen-button', | |
| 55 | - ); | |
| 56 | - btn?.focus(); | |
| 57 | - btn?.classList.add('animate-pulse-flash'); | |
| 58 | - }} | |
| 62 | + onClick={() => openSidebarTo('ai-image')} | |
| 59 | 63 | > |
| 60 | - {__('Get Personalized Image', 'extendify-local')} | |
| 61 | - </Button> | |
| 62 | - {/* layout placeholder */} | |
| 63 | - <span aria-hidden="true" /> | |
| 64 | - </> | |
| 65 | - ); | |
| 66 | - const id = requestAnimationFrame(() => { | |
| 67 | - root = render(component, placeHolder); | |
| 64 | + {__('Generate Image', 'extendify-local')} | |
| 65 | + </Button>, | |
| 66 | + generatePlaceholder, | |
| 67 | + ); | |
| 68 | + unsplashRoot = render( | |
| 69 | + <Button | |
| 70 | + variant="primary" | |
| 71 | + __next40pxDefaultSize | |
| 72 | + onClick={() => openSidebarTo('unsplash')} | |
| 73 | + > | |
| 74 | + {__('Search Unsplash', 'extendify-local')} | |
| 75 | + </Button>, | |
| 76 | + unsplashPlaceholder, | |
| 77 | + ); | |
| 68 | 78 | }); |
| 69 | 79 | return () => { |
| 70 | 80 | cancelAnimationFrame(id); |
| 71 | - root?.unmount(); | |
| 72 | - placeHolder?.remove(); | |
| 81 | + generateRoot?.unmount(); | |
| 82 | + unsplashRoot?.unmount(); | |
| 83 | + generatePlaceholder.remove(); | |
| 84 | + unsplashPlaceholder.remove(); | |
| 73 | 85 | }; |
| 74 | 86 | }, [blockId, openGeneralSidebar, name]); |
| 75 | 87 | |
| 76 | 88 | return ( |
