@comet/site-react 7.21.0-canary-20250522145352

package/lib/iframebridge/IFrameBridge.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import isEqual from "lodash.isequal";
+import { createContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useDebounceCallback } from "usehooks-ts";
+import styles from "./IFrameBridge.module.scss.js";
+import { AdminMessageType, IFrameMessageType } from "./IFrameMessage.js";
+import { PreviewOverlay } from "./PreviewOverlay.js";
+import { getRecursiveChildrenOfPreviewElement, getCombinedPositioningOfElements, PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT } from "./utils.js";
+const IFrameBridgeContext = createContext({
+  hasBridge: false,
+  showOutlines: false,
+  showOnlyVisible: false,
+  sendSelectComponent: () => {
+  },
+  sendHoverComponent: () => {
+  },
+  sendMessage: () => {
+  },
+  contentScope: void 0,
+  graphQLApiUrl: void 0,
+  previewElementsData: [],
+  removePreviewElement: () => {
+  },
+  addPreviewElement: () => {
+  }
+});
+const IFrameBridgeProvider = ({ children }) => {
+  var _a;
+  const [block, setBlock] = useState(void 0);
+  const [showOnlyVisible, setShowOnlyVisible] = useState(false);
+  const [selectedAdminRoute, setSelectedAdminRoute] = useState(void 0);
+  const [hoveredAdminRoute, setHoveredAdminRoute] = useState(null);
+  const [showOutlines, setShowOutlines] = useState(false);
+  const [contentScope, setContentScope] = useState(void 0);
+  const [graphQLApiUrl, setGraphQLApiUrl] = useState("");
+  const [previewElements, setPreviewElements] = useState([]);
+  const [previewElementsData, setPreviewElementsData] = useState([]);
+  const childrenWrapperRef = useRef(null);
+  const childrenWrapperWidth = (_a = childrenWrapperRef.current) == null ? void 0 : _a.offsetWidth;
+  const recalculatePreviewElementsData = useCallback(() => {
+    if (!childrenWrapperWidth) {
+      return;
+    }
+    const newPreviewElementsData = previewElements.map((previewElement) => {
+      const childNodes = getRecursiveChildrenOfPreviewElement(previewElement.element);
+      const positioning = getCombinedPositioningOfElements(childNodes);
+      const isRenderedOutsideOfViewportWidth = positioning.left > childrenWrapperWidth;
+      if (isRenderedOutsideOfViewportWidth) {
+        return {
+          adminRoute: previewElement.adminRoute,
+          label: previewElement.label,
+          position: {
+            top: positioning.top,
+            left: positioning.left,
+            width: 0,
+            height: positioning.height
+          }
+        };
+      }
+      const spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport = positioning.left + positioning.width - childrenWrapperWidth;
+      const tooWideForPreviewViewportByPixels = spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport > 0 ? spaceBetweenRightEdgeOfElementAndRightEdgeOfViewport : 0;
+      return {
+        adminRoute: previewElement.adminRoute,
+        label: previewElement.label,
+        position: {
+          top: positioning.top,
+          left: positioning.left,
+          width: positioning.width - tooWideForPreviewViewportByPixels,
+          height: positioning.height
+        }
+      };
+    }).filter((elementData) => elementData.position.width !== 0).sort((previousElementData, nextElementData) => {
+      const previousSize = previousElementData.position.width * previousElementData.position.height;
+      const nextSize = nextElementData.position.width * nextElementData.position.height;
+      return nextSize - previousSize;
+    }).map((elementData, index) => {
+      return {
+        ...elementData,
+        position: {
+          ...elementData.position,
+          zIndex: index + 1
+        }
+      };
+    });
+    setPreviewElementsData((previousElementsData) => {
+      const dataDidNotChange = isEqual(previousElementsData, newPreviewElementsData);
+      if (dataDidNotChange) {
+        return previousElementsData;
+      }
+      return newPreviewElementsData;
+    });
+  }, [previewElements, childrenWrapperWidth]);
+  useEffect(() => {
+    if (childrenWrapperRef.current) {
+      const mutationObserver = new MutationObserver(() => {
+        recalculatePreviewElementsData();
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        recalculatePreviewElementsData();
+      });
+      mutationObserver.observe(childrenWrapperRef.current, { childList: true, subtree: true, attributes: true });
+      resizeObserver.observe(childrenWrapperRef.current);
+      return () => {
+        mutationObserver.disconnect();
+        resizeObserver.disconnect();
+      };
+    }
+  }, [recalculatePreviewElementsData]);
+  useEffect(() => {
+    previewElements.forEach((previewElement) => {
+      previewElement.element.addEventListener(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, recalculatePreviewElementsData);
+    });
+    return () => {
+      previewElements.forEach((previewElement) => {
+        previewElement.element.removeEventListener(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, recalculatePreviewElementsData);
+      });
+    };
+  }, [previewElements, recalculatePreviewElementsData]);
+  const sendMessage = useCallback((message) => {
+    window.parent.postMessage(JSON.stringify(message), "*");
+  }, []);
+  const debounceDeactivateOutlines = useDebounceCallback(() => {
+    setShowOutlines(false);
+  }, 2500);
+  const onReceiveMessage = useCallback(
+    (message) => {
+      switch (message.cometType) {
+        case AdminMessageType.Block:
+          setBlock(message.data.block);
+          break;
+        case AdminMessageType.ShowOnlyVisible:
+          setShowOnlyVisible(message.data.showOnlyVisible);
+          break;
+        case AdminMessageType.SelectComponent:
+          setSelectedAdminRoute(
+            message.data.adminRoute.lastIndexOf("#") > 0 ? message.data.adminRoute.substr(0, message.data.adminRoute.lastIndexOf("#")) : message.data.adminRoute
+          );
+          break;
+        case AdminMessageType.HoverComponent:
+          setHoveredAdminRoute(message.data.adminRoute);
+          setShowOutlines(true);
+          debounceDeactivateOutlines();
+          break;
+        case AdminMessageType.ContentScope:
+          setContentScope(message.data.contentScope);
+          break;
+        case AdminMessageType.GraphQLApiUrl:
+          setGraphQLApiUrl(message.data.graphQLApiUrl);
+          break;
+      }
+    },
+    [debounceDeactivateOutlines]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleMessage = (e) => {
+      try {
+        const message = JSON.parse(e.data);
+        if (message.hasOwnProperty("cometType")) {
+          onReceiveMessage(message);
+        }
+      } catch (e2) {
+      }
+    };
+    window.addEventListener("message", handleMessage, false);
+    sendMessage({ cometType: IFrameMessageType.Ready });
+    return () => {
+      window.removeEventListener("message", handleMessage, false);
+    };
+  }, [onReceiveMessage, sendMessage]);
+  const addPreviewElement = useCallback(
+    (element) => {
+      setPreviewElements((prev) => [...prev, element]);
+    },
+    [setPreviewElements]
+  );
+  const removePreviewElement = useCallback(
+    (element) => {
+      setPreviewElements((prev) => prev.filter((el) => el.adminRoute !== element.adminRoute));
+    },
+    [setPreviewElements]
+  );
+  const iFrameBridgeValues = useMemo(
+    () => ({
+      showOutlines,
+      hasBridge: true,
+      block,
+      showOnlyVisible,
+      selectedAdminRoute,
+      hoveredAdminRoute,
+      sendSelectComponent: (adminRoute) => {
+        setSelectedAdminRoute(adminRoute);
+        sendMessage({ cometType: IFrameMessageType.SelectComponent, data: { adminRoute } });
+      },
+      sendHoverComponent: (route) => {
+        sendMessage({ cometType: IFrameMessageType.HoverComponent, data: { route } });
+      },
+      sendMessage,
+      contentScope,
+      graphQLApiUrl,
+      previewElementsData,
+      addPreviewElement,
+      removePreviewElement
+    }),
+    [
+      showOutlines,
+      block,
+      showOnlyVisible,
+      selectedAdminRoute,
+      hoveredAdminRoute,
+      sendMessage,
+      contentScope,
+      graphQLApiUrl,
+      previewElementsData,
+      addPreviewElement,
+      removePreviewElement
+    ]
+  );
+  return /* @__PURE__ */ jsx(IFrameBridgeContext.Provider, { value: iFrameBridgeValues, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseMove: () => {
+        setShowOutlines(true);
+        debounceDeactivateOutlines();
+      },
+      children: [
+        /* @__PURE__ */ jsx(PreviewOverlay, {}),
+        /* @__PURE__ */ jsx("div", { ref: childrenWrapperRef, className: styles.childrenWrapper, children })
+      ]
+    }
+  ) });
+};
+export {
+  IFrameBridgeContext,
+  IFrameBridgeProvider
+};

