@tecof/theme-editor 0.0.22 → 0.0.23

package/dist/index.mjs

@@ -27,6 +27,13 @@ import ReactDOM__default from 'react-dom';
 // src/api.ts
 var TecofApiClient = class {
   constructor(apiUrl, secretKey, customCdnUrl) {
+    /**
+     * Get a component preview screenshot as a Blob URL.
+     * Calls POST /api/store/component-preview with domain + componentName.
+     * Returns a blob:// URL that can be used as an img src.
+     * Results are cached client-side in a Map.
+     */
+    this.previewBlobCache = /* @__PURE__ */ new Map();
     this.apiUrl = apiUrl.replace(/\/+$/, "");
     this.secretKey = secretKey;
     this.customCdnUrl = customCdnUrl ? customCdnUrl.replace(/\/+$/, "") : void 0;
@@ -190,6 +197,30 @@ var TecofApiClient = class {
       };
     }
   }
+  async getComponentPreview(domain, componentName) {
+    const cacheKey = `${domain}:${componentName}`;
+    if (this.previewBlobCache.has(cacheKey)) {
+      return this.previewBlobCache.get(cacheKey);
+    }
+    try {
+      const res2 = await fetch(`${this.apiUrl}/api/store/component-preview`, {
+        method: "POST",
+        headers: {
+          "x-secret-key": this.secretKey,
+          Accept: "image/png",
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ domain, componentName })
+      });
+      if (!res2.ok) return null;
+      const blob2 = await res2.blob();
+      const blobUrl = URL.createObjectURL(blob2);
+      this.previewBlobCache.set(cacheKey, blobUrl);
+      return blobUrl;
+    } catch {
+      return null;
+    }
+  }
   /** CDN base URL (defaults to apiUrl if not set) */
   get cdnUrl() {
     return this.customCdnUrl || this.apiUrl;
@@ -216,6 +247,55 @@ function useTecof() {
   return ctx;
 }
 var EMPTY_PAGE = { content: [], root: { props: {} }, zones: {} };
+var ComponentDrawerItem = ({
+  name: name3,
+  apiClient,
+  children
+}) => {
+  const [imgSrc, setImgSrc] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error2, setError] = useState(false);
+  const fetchedRef = useRef(false);
+  const handleMouseEnter = useCallback(async () => {
+    if (fetchedRef.current) return;
+    fetchedRef.current = true;
+    setLoading(true);
+    try {
+      const domain = typeof window !== "undefined" ? window.location.hostname : "";
+      const blobUrl = await apiClient.getComponentPreview(domain, name3);
+      if (blobUrl) {
+        setImgSrc(blobUrl);
+      } else {
+        setError(true);
+      }
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [name3, apiClient]);
+  return /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-item-group group", onMouseEnter: handleMouseEnter, children: [
+    children,
+    /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover-header", children: [
+        name3,
+        " \xD6nizleme"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover-body", children: [
+        (loading || !imgSrc && !error2) && /* @__PURE__ */ jsx("div", { className: "tecof-drawer-skeleton" }),
+        imgSrc && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imgSrc,
+            alt: `${name3} preview`,
+            className: "tecof-drawer-img"
+          }
+        ),
+        error2 && /* @__PURE__ */ jsx("div", { className: "tecof-drawer-preview-error", children: "\xD6nizleme y\xFCklenemedi" })
+      ] })
+    ] })
+  ] });
+};
 var TecofEditor = ({
   pageId,
   config: config3,
@@ -357,36 +437,7 @@ var TecofEditor = ({
   const mergedOverrides = {
     header: () => /* @__PURE__ */ jsx(Fragment, {}),
     drawerItem: ({ children, name: name3 }) => {
-      const token = secretKey;
-      return /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-item-group group", children: [
-        children,
-        /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover", children: [
-          /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover-header", children: [
-            name3,
-            " \xD6nizleme"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "tecof-drawer-popover-body", children: [
-            /* @__PURE__ */ jsx("div", { className: "tecof-drawer-skeleton" }),
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: `/api/screenshot?componentName=${name3}&token=${token}`,
-                alt: `${name3} preview`,
-                className: "tecof-drawer-img",
-                onLoad: (e3) => {
-                  const loader2 = e3.currentTarget.previousElementSibling;
-                  if (loader2) loader2.remove();
-                },
-                onError: (e3) => {
-                  const loader2 = e3.currentTarget.previousElementSibling;
-                  if (loader2) loader2.remove();
-                  e3.currentTarget.style.display = "none";
-                }
-              }
-            )
-          ] })
-        ] })
-      ] });
+      return /* @__PURE__ */ jsx(ComponentDrawerItem, { name: name3, apiClient, children });
     },
     ...overrides || {}
   };