@gechiui/block-editor/build/components/block-tools/index.js

Generic block editor.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

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

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

var _keyboardShortcuts = require("@gechiui/keyboard-shortcuts");

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

var _blockPopover = _interopRequireDefault(require("./block-popover"));

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

var _blockContextualToolbar = _interopRequireDefault(require("./block-contextual-toolbar"));

var _usePopoverScroll = require("./use-popover-scroll");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders block tools (the block toolbar, select/navigation mode toolbar, the
 * insertion point and a slot for the inline rich text toolbar). Must be wrapped
 * around the block content and editor styles wrapper or iframe.
 *
 * @param {Object} $0                      Props.
 * @param {Object} $0.children             The block content and style container.
 * @param {Object} $0.__unstableContentRef Ref holding the content scroll container.
 */
function BlockTools(_ref) {
  let {
    children,
    __unstableContentRef,
    ...props
  } = _ref;
  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
  const hasFixedToolbar = (0, _data.useSelect)(select => select(_store.store).getSettings().hasFixedToolbar, []);
  const isMatch = (0, _keyboardShortcuts.__unstableUseShortcutEventMatch)();
  const {
    getSelectedBlockClientIds,
    getBlockRootClientId
  } = (0, _data.useSelect)(_store.store);
  const {
    duplicateBlocks,
    removeBlocks,
    insertAfterBlock,
    insertBeforeBlock,
    clearSelectedBlock,
    moveBlocksUp,
    moveBlocksDown
  } = (0, _data.useDispatch)(_store.store);

  function onKeyDown(event) {
    if (isMatch('core/block-editor/move-up', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        const rootClientId = getBlockRootClientId((0, _lodash.first)(clientIds));
        moveBlocksUp(clientIds, rootClientId);
      }
    } else if (isMatch('core/block-editor/move-down', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        const rootClientId = getBlockRootClientId((0, _lodash.first)(clientIds));
        moveBlocksDown(clientIds, rootClientId);
      }
    } else if (isMatch('core/block-editor/duplicate', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        duplicateBlocks(clientIds);
      }
    } else if (isMatch('core/block-editor/remove', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        removeBlocks(clientIds);
      }
    } else if (isMatch('core/block-editor/insert-after', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        insertAfterBlock((0, _lodash.last)(clientIds));
      }
    } else if (isMatch('core/block-editor/insert-before', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        insertBeforeBlock((0, _lodash.first)(clientIds));
      }
    } else if (isMatch('core/block-editor/delete-multi-selection', event)) {
      /**
       * Check if the target element is a text area, input or
       * event.defaultPrevented and return early. In all these
       * cases backspace could be handled elsewhere.
       */
      if (['INPUT', 'TEXTAREA'].includes(event.target.nodeName) || event.defaultPrevented) {
        return;
      }

      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length > 1) {
        event.preventDefault();
        removeBlocks(clientIds);
      }
    } else if (isMatch('core/block-editor/unselect', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length > 1) {
        event.preventDefault();
        clearSelectedBlock();
        event.target.ownerDocument.defaultView.getSelection().removeAllRanges();
      }
    }
  }

  return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
    (0, _element.createElement)("div", (0, _extends2.default)({}, props, {
      onKeyDown: onKeyDown
    }), (0, _element.createElement)(_insertionPoint.default, {
      __unstableContentRef: __unstableContentRef
    }, (hasFixedToolbar || !isLargeViewport) && (0, _element.createElement)(_blockContextualToolbar.default, {
      isFixed: true
    }), (0, _element.createElement)(_blockPopover.default, {
      __unstableContentRef: __unstableContentRef
    }), (0, _element.createElement)(_components.Popover.Slot, {
      name: "block-toolbar",
      ref: (0, _usePopoverScroll.usePopoverScroll)(__unstableContentRef)
    }), children, (0, _element.createElement)(_components.Popover.Slot, {
      name: "__unstable-block-tools-after",
      ref: (0, _usePopoverScroll.usePopoverScroll)(__unstableContentRef)
    })))
  );
}
//# sourceMappingURL=index.js.map