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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { Disabled } from '@gechiui/components';
import { useResizeObserver, pure, useRefEffect } from '@gechiui/compose';
import { useSelect } from '@gechiui/data';
import { useMemo } from '@gechiui/element';
/**
 * Internal dependencies
 */

import BlockList from '../block-list';
import Iframe from '../iframe';
import EditorStyles from '../editor-styles';
import { store } from '../../store'; // 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
  }] = useResizeObserver();
  const [contentResizeListener, {
    height: contentHeight
  }] = useResizeObserver();
  const styles = useSelect(select => {
    return select(store).getSettings().styles;
  }, []); // Avoid scrollbars for pattern previews.

  const editorStyles = 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 || pure(BlockList);
  const scale = containerWidth / viewportWidth;
  return createElement("div", {
    className: "block-editor-block-preview__container"
  }, containerResizeListener, createElement(Disabled, {
    className: "block-editor-block-preview__content",
    style: {
      transform: `scale(${scale})`,
      height: contentHeight * scale,
      maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined
    }
  }, createElement(Iframe, {
    head: createElement(EditorStyles, {
      styles: editorStyles
    }),
    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.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, createElement(MemoizedBlockList, {
    renderAppender: false
  }))));
}

export default AutoBlockPreview;
//# sourceMappingURL=auto.js.map