@strapi/content-manager 0.0.0-next.8f0cdd4f9e4697ffed86c783465297fe532713f8 → 0.0.0-next.9243d2d1af29ab9842c7037bef47fdf1bc6efd8b

package/dist/admin/preview/components/InputPopover.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var InputRenderer = require('../../pages/EditView/components/InputRenderer.js');
+var Preview = require('../pages/Preview.js');
+
+const [InputPopoverProvider, useInputPopoverContext] = strapiAdmin.createContext('InputPopover');
+const InputPopover = ({ documentResponse })=>{
+    const iframeRef = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.iframeRef);
+    const popoverField = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.popoverField);
+    const setPopoverField = Preview.usePreviewContext('VisualEditingPopover', (state)=>state.setPopoverField);
+    if (!popoverField || !documentResponse.schema || !iframeRef.current) {
+        return null;
+    }
+    const iframeRect = iframeRef.current.getBoundingClientRect();
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                position: 'fixed',
+                top: iframeRect.top + 'px',
+                left: iframeRect.left + 'px',
+                width: iframeRect.width + 'px',
+                height: iframeRect.height + 'px',
+                zIndex: 4
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(InputPopoverProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+                    open: true,
+                    onOpenChange: (open)=>!open && setPopoverField(null),
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                position: "fixed",
+                                width: popoverField.position.width + 'px',
+                                height: popoverField.position.height + 'px',
+                                top: 0,
+                                left: 0,
+                                transform: `translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                            sideOffset: 4,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                padding: 4,
+                                width: "400px",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
+                                    document: documentResponse,
+                                    attribute: documentResponse.schema.attributes[popoverField.path],
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: documentResponse.schema.attributes[popoverField.path].type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+
+exports.InputPopover = InputPopover;
+exports.useHasInputPopoverParent = useHasInputPopoverParent;
+//# sourceMappingURL=InputPopover.js.map

package/dist/admin/preview/components/InputPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPopover.js","sources":["../../../../admin/src/preview/components/InputPopover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext } from '@strapi/admin/strapi-admin';\nimport { Box, Popover } from '@strapi/design-system';\n\nimport { type UseDocument } from '../../hooks/useDocument';\nimport { InputRenderer } from '../../pages/EditView/components/InputRenderer';\nimport { usePreviewContext } from '../pages/Preview';\n\n/**\n * No need for actual data in the context. It's just to let children check if they're rendered\n * inside of a preview InputPopover without relying on prop drilling.\n */\ninterface InputPopoverContextValue {}\n\nconst [InputPopoverProvider, useInputPopoverContext] =\n  createContext<InputPopoverContextValue>('InputPopover');\n\nconst InputPopover = ({ documentResponse }: { documentResponse: ReturnType<UseDocument> }) => {\n  const iframeRef = usePreviewContext('VisualEditingPopover', (state) => state.iframeRef);\n  const popoverField = usePreviewContext('VisualEditingPopover', (state) => state.popoverField);\n  const setPopoverField = usePreviewContext(\n    'VisualEditingPopover',\n    (state) => state.setPopoverField\n  );\n\n  if (!popoverField || !documentResponse.schema || !iframeRef.current) {\n    return null;\n  }\n\n  const iframeRect = iframeRef.current.getBoundingClientRect();\n\n  return (\n    <>\n      {/**\n       * Overlay an empty div on top of the iframe while the popover is open so it can\n       * intercept clicks. Without it, we wouldn't be able to close the popover by clicking outside,\n       * because the click would be detected by the iframe window, not by the admin.\n       **/}\n      <Box\n        position={'fixed'}\n        top={iframeRect.top + 'px'}\n        left={iframeRect.left + 'px'}\n        width={iframeRect.width + 'px'}\n        height={iframeRect.height + 'px'}\n        zIndex={4}\n      />\n      <InputPopoverProvider>\n        <Popover.Root open={true} onOpenChange={(open) => !open && setPopoverField(null)}>\n          <Popover.Trigger>\n            <Box\n              position=\"fixed\"\n              width={popoverField.position.width + 'px'}\n              height={popoverField.position.height + 'px'}\n              top={0}\n              left={0}\n              transform={`translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`}\n            />\n          </Popover.Trigger>\n          <Popover.Content sideOffset={4}>\n            <Box padding={4} width=\"400px\">\n              <InputRenderer\n                document={documentResponse}\n                attribute={documentResponse.schema.attributes[popoverField.path] as any}\n                label={popoverField.path}\n                name={popoverField.path}\n                type={documentResponse.schema.attributes[popoverField.path].type}\n                visible={true}\n              />\n            </Box>\n          </Popover.Content>\n        </Popover.Root>\n      </InputPopoverProvider>\n    </>\n  );\n};\n\nfunction useHasInputPopoverParent() {\n  const context = useInputPopoverContext('useHasInputPopoverParent', () => true, false);\n\n  // useContext will return undefined if the called is not wrapped in the provider\n  return context !== undefined;\n}\n\nexport { InputPopover, useHasInputPopoverParent };\n"],"names":["InputPopoverProvider","useInputPopoverContext","createContext","InputPopover","documentResponse","iframeRef","usePreviewContext","state","popoverField","setPopoverField","schema","current","iframeRect","getBoundingClientRect","_jsxs","_Fragment","_jsx","Box","position","top","left","width","height","zIndex","Popover","Root","open","onOpenChange","Trigger","transform","Content","sideOffset","padding","InputRenderer","document","attribute","attributes","path","label","name","type","visible","useHasInputPopoverParent","context","undefined"],"mappings":"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"}

package/dist/admin/preview/components/InputPopover.mjs

@@ -0,0 +1,70 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import { createContext } from '@strapi/admin/strapi-admin';
+import { Box, Popover } from '@strapi/design-system';
+import { InputRenderer as MemoizedInputRenderer } from '../../pages/EditView/components/InputRenderer.mjs';
+import { usePreviewContext } from '../pages/Preview.mjs';
+
+const [InputPopoverProvider, useInputPopoverContext] = createContext('InputPopover');
+const InputPopover = ({ documentResponse })=>{
+    const iframeRef = usePreviewContext('VisualEditingPopover', (state)=>state.iframeRef);
+    const popoverField = usePreviewContext('VisualEditingPopover', (state)=>state.popoverField);
+    const setPopoverField = usePreviewContext('VisualEditingPopover', (state)=>state.setPopoverField);
+    if (!popoverField || !documentResponse.schema || !iframeRef.current) {
+        return null;
+    }
+    const iframeRect = iframeRef.current.getBoundingClientRect();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                position: 'fixed',
+                top: iframeRect.top + 'px',
+                left: iframeRect.left + 'px',
+                width: iframeRect.width + 'px',
+                height: iframeRect.height + 'px',
+                zIndex: 4
+            }),
+            /*#__PURE__*/ jsx(InputPopoverProvider, {
+                children: /*#__PURE__*/ jsxs(Popover.Root, {
+                    open: true,
+                    onOpenChange: (open)=>!open && setPopoverField(null),
+                    children: [
+                        /*#__PURE__*/ jsx(Popover.Trigger, {
+                            children: /*#__PURE__*/ jsx(Box, {
+                                position: "fixed",
+                                width: popoverField.position.width + 'px',
+                                height: popoverField.position.height + 'px',
+                                top: 0,
+                                left: 0,
+                                transform: `translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Popover.Content, {
+                            sideOffset: 4,
+                            children: /*#__PURE__*/ jsx(Box, {
+                                padding: 4,
+                                width: "400px",
+                                children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                    document: documentResponse,
+                                    attribute: documentResponse.schema.attributes[popoverField.path],
+                                    label: popoverField.path,
+                                    name: popoverField.path,
+                                    type: documentResponse.schema.attributes[popoverField.path].type,
+                                    visible: true
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+function useHasInputPopoverParent() {
+    const context = useInputPopoverContext('useHasInputPopoverParent', ()=>true, false);
+    // useContext will return undefined if the called is not wrapped in the provider
+    return context !== undefined;
+}
+
+export { InputPopover, useHasInputPopoverParent };
+//# sourceMappingURL=InputPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPopover.mjs","sources":["../../../../admin/src/preview/components/InputPopover.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext } from '@strapi/admin/strapi-admin';\nimport { Box, Popover } from '@strapi/design-system';\n\nimport { type UseDocument } from '../../hooks/useDocument';\nimport { InputRenderer } from '../../pages/EditView/components/InputRenderer';\nimport { usePreviewContext } from '../pages/Preview';\n\n/**\n * No need for actual data in the context. It's just to let children check if they're rendered\n * inside of a preview InputPopover without relying on prop drilling.\n */\ninterface InputPopoverContextValue {}\n\nconst [InputPopoverProvider, useInputPopoverContext] =\n  createContext<InputPopoverContextValue>('InputPopover');\n\nconst InputPopover = ({ documentResponse }: { documentResponse: ReturnType<UseDocument> }) => {\n  const iframeRef = usePreviewContext('VisualEditingPopover', (state) => state.iframeRef);\n  const popoverField = usePreviewContext('VisualEditingPopover', (state) => state.popoverField);\n  const setPopoverField = usePreviewContext(\n    'VisualEditingPopover',\n    (state) => state.setPopoverField\n  );\n\n  if (!popoverField || !documentResponse.schema || !iframeRef.current) {\n    return null;\n  }\n\n  const iframeRect = iframeRef.current.getBoundingClientRect();\n\n  return (\n    <>\n      {/**\n       * Overlay an empty div on top of the iframe while the popover is open so it can\n       * intercept clicks. Without it, we wouldn't be able to close the popover by clicking outside,\n       * because the click would be detected by the iframe window, not by the admin.\n       **/}\n      <Box\n        position={'fixed'}\n        top={iframeRect.top + 'px'}\n        left={iframeRect.left + 'px'}\n        width={iframeRect.width + 'px'}\n        height={iframeRect.height + 'px'}\n        zIndex={4}\n      />\n      <InputPopoverProvider>\n        <Popover.Root open={true} onOpenChange={(open) => !open && setPopoverField(null)}>\n          <Popover.Trigger>\n            <Box\n              position=\"fixed\"\n              width={popoverField.position.width + 'px'}\n              height={popoverField.position.height + 'px'}\n              top={0}\n              left={0}\n              transform={`translate(${iframeRect.left + popoverField.position.left}px, ${iframeRect.top + popoverField.position.top}px)`}\n            />\n          </Popover.Trigger>\n          <Popover.Content sideOffset={4}>\n            <Box padding={4} width=\"400px\">\n              <InputRenderer\n                document={documentResponse}\n                attribute={documentResponse.schema.attributes[popoverField.path] as any}\n                label={popoverField.path}\n                name={popoverField.path}\n                type={documentResponse.schema.attributes[popoverField.path].type}\n                visible={true}\n              />\n            </Box>\n          </Popover.Content>\n        </Popover.Root>\n      </InputPopoverProvider>\n    </>\n  );\n};\n\nfunction useHasInputPopoverParent() {\n  const context = useInputPopoverContext('useHasInputPopoverParent', () => true, false);\n\n  // useContext will return undefined if the called is not wrapped in the provider\n  return context !== undefined;\n}\n\nexport { InputPopover, useHasInputPopoverParent };\n"],"names":["InputPopoverProvider","useInputPopoverContext","createContext","InputPopover","documentResponse","iframeRef","usePreviewContext","state","popoverField","setPopoverField","schema","current","iframeRect","getBoundingClientRect","_jsxs","_Fragment","_jsx","Box","position","top","left","width","height","zIndex","Popover","Root","open","onOpenChange","Trigger","transform","Content","sideOffset","padding","InputRenderer","document","attribute","attributes","path","label","name","type","visible","useHasInputPopoverParent","context","undefined"],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+'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) {
+    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);
+    React__namespace.useEffect(()=>{
+        if (!iframe) {
+            return;
+        }
+        const sendMessage = getSendMessage.getSendMessage(iframe);
+        sendMessage(constants.INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+            field: name,
+            value
+        });
+    }, [
+        name,
+        value,
+        iframe
+    ]);
+    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';\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(name: string): 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\n  React.useEffect(() => {\n    if (!iframe) {\n      return;\n    }\n\n    const sendMessage = getSendMessage(iframe);\n    sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n  }, [name, value, iframe]);\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","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","React","useEffect","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAASA,uBAAuBC,IAAY,EAAA;AACjD,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,oBAAST,CAAAA,IAAAA,CAAAA;AAE3BU,IAAAA,gBAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACV,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,MAAMW,cAAcC,6BAAeZ,CAAAA,MAAAA,CAAAA;QACnCW,WAAYE,CAAAA,yBAAAA,CAAgBC,mBAAmB,EAAE;YAAEC,KAAOhB,EAAAA,IAAAA;AAAMQ,YAAAA;AAAM,SAAA,CAAA;KACrE,EAAA;AAACR,QAAAA,IAAAA;AAAMQ,QAAAA,KAAAA;AAAOP,QAAAA;AAAO,KAAA,CAAA;AAExB,IAAA,MAAMW,cAAcC,6BAAeZ,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLgB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIX,qBAAuB,EAAA;YAE3BM,WAAYE,CAAAA,yBAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAmB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIb,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBO,WAAYE,CAAAA,yBAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAC/D;AACF,KAAA;AACF;;;;"}

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

@@ -0,0 +1,46 @@
+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) {
+    const iframe = usePreviewContext('usePreviewInputManager', (state)=>state.iframeRef, false);
+    const setPopoverField = usePreviewContext('usePreviewInputManager', (state)=>state.setPopoverField, false);
+    const hasInputPopoverParent = useHasInputPopoverParent();
+    const { value } = useField(name);
+    React.useEffect(()=>{
+        if (!iframe) {
+            return;
+        }
+        const sendMessage = getSendMessage(iframe);
+        sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, {
+            field: name,
+            value
+        });
+    }, [
+        name,
+        value,
+        iframe
+    ]);
+    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';\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(name: string): 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\n  React.useEffect(() => {\n    if (!iframe) {\n      return;\n    }\n\n    const sendMessage = getSendMessage(iframe);\n    sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\n  }, [name, value, iframe]);\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","iframe","usePreviewContext","state","iframeRef","setPopoverField","hasInputPopoverParent","useHasInputPopoverParent","value","useField","React","useEffect","sendMessage","getSendMessage","INTERNAL_EVENTS","STRAPI_FIELD_CHANGE","field","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;AAcO,SAASA,uBAAuBC,IAAY,EAAA;AACjD,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,QAAST,CAAAA,IAAAA,CAAAA;AAE3BU,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAI,CAACV,MAAQ,EAAA;AACX,YAAA;AACF;AAEA,QAAA,MAAMW,cAAcC,cAAeZ,CAAAA,MAAAA,CAAAA;QACnCW,WAAYE,CAAAA,eAAAA,CAAgBC,mBAAmB,EAAE;YAAEC,KAAOhB,EAAAA,IAAAA;AAAMQ,YAAAA;AAAM,SAAA,CAAA;KACrE,EAAA;AAACR,QAAAA,IAAAA;AAAMQ,QAAAA,KAAAA;AAAOP,QAAAA;AAAO,KAAA,CAAA;AAExB,IAAA,MAAMW,cAAcC,cAAeZ,CAAAA,MAAAA,CAAAA;IAEnC,OAAO;QACLgB,OAAS,EAAA,IAAA;AACP,YAAA,IAAIX,qBAAuB,EAAA;YAE3BM,WAAYE,CAAAA,eAAAA,CAAgBI,kBAAkB,EAAE;gBAAEF,KAAOhB,EAAAA;AAAK,aAAA,CAAA;AAChE,SAAA;QACAmB,MAAQ,EAAA,IAAA;AACN,YAAA,IAAIb,qBAAuB,EAAA;YAE3BD,eAAkB,GAAA,IAAA,CAAA;YAClBO,WAAYE,CAAAA,eAAAA,CAAgBM,iBAAiB,EAAE;gBAAEJ,KAAOhB,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,7 @@ 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);
     // 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 +87,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
+                });
+            }
+            if (event.data?.type === constants.INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT) {
+                setPopoverField?.(event.data.payload);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, []);
     if (!collectionType) {
         throw new Error('Could not find collectionType in url params');
     }
@@ -161,6 +193,9 @@ const PreviewPage = ()=>{
                 schema: documentResponse.schema,
                 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 +217,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)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
                 })
             })
         ]