package/lib/iframebridge/IFrameBridge.module.scss.js

@@ -0,0 +1,8 @@
+const childrenWrapper = "_childrenWrapper_qguhx_1";
+const styles = {
+  childrenWrapper
+};
+export {
+  childrenWrapper,
+  styles as default
+};

package/lib/iframebridge/IFrameMessage.d.ts

@@ -0,0 +1,118 @@
+import { ExternalLinkBlockData } from '../blocks.generated';
+export declare enum IFrameMessageType {
+    Ready = "Ready",
+    SelectComponent = "SelectComponent",
+    HoverComponent = "HoverComponent",
+    /**
+     * @deprecated Use SitePreviewIFrameMessageType.OpenLink instead
+     */
+    OpenLink = "OpenLink",
+    /**
+     * @deprecated Use SitePreviewIFrameMessageType.SitePreviewLocation instead
+     */
+    SitePreviewLocation = "SitePreviewLocation"
+}
+/**
+ * The `IReadyIFrameMessage` message is sent from the site to the admin when the iFrame is ready to receive messages.
+ */
+export interface IReadyIFrameMessage {
+    cometType: IFrameMessageType.Ready;
+}
+/**
+ * The `IFrameSelectComponentMessage` is sent from the site to the admin when a component is selected in the iFrame.
+ *
+ * The admin interface will then try to navigate to the corresponding block's admin interface.
+ */
+export interface IFrameSelectComponentMessage {
+    cometType: IFrameMessageType.SelectComponent;
+    data: {
+        adminRoute: string;
+    };
+}
+/**
+ * @deprecated Use SitePreviewIFrameOpenLinkMessage instead
+ */
+export interface IFrameOpenLinkMessage {
+    cometType: IFrameMessageType.OpenLink;
+    data: {
+        link: ExternalLinkBlockData;
+    };
+}
+/**
+ * @deprecated Use SitePreviewIFrameLocationMessage instead
+ */
+export interface IFrameLocationMessage {
+    cometType: IFrameMessageType.SitePreviewLocation;
+    data: Pick<Location, "search" | "pathname">;
+}
+/**
+ * The `IFrameHoverComponentMessage` is sent from the site to the admin, when a component is hovered in the iFrame and should be highlighted in the admin interface.
+ */
+export interface IFrameHoverComponentMessage {
+    cometType: IFrameMessageType.HoverComponent;
+    data: {
+        route: string | null;
+    };
+}
+export type IFrameMessage = IReadyIFrameMessage | IFrameSelectComponentMessage | IFrameOpenLinkMessage | IFrameLocationMessage | IFrameHoverComponentMessage;
+export declare enum AdminMessageType {
+    Block = "Block",
+    ShowOnlyVisible = "ShowOnlyVisible",
+    SelectComponent = "SelectComponent",
+    HoverComponent = "HoverComponent",
+    ContentScope = "ContentScope",
+    GraphQLApiUrl = "GraphQLApiUrl"
+}
+/**
+ * The `IAdminBlockMessage` is sent from the admin to the site, whih block should be displayed in the iFrame.
+ */
+export interface IAdminBlockMessage {
+    cometType: AdminMessageType.Block;
+    data: {
+        block: unknown;
+    };
+}
+/**
+ * The `IAdminShowOnlyVisibleMessage` is sent from the admin to the site, when the "Show only visible" checkbox is toggled.
+ */
+export interface IAdminShowOnlyVisibleMessage {
+    cometType: AdminMessageType.ShowOnlyVisible;
+    data: {
+        showOnlyVisible: boolean;
+    };
+}
+/**
+ * The `IAdminSelectComponentMessage` is sent from the admin to the site, when a component is selected in the admin interface.
+ */
+export interface IAdminSelectComponentMessage {
+    cometType: AdminMessageType.SelectComponent;
+    data: {
+        adminRoute: string;
+    };
+}
+/**
+ * The `IAdminHoverComponentMessage` is sent from the admin to the site, when a component is hovered in the admin interface.
+ */
+export interface IAdminHoverComponentMessage {
+    cometType: AdminMessageType.HoverComponent;
+    data: {
+        adminRoute: string | null;
+    };
+}
+/**
+ * The `IAdminContentScopeMessage` is sent from the admin to the site, when the content scope is changed in the admin interface.
+ */
+export interface IAdminContentScopeMessage {
+    cometType: AdminMessageType.ContentScope;
+    data: {
+        contentScope: unknown;
+    };
+}
+export interface IAdminGraphQLApiUrlMessage {
+    cometType: AdminMessageType.GraphQLApiUrl;
+    data: {
+        graphQLApiUrl: string;
+    };
+}
+export type AdminMessage = IAdminBlockMessage | IAdminSelectComponentMessage | IAdminHoverComponentMessage | IAdminContentScopeMessage | IAdminShowOnlyVisibleMessage | IAdminGraphQLApiUrlMessage;
+//# sourceMappingURL=IFrameMessage.d.ts.map

