@gechiui/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("@gechiui/compose");

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

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

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

var _insertionPoint = require("../block-tools/insertion-point");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function useInBetweenInserter() {
  const openRef = (0, _element.useContext)(_insertionPoint.InsertionPointOpenRef);
  const hasReducedUI = (0, _data.useSelect)(select => select(_store.store).getSettings().hasReducedUI, []);
  const {
    getBlockListSettings,
    getBlockRootClientId,
    getBlockIndex,
    isBlockInsertionPointVisible,
    isMultiSelecting,
    getSelectedBlockClientIds,
    getTemplateLock
  } = (0, _data.useSelect)(_store.store);
  const {
    showInsertionPoint,
    hideInsertionPoint
  } = (0, _data.useDispatch)(_store.store);
  return (0, _compose.useRefEffect)(node => {
    if (hasReducedUI) {
      return;
    }

    function onMouseMove(event) {
      var _getBlockListSettings, _element$parentElemen;

      if (openRef.current) {
        return;
      }

      if (isMultiSelecting()) {
        return;
      }

      if (!event.target.classList.contains('block-editor-block-list__layout')) {
        if (isBlockInsertionPointVisible()) {
          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');
      } // Don't set the insertion point if the template is locked.


      if (getTemplateLock(rootClientId)) {
        return;
      }

      const orientation = ((_getBlockListSettings = getBlockListSettings(rootClientId)) === null || _getBlockListSettings === void 0 ? void 0 : _getBlockListSettings.orientation) || 'vertical';
      const rect = event.target.getBoundingClientRect();
      const offsetTop = event.clientY - rect.top;
      const offsetLeft = event.clientX - rect.left;
      const children = Array.from(event.target.children);
      let element = children.find(blockEl => {
        return blockEl.classList.contains('gc-block') && orientation === 'vertical' && blockEl.offsetTop > offsetTop || blockEl.classList.contains('gc-block') && orientation === 'horizontal' && blockEl.offsetLeft > offsetLeft;
      });

      if (!element) {
        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) {
          return;
        }
      } // Don't show the insertion point if a parent block has an "overlay"
      // See https://github.com/GeChiUI/gutenberg/pull/34012#pullrequestreview-727762337


      const parentOverlay = (_element$parentElemen = element.parentElement) === null || _element$parentElemen === void 0 ? void 0 : _element$parentElemen.closest('.block-editor-block-content-overlay.overlay-active');

      if (parentOverlay) {
        return;
      }

      const clientId = element.id.slice('block-'.length);

      if (!clientId) {
        return;
      } // Don't show the inserter when hovering above (conflicts with
      // block toolbar) or inside selected block(s).


      if (getSelectedBlockClientIds().includes(clientId)) {
        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)) {
        if (isBlockInsertionPointVisible()) {
          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) {
        if (isBlockInsertionPointVisible()) {
          hideInsertionPoint();
        }

        return;
      }

      showInsertionPoint(rootClientId, index, {
        __unstableWithInserter: true
      });
    }

    node.addEventListener('mousemove', onMouseMove);
    return () => {
      node.removeEventListener('mousemove', onMouseMove);
    };
  }, [openRef, getBlockListSettings, getBlockRootClientId, getBlockIndex, isBlockInsertionPointVisible, isMultiSelecting, showInsertionPoint, hideInsertionPoint, getSelectedBlockClientIds]);
}
//# sourceMappingURL=use-in-between-inserter.js.map