@wordpress/block-editor
Version:
188 lines (181 loc) • 6.45 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useEventHandlers = useEventHandlers;
var _dom = require("@wordpress/dom");
var _keycodes = require("@wordpress/keycodes");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _blocks = require("@wordpress/blocks");
var _store = require("../../../store");
var _lockUnlock = require("../../../lock-unlock");
var _draggableChip = _interopRequireDefault(require("../../../components/block-draggable/draggable-chip"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Adds block behaviour:
* - Removes the block on BACKSPACE.
* - Inserts a default block on ENTER.
* - Disables dragging of block contents.
*
* @param {string} clientId Block client ID.
*/
function useEventHandlers({
clientId,
isSelected
}) {
const {
getBlockType
} = (0, _data.useSelect)(_blocks.store);
const {
getBlockRootClientId,
isZoomOut,
hasMultiSelection,
getBlockName
} = (0, _lockUnlock.unlock)((0, _data.useSelect)(_store.store));
const {
insertAfterBlock,
removeBlock,
resetZoomLevel,
startDraggingBlocks,
stopDraggingBlocks
} = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
return (0, _compose.useRefEffect)(node => {
if (!isSelected) {
return;
}
/**
* Interprets keydown event intent to remove or insert after block if
* key event occurs on wrapper node. This can occur when the block has
* no text fields of its own, particularly after initial insertion, to
* allow for easy deletion and continuous writing flow to add additional
* content.
*
* @param {KeyboardEvent} event Keydown event.
*/
function onKeyDown(event) {
const {
keyCode,
target
} = event;
if (keyCode !== _keycodes.ENTER && keyCode !== _keycodes.BACKSPACE && keyCode !== _keycodes.DELETE) {
return;
}
if (target !== node || (0, _dom.isTextField)(target)) {
return;
}
event.preventDefault();
if (keyCode === _keycodes.ENTER && isZoomOut()) {
resetZoomLevel();
} else if (keyCode === _keycodes.ENTER) {
insertAfterBlock(clientId);
} else {
removeBlock(clientId);
}
}
/**
* Prevents default dragging behavior within a block. To do: we must
* handle this in the future and clean up the drag target.
*
* @param {DragEvent} event Drag event.
*/
function onDragStart(event) {
if (node !== event.target || node.isContentEditable || node.ownerDocument.activeElement !== node || hasMultiSelection()) {
event.preventDefault();
return;
}
const data = JSON.stringify({
type: 'block',
srcClientIds: [clientId],
srcRootClientId: getBlockRootClientId(clientId)
});
event.dataTransfer.effectAllowed = 'move'; // remove "+" cursor
event.dataTransfer.clearData();
event.dataTransfer.setData('wp-blocks', data);
const {
ownerDocument
} = node;
const {
defaultView
} = ownerDocument;
const selection = defaultView.getSelection();
selection.removeAllRanges();
const domNode = document.createElement('div');
const root = (0, _element.createRoot)(domNode);
root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableChip.default, {
icon: getBlockType(getBlockName(clientId)).icon
}));
document.body.appendChild(domNode);
domNode.style.position = 'absolute';
domNode.style.top = '0';
domNode.style.left = '0';
domNode.style.zIndex = '1000';
domNode.style.pointerEvents = 'none';
// Setting the drag chip as the drag image actually works, but
// the behaviour is slightly different in every browser. In
// Safari, it animates, in Firefox it's slightly transparent...
// So we set a fake drag image and have to reposition it
// ourselves.
const dragElement = ownerDocument.createElement('div');
// Chrome will show a globe icon if the drag element does not
// have dimensions.
dragElement.style.width = '1px';
dragElement.style.height = '1px';
dragElement.style.position = 'fixed';
dragElement.style.visibility = 'hidden';
ownerDocument.body.appendChild(dragElement);
event.dataTransfer.setDragImage(dragElement, 0, 0);
let offset = {
x: 0,
y: 0
};
if (document !== ownerDocument) {
const frame = defaultView.frameElement;
if (frame) {
const rect = frame.getBoundingClientRect();
offset = {
x: rect.left,
y: rect.top
};
}
}
// chip handle offset
offset.x -= 58;
function over(e) {
domNode.style.transform = `translate( ${e.clientX + offset.x}px, ${e.clientY + offset.y}px )`;
}
over(event);
function end() {
ownerDocument.removeEventListener('dragover', over);
ownerDocument.removeEventListener('dragend', end);
domNode.remove();
dragElement.remove();
stopDraggingBlocks();
document.body.classList.remove('is-dragging-components-draggable');
ownerDocument.documentElement.classList.remove('is-dragging');
}
ownerDocument.addEventListener('dragover', over);
ownerDocument.addEventListener('dragend', end);
ownerDocument.addEventListener('drop', end);
startDraggingBlocks([clientId]);
// Important because it hides the block toolbar.
document.body.classList.add('is-dragging-components-draggable');
ownerDocument.documentElement.classList.add('is-dragging');
}
node.addEventListener('keydown', onKeyDown);
node.addEventListener('dragstart', onDragStart);
return () => {
node.removeEventListener('keydown', onKeyDown);
node.removeEventListener('dragstart', onDragStart);
};
}, [clientId, isSelected, getBlockRootClientId, insertAfterBlock, removeBlock, isZoomOut, resetZoomLevel, hasMultiSelection, startDraggingBlocks, stopDraggingBlocks]);
}
//# sourceMappingURL=use-selected-block-event-handlers.js.map