package/lib/iframebridge/IFrameMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrameMessage.d.ts","sourceRoot":"","sources":["../../src/iframebridge/IFrameMessage.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,oBAAY,iBAAiB;IACzB,KAAK,UAAU;IACf,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IACjC;;OAEG;IACH,QAAQ,aAAa;IACrB;;OAEG;IACH,mBAAmB,wBAAwB;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAAC;CACtC;AAED;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IACzC,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAC;IAC7C,IAAI,EAAE;QACF,UAAU,EAAE,MAAM,CAAC;KACtB,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,iBAAiB,CAAC,QAAQ,CAAC;IACtC,IAAI,EAAE;QACF,IAAI,EAAE,qBAAqB,CAAC;KAC/B,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,iBAAiB,CAAC,mBAAmB,CAAC;IACjD,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;CAC/C;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAAC;IAC5C,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACxB,CAAC;CACL;AAED,MAAM,MAAM,aAAa,GACnB,mBAAmB,GACnB,4BAA4B,GAC5B,qBAAqB,GACrB,qBAAqB,GACrB,2BAA2B,CAAC;AAGlC,oBAAY,gBAAgB;IACxB,KAAK,UAAU;IACf,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IACjC,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAClC,IAAI,EAAE;QACF,KAAK,EAAE,OAAO,CAAC;KAClB,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IACzC,SAAS,EAAE,gBAAgB,CAAC,eAAe,CAAC;IAC5C,IAAI,EAAE;QACF,eAAe,EAAE,OAAO,CAAC;KAC5B,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IACzC,SAAS,EAAE,gBAAgB,CAAC,eAAe,CAAC;IAC5C,IAAI,EAAE;QACF,UAAU,EAAE,MAAM,CAAC;KACtB,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,SAAS,EAAE,gBAAgB,CAAC,cAAc,CAAC;IAC3C,IAAI,EAAE;QACF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACzC,IAAI,EAAE;QACF,YAAY,EAAE,OAAO,CAAC;KACzB,CAAC;CACL;AAED,MAAM,WAAW,0BAA0B;IACvC,SAAS,EAAE,gBAAgB,CAAC,aAAa,CAAC;IAC1C,IAAI,EAAE;QACF,aAAa,EAAE,MAAM,CAAC;KACzB,CAAC;CACL;AAED,MAAM,MAAM,YAAY,GAClB,kBAAkB,GAClB,4BAA4B,GAC5B,2BAA2B,GAC3B,yBAAyB,GACzB,4BAA4B,GAC5B,0BAA0B,CAAC"}

