// packages/block-editor/src/components/block-canvas/index.js
import { useMergeRefs, useViewportMatch } from "@wordpress/compose";
import { useRef } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import BlockList from "../block-list";
import BlockTools from "../block-tools";
import EditorStyles from "../editor-styles";
import Iframe from "../iframe";
import WritingFlow from "../writing-flow";
import { useMouseMoveTypingReset } from "../observe-typing";
import { useBlockSelectionClearer } from "../block-selection-clearer";
import { useBlockCommands } from "../use-block-commands";
import { store as blockEditorStore } from "../../store";
import { unlock } from "../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var EDITOR_STYLE_TRANSFORM_OPTIONS = {
  // Don't transform selectors that already specify `.editor-styles-wrapper`.
  ignoredSelectors: [/\.editor-styles-wrapper/gi]
};
function ExperimentalBlockCanvas({
  shouldIframe = true,
  height = "300px",
  children = /* @__PURE__ */ jsx(BlockList, {}),
  styles,
  contentRef: contentRefProp,
  iframeProps
}) {
  useBlockCommands();
  const isTabletViewport = useViewportMatch("medium", "<");
  const resetTypingRef = useMouseMoveTypingReset();
  const clearerRef = useBlockSelectionClearer();
  const localRef = useRef();
  const contentRef = useMergeRefs([contentRefProp, clearerRef, localRef]);
  const zoomLevel = useSelect(
    (select) => unlock(select(blockEditorStore)).getZoomLevel(),
    []
  );
  const zoomOutIframeProps = zoomLevel !== 100 && !isTabletViewport ? {
    scale: zoomLevel,
    frameSize: "40px"
  } : {};
  if (!shouldIframe) {
    return /* @__PURE__ */ jsxs(
      BlockTools,
      {
        __unstableContentRef: localRef,
        style: { height, display: "flex" },
        children: [
          /* @__PURE__ */ jsx(
            EditorStyles,
            {
              styles,
              scope: ":where(.editor-styles-wrapper)",
              transformOptions: EDITOR_STYLE_TRANSFORM_OPTIONS
            }
          ),
          /* @__PURE__ */ jsx(
            WritingFlow,
            {
              ref: contentRef,
              className: "editor-styles-wrapper",
              tabIndex: -1,
              style: {
                height: "100%",
                width: "100%"
              },
              children
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    BlockTools,
    {
      __unstableContentRef: localRef,
      style: { height, display: "flex" },
      children: /* @__PURE__ */ jsxs(
        Iframe,
        {
          ...iframeProps,
          ...zoomOutIframeProps,
          ref: resetTypingRef,
          contentRef,
          style: {
            ...iframeProps?.style
          },
          name: "editor-canvas",
          children: [
            /* @__PURE__ */ jsx(EditorStyles, { styles }),
            children
          ]
        }
      )
    }
  );
}
function BlockCanvas({ children, height, styles }) {
  return /* @__PURE__ */ jsx(ExperimentalBlockCanvas, { height, styles, children });
}
var block_canvas_default = BlockCanvas;
export {
  ExperimentalBlockCanvas,
  block_canvas_default as default
};
//# sourceMappingURL=index.js.map
