@strapi/content-manager 0.0.0-next.df0d99415fc543d9747f3946fd7d1a4c39052b95 → 0.0.0-next.e1a19b9e52cdcb526515883c8289522a64c9871a

package/dist/admin/preview/components/PreviewHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewHeader.mjs","sources":["../../../../admin/src/preview/components/PreviewHeader.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useClipboard,\n  useHistory,\n  useNotification,\n  useQueryParams,\n  useStrapiApp,\n} from '@strapi/admin/strapi-admin';\nimport { IconButton, Tabs, Typography, Flex } from '@strapi/design-system';\nimport { Cross, Link as LinkIcon } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { InjectionZone } from '../../components/InjectionZone';\nimport { DocumentActionButton } from '../../pages/EditView/components/DocumentActions';\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDocumentStatus } from '../../pages/EditView/EditViewPage';\nimport { usePreviewContext } from '../pages/Preview';\n\nimport type { ContentManagerPlugin, DocumentActionProps } from '../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * ClosePreviewButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst ClosePreviewButton = () => {\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n  const { formatMessage } = useIntl();\n\n  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);\n  const goBack = useHistory('BackButton', (state) => state.goBack);\n  const history = useHistory('BackButton', (state) => state.history);\n  const locationIndex = useHistory('BackButton', (state) => state.currentLocationIndex);\n\n  /**\n   * Get the link destination from the history.\n   * Rely on a fallback (the parent edit view page) if there's no page to go back .\n   */\n  const historyTo = canGoBack ? history.at(locationIndex - 2) : undefined;\n  const fallback = {\n    pathname: '..',\n    search: stringify(query, { encode: false }),\n  } satisfies To;\n  const toWithFallback = historyTo ?? fallback;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (canGoBack) {\n      // Prevent normal link behavior, go back in the history stack instead\n      e.preventDefault();\n      goBack();\n      return;\n    }\n\n    // Otherwise rely on native link behavior to go back to the edit view. We don't use navigate()\n    // here in order to get the relative=\"path\" functionality from the Link component.\n  };\n\n  return (\n    <IconButton\n      variant=\"ghost\"\n      tag={Link}\n      relative=\"path\"\n      to={toWithFallback}\n      onClick={handleClick}\n      label={formatMessage({\n        id: 'content-manager.preview.header.close',\n        defaultMessage: 'Close preview',\n      })}\n    >\n      <Cross />\n    </IconButton>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Status\n * -----------------------------------------------------------------------------------------------*/\n\nconst Status = () => {\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;\n\n  if (!hasDraftAndPublished) {\n    return null;\n  }\n\n  const status = getDocumentStatus(document, meta);\n\n  return <DocumentStatus status={status} size=\"XS\" />;\n};\n\nconst PreviewTabs = () => {\n  const { formatMessage } = useIntl();\n\n  // URL query params\n  const [{ query }, setQuery] = useQueryParams<{ status: 'draft' | 'published' }>();\n\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;\n  const documentStatus = getDocumentStatus(document, meta);\n\n  const handleTabChange = (status: string) => {\n    if (status === 'published' || status === 'draft') {\n      setQuery({ status }, 'push', true);\n    }\n  };\n\n  if (!hasDraftAndPublish) {\n    return null;\n  }\n\n  return (\n    <Tabs.Root variant=\"simple\" value={query.status || 'draft'} onValueChange={handleTabChange}>\n      <Tabs.List\n        aria-label={formatMessage({\n          id: 'preview.tabs.label',\n          defaultMessage: 'Document status',\n        })}\n      >\n        <StatusTab value=\"draft\">\n          {formatMessage({\n            id: 'content-manager.containers.List.draft',\n            defaultMessage: 'draft',\n          })}\n        </StatusTab>\n        <StatusTab value=\"published\" disabled={documentStatus === 'draft'}>\n          {formatMessage({\n            id: 'content-manager.containers.List.published',\n            defaultMessage: 'published',\n          })}\n        </StatusTab>\n      </Tabs.List>\n    </Tabs.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewHeader = () => {\n  const title = usePreviewContext('PreviewHeader', (state) => state.title);\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const onPreview = usePreviewContext('PreviewHeader', (state) => state.onPreview);\n  const plugins = useStrapiApp('PreviewHeader', (state) => state.plugins);\n\n  const [{ query }] = useQueryParams<{\n    status?: 'draft' | 'published';\n  }>();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { copy } = useClipboard();\n\n  const handleCopyLink = () => {\n    copy(window.location.href);\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.preview.copy.success',\n        defaultMessage: 'Copied preview link',\n      }),\n      type: 'success',\n    });\n  };\n\n  const hasDraftAndPublish = schema.options?.draftAndPublish ?? false;\n  const documentActionProps = {\n    activeTab: query.status ?? null,\n    collectionType: schema.kind === 'collectionType' ? 'collection-types' : 'single-types',\n    model: schema.uid,\n    documentId: schema.kind === 'collectionType' ? document.documentId : undefined,\n    document,\n    meta,\n  } satisfies DocumentActionProps;\n\n  return (\n    <Flex height=\"48px\" gap={4} background=\"neutral0\" borderColor=\"neutral150\" tag=\"header\">\n      {/* Title and status */}\n      <TitleContainer height=\"100%\" paddingLeft={2} paddingRight={4}>\n        <ClosePreviewButton />\n        <PreviewTitle\n          tag=\"h1\"\n          title={title}\n          maxWidth=\"200px\"\n          fontSize={2}\n          paddingLeft={2}\n          paddingRight={3}\n          fontWeight={600}\n        >\n          {title}\n        </PreviewTitle>\n        <Status />\n      </TitleContainer>\n\n      {/* Tabs and actions */}\n      <Flex\n        flex={1}\n        paddingRight={2}\n        gap={2}\n        justifyContent={hasDraftAndPublish ? 'space-between' : 'flex-end'}\n      >\n        <Flex flex=\"1 1 70%\">\n          <PreviewTabs />\n        </Flex>\n        <Flex gap={2}>\n          <IconButton\n            type=\"button\"\n            label={formatMessage({\n              id: 'preview.copy.label',\n              defaultMessage: 'Copy preview link',\n            })}\n            onClick={handleCopyLink}\n          >\n            <LinkIcon />\n          </IconButton>\n          <InjectionZone area=\"preview.actions\" />\n          <DescriptionComponentRenderer\n            props={documentActionProps}\n            descriptions={(\n              plugins['content-manager'].apis as ContentManagerPlugin['config']['apis']\n            ).getDocumentActions('preview')}\n          >\n            {(actions) => {\n              const filteredActions = actions.filter((action) =>\n                [action.position].flat().includes('preview')\n              );\n              const [primaryAction, secondaryAction] = filteredActions;\n\n              if (!primaryAction && !secondaryAction) return null;\n\n              // Both actions are available when draft and publish enabled\n              if (primaryAction && secondaryAction) {\n                return (\n                  <>\n                    {/* Save */}\n                    <DocumentActionButton\n                      {...secondaryAction}\n                      variant={secondaryAction.variant || 'secondary'}\n                    />\n                    {/* Publish */}\n                    <DocumentActionButton\n                      {...primaryAction}\n                      variant={primaryAction.variant || 'default'}\n                    />\n                  </>\n                );\n              }\n\n              // Otherwise we just have the save action\n              return (\n                <DocumentActionButton\n                  {...primaryAction}\n                  variant={primaryAction.variant || 'secondary'}\n                />\n              );\n            }}\n          </DescriptionComponentRenderer>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst PreviewTitle = styled(Typography)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst StatusTab = styled(Tabs.Trigger)`\n  text-transform: uppercase;\n`;\n\nconst TitleContainer = styled(Flex)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nexport { PreviewHeader };\n"],"names":["ClosePreviewButton","query","useQueryParams","formatMessage","useIntl","canGoBack","useHistory","state","goBack","history","locationIndex","currentLocationIndex","historyTo","at","undefined","fallback","pathname","search","stringify","encode","toWithFallback","handleClick","e","preventDefault","_jsx","IconButton","variant","tag","Link","relative","to","onClick","label","id","defaultMessage","Cross","Status","document","usePreviewContext","schema","meta","hasDraftAndPublished","options","draftAndPublish","status","getDocumentStatus","DocumentStatus","size","PreviewTabs","setQuery","hasDraftAndPublish","documentStatus","handleTabChange","Tabs","Root","value","onValueChange","_jsxs","List","aria-label","StatusTab","disabled","PreviewHeader","title","onPreview","plugins","useStrapiApp","toggleNotification","useNotification","copy","useClipboard","handleCopyLink","window","location","href","message","type","documentActionProps","activeTab","collectionType","kind","model","uid","documentId","Flex","height","gap","background","borderColor","TitleContainer","paddingLeft","paddingRight","PreviewTitle","maxWidth","fontSize","fontWeight","flex","justifyContent","LinkIcon","InjectionZone","area","DescriptionComponentRenderer","props","descriptions","apis","getDocumentActions","actions","filteredActions","filter","action","position","flat","includes","primaryAction","secondaryAction","_Fragment","DocumentActionButton","styled","Typography","Trigger","theme","colors","neutral150"],"mappings":";;;;;;;;;;;;;;;AAyBA;;AAEkG,qGAElG,MAAMA,kBAAqB,GAAA,IAAA;AACzB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IAGpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,YAAYC,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMF,SAAS,CAAA;AACrE,IAAA,MAAMG,SAASF,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMC,MAAM,CAAA;AAC/D,IAAA,MAAMC,UAAUH,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAME,OAAO,CAAA;AACjE,IAAA,MAAMC,gBAAgBJ,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMI,oBAAoB,CAAA;AAEpF;;;AAGC,MACD,MAAMC,SAAYP,GAAAA,SAAAA,GAAYI,QAAQI,EAAE,CAACH,gBAAgB,CAAKI,CAAAA,GAAAA,SAAAA;AAC9D,IAAA,MAAMC,QAAW,GAAA;QACfC,QAAU,EAAA,IAAA;AACVC,QAAAA,MAAAA,EAAQC,UAAUjB,KAAO,EAAA;YAAEkB,MAAQ,EAAA;AAAM,SAAA;AAC3C,KAAA;AACA,IAAA,MAAMC,iBAAiBR,SAAaG,IAAAA,QAAAA;AAEpC,IAAA,MAAMM,cAAc,CAACC,CAAAA,GAAAA;AACnB,QAAA,IAAIjB,SAAW,EAAA;;AAEbiB,YAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBf,YAAAA,MAAAA,EAAAA;AACA,YAAA;AACF;;;AAIF,KAAA;AAEA,IAAA,qBACEgB,GAACC,CAAAA,UAAAA,EAAAA;QACCC,OAAQ,EAAA,OAAA;QACRC,GAAKC,EAAAA,MAAAA;QACLC,QAAS,EAAA,MAAA;QACTC,EAAIV,EAAAA,cAAAA;QACJW,OAASV,EAAAA,WAAAA;AACTW,QAAAA,KAAAA,EAAO7B,aAAc,CAAA;YACnB8B,EAAI,EAAA,sCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA,CAAA;AAEA,QAAA,QAAA,gBAAAV,GAACW,CAAAA,KAAAA,EAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,qGAElG,MAAMC,MAAS,GAAA,IAAA;;AAEb,IAAA,MAAMC,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;IACrE,MAAMC,oBAAAA,GAAuBF,MAAQG,EAAAA,OAAAA,EAASC,eAAmB,IAAA,KAAA;AAEjE,IAAA,IAAI,CAACF,oBAAsB,EAAA;QACzB,OAAO,IAAA;AACT;IAEA,MAAMG,MAAAA,GAASC,kBAAkBR,QAAUG,EAAAA,IAAAA,CAAAA;AAE3C,IAAA,qBAAOhB,GAACsB,CAAAA,cAAAA,EAAAA;QAAeF,MAAQA,EAAAA,MAAAA;QAAQG,IAAK,EAAA;;AAC9C,CAAA;AAEA,MAAMC,WAAc,GAAA,IAAA;IAClB,MAAM,EAAE7C,aAAa,EAAE,GAAGC,OAAAA,EAAAA;;AAG1B,IAAA,MAAM,CAAC,EAAEH,KAAK,EAAE,EAAEgD,SAAS,GAAG/C,cAAAA,EAAAA;;AAG9B,IAAA,MAAMmC,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;IACrE,MAAMU,kBAAAA,GAAqBX,MAAQG,EAAAA,OAAAA,EAASC,eAAmB,IAAA,KAAA;IAC/D,MAAMQ,cAAAA,GAAiBN,kBAAkBR,QAAUG,EAAAA,IAAAA,CAAAA;AAEnD,IAAA,MAAMY,kBAAkB,CAACR,MAAAA,GAAAA;QACvB,IAAIA,MAAAA,KAAW,WAAeA,IAAAA,MAAAA,KAAW,OAAS,EAAA;YAChDK,QAAS,CAAA;AAAEL,gBAAAA;AAAO,aAAA,EAAG,MAAQ,EAAA,IAAA,CAAA;AAC/B;AACF,KAAA;AAEA,IAAA,IAAI,CAACM,kBAAoB,EAAA;QACvB,OAAO,IAAA;AACT;IAEA,qBACE1B,GAAA,CAAC6B,KAAKC,IAAI,EAAA;QAAC5B,OAAQ,EAAA,QAAA;QAAS6B,KAAOtD,EAAAA,KAAAA,CAAM2C,MAAM,IAAI,OAAA;QAASY,aAAeJ,EAAAA,eAAAA;gCACzEK,IAAA,CAACJ,KAAKK,IAAI,EAAA;AACRC,YAAAA,YAAAA,EAAYxD,aAAc,CAAA;gBACxB8B,EAAI,EAAA,oBAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;;8BAEAV,GAACoC,CAAAA,SAAAA,EAAAA;oBAAUL,KAAM,EAAA,OAAA;8BACdpD,aAAc,CAAA;wBACb8B,EAAI,EAAA,uCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;8BAEFV,GAACoC,CAAAA,SAAAA,EAAAA;oBAAUL,KAAM,EAAA,WAAA;AAAYM,oBAAAA,QAAAA,EAAUV,cAAmB,KAAA,OAAA;8BACvDhD,aAAc,CAAA;wBACb8B,EAAI,EAAA,2CAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV,CAAA;AAEA;;AAEkG,2GAE5F4B,aAAgB,GAAA,IAAA;AACpB,IAAA,MAAMC,QAAQzB,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMwD,KAAK,CAAA;AACvE,IAAA,MAAM1B,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;AACrE,IAAkBF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMyD,SAAS;AAC/E,IAAA,MAAMC,UAAUC,YAAa,CAAA,eAAA,EAAiB,CAAC3D,KAAAA,GAAUA,MAAM0D,OAAO,CAAA;AAEtE,IAAA,MAAM,CAAC,EAAEhE,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IAGpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAE+D,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;IAC/B,MAAM,EAAEC,IAAI,EAAE,GAAGC,YAAAA,EAAAA;AAEjB,IAAA,MAAMC,cAAiB,GAAA,IAAA;QACrBF,IAAKG,CAAAA,MAAAA,CAAOC,QAAQ,CAACC,IAAI,CAAA;QACzBP,kBAAmB,CAAA;AACjBQ,YAAAA,OAAAA,EAASxE,aAAc,CAAA;gBACrB8B,EAAI,EAAA,sCAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACA0C,IAAM,EAAA;AACR,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,MAAM1B,kBAAqBX,GAAAA,MAAAA,CAAOG,OAAO,EAAEC,eAAmB,IAAA,KAAA;AAC9D,IAAA,MAAMkC,mBAAsB,GAAA;QAC1BC,SAAW7E,EAAAA,KAAAA,CAAM2C,MAAM,IAAI,IAAA;AAC3BmC,QAAAA,cAAAA,EAAgBxC,MAAOyC,CAAAA,IAAI,KAAK,gBAAA,GAAmB,kBAAqB,GAAA,cAAA;AACxEC,QAAAA,KAAAA,EAAO1C,OAAO2C,GAAG;AACjBC,QAAAA,UAAAA,EAAY5C,OAAOyC,IAAI,KAAK,gBAAmB3C,GAAAA,QAAAA,CAAS8C,UAAU,GAAGrE,SAAAA;AACrEuB,QAAAA,QAAAA;AACAG,QAAAA;AACF,KAAA;AAEA,IAAA,qBACEiB,IAAC2B,CAAAA,IAAAA,EAAAA;QAAKC,MAAO,EAAA,MAAA;QAAOC,GAAK,EAAA,CAAA;QAAGC,UAAW,EAAA,UAAA;QAAWC,WAAY,EAAA,YAAA;QAAa7D,GAAI,EAAA,QAAA;;0BAE7E8B,IAACgC,CAAAA,cAAAA,EAAAA;gBAAeJ,MAAO,EAAA,MAAA;gBAAOK,WAAa,EAAA,CAAA;gBAAGC,YAAc,EAAA,CAAA;;kCAC1DnE,GAACxB,CAAAA,kBAAAA,EAAAA,EAAAA,CAAAA;kCACDwB,GAACoE,CAAAA,YAAAA,EAAAA;wBACCjE,GAAI,EAAA,IAAA;wBACJoC,KAAOA,EAAAA,KAAAA;wBACP8B,QAAS,EAAA,OAAA;wBACTC,QAAU,EAAA,CAAA;wBACVJ,WAAa,EAAA,CAAA;wBACbC,YAAc,EAAA,CAAA;wBACdI,UAAY,EAAA,GAAA;AAEXhC,wBAAAA,QAAAA,EAAAA;;kCAEHvC,GAACY,CAAAA,MAAAA,EAAAA,EAAAA;;;0BAIHqB,IAAC2B,CAAAA,IAAAA,EAAAA;gBACCY,IAAM,EAAA,CAAA;gBACNL,YAAc,EAAA,CAAA;gBACdL,GAAK,EAAA,CAAA;AACLW,gBAAAA,cAAAA,EAAgB/C,qBAAqB,eAAkB,GAAA,UAAA;;kCAEvD1B,GAAC4D,CAAAA,IAAAA,EAAAA;wBAAKY,IAAK,EAAA,SAAA;AACT,wBAAA,QAAA,gBAAAxE,GAACwB,CAAAA,WAAAA,EAAAA,EAAAA;;kCAEHS,IAAC2B,CAAAA,IAAAA,EAAAA;wBAAKE,GAAK,EAAA,CAAA;;0CACT9D,GAACC,CAAAA,UAAAA,EAAAA;gCACCmD,IAAK,EAAA,QAAA;AACL5C,gCAAAA,KAAAA,EAAO7B,aAAc,CAAA;oCACnB8B,EAAI,EAAA,oBAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAH,OAASwC,EAAAA,cAAAA;AAET,gCAAA,QAAA,gBAAA/C,GAAC0E,CAAAA,IAAAA,EAAAA,EAAAA;;0CAEH1E,GAAC2E,CAAAA,aAAAA,EAAAA;gCAAcC,IAAK,EAAA;;0CACpB5E,GAAC6E,CAAAA,4BAAAA,EAAAA;gCACCC,KAAOzB,EAAAA,mBAAAA;gCACP0B,YAAc,EACZtC,OAAO,CAAC,iBAAA,CAAkB,CAACuC,IAAI,CAC/BC,kBAAkB,CAAC,SAAA,CAAA;0CAEpB,CAACC,OAAAA,GAAAA;AACA,oCAAA,MAAMC,eAAkBD,GAAAA,OAAAA,CAAQE,MAAM,CAAC,CAACC,MACtC,GAAA;AAACA,4CAAAA,MAAAA,CAAOC;yCAAS,CAACC,IAAI,EAAGC,CAAAA,QAAQ,CAAC,SAAA,CAAA,CAAA;oCAEpC,MAAM,CAACC,aAAeC,EAAAA,eAAAA,CAAgB,GAAGP,eAAAA;AAEzC,oCAAA,IAAI,CAACM,aAAAA,IAAiB,CAACC,eAAAA,EAAiB,OAAO,IAAA;;AAG/C,oCAAA,IAAID,iBAAiBC,eAAiB,EAAA;wCACpC,qBACEzD,IAAA,CAAA0D,QAAA,EAAA;;8DAEE3F,GAAC4F,CAAAA,oBAAAA,EAAAA;AACE,oDAAA,GAAGF,eAAe;oDACnBxF,OAASwF,EAAAA,eAAAA,CAAgBxF,OAAO,IAAI;;8DAGtCF,GAAC4F,CAAAA,oBAAAA,EAAAA;AACE,oDAAA,GAAGH,aAAa;oDACjBvF,OAASuF,EAAAA,aAAAA,CAAcvF,OAAO,IAAI;;;;AAI1C;;AAGA,oCAAA,qBACEF,GAAC4F,CAAAA,oBAAAA,EAAAA;AACE,wCAAA,GAAGH,aAAa;wCACjBvF,OAASuF,EAAAA,aAAAA,CAAcvF,OAAO,IAAI;;AAGxC;;;;;;;;AAMZ;AAEA,MAAMkE,YAAAA,GAAeyB,MAAOC,CAAAA,UAAAA,CAAW;;;;AAIvC,CAAC;AAED,MAAM1D,SAAYyD,GAAAA,MAAAA,CAAOhE,IAAKkE,CAAAA,OAAO,CAAC;;AAEtC,CAAC;AAED,MAAM9B,cAAAA,GAAiB4B,MAAOjC,CAAAA,IAAAA,CAAK;0BACT,EAAE,CAAC,EAAEoC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACnE,CAAC;;;;"}
+{"version":3,"file":"PreviewHeader.mjs","sources":["../../../../admin/src/preview/components/PreviewHeader.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useClipboard,\n  useHistory,\n  useNotification,\n  useQueryParams,\n  useStrapiApp,\n} from '@strapi/admin/strapi-admin';\nimport { IconButton, Tabs, Typography, Flex } from '@strapi/design-system';\nimport { Cross, Link as LinkIcon } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { InjectionZone } from '../../components/InjectionZone';\nimport { DocumentActionButton } from '../../pages/EditView/components/DocumentActions';\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDocumentStatus } from '../../pages/EditView/EditViewPage';\nimport { usePreviewContext } from '../pages/Preview';\n\nimport type { ContentManagerPlugin, DocumentActionProps } from '../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * ClosePreviewButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst ClosePreviewButton = () => {\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n  const { formatMessage } = useIntl();\n\n  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);\n  const goBack = useHistory('BackButton', (state) => state.goBack);\n  const history = useHistory('BackButton', (state) => state.history);\n  const locationIndex = useHistory('BackButton', (state) => state.currentLocationIndex);\n\n  /**\n   * Get the link destination from the history.\n   * Rely on a fallback (the parent edit view page) if there's no page to go back .\n   */\n  const historyTo = canGoBack ? history.at(locationIndex - 2) : undefined;\n  const fallback = {\n    pathname: '..',\n    search: stringify(query, { encode: false }),\n  } satisfies To;\n  const toWithFallback = historyTo ?? fallback;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (canGoBack) {\n      // Prevent normal link behavior, go back in the history stack instead\n      e.preventDefault();\n      goBack();\n      return;\n    }\n\n    // Otherwise rely on native link behavior to go back to the edit view. We don't use navigate()\n    // here in order to get the relative=\"path\" functionality from the Link component.\n  };\n\n  return (\n    <IconButton\n      variant=\"ghost\"\n      tag={Link}\n      relative=\"path\"\n      to={toWithFallback}\n      onClick={handleClick}\n      label={formatMessage({\n        id: 'content-manager.preview.header.close',\n        defaultMessage: 'Close preview',\n      })}\n    >\n      <Cross />\n    </IconButton>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Status\n * -----------------------------------------------------------------------------------------------*/\n\nconst Status = () => {\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;\n\n  if (!hasDraftAndPublished) {\n    return null;\n  }\n\n  const status = getDocumentStatus(document, meta);\n\n  return <DocumentStatus status={status} size=\"XS\" />;\n};\n\nconst PreviewTabs = () => {\n  const { formatMessage } = useIntl();\n\n  // URL query params\n  const [{ query }, setQuery] = useQueryParams<{ status: 'draft' | 'published' }>();\n\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;\n  const documentStatus = getDocumentStatus(document, meta);\n\n  const handleTabChange = (status: string) => {\n    if (status === 'published' || status === 'draft') {\n      setQuery({ status }, 'push', true);\n    }\n  };\n\n  if (!hasDraftAndPublish) {\n    return null;\n  }\n\n  return (\n    <Tabs.Root variant=\"simple\" value={query.status || 'draft'} onValueChange={handleTabChange}>\n      <Tabs.List\n        aria-label={formatMessage({\n          id: 'preview.tabs.label',\n          defaultMessage: 'Document status',\n        })}\n      >\n        <StatusTab value=\"draft\">\n          {formatMessage({\n            id: 'content-manager.containers.List.draft',\n            defaultMessage: 'draft',\n          })}\n        </StatusTab>\n        <StatusTab value=\"published\" disabled={documentStatus === 'draft'}>\n          {formatMessage({\n            id: 'content-manager.containers.List.published',\n            defaultMessage: 'published',\n          })}\n        </StatusTab>\n      </Tabs.List>\n    </Tabs.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewHeader = () => {\n  const title = usePreviewContext('PreviewHeader', (state) => state.title);\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const plugins = useStrapiApp('PreviewHeader', (state) => state.plugins);\n\n  const [{ query }] = useQueryParams<{\n    status?: 'draft' | 'published';\n  }>();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { copy } = useClipboard();\n\n  const handleCopyLink = () => {\n    copy(window.location.href);\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.preview.copy.success',\n        defaultMessage: 'Copied preview link',\n      }),\n      type: 'success',\n    });\n  };\n\n  const hasDraftAndPublish = schema.options?.draftAndPublish ?? false;\n  const documentActionProps = {\n    activeTab: query.status ?? null,\n    collectionType: schema.kind === 'collectionType' ? 'collection-types' : 'single-types',\n    model: schema.uid,\n    documentId: schema.kind === 'collectionType' ? document.documentId : undefined,\n    document,\n    meta,\n  } satisfies DocumentActionProps;\n\n  return (\n    <Flex height=\"48px\" gap={4} background=\"neutral0\" borderColor=\"neutral150\" tag=\"header\">\n      {/* Title and status */}\n      <TitleContainer height=\"100%\" paddingLeft={2} paddingRight={4}>\n        <ClosePreviewButton />\n        <PreviewTitle\n          tag=\"h1\"\n          title={title}\n          maxWidth=\"200px\"\n          fontSize={2}\n          paddingLeft={2}\n          paddingRight={3}\n          fontWeight={600}\n        >\n          {title}\n        </PreviewTitle>\n        <Status />\n      </TitleContainer>\n\n      {/* Tabs and actions */}\n      <Flex\n        flex={1}\n        paddingRight={2}\n        gap={2}\n        justifyContent={hasDraftAndPublish ? 'space-between' : 'flex-end'}\n      >\n        <Flex flex=\"1 1 70%\">\n          <PreviewTabs />\n        </Flex>\n        <Flex gap={2}>\n          <IconButton\n            type=\"button\"\n            label={formatMessage({\n              id: 'preview.copy.label',\n              defaultMessage: 'Copy preview link',\n            })}\n            onClick={handleCopyLink}\n          >\n            <LinkIcon />\n          </IconButton>\n          <InjectionZone area=\"preview.actions\" />\n          <DescriptionComponentRenderer\n            props={documentActionProps}\n            descriptions={(\n              plugins['content-manager'].apis as ContentManagerPlugin['config']['apis']\n            ).getDocumentActions('preview')}\n          >\n            {(actions) => {\n              const filteredActions = actions.filter((action) =>\n                [action.position].flat().includes('preview')\n              );\n              const [primaryAction, secondaryAction] = filteredActions;\n\n              if (!primaryAction && !secondaryAction) return null;\n\n              // Both actions are available when draft and publish enabled\n              if (primaryAction && secondaryAction) {\n                return (\n                  <>\n                    {/* Save */}\n                    <DocumentActionButton\n                      {...secondaryAction}\n                      variant={secondaryAction.variant || 'secondary'}\n                    />\n                    {/* Publish */}\n                    <DocumentActionButton\n                      {...primaryAction}\n                      variant={primaryAction.variant || 'default'}\n                    />\n                  </>\n                );\n              }\n\n              // Otherwise we just have the save action\n              return (\n                <DocumentActionButton\n                  {...primaryAction}\n                  variant={primaryAction.variant || 'secondary'}\n                />\n              );\n            }}\n          </DescriptionComponentRenderer>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst PreviewTitle = styled(Typography)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst StatusTab = styled(Tabs.Trigger)`\n  text-transform: uppercase;\n`;\n\nconst TitleContainer = styled(Flex)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nexport { PreviewHeader };\n"],"names":["ClosePreviewButton","query","useQueryParams","formatMessage","useIntl","canGoBack","useHistory","state","goBack","history","locationIndex","currentLocationIndex","historyTo","at","undefined","fallback","pathname","search","stringify","encode","toWithFallback","handleClick","e","preventDefault","_jsx","IconButton","variant","tag","Link","relative","to","onClick","label","id","defaultMessage","Cross","Status","document","usePreviewContext","schema","meta","hasDraftAndPublished","options","draftAndPublish","status","getDocumentStatus","DocumentStatus","size","PreviewTabs","setQuery","hasDraftAndPublish","documentStatus","handleTabChange","Tabs","Root","value","onValueChange","_jsxs","List","aria-label","StatusTab","disabled","PreviewHeader","title","plugins","useStrapiApp","toggleNotification","useNotification","copy","useClipboard","handleCopyLink","window","location","href","message","type","documentActionProps","activeTab","collectionType","kind","model","uid","documentId","Flex","height","gap","background","borderColor","TitleContainer","paddingLeft","paddingRight","PreviewTitle","maxWidth","fontSize","fontWeight","flex","justifyContent","LinkIcon","InjectionZone","area","DescriptionComponentRenderer","props","descriptions","apis","getDocumentActions","actions","filteredActions","filter","action","position","flat","includes","primaryAction","secondaryAction","_Fragment","DocumentActionButton","styled","Typography","Trigger","theme","colors","neutral150"],"mappings":";;;;;;;;;;;;;;;AAyBA;;AAEkG,qGAElG,MAAMA,kBAAqB,GAAA,IAAA;AACzB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IAGpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,YAAYC,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMF,SAAS,CAAA;AACrE,IAAA,MAAMG,SAASF,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMC,MAAM,CAAA;AAC/D,IAAA,MAAMC,UAAUH,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAME,OAAO,CAAA;AACjE,IAAA,MAAMC,gBAAgBJ,UAAW,CAAA,YAAA,EAAc,CAACC,KAAAA,GAAUA,MAAMI,oBAAoB,CAAA;AAEpF;;;AAGC,MACD,MAAMC,SAAYP,GAAAA,SAAAA,GAAYI,QAAQI,EAAE,CAACH,gBAAgB,CAAKI,CAAAA,GAAAA,SAAAA;AAC9D,IAAA,MAAMC,QAAW,GAAA;QACfC,QAAU,EAAA,IAAA;AACVC,QAAAA,MAAAA,EAAQC,UAAUjB,KAAO,EAAA;YAAEkB,MAAQ,EAAA;AAAM,SAAA;AAC3C,KAAA;AACA,IAAA,MAAMC,iBAAiBR,SAAaG,IAAAA,QAAAA;AAEpC,IAAA,MAAMM,cAAc,CAACC,CAAAA,GAAAA;AACnB,QAAA,IAAIjB,SAAW,EAAA;;AAEbiB,YAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBf,YAAAA,MAAAA,EAAAA;AACA,YAAA;AACF;;;AAIF,KAAA;AAEA,IAAA,qBACEgB,GAACC,CAAAA,UAAAA,EAAAA;QACCC,OAAQ,EAAA,OAAA;QACRC,GAAKC,EAAAA,MAAAA;QACLC,QAAS,EAAA,MAAA;QACTC,EAAIV,EAAAA,cAAAA;QACJW,OAASV,EAAAA,WAAAA;AACTW,QAAAA,KAAAA,EAAO7B,aAAc,CAAA;YACnB8B,EAAI,EAAA,sCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA,CAAA;AAEA,QAAA,QAAA,gBAAAV,GAACW,CAAAA,KAAAA,EAAAA,EAAAA;;AAGP,CAAA;AAEA;;AAEkG,qGAElG,MAAMC,MAAS,GAAA,IAAA;;AAEb,IAAA,MAAMC,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;IACrE,MAAMC,oBAAAA,GAAuBF,MAAQG,EAAAA,OAAAA,EAASC,eAAmB,IAAA,KAAA;AAEjE,IAAA,IAAI,CAACF,oBAAsB,EAAA;QACzB,OAAO,IAAA;AACT;IAEA,MAAMG,MAAAA,GAASC,kBAAkBR,QAAUG,EAAAA,IAAAA,CAAAA;AAE3C,IAAA,qBAAOhB,GAACsB,CAAAA,cAAAA,EAAAA;QAAeF,MAAQA,EAAAA,MAAAA;QAAQG,IAAK,EAAA;;AAC9C,CAAA;AAEA,MAAMC,WAAc,GAAA,IAAA;IAClB,MAAM,EAAE7C,aAAa,EAAE,GAAGC,OAAAA,EAAAA;;AAG1B,IAAA,MAAM,CAAC,EAAEH,KAAK,EAAE,EAAEgD,SAAS,GAAG/C,cAAAA,EAAAA;;AAG9B,IAAA,MAAMmC,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;IACrE,MAAMU,kBAAAA,GAAqBX,MAAQG,EAAAA,OAAAA,EAASC,eAAmB,IAAA,KAAA;IAC/D,MAAMQ,cAAAA,GAAiBN,kBAAkBR,QAAUG,EAAAA,IAAAA,CAAAA;AAEnD,IAAA,MAAMY,kBAAkB,CAACR,MAAAA,GAAAA;QACvB,IAAIA,MAAAA,KAAW,WAAeA,IAAAA,MAAAA,KAAW,OAAS,EAAA;YAChDK,QAAS,CAAA;AAAEL,gBAAAA;AAAO,aAAA,EAAG,MAAQ,EAAA,IAAA,CAAA;AAC/B;AACF,KAAA;AAEA,IAAA,IAAI,CAACM,kBAAoB,EAAA;QACvB,OAAO,IAAA;AACT;IAEA,qBACE1B,GAAA,CAAC6B,KAAKC,IAAI,EAAA;QAAC5B,OAAQ,EAAA,QAAA;QAAS6B,KAAOtD,EAAAA,KAAAA,CAAM2C,MAAM,IAAI,OAAA;QAASY,aAAeJ,EAAAA,eAAAA;gCACzEK,IAAA,CAACJ,KAAKK,IAAI,EAAA;AACRC,YAAAA,YAAAA,EAAYxD,aAAc,CAAA;gBACxB8B,EAAI,EAAA,oBAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;;8BAEAV,GAACoC,CAAAA,SAAAA,EAAAA;oBAAUL,KAAM,EAAA,OAAA;8BACdpD,aAAc,CAAA;wBACb8B,EAAI,EAAA,uCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;8BAEFV,GAACoC,CAAAA,SAAAA,EAAAA;oBAAUL,KAAM,EAAA,WAAA;AAAYM,oBAAAA,QAAAA,EAAUV,cAAmB,KAAA,OAAA;8BACvDhD,aAAc,CAAA;wBACb8B,EAAI,EAAA,2CAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV,CAAA;AAEA;;AAEkG,2GAE5F4B,aAAgB,GAAA,IAAA;AACpB,IAAA,MAAMC,QAAQzB,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMwD,KAAK,CAAA;AACvE,IAAA,MAAM1B,WAAWC,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAM8B,QAAQ,CAAA;AAC7E,IAAA,MAAME,SAASD,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMgC,MAAM,CAAA;AACzE,IAAA,MAAMC,OAAOF,iBAAkB,CAAA,eAAA,EAAiB,CAAC/B,KAAAA,GAAUA,MAAMiC,IAAI,CAAA;AACrE,IAAA,MAAMwB,UAAUC,YAAa,CAAA,eAAA,EAAiB,CAAC1D,KAAAA,GAAUA,MAAMyD,OAAO,CAAA;AAEtE,IAAA,MAAM,CAAC,EAAE/D,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IAGpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAE8D,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;IAC/B,MAAM,EAAEC,IAAI,EAAE,GAAGC,YAAAA,EAAAA;AAEjB,IAAA,MAAMC,cAAiB,GAAA,IAAA;QACrBF,IAAKG,CAAAA,MAAAA,CAAOC,QAAQ,CAACC,IAAI,CAAA;QACzBP,kBAAmB,CAAA;AACjBQ,YAAAA,OAAAA,EAASvE,aAAc,CAAA;gBACrB8B,EAAI,EAAA,sCAAA;gBACJC,cAAgB,EAAA;AAClB,aAAA,CAAA;YACAyC,IAAM,EAAA;AACR,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,MAAMzB,kBAAqBX,GAAAA,MAAAA,CAAOG,OAAO,EAAEC,eAAmB,IAAA,KAAA;AAC9D,IAAA,MAAMiC,mBAAsB,GAAA;QAC1BC,SAAW5E,EAAAA,KAAAA,CAAM2C,MAAM,IAAI,IAAA;AAC3BkC,QAAAA,cAAAA,EAAgBvC,MAAOwC,CAAAA,IAAI,KAAK,gBAAA,GAAmB,kBAAqB,GAAA,cAAA;AACxEC,QAAAA,KAAAA,EAAOzC,OAAO0C,GAAG;AACjBC,QAAAA,UAAAA,EAAY3C,OAAOwC,IAAI,KAAK,gBAAmB1C,GAAAA,QAAAA,CAAS6C,UAAU,GAAGpE,SAAAA;AACrEuB,QAAAA,QAAAA;AACAG,QAAAA;AACF,KAAA;AAEA,IAAA,qBACEiB,IAAC0B,CAAAA,IAAAA,EAAAA;QAAKC,MAAO,EAAA,MAAA;QAAOC,GAAK,EAAA,CAAA;QAAGC,UAAW,EAAA,UAAA;QAAWC,WAAY,EAAA,YAAA;QAAa5D,GAAI,EAAA,QAAA;;0BAE7E8B,IAAC+B,CAAAA,cAAAA,EAAAA;gBAAeJ,MAAO,EAAA,MAAA;gBAAOK,WAAa,EAAA,CAAA;gBAAGC,YAAc,EAAA,CAAA;;kCAC1DlE,GAACxB,CAAAA,kBAAAA,EAAAA,EAAAA,CAAAA;kCACDwB,GAACmE,CAAAA,YAAAA,EAAAA;wBACChE,GAAI,EAAA,IAAA;wBACJoC,KAAOA,EAAAA,KAAAA;wBACP6B,QAAS,EAAA,OAAA;wBACTC,QAAU,EAAA,CAAA;wBACVJ,WAAa,EAAA,CAAA;wBACbC,YAAc,EAAA,CAAA;wBACdI,UAAY,EAAA,GAAA;AAEX/B,wBAAAA,QAAAA,EAAAA;;kCAEHvC,GAACY,CAAAA,MAAAA,EAAAA,EAAAA;;;0BAIHqB,IAAC0B,CAAAA,IAAAA,EAAAA;gBACCY,IAAM,EAAA,CAAA;gBACNL,YAAc,EAAA,CAAA;gBACdL,GAAK,EAAA,CAAA;AACLW,gBAAAA,cAAAA,EAAgB9C,qBAAqB,eAAkB,GAAA,UAAA;;kCAEvD1B,GAAC2D,CAAAA,IAAAA,EAAAA;wBAAKY,IAAK,EAAA,SAAA;AACT,wBAAA,QAAA,gBAAAvE,GAACwB,CAAAA,WAAAA,EAAAA,EAAAA;;kCAEHS,IAAC0B,CAAAA,IAAAA,EAAAA;wBAAKE,GAAK,EAAA,CAAA;;0CACT7D,GAACC,CAAAA,UAAAA,EAAAA;gCACCkD,IAAK,EAAA,QAAA;AACL3C,gCAAAA,KAAAA,EAAO7B,aAAc,CAAA;oCACnB8B,EAAI,EAAA,oBAAA;oCACJC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAH,OAASuC,EAAAA,cAAAA;AAET,gCAAA,QAAA,gBAAA9C,GAACyE,CAAAA,IAAAA,EAAAA,EAAAA;;0CAEHzE,GAAC0E,CAAAA,aAAAA,EAAAA;gCAAcC,IAAK,EAAA;;0CACpB3E,GAAC4E,CAAAA,4BAAAA,EAAAA;gCACCC,KAAOzB,EAAAA,mBAAAA;gCACP0B,YAAc,EACZtC,OAAO,CAAC,iBAAA,CAAkB,CAACuC,IAAI,CAC/BC,kBAAkB,CAAC,SAAA,CAAA;0CAEpB,CAACC,OAAAA,GAAAA;AACA,oCAAA,MAAMC,eAAkBD,GAAAA,OAAAA,CAAQE,MAAM,CAAC,CAACC,MACtC,GAAA;AAACA,4CAAAA,MAAAA,CAAOC;yCAAS,CAACC,IAAI,EAAGC,CAAAA,QAAQ,CAAC,SAAA,CAAA,CAAA;oCAEpC,MAAM,CAACC,aAAeC,EAAAA,eAAAA,CAAgB,GAAGP,eAAAA;AAEzC,oCAAA,IAAI,CAACM,aAAAA,IAAiB,CAACC,eAAAA,EAAiB,OAAO,IAAA;;AAG/C,oCAAA,IAAID,iBAAiBC,eAAiB,EAAA;wCACpC,qBACExD,IAAA,CAAAyD,QAAA,EAAA;;8DAEE1F,GAAC2F,CAAAA,oBAAAA,EAAAA;AACE,oDAAA,GAAGF,eAAe;oDACnBvF,OAASuF,EAAAA,eAAAA,CAAgBvF,OAAO,IAAI;;8DAGtCF,GAAC2F,CAAAA,oBAAAA,EAAAA;AACE,oDAAA,GAAGH,aAAa;oDACjBtF,OAASsF,EAAAA,aAAAA,CAActF,OAAO,IAAI;;;;AAI1C;;AAGA,oCAAA,qBACEF,GAAC2F,CAAAA,oBAAAA,EAAAA;AACE,wCAAA,GAAGH,aAAa;wCACjBtF,OAASsF,EAAAA,aAAAA,CAActF,OAAO,IAAI;;AAGxC;;;;;;;;AAMZ;AAEA,MAAMiE,YAAAA,GAAeyB,MAAOC,CAAAA,UAAAA,CAAW;;;;AAIvC,CAAC;AAED,MAAMzD,SAAYwD,GAAAA,MAAAA,CAAO/D,IAAKiE,CAAAA,OAAO,CAAC;;AAEtC,CAAC;AAED,MAAM9B,cAAAA,GAAiB4B,MAAOjC,CAAAA,IAAAA,CAAK;0BACT,EAAE,CAAC,EAAEoC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACnE,CAAC;;;;"}

package/dist/admin/preview/hooks/usePreviewInputManager.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var InputPopover = require('../components/InputPopover.js');
+var Preview = require('../pages/Preview.js');
+var constants = require('../utils/constants.js');
+var getSendMessage = require('../utils/getSendMessage.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function usePreviewInputManager(name, attribute) {
+    const iframe = Preview.usePreviewContext('usePreviewInputManager', (state)=>state.iframeRef, false);
+    const setPopoverField = Preview.usePreviewContext('usePreviewInputManager', (state)=>state.setPopoverField, false);
+    const hasInputPopoverParent = InputPopover.useHasInputPopoverParent();
+    const { value } = strapiAdmin.useField(name);
+    const { type } = attribute;
+    React__namespace.useEffect(()=>{
+        if (!iframe || !type) {
+            return;
+        }
+        /**
+     * Only send message if the field is not a data structure (component, dynamic zone)
+     * because we already send events for their fields
+     */ if (![
+            'component',
+            'dynamiczone'
+        ].includes(type)) {
+            const sendMessage = getSendMessage.getSendMessage(iframe);
+            sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+                field: name,
+                value
+            });
+        }
+    }, [
+        name,
+        value,
+        iframe,
+        type
+    ]);
+    const sendMessage = getSendMessage.getSendMessage(iframe);
+    return {
+        onFocus: ()=>{
+            if (hasInputPopoverParent) return;
+            sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, {
+                field: name
+            });
+        },
+        onBlur: ()=>{
+            if (hasInputPopoverParent) return;
+            setPopoverField?.(null);
+            sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_BLUR, {
+                field: name
+            });
+        }
+    };
+}
+
+exports.usePreviewInputManager = usePreviewInputManager;
+//# sourceMappingURL=usePreviewInputManager.js.map

