@wordpress/block-editor
Version:
108 lines (107 loc) • 3.26 kB
JavaScript
// 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