@wordpress/block-editor
Version:
119 lines (112 loc) • 4.14 kB
JavaScript
import { createElement, Fragment } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, ExternalLink, __experimentalText as Text } from '@wordpress/components';
import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
/**
* Internal dependencies
*/
import { ViewerSlot } from './viewer-slot';
import useRichUrlData from './use-rich-url-data';
export default function LinkPreview({
value,
onEditClick,
hasRichPreviews = false,
hasUnlinkControl = false,
onRemove
}) {
// Avoid fetching if rich previews are not desired.
const showRichPreviews = hasRichPreviews ? value?.url : null;
const {
richData,
isFetching
} = useRichUrlData(showRichPreviews); // Rich data may be an empty object so test for that.
const hasRichData = richData && Object.keys(richData).length;
const displayURL = value && filterURLForDisplay(safeDecodeURI(value.url), 16) || '';
const displayTitle = richData?.title || value?.title || displayURL; // url can be undefined if the href attribute is unset
const isEmptyURL = !value?.url?.length;
let icon;
if (richData?.icon) {
icon = createElement("img", {
src: richData?.icon,
alt: ""
});
} else if (isEmptyURL) {
icon = createElement(Icon, {
icon: info,
size: 32
});
} else {
icon = createElement(Icon, {
icon: globe
});
}
return createElement("div", {
"aria-label": __('Currently selected'),
className: classnames('block-editor-link-control__search-item', {
'is-current': true,
'is-rich': hasRichData,
'is-fetching': !!isFetching,
'is-preview': true,
'is-error': isEmptyURL
})
}, createElement("div", {
className: "block-editor-link-control__search-item-top"
}, createElement("span", {
className: "block-editor-link-control__search-item-header"
}, createElement("span", {
className: classnames('block-editor-link-control__search-item-icon', {
'is-image': richData?.icon
})
}, icon), createElement("span", {
className: "block-editor-link-control__search-item-details"
}, !isEmptyURL ? createElement(Fragment, null, createElement(ExternalLink, {
className: "block-editor-link-control__search-item-title",
href: value.url
}, stripHTML(displayTitle)), value?.url && createElement("span", {
className: "block-editor-link-control__search-item-info"
}, displayURL)) : createElement("span", {
className: "block-editor-link-control__search-item-error-notice"
}, __('Link is empty')))), createElement(Button, {
icon: edit,
label: __('Edit'),
className: "block-editor-link-control__search-item-action",
onClick: onEditClick,
iconSize: 24
}), hasUnlinkControl && createElement(Button, {
icon: linkOff,
label: __('Unlink'),
className: "block-editor-link-control__search-item-action block-editor-link-control__unlink",
onClick: onRemove,
iconSize: 24
}), createElement(ViewerSlot, {
fillProps: value
})), !!(hasRichData && (richData?.image || richData?.description) || isFetching) && createElement("div", {
className: "block-editor-link-control__search-item-bottom"
}, (richData?.image || isFetching) && createElement("div", {
"aria-hidden": !richData?.image,
className: classnames('block-editor-link-control__search-item-image', {
'is-placeholder': !richData?.image
})
}, richData?.image && createElement("img", {
src: richData?.image,
alt: ""
})), (richData?.description || isFetching) && createElement("div", {
"aria-hidden": !richData?.description,
className: classnames('block-editor-link-control__search-item-description', {
'is-placeholder': !richData?.description
})
}, richData?.description && createElement(Text, {
truncate: true,
numberOfLines: "2"
}, richData.description))));
}
//# sourceMappingURL=link-preview.js.map