@wordpress/block-editor
Version:
291 lines (289 loc) • 8.93 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/use-on-block-drop/index.js
var use_on_block_drop_exports = {};
__export(use_on_block_drop_exports, {
default: () => useOnBlockDrop,
onBlockDrop: () => onBlockDrop,
onFilesDrop: () => onFilesDrop,
onHTMLDrop: () => onHTMLDrop,
parseDropEvent: () => parseDropEvent
});
module.exports = __toCommonJS(use_on_block_drop_exports);
var import_element = require("@wordpress/element");
var import_blocks = require("@wordpress/blocks");
var import_data = require("@wordpress/data");
var import_dom = require("@wordpress/dom");
var import_store = require("../../store/index.cjs");
function parseDropEvent(event) {
let result = {
srcRootClientId: null,
srcClientIds: null,
srcIndex: null,
type: null,
blocks: null
};
if (!event.dataTransfer) {
return result;
}
try {
result = Object.assign(
result,
JSON.parse(event.dataTransfer.getData("wp-blocks"))
);
} catch (err) {
return result;
}
return result;
}
function onBlockDrop(targetRootClientId, targetBlockIndex, getBlockIndex, getClientIdsOfDescendants, moveBlocks, insertOrReplaceBlocks, clearSelectedBlock, operation, getBlock) {
return (event) => {
const {
srcRootClientId: sourceRootClientId,
srcClientIds: sourceClientIds,
type: dropType,
blocks
} = parseDropEvent(event);
if (dropType === "inserter") {
clearSelectedBlock();
const blocksToInsert = blocks.map(
(block) => (0, import_blocks.cloneBlock)(block)
);
insertOrReplaceBlocks(blocksToInsert, true, null);
}
if (dropType === "block") {
const sourceBlockIndex = getBlockIndex(sourceClientIds[0]);
if (sourceRootClientId === targetRootClientId && sourceBlockIndex === targetBlockIndex) {
return;
}
if (sourceClientIds.includes(targetRootClientId) || getClientIdsOfDescendants(sourceClientIds).some(
(id) => id === targetRootClientId
)) {
return;
}
if (operation === "group") {
const blocksToInsert = sourceClientIds.map(
(clientId) => getBlock(clientId)
);
insertOrReplaceBlocks(
blocksToInsert,
true,
null,
sourceClientIds
);
return;
}
const isAtSameLevel = sourceRootClientId === targetRootClientId;
const draggedBlockCount = sourceClientIds.length;
const insertIndex = isAtSameLevel && sourceBlockIndex < targetBlockIndex ? targetBlockIndex - draggedBlockCount : targetBlockIndex;
moveBlocks(sourceClientIds, sourceRootClientId, insertIndex);
}
};
}
function onFilesDrop(targetRootClientId, getSettings, updateBlockAttributes, canInsertBlockType, insertOrReplaceBlocks) {
return (files) => {
if (!getSettings().mediaUpload) {
return;
}
const transformation = (0, import_blocks.findTransform)(
(0, import_blocks.getBlockTransforms)("from"),
(transform) => transform.type === "files" && canInsertBlockType(transform.blockName, targetRootClientId) && transform.isMatch(files)
);
if (transformation) {
const blocks = transformation.transform(
files,
updateBlockAttributes
);
insertOrReplaceBlocks(blocks);
}
};
}
function onHTMLDrop(insertOrReplaceBlocks) {
return (HTML) => {
const blocks = (0, import_blocks.pasteHandler)({ HTML, mode: "BLOCKS" });
if (blocks.length) {
insertOrReplaceBlocks(blocks);
}
};
}
function useOnBlockDrop(targetRootClientId, targetBlockIndex, options = {}) {
const { operation = "insert", nearestSide = "right" } = options;
const {
canInsertBlockType,
getBlockIndex,
getClientIdsOfDescendants,
getBlockOrder,
getBlocksByClientId,
getSettings,
getBlock
} = (0, import_data.useSelect)(import_store.store);
const { getGroupingBlockName } = (0, import_data.useSelect)(import_blocks.store);
const {
insertBlocks,
moveBlocksToPosition,
updateBlockAttributes,
clearSelectedBlock,
replaceBlocks,
removeBlocks
} = (0, import_data.useDispatch)(import_store.store);
const registry = (0, import_data.useRegistry)();
const insertOrReplaceBlocks = (0, import_element.useCallback)(
(blocks, updateSelection = true, initialPosition = 0, clientIdsToReplace = []) => {
if (!Array.isArray(blocks)) {
blocks = [blocks];
}
const clientIds = getBlockOrder(targetRootClientId);
const clientId = clientIds[targetBlockIndex];
if (operation === "replace") {
replaceBlocks(clientId, blocks, void 0, initialPosition);
} else if (operation === "group") {
const targetBlock = getBlock(clientId);
if (nearestSide === "left") {
blocks.push(targetBlock);
} else {
blocks.unshift(targetBlock);
}
const groupInnerBlocks = blocks.map((block) => {
return (0, import_blocks.createBlock)(
block.name,
block.attributes,
block.innerBlocks
);
});
const areAllImages = blocks.every((block) => {
return block.name === "core/image";
});
const galleryBlock = canInsertBlockType(
"core/gallery",
targetRootClientId
);
const wrappedBlocks = (0, import_blocks.createBlock)(
areAllImages && galleryBlock ? "core/gallery" : getGroupingBlockName(),
{
layout: {
type: "flex",
flexWrap: areAllImages && galleryBlock ? null : "nowrap"
}
},
groupInnerBlocks
);
replaceBlocks(
[clientId, ...clientIdsToReplace],
wrappedBlocks,
void 0,
initialPosition
);
} else {
insertBlocks(
blocks,
targetBlockIndex,
targetRootClientId,
updateSelection,
initialPosition
);
}
},
[
getBlockOrder,
targetRootClientId,
targetBlockIndex,
operation,
replaceBlocks,
getBlock,
nearestSide,
canInsertBlockType,
getGroupingBlockName,
insertBlocks
]
);
const moveBlocks = (0, import_element.useCallback)(
(sourceClientIds, sourceRootClientId, insertIndex) => {
if (operation === "replace") {
const sourceBlocks = getBlocksByClientId(sourceClientIds);
const targetBlockClientIds = getBlockOrder(targetRootClientId);
const targetBlockClientId = targetBlockClientIds[targetBlockIndex];
registry.batch(() => {
removeBlocks(sourceClientIds, false);
replaceBlocks(
targetBlockClientId,
sourceBlocks,
void 0,
0
);
});
} else {
moveBlocksToPosition(
sourceClientIds,
sourceRootClientId,
targetRootClientId,
insertIndex
);
}
},
[
operation,
getBlockOrder,
getBlocksByClientId,
moveBlocksToPosition,
registry,
removeBlocks,
replaceBlocks,
targetBlockIndex,
targetRootClientId
]
);
const _onDrop = onBlockDrop(
targetRootClientId,
targetBlockIndex,
getBlockIndex,
getClientIdsOfDescendants,
moveBlocks,
insertOrReplaceBlocks,
clearSelectedBlock,
operation,
getBlock
);
const _onFilesDrop = onFilesDrop(
targetRootClientId,
getSettings,
updateBlockAttributes,
canInsertBlockType,
insertOrReplaceBlocks
);
const _onHTMLDrop = onHTMLDrop(insertOrReplaceBlocks);
return (event) => {
const files = (0, import_dom.getFilesFromDataTransfer)(event.dataTransfer);
const html = event.dataTransfer.getData("text/html");
if (html) {
_onHTMLDrop(html);
} else if (files.length) {
_onFilesDrop(files);
} else {
_onDrop(event);
}
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
onBlockDrop,
onFilesDrop,
onHTMLDrop,
parseDropEvent
});
//# sourceMappingURL=index.cjs.map