package/dist/admin/preview/hooks/usePreviewInputManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewInputManager.js","sources":["../../../../admin/src/preview/hooks/usePreviewInputManager.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useField } from '@strapi/admin/strapi-admin';\nimport { Schema } from '@strapi/types';\n\nimport { useHasInputPopoverParent } from '../components/InputPopover';\nimport { usePreviewContext } from '../pages/Preview';\nimport { INTERNAL_EVENTS } from '../utils/constants';\nimport { getSendMessage } from '../utils/getSendMessage';\n\ntype PreviewInputProps = Pick<\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\n  'onFocus' | 'onBlur'\n>;\n\nexport function usePreviewInputManager(\n  name: string,\n  attribute: Schema.Attribute.AnyAttribute\n): PreviewInputProps {\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\n  const setPopoverField = usePreviewContext(\n    'usePreviewInputManager',\n    (state) => state.setPopoverField,\n    false\n  );\n  const hasInputPopoverParent = useHasInputPopoverParent();\n  const { value } = useField(name);\n  const { type } = attribute;\n\n  React.useEffect(() => {\n    if (!iframe || !type) {\n      return;\n    }\n\n    /**\n     * Only send message if the field is not a data structure (component, dynamic zone)\n     * because we already send events for their fields\n     */\n    if (!['component', 'dynamiczone'].includes(type)) {\n      const sendMessage = getSendMessage(iframe);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n    }\n  }, [name, value, iframe, type]);\n\n  const sendMessage = getSendMessage(iframe);\n\n  return {\n    onFocus: () => {\n      if (hasInputPopoverParent) return;\n\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\n    },\n    onBlur: () => {\n      if (hasInputPopoverParent) return;\n\n      setPopoverField?.(null);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\n    },\n  };\n}\n"],"names":["usePreviewInputManager","name","attribute","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","type","React","useEffect","includes","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,SAASA,sBAAAA,CACdC,IAAY,EACZC,SAAwC,EAAA;AAExC,IAAA,MAAMC,SAASC,yBAAkB,CAAA,wBAAA,EAA0B,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,yBACtB,CAAA,wBAAA,EACA,CAACC,KAAUA,GAAAA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAwBC,GAAAA,qCAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAASV,CAAAA,IAAAA,CAAAA;IAC3B,MAAM,EAAEW,IAAI,EAAE,GAAGV,SAAAA;AAEjBW,IAAAA,gBAAAA,CAAMC,SAAS,CAAC,IAAA;QACd,IAAI,CAACX,MAAU,IAAA,CAACS,IAAM,EAAA;AACpB,YAAA;AACF;AAEA;;;AAGC,QACD,IAAI,CAAC;AAAC,YAAA,WAAA;AAAa,YAAA;SAAc,CAACG,QAAQ,CAACH,IAAO,CAAA,EAAA;AAChD,YAAA,MAAMI,cAAcC,6BAAed,CAAAA,MAAAA,CAAAA;YACnCa,WAAYE,CAAAA,yBAAAA,CAAgBC,mBAAmB,EAAE;gBAAEC,KAAOnB,EAAAA,IAAAA;AAAMS,gBAAAA;AAAM,aAAA,CAAA;AACxE;KACC,EAAA;AAACT,QAAAA,IAAAA;AAAMS,QAAAA,KAAAA;AAAOP,QAAAA,MAAAA;AAAQS,QAAAA;AAAK,KAAA,CAAA;AAE9B,IAAA,MAAMI,cAAcC,6BAAed,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLkB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIb,qBAAuB,EAAA;YAE3BQ,WAAYE,CAAAA,yBAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOnB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAsB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIf,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBS,WAAYE,CAAAA,yBAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOnB,EAAAA;AAAK,aAAA,CAAA;AAC/D;AACF,KAAA;AACF;;;;"}

