@devx-labs/strapi-preview 1.0.4 → 1.0.6

package/README.md

@@ -14,18 +14,9 @@ yarn add @devx-labs/strapi-preview
 bun add @devx-labs/strapi-preview
 ```
 
-Register the plugin in `config/plugins.ts` (Strapi only auto-discovers packages whose names start with `strapi-plugin-` — this one uses a scope, so an explicit entry is needed):
+Strapi auto-discovers the plugin from `node_modules` on next boot — no `config/plugins.ts` entry required.
 
-```ts
-export default () => ({
-  'component-preview-image': {
-    enabled: true,
-    resolve: '@devx-labs/strapi-preview',
-  },
-});
-```
-
-The plugin's internal id is `component-preview-image` (that's why the key in the config object is `component-preview-image`, not `strapi-preview`). Don't change that key.
+> If you want to disable it or pass options later, the plugin's internal id is `component-preview-image` (set via `strapi.name`). Use that as the key in `config/plugins.ts`, e.g. `'component-preview-image': { enabled: false }`.
 
 Rebuild the admin:
 

package/dist/_chunks/PreviewImageInput-BGcDjyJY.js

@@ -0,0 +1,58 @@
+"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 index = require("./index-7LCKy9W3.js");
+const ModalContent = index.yt(designSystem.Modal.Content)`
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+`;
+const PreviewImageInput = ({ attribute }) => {
+  const url = attribute?.options?.url;
+  const disableIframe = attribute?.options?.disableIframe;
+  if (!url) return null;
+  if (disableIframe) {
+    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"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}), children: "Preview" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Component Preview" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          hasRadius: true,
+          style: { height: "80vh" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              src: url,
+              title: "Component Preview",
+              width: "100%",
+              height: "100%",
+              style: { border: "none" }
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: "Close" }) }) })
+    ] })
+  ] }) });
+};
+exports.PreviewImageInput = PreviewImageInput;

package/dist/_chunks/PreviewImageInput-Bg9tFBc4.mjs

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flex, LinkButton, Modal, Button, Box } from "@strapi/design-system";
+import { ExternalLink } from "@strapi/icons";
+import { y as yt } from "./index-BUqIITfj.mjs";
+const ModalContent = yt(Modal.Content)`
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+`;
+const PreviewImageInput = ({ attribute }) => {
+  const url = attribute?.options?.url;
+  const disableIframe = attribute?.options?.disableIframe;
+  if (!url) return null;
+  if (disableIframe) {
+    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"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Modal.Root, { children: [
+    /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", endIcon: /* @__PURE__ */ jsx(ExternalLink, {}), children: "Preview" }) }),
+    /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Component Preview" }) }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          hasRadius: true,
+          style: { height: "80vh" },
+          children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: url,
+              title: "Component Preview",
+              width: "100%",
+              height: "100%",
+              style: { border: "none" }
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: "Close" }) }) })
+    ] })
+  ] }) });
+};
+export {
+  PreviewImageInput
+};