@wordpress/block-library
Version:
Block library for the WordPress editor.
305 lines (300 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MIN_PREVIEW_HEIGHT = exports.MAX_PREVIEW_HEIGHT = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blob = require("@wordpress/blob");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _notices = require("@wordpress/notices");
var _inspector = _interopRequireDefault(require("./inspector"));
var _utils = require("./utils");
var _removeAnchorTag = _interopRequireDefault(require("../utils/remove-anchor-tag"));
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const MIN_PREVIEW_HEIGHT = exports.MIN_PREVIEW_HEIGHT = 200;
const MAX_PREVIEW_HEIGHT = exports.MAX_PREVIEW_HEIGHT = 2000;
function ClipboardToolbarButton({
text,
disabled
}) {
const {
createNotice
} = (0, _data.useDispatch)(_notices.store);
const ref = (0, _compose.useCopyToClipboard)(text, () => {
createNotice('info', (0, _i18n.__)('Copied URL to clipboard.'), {
isDismissible: true,
type: 'snackbar'
});
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
className: "components-clipboard-toolbar-button",
ref: ref,
disabled: disabled,
children: (0, _i18n.__)('Copy URL')
});
}
function FileEdit({
attributes,
isSelected,
setAttributes,
clientId
}) {
const {
id,
fileName,
href,
textLinkHref,
textLinkTarget,
showDownloadButton,
downloadButtonText,
displayPreview,
previewHeight
} = attributes;
const [temporaryURL, setTemporaryURL] = (0, _element.useState)(attributes.blob);
const {
media
} = (0, _data.useSelect)(select => ({
media: id === undefined ? undefined : select(_coreData.store).getMedia(id)
}), [id]);
const {
createErrorNotice
} = (0, _data.useDispatch)(_notices.store);
const {
toggleSelection,
__unstableMarkNextChangeAsNotPersistent
} = (0, _data.useDispatch)(_blockEditor.store);
(0, _hooks.useUploadMediaFromBlobURL)({
url: temporaryURL,
onChange: onSelectFile,
onError: onUploadError
});
// Note: Handle setting a default value for `downloadButtonText` via HTML API
// when it supports replacing text content for HTML tags.
(0, _element.useEffect)(() => {
if (_blockEditor.RichText.isEmpty(downloadButtonText)) {
__unstableMarkNextChangeAsNotPersistent();
setAttributes({
downloadButtonText: (0, _i18n._x)('Download', 'button label')
});
}
// This effect should only run on mount.
}, []);
function onSelectFile(newMedia) {
var _attributes$displayPr, _attributes$previewHe;
if (!newMedia || !newMedia.url) {
// Reset attributes.
setAttributes({
href: undefined,
fileName: undefined,
textLinkHref: undefined,
id: undefined,
fileId: undefined,
displayPreview: undefined,
previewHeight: undefined
});
setTemporaryURL();
return;
}
if ((0, _blob.isBlobURL)(newMedia.url)) {
setTemporaryURL(newMedia.url);
return;
}
const isPdf = newMedia.url.endsWith('.pdf');
const pdfAttributes = {
displayPreview: isPdf ? (_attributes$displayPr = attributes.displayPreview) !== null && _attributes$displayPr !== void 0 ? _attributes$displayPr : true : undefined,
previewHeight: isPdf ? (_attributes$previewHe = attributes.previewHeight) !== null && _attributes$previewHe !== void 0 ? _attributes$previewHe : 600 : undefined
};
setAttributes({
href: newMedia.url,
fileName: newMedia.title,
textLinkHref: newMedia.url,
id: newMedia.id,
fileId: `wp-block-file--media-${clientId}`,
blob: undefined,
...pdfAttributes
});
setTemporaryURL();
}
function onUploadError(message) {
setAttributes({
href: undefined
});
createErrorNotice(message, {
type: 'snackbar'
});
}
function changeLinkDestinationOption(newHref) {
// Choose Media File or Attachment Page (when file is in Media Library).
setAttributes({
textLinkHref: newHref
});
}
function changeOpenInNewWindow(newValue) {
setAttributes({
textLinkTarget: newValue ? '_blank' : false
});
}
function changeShowDownloadButton(newValue) {
setAttributes({
showDownloadButton: newValue
});
}
function changeDisplayPreview(newValue) {
setAttributes({
displayPreview: newValue
});
}
function handleOnResizeStop(event, direction, elt, delta) {
toggleSelection(true);
const newHeight = parseInt(previewHeight + delta.height, 10);
setAttributes({
previewHeight: newHeight
});
}
function changePreviewHeight(newValue) {
const newHeight = Math.max(parseInt(newValue, 10), MIN_PREVIEW_HEIGHT);
setAttributes({
previewHeight: newHeight
});
}
const attachmentPage = media && media.link;
const blockProps = (0, _blockEditor.useBlockProps)({
className: (0, _clsx.default)(!!temporaryURL && (0, _components.__unstableGetAnimateClassName)({
type: 'loading'
}), {
'is-transient': !!temporaryURL
})
});
const displayPreviewInEditor = (0, _utils.browserSupportsPdfs)() && displayPreview;
if (!href && !temporaryURL) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...blockProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
icon: _icons.file
}),
labels: {
title: (0, _i18n.__)('File'),
instructions: (0, _i18n.__)('Drag and drop a file, upload, or choose from your library.')
},
onSelect: onSelectFile,
onError: onUploadError,
accept: "*"
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inspector.default, {
hrefs: {
href: href || temporaryURL,
textLinkHref,
attachmentPage
},
openInNewWindow: !!textLinkTarget,
showDownloadButton,
changeLinkDestinationOption,
changeOpenInNewWindow,
changeShowDownloadButton,
displayPreview,
changeDisplayPreview,
previewHeight,
changePreviewHeight
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
group: "other",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
mediaId: id,
mediaURL: href,
accept: "*",
onSelect: onSelectFile,
onError: onUploadError,
onReset: () => onSelectFile(undefined)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClipboardToolbarButton, {
text: href,
disabled: (0, _blob.isBlobURL)(href)
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
...blockProps,
children: [displayPreviewInEditor && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ResizableBox, {
size: {
height: previewHeight,
width: '100%'
},
minHeight: MIN_PREVIEW_HEIGHT,
maxHeight: MAX_PREVIEW_HEIGHT
// The horizontal grid value must be 1 or else the width may snap during a
// resize even though only vertical resizing is enabled.
,
grid: [1, 10],
enable: {
top: false,
right: false,
bottom: true,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false
},
onResizeStart: () => toggleSelection(false),
onResizeStop: handleOnResizeStop,
showHandle: isSelected,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("object", {
className: "wp-block-file__preview",
data: href,
type: "application/pdf",
"aria-label": (0, _i18n.__)('Embed of the selected PDF file.')
}), !isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "wp-block-file__preview-overlay"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "wp-block-file__content-wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
identifier: "fileName",
tagName: "a",
value: fileName,
placeholder: (0, _i18n.__)('Write file name…'),
withoutInteractiveFormatting: true,
onChange: text => setAttributes({
fileName: (0, _removeAnchorTag.default)(text)
}),
href: textLinkHref
}), showDownloadButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "wp-block-file__button-richtext-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
identifier: "downloadButtonText",
tagName: "div" // Must be block-level or else cursor disappears.
,
"aria-label": (0, _i18n.__)('Download button text'),
className: (0, _clsx.default)('wp-block-file__button', (0, _blockEditor.__experimentalGetElementClassName)('button')),
value: downloadButtonText,
withoutInteractiveFormatting: true,
placeholder: (0, _i18n.__)('Add text…'),
onChange: text => setAttributes({
downloadButtonText: (0, _removeAnchorTag.default)(text)
})
})
})]
})]
})]
});
}
var _default = exports.default = FileEdit;
//# sourceMappingURL=edit.js.map