package/lib/iframebridge/IFrameMessage.js

@@ -0,0 +1,21 @@
+var IFrameMessageType = /* @__PURE__ */ ((IFrameMessageType2) => {
+  IFrameMessageType2["Ready"] = "Ready";
+  IFrameMessageType2["SelectComponent"] = "SelectComponent";
+  IFrameMessageType2["HoverComponent"] = "HoverComponent";
+  IFrameMessageType2["OpenLink"] = "OpenLink";
+  IFrameMessageType2["SitePreviewLocation"] = "SitePreviewLocation";
+  return IFrameMessageType2;
+})(IFrameMessageType || {});
+var AdminMessageType = /* @__PURE__ */ ((AdminMessageType2) => {
+  AdminMessageType2["Block"] = "Block";
+  AdminMessageType2["ShowOnlyVisible"] = "ShowOnlyVisible";
+  AdminMessageType2["SelectComponent"] = "SelectComponent";
+  AdminMessageType2["HoverComponent"] = "HoverComponent";
+  AdminMessageType2["ContentScope"] = "ContentScope";
+  AdminMessageType2["GraphQLApiUrl"] = "GraphQLApiUrl";
+  return AdminMessageType2;
+})(AdminMessageType || {});
+export {
+  AdminMessageType,
+  IFrameMessageType
+};

