npm - @strapi/content-manager - Versions diffs - 0.0.0-next.e3eb76a86aff89979cc9098aec129d2ffa600c56 → 0.0.0-next.e5d4b412da0d932b61b2fa5012d16513fda6de04 - Mend

@strapi/content-manager 0.0.0-next.e3eb76a86aff89979cc9098aec129d2ffa600c56 → 0.0.0-next.e5d4b412da0d932b61b2fa5012d16513fda6de04

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/dist/admin/preview/components/PreviewSidePanel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n isShown: boolean;\n label: TooltipProps['label'];\n children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n if (isShown) {\n return <Tooltip label={label}>{children}</Tooltip>;\n }\n\n return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const { pathname } = useLocation();\n const [{ query }] = useQueryParams();\n const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n\n /*\n The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n * /preview, and the URL will already be loaded in the RTK query cache.\n */\n const { data, error } = useGetPreviewUrlQuery({\n params: {\n contentType: model as UID.ContentType,\n },\n query: {\n documentId,\n locale: document?.locale,\n status: document?.status,\n },\n });\n\n if (!data?.data?.url \|\| error) {\n return null;\n }\n\n const trackNavigation = () => {\n // Append /preview to the current URL\n const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n };\n\n return {\n title~~: formatMessage({ id: 'content-manager.preview.panel.title', defaultMessage: 'Preview' })~~,\n content: (\n <ConditionalTooltip\n label={formatMessage({\n id: 'content-manager.preview.panel.button-disabled-tooltip',\n defaultMessage: 'Please save to open the preview',\n })}\n isShown={isModified}\n >\n <Box cursor=\"not-allowed\" width=\"100%\">\n <Button\n variant=\"tertiary\"\n tag={Link}\n to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n onClick={trackNavigation}\n width=\"100%\"\n disabled={isModified}\n pointerEvents={isModified ? 'none' : undefined}\n tabIndex={isModified ? -1 : undefined}\n >\n {formatMessage({\n id: 'content-manager.preview.panel.button',\n defaultMessage: 'Open preview',\n })}\n </Button>\n </Box>\n </ConditionalTooltip>\n ),\n };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","~~url~~","~~trackNavigation~~","~~destinationPathname~~","~~replace~~","~~from~~","to","~~title~~","id","~~defaultMessage~~","~~content~~","~~Box~~","~~cursor~~","~~width~~","~~Button~~","~~variant~~","~~tag~~","~~Link~~","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":";;;;;;;;;AAmBA,MAAMA,kBAAAA,GAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GAAA;AAC/E,IAAA,IAAIF,OAAS,EAAA;AACX,QAAA,qBAAOG,GAACC,CAAAA,OAAAA,EAAAA;YAAQH,KAAOA,EAAAA,KAAAA;AAAQC,YAAAA,QAAAA,EAAAA;;AACjC;IAEA,OAAOA,QAAAA;AACT,CAAA;AAEMG,MAAAA,gBAAAA,GAAmC,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAAA,EAAAA;AACrB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;AACpB,IAAA,MAAMC,aAAaC,OAAQ,CAAA,kBAAA,EAAoB,CAACC,KAAAA,GAAUA,MAAMC,QAAQ,CAAA;~~AAExE~~;;;;AAIC,MACD,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,~~qBAAsB~~,CAAA;~~QAC5CC~~,MAAQ,EAAA;YACNC,~~WAAanB~~,EAAAA;AACf,SAAA;QACAS,KAAO,EAAA;AACLR,YAAAA,UAAAA;~~AACAmB~~,YAAAA,MAAAA,~~EAAQlB~~,~~QAAUkB~~,EAAAA,MAAAA;AAClBC,YAAAA,MAAAA,~~EAAQnB~~,~~QAAUmB~~,EAAAA;AACpB;AACF,KAAA,CAAA;AAEA,IAAA,IAAI,~~CAACN~~,IAAAA,EAAMA,~~IAAMO~~,EAAAA,GAAAA,~~IAAON~~,KAAO,EAAA;QAC7B,OAAO,IAAA;AACT;AAEA,IAAA,~~MAAMO~~,eAAkB,GAAA,IAAA;;AAEtB,QAAA,MAAMC,~~mBAAsBjB~~,GAAAA,QAAAA,~~CAASkB~~,OAAO,CAAC,OAAO,EAAM,CAAA,GAAA,UAAA;~~AAC1DpB~~,QAAAA,UAAAA,CAAW,cAAgB,EAAA;~~YAAEqB~~,~~IAAMnB~~,EAAAA,QAAAA;~~YAAUoB~~,~~EAAIH~~,EAAAA;AAAoB,SAAA,CAAA;AACvE,KAAA;IAEA,OAAO;~~AACLI~~,QAAAA,KAAAA~~,EAAOzB,aAAc,CAAA~~;~~YAAE0B~~,~~EAAI,EAAA,qCAAA;YAAuCC,cAAgB,EAAA;AAAU,SAAA,CAAA;AAC5FC,~~QAAAA,OAAAA,~~gBACElC~~,GAACJ,CAAAA,kBAAAA,EAAAA;AACCE,YAAAA,KAAAA,EAAOQ,aAAc,CAAA;~~gBACnB0B~~,EAAI,EAAA,uDAAA;~~gBACJC~~,cAAgB,EAAA;AAClB,aAAA,CAAA;~~YACApC~~,OAASiB,EAAAA,UAAAA;AAET,YAAA,QAAA,gBAAAd,~~GAACmC~~,CAAAA,GAAAA,EAAAA;gBAAIC,MAAO,EAAA,aAAA;~~gBAAcC~~,KAAM,EAAA,MAAA;AAC9B,gBAAA,QAAA,~~gBAAArC~~,~~GAACsC~~,CAAAA,MAAAA,EAAAA;oBACCC,OAAQ,EAAA,UAAA;oBACRC,GAAKC,EAAAA,IAAAA;~~oBACLX~~,EAAI,EAAA;~~wBAAEpB~~,QAAU,EAAA,SAAA;~~AAAWgC~~,wBAAAA,MAAAA,EAAQC,~~UAAU/B~~,KAAO,EAAA;~~4BAAEgC~~,MAAQ,EAAA;AAAM,yBAAA;AAAG,qBAAA;oBACvEC,~~OAASnB~~,EAAAA,eAAAA;~~oBACTW~~,KAAM,EAAA,MAAA;~~oBACNS~~,~~QAAUhC~~,EAAAA,UAAAA;~~AACViC~~,oBAAAA,aAAAA,~~EAAejC~~,aAAa,~~MAASkC~~,GAAAA,SAAAA;oBACrCC,~~QAAUnC~~,EAAAA,UAAAA,GAAa,CAAC,~~CAAIkC~~,GAAAA,SAAAA;~~8BAE3B1C~~,aAAc,CAAA;~~wBACb0B~~,EAAI,EAAA,sCAAA;~~wBACJC~~,cAAgB,EAAA;AAClB,qBAAA;;;;AAKV,KAAA;AACF;;;;"}
1	+ {"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, useLocation } from 'react-router-dom';\n\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\nimport type { UID } from '@strapi/types';\n\ninterface ConditionalTooltipProps {\n isShown: boolean;\n label: TooltipProps['label'];\n children: React.ReactNode;\n}\n\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\n if (isShown) {\n return <Tooltip label={label}>{children}</Tooltip>;\n }\n\n return children;\n};\n\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const { pathname } = useLocation();\n const [{ query }] = useQueryParams();\n const isModified = useForm('PreviewSidePanel', (state) => state.modified);\n const isUnsaved = Boolean(!document \|\| !document.id);\n\n const title = formatMessage({\n id: 'content-manager.preview.panel.title',\n defaultMessage: 'Preview',\n });\n\n /*\n The preview URL isn't used in this component, we just fetch it to know if preview is enabled\n * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\n * /preview, and the URL will already be loaded in the RTK query cache.\n */\n const { data, error } = useGetPreviewUrlQuery(\n {\n params: {\n contentType: model as UID.ContentType,\n },\n query: {\n documentId,\n locale: document?.locale,\n status: document?.status,\n },\n },\n // Don't bother making the request since we won't show any UI\n { skip: isUnsaved }\n );\n\n if (isUnsaved) {\n return null;\n }\n\n // Preview was not configured but not disabled either (otherwise it would be a success 204).\n // So we encourage the user to set it up.\n if (error && error.name === 'NotFoundError') {\n return {\n title,\n content: (\n <Button\n variant=\"tertiary\"\n tag={Link}\n to=\"https://docs.strapi.io/cms/features/preview\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n width=\"100%\"\n >\n {formatMessage({\n id: 'content-manager.preview.panel.button-configuration',\n defaultMessage: 'Set up preview',\n })}\n </Button>\n ),\n };\n }\n\n if (!data?.data?.url \|\| error) {\n return null;\n }\n\n const trackNavigation = () => {\n // Append /preview to the current URL\n const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\n trackUsage('willNavigate', { from: pathname, to: destinationPathname });\n };\n\n return {\n title,\n content: (\n <ConditionalTooltip\n label={formatMessage({\n id: 'content-manager.preview.panel.button-disabled-tooltip',\n defaultMessage: 'Please save to open the preview',\n })}\n isShown={isModified}\n >\n <Box cursor=\"not-allowed\" width=\"100%\">\n <Button\n variant=\"tertiary\"\n tag={Link}\n to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\n onClick={trackNavigation}\n width=\"100%\"\n disabled={isModified}\n pointerEvents={isModified ? 'none' : undefined}\n tabIndex={isModified ? -1 : undefined}\n >\n {formatMessage({\n id: 'content-manager.preview.panel.button',\n defaultMessage: 'Open preview',\n })}\n </Button>\n </Box>\n </ConditionalTooltip>\n ),\n };\n};\n\nexport { PreviewSidePanel };\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","name","content","Button","variant","tag","Link","to","target","rel","width","url","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","undefined","tabIndex"],"mappings":"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"}

