diff --git a/examples/getstarted/src/admin/preview/dummy-preview.jsx b/examples/getstarted/src/admin/preview/dummy-preview.jsx index 77eed27b75..67a5444115 100644 --- a/examples/getstarted/src/admin/preview/dummy-preview.jsx +++ b/examples/getstarted/src/admin/preview/dummy-preview.jsx @@ -11,7 +11,11 @@ const PreviewComponent = () => { const { document, refetch } = useDocument({ model, documentId, - params: { locale, status }, + params: { + locale, + status, + populate: '*', + }, collectionType, }); diff --git a/packages/core/content-manager/admin/src/features/DocumentContext.tsx b/packages/core/content-manager/admin/src/features/DocumentContext.tsx index 6ce3736a6d..1bed02d512 100644 --- a/packages/core/content-manager/admin/src/features/DocumentContext.tsx +++ b/packages/core/content-manager/admin/src/features/DocumentContext.tsx @@ -35,6 +35,7 @@ interface DocumentContextValue { changeDocument: (newRelation: DocumentMeta) => void; documentHistory: DocumentMeta[]; setDocumentHistory: React.Dispatch>; + onPreview?: () => void; } const [DocumentProvider, useDocumentContext] = @@ -55,9 +56,11 @@ const [DocumentProvider, useDocumentContext] = const DocumentContextProvider = ({ children, initialDocument, + onPreview, }: { children: React.ReactNode | React.ReactNode[]; initialDocument: DocumentMeta; + onPreview?: () => void; }) => { /** * Initialize with the "root" document and expose a setter method to change to @@ -84,6 +87,7 @@ const DocumentContextProvider = ({ meta={currentDocumentMeta} documentHistory={documentHistory} setDocumentHistory={setDocumentHistory} + onPreview={onPreview} > {children} diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/RelationModal.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/RelationModal.tsx index 33536b2143..67929335a9 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/RelationModal.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/RelationModal.tsx @@ -70,23 +70,23 @@ const [RelationModalProvider, useRelationModal] = createContext { +const RelationModalForm = ({ relation, triggerButtonLabel }: RelationModalProps) => { const navigate = useNavigate(); const { pathname, search } = useLocation(); const { formatMessage } = useIntl(); const [triggerRefetchDocument] = useLazyGetDocumentQuery(); - const currentDocument = useDocumentContext('RelationModalBody', (state) => state.document); + const currentDocument = useDocumentContext('RelationModalForm', (state) => state.document); const rootDocumentMeta = useDocumentContext( - 'RelationModalBody', + 'RelationModalForm', (state) => state.rootDocumentMeta ); - const currentDocumentMeta = useDocumentContext('RelationModalBody', (state) => state.meta); - const changeDocument = useDocumentContext('RelationModalBody', (state) => state.changeDocument); - const documentHistory = useDocumentContext('RelationModalBody', (state) => state.documentHistory); + const currentDocumentMeta = useDocumentContext('RelationModalForm', (state) => state.meta); + const changeDocument = useDocumentContext('RelationModalForm', (state) => state.changeDocument); + const documentHistory = useDocumentContext('RelationModalForm', (state) => state.documentHistory); const setDocumentHistory = useDocumentContext( - 'RelationModalBody', + 'RelationModalForm', (state) => state.setDocumentHistory ); @@ -98,7 +98,7 @@ const RelationModalWrapper = ({ relation, triggerButtonLabel }: RelationModalPro const [isModalOpen, setIsModalOpen] = React.useState(false); // NOTE: Not sure about this relation modal context, maybe we should move this to DocumentContext? // Get parent modal context if it exists - const parentContext = useRelationModal('RelationModalWrapper', (state) => state); + const parentContext = useRelationModal('RelationModalForm', (state) => state); // Get depth of nested modals const depth = parentContext ? parentContext.depth + 1 : 0; // Check if this is a nested modal @@ -361,6 +361,7 @@ const RelationModalBody = ({ children }: RelationModalBodyProps) => { const documentMeta = useDocumentContext('RelationModalBody', (state) => state.meta); const documentResponse = useDocumentContext('RelationModalBody', (state) => state.document); + const onPreview = useDocumentContext('RelationModalBody', (state) => state.onPreview); const documentLayoutResponse = useDocumentLayout(documentMeta.model); const plugins = useStrapiApp('RelationModalBody', (state) => state.plugins); @@ -422,6 +423,7 @@ const RelationModalBody = ({ children }: RelationModalBodyProps) => { documentId: documentMeta.documentId, document: documentResponse.document, meta: documentResponse.meta, + onPreview, } satisfies DocumentActionProps; return ( @@ -498,4 +500,4 @@ const RelationModalBody = ({ children }: RelationModalBodyProps) => { ); }; -export { RelationModalWrapper }; +export { RelationModalForm }; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/Relations.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/Relations.tsx index d8d23d7b5a..d3ddf30b21 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/Relations.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations/Relations.tsx @@ -52,7 +52,7 @@ import { getRelationLabel } from '../../../../../utils/relations'; import { getTranslation } from '../../../../../utils/translations'; import { DocumentStatus } from '../../DocumentStatus'; import { useComponent } from '../ComponentContext'; -import { RelationModalWrapper, getCollectionType } from '../Relations/RelationModal'; +import { RelationModalForm, getCollectionType } from '../Relations/RelationModal'; import type { Schema } from '@strapi/types'; @@ -1065,7 +1065,7 @@ const ListItem = ({ data, index, style }: ListItemProps) => { ) : null} - ', () => { it('renders the trigger button correctly', () => { render( - + ); @@ -227,7 +227,7 @@ describe('', () => { it('does not render the modal by default', () => { render( - + ); @@ -237,7 +237,7 @@ describe('', () => { it('opens the modal when clicking the trigger button', () => { render( - + ); @@ -259,7 +259,7 @@ describe('', () => { it('closes the modal when clicking the cancel button', () => { render( - + ); @@ -277,7 +277,7 @@ describe('', () => { it('navigates to full page when "Go to entry" is clicked', () => { render( - + ); diff --git a/packages/core/content-manager/admin/src/preview/components/PreviewHeader.tsx b/packages/core/content-manager/admin/src/preview/components/PreviewHeader.tsx index 38df15bcf0..47a33c1255 100644 --- a/packages/core/content-manager/admin/src/preview/components/PreviewHeader.tsx +++ b/packages/core/content-manager/admin/src/preview/components/PreviewHeader.tsx @@ -16,6 +16,7 @@ import { Link, type To } from 'react-router-dom'; import { styled } from 'styled-components'; import { InjectionZone } from '../../components/InjectionZone'; +import { useDocumentContext } from '../../features/DocumentContext'; import { DocumentActionButton } from '../../pages/EditView/components/DocumentActions'; import { DocumentStatus } from '../../pages/EditView/components/DocumentStatus'; import { getDocumentStatus } from '../../pages/EditView/EditViewPage'; @@ -156,7 +157,7 @@ const UnstablePreviewHeader = () => { const schema = usePreviewContext('PreviewHeader', (state) => state.schema); const meta = usePreviewContext('PreviewHeader', (state) => state.meta); const plugins = useStrapiApp('PreviewHeader', (state) => state.plugins); - const iframeRef = usePreviewContext('PreviewHeader', (state) => state.iframeRef); + const onPreview = useDocumentContext('PreviewHeader', (state) => state.onPreview); const [{ query }] = useQueryParams<{ status?: 'draft' | 'published'; @@ -184,13 +185,7 @@ const UnstablePreviewHeader = () => { documentId: document.documentId, document, meta, - onPreview: () => { - iframeRef?.current?.contentWindow?.postMessage( - { type: 'strapiUpdate' }, - // The iframe origin is safe to use since it must be provided through the allowedOrigins config - new URL(iframeRef.current.src).origin - ); - }, + onPreview, } satisfies DocumentActionProps; return ( diff --git a/packages/core/content-manager/admin/src/preview/pages/Preview.tsx b/packages/core/content-manager/admin/src/preview/pages/Preview.tsx index 535b73c682..c5ab9e866b 100644 --- a/packages/core/content-manager/admin/src/preview/pages/Preview.tsx +++ b/packages/core/content-manager/admin/src/preview/pages/Preview.tsx @@ -40,7 +40,6 @@ interface PreviewContextValue { meta: NonNullable['meta']>; schema: NonNullable['schema']>; layout: EditLayout; - iframeRef?: React.RefObject; } const [PreviewProvider, usePreviewContext] = createContext('PreviewPage'); @@ -150,6 +149,14 @@ const PreviewPage = () => { const previewUrl = previewUrlResponse.data.data.url; + const onPreview = () => { + iframeRef?.current?.contentWindow?.postMessage( + { type: 'strapiUpdate' }, + // The iframe origin is safe to use since it must be provided through the allowedOrigins config + new URL(iframeRef.current.src).origin + ); + }; + return ( <> @@ -169,6 +176,7 @@ const PreviewPage = () => { model, collectionType, }} + onPreview={onPreview} > { meta={documentResponse.meta} schema={documentResponse.schema} layout={documentLayoutResponse.edit} - iframeRef={iframeRef} >