@gechiui/block-editor/build/components/block-preview/auto.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _components = require("@gechiui/components");

var _compose = require("@gechiui/compose");

var _data = require("@gechiui/data");

var _blockList = _interopRequireDefault(require("../block-list"));

var _iframe = _interopRequireDefault(require("../iframe"));

var _editorStyles = _interopRequireDefault(require("../editor-styles"));

var _store = require("../../store");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
// This is used to avoid rendering the block list if the sizes change.
let MemoizedBlockList;
const MAX_HEIGHT = 2000;

function AutoBlockPreview(_ref) {
  let {
    viewportWidth,
    __experimentalPadding
  } = _ref;
  const [containerResizeListener, {
    width: containerWidth
  }] = (0, _compose.useResizeObserver)();
  const [contentResizeListener, {
    height: contentHeight
  }] = (0, _compose.useResizeObserver)();
  const styles = (0, _data.useSelect)(select => {
    return select(_store.store).getSettings().styles;
  }, []); // Avoid scrollbars for pattern previews.

  const editorStyles = (0, _element.useMemo)(() => {
    if (styles) {
      return [...styles, {
        css: 'body{height:auto;overflow:hidden;}',
        __unstableType: 'presets'
      }];
    }

    return styles;
  }, [styles]); // Initialize on render instead of module top level, to avoid circular dependency issues.

  MemoizedBlockList = MemoizedBlockList || (0, _compose.pure)(_blockList.default);
  const scale = containerWidth / viewportWidth;
  return (0, _element.createElement)("div", {
    className: "block-editor-block-preview__container"
  }, containerResizeListener, (0, _element.createElement)(_components.Disabled, {
    className: "block-editor-block-preview__content",
    style: {
      transform: `scale(${scale})`,
      height: contentHeight * scale,
      maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined
    }
  }, (0, _element.createElement)(_iframe.default, {
    head: (0, _element.createElement)(_editorStyles.default, {
      styles: editorStyles
    }),
    contentRef: (0, _compose.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.padding = __experimentalPadding + 'px'; // necessary for contentResizeListener to work.

      bodyElement.style.position = 'relative';
    }, []),
    "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/GeChiUI/gutenberg/pull/38175.
      maxHeight: MAX_HEIGHT
    }
  }, contentResizeListener, (0, _element.createElement)(MemoizedBlockList, {
    renderAppender: false
  }))));
}

var _default = AutoBlockPreview;
exports.default = _default;
//# sourceMappingURL=auto.js.map