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

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { first, last } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useSelect, useDispatch } from '@gechiui/data';
import { useViewportMatch } from '@gechiui/compose';
import { Popover } from '@gechiui/components';
import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@gechiui/keyboard-shortcuts';
/**
 * Internal dependencies
 */

import InsertionPoint from './insertion-point';
import BlockPopover from './block-popover';
import { store as blockEditorStore } from '../../store';
import BlockContextualToolbar from './block-contextual-toolbar';
import { usePopoverScroll } from './use-popover-scroll';
/**
 * 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.
 */

export default function BlockTools(_ref) {
  let {
    children,
    __unstableContentRef,
    ...props
  } = _ref;
  const isLargeViewport = useViewportMatch('medium');
  const hasFixedToolbar = useSelect(select => select(blockEditorStore).getSettings().hasFixedToolbar, []);
  const isMatch = useShortcutEventMatch();
  const {
    getSelectedBlockClientIds,
    getBlockRootClientId
  } = useSelect(blockEditorStore);
  const {
    duplicateBlocks,
    removeBlocks,
    insertAfterBlock,
    insertBeforeBlock,
    clearSelectedBlock,
    moveBlocksUp,
    moveBlocksDown
  } = useDispatch(blockEditorStore);

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

      if (clientIds.length) {
        event.preventDefault();
        const rootClientId = getBlockRootClientId(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(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(last(clientIds));
      }
    } else if (isMatch('core/block-editor/insert-before', event)) {
      const clientIds = getSelectedBlockClientIds();

      if (clientIds.length) {
        event.preventDefault();
        insertBeforeBlock(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
    createElement("div", _extends({}, props, {
      onKeyDown: onKeyDown
    }), createElement(InsertionPoint, {
      __unstableContentRef: __unstableContentRef
    }, (hasFixedToolbar || !isLargeViewport) && createElement(BlockContextualToolbar, {
      isFixed: true
    }), createElement(BlockPopover, {
      __unstableContentRef: __unstableContentRef
    }), createElement(Popover.Slot, {
      name: "block-toolbar",
      ref: usePopoverScroll(__unstableContentRef)
    }), children, createElement(Popover.Slot, {
      name: "__unstable-block-tools-after",
      ref: usePopoverScroll(__unstableContentRef)
    })))
  );
}
//# sourceMappingURL=index.js.map