@wordpress/block-editor/build/components/writing-flow/use-input.js

Generic block editor.

"use strict";

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

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

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

var _keycodes = require("@wordpress/keycodes");

var _blocks = require("@wordpress/blocks");

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Handles input for selections across blocks.
 */
function useInput() {
  const {
    __unstableIsFullySelected,
    getSelectedBlockClientIds,
    __unstableIsSelectionMergeable,
    hasMultiSelection
  } = (0, _data.useSelect)(_store.store);
  const {
    replaceBlocks,
    __unstableSplitSelection,
    removeBlocks,
    __unstableDeleteSelection,
    __unstableExpandSelection
  } = (0, _data.useDispatch)(_store.store);
  return (0, _compose.useRefEffect)(node => {
    function onBeforeInput(event) {
      // If writing flow is editable, NEVER allow the browser to alter the
      // DOM. This will cause React errors (and the DOM should only be
      // altered in a controlled fashion).
      if (node.contentEditable === 'true') {
        event.preventDefault();
      }
    }

    function onKeyDown(event) {
      if (event.defaultPrevented) {
        return;
      }

      if (!hasMultiSelection()) {
        return;
      }

      if (event.keyCode === _keycodes.ENTER) {
        node.contentEditable = false;
        event.preventDefault();

        if (__unstableIsFullySelected()) {
          replaceBlocks(getSelectedBlockClientIds(), (0, _blocks.createBlock)((0, _blocks.getDefaultBlockName)()));
        } else {
          __unstableSplitSelection();
        }
      } else if (event.keyCode === _keycodes.BACKSPACE || event.keyCode === _keycodes.DELETE) {
        node.contentEditable = false;
        event.preventDefault();

        if (__unstableIsFullySelected()) {
          removeBlocks(getSelectedBlockClientIds());
        } else if (__unstableIsSelectionMergeable()) {
          __unstableDeleteSelection(event.keyCode === _keycodes.DELETE);
        } else {
          __unstableExpandSelection();
        }
      } else if ( // If key.length is longer than 1, it's a control key that doesn't
      // input anything.
      event.key.length === 1 && !(event.metaKey || event.ctrlKey)) {
        node.contentEditable = false;

        if (__unstableIsSelectionMergeable()) {
          __unstableDeleteSelection(event.keyCode === _keycodes.DELETE);
        } else {
          event.preventDefault(); // Safari does not stop default behaviour with either
          // event.preventDefault() or node.contentEditable = false, so
          // remove the selection to stop browser manipulation.

          node.ownerDocument.defaultView.getSelection().removeAllRanges();
        }
      }
    }

    function onCompositionStart(event) {
      if (!hasMultiSelection()) {
        return;
      }

      node.contentEditable = false;

      if (__unstableIsSelectionMergeable()) {
        __unstableDeleteSelection();
      } else {
        event.preventDefault(); // Safari does not stop default behaviour with either
        // event.preventDefault() or node.contentEditable = false, so
        // remove the selection to stop browser manipulation.

        node.ownerDocument.defaultView.getSelection().removeAllRanges();
      }
    }

    node.addEventListener('beforeinput', onBeforeInput);
    node.addEventListener('keydown', onKeyDown);
    node.addEventListener('compositionstart', onCompositionStart);
    return () => {
      node.removeEventListener('beforeinput', onBeforeInput);
      node.removeEventListener('keydown', onKeyDown);
      node.removeEventListener('compositionstart', onCompositionStart);
    };
  }, []);
}
//# sourceMappingURL=use-input.js.map