@wordpress/block-editor
Version:
154 lines (150 loc) • 5.46 kB
JavaScript
;
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,
getSelectedBlockClientId,
__unstableIsSelectionMergeable,
hasMultiSelection,
getBlockName,
canInsertBlockType,
getBlockRootClientId,
getSelectionStart,
getSelectionEnd,
getBlockAttributes
} = (0, _data.useSelect)(_store.store);
const {
replaceBlocks,
__unstableSplitSelection,
removeBlocks,
__unstableDeleteSelection,
__unstableExpandSelection,
__unstableMarkAutomaticChange
} = (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()) {
if (event.keyCode === _keycodes.ENTER) {
if (event.shiftKey || __unstableIsFullySelected()) {
return;
}
const clientId = getSelectedBlockClientId();
const blockName = getBlockName(clientId);
const selectionStart = getSelectionStart();
const selectionEnd = getSelectionEnd();
if (selectionStart.attributeKey === selectionEnd.attributeKey) {
const selectedAttributeValue = getBlockAttributes(clientId)[selectionStart.attributeKey];
const transforms = (0, _blocks.getBlockTransforms)('from').filter(({
type
}) => type === 'enter');
const transformation = (0, _blocks.findTransform)(transforms, item => {
return item.regExp.test(selectedAttributeValue);
});
if (transformation) {
replaceBlocks(clientId, transformation.transform({
content: selectedAttributeValue
}));
__unstableMarkAutomaticChange();
return;
}
}
if (!(0, _blocks.hasBlockSupport)(blockName, 'splitting', false) && !event.__deprecatedOnSplit) {
return;
}
// Ensure template is not locked.
if (canInsertBlockType(blockName, getBlockRootClientId(clientId))) {
__unstableSplitSelection();
event.preventDefault();
}
}
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