// packages/block-editor/src/components/block-preview/auto.js
import { useResizeObserver, useRefEffect } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { memo, useMemo } from "@wordpress/element";
import { Disabled } from "@wordpress/components";
import BlockList from "../block-list";
import Iframe from "../iframe";
import EditorStyles from "../editor-styles";
import { store } from "../../store";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var MemoizedBlockList = memo(BlockList);
var MAX_HEIGHT = 2e3;
var EMPTY_ADDITIONAL_STYLES = [];
function ScaledBlockPreview({
  viewportWidth,
  containerWidth,
  minHeight,
  additionalStyles = EMPTY_ADDITIONAL_STYLES
}) {
  if (!viewportWidth) {
    viewportWidth = containerWidth;
  }
  const [contentResizeListener, { height: contentHeight }] = useResizeObserver();
  const { styles } = useSelect((select) => {
    const settings = select(store).getSettings();
    return {
      styles: settings.styles
    };
  }, []);
  const editorStyles = useMemo(() => {
    if (styles) {
      return [
        ...styles,
        {
          css: "body{height:auto;overflow:hidden;border:none;padding:0;}",
          __unstableType: "presets"
        },
        ...additionalStyles
      ];
    }
    return styles;
  }, [styles, additionalStyles]);
  const scale = containerWidth / viewportWidth;
  const aspectRatio = contentHeight ? containerWidth / (contentHeight * scale) : 0;
  return /* @__PURE__ */ jsx(
    Disabled,
    {
      className: "block-editor-block-preview__content",
      style: {
        transform: `scale(${scale})`,
        // Using width + aspect-ratio instead of height here triggers browsers' native
        // handling of scrollbar's visibility. It prevents the flickering issue seen
        // in https://github.com/WordPress/gutenberg/issues/52027.
        // See https://github.com/WordPress/gutenberg/pull/52921 for more info.
        aspectRatio,
        maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : void 0,
        minHeight
      },
      children: /* @__PURE__ */ jsxs(
        Iframe,
        {
          contentRef: useRefEffect((bodyElement) => {
            const {
              ownerDocument: { documentElement }
            } = bodyElement;
            documentElement.classList.add(
              "block-editor-block-preview__content-iframe"
            );
            documentElement.style.position = "absolute";
            documentElement.style.width = "100%";
            bodyElement.style.boxSizing = "border-box";
            bodyElement.style.position = "absolute";
            bodyElement.style.width = "100%";
          }, []),
          "aria-hidden": true,
          tabIndex: -1,
          style: {
            position: "absolute",
            width: viewportWidth,
            height: contentHeight,
            pointerEvents: "none",
            // This is a catch-all max-height for patterns.
            // See: https://github.com/WordPress/gutenberg/pull/38175.
            maxHeight: MAX_HEIGHT,
            minHeight: scale !== 0 && scale < 1 && minHeight ? minHeight / scale : minHeight
          },
          children: [
            /* @__PURE__ */ jsx(EditorStyles, { styles: editorStyles }),
            contentResizeListener,
            /* @__PURE__ */ jsx(MemoizedBlockList, { renderAppender: false })
          ]
        }
      )
    }
  );
}
function AutoBlockPreview(props) {
  const [containerResizeListener, { width: containerWidth }] = useResizeObserver();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%", height: 0 }, children: containerResizeListener }),
    /* @__PURE__ */ jsx("div", { className: "block-editor-block-preview__container", children: !!containerWidth && /* @__PURE__ */ jsx(
      ScaledBlockPreview,
      {
        ...props,
        containerWidth
      }
    ) })
  ] });
}
export {
  AutoBlockPreview as default
};
//# sourceMappingURL=auto.js.map