package/lib/iframebridge/Preview.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface Props extends PropsWithChildren {
+    adminRoute: string;
+    label: string;
+    enabledAutoScrolling?: boolean;
+}
+export declare const Preview: ({ adminRoute, children, label, enabledAutoScrolling }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Preview.d.ts.map

package/lib/iframebridge/Preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/iframebridge/Preview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAOlE,UAAU,KAAM,SAAQ,iBAAiB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,OAAO,0DAAkE,KAAK,4CAyD1F,CAAC"}

package/lib/iframebridge/Preview.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import styles from "./Preview.module.scss.js";
+import { useIFrameBridge } from "./useIFrameBridge.js";
+import { PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT, BLOCK_PREVIEW_CONTAINER_DATA_ATTRIBUTE } from "./utils.js";
+const Preview = ({ adminRoute, children, label, enabledAutoScrolling = true }) => {
+  const { addPreviewElement, removePreviewElement, ...iFrameBridge } = useIFrameBridge();
+  const isSelected = adminRoute === iFrameBridge.selectedAdminRoute;
+  const isHovered = adminRoute === iFrameBridge.hoveredAdminRoute;
+  const previewElementContainerRef = useRef(null);
+  useEffect(() => {
+    const previewElement = previewElementContainerRef.current ? {
+      label,
+      adminRoute,
+      element: previewElementContainerRef.current
+    } : null;
+    if (previewElement) {
+      addPreviewElement(previewElement);
+      return () => {
+        removePreviewElement(previewElement);
+      };
+    }
+  }, [label, adminRoute, addPreviewElement, removePreviewElement]);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      var _a;
+      if (enabledAutoScrolling) {
+        if (isHovered || isSelected) {
+          if ((_a = previewElementContainerRef.current) == null ? void 0 : _a.firstElementChild) {
+            scrollIntoView(previewElementContainerRef.current.firstElementChild, {
+              scrollMode: "if-needed",
+              block: "center",
+              inline: "nearest",
+              behavior: "smooth"
+            });
+            setTimeout(() => {
+              var _a2;
+              (_a2 = previewElementContainerRef.current) == null ? void 0 : _a2.dispatchEvent(new Event(PREVIEW_ELEMENT_SCROLLED_INTO_VIEW_EVENT));
+            }, 600);
+          }
+        }
+      }
+    }, 500);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [enabledAutoScrolling, isHovered, isSelected]);
+  if (iFrameBridge.hasBridge) {
+    return /* @__PURE__ */ jsx("div", { ref: previewElementContainerRef, className: styles.previewElementContainer, ...{ [BLOCK_PREVIEW_CONTAINER_DATA_ATTRIBUTE]: "" }, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+export {
+  Preview
+};

package/lib/iframebridge/Preview.module.scss.js

@@ -0,0 +1,8 @@
+const previewElementContainer = "_previewElementContainer_nwhl6_1";
+const styles = {
+  previewElementContainer
+};
+export {
+  styles as default,
+  previewElementContainer
+};

package/lib/iframebridge/PreviewOverlay.d.ts

@@ -0,0 +1,2 @@
+export declare const PreviewOverlay: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PreviewOverlay.d.ts.map

package/lib/iframebridge/PreviewOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewOverlay.d.ts","sourceRoot":"","sources":["../../src/iframebridge/PreviewOverlay.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,+CA2B1B,CAAC"}

package/lib/iframebridge/PreviewOverlay.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./PreviewOverlay.module.scss.js";
+import { PreviewOverlayElement } from "./PreviewOverlayElement.js";
+import { useIFrameBridge } from "./useIFrameBridge.js";
+let lastSelectedElementPath = "";
+const PreviewOverlay = () => {
+  const iFrameBridge = useIFrameBridge();
+  let bottomMostElementPosition = 0;
+  iFrameBridge.previewElementsData.forEach((element) => {
+    if (element.position.zIndex > 1)
+      return;
+    const elementBottom = element.position.top + element.position.height;
+    if (elementBottom > bottomMostElementPosition) {
+      bottomMostElementPosition = elementBottom;
+    }
+  });
+  return /* @__PURE__ */ jsx("div", { className: styles.root, style: { "--height": `${bottomMostElementPosition}px` }, children: iFrameBridge.previewElementsData.map((element, index) => {
+    const isSelected = element.adminRoute === iFrameBridge.selectedAdminRoute;
+    if (isSelected && lastSelectedElementPath !== element.adminRoute) {
+      lastSelectedElementPath = element.adminRoute;
+    }
+    return /* @__PURE__ */ jsx(PreviewOverlayElement, { element }, index);
+  }) });
+};
+export {
+  PreviewOverlay
+};

package/lib/iframebridge/PreviewOverlay.module.scss.js

@@ -0,0 +1,8 @@
+const root = "_root_v4248_1";
+const styles = {
+  root
+};
+export {
+  styles as default,
+  root
+};

package/lib/iframebridge/PreviewOverlayElement.d.ts

@@ -0,0 +1,7 @@
+import { OverlayElementData } from './IFrameBridge';
+type Props = {
+    element: OverlayElementData;
+};
+export declare const PreviewOverlayElement: ({ element }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PreviewOverlayElement.d.ts.map

package/lib/iframebridge/PreviewOverlayElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewOverlayElement.d.ts","sourceRoot":"","sources":["../../src/iframebridge/PreviewOverlayElement.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,KAAK,KAAK,GAAG;IACT,OAAO,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,gBAAiB,KAAK,4CA8BvD,CAAC"}

package/lib/iframebridge/PreviewOverlayElement.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./PreviewOverlayElement.module.scss.js";
+import { useIFrameBridge } from "./useIFrameBridge.js";
+const PreviewOverlayElement = ({ element }) => {
+  const iFrameBridge = useIFrameBridge();
+  const isSelected = element.adminRoute === iFrameBridge.selectedAdminRoute;
+  const isHovered = element.adminRoute === iFrameBridge.hoveredAdminRoute;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        styles.root,
+        iFrameBridge.showOutlines && !isHovered && styles.showBlockOutlines,
+        isSelected && styles.blockIsSelected,
+        isHovered && styles.isHoveredInBlockList
+      ),
+      title: element.label,
+      onClick: () => {
+        iFrameBridge.sendSelectComponent(element.adminRoute);
+      },
+      onMouseEnter: () => {
+        iFrameBridge.sendHoverComponent(element.adminRoute);
+      },
+      onMouseLeave: () => {
+        iFrameBridge.sendHoverComponent(null);
+      },
+      style: element.position,
+      children: /* @__PURE__ */ jsx("div", { className: styles.label, children: element.label })
+    },
+    element.adminRoute
+  );
+};
+export {
+  PreviewOverlayElement
+};

package/lib/iframebridge/PreviewOverlayElement.module.scss.js

@@ -0,0 +1,20 @@
+const root = "_root_1ya0k_1";
+const isHoveredInBlockList = "_isHoveredInBlockList_1ya0k_24";
+const showBlockOutlines = "_showBlockOutlines_1ya0k_32";
+const blockIsSelected = "_blockIsSelected_1ya0k_37";
+const label = "_label_1ya0k_40";
+const styles = {
+  root,
+  isHoveredInBlockList,
+  showBlockOutlines,
+  blockIsSelected,
+  label
+};
+export {
+  blockIsSelected,
+  styles as default,
+  isHoveredInBlockList,
+  label,
+  root,
+  showBlockOutlines
+};

package/lib/iframebridge/useBlockPreviewFetch.d.ts

@@ -0,0 +1,16 @@
+import { GraphQLFetch } from '../graphQLFetch/graphQLFetch';
+type Fetch = typeof fetch;
+/**
+ * @deprecated Use useBlockPreviewFetch() without argument instead
+ * @param apiUrl the API URL
+ */
+export declare function useBlockPreviewFetch(apiUrl: string): {
+    fetch: Fetch;
+    graphQLFetch: GraphQLFetch;
+};
+export declare function useBlockPreviewFetch(apiUrl?: string | undefined): {
+    fetch: Fetch;
+    graphQLFetch?: GraphQLFetch;
+};
+export {};
+//# sourceMappingURL=useBlockPreviewFetch.d.ts.map

package/lib/iframebridge/useBlockPreviewFetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlockPreviewFetch.d.ts","sourceRoot":"","sources":["../../src/iframebridge/useBlockPreviewFetch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAA4E,MAAM,8BAA8B,CAAC;AAK3I,KAAK,KAAK,GAAG,OAAO,KAAK,CAAC;AAE1B;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AACnG,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC"}

package/lib/iframebridge/useBlockPreviewFetch.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { createFetchInMemoryCache } from "../graphQLFetch/fetchInMemoryCache.js";
+import { createGraphQLFetch, createFetchWithDefaults, convertPreviewDataToHeaders } from "../graphQLFetch/graphQLFetch.js";
+import { useIFrameBridge } from "./useIFrameBridge.js";
+const cachingFetch = createFetchInMemoryCache(fetch);
+function useBlockPreviewFetch(apiUrl) {
+  const { showOnlyVisible, graphQLApiUrl } = useIFrameBridge();
+  const [graphQLFetch, setGraphQLFetch] = useState(
+    () => apiUrl ? createBlockPreviewFetch(apiUrl, !showOnlyVisible) : void 0
+  );
+  useEffect(() => {
+    if (graphQLApiUrl) {
+      setGraphQLFetch(() => createBlockPreviewFetch(graphQLApiUrl, !showOnlyVisible));
+    }
+  }, [showOnlyVisible, graphQLApiUrl]);
+  return {
+    graphQLFetch,
+    fetch: cachingFetch
+  };
+}
+function createBlockPreviewFetch(graphqlApiUrl, includeInvisible) {
+  return createGraphQLFetch(
+    createFetchWithDefaults(cachingFetch, { headers: convertPreviewDataToHeaders({ includeInvisible }), credentials: "include" }),
+    graphqlApiUrl
+  );
+}
+export {
+  useBlockPreviewFetch
+};

package/lib/iframebridge/useIFrameBridge.d.ts

@@ -0,0 +1,3 @@
+import { IFrameBridgeContext } from './IFrameBridge';
+export declare function useIFrameBridge(): IFrameBridgeContext;
+//# sourceMappingURL=useIFrameBridge.d.ts.map

package/lib/iframebridge/useIFrameBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIFrameBridge.d.ts","sourceRoot":"","sources":["../../src/iframebridge/useIFrameBridge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,wBAAgB,eAAe,IAAI,mBAAmB,CAErD"}

package/lib/iframebridge/useIFrameBridge.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { IFrameBridgeContext } from "./IFrameBridge.js";
+function useIFrameBridge() {
+  return useContext(IFrameBridgeContext);
+}
+export {
+  useIFrameBridge
+};