"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExperimentalBlockCanvas = ExperimentalBlockCanvas;
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _blockList = _interopRequireDefault(require("../block-list"));
var _blockTools = _interopRequireDefault(require("../block-tools"));
var _editorStyles = _interopRequireDefault(require("../editor-styles"));
var _iframe = _interopRequireDefault(require("../iframe"));
var _writingFlow = _interopRequireDefault(require("../writing-flow"));
var _observeTyping = require("../observe-typing");
var _blockSelectionClearer = require("../block-selection-clearer");
var _useBlockCommands = require("../use-block-commands");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ExperimentalBlockCanvas({
  shouldIframe = true,
  height = '300px',
  children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockList.default, {}),
  styles,
  contentRef: contentRefProp,
  iframeProps
}) {
  (0, _useBlockCommands.useBlockCommands)();
  const resetTypingRef = (0, _observeTyping.useMouseMoveTypingReset)();
  const clearerRef = (0, _blockSelectionClearer.useBlockSelectionClearer)();
  const localRef = (0, _element.useRef)();
  const contentRef = (0, _compose.useMergeRefs)([contentRefProp, clearerRef, localRef]);
  if (!shouldIframe) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockTools.default, {
      __unstableContentRef: localRef,
      style: {
        height,
        display: 'flex'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editorStyles.default, {
        styles: styles,
        scope: ".editor-styles-wrapper"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_writingFlow.default, {
        ref: contentRef,
        className: "editor-styles-wrapper",
        tabIndex: -1,
        style: {
          height: '100%',
          width: '100%'
        },
        children: children
      })]
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockTools.default, {
    __unstableContentRef: localRef,
    style: {
      height,
      display: 'flex'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_iframe.default, {
      ...iframeProps,
      ref: resetTypingRef,
      contentRef: contentRef,
      style: {
        ...iframeProps?.style
      },
      name: "editor-canvas",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editorStyles.default, {
        styles: styles
      }), children]
    })
  });
}

/**
 * BlockCanvas component is a component used to display the canvas of the block editor.
 * What we call the canvas is an iframe containing the block list that you can manipulate.
 * The component is also responsible of wiring up all the necessary hooks to enable
 * the keyboard navigation across blocks in the editor and inject content styles into the iframe.
 *
 * @example
 *
 * ```jsx
 * function MyBlockEditor() {
 *   const [ blocks, updateBlocks ] = useState([]);
 *   return (
 *     <BlockEditorProvider
 *       value={ blocks }
 *       onInput={ updateBlocks }
 *       onChange={ persistBlocks }
 *      >
 *        <BlockCanvas height="400px" />
 *      </BlockEditorProvider>
 *    );
 * }
 * ```
 *
 * @param {Object}  props          Component props.
 * @param {string}  props.height   Canvas height, defaults to 300px.
 * @param {Array}   props.styles   Content styles to inject into the iframe.
 * @param {Element} props.children Content of the canvas, defaults to the BlockList component.
 * @return {Element}               Block Breadcrumb.
 */
function BlockCanvas({
  children,
  height,
  styles
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExperimentalBlockCanvas, {
    height: height,
    styles: styles,
    children: children
  });
}
var _default = exports.default = BlockCanvas;
//# sourceMappingURL=index.js.map