package/dist/admin/preview/pages/Preview.js CHANGED Viewed

@@ -13,10 +13,13 @@ var DocumentRBAC = require('../../features/DocumentRBAC.js');
 var useDocument = require('../../hooks/useDocument.js');
 var useDocumentLayout = require('../../hooks/useDocumentLayout.js');
 var FormLayout = require('../../pages/EditView/components/FormLayout.js');
+var data = require('../../pages/EditView/utils/data.js');
 var api = require('../../utils/api.js');
 var validation = require('../../utils/validation.js');
 var PreviewHeader = require('../components/PreviewHeader.js');
 var preview = require('../services/preview.js');
+var constants = require('../utils/constants.js');
+var previewScript = require('../utils/previewScript.js');
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -37,14 +40,53 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+/* -------------------------------------------------------------------------------------------------
+ * Constants
+ * -----------------------------------------------------------------------------------------------*/ const DEVICES = [
+    {
+        name: 'desktop',
+        label: {
+            id: 'content-manager.preview.device.desktop',
+            defaultMessage: 'Desktop'
+        },
+        width: '100%',
+        height: '100%'
+    },
+    {
+        name: 'mobile',
+        label: {
+            id: 'content-manager.preview.device.mobile',
+            defaultMessage: 'Mobile'
+        },
+        width: '375px',
+        height: '667px'
+    }
+];
 const [PreviewProvider, usePreviewContext] = strapiAdmin.createContext('PreviewPage');
 /* -------------------------------------------------------------------------------------------------
  * PreviewPage
  * -----------------------------------------------------------------------------------------------*/ const AnimatedArrow = styledComponents.styled(Icons.ArrowLineLeft)`
   will-change: transform;
-  rotate: ${(props)=>props.isSideEditorOpen ? '0deg' : '180deg'};
+  rotate: ${(props)=>props.$isSideEditorOpen ? '0deg' : '180deg'};
   transition: rotate 0.2s ease-in-out;
 `;
