@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

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

@@ -0,0 +1,155 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var qs = require('qs');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var preview = require('../services/preview.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+/**
+ * Always keeps the Tooltip (and therefore the children subtree) mounted: conditionally wrapping
+ * would remount the child button whenever `isShown` flips, and a click landing during that swap
+ * is silently lost. When the tooltip must not show, it is force-closed via the controlled `open`
+ * prop instead of being removed from the tree.
+ */ const ConditionalTooltip = ({ isShown, label, children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: label,
+        open: isShown ? undefined : false,
+        children: children
+    });
+};
+const PreviewSidePanel = ({ model, documentId, document })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { trackUsage } = strapiAdmin.useTracking();
+    const { pathname } = reactRouterDom.useLocation();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const isModified = strapiAdmin.useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
+    /**
+   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
+   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
+   * /preview, and the URL will already be loaded in the RTK query cache.
+   */ const { data, error } = preview.useGetPreviewUrlQuery({
+        params: {
+            contentType: model
+        },
+        query: {
+            documentId,
+            locale: document?.locale,
+            status: document?.status
+        }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
+    });
+    /**
+   * The query args above change while the document settles (locale/status resolve after load and
+   * on save/publish), and each change is a new cache entry with transiently empty data. Latch
+   * enablement once a URL has been seen so the "Open preview" button doesn't unmount and remount
+   * mid-interaction — a click landing during such a swap is silently lost.
+   */ const [isPreviewEnabled, setIsPreviewEnabled] = React__namespace.useState(false);
+    const previewUrl = data?.data?.url;
+    React__namespace.useEffect(()=>{
+        if (previewUrl) {
+            setIsPreviewEnabled(true);
+        }
+    }, [
+        previewUrl
+    ]);
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                tag: reactRouterDom.Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
+    if (!isPreviewEnabled && (!data?.data?.url || error)) {
+        return null;
+    }
+    const trackNavigation = ()=>{
+        // Append /preview to the current URL
+        const destinationPathname = pathname.replace(/\/$/, '') + '/preview';
+        trackUsage('willNavigate', {
+            from: pathname,
+            to: destinationPathname
+        });
+    };
+    return {
+        title,
+        content: /*#__PURE__*/ jsxRuntime.jsx(ConditionalTooltip, {
+            label: formatMessage({
+                id: 'content-manager.preview.panel.button-disabled-tooltip',
+                defaultMessage: 'Please save to open the preview'
+            }),
+            isShown: isModified,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                cursor: "not-allowed",
+                width: "100%",
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                    variant: "tertiary",
+                    tag: reactRouterDom.Link,
+                    to: {
+                        pathname: 'preview',
+                        search: qs.stringify(query, {
+                            encode: false
+                        })
+                    },
+                    onClick: trackNavigation,
+                    width: "100%",
+                    disabled: isModified,
+                    pointerEvents: isModified ? 'none' : undefined,
+                    tabIndex: isModified ? -1 : undefined,
+                    children: formatMessage({
+                        id: 'content-manager.preview.panel.button',
+                        defaultMessage: 'Open preview'
+                    })
+                })
+            })
+        })
+    };
+};
+
+exports.PreviewSidePanel = PreviewSidePanel;
+//# sourceMappingURL=PreviewSidePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewSidePanel.js","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\r\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\r\nimport { stringify } from 'qs';\r\nimport { useIntl } from 'react-intl';\r\nimport { Link, useLocation } from 'react-router-dom';\r\n\r\nimport { useGetPreviewUrlQuery } from '../services/preview';\r\n\r\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\r\nimport type { UID } from '@strapi/types';\r\n\r\ninterface ConditionalTooltipProps {\r\n  isShown: boolean;\r\n  label: TooltipProps['label'];\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Always keeps the Tooltip (and therefore the children subtree) mounted: conditionally wrapping\r\n * would remount the child button whenever `isShown` flips, and a click landing during that swap\r\n * is silently lost. When the tooltip must not show, it is force-closed via the controlled `open`\r\n * prop instead of being removed from the tree.\r\n */\r\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\r\n  return (\r\n    <Tooltip label={label} open={isShown ? undefined : false}>\r\n      {children}\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\r\n  const { formatMessage } = useIntl();\r\n  const { trackUsage } = useTracking();\r\n  const { pathname } = useLocation();\r\n  const [{ query }] = useQueryParams();\r\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\r\n  const isUnsaved = Boolean(!document || !document.id);\r\n\r\n  const title = formatMessage({\r\n    id: 'content-manager.preview.panel.title',\r\n    defaultMessage: 'Preview',\r\n  });\r\n\r\n  /**\r\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\r\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\r\n   * /preview, and the URL will already be loaded in the RTK query cache.\r\n   */\r\n  const { data, error } = useGetPreviewUrlQuery(\r\n    {\r\n      params: {\r\n        contentType: model as UID.ContentType,\r\n      },\r\n      query: {\r\n        documentId,\r\n        locale: document?.locale,\r\n        status: document?.status,\r\n      },\r\n    },\r\n    // Don't bother making the request since we won't show any UI\r\n    { skip: isUnsaved }\r\n  );\r\n\r\n  /**\r\n   * The query args above change while the document settles (locale/status resolve after load and\r\n   * on save/publish), and each change is a new cache entry with transiently empty data. Latch\r\n   * enablement once a URL has been seen so the \"Open preview\" button doesn't unmount and remount\r\n   * mid-interaction — a click landing during such a swap is silently lost.\r\n   */\r\n  const [isPreviewEnabled, setIsPreviewEnabled] = React.useState(false);\r\n  const previewUrl = data?.data?.url;\r\n  React.useEffect(() => {\r\n    if (previewUrl) {\r\n      setIsPreviewEnabled(true);\r\n    }\r\n  }, [previewUrl]);\r\n\r\n  if (isUnsaved) {\r\n    return null;\r\n  }\r\n\r\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\r\n  // So we encourage the user to set it up.\r\n  if (error && error.name === 'NotFoundError') {\r\n    return {\r\n      title,\r\n      content: (\r\n        <Button\r\n          variant=\"tertiary\"\r\n          tag={Link}\r\n          to=\"https://docs.strapi.io/cms/features/preview\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n          width=\"100%\"\r\n        >\r\n          {formatMessage({\r\n            id: 'content-manager.preview.panel.button-configuration',\r\n            defaultMessage: 'Set up preview',\r\n          })}\r\n        </Button>\r\n      ),\r\n    };\r\n  }\r\n\r\n  if (!isPreviewEnabled && (!data?.data?.url || error)) {\r\n    return null;\r\n  }\r\n\r\n  const trackNavigation = () => {\r\n    // Append /preview to the current URL\r\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\r\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\r\n  };\r\n\r\n  return {\r\n    title,\r\n    content: (\r\n      <ConditionalTooltip\r\n        label={formatMessage({\r\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\r\n          defaultMessage: 'Please save to open the preview',\r\n        })}\r\n        isShown={isModified}\r\n      >\r\n        <Box cursor=\"not-allowed\" width=\"100%\">\r\n          <Button\r\n            variant=\"tertiary\"\r\n            tag={Link}\r\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\r\n            onClick={trackNavigation}\r\n            width=\"100%\"\r\n            disabled={isModified}\r\n            pointerEvents={isModified ? 'none' : undefined}\r\n            tabIndex={isModified ? -1 : undefined}\r\n          >\r\n            {formatMessage({\r\n              id: 'content-manager.preview.panel.button',\r\n              defaultMessage: 'Open preview',\r\n            })}\r\n          </Button>\r\n        </Box>\r\n      </ConditionalTooltip>\r\n    ),\r\n  };\r\n};\r\n\r\nexport { PreviewSidePanel };\r\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","open","undefined","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","isPreviewEnabled","setIsPreviewEnabled","React","useState","previewUrl","url","useEffect","name","content","Button","variant","tag","Link","to","target","rel","width","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","tabIndex"],"mappings":"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"}

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

