@devx-labs/strapi-preview 1.0.5 → 1.0.6

package/dist/admin/index.js

@@ -1,203 +1,3 @@
 "use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const designSystem = require("@strapi/design-system");
-const strapiAdmin = require("@strapi/content-manager/strapi-admin");
-const admin = require("@strapi/strapi/admin");
-const icons = require("@strapi/icons");
-const collectPreviewItems = (value, attributes, componentSchemas, optionsMap) => {
-  const items = [];
-  if (!value || !attributes || typeof value !== "object") return items;
-  const pushItem = (componentUid, tempKey) => {
-    const opts = optionsMap[componentUid];
-    if (!opts) return;
-    const schema = componentSchemas[componentUid];
-    items.push({
-      uid: componentUid,
-      displayName: schema?.info?.displayName ?? componentUid,
-      previewUrl: opts.url,
-      previewName: opts.name,
-      count: 1,
-      tempKey
-    });
-  };
-  for (const [attributeName, attribute] of Object.entries(attributes)) {
-    const attributeValue = value[attributeName];
-    if (!attributeValue) continue;
-    if (attribute.type === "dynamiczone" && Array.isArray(attributeValue)) {
-      for (const item of attributeValue) {
-        if (!item || typeof item !== "object") continue;
-        const componentUid = item.__component;
-        const tempKey = item.__temp_key__;
-        if (componentUid) pushItem(componentUid, tempKey);
-      }
-      continue;
-    }
-    if (attribute.type === "component" && attribute.component) {
-      const componentUid = attribute.component;
-      if (attribute.repeatable && Array.isArray(attributeValue)) {
-        for (let i = 0; i < attributeValue.length; i++) {
-          const item = attributeValue[i];
-          pushItem(componentUid, item?.__temp_key__);
-        }
-      } else {
-        pushItem(componentUid);
-      }
-    }
-  }
-  return items;
-};
-const ComponentPreviewPanel = () => {
-  const { components, contentType, isCreatingEntry } = strapiAdmin.unstable_useContentManagerContext();
-  const values = admin.useForm("ComponentPreviewPanel", (state) => state.values);
-  const { get } = admin.useFetchClient();
-  const [optionsMap, setOptionsMap] = react.useState({});
-  react.useEffect(() => {
-    let cancelled = false;
-    get("/api/component-preview-image/options").then(({ data }) => {
-      if (!cancelled) setOptionsMap(data ?? {});
-    }).catch(() => {
-      if (!cancelled) setOptionsMap({});
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  const previewItems = collectPreviewItems(
-    values,
-    contentType?.attributes,
-    components,
-    optionsMap
-  );
-  if (isCreatingEntry) {
-    return {
-      title: "Component previews",
-      content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Save this entry once to load component previews." })
-    };
-  }
-  if (previewItems.length === 0) {
-    return {
-      title: "Component previews",
-      content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "No component previews are available for this entry yet." })
-    };
-  }
-  return {
-    title: "Component previews",
-    content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, alignItems: "stretch", children: previewItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Box,
-      {
-        borderColor: "neutral200",
-        background: "neutral0",
-        hasRadius: true,
-        padding: 3,
-        shadow: "tableShadow",
-        width: "100%",
-        overflow: "hidden",
-        style: { boxSizing: "border-box" },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: item.previewUrl,
-              alt: item.previewName || item.displayName,
-              style: {
-                width: "100%",
-                maxWidth: "100%",
-                display: "block",
-                borderRadius: "8px",
-                border: "1px solid #dcdce4",
-                objectFit: "cover",
-                boxSizing: "border-box"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Flex,
-            {
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              gap: 2,
-              width: "100%",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { minWidth: 0, flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral800", children: item.previewName || item.displayName }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Typography,
-                    {
-                      variant: "pi",
-                      textColor: "neutral600",
-                      style: {
-                        display: "block",
-                        overflowWrap: "anywhere",
-                        wordBreak: "break-word"
-                      },
-                      children: item.uid
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Button,
-                  {
-                    variant: "tertiary",
-                    size: "S",
-                    tag: "a",
-                    href: item.previewUrl,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
-                    style: { flexShrink: 0 },
-                    children: "Open"
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      },
-      item.tempKey ?? `${index2}-${item.uid}`
-    )) })
-  };
-};
-const index = {
-  register(app) {
-    app.customFields.register({
-      name: "preview-image",
-      pluginId: "component-preview-image",
-      type: "string",
-      inputSize: { default: 12, isResizable: false },
-      intlLabel: {
-        id: "component-preview-image.preview-image.label",
-        defaultMessage: "Preview Image"
-      },
-      intlDescription: {
-        id: "component-preview-image.preview-image.description",
-        defaultMessage: "Schema-level preview image — set the image URL once in the Content-Type Builder, shown in the edit-view side panel"
-      },
-      components: {
-        Input: async () => Promise.resolve().then(() => require("../_chunks/PreviewImageInput-Bha74a3E.js")).then((mod) => ({
-          default: mod.PreviewImageInput
-        }))
-      },
-      options: {
-        base: [
-          {
-            name: "options.url",
-            type: "text",
-            intlLabel: {
-              id: "component-preview-image.options.url.label",
-              defaultMessage: "Preview Image URL"
-            },
-            description: {
-              id: "component-preview-image.options.url.description",
-              defaultMessage: "Direct URL of the image to display in the preview panel"
-            }
-          }
-        ]
-      }
-    });
-  },
-  bootstrap(app) {
-    app.getPlugin("content-manager").apis.addEditViewSidePanel([ComponentPreviewPanel]);
-  }
-};
-module.exports = index;
+const index = require("../_chunks/index-7LCKy9W3.js");
+module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,204 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Typography, Flex, Box, Button } from "@strapi/design-system";
-import { unstable_useContentManagerContext } from "@strapi/content-manager/strapi-admin";
-import { useForm, useFetchClient } from "@strapi/strapi/admin";
-import { ExternalLink } from "@strapi/icons";
-const collectPreviewItems = (value, attributes, componentSchemas, optionsMap) => {
-  const items = [];
-  if (!value || !attributes || typeof value !== "object") return items;
-  const pushItem = (componentUid, tempKey) => {
-    const opts = optionsMap[componentUid];
-    if (!opts) return;
-    const schema = componentSchemas[componentUid];
-    items.push({
-      uid: componentUid,
-      displayName: schema?.info?.displayName ?? componentUid,
-      previewUrl: opts.url,
-      previewName: opts.name,
-      count: 1,
-      tempKey
-    });
-  };
-  for (const [attributeName, attribute] of Object.entries(attributes)) {
-    const attributeValue = value[attributeName];
-    if (!attributeValue) continue;
-    if (attribute.type === "dynamiczone" && Array.isArray(attributeValue)) {
-      for (const item of attributeValue) {
-        if (!item || typeof item !== "object") continue;
-        const componentUid = item.__component;
-        const tempKey = item.__temp_key__;
-        if (componentUid) pushItem(componentUid, tempKey);
-      }
-      continue;
-    }
-    if (attribute.type === "component" && attribute.component) {
-      const componentUid = attribute.component;
-      if (attribute.repeatable && Array.isArray(attributeValue)) {
-        for (let i = 0; i < attributeValue.length; i++) {
-          const item = attributeValue[i];
-          pushItem(componentUid, item?.__temp_key__);
-        }
-      } else {
-        pushItem(componentUid);
-      }
-    }
-  }
-  return items;
-};
-const ComponentPreviewPanel = () => {
-  const { components, contentType, isCreatingEntry } = unstable_useContentManagerContext();
-  const values = useForm("ComponentPreviewPanel", (state) => state.values);
-  const { get } = useFetchClient();
-  const [optionsMap, setOptionsMap] = useState({});
-  useEffect(() => {
-    let cancelled = false;
-    get("/api/component-preview-image/options").then(({ data }) => {
-      if (!cancelled) setOptionsMap(data ?? {});
-    }).catch(() => {
-      if (!cancelled) setOptionsMap({});
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  const previewItems = collectPreviewItems(
-    values,
-    contentType?.attributes,
-    components,
-    optionsMap
-  );
-  if (isCreatingEntry) {
-    return {
-      title: "Component previews",
-      content: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Save this entry once to load component previews." })
-    };
-  }
-  if (previewItems.length === 0) {
-    return {
-      title: "Component previews",
-      content: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "No component previews are available for this entry yet." })
-    };
-  }
-  return {
-    title: "Component previews",
-    content: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: previewItems.map((item, index2) => /* @__PURE__ */ jsx(
-      Box,
-      {
-        borderColor: "neutral200",
-        background: "neutral0",
-        hasRadius: true,
-        padding: 3,
-        shadow: "tableShadow",
-        width: "100%",
-        overflow: "hidden",
-        style: { boxSizing: "border-box" },
-        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: item.previewUrl,
-              alt: item.previewName || item.displayName,
-              style: {
-                width: "100%",
-                maxWidth: "100%",
-                display: "block",
-                borderRadius: "8px",
-                border: "1px solid #dcdce4",
-                objectFit: "cover",
-                boxSizing: "border-box"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              gap: 2,
-              width: "100%",
-              children: [
-                /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0, flex: 1 }, children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral800", children: item.previewName || item.displayName }),
-                  /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      variant: "pi",
-                      textColor: "neutral600",
-                      style: {
-                        display: "block",
-                        overflowWrap: "anywhere",
-                        wordBreak: "break-word"
-                      },
-                      children: item.uid
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "tertiary",
-                    size: "S",
-                    tag: "a",
-                    href: item.previewUrl,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
-                    style: { flexShrink: 0 },
-                    children: "Open"
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      },
-      item.tempKey ?? `${index2}-${item.uid}`
-    )) })
-  };
-};
-const index = {
-  register(app) {
-    app.customFields.register({
-      name: "preview-image",
-      pluginId: "component-preview-image",
-      type: "string",
-      inputSize: { default: 12, isResizable: false },
-      intlLabel: {
-        id: "component-preview-image.preview-image.label",
-        defaultMessage: "Preview Image"
-      },
-      intlDescription: {
-        id: "component-preview-image.preview-image.description",
-        defaultMessage: "Schema-level preview image — set the image URL once in the Content-Type Builder, shown in the edit-view side panel"
-      },
-      components: {
-        Input: async () => import("../_chunks/PreviewImageInput-BcPJkyKS.mjs").then((mod) => ({
-          default: mod.PreviewImageInput
-        }))
-      },
-      options: {
-        base: [
-          {
-            name: "options.url",
-            type: "text",
-            intlLabel: {
-              id: "component-preview-image.options.url.label",
-              defaultMessage: "Preview Image URL"
-            },
-            description: {
-              id: "component-preview-image.options.url.description",
-              defaultMessage: "Direct URL of the image to display in the preview panel"
-            }
-          }
-        ]
-      }
-    });
-  },
-  bootstrap(app) {
-    app.getPlugin("content-manager").apis.addEditViewSidePanel([ComponentPreviewPanel]);
-  }
-};
+import { i } from "../_chunks/index-BUqIITfj.mjs";
 export {
-  index as default
+  i as default
 };

package/dist/server/index.js

@@ -8,7 +8,8 @@ const optionsController = ({ strapi }) => ({
         if (attr.customField === CUSTOM_FIELD_KEY && attr.options?.url) {
           result[uid] = {
             name: schema.info?.displayName || uid,
-            url: attr.options.url
+            url: attr.options.url,
+            disableIframe: Boolean(attr.options.disableIframe)
           };
           break;
         }

package/dist/server/index.mjs

@@ -7,7 +7,8 @@ const optionsController = ({ strapi }) => ({
         if (attr.customField === CUSTOM_FIELD_KEY && attr.options?.url) {
           result[uid] = {
             name: schema.info?.displayName || uid,
-            url: attr.options.url
+            url: attr.options.url,
+            disableIframe: Boolean(attr.options.disableIframe)
           };
           break;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devx-labs/strapi-preview",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Strapi 5 plugin that adds a preview-image custom field (configured per component in the Content-Type Builder with a direct image URL) and renders a side panel in the edit view showing each component's preview image in dynamic-zone order.",
   "keywords": [
     "strapi",

package/dist/_chunks/PreviewImageInput-BcPJkyKS.mjs

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Flex, LinkButton } from "@strapi/design-system";
-import { ExternalLink } from "@strapi/icons";
-const PreviewImageInput = ({ attribute }) => {
-  const url = attribute?.options?.url;
-  if (!url) return null;
-  return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(
-    LinkButton,
-    {
-      href: url,
-      target: "_blank",
-      rel: "noreferrer",
-      variant: "tertiary",
-      size: "S",
-      endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
-      children: "Preview"
-    }
-  ) });
-};
-export {
-  PreviewImageInput
-};

package/dist/_chunks/PreviewImageInput-Bha74a3E.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const designSystem = require("@strapi/design-system");
-const icons = require("@strapi/icons");
-const PreviewImageInput = ({ attribute }) => {
-  const url = attribute?.options?.url;
-  if (!url) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.LinkButton,
-    {
-      href: url,
-      target: "_blank",
-      rel: "noreferrer",
-      variant: "tertiary",
-      size: "S",
-      endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
-      children: "Preview"
-    }
-  ) });
-};
-exports.PreviewImageInput = PreviewImageInput;