package/dist/admin/preview/hooks/usePreviewInputManager.mjs

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useField } from '@strapi/admin/strapi-admin';
+import { useHasInputPopoverParent } from '../components/InputPopover.mjs';
+import { usePreviewContext } from '../pages/Preview.mjs';
+import { INTERNAL_EVENTS } from '../utils/constants.mjs';
+import { getSendMessage } from '../utils/getSendMessage.mjs';
+
+function usePreviewInputManager(name, attribute) {
+    const iframe = usePreviewContext('usePreviewInputManager', (state)=>state.iframeRef, false);
+    const setPopoverField = usePreviewContext('usePreviewInputManager', (state)=>state.setPopoverField, false);
+    const hasInputPopoverParent = useHasInputPopoverParent();
+    const { value } = useField(name);
+    const { type } = attribute;
+    React.useEffect(()=>{
+        if (!iframe || !type) {
+            return;
+        }
+        /**
+     * Only send message if the field is not a data structure (component, dynamic zone)
+     * because we already send events for their fields
+     */ if (![
+            'component',
+            'dynamiczone'
+        ].includes(type)) {
+            const sendMessage = getSendMessage(iframe);
+            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+                field: name,
+                value
+            });
+        }
+    }, [
+        name,
+        value,
+        iframe,
+        type
+    ]);
+    const sendMessage = getSendMessage(iframe);
+    return {
+        onFocus: ()=>{
+            if (hasInputPopoverParent) return;
+            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, {
+                field: name
+            });
+        },
+        onBlur: ()=>{
+            if (hasInputPopoverParent) return;
+            setPopoverField?.(null);
+            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, {
+                field: name
+            });
+        }
+    };
+}
+
+export { usePreviewInputManager };
+//# sourceMappingURL=usePreviewInputManager.mjs.map