@@ -0,0 +1,133 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTracking, useQueryParams, useForm } from '@strapi/admin/strapi-admin';
+import { Button, Box, Tooltip } from '@strapi/design-system';
+import { stringify } from 'qs';
+import { useIntl } from 'react-intl';
+import { useLocation, Link } from 'react-router-dom';
+import { useGetPreviewUrlQuery } from '../services/preview.mjs';
+
+/**
+ * Always keeps the Tooltip (and therefore the children subtree) mounted: conditionally wrapping
+ * would remount the child button whenever `isShown` flips, and a click landing during that swap
+ * is silently lost. When the tooltip must not show, it is force-closed via the controlled `open`
+ * prop instead of being removed from the tree.
+ */ const ConditionalTooltip = ({ isShown, label, children })=>{
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: label,
+        open: isShown ? undefined : false,
+        children: children
+    });
+};
+const PreviewSidePanel = ({ model, documentId, document })=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const { pathname } = useLocation();
+    const [{ query }] = useQueryParams();
+    const isModified = useForm('PreviewSidePanel', (state)=>state.modified);
+    const isUnsaved = Boolean(!document || !document.id);
+    const title = formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview'
+    });
+    /**
+   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled
+   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to
+   * /preview, and the URL will already be loaded in the RTK query cache.
+   */ const { data, error } = useGetPreviewUrlQuery({
+        params: {
+            contentType: model
+        },
+        query: {
+            documentId,
+            locale: document?.locale,
+            status: document?.status
+        }
+    }, // Don't bother making the request since we won't show any UI
+    {
+        skip: isUnsaved
+    });
+    /**
+   * The query args above change while the document settles (locale/status resolve after load and
+   * on save/publish), and each change is a new cache entry with transiently empty data. Latch
+   * enablement once a URL has been seen so the "Open preview" button doesn't unmount and remount
+   * mid-interaction — a click landing during such a swap is silently lost.
+   */ const [isPreviewEnabled, setIsPreviewEnabled] = React.useState(false);
+    const previewUrl = data?.data?.url;
+    React.useEffect(()=>{
+        if (previewUrl) {
+            setIsPreviewEnabled(true);
+        }
+    }, [
+        previewUrl
+    ]);
+    if (isUnsaved) {
+        return null;
+    }
+    // Preview was not configured but not disabled either (otherwise it would be a success 204).
+    // So we encourage the user to set it up.
+    if (error && error.name === 'NotFoundError') {
+        return {
+            title,
+            content: /*#__PURE__*/ jsx(Button, {
+                variant: "tertiary",
+                tag: Link,
+                to: "https://docs.strapi.io/cms/features/preview",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                width: "100%",
+                children: formatMessage({
+                    id: 'content-manager.preview.panel.button-configuration',
+                    defaultMessage: 'Set up preview'
+                })
+            })
+        };
+    }
+    if (!isPreviewEnabled && (!data?.data?.url || error)) {
+        return null;
+    }
+    const trackNavigation = ()=>{
+        // Append /preview to the current URL
+        const destinationPathname = pathname.replace(/\/$/, '') + '/preview';
+        trackUsage('willNavigate', {
+            from: pathname,
+            to: destinationPathname
+        });
+    };
+    return {
+        title,
+        content: /*#__PURE__*/ jsx(ConditionalTooltip, {
+            label: formatMessage({
+                id: 'content-manager.preview.panel.button-disabled-tooltip',
+                defaultMessage: 'Please save to open the preview'
+            }),
+            isShown: isModified,
+            children: /*#__PURE__*/ jsx(Box, {
+                cursor: "not-allowed",
+                width: "100%",
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "tertiary",
+                    tag: Link,
+                    to: {
+                        pathname: 'preview',
+                        search: stringify(query, {
+                            encode: false
+                        })
+                    },
+                    onClick: trackNavigation,
+                    width: "100%",
+                    disabled: isModified,
+                    pointerEvents: isModified ? 'none' : undefined,
+                    tabIndex: isModified ? -1 : undefined,
+                    children: formatMessage({
+                        id: 'content-manager.preview.panel.button',
+                        defaultMessage: 'Open preview'
+                    })
+                })
+            })
+        })
+    };
+};
+
+export { PreviewSidePanel };
+//# sourceMappingURL=PreviewSidePanel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewSidePanel.mjs","sources":["../../../../admin/src/preview/components/PreviewSidePanel.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useQueryParams, useTracking, useForm } from '@strapi/admin/strapi-admin';\r\nimport { Box, Button, Tooltip, type TooltipProps } from '@strapi/design-system';\r\nimport { stringify } from 'qs';\r\nimport { useIntl } from 'react-intl';\r\nimport { Link, useLocation } from 'react-router-dom';\r\n\r\nimport { useGetPreviewUrlQuery } from '../services/preview';\r\n\r\nimport type { PanelComponent } from '@strapi/content-manager/strapi-admin';\r\nimport type { UID } from '@strapi/types';\r\n\r\ninterface ConditionalTooltipProps {\r\n  isShown: boolean;\r\n  label: TooltipProps['label'];\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Always keeps the Tooltip (and therefore the children subtree) mounted: conditionally wrapping\r\n * would remount the child button whenever `isShown` flips, and a click landing during that swap\r\n * is silently lost. When the tooltip must not show, it is force-closed via the controlled `open`\r\n * prop instead of being removed from the tree.\r\n */\r\nconst ConditionalTooltip = ({ isShown, label, children }: ConditionalTooltipProps) => {\r\n  return (\r\n    <Tooltip label={label} open={isShown ? undefined : false}>\r\n      {children}\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\nconst PreviewSidePanel: PanelComponent = ({ model, documentId, document }) => {\r\n  const { formatMessage } = useIntl();\r\n  const { trackUsage } = useTracking();\r\n  const { pathname } = useLocation();\r\n  const [{ query }] = useQueryParams();\r\n  const isModified = useForm('PreviewSidePanel', (state) => state.modified);\r\n  const isUnsaved = Boolean(!document || !document.id);\r\n\r\n  const title = formatMessage({\r\n    id: 'content-manager.preview.panel.title',\r\n    defaultMessage: 'Preview',\r\n  });\r\n\r\n  /**\r\n   * The preview URL isn't used in this component, we just fetch it to know if preview is enabled\r\n   * for the content type. If it's not, the panel is not displayed. If it is, we display a link to\r\n   * /preview, and the URL will already be loaded in the RTK query cache.\r\n   */\r\n  const { data, error } = useGetPreviewUrlQuery(\r\n    {\r\n      params: {\r\n        contentType: model as UID.ContentType,\r\n      },\r\n      query: {\r\n        documentId,\r\n        locale: document?.locale,\r\n        status: document?.status,\r\n      },\r\n    },\r\n    // Don't bother making the request since we won't show any UI\r\n    { skip: isUnsaved }\r\n  );\r\n\r\n  /**\r\n   * The query args above change while the document settles (locale/status resolve after load and\r\n   * on save/publish), and each change is a new cache entry with transiently empty data. Latch\r\n   * enablement once a URL has been seen so the \"Open preview\" button doesn't unmount and remount\r\n   * mid-interaction — a click landing during such a swap is silently lost.\r\n   */\r\n  const [isPreviewEnabled, setIsPreviewEnabled] = React.useState(false);\r\n  const previewUrl = data?.data?.url;\r\n  React.useEffect(() => {\r\n    if (previewUrl) {\r\n      setIsPreviewEnabled(true);\r\n    }\r\n  }, [previewUrl]);\r\n\r\n  if (isUnsaved) {\r\n    return null;\r\n  }\r\n\r\n  // Preview was not configured but not disabled either (otherwise it would be a success 204).\r\n  // So we encourage the user to set it up.\r\n  if (error && error.name === 'NotFoundError') {\r\n    return {\r\n      title,\r\n      content: (\r\n        <Button\r\n          variant=\"tertiary\"\r\n          tag={Link}\r\n          to=\"https://docs.strapi.io/cms/features/preview\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n          width=\"100%\"\r\n        >\r\n          {formatMessage({\r\n            id: 'content-manager.preview.panel.button-configuration',\r\n            defaultMessage: 'Set up preview',\r\n          })}\r\n        </Button>\r\n      ),\r\n    };\r\n  }\r\n\r\n  if (!isPreviewEnabled && (!data?.data?.url || error)) {\r\n    return null;\r\n  }\r\n\r\n  const trackNavigation = () => {\r\n    // Append /preview to the current URL\r\n    const destinationPathname = pathname.replace(/\\/$/, '') + '/preview';\r\n    trackUsage('willNavigate', { from: pathname, to: destinationPathname });\r\n  };\r\n\r\n  return {\r\n    title,\r\n    content: (\r\n      <ConditionalTooltip\r\n        label={formatMessage({\r\n          id: 'content-manager.preview.panel.button-disabled-tooltip',\r\n          defaultMessage: 'Please save to open the preview',\r\n        })}\r\n        isShown={isModified}\r\n      >\r\n        <Box cursor=\"not-allowed\" width=\"100%\">\r\n          <Button\r\n            variant=\"tertiary\"\r\n            tag={Link}\r\n            to={{ pathname: 'preview', search: stringify(query, { encode: false }) }}\r\n            onClick={trackNavigation}\r\n            width=\"100%\"\r\n            disabled={isModified}\r\n            pointerEvents={isModified ? 'none' : undefined}\r\n            tabIndex={isModified ? -1 : undefined}\r\n          >\r\n            {formatMessage({\r\n              id: 'content-manager.preview.panel.button',\r\n              defaultMessage: 'Open preview',\r\n            })}\r\n          </Button>\r\n        </Box>\r\n      </ConditionalTooltip>\r\n    ),\r\n  };\r\n};\r\n\r\nexport { PreviewSidePanel };\r\n"],"names":["ConditionalTooltip","isShown","label","children","_jsx","Tooltip","open","undefined","PreviewSidePanel","model","documentId","document","formatMessage","useIntl","trackUsage","useTracking","pathname","useLocation","query","useQueryParams","isModified","useForm","state","modified","isUnsaved","Boolean","id","title","defaultMessage","data","error","useGetPreviewUrlQuery","params","contentType","locale","status","skip","isPreviewEnabled","setIsPreviewEnabled","React","useState","previewUrl","url","useEffect","name","content","Button","variant","tag","Link","to","target","rel","width","trackNavigation","destinationPathname","replace","from","Box","cursor","search","stringify","encode","onClick","disabled","pointerEvents","tabIndex"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+'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 _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(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
+    ]);
+    // Track previous value to detect media deletion
+    const prevValueRef = React__namespace.useRef(value);
+    React__namespace.useEffect(()=>{
+        // Only run inside popover for media fields
+        if (!hasInputPopoverParent || !setPopoverField || type !== 'media') {
+            return;
+        }
+        const currentValue = value;
+        const previousValue = prevValueRef.current;
+        // Check if we transitioned from having a value to null/empty
+        const hadValue = previousValue != null && (Array.isArray(previousValue) ? previousValue.length > 0 : true);
+        const hasNoValue = currentValue == null || (Array.isArray(currentValue) ? currentValue.length === 0 : false);
+        if (hadValue && hasNoValue) {
+            // Media was deleted, close the popover
+            setPopoverField(null);
+        }
+        // Update ref for next comparison
+        prevValueRef.current = currentValue;
+    }, [
+        value,
+        hasInputPopoverParent,
+        setPopoverField,
+        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';\r\n\r\nimport { useField } from '@strapi/admin/strapi-admin';\r\nimport { Schema } from '@strapi/types';\r\n\r\nimport { useHasInputPopoverParent } from '../components/InputPopover';\r\nimport { usePreviewContext } from '../pages/Preview';\r\nimport { INTERNAL_EVENTS } from '../utils/constants';\r\nimport { getSendMessage } from '../utils/getSendMessage';\r\n\r\ntype PreviewInputProps = Pick<\r\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\r\n  'onFocus' | 'onBlur'\r\n>;\r\n\r\nexport function usePreviewInputManager(\r\n  name: string,\r\n  attribute: Schema.Attribute.AnyAttribute\r\n): PreviewInputProps {\r\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\r\n  const setPopoverField = usePreviewContext(\r\n    'usePreviewInputManager',\r\n    (state) => state.setPopoverField,\r\n    false\r\n  );\r\n  const hasInputPopoverParent = useHasInputPopoverParent();\r\n  const { value } = useField(name);\r\n  const { type } = attribute;\r\n\r\n  React.useEffect(() => {\r\n    if (!iframe || !type) {\r\n      return;\r\n    }\r\n\r\n    /**\r\n     * Only send message if the field is not a data structure (component, dynamic zone)\r\n     * because we already send events for their fields\r\n     */\r\n    if (!['component', 'dynamiczone'].includes(type)) {\r\n      const sendMessage = getSendMessage(iframe);\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\r\n    }\r\n  }, [name, value, iframe, type]);\r\n\r\n  // Track previous value to detect media deletion\r\n  const prevValueRef = React.useRef(value);\r\n\r\n  React.useEffect(() => {\r\n    // Only run inside popover for media fields\r\n    if (!hasInputPopoverParent || !setPopoverField || type !== 'media') {\r\n      return;\r\n    }\r\n\r\n    const currentValue = value;\r\n    const previousValue = prevValueRef.current;\r\n\r\n    // Check if we transitioned from having a value to null/empty\r\n    const hadValue =\r\n      previousValue != null && (Array.isArray(previousValue) ? previousValue.length > 0 : true);\r\n    const hasNoValue =\r\n      currentValue == null || (Array.isArray(currentValue) ? currentValue.length === 0 : false);\r\n\r\n    if (hadValue && hasNoValue) {\r\n      // Media was deleted, close the popover\r\n      setPopoverField(null);\r\n    }\r\n\r\n    // Update ref for next comparison\r\n    prevValueRef.current = currentValue;\r\n  }, [value, hasInputPopoverParent, setPopoverField, type]);\r\n\r\n  const sendMessage = getSendMessage(iframe);\r\n\r\n  return {\r\n    onFocus: () => {\r\n      if (hasInputPopoverParent) return;\r\n\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\r\n    },\r\n    onBlur: () => {\r\n      if (hasInputPopoverParent) return;\r\n\r\n      setPopoverField?.(null);\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\r\n    },\r\n  };\r\n}\r\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","prevValueRef","useRef","currentValue","previousValue","current","hadValue","Array","isArray","length","hasNoValue","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,SAASA,sBAAAA,CACdC,IAAY,EACZC,SAAwC,EAAA;AAExC,IAAA,MAAMC,SAASC,yBAAAA,CAAkB,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,yBAAAA,CACtB,wBAAA,EACA,CAACC,KAAAA,GAAUA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAAA,GAAwBC,qCAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,CAASV,IAAAA,CAAAA;IAC3B,MAAM,EAAEW,IAAI,EAAE,GAAGV,SAAAA;AAEjBW,IAAAA,gBAAAA,CAAMC,SAAS,CAAC,IAAA;QACd,IAAI,CAACX,MAAAA,IAAU,CAACS,IAAAA,EAAM;AACpB,YAAA;AACF,QAAA;AAEA;;;AAGC,QACD,IAAI,CAAC;AAAC,YAAA,WAAA;AAAa,YAAA;SAAc,CAACG,QAAQ,CAACH,IAAAA,CAAAA,EAAO;AAChD,YAAA,MAAMI,cAAcC,6BAAAA,CAAed,MAAAA,CAAAA;YACnCa,WAAAA,CAAYE,yBAAAA,CAAgBC,mBAAmB,EAAE;gBAAEC,KAAAA,EAAOnB,IAAAA;AAAMS,gBAAAA;AAAM,aAAA,CAAA;AACxE,QAAA;IACF,CAAA,EAAG;AAACT,QAAAA,IAAAA;AAAMS,QAAAA,KAAAA;AAAOP,QAAAA,MAAAA;AAAQS,QAAAA;AAAK,KAAA,CAAA;;IAG9B,MAAMS,YAAAA,GAAeR,gBAAAA,CAAMS,MAAM,CAACZ,KAAAA,CAAAA;AAElCG,IAAAA,gBAAAA,CAAMC,SAAS,CAAC,IAAA;;AAEd,QAAA,IAAI,CAACN,qBAAAA,IAAyB,CAACD,eAAAA,IAAmBK,SAAS,OAAA,EAAS;AAClE,YAAA;AACF,QAAA;AAEA,QAAA,MAAMW,YAAAA,GAAeb,KAAAA;QACrB,MAAMc,aAAAA,GAAgBH,aAAaI,OAAO;;AAG1C,QAAA,MAAMC,QAAAA,GACJF,aAAAA,IAAiB,IAAA,KAASG,KAAAA,CAAMC,OAAO,CAACJ,aAAAA,CAAAA,GAAiBA,aAAAA,CAAcK,MAAM,GAAG,CAAA,GAAI,IAAG,CAAA;AACzF,QAAA,MAAMC,UAAAA,GACJP,YAAAA,IAAgB,IAAA,KAASI,KAAAA,CAAMC,OAAO,CAACL,YAAAA,CAAAA,GAAgBA,YAAAA,CAAaM,MAAM,KAAK,CAAA,GAAI,KAAI,CAAA;AAEzF,QAAA,IAAIH,YAAYI,UAAAA,EAAY;;YAE1BvB,eAAAA,CAAgB,IAAA,CAAA;AAClB,QAAA;;AAGAc,QAAAA,YAAAA,CAAaI,OAAO,GAAGF,YAAAA;IACzB,CAAA,EAAG;AAACb,QAAAA,KAAAA;AAAOF,QAAAA,qBAAAA;AAAuBD,QAAAA,eAAAA;AAAiBK,QAAAA;AAAK,KAAA,CAAA;AAExD,IAAA,MAAMI,cAAcC,6BAAAA,CAAed,MAAAA,CAAAA;IAEnC,OAAO;QACL4B,OAAAA,EAAS,IAAA;AACP,YAAA,IAAIvB,qBAAAA,EAAuB;YAE3BQ,WAAAA,CAAYE,yBAAAA,CAAgBc,kBAAkB,EAAE;gBAAEZ,KAAAA,EAAOnB;AAAK,aAAA,CAAA;AAChE,QAAA,CAAA;QACAgC,MAAAA,EAAQ,IAAA;AACN,YAAA,IAAIzB,qBAAAA,EAAuB;YAE3BD,eAAAA,GAAkB,IAAA,CAAA;YAClBS,WAAAA,CAAYE,yBAAAA,CAAgBgB,iBAAiB,EAAE;gBAAEd,KAAAA,EAAOnB;AAAK,aAAA,CAAA;AAC/D,QAAA;AACF,KAAA;AACF;;;;"}

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

@@ -0,0 +1,80 @@
+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
+    ]);
+    // Track previous value to detect media deletion
+    const prevValueRef = React.useRef(value);
+    React.useEffect(()=>{
+        // Only run inside popover for media fields
+        if (!hasInputPopoverParent || !setPopoverField || type !== 'media') {
+            return;
+        }
+        const currentValue = value;
+        const previousValue = prevValueRef.current;
+        // Check if we transitioned from having a value to null/empty
+        const hadValue = previousValue != null && (Array.isArray(previousValue) ? previousValue.length > 0 : true);
+        const hasNoValue = currentValue == null || (Array.isArray(currentValue) ? currentValue.length === 0 : false);
+        if (hadValue && hasNoValue) {
+            // Media was deleted, close the popover
+            setPopoverField(null);
+        }
+        // Update ref for next comparison
+        prevValueRef.current = currentValue;
+    }, [
+        value,
+        hasInputPopoverParent,
+        setPopoverField,
+        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';\r\n\r\nimport { useField } from '@strapi/admin/strapi-admin';\r\nimport { Schema } from '@strapi/types';\r\n\r\nimport { useHasInputPopoverParent } from '../components/InputPopover';\r\nimport { usePreviewContext } from '../pages/Preview';\r\nimport { INTERNAL_EVENTS } from '../utils/constants';\r\nimport { getSendMessage } from '../utils/getSendMessage';\r\n\r\ntype PreviewInputProps = Pick<\r\n  Required<React.InputHTMLAttributes<HTMLInputElement>>,\r\n  'onFocus' | 'onBlur'\r\n>;\r\n\r\nexport function usePreviewInputManager(\r\n  name: string,\r\n  attribute: Schema.Attribute.AnyAttribute\r\n): PreviewInputProps {\r\n  const iframe = usePreviewContext('usePreviewInputManager', (state) => state.iframeRef, false);\r\n  const setPopoverField = usePreviewContext(\r\n    'usePreviewInputManager',\r\n    (state) => state.setPopoverField,\r\n    false\r\n  );\r\n  const hasInputPopoverParent = useHasInputPopoverParent();\r\n  const { value } = useField(name);\r\n  const { type } = attribute;\r\n\r\n  React.useEffect(() => {\r\n    if (!iframe || !type) {\r\n      return;\r\n    }\r\n\r\n    /**\r\n     * Only send message if the field is not a data structure (component, dynamic zone)\r\n     * because we already send events for their fields\r\n     */\r\n    if (!['component', 'dynamiczone'].includes(type)) {\r\n      const sendMessage = getSendMessage(iframe);\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_CHANGE, { field: name, value });\r\n    }\r\n  }, [name, value, iframe, type]);\r\n\r\n  // Track previous value to detect media deletion\r\n  const prevValueRef = React.useRef(value);\r\n\r\n  React.useEffect(() => {\r\n    // Only run inside popover for media fields\r\n    if (!hasInputPopoverParent || !setPopoverField || type !== 'media') {\r\n      return;\r\n    }\r\n\r\n    const currentValue = value;\r\n    const previousValue = prevValueRef.current;\r\n\r\n    // Check if we transitioned from having a value to null/empty\r\n    const hadValue =\r\n      previousValue != null && (Array.isArray(previousValue) ? previousValue.length > 0 : true);\r\n    const hasNoValue =\r\n      currentValue == null || (Array.isArray(currentValue) ? currentValue.length === 0 : false);\r\n\r\n    if (hadValue && hasNoValue) {\r\n      // Media was deleted, close the popover\r\n      setPopoverField(null);\r\n    }\r\n\r\n    // Update ref for next comparison\r\n    prevValueRef.current = currentValue;\r\n  }, [value, hasInputPopoverParent, setPopoverField, type]);\r\n\r\n  const sendMessage = getSendMessage(iframe);\r\n\r\n  return {\r\n    onFocus: () => {\r\n      if (hasInputPopoverParent) return;\r\n\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS, { field: name });\r\n    },\r\n    onBlur: () => {\r\n      if (hasInputPopoverParent) return;\r\n\r\n      setPopoverField?.(null);\r\n      sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_BLUR, { field: name });\r\n    },\r\n  };\r\n}\r\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","prevValueRef","useRef","currentValue","previousValue","current","hadValue","Array","isArray","length","hasNoValue","onFocus","STRAPI_FIELD_FOCUS","onBlur","STRAPI_FIELD_BLUR"],"mappings":";;;;;;;AAeO,SAASA,sBAAAA,CACdC,IAAY,EACZC,SAAwC,EAAA;AAExC,IAAA,MAAMC,SAASC,iBAAAA,CAAkB,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,KAAAA,CAAMC,SAAS,EAAE,KAAA,CAAA;AACvF,IAAA,MAAMC,kBAAkBH,iBAAAA,CACtB,wBAAA,EACA,CAACC,KAAAA,GAAUA,KAAAA,CAAME,eAAe,EAChC,KAAA,CAAA;AAEF,IAAA,MAAMC,qBAAAA,GAAwBC,wBAAAA,EAAAA;AAC9B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,QAAAA,CAASV,IAAAA,CAAAA;IAC3B,MAAM,EAAEW,IAAI,EAAE,GAAGV,SAAAA;AAEjBW,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;QACd,IAAI,CAACX,MAAAA,IAAU,CAACS,IAAAA,EAAM;AACpB,YAAA;AACF,QAAA;AAEA;;;AAGC,QACD,IAAI,CAAC;AAAC,YAAA,WAAA;AAAa,YAAA;SAAc,CAACG,QAAQ,CAACH,IAAAA,CAAAA,EAAO;AAChD,YAAA,MAAMI,cAAcC,cAAAA,CAAed,MAAAA,CAAAA;YACnCa,WAAAA,CAAYE,eAAAA,CAAgBC,mBAAmB,EAAE;gBAAEC,KAAAA,EAAOnB,IAAAA;AAAMS,gBAAAA;AAAM,aAAA,CAAA;AACxE,QAAA;IACF,CAAA,EAAG;AAACT,QAAAA,IAAAA;AAAMS,QAAAA,KAAAA;AAAOP,QAAAA,MAAAA;AAAQS,QAAAA;AAAK,KAAA,CAAA;;IAG9B,MAAMS,YAAAA,GAAeR,KAAAA,CAAMS,MAAM,CAACZ,KAAAA,CAAAA;AAElCG,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;;AAEd,QAAA,IAAI,CAACN,qBAAAA,IAAyB,CAACD,eAAAA,IAAmBK,SAAS,OAAA,EAAS;AAClE,YAAA;AACF,QAAA;AAEA,QAAA,MAAMW,YAAAA,GAAeb,KAAAA;QACrB,MAAMc,aAAAA,GAAgBH,aAAaI,OAAO;;AAG1C,QAAA,MAAMC,QAAAA,GACJF,aAAAA,IAAiB,IAAA,KAASG,KAAAA,CAAMC,OAAO,CAACJ,aAAAA,CAAAA,GAAiBA,aAAAA,CAAcK,MAAM,GAAG,CAAA,GAAI,IAAG,CAAA;AACzF,QAAA,MAAMC,UAAAA,GACJP,YAAAA,IAAgB,IAAA,KAASI,KAAAA,CAAMC,OAAO,CAACL,YAAAA,CAAAA,GAAgBA,YAAAA,CAAaM,MAAM,KAAK,CAAA,GAAI,KAAI,CAAA;AAEzF,QAAA,IAAIH,YAAYI,UAAAA,EAAY;;YAE1BvB,eAAAA,CAAgB,IAAA,CAAA;AAClB,QAAA;;AAGAc,QAAAA,YAAAA,CAAaI,OAAO,GAAGF,YAAAA;IACzB,CAAA,EAAG;AAACb,QAAAA,KAAAA;AAAOF,QAAAA,qBAAAA;AAAuBD,QAAAA,eAAAA;AAAiBK,QAAAA;AAAK,KAAA,CAAA;AAExD,IAAA,MAAMI,cAAcC,cAAAA,CAAed,MAAAA,CAAAA;IAEnC,OAAO;QACL4B,OAAAA,EAAS,IAAA;AACP,YAAA,IAAIvB,qBAAAA,EAAuB;YAE3BQ,WAAAA,CAAYE,eAAAA,CAAgBc,kBAAkB,EAAE;gBAAEZ,KAAAA,EAAOnB;AAAK,aAAA,CAAA;AAChE,QAAA,CAAA;QACAgC,MAAAA,EAAQ,IAAA;AACN,YAAA,IAAIzB,qBAAAA,EAAuB;YAE3BD,eAAAA,GAAkB,IAAA,CAAA;YAClBS,WAAAA,CAAYE,eAAAA,CAAgBgB,iBAAiB,EAAE;gBAAEd,KAAAA,EAAOnB;AAAK,aAAA,CAAA;AAC/D,QAAA;AACF,KAAA;AACF;;;;"}

package/dist/admin/preview/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var PreviewSidePanel = require('./components/PreviewSidePanel.js');
+
+const previewAdmin = {
+    bootstrap (app) {
+        const contentManagerPluginApis = app.getPlugin('content-manager').apis;
+        contentManagerPluginApis.addEditViewSidePanel((panels)=>{
+            // Insert PreviewSidePanel after the actions panel
+            const actionsPanelIndex = panels.findIndex((panel)=>panel.type === 'actions');
+            return [
+                ...panels.slice(0, actionsPanelIndex + 1),
+                PreviewSidePanel.PreviewSidePanel,
+                ...panels.slice(actionsPanelIndex + 1)
+            ];
+        });
+    }
+};
+
+exports.previewAdmin = previewAdmin;
+//# sourceMappingURL=index.js.map

package/dist/admin/preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../admin/src/preview/index.ts"],"sourcesContent":["/* eslint-disable check-file/no-index */\r\n\r\nimport { PreviewSidePanel } from './components/PreviewSidePanel';\r\n\r\nimport type { ContentManagerPlugin, PanelComponent } from '../content-manager';\r\nimport type { PluginDefinition } from '@strapi/admin/strapi-admin';\r\n\r\nconst previewAdmin: Partial<PluginDefinition> = {\r\n  bootstrap(app) {\r\n    const contentManagerPluginApis = app.getPlugin('content-manager')\r\n      .apis as ContentManagerPlugin['config']['apis'];\r\n\r\n    contentManagerPluginApis.addEditViewSidePanel((panels) => {\r\n      // Insert PreviewSidePanel after the actions panel\r\n      const actionsPanelIndex = panels.findIndex(\r\n        (panel) => (panel as PanelComponent).type === 'actions'\r\n      );\r\n      return [\r\n        ...panels.slice(0, actionsPanelIndex + 1),\r\n        PreviewSidePanel,\r\n        ...panels.slice(actionsPanelIndex + 1),\r\n      ];\r\n    });\r\n  },\r\n};\r\n\r\nexport { previewAdmin };\r\n"],"names":["previewAdmin","bootstrap","app","contentManagerPluginApis","getPlugin","apis","addEditViewSidePanel","panels","actionsPanelIndex","findIndex","panel","type","slice","PreviewSidePanel"],"mappings":";;;;AAOA,MAAMA,YAAAA,GAA0C;AAC9CC,IAAAA,SAAAA,CAAAA,CAAUC,GAAG,EAAA;AACX,QAAA,MAAMC,wBAAAA,GAA2BD,GAAAA,CAAIE,SAAS,CAAC,mBAC5CC,IAAI;QAEPF,wBAAAA,CAAyBG,oBAAoB,CAAC,CAACC,MAAAA,GAAAA;;YAE7C,MAAMC,iBAAAA,GAAoBD,OAAOE,SAAS,CACxC,CAACC,KAAAA,GAAWA,KAAAA,CAAyBC,IAAI,KAAK,SAAA,CAAA;YAEhD,OAAO;mBACFJ,MAAAA,CAAOK,KAAK,CAAC,CAAA,EAAGJ,iBAAAA,GAAoB,CAAA,CAAA;AACvCK,gBAAAA,iCAAAA;mBACGN,MAAAA,CAAOK,KAAK,CAACJ,iBAAAA,GAAoB,CAAA;AACrC,aAAA;AACH,QAAA,CAAA,CAAA;AACF,IAAA;AACF;;;;"}

package/dist/admin/preview/index.mjs

@@ -0,0 +1,19 @@
+import { PreviewSidePanel } from './components/PreviewSidePanel.mjs';
+
+const previewAdmin = {
+    bootstrap (app) {
+        const contentManagerPluginApis = app.getPlugin('content-manager').apis;
+        contentManagerPluginApis.addEditViewSidePanel((panels)=>{
+            // Insert PreviewSidePanel after the actions panel
+            const actionsPanelIndex = panels.findIndex((panel)=>panel.type === 'actions');
+            return [
+                ...panels.slice(0, actionsPanelIndex + 1),
+                PreviewSidePanel,
+                ...panels.slice(actionsPanelIndex + 1)
+            ];
+        });
+    }
+};
+
+export { previewAdmin };
+//# sourceMappingURL=index.mjs.map

package/dist/admin/preview/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../admin/src/preview/index.ts"],"sourcesContent":["/* eslint-disable check-file/no-index */\r\n\r\nimport { PreviewSidePanel } from './components/PreviewSidePanel';\r\n\r\nimport type { ContentManagerPlugin, PanelComponent } from '../content-manager';\r\nimport type { PluginDefinition } from '@strapi/admin/strapi-admin';\r\n\r\nconst previewAdmin: Partial<PluginDefinition> = {\r\n  bootstrap(app) {\r\n    const contentManagerPluginApis = app.getPlugin('content-manager')\r\n      .apis as ContentManagerPlugin['config']['apis'];\r\n\r\n    contentManagerPluginApis.addEditViewSidePanel((panels) => {\r\n      // Insert PreviewSidePanel after the actions panel\r\n      const actionsPanelIndex = panels.findIndex(\r\n        (panel) => (panel as PanelComponent).type === 'actions'\r\n      );\r\n      return [\r\n        ...panels.slice(0, actionsPanelIndex + 1),\r\n        PreviewSidePanel,\r\n        ...panels.slice(actionsPanelIndex + 1),\r\n      ];\r\n    });\r\n  },\r\n};\r\n\r\nexport { previewAdmin };\r\n"],"names":["previewAdmin","bootstrap","app","contentManagerPluginApis","getPlugin","apis","addEditViewSidePanel","panels","actionsPanelIndex","findIndex","panel","type","slice","PreviewSidePanel"],"mappings":";;AAOA,MAAMA,YAAAA,GAA0C;AAC9CC,IAAAA,SAAAA,CAAAA,CAAUC,GAAG,EAAA;AACX,QAAA,MAAMC,wBAAAA,GAA2BD,GAAAA,CAAIE,SAAS,CAAC,mBAC5CC,IAAI;QAEPF,wBAAAA,CAAyBG,oBAAoB,CAAC,CAACC,MAAAA,GAAAA;;YAE7C,MAAMC,iBAAAA,GAAoBD,OAAOE,SAAS,CACxC,CAACC,KAAAA,GAAWA,KAAAA,CAAyBC,IAAI,KAAK,SAAA,CAAA;YAEhD,OAAO;mBACFJ,MAAAA,CAAOK,KAAK,CAAC,CAAA,EAAGJ,iBAAAA,GAAoB,CAAA,CAAA;AACvCK,gBAAAA,gBAAAA;mBACGN,MAAAA,CAAOK,KAAK,CAACJ,iBAAAA,GAAoB,CAAA;AACrC,aAAA;AACH,QAAA,CAAA,CAAA;AACF,IAAA;AACF;;;;"}