@wordpress/block-editor/build/components/block-list/use-in-between-inserter.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useInBetweenInserter = useInBetweenInserter;
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _store = require("../../store");
var _insertionPoint = require("../block-tools/insertion-point");
var _lockUnlock = require("../../lock-unlock");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useInBetweenInserter() {
  const openRef = (0, _element.useContext)(_insertionPoint.InsertionPointOpenRef);
  const isInBetweenInserterDisabled = (0, _data.useSelect)(select => select(_store.store).getSettings().isDistractionFree || (0, _lockUnlock.unlock)(select(_store.store)).isZoomOut(), []);
  const {
    getBlockListSettings,
    getBlockIndex,
    isMultiSelecting,
    getSelectedBlockClientIds,
    getSettings,
    getTemplateLock,
    __unstableIsWithinBlockOverlay,
    getBlockEditingMode,
    getBlockName,
    getBlockAttributes,
    getParentSectionBlock
  } = (0, _lockUnlock.unlock)((0, _data.useSelect)(_store.store));
  const {
    showInsertionPoint,
    hideInsertionPoint
  } = (0, _data.useDispatch)(_store.store);
  return (0, _compose.useRefEffect)(node => {
    if (isInBetweenInserterDisabled) {
      return;
    }
    function onMouseMove(event) {
      // openRef is the reference to the insertion point between blocks.
      // If the reference is not set or the insertion point is already open, return.
      if (openRef === undefined || openRef.current) {
        return;
      }

      // Ignore text nodes sometimes detected in FireFox.
      if (event.target.nodeType === event.target.TEXT_NODE) {
        return;
      }
      if (isMultiSelecting()) {
        return;
      }
      if (!event.target.classList.contains('block-editor-block-list__layout')) {
        hideInsertionPoint();
        return;
      }
      let rootClientId;
      if (!event.target.classList.contains('is-root-container')) {
        const blockElement = !!event.target.getAttribute('data-block') ? event.target : event.target.closest('[data-block]');
        rootClientId = blockElement.getAttribute('data-block');
      }
      if (getTemplateLock(rootClientId) || getBlockEditingMode(rootClientId) === 'disabled' || getBlockName(rootClientId) === 'core/block' || rootClientId && getBlockAttributes(rootClientId).layout?.isManualPlacement) {
        return;
      }
      const blockListSettings = getBlockListSettings(rootClientId);
      const orientation = blockListSettings?.orientation || 'vertical';
      const captureToolbars = !!blockListSettings?.__experimentalCaptureToolbars;
      const offsetTop = event.clientY;
      const offsetLeft = event.clientX;
      const children = Array.from(event.target.children);
      let element = children.find(blockEl => {
        const blockElRect = blockEl.getBoundingClientRect();
        return blockEl.classList.contains('wp-block') && orientation === 'vertical' && blockElRect.top > offsetTop || blockEl.classList.contains('wp-block') && orientation === 'horizontal' && ((0, _i18n.isRTL)() ? blockElRect.right < offsetLeft : blockElRect.left > offsetLeft);
      });
      if (!element) {
        hideInsertionPoint();
        return;
      }

      // The block may be in an alignment wrapper, so check the first direct
      // child if the element has no ID.
      if (!element.id) {
        element = element.firstElementChild;
        if (!element) {
          hideInsertionPoint();
          return;
        }
      }

      // Don't show the insertion point if a parent block has an "overlay"
      // See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
      const clientId = element.id.slice('block-'.length);
      if (!clientId || __unstableIsWithinBlockOverlay(clientId) || !!getParentSectionBlock(clientId)) {
        return;
      }

      // Don't show the inserter if the following conditions are met,
      // as it conflicts with the block toolbar:
      // 1. when hovering above or inside selected block(s)
      // 2. when the orientation is vertical
      // 3. when the __experimentalCaptureToolbars is not enabled
      // 4. when the Top Toolbar is not disabled
      if (getSelectedBlockClientIds().includes(clientId) && orientation === 'vertical' && !captureToolbars && !getSettings().hasFixedToolbar) {
        return;
      }
      const elementRect = element.getBoundingClientRect();
      if (orientation === 'horizontal' && (event.clientY > elementRect.bottom || event.clientY < elementRect.top) || orientation === 'vertical' && (event.clientX > elementRect.right || event.clientX < elementRect.left)) {
        hideInsertionPoint();
        return;
      }
      const index = getBlockIndex(clientId);

      // Don't show the in-between inserter before the first block in
      // the list (preserves the original behaviour).
      if (index === 0) {
        hideInsertionPoint();
        return;
      }
      showInsertionPoint(rootClientId, index, {
        __unstableWithInserter: true
      });
    }
    node.addEventListener('mousemove', onMouseMove);
    return () => {
      node.removeEventListener('mousemove', onMouseMove);
    };
  }, [openRef, getBlockListSettings, getBlockIndex, isMultiSelecting, showInsertionPoint, hideInsertionPoint, getSelectedBlockClientIds, isInBetweenInserterDisabled]);
}
//# sourceMappingURL=use-in-between-inserter.js.map