package/dist/admin/preview/hooks/usePreviewInputManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewInputManager.mjs","sources":["../../../../admin/src/preview/hooks/usePreviewInputManager.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { useField } from '@strapi/admin/strapi-admin';\nimport { Schema } from '@strapi/types';\n\nimport { useHasInputPopoverParent } from '../components/InputPopover';\nimport { usePreviewContext } from '../pages/Preview';\nimport { INTERNAL_EVENTS } from '../utils/constants';\nimport { getSendMessage } from '../utils/getSendMessage';\n\ntype PreviewInputProps = Pick<\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\n  'onFocus' | 'onBlur'\n>;\n\nexport function usePreviewInputManager(\n  name: string,\n  attribute: Schema.Attribute.AnyAttribute\n): PreviewInputProps {\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\n  const setPopoverField = usePreviewContext(\n    'usePreviewInputManager',\n    (state) => state.setPopoverField,\n    false\n  );\n  const hasInputPopoverParent = useHasInputPopoverParent();\n  const { value } = useField(name);\n  const { type } = attribute;\n\n  React.useEffect(() => {\n    if (!iframe || !type) {\n      return;\n    }\n\n    /**\n     * Only send message if the field is not a data structure (component, dynamic zone)\n     * because we already send events for their fields\n     */\n    if (!['component', 'dynamiczone'].includes(type)) {\n      const sendMessage = getSendMessage(iframe);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n    }\n  }, [name, value, iframe, type]);\n\n  const sendMessage = getSendMessage(iframe);\n\n  return {\n    onFocus: () => {\n      if (hasInputPopoverParent) return;\n\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\n    },\n    onBlur: () => {\n      if (hasInputPopoverParent) return;\n\n      setPopoverField?.(null);\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\n    },\n  };\n}\n"],"names":["usePreviewInputManager","name","attribute","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","type","React","useEffect","includes","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;AAeO,SAASA,sBAAAA,CACdC,IAAY,EACZC,SAAwC,EAAA;AAExC,IAAA,MAAMC,SAASC,iBAAkB,CAAA,wBAAA,EAA0B,CAACC,KAAUA,GAAAA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,iBACtB,CAAA,wBAAA,EACA,CAACC,KAAUA,GAAAA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAwBC,GAAAA,wBAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,QAASV,CAAAA,IAAAA,CAAAA;IAC3B,MAAM,EAAEW,IAAI,EAAE,GAAGV,SAAAA;AAEjBW,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;QACd,IAAI,CAACX,MAAU,IAAA,CAACS,IAAM,EAAA;AACpB,YAAA;AACF;AAEA;;;AAGC,QACD,IAAI,CAAC;AAAC,YAAA,WAAA;AAAa,YAAA;SAAc,CAACG,QAAQ,CAACH,IAAO,CAAA,EAAA;AAChD,YAAA,MAAMI,cAAcC,cAAed,CAAAA,MAAAA,CAAAA;YACnCa,WAAYE,CAAAA,eAAAA,CAAgBC,mBAAmB,EAAE;gBAAEC,KAAOnB,EAAAA,IAAAA;AAAMS,gBAAAA;AAAM,aAAA,CAAA;AACxE;KACC,EAAA;AAACT,QAAAA,IAAAA;AAAMS,QAAAA,KAAAA;AAAOP,QAAAA,MAAAA;AAAQS,QAAAA;AAAK,KAAA,CAAA;AAE9B,IAAA,MAAMI,cAAcC,cAAed,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLkB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIb,qBAAuB,EAAA;YAE3BQ,WAAYE,CAAAA,eAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOnB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAsB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIf,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBS,WAAYE,CAAAA,eAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOnB,EAAAA;AAAK,aAAA,CAAA;AAC/D;AACF,KAAA;AACF;;;;"}

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