+/**
+ * A function factory so we can generate a new sendMessage everytime we need one.
+ * We can't store and reuse a single sendMessage because it needs to have a stable identity
+ * as it used in a useEffect function. And we can't rely on useCallback because we need the
+ * up-to-date iframe ref, and this would make it stale (refs don't trigger callback reevaluations).
+ */ function getSendMessage(iframe) {
+    return (type, payload)=>{
+        if (!iframe.current) return;
+        const { origin } = new URL(iframe.current.src);
+        iframe.current.contentWindow?.postMessage({
+            type,
+            ...payload !== undefined && {
+                payload
+            }
+        }, origin);
+    };
+}
 const PreviewPage = ()=>{
     const location = reactRouterDom.useLocation();
     const { formatMessage } = reactIntl.useIntl();
@@ -56,6 +98,24 @@ const PreviewPage = ()=>{
     const params = React__namespace.useMemo(()=>api.buildValidParams(query), [
         query
     ]);
+    const [deviceName, setDeviceName] = React__namespace.useState(DEVICES[0].name);
+    const device = DEVICES.find((d)=>d.name === deviceName) ?? DEVICES[0];
+    // Listen for ready message from iframe before injecting script
+    React__namespace.useEffect(()=>{
+        const handleMessage = (event)=>{
+            if (event.data?.type === constants.PUBLIC_EVENTS.PREVIEW_READY) {
+                const script = `(${previewScript.previewScript.toString()})()`;
+                const sendMessage = getSendMessage(iframeRef);
+                sendMessage(constants.PUBLIC_EVENTS.STRAPI_SCRIPT, {
+                    script
+                });
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, []);
     if (!collectionType) {
         throw new Error('Could not find collectionType in url params');
     }
@@ -84,7 +144,7 @@ const PreviewPage = ()=>{
     });
     const documentLayoutResponse = useDocumentLayout.useDocumentLayout(model);
     const isLoading = previewUrlResponse.isLoading || documentLayoutResponse.isLoading || documentResponse.isLoading;
-    if (isLoading && !documentResponse.document?.documentId) {
+    if (isLoading && (!documentResponse.document?.documentId || previewUrlResponse.isLoading)) {
         return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
     }
     const initialValues = documentResponse.getInitialFormValues();
@@ -96,11 +156,17 @@ const PreviewPage = ()=>{
     }
     const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);
     const validateSync = (values, options)=>{
+        const { data: cleanedValues, removedAttributes } = data.handleInvisibleAttributes(values, {
+            schema: documentResponse.schema,
+            initialValues,
+            components: documentResponse.components
+        });
         const yupSchema = validation.createYupSchema(documentResponse.schema?.attributes, documentResponse.components, {
             status: documentResponse.document?.status,
+            removedAttributes,
             ...options
         });
-        return yupSchema.validateSync(values, {
+        return yupSchema.validateSync(cleanedValues, {
             abortEarly: false
         });
     };
@@ -137,11 +203,17 @@ const PreviewPage = ()=>{
                     initialErrors: location?.state?.forceValidation ? validateSync(initialValues, {}) : {},
                     height: "100%",
                     validate: (values, options)=>{
+                        const { data: cleanedValues, removedAttributes } = data.handleInvisibleAttributes(values, {
+                            schema: documentResponse.schema,
+                            initialValues,
+                            components: documentResponse.components
+                        });
                         const yupSchema = validation.createYupSchema(documentResponse.schema?.attributes, documentResponse.components, {
                             status: documentResponse.document?.status,
+                            removedAttributes,
                             ...options
                         });
-                        return yupSchema.validate(values, {
+                        return yupSchema.validate(cleanedValues, {
                             abortEarly: false
                         });
                     },
@@ -176,41 +248,70 @@ const PreviewPage = ()=>{
                                                 hasBackground: false
                                             })
                                         }),
-                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
-                                            position: "relative",
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            direction: "column",
+                                            alignItems: "stretch",
                                             flex: 1,
                                             height: "100%",
                                             overflow: "hidden",
                                             children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                                    "data-testid": "preview-iframe",
-                                                    ref: iframeRef,
-                                                    src: previewUrl,
-                                                    title: formatMessage({
-                                                        id: 'content-manager.preview.panel.title',
-                                                        defaultMessage: 'Preview'
-                                                    }),
-                                                    width: "100%",
-                                                    height: "100%",
-                                                    borderWidth: 0,
-                                                    tag: "iframe"
-                                                }, previewUrl),
-                                                hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    variant: "tertiary",
-                                                    label: formatMessage(isSideEditorOpen ? {
-                                                        id: 'content-manager.preview.content.close-editor',
-                                                        defaultMessage: 'Close editor'
-                                                    } : {
-                                                        id: 'content-manager.preview.content.open-editor',
-                                                        defaultMessage: 'Open editor'
-                                                    }),
-                                                    onClick: ()=>setIsSideEditorOpen((prev)=>!prev),
-                                                    position: "absolute",
-                                                    top: 2,
-                                                    left: 2,
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(AnimatedArrow, {
-                                                        isSideEditorOpen: isSideEditorOpen
-                                                    })
+                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                    direction: "row",
+                                                    background: "neutral0",
+                                                    padding: 2,
+                                                    borderWidth: "0 0 1px 0",
+                                                    borderColor: "neutral150",
+                                                    children: [
+                                                        hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                            variant: "ghost",
+                                                            label: formatMessage(isSideEditorOpen ? {
+                                                                id: 'content-manager.preview.content.close-editor',
+                                                                defaultMessage: 'Close editor'
+                                                            } : {
+                                                                id: 'content-manager.preview.content.open-editor',
+                                                                defaultMessage: 'Open editor'
+                                                            }),
+                                                            onClick: ()=>setIsSideEditorOpen((prev)=>!prev),
+                                                            children: /*#__PURE__*/ jsxRuntime.jsx(AnimatedArrow, {
+                                                                $isSideEditorOpen: isSideEditorOpen
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                                            justifyContent: "center",
+                                                            flex: 1,
+                                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                                                                value: deviceName,
+                                                                onChange: (name)=>setDeviceName(name.toString()),
+                                                                "aria-label": formatMessage({
+                                                                    id: 'content-manager.preview.device.select',
+                                                                    defaultMessage: 'Select device type'
+                                                                }),
+                                                                children: DEVICES.map((deviceOption)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                                                                        value: deviceOption.name,
+                                                                        children: formatMessage(deviceOption.label)
+                                                                    }, deviceOption.name))
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                                    direction: "column",
+                                                    justifyContent: "center",
+                                                    background: "neutral0",
+                                                    flex: 1,
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                                        "data-testid": "preview-iframe",
+                                                        ref: iframeRef,
+                                                        src: previewUrl,
+                                                        title: formatMessage({
+                                                            id: 'content-manager.preview.panel.title',
+                                                            defaultMessage: 'Preview'
+                                                        }),
+                                                        width: device.width,
+                                                        height: device.height,
+                                                        borderWidth: 0,
+                                                        tag: "iframe"
+                                                    }, previewUrl)
                                                 })
                                             ]
                                         })

