@wordpress/block-editor
Version:
153 lines (152 loc) • 5.38 kB
JavaScript
// packages/block-editor/src/components/link-control/link-preview.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
Button,
ExternalLink,
__experimentalTruncate as Truncate
} from "@wordpress/components";
import { useCopyToClipboard } from "@wordpress/compose";
import { filterURLForDisplay, safeDecodeURI } from "@wordpress/url";
import {
Icon,
globe,
info,
linkOff,
pencil,
copySmall
} from "@wordpress/icons";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { useDispatch, useSelect } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import { store as preferencesStore } from "@wordpress/preferences";
import { ViewerSlot } from "./viewer-slot";
import useRichUrlData from "./use-rich-url-data";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function filterTitleForDisplay(title) {
return title.replace(/^[a-z\-.\+]+[0-9]*:(\/\/)?/i, "").replace(/^www\./i, "");
}
function LinkPreview({
value,
onEditClick,
hasRichPreviews = false,
hasUnlinkControl = false,
onRemove
}) {
const showIconLabels = useSelect(
(select) => select(preferencesStore).get("core", "showIconLabels"),
[]
);
const showRichPreviews = hasRichPreviews ? value?.url : null;
const { richData, isFetching } = useRichUrlData(showRichPreviews);
const hasRichData = richData && Object.keys(richData).length;
const displayURL = value && filterURLForDisplay(safeDecodeURI(value.url), 24) || "";
const isEmptyURL = !value?.url?.length;
const displayTitle = !isEmptyURL && stripHTML(richData?.title || value?.title || displayURL);
const isUrlRedundant = !value?.url || filterTitleForDisplay(displayTitle) === displayURL;
let icon;
if (richData?.icon) {
icon = /* @__PURE__ */ jsx("img", { src: richData?.icon, alt: "" });
} else if (isEmptyURL) {
icon = /* @__PURE__ */ jsx(Icon, { icon: info, size: 32 });
} else {
icon = /* @__PURE__ */ jsx(Icon, { icon: globe });
}
const { createNotice } = useDispatch(noticesStore);
const ref = useCopyToClipboard(value.url, () => {
createNotice("info", __("Link copied to clipboard."), {
isDismissible: true,
type: "snackbar"
});
});
return /* @__PURE__ */ jsx(
"div",
{
role: "group",
"aria-label": __("Manage link"),
className: clsx("block-editor-link-control__search-item", {
"is-current": true,
"is-rich": hasRichData,
"is-fetching": !!isFetching,
"is-preview": true,
"is-error": isEmptyURL,
"is-url-title": displayTitle === displayURL
}),
children: /* @__PURE__ */ jsxs("div", { className: "block-editor-link-control__search-item-top", children: [
/* @__PURE__ */ jsxs(
"span",
{
className: "block-editor-link-control__search-item-header",
role: "figure",
"aria-label": (
/* translators: Accessibility text for the link preview when editing a link. */
__("Link information")
),
children: [
/* @__PURE__ */ jsx(
"span",
{
className: clsx(
"block-editor-link-control__search-item-icon",
{
"is-image": richData?.icon
}
),
children: icon
}
),
/* @__PURE__ */ jsx("span", { className: "block-editor-link-control__search-item-details", children: !isEmptyURL ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ExternalLink,
{
className: "block-editor-link-control__search-item-title",
href: value.url,
children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 1, children: displayTitle })
}
),
!isUrlRedundant && /* @__PURE__ */ jsx("span", { className: "block-editor-link-control__search-item-info", children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 1, children: displayURL }) })
] }) : /* @__PURE__ */ jsx("span", { className: "block-editor-link-control__search-item-error-notice", children: __("Link is empty") }) })
]
}
),
/* @__PURE__ */ jsx(
Button,
{
icon: pencil,
label: __("Edit link"),
onClick: onEditClick,
size: "compact",
showTooltip: !showIconLabels
}
),
hasUnlinkControl && /* @__PURE__ */ jsx(
Button,
{
icon: linkOff,
label: __("Remove link"),
onClick: onRemove,
size: "compact",
showTooltip: !showIconLabels
}
),
/* @__PURE__ */ jsx(
Button,
{
icon: copySmall,
label: __("Copy link"),
ref,
accessibleWhenDisabled: true,
disabled: isEmptyURL,
size: "compact",
showTooltip: !showIconLabels
}
),
/* @__PURE__ */ jsx(ViewerSlot, { fillProps: value })
] })
}
);
}
export {
LinkPreview as default
};
//# sourceMappingURL=link-preview.js.map