@@ -12,12 +12,17 @@ var collections = require('../../constants/collections.js');
 var DocumentRBAC = require('../../features/DocumentRBAC.js');
 var useDocument = require('../../hooks/useDocument.js');
 var useDocumentLayout = require('../../hooks/useDocumentLayout.js');
+var Blocker = require('../../pages/EditView/components/Blocker.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 InputPopover = require('../components/InputPopover.js');
 var PreviewHeader = require('../components/PreviewHeader.js');
 var preview = require('../services/preview.js');
+var constants = require('../utils/constants.js');
+var getSendMessage = require('../utils/getSendMessage.js');
+var previewScript = require('../utils/previewScript.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -73,6 +78,8 @@ const PreviewPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const iframeRef = React__namespace.useRef(null);
     const [isSideEditorOpen, setIsSideEditorOpen] = React__namespace.useState(true);
+    const [popoverField, setPopoverField] = React__namespace.useState(null);
+    const { toggleNotification } = strapiAdmin.useNotification();
     // Read all the necessary data from the URL to find the right preview URL
     const { slug: model, id: documentId, collectionType } = reactRouterDom.useParams();
     const [{ query }] = strapiAdmin.useQueryParams();
@@ -81,6 +88,32 @@ const PreviewPage = ()=>{
     ]);
     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)=>{
+            // Only listen to events from the preview iframe
+            if (iframeRef.current) {
+                const previewOrigin = new URL(iframeRef.current?.src).origin;
+                if (event.origin !== previewOrigin) {
+                    return;
+                }
+            }
+            if (event.data?.type === constants.PUBLIC_EVENTS.PREVIEW_READY) {
+                const script = `(${previewScript.previewScript.toString()})()`;
+                const sendMessage = getSendMessage.getSendMessage(iframeRef);
+                sendMessage(constants.PUBLIC_EVENTS.STRAPI_SCRIPT, {
+                    script
+                });
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        documentId,
+        toggleNotification
+    ]);
     if (!collectionType) {
         throw new Error('Could not find collectionType in url params');
     }