package/dist/admin/preview/pages/Preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Preview.js","sources":["../../../../admin/src/preview/pages/Preview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Page,\n useQueryParams,\n useRBAC,\n createContext,\n Form as FormContext,\n Blocker,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FocusTrap, IconButton, Portal } from '@strapi/design-system';\nimport { ArrowLineLeft } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation, useParams } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { GetPreviewUrl } from '../../../../shared/contracts/preview';\nimport { COLLECTION_TYPES } from '../../constants/collections';\nimport { DocumentRBAC } from '../../features/DocumentRBAC';\nimport { type UseDocument, useDocument } from '../../hooks/useDocument';\nimport { type EditLayout, useDocumentLayout } from '../../hooks/useDocumentLayout';\nimport { FormLayout } from '../../pages/EditView/components/FormLayout';\nimport { buildValidParams } from '../../utils/api';\nimport { createYupSchema } from '../../utils/validation';\nimport { PreviewHeader } from '../components/PreviewHeader';\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { UID } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewProvider\n * -----------------------------------------------------------------------------------------------/\n\ninterface PreviewContextValue {\n url: string;\n title: string;\n document: NonNullable<ReturnType<UseDocument>['document']>;\n meta: NonNullable<ReturnType<UseDocument>['meta']>;\n schema: NonNullable<ReturnType<UseDocument>['schema']>;\n layout: EditLayout;\n onPreview: () => void;\n}\n\nconst [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>('PreviewPage');\n\n/ -------------------------------------------------------------------------------------------------\n * PreviewPage\n * -----------------------------------------------------------------------------------------------/\n\nconst AnimatedArrow = styled(ArrowLineLeft)<{ isSideEditorOpen: boolean }>`\n will-change: transform;\n rotate: ${(props) => (props.isSideEditorOpen ? '0deg' : '180deg')};\n transition: rotate 0.2s ease-in-out;\n`;\n\nconst PreviewPage = () => {\n const location = useLocation();\n const { formatMessage } = useIntl();\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null);\n const [isSideEditorOpen, setIsSideEditorOpen] = React.useState(true);\n\n // Read all the necessary data from the URL to find the right preview URL\n const {\n slug: model,\n id: documentId,\n collectionType,\n } = useParams<{\n slug: UID.ContentType;\n id: string;\n collectionType: string;\n }>();\n const [{ query }] = useQueryParams<{\n plugins?: Record<string, unknown>;\n status?: string;\n }>();\n\n const params = React.useMemo(() => buildValidParams(query), [query]);\n\n if (!collectionType) {\n throw new Error('Could not find collectionType in url params');\n }\n\n if (!model) {\n throw new Error('Could not find model in url params');\n }\n\n // Only collection types must have a documentId\n if (collectionType === COLLECTION_TYPES && !documentId) {\n throw new Error('Could not find documentId in url params');\n }\n\n const previewUrlResponse = useGetPreviewUrlQuery({\n params: {\n contentType: model,\n },\n query: {\n documentId,\n locale: params.locale,\n status: params.status as GetPreviewUrl.Request['query']['status'],\n },\n });\n const documentResponse = useDocument({\n model,\n collectionType,\n documentId,\n params,\n });\n const documentLayoutResponse = useDocumentLayout(model);\n\n const isLoading =\n previewUrlResponse.isLoading \|\| documentLayoutResponse.isLoading \|\| documentResponse.isLoading;\n if (isLoading && !documentResponse.document?.documentId) {\n return <Page.Loading />;\n }\n\n const initialValues = documentResponse.getInitialFormValues();\n\n if (\n previewUrlResponse.error \|\|\n documentLayoutResponse.error \|\|\n !documentResponse.document \|\|\n !documentResponse.meta \|\|\n !documentResponse.schema \|\|\n !initialValues\n ) {\n return <Page.Error />;\n }\n\n if (!previewUrlResponse.data?.data?.url) {\n return <Page.NoData />;\n }\n\n const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);\n\n const validateSync = (values: Record<string, unknown>, options: Record<string, string>) => {\n const yupSchema = createYupSchema(\n documentResponse.schema?.attributes,\n documentResponse.components,\n {\n status: documentResponse.document?.status,\n ...options,\n }\n );\n\n return yupSchema.validateSync(values, { abortEarly: false });\n };\n\n const previewUrl = previewUrlResponse.data.data.url;\n\n const onPreview = () => {\n iframeRef?.current?.contentWindow?.postMessage(\n { type: 'strapiUpdate' },\n // The iframe origin is safe to use since it must be provided through the allowedOrigins config\n new URL(iframeRef.current.src).origin\n );\n };\n\n const hasAdvancedPreview = window.strapi.features.isEnabled('cms-advanced-preview');\n\n return (\n <>\n <Page.Title>\n {formatMessage(\n {\n id: 'content-manager.preview.page-title',\n defaultMessage: '{contentType} preview',\n },\n {\n contentType: documentTitle,\n }\n )}\n </Page.Title>\n <PreviewProvider\n url={previewUrl}\n document={documentResponse.document}\n title={documentTitle}\n meta={documentResponse.meta}\n schema={documentResponse.schema}\n layout={documentLayoutResponse.edit}\n onPreview={onPreview}\n >\n <FormContext\n method=\"PUT\"\n disabled={\n query.status === 'published' &&\n documentResponse &&\n documentResponse.document.status !== 'draft'\n }\n initialValues={documentResponse.getInitialFormValues()}\n initialErrors={location?.state?.forceValidation ? validateSync(initialValues, {}) : {}}\n height=\"100%\"\n validate={(values: Record<string, unknown>, options: Record<string, string>) => {\n const yupSchema = createYupSchema(\n documentResponse.schema?.attributes,\n documentResponse.components,\n {\n status: documentResponse.document?.status,\n ...options,\n }\n );\n\n return yupSchema.validate(values, { abortEarly: false });\n }}\n >\n {({ resetForm }) => (\n <Flex direction=\"column\" height=\"100%\" alignItems=\"stretch\">\n <Blocker onProceed={resetForm} />\n <PreviewHeader />\n <Flex flex={1} overflow=\"auto\" alignItems=\"stretch\">\n {hasAdvancedPreview && (\n <Box\n overflow=\"auto\"\n width={isSideEditorOpen ? '50%' : 0}\n borderWidth=\"0 1px 0 0\"\n borderColor=\"neutral150\"\n paddingTop={6}\n paddingBottom={6}\n // Remove horizontal padding when the editor is closed or it won't fully disappear\n paddingLeft={isSideEditorOpen ? 6 : 0}\n paddingRight={isSideEditorOpen ? 6 : 0}\n transition=\"all 0.2s ease-in-out\"\n >\n <FormLayout\n layout={documentLayoutResponse.edit.layout}\n document={documentResponse}\n hasBackground={false}\n />\n </Box>\n )}\n\n <Box position=\"relative\" flex={1} height=\"100%\" overflow=\"hidden\">\n <Box\n data-testid=\"preview-iframe\"\n ref={iframeRef}\n src={previewUrl}\n /\n For some reason, changing an iframe's src tag causes the browser to add a new item in the\n * history stack. This is an issue for us as it means clicking the back button will not let us\n * go back to the edit view. To fix it, we need to trick the browser into thinking this is a\n * different iframe when the preview URL changes. So we set a key prop to force React\n * to mount a different node when the src changes.\n /\n key={previewUrl}\n title={formatMessage({\n id: 'content-manager.preview.panel.title',\n defaultMessage: 'Preview',\n })}\n width=\"100%\"\n height=\"100%\"\n borderWidth={0}\n tag=\"iframe\"\n />\n {hasAdvancedPreview && (\n <IconButton\n variant=\"tertiary\"\n label={formatMessage(\n isSideEditorOpen\n ? {\n id: 'content-manager.preview.content.close-editor',\n defaultMessage: 'Close editor',\n }\n : {\n id: 'content-manager.preview.content.open-editor',\n defaultMessage: 'Open editor',\n }\n )}\n onClick={() => setIsSideEditorOpen((prev) => !prev)}\n position=\"absolute\"\n top={2}\n left={2}\n >\n <AnimatedArrow isSideEditorOpen={isSideEditorOpen} />\n </IconButton>\n )}\n </Box>\n </Flex>\n </Flex>\n )}\n </FormContext>\n </PreviewProvider>\n </>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * ProtectedPreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedPreviewPageImpl = () => {\n const { slug: model } = useParams<{\n slug: string;\n }>();\n const {\n permissions = [],\n isLoading,\n error,\n } = useRBAC([\n { action: 'plugin::content-manager.explorer.read', subject: model },\n { action: 'plugin::content-manager.explorer.update', subject: model },\n { action: 'plugin::content-manager.explorer.publish', subject: model },\n ]);\n\n if (isLoading) {\n return <Page.Loading />;\n }\n\n if (error \|\| !model) {\n return (\n <Box\n height=\"100vh\"\n width=\"100vw\"\n position=\"fixed\"\n top={0}\n left={0}\n zIndex={2}\n background=\"neutral0\"\n >\n <Page.Error />\n </Box>\n );\n }\n\n return (\n <Box\n height=\"100vh\"\n width=\"100vw\"\n position=\"fixed\"\n top={0}\n left={0}\n zIndex={2}\n background=\"neutral0\"\n >\n <Page.Protect\n permissions={permissions.filter((permission) =>\n permission.action.includes('explorer.read')\n )}\n >\n <DocumentRBAC permissions={permissions}>\n <PreviewPage />\n </DocumentRBAC>\n </Page.Protect>\n </Box>\n );\n};\n\nconst ProtectedPreviewPage = () => {\n return (\n <Portal>\n <FocusTrap>\n <ProtectedPreviewPageImpl />\n </FocusTrap>\n </Portal>\n );\n};\n\nexport { ProtectedPreviewPage, usePreviewContext };\n"],"names":["PreviewProvider","usePreviewContext","createContext","AnimatedArrow","styled","ArrowLineLeft","props","isSideEditorOpen","PreviewPage","location","useLocation","formatMessage","useIntl","iframeRef","React","useRef","setIsSideEditorOpen","useState","slug","model","id","documentId","collectionType","useParams","query","useQueryParams","params","useMemo","buildValidParams","Error","COLLECTION_TYPES","previewUrlResponse","useGetPreviewUrlQuery","contentType","locale","status","documentResponse","useDocument","documentLayoutResponse","useDocumentLayout","isLoading","document","_jsx","Page","Loading","initialValues","getInitialFormValues","error","meta","schema","data","url","NoData","documentTitle","getTitle","edit","settings","mainField","validateSync","values","options","yupSchema","createYupSchema","attributes","components","abortEarly","previewUrl","onPreview","current","contentWindow","postMessage","type","URL","src","origin","hasAdvancedPreview","window","strapi","features","isEnabled","_jsxs","_Fragment","Title","defaultMessage","title","layout","FormContext","method","disabled","initialErrors","state","forceValidation","height","validate","resetForm","Flex","direction","alignItems","Blocker","onProceed","PreviewHeader","flex","overflow","Box","width","borderWidth","borderColor","paddingTop","paddingBottom","paddingLeft","paddingRight","transition","FormLayout","hasBackground","position","data-testid","ref","tag","IconButton","variant","label","onClick","prev","top","left","ProtectedPreviewPageImpl","permissions","useRBAC","action","subject","zIndex","background","Protect","filter","permission","includes","DocumentRBAC","ProtectedPreviewPage","Portal","FocusTrap"],"mappings":"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"}
1	+ {"version":3,"file":"Preview.js","sources":["../../../../admin/src/preview/pages/Preview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Page,\n useQueryParams,\n useRBAC,\n createContext,\n Form as FormContext,\n Blocker,\n} from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Flex,\n FocusTrap,\n IconButton,\n Portal,\n SingleSelect,\n SingleSelectOption,\n} from '@strapi/design-system';\nimport { ArrowLineLeft } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation, useParams } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { GetPreviewUrl } from '../../../../shared/contracts/preview';\nimport { COLLECTION_TYPES } from '../../constants/collections';\nimport { DocumentRBAC } from '../../features/DocumentRBAC';\nimport { type UseDocument, useDocument } from '../../hooks/useDocument';\nimport { type EditLayout, useDocumentLayout } from '../../hooks/useDocumentLayout';\nimport { FormLayout } from '../../pages/EditView/components/FormLayout';\nimport { handleInvisibleAttributes } from '../../pages/EditView/utils/data';\nimport { buildValidParams } from '../../utils/api';\nimport { createYupSchema } from '../../utils/validation';\nimport { PreviewHeader } from '../components/PreviewHeader';\nimport { useGetPreviewUrlQuery } from '../services/preview';\nimport { INTERNAL_EVENTS, PUBLIC_EVENTS } from '../utils/constants';\nimport { previewScript } from '../utils/previewScript';\n\nimport type { UID } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Constants\n * -----------------------------------------------------------------------------------------------/\n\nconst DEVICES = [\n {\n name: 'desktop',\n label: {\n id: 'content-manager.preview.device.desktop',\n defaultMessage: 'Desktop',\n },\n width: '100%',\n height: '100%',\n },\n {\n name: 'mobile',\n label: {\n id: 'content-manager.preview.device.mobile',\n defaultMessage: 'Mobile',\n },\n width: '375px',\n height: '667px',\n },\n];\n\n/ -------------------------------------------------------------------------------------------------\n * PreviewProvider\n * -----------------------------------------------------------------------------------------------/\n\ninterface PreviewContextValue {\n url: string;\n title: string;\n document: NonNullable<ReturnType<UseDocument>['document']>;\n meta: NonNullable<ReturnType<UseDocument>['meta']>;\n schema: NonNullable<ReturnType<UseDocument>['schema']>;\n layout: EditLayout;\n onPreview: () => void;\n}\n\nconst [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>('PreviewPage');\n\n/ -------------------------------------------------------------------------------------------------\n * PreviewPage\n * -----------------------------------------------------------------------------------------------/\n\nconst AnimatedArrow = styled(ArrowLineLeft)<{ $isSideEditorOpen: boolean }>`\n will-change: transform;\n rotate: ${(props) => (props.$isSideEditorOpen ? '0deg' : '180deg')};\n transition: rotate 0.2s ease-in-out;\n`;\n\ntype MessageType =\n \| (typeof INTERNAL_EVENTS)[keyof typeof INTERNAL_EVENTS]\n \| (typeof PUBLIC_EVENTS)[keyof typeof PUBLIC_EVENTS];\n\n/\n A function factory so we can generate a new sendMessage everytime we need one.\n * We can't store and reuse a single sendMessage because it needs to have a stable identity\n * as it used in a useEffect function. And we can't rely on useCallback because we need the\n * up-to-date iframe ref, and this would make it stale (refs don't trigger callback reevaluations).\n /\nfunction getSendMessage(iframe: React.RefObject<HTMLIFrameElement>) {\n return (type: MessageType, payload?: unknown) => {\n if (!iframe.current) return;\n\n const { origin } = new URL(iframe.current.src);\n\n iframe.current.contentWindow?.postMessage(\n {\n type,\n ...(payload !== undefined && { payload }),\n },\n origin\n );\n };\n}\n\nconst PreviewPage = () => {\n const location = useLocation();\n const { formatMessage } = useIntl();\n\n const iframeRef = React.useRef<HTMLIFrameElement>(null);\n const [isSideEditorOpen, setIsSideEditorOpen] = React.useState(true);\n\n // Read all the necessary data from the URL to find the right preview URL\n const {\n slug: model,\n id: documentId,\n collectionType,\n } = useParams<{\n slug: UID.ContentType;\n id: string;\n collectionType: string;\n }>();\n const [{ query }] = useQueryParams<{\n plugins?: Record<string, unknown>;\n status?: string;\n }>();\n\n const params = React.useMemo(() => buildValidParams(query), [query]);\n\n const [deviceName, setDeviceName] = React.useState<(typeof DEVICES)[number]['name']>(\n DEVICES[0].name\n );\n const device = DEVICES.find((d) => d.name === deviceName) ?? DEVICES[0];\n\n // Listen for ready message from iframe before injecting script\n React.useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n if (event.data?.type === PUBLIC_EVENTS.PREVIEW_READY) {\n const script = `(${previewScript.toString()})()`;\n const sendMessage = getSendMessage(iframeRef);\n sendMessage(PUBLIC_EVENTS.STRAPI_SCRIPT, { script });\n }\n };\n\n window.addEventListener('message', handleMessage);\n\n return () => {\n window.removeEventListener('message', handleMessage);\n };\n }, []);\n\n if (!collectionType) {\n throw new Error('Could not find collectionType in url params');\n }\n\n if (!model) {\n throw new Error('Could not find model in url params');\n }\n\n // Only collection types must have a documentId\n if (collectionType === COLLECTION_TYPES && !documentId) {\n throw new Error('Could not find documentId in url params');\n }\n\n const previewUrlResponse = useGetPreviewUrlQuery({\n params: {\n contentType: model,\n },\n query: {\n documentId,\n locale: params.locale,\n status: params.status as GetPreviewUrl.Request['query']['status'],\n },\n });\n const documentResponse = useDocument({\n model,\n collectionType,\n documentId,\n params,\n });\n const documentLayoutResponse = useDocumentLayout(model);\n\n const isLoading =\n previewUrlResponse.isLoading \|\| documentLayoutResponse.isLoading \|\| documentResponse.isLoading;\n if (isLoading && (!documentResponse.document?.documentId \|\| previewUrlResponse.isLoading)) {\n return <Page.Loading />;\n }\n\n const initialValues = documentResponse.getInitialFormValues();\n\n if (\n previewUrlResponse.error \|\|\n documentLayoutResponse.error \|\|\n !documentResponse.document \|\|\n !documentResponse.meta \|\|\n !documentResponse.schema \|\|\n !initialValues\n ) {\n return <Page.Error />;\n }\n\n if (!previewUrlResponse.data?.data?.url) {\n return <Page.NoData />;\n }\n\n const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);\n\n const validateSync = (values: Record<string, unknown>, options: Record<string, string>) => {\n const { data: cleanedValues, removedAttributes } = handleInvisibleAttributes(values, {\n schema: documentResponse.schema,\n initialValues,\n components: documentResponse.components,\n });\n\n const yupSchema = createYupSchema(\n documentResponse.schema?.attributes,\n documentResponse.components,\n {\n status: documentResponse.document?.status,\n removedAttributes,\n ...options,\n }\n );\n\n return yupSchema.validateSync(cleanedValues, { abortEarly: false });\n };\n\n const previewUrl = previewUrlResponse.data.data.url;\n\n const onPreview = () => {\n iframeRef?.current?.contentWindow?.postMessage(\n { type: 'strapiUpdate' },\n // The iframe origin is safe to use since it must be provided through the allowedOrigins config\n new URL(iframeRef.current.src).origin\n );\n };\n\n const hasAdvancedPreview = window.strapi.features.isEnabled('cms-advanced-preview');\n\n return (\n <>\n <Page.Title>\n {formatMessage(\n {\n id: 'content-manager.preview.page-title',\n defaultMessage: '{contentType} preview',\n },\n {\n contentType: documentTitle,\n }\n )}\n </Page.Title>\n <PreviewProvider\n url={previewUrl}\n document={documentResponse.document}\n title={documentTitle}\n meta={documentResponse.meta}\n schema={documentResponse.schema}\n layout={documentLayoutResponse.edit}\n onPreview={onPreview}\n >\n <FormContext\n method=\"PUT\"\n disabled={\n query.status === 'published' &&\n documentResponse &&\n documentResponse.document.status !== 'draft'\n }\n initialValues={documentResponse.getInitialFormValues()}\n initialErrors={location?.state?.forceValidation ? validateSync(initialValues, {}) : {}}\n height=\"100%\"\n validate={(values: Record<string, unknown>, options: Record<string, string>) => {\n const { data: cleanedValues, removedAttributes } = handleInvisibleAttributes(values, {\n schema: documentResponse.schema,\n initialValues,\n components: documentResponse.components,\n });\n\n const yupSchema = createYupSchema(\n documentResponse.schema?.attributes,\n documentResponse.components,\n {\n status: documentResponse.document?.status,\n removedAttributes,\n ...options,\n }\n );\n\n return yupSchema.validate(cleanedValues, { abortEarly: false });\n }}\n >\n {({ resetForm }) => (\n <Flex direction=\"column\" height=\"100%\" alignItems=\"stretch\">\n <Blocker onProceed={resetForm} />\n <PreviewHeader />\n <Flex flex={1} overflow=\"auto\" alignItems=\"stretch\">\n {hasAdvancedPreview && (\n <Box\n overflow=\"auto\"\n width={isSideEditorOpen ? '50%' : 0}\n borderWidth=\"0 1px 0 0\"\n borderColor=\"neutral150\"\n paddingTop={6}\n paddingBottom={6}\n // Remove horizontal padding when the editor is closed or it won't fully disappear\n paddingLeft={isSideEditorOpen ? 6 : 0}\n paddingRight={isSideEditorOpen ? 6 : 0}\n transition=\"all 0.2s ease-in-out\"\n >\n <FormLayout\n layout={documentLayoutResponse.edit.layout}\n document={documentResponse}\n hasBackground={false}\n />\n </Box>\n )}\n <Flex\n direction=\"column\"\n alignItems=\"stretch\"\n flex={1}\n height=\"100%\"\n overflow=\"hidden\"\n >\n <Flex\n direction=\"row\"\n background=\"neutral0\"\n padding={2}\n borderWidth=\"0 0 1px 0\"\n borderColor=\"neutral150\"\n >\n {hasAdvancedPreview && (\n <IconButton\n variant=\"ghost\"\n label={formatMessage(\n isSideEditorOpen\n ? {\n id: 'content-manager.preview.content.close-editor',\n defaultMessage: 'Close editor',\n }\n : {\n id: 'content-manager.preview.content.open-editor',\n defaultMessage: 'Open editor',\n }\n )}\n onClick={() => setIsSideEditorOpen((prev) => !prev)}\n >\n <AnimatedArrow $isSideEditorOpen={isSideEditorOpen} />\n </IconButton>\n )}\n <Flex justifyContent=\"center\" flex={1}>\n <SingleSelect\n value={deviceName}\n onChange={(name) => setDeviceName(name.toString())}\n aria-label={formatMessage({\n id: 'content-manager.preview.device.select',\n defaultMessage: 'Select device type',\n })}\n >\n {DEVICES.map((deviceOption) => (\n <SingleSelectOption key={deviceOption.name} value={deviceOption.name}>\n {formatMessage(deviceOption.label)}\n </SingleSelectOption>\n ))}\n </SingleSelect>\n </Flex>\n </Flex>\n <Flex direction=\"column\" justifyContent=\"center\" background=\"neutral0\" flex={1}>\n <Box\n data-testid=\"preview-iframe\"\n ref={iframeRef}\n src={previewUrl}\n /\n For some reason, changing an iframe's src tag causes the browser to add a new item in the\n * history stack. This is an issue for us as it means clicking the back button will not let us\n * go back to the edit view. To fix it, we need to trick the browser into thinking this is a\n * different iframe when the preview URL changes. So we set a key prop to force React\n * to mount a different node when the src changes.\n /\n key={previewUrl}\n title={formatMessage({\n id: 'content-manager.preview.panel.title',\n defaultMessage: 'Preview',\n })}\n width={device.width}\n height={device.height}\n borderWidth={0}\n tag=\"iframe\"\n />\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )}\n </FormContext>\n </PreviewProvider>\n </>\n );\n};\n\n/ -------------------------------------------------------------------------------------------------\n * ProtectedPreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedPreviewPageImpl = () => {\n const { slug: model } = useParams<{\n slug: string;\n }>();\n const {\n permissions = [],\n isLoading,\n error,\n } = useRBAC([\n { action: 'plugin::content-manager.explorer.read', subject: model },\n { action: 'plugin::content-manager.explorer.update', subject: model },\n { action: 'plugin::content-manager.explorer.publish', subject: model },\n ]);\n\n if (isLoading) {\n return <Page.Loading />;\n }\n\n if (error \|\| !model) {\n return (\n <Box\n height=\"100vh\"\n width=\"100vw\"\n position=\"fixed\"\n top={0}\n left={0}\n zIndex={2}\n background=\"neutral0\"\n >\n <Page.Error />\n </Box>\n );\n }\n\n return (\n <Box\n height=\"100vh\"\n width=\"100vw\"\n position=\"fixed\"\n top={0}\n left={0}\n zIndex={2}\n background=\"neutral0\"\n >\n <Page.Protect\n permissions={permissions.filter((permission) =>\n permission.action.includes('explorer.read')\n )}\n >\n <DocumentRBAC permissions={permissions}>\n <PreviewPage />\n </DocumentRBAC>\n </Page.Protect>\n </Box>\n );\n};\n\nconst ProtectedPreviewPage = () => {\n return (\n <Portal>\n <FocusTrap>\n <ProtectedPreviewPageImpl />\n </FocusTrap>\n </Portal>\n );\n};\n\nexport { ProtectedPreviewPage, usePreviewContext };\n"],"names":["DEVICES","name","label","id","defaultMessage","width","height","PreviewProvider","usePreviewContext","createContext","AnimatedArrow","styled","ArrowLineLeft","props","$isSideEditorOpen","getSendMessage","iframe","type","payload","current","origin","URL","src","contentWindow","postMessage","undefined","PreviewPage","location","useLocation","formatMessage","useIntl","iframeRef","React","useRef","isSideEditorOpen","setIsSideEditorOpen","useState","slug","model","documentId","collectionType","useParams","query","useQueryParams","params","useMemo","buildValidParams","deviceName","setDeviceName","device","find","d","useEffect","handleMessage","event","data","PUBLIC_EVENTS","PREVIEW_READY","script","previewScript","toString","sendMessage","STRAPI_SCRIPT","window","addEventListener","removeEventListener","Error","COLLECTION_TYPES","previewUrlResponse","useGetPreviewUrlQuery","contentType","locale","status","documentResponse","useDocument","documentLayoutResponse","useDocumentLayout","isLoading","document","_jsx","Page","Loading","initialValues","getInitialFormValues","error","meta","schema","url","NoData","documentTitle","getTitle","edit","settings","mainField","validateSync","values","options","cleanedValues","removedAttributes","handleInvisibleAttributes","components","yupSchema","createYupSchema","attributes","abortEarly","previewUrl","onPreview","hasAdvancedPreview","strapi","features","isEnabled","_jsxs","_Fragment","Title","title","layout","FormContext","method","disabled","initialErrors","state","forceValidation","validate","resetForm","Flex","direction","alignItems","Blocker","onProceed","PreviewHeader","flex","overflow","Box","borderWidth","borderColor","paddingTop","paddingBottom","paddingLeft","paddingRight","transition","FormLayout","hasBackground","background","padding","IconButton","variant","onClick","prev","justifyContent","SingleSelect","value","onChange","aria-label","map","deviceOption","SingleSelectOption","data-testid","ref","tag","ProtectedPreviewPageImpl","permissions","useRBAC","action","subject","position","top","left","zIndex","Protect","filter","permission","includes","DocumentRBAC","ProtectedPreviewPage","Portal","FocusTrap"],"mappings":"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"}