@wordpress/block-editor
Version:
231 lines (198 loc) • 7.91 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaPreview = MediaPreview;
var _element = require("@wordpress/element");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _notices = require("@wordpress/notices");
var _blob = require("@wordpress/blob");
var _inserterDraggableBlocks = _interopRequireDefault(require("../../inserter-draggable-blocks"));
var _utils = require("./utils");
var _store = require("../../../store");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ALLOWED_MEDIA_TYPES = ['image'];
const MAXIMUM_TITLE_LENGTH = 25;
const MEDIA_OPTIONS_POPOVER_PROPS = {
position: 'bottom left',
className: 'block-editor-inserter__media-list__item-preview-options__popover'
};
function MediaPreviewOptions({
category,
media
}) {
if (!category.getReportUrl) {
return null;
}
const reportUrl = category.getReportUrl(media);
return (0, _element.createElement)(_components.DropdownMenu, {
className: "block-editor-inserter__media-list__item-preview-options",
label: (0, _i18n.__)('Options'),
popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
icon: _icons.moreVertical
}, () => (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
onClick: () => window.open(reportUrl, '_blank').focus(),
icon: _icons.external
}, (0, _i18n.sprintf)(
/* translators: %s: The media type to report e.g: "image", "video", "audio" */
(0, _i18n.__)('Report %s'), category.mediaType))));
}
function InsertExternalImageModal({
onClose,
onSubmit
}) {
return (0, _element.createElement)(_components.Modal, {
title: (0, _i18n.__)('Insert external image'),
onRequestClose: onClose,
className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal"
}, (0, _element.createElement)(_components.__experimentalVStack, {
spacing: 3
}, (0, _element.createElement)("p", null, (0, _i18n.__)('This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.')), (0, _element.createElement)("p", null, (0, _i18n.__)('External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'))), (0, _element.createElement)(_components.Flex, {
className: "block-editor-block-lock-modal__actions",
justify: "flex-end",
expanded: false
}, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
variant: "tertiary",
onClick: onClose
}, (0, _i18n.__)('Cancel'))), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
variant: "primary",
onClick: onSubmit
}, (0, _i18n.__)('Insert')))));
}
function MediaPreview({
media,
onClick,
composite,
category
}) {
const [showExternalUploadModal, setShowExternalUploadModal] = (0, _element.useState)(false);
const [isHovered, setIsHovered] = (0, _element.useState)(false);
const [isInserting, setIsInserting] = (0, _element.useState)(false);
const [block, preview] = (0, _element.useMemo)(() => (0, _utils.getBlockAndPreviewFromMedia)(media, category.mediaType), [media, category.mediaType]);
const {
createErrorNotice,
createSuccessNotice
} = (0, _data.useDispatch)(_notices.store);
const mediaUpload = (0, _data.useSelect)(select => select(_store.store).getSettings().mediaUpload, []);
const onMediaInsert = (0, _element.useCallback)(previewBlock => {
// Prevent multiple uploads when we're in the process of inserting.
if (isInserting) {
return;
}
const clonedBlock = (0, _blocks.cloneBlock)(previewBlock);
const {
id,
url,
caption
} = clonedBlock.attributes; // Media item already exists in library, so just insert it.
if (!!id) {
onClick(clonedBlock);
return;
}
setIsInserting(true); // Media item does not exist in library, so try to upload it.
// Fist fetch the image data. This may fail if the image host
// doesn't allow CORS with the domain.
// If this happens, we insert the image block using the external
// URL and let the user know about the possible implications.
window.fetch(url).then(response => response.blob()).then(blob => {
mediaUpload({
filesList: [blob],
additionalData: {
caption
},
onFileChange([img]) {
if ((0, _blob.isBlobURL)(img.url)) {
return;
}
onClick({ ...clonedBlock,
attributes: { ...clonedBlock.attributes,
id: img.id,
url: img.url
}
});
createSuccessNotice((0, _i18n.__)('Image uploaded and inserted.'), {
type: 'snackbar'
});
setIsInserting(false);
},
allowedTypes: ALLOWED_MEDIA_TYPES,
onError(message) {
createErrorNotice(message, {
type: 'snackbar'
});
setIsInserting(false);
}
});
}).catch(() => {
setShowExternalUploadModal(true);
setIsInserting(false);
});
}, [isInserting, onClick, mediaUpload, createErrorNotice, createSuccessNotice]);
const title = media.title?.rendered || media.title;
let truncatedTitle;
if (title.length > MAXIMUM_TITLE_LENGTH) {
const omission = '...';
truncatedTitle = title.slice(0, MAXIMUM_TITLE_LENGTH - omission.length) + omission;
}
const onMouseEnter = (0, _element.useCallback)(() => setIsHovered(true), []);
const onMouseLeave = (0, _element.useCallback)(() => setIsHovered(false), []);
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inserterDraggableBlocks.default, {
isEnabled: true,
blocks: [block]
}, ({
draggable,
onDragStart,
onDragEnd
}) => (0, _element.createElement)("div", {
className: (0, _classnames.default)('block-editor-inserter__media-list__list-item', {
'is-hovered': isHovered
}),
draggable: draggable,
onDragStart: onDragStart,
onDragEnd: onDragEnd
}, (0, _element.createElement)(_components.Tooltip, {
text: truncatedTitle || title
}, (0, _element.createElement)("div", {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
role: "option",
as: "div"
}, composite, {
className: "block-editor-inserter__media-list__item",
onClick: () => onMediaInsert(block),
"aria-label": title
}), (0, _element.createElement)("div", {
className: "block-editor-inserter__media-list__item-preview"
}, preview, isInserting && (0, _element.createElement)("div", {
className: "block-editor-inserter__media-list__item-preview-spinner"
}, (0, _element.createElement)(_components.Spinner, null)))), !isInserting && (0, _element.createElement)(MediaPreviewOptions, {
category: category,
media: media
}))))), showExternalUploadModal && (0, _element.createElement)(InsertExternalImageModal, {
onClose: () => setShowExternalUploadModal(false),
onSubmit: () => {
onClick((0, _blocks.cloneBlock)(block));
createSuccessNotice((0, _i18n.__)('Image inserted.'), {
type: 'snackbar'
});
setShowExternalUploadModal(false);
}
}));
}
//# sourceMappingURL=media-preview.js.map