@@ -159,8 +192,12 @@ const PreviewPage = ()=>{
                 title: documentTitle,
                 meta: documentResponse.meta,
                 schema: documentResponse.schema,
+                components: documentResponse.components,
                 layout: documentLayoutResponse.edit,
                 onPreview: onPreview,
+                iframeRef: iframeRef,
+                popoverField: popoverField,
+                setPopoverField: setPopoverField,
                 children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
                     method: "PUT",
                     disabled: query.status === 'published' && documentResponse && documentResponse.document.status !== 'draft',
@@ -182,108 +219,109 @@ const PreviewPage = ()=>{
                             abortEarly: false
                         });
                     },
-                    children: ({ resetForm })=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            direction: "column",
-                            height: "100%",
-                            alignItems: "stretch",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Blocker, {
-                                    onProceed: resetForm
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(PreviewHeader.PreviewHeader, {}),
-                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    flex: 1,
-                                    overflow: "auto",
-                                    alignItems: "stretch",
-                                    children: [
-                                        hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                            overflow: "auto",
-                                            width: isSideEditorOpen ? '50%' : 0,
-                                            borderWidth: "0 1px 0 0",
-                                            borderColor: "neutral150",
-                                            paddingTop: 6,
-                                            paddingBottom: 6,
-                                            // Remove horizontal padding when the editor is closed or it won't fully disappear
-                                            paddingLeft: isSideEditorOpen ? 6 : 0,
-                                            paddingRight: isSideEditorOpen ? 6 : 0,
-                                            transition: "all 0.2s ease-in-out",
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout.FormLayout, {
-                                                layout: documentLayoutResponse.edit.layout,
-                                                document: documentResponse,
-                                                hasBackground: false
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                            direction: "column",
-                                            alignItems: "stretch",
-                                            flex: 1,
-                                            height: "100%",
-                                            overflow: "hidden",
-                                            children: [
-                                                /*#__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
-                                                            })
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        direction: "column",
+                        height: "100%",
+                        alignItems: "stretch",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Blocker.Blocker, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(PreviewHeader.PreviewHeader, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(InputPopover.InputPopover, {
+                                documentResponse: documentResponse
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                flex: 1,
+                                overflow: "auto",
+                                alignItems: "stretch",
+                                children: [
+                                    hasAdvancedPreview && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        overflow: "auto",
+                                        width: isSideEditorOpen ? '50%' : 0,
+                                        borderWidth: "0 1px 0 0",
+                                        borderColor: "neutral150",
+                                        paddingTop: 6,
+                                        paddingBottom: 6,
+                                        // Remove horizontal padding when the editor is closed or it won't fully disappear
+                                        paddingLeft: isSideEditorOpen ? 6 : 0,
+                                        paddingRight: isSideEditorOpen ? 6 : 0,
+                                        transition: "all 0.2s ease-in-out",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout.FormLayout, {
+                                            layout: documentLayoutResponse.edit.layout,
+                                            document: documentResponse,
+                                            hasBackground: false
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                        direction: "column",
+                                        alignItems: "stretch",
+                                        flex: 1,
+                                        height: "100%",
+                                        overflow: "hidden",
+                                        children: [
+                                            /*#__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'
                                                         }),
-                                                        /*#__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))
-                                                            })
+                                                        onClick: ()=>setIsSideEditorOpen((prev)=>!prev),
+                                                        children: /*#__PURE__*/ jsxRuntime.jsx(AnimatedArrow, {
+                                                            $isSideEditorOpen: isSideEditorOpen
                                                         })
-                                                    ]
-                                                }),
-                                                /*#__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)
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                                                    }),
+                                                    /*#__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)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
                 })
             })
         ]
@@ -312,23 +350,23 @@ const PreviewPage = ()=>{
     }
     if (error || !model) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-            height: "100vh",
-            width: "100vw",
+            height: "100dvh",
+            width: "100dvw",
             position: "fixed",
             top: 0,
             left: 0,
-            zIndex: 2,
+            zIndex: 5,
             background: "neutral0",
             children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Error, {})
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        height: "100vh",
-        width: "100vw",
+        height: "100dvh",
+        width: "100dvw",
         position: "fixed",
         top: 0,
         left: 0,
-        zIndex: 2,
+        zIndex: 5,
         background: "neutral0",
         children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Protect, {
             permissions: permissions.filter((permission)=>permission.action.includes('explorer.read')),