@wordpress/block-library
Version:
Block library for the WordPress editor.
240 lines (238 loc) • 9.17 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-library/src/image/use-open-image-media-editor-modal.js
var use_open_image_media_editor_modal_exports = {};
__export(use_open_image_media_editor_modal_exports, {
getImageBlockMetadataFromAttachment: () => getImageBlockMetadataFromAttachment,
getSyncedImageBlockAttributes: () => getSyncedImageBlockAttributes,
useOpenImageMediaEditorModal: () => useOpenImageMediaEditorModal
});
module.exports = __toCommonJS(use_open_image_media_editor_modal_exports);
var import_core_data = require("@wordpress/core-data");
var import_block_editor = require("@wordpress/block-editor");
var import_dom = require("@wordpress/dom");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_lock_unlock = require("../lock-unlock.cjs");
function normalizeImageBlockCaption(caption) {
if (typeof caption !== "string") {
return "";
}
const textContent = (0, import_dom.__unstableStripHTML)(caption).trim();
if (!textContent) {
return "";
}
return caption.replace(/\n/g, "<br>");
}
function getAttachmentCaption(attachment) {
const caption = attachment?.caption;
if (typeof caption === "string") {
return normalizeImageBlockCaption(caption);
}
if (caption && typeof caption === "object" && Object.hasOwn(caption, "raw")) {
return normalizeImageBlockCaption(caption.raw);
}
return void 0;
}
function getImageBlockMetadataFromAttachment(attachment) {
return {
alt: typeof attachment?.alt_text === "string" ? attachment.alt_text : attachment?.alt || "",
caption: getAttachmentCaption(attachment)
};
}
function normalizeMetadataAttribute(value) {
return value || "";
}
function getSyncedImageBlockAttributes(currentAttributes, originalAttachment, updatedAttachment) {
if (!originalAttachment || !updatedAttachment) {
return {};
}
const originalMetadata = getImageBlockMetadataFromAttachment(originalAttachment);
const updatedMetadata = getImageBlockMetadataFromAttachment(updatedAttachment);
const syncedAttributes = {};
const normalizedCurrentAlt = normalizeMetadataAttribute(
currentAttributes.alt
);
if (originalMetadata.alt !== updatedMetadata.alt && (normalizedCurrentAlt === originalMetadata.alt || !normalizedCurrentAlt)) {
syncedAttributes.alt = updatedMetadata.alt;
}
const normalizedCurrentCaption = normalizeMetadataAttribute(
currentAttributes.caption
);
if (originalMetadata.caption !== void 0 && updatedMetadata.caption !== void 0 && originalMetadata.caption !== updatedMetadata.caption && (normalizedCurrentCaption === originalMetadata.caption || !normalizedCurrentCaption)) {
syncedAttributes.caption = updatedMetadata.caption || void 0;
}
return syncedAttributes;
}
var { openMediaEditorModalKey } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
var ATTACHMENT_EDIT_QUERY = { context: "edit" };
function getAttachmentFallbackForEmptyBlockMetadata({ alt, caption }) {
const attachment = {};
if (!alt) {
attachment.alt_text = "";
}
if (!caption?.toString()) {
attachment.caption = "";
}
return Object.keys(attachment).length ? attachment : void 0;
}
function hasKnownAttachmentMetadata(attachment) {
if (!attachment) {
return false;
}
const hasKnownAlt = typeof attachment.alt_text === "string" || typeof attachment.alt === "string";
const hasKnownCaption = getImageBlockMetadataFromAttachment(attachment).caption !== void 0;
return hasKnownAlt && hasKnownCaption;
}
function useOpenImageMediaEditorModal({ attributes, setAttributes }) {
const { id, url, alt, caption } = attributes;
const registry = (0, import_data.useRegistry)();
const openMediaEditorModal = (0, import_data.useSelect)(
(select) => select(import_block_editor.store).getSettings()[openMediaEditorModalKey],
[]
);
const blockMetadataRef = (0, import_element.useRef)({ alt, caption: caption?.toString() });
const mediaEditorMetadataBaselineRef = (0, import_element.useRef)();
const mediaEditorMetadataSyncRequestRef = (0, import_element.useRef)(0);
(0, import_element.useEffect)(() => {
blockMetadataRef.current = { alt, caption: caption?.toString() };
}, [alt, caption]);
const getCachedAttachmentRecord = (0, import_element.useCallback)(
(attachmentId) => {
const { getEditedEntityRecord, getEntityRecord } = registry.select(import_core_data.store);
return getEditedEntityRecord(
"postType",
"attachment",
attachmentId
) || getEntityRecord(
"postType",
"attachment",
attachmentId,
ATTACHMENT_EDIT_QUERY
) || getEntityRecord("postType", "attachment", attachmentId);
},
[registry]
);
const resolveAttachmentRecord = (0, import_element.useCallback)(
async (attachmentId) => {
const resolveSelect = registry.resolveSelect(import_core_data.store);
try {
return await resolveSelect.getEntityRecord(
"postType",
"attachment",
attachmentId,
ATTACHMENT_EDIT_QUERY
) || await resolveSelect.getEntityRecord(
"postType",
"attachment",
attachmentId
);
} catch {
return void 0;
}
},
[registry]
);
const resolveFreshAttachmentRecord = (0, import_element.useCallback)(
async (attachmentId) => {
const { invalidateResolution } = registry.dispatch(import_core_data.store);
invalidateResolution("getEntityRecord", [
"postType",
"attachment",
attachmentId
]);
invalidateResolution("getEntityRecord", [
"postType",
"attachment",
attachmentId,
ATTACHMENT_EDIT_QUERY
]);
return resolveAttachmentRecord(attachmentId);
},
[registry, resolveAttachmentRecord]
);
const handleMediaUpdate = (0, import_element.useCallback)(
async ({ id: newId, url: newUrl }) => {
if (typeof newId !== "number") {
return;
}
const originalAttachment = mediaEditorMetadataBaselineRef.current;
mediaEditorMetadataBaselineRef.current = void 0;
const syncRequest = ++mediaEditorMetadataSyncRequestRef.current;
const nextAttributes = {};
if (newId !== id) {
nextAttributes.id = newId;
nextAttributes.url = newUrl ?? url;
}
if (originalAttachment) {
const resolvedAttachment = await resolveFreshAttachmentRecord(newId);
if (syncRequest !== mediaEditorMetadataSyncRequestRef.current) {
return;
}
const resolvedMetadataAttributes = getSyncedImageBlockAttributes(
blockMetadataRef.current,
originalAttachment,
resolvedAttachment
);
if (Object.keys(resolvedMetadataAttributes).length) {
Object.assign(nextAttributes, resolvedMetadataAttributes);
blockMetadataRef.current = {
...blockMetadataRef.current,
...resolvedMetadataAttributes
};
}
}
if (Object.keys(nextAttributes).length) {
setAttributes(nextAttributes);
}
},
[id, resolveFreshAttachmentRecord, setAttributes, url]
);
const openImageMediaEditorModal = (0, import_element.useCallback)(async () => {
if (!id || !openMediaEditorModal) {
return;
}
const cachedAttachmentRecord = getCachedAttachmentRecord(id);
const fallbackAttachmentRecord = getAttachmentFallbackForEmptyBlockMetadata(
blockMetadataRef.current
);
const resolvedAttachmentRecord = hasKnownAttachmentMetadata(
cachedAttachmentRecord
) ? void 0 : await resolveAttachmentRecord(id);
mediaEditorMetadataBaselineRef.current = resolvedAttachmentRecord || (hasKnownAttachmentMetadata(cachedAttachmentRecord) ? cachedAttachmentRecord : fallbackAttachmentRecord) || cachedAttachmentRecord;
openMediaEditorModal({
id,
onUpdate: handleMediaUpdate
});
}, [
getCachedAttachmentRecord,
handleMediaUpdate,
id,
openMediaEditorModal,
resolveAttachmentRecord
]);
return id && openMediaEditorModal ? openImageMediaEditorModal : void 0;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
getImageBlockMetadataFromAttachment,
getSyncedImageBlockAttributes,
useOpenImageMediaEditorModal
});
//# sourceMappingURL=use-open-image-media-editor-modal.cjs.map