@automattic/social-previews
Version:
A suite of components to generate previews for a post for both social and search engines.
1,045 lines (1,003 loc) • 116 kB
JavaScript
// src/helpers.tsx
import { createInterpolateElement } from "@wordpress/element";
import { sprintf } from "@wordpress/i18n";
import { jsx } from "react/jsx-runtime";
var baseDomain = (url) => {
const withoutProtocol = url.replace(/^[^/]+:\/\//, "");
const slashIndex = withoutProtocol.indexOf("/");
return slashIndex === -1 ? withoutProtocol : withoutProtocol.substring(0, slashIndex);
};
var codepointLength = (text) => Array.from(text).length;
var codepointSlice = (text, start, end) => Array.from(text).slice(start, end).join("");
var shortEnough = (limit) => (title) => codepointLength(title) <= limit ? title : false;
var truncatedAtSpace = (lower, upper) => (fullTitle) => {
const title = fullTitle.slice(0, upper);
const lastSpace = title.lastIndexOf(" ");
return lastSpace > lower && lastSpace < upper ? title.slice(0, lastSpace).concat("\u2026") : false;
};
var hardTruncation = (limit) => (title) => codepointSlice(title, 0, limit).concat("\u2026");
var firstValid = (...predicates) => (a) => predicates.find((p) => false !== p(a))?.(a);
var stripHtmlTags = (description, allowedTags = []) => {
const pattern = new RegExp(`(<([^${allowedTags.join("")}>]+)>)`, "gi");
return description ? description.replace(pattern, "") : "";
};
var getTitleFromDescription = (description) => {
return stripHtmlTags(description).substring(0, 50);
};
var hasTag = (text, tag) => {
const pattern = new RegExp(`<${tag}[^>]*>`, "gi");
return pattern.test(text);
};
var formatNextdoorDate = new Intl.DateTimeFormat("en-GB", {
// Result: "7 Oct", "31 Dec"
day: "numeric",
month: "short"
}).format;
var formatThreadsDate = new Intl.DateTimeFormat("en-US", {
// Result: "'06/21/2024"
day: "2-digit",
month: "2-digit",
year: "numeric"
}).format;
var formatTweetDate = new Intl.DateTimeFormat("en-US", {
// Result: "Apr 7", "Dec 31"
month: "short",
day: "numeric"
}).format;
var formatMastodonDate = new Intl.DateTimeFormat("en-US", {
// Result: "Apr 7, 2024", "Dec 31, 2023"
month: "short",
day: "numeric",
year: "numeric"
}).format;
var hashtagUrlMap = {
twitter: "https://twitter.com/hashtag/%1$s",
facebook: "https://www.facebook.com/hashtag/%1$s",
linkedin: "https://www.linkedin.com/feed/hashtag/?keywords=%1$s",
instagram: "https://www.instagram.com/explore/tags/%1$s",
mastodon: "https://%2$s/tags/%1$s",
nextdoor: "https://nextdoor.com/hashtag/%1$s",
threads: "https://www.threads.net/search?q=%1$s&serp_type=tags",
tumblr: "https://www.tumblr.com/tagged/%1$s",
bluesky: "https://bsky.app/hashtag/%1$s"
};
function preparePreviewText(text, options) {
const {
platform,
maxChars,
maxLines,
hyperlinkHashtags = true,
// Instagram doesn't support hyperlink URLs at the moment.
hyperlinkUrls = "instagram" !== platform
} = options;
let result = stripHtmlTags(text);
result = result.replaceAll(/(?:\s*[\n\r]){2,}/g, "\n\n");
if (maxChars && codepointLength(result) > maxChars) {
result = hardTruncation(maxChars)(result);
}
if (maxLines) {
const lines = result.split("\n");
if (lines.length > maxLines) {
result = lines.slice(0, maxLines).join("\n");
}
}
const componentMap = {};
if (hyperlinkUrls) {
const urls = result.match(/(https?:\/\/\S+)/g) || [];
urls.forEach((url, index) => {
componentMap[`Link${index}`] = /* @__PURE__ */ jsx("a", { href: url, rel: "noopener noreferrer", target: "_blank", children: url });
result = result.replace(url, `<Link${index} />`);
});
}
if (hyperlinkHashtags && hashtagUrlMap[platform]) {
const hashtags = result.matchAll(/(^|\s)#(\w+)/g);
const hashtagUrl = hashtagUrlMap[platform];
[...hashtags].forEach(([fullMatch, whitespace, hashtag], index) => {
const url = sprintf(hashtagUrl, hashtag, options.hashtagDomain);
componentMap[`Hashtag${index}`] = /* @__PURE__ */ jsx("a", { href: url, rel: "noopener noreferrer", target: "_blank", children: `#${hashtag}` });
result = result.replace(fullMatch, `${whitespace}<Hashtag${index} />`);
});
}
result = result.replace(/\n/g, "<br />");
componentMap.br = /* @__PURE__ */ jsx("br", {});
return createInterpolateElement(result, componentMap);
}
// src/site-icon-with-fallback.tsx
import { useCallback, useState } from "react";
// src/icons/globe-icon.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
function GlobeIcon(props) {
return /* @__PURE__ */ jsx2(
"svg",
{
focusable: "false",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
width: "14",
height: "14",
...props,
children: /* @__PURE__ */ jsx2(
"path",
{
fill: "currentColor",
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
}
)
}
);
}
// src/site-icon-with-fallback.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
function DefaultSiteIcon({ className }) {
return /* @__PURE__ */ jsx3(
"span",
{
className,
"aria-hidden": "true",
style: {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#e8eaed",
color: "#5f6368",
borderRadius: "50%"
},
children: /* @__PURE__ */ jsx3(GlobeIcon, { style: { width: "60%", height: "60%" } })
}
);
}
function SiteIconWithFallback({
src: siteIconUrl,
alt = "",
className,
fallback = /* @__PURE__ */ jsx3(DefaultSiteIcon, { className })
}) {
const [imageUrlWithError, setImageUrlWithError] = useState("");
const onError = useCallback((event) => {
setImageUrlWithError(event.target.src);
}, []);
const showIcon = siteIconUrl && // Check if the image URL with error is different from the provided site icon URL
// to ensure that a change in siteIconUrl resets the error state
imageUrlWithError !== siteIconUrl;
return showIcon ? /* @__PURE__ */ jsx3("img", { src: siteIconUrl, alt, onError, className }) : fallback;
}
// src/google-search-preview/index.tsx
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
var URL_LENGTH = 68;
var TITLE_LENGTH = 63;
var DESCRIPTION_LENGTH = 160;
var googleUrl = (url) => {
const protocol = url.startsWith("https://") ? "https://" : "http://";
const breadcrumb = protocol + url.replace(protocol, "").split("/").join(" \u203A ");
const truncateBreadcrumb = firstValid(shortEnough(URL_LENGTH), hardTruncation(URL_LENGTH));
return truncateBreadcrumb(breadcrumb);
};
var googleTitle = firstValid(
shortEnough(TITLE_LENGTH),
truncatedAtSpace(TITLE_LENGTH - 40, TITLE_LENGTH + 10),
hardTruncation(TITLE_LENGTH)
);
var googleDescription = firstValid(
shortEnough(DESCRIPTION_LENGTH),
truncatedAtSpace(DESCRIPTION_LENGTH - 80, DESCRIPTION_LENGTH + 10),
hardTruncation(DESCRIPTION_LENGTH)
);
var GoogleSearchPreview = ({
description = "",
siteIcon,
siteTitle,
title = "",
url = ""
}) => {
const domain = baseDomain(url);
return /* @__PURE__ */ jsx4("div", { className: "search-preview", children: /* @__PURE__ */ jsxs("div", { className: "search-preview__display", children: [
/* @__PURE__ */ jsxs("div", { className: "search-preview__header", children: [
/* @__PURE__ */ jsxs("div", { className: "search-preview__branding", children: [
/* @__PURE__ */ jsx4(SiteIconWithFallback, { className: "search-preview__icon", src: siteIcon }),
/* @__PURE__ */ jsxs("div", { className: "search-preview__site", children: [
/* @__PURE__ */ jsx4("div", { className: "search-preview__site--title", children: siteTitle || domain }),
/* @__PURE__ */ jsx4("div", { className: "search-preview__url", children: googleUrl(url) })
] })
] }),
/* @__PURE__ */ jsx4("div", { className: "search-preview__menu", children: /* @__PURE__ */ jsx4("svg", { focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }) }) })
] }),
/* @__PURE__ */ jsx4("div", { className: "search-preview__title", children: googleTitle(title) }),
/* @__PURE__ */ jsx4("div", { className: "search-preview__description", children: googleDescription(stripHtmlTags(description)) })
] }) });
};
// src/twitter-preview/card.tsx
import clsx from "clsx";
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
var DESCRIPTION_LENGTH2 = 280;
var twitterDescription = firstValid(
shortEnough(DESCRIPTION_LENGTH2),
hardTruncation(DESCRIPTION_LENGTH2)
);
var Card = ({
description,
image,
title,
cardType,
url
}) => {
const cardClassNames = clsx(`twitter-preview__card-${cardType}`, {
"twitter-preview__card-has-image": !!image
});
return /* @__PURE__ */ jsx5("div", { className: "twitter-preview__card", children: /* @__PURE__ */ jsxs2("div", { className: cardClassNames, children: [
image && /* @__PURE__ */ jsx5("img", { className: "twitter-preview__card-image", src: image, alt: "" }),
/* @__PURE__ */ jsxs2("div", { className: "twitter-preview__card-body", children: [
/* @__PURE__ */ jsx5("div", { className: "twitter-preview__card-url", children: baseDomain(url || "") }),
/* @__PURE__ */ jsx5("div", { className: "twitter-preview__card-title", children: title }),
/* @__PURE__ */ jsx5("div", { className: "twitter-preview__card-description", children: twitterDescription(stripHtmlTags(description)) })
] })
] }) });
};
// src/twitter-preview/footer.tsx
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
var Footer = () => {
return /* @__PURE__ */ jsxs3("div", { className: "twitter-preview__footer", children: [
/* @__PURE__ */ jsx6("span", { className: "twitter-preview__icon-replies", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z" }) }) }),
/* @__PURE__ */ jsx6("span", { className: "twitter-preview__icon-retweets", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z" }) }) }),
/* @__PURE__ */ jsx6("span", { className: "twitter-preview__icon-likes", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z" }) }) }),
/* @__PURE__ */ jsx6("span", { className: "twitter-preview__icon-analytics", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z" }) }) }),
/* @__PURE__ */ jsx6("span", { className: "twitter-preview__icon-share", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z" }) }) })
] });
};
// src/twitter-preview/header.tsx
import { __ } from "@wordpress/i18n";
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
var Header = ({ name, screenName, date }) => {
return /* @__PURE__ */ jsxs4("div", { className: "twitter-preview__header", children: [
/* @__PURE__ */ jsx7("span", { className: "twitter-preview__name", children: name || __("Account Name", "social-previews") }),
/* @__PURE__ */ jsx7("span", { className: "twitter-preview__screen-name", children: screenName || "@account" }),
/* @__PURE__ */ jsx7("span", { children: "\xB7" }),
/* @__PURE__ */ jsx7("span", { className: "twitter-preview__date", children: formatTweetDate(date || Date.now()) })
] });
};
// src/twitter-preview/media.tsx
import clsx2 from "clsx";
import { Fragment } from "react";
import { jsx as jsx8 } from "react/jsx-runtime";
var Media = ({ media }) => {
const filteredMedia = media.filter(
(mediaItem) => mediaItem.type.startsWith("image/") || mediaItem.type.startsWith("video/")
).filter((mediaItem, idx, array) => {
if (0 === idx) {
return true;
}
if (array[0].type.startsWith("video/") || "image/gif" === array[0].type) {
return false;
}
if (mediaItem.type.startsWith("video/") || "image/gif" === mediaItem.type) {
return false;
}
return true;
}).slice(0, 4);
if (0 === filteredMedia.length) {
return null;
}
const isVideo = filteredMedia[0].type.startsWith("video/");
const mediaClasses = clsx2([
"twitter-preview__media",
"twitter-preview__media-children-" + filteredMedia.length
]);
return /* @__PURE__ */ jsx8("div", { className: mediaClasses, children: filteredMedia.map((mediaItem, index) => /* @__PURE__ */ jsx8(Fragment, { children: isVideo ? /* @__PURE__ */ jsx8("video", { controls: true, children: /* @__PURE__ */ jsx8("source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ jsx8("img", { alt: mediaItem.alt || "", src: mediaItem.url }) }, `twitter-preview__media-item-${index}`)) });
};
// src/twitter-preview/quote-tweet.tsx
import { SandBox } from "@wordpress/components";
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
var QuoteTweet = ({ tweetUrl }) => {
if (!tweetUrl) {
return null;
}
return /* @__PURE__ */ jsxs5("div", { className: "twitter-preview__quote-tweet", children: [
/* @__PURE__ */ jsx9(
SandBox,
{
html: `<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><a href="${tweetUrl}"></a></blockquote>`,
scripts: ["https://platform.twitter.com/widgets.js"],
title: "Embedded tweet"
}
),
/* @__PURE__ */ jsx9("div", { className: "twitter-preview__quote-tweet-overlay" })
] });
};
// src/avatar-with-fallback.tsx
import { useCallback as useCallback2, useState as useState2 } from "react";
import { jsx as jsx10 } from "react/jsx-runtime";
function DefaultAvatar(props) {
return /* @__PURE__ */ jsx10(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 340 340",
width: "36",
height: "36",
"aria-hidden": "true",
...props,
children: /* @__PURE__ */ jsx10(
"path",
{
fill: "#DDD",
d: "m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1 1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"
}
)
}
);
}
function AvatarWithFallback({
src: avatarUrl,
alt = "",
className,
fallback = /* @__PURE__ */ jsx10(DefaultAvatar, { className })
}) {
const [imageUrlWithError, setImageUrlWithError] = useState2("");
const onError = useCallback2((event) => {
setImageUrlWithError(event.target.src);
}, []);
const showAvatar = !!avatarUrl && // Check if the image URL with error is different from the provided avatar URL
// to ensure that a change in avatarUrl resets the error state
imageUrlWithError !== avatarUrl;
return showAvatar ? /* @__PURE__ */ jsx10("img", { src: avatarUrl, alt, onError, className }) : fallback;
}
// src/twitter-preview/sidebar.tsx
import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
var Sidebar = ({ profileImage, showThreadConnector }) => {
return /* @__PURE__ */ jsxs6("div", { className: "twitter-preview__sidebar", children: [
/* @__PURE__ */ jsx11("div", { className: "twitter-preview__profile-image", children: /* @__PURE__ */ jsx11(AvatarWithFallback, { src: profileImage }) }),
showThreadConnector && /* @__PURE__ */ jsx11("div", { className: "twitter-preview__connector" })
] });
};
// src/twitter-preview/text.tsx
import { jsx as jsx12 } from "react/jsx-runtime";
var Text = ({ text }) => {
if (!text) {
return null;
}
return /* @__PURE__ */ jsx12("div", { className: "twitter-preview__text", children: preparePreviewText(text, { platform: "twitter" }) });
};
// src/twitter-preview/post-preview.tsx
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
var TwitterPostPreview = ({
date,
description,
image,
media,
name,
profileImage,
screenName,
showThreadConnector,
text,
title,
tweetUrl,
cardType,
url
}) => {
const hasMedia = !!media?.length;
return /* @__PURE__ */ jsx13("div", { className: "twitter-preview__wrapper", children: /* @__PURE__ */ jsxs7("div", { className: "twitter-preview__container", children: [
/* @__PURE__ */ jsx13(Sidebar, { profileImage, showThreadConnector }),
/* @__PURE__ */ jsxs7("div", { className: "twitter-preview__main", children: [
/* @__PURE__ */ jsx13(Header, { name, screenName, date }),
/* @__PURE__ */ jsxs7("div", { className: "twitter-preview__content", children: [
text ? /* @__PURE__ */ jsx13(Text, { text }) : null,
hasMedia ? /* @__PURE__ */ jsx13(Media, { media }) : null,
tweetUrl ? /* @__PURE__ */ jsx13(QuoteTweet, { tweetUrl }) : null,
!hasMedia && url && /* @__PURE__ */ jsx13(
Card,
{
description: description || "",
image,
title: title || "",
cardType: cardType || "",
url
}
)
] }),
/* @__PURE__ */ jsx13(Footer, {})
] })
] }) });
};
// src/twitter-preview/link-preview.tsx
import { jsx as jsx14 } from "react/jsx-runtime";
var TwitterLinkPreview = (props) => {
return /* @__PURE__ */ jsx14(
TwitterPostPreview,
{
...props,
text: "",
media: void 0
}
);
};
// src/twitter-preview/previews.tsx
import { __ as __2 } from "@wordpress/i18n";
// src/shared/section-heading/index.tsx
import { jsx as jsx15 } from "react/jsx-runtime";
var HEADING_LEVELS = [2, 3, 4, 5, 6];
var SectionHeading = ({
className,
level,
children
}) => {
const Tag = `h${level && HEADING_LEVELS.includes(level) ? level : 3}`;
return /* @__PURE__ */ jsx15(Tag, { className: `social-preview__section-heading ${className ?? ""}`, children });
};
var section_heading_default = SectionHeading;
// src/twitter-preview/previews.tsx
import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
var TwitterPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
tweets
}) => {
if (!tweets?.length) {
return null;
}
return /* @__PURE__ */ jsxs8("div", { className: "social-preview twitter-preview", children: [
!hidePostPreview && /* @__PURE__ */ jsxs8("section", { className: "social-preview__section twitter-preview__section", children: [
/* @__PURE__ */ jsx16(section_heading_default, {
level: headingLevel,
// translators: refers to a social post on Twitter
children: __2("Your post", "social-previews")
}),
/* @__PURE__ */ jsx16("p", { className: "social-preview__section-desc", children: __2("This is what your social post will look like on X:", "social-previews") }),
tweets.map((tweet, index) => {
const isLast = index + 1 === tweets.length;
return /* @__PURE__ */ jsx16(
TwitterPostPreview,
{
...tweet,
showThreadConnector: !isLast
},
`twitter-preview__tweet-${index}`
);
})
] }),
!hideLinkPreview && /* @__PURE__ */ jsxs8("section", { className: "social-preview__section twitter-preview__section", children: [
/* @__PURE__ */ jsx16(section_heading_default, {
level: headingLevel,
// translators: refers to a link to a Twitter post
children: __2("Link preview", "social-previews")
}),
/* @__PURE__ */ jsx16("p", { className: "social-preview__section-desc", children: __2(
"This is what it will look like when someone shares the link to your WordPress post on X.",
"social-previews"
) }),
/* @__PURE__ */ jsx16(TwitterLinkPreview, { ...tweets[0], name: "", profileImage: "", screenName: "" })
] })
] });
};
// src/linkedin-preview/post-preview.tsx
import { __ as __4, sprintf as sprintf2 } from "@wordpress/i18n";
// src/shared/expandable-text/index.tsx
import { Button } from "@wordpress/components";
import { __ as __3 } from "@wordpress/i18n";
import { useReducer } from "react";
import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
var EXPAND_THRESHOLD_CHARS = 400;
function codepointLength2(text) {
return Array.from(text).length;
}
function truncateAtWordBoundary(text, limit) {
const codepoints = Array.from(text);
if (codepoints.length <= limit) {
return text;
}
const slice = codepoints.slice(0, limit).join("");
const lastSpace = slice.lastIndexOf(" ");
const cut = lastSpace > limit - 80 ? lastSpace : slice.length;
return slice.slice(0, cut);
}
function ExpandableText(props) {
const { text, children } = props;
const [expanded, toggle] = useReducer((state) => !state, false);
const stripped = stripHtmlTags(text);
if (codepointLength2(stripped) <= EXPAND_THRESHOLD_CHARS) {
return /* @__PURE__ */ jsx17(Fragment2, { children: children(text) });
}
if (expanded) {
return /* @__PURE__ */ jsxs9(Fragment2, { children: [
children(text),
" ",
/* @__PURE__ */ jsx17(Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: __3("See less", "social-previews") })
] });
}
const truncated = truncateAtWordBoundary(stripped, EXPAND_THRESHOLD_CHARS);
return /* @__PURE__ */ jsxs9(Fragment2, { children: [
children(truncated),
"\u2026 ",
/* @__PURE__ */ jsx17(Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: __3("See more", "social-previews") })
] });
}
// src/linkedin-preview/constants.ts
var FEED_TEXT_MAX_LENGTH = 3e3;
// src/linkedin-preview/post-preview.tsx
import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
function LinkedInPostPreview({
articleReadTime = 5,
image,
jobTitle,
name,
profileImage,
description,
media,
title,
url
}) {
const hasMedia = !!media?.length;
return /* @__PURE__ */ jsx18("div", { className: "linkedin-preview__wrapper", children: /* @__PURE__ */ jsxs10("section", { className: `linkedin-preview__container ${hasMedia ? "has-media" : ""}`, children: [
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__header", children: [
/* @__PURE__ */ jsx18("div", { className: "linkedin-preview__header--avatar", children: /* @__PURE__ */ jsx18(AvatarWithFallback, { src: profileImage }) }),
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__header--profile", children: [
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__header--profile-info", children: [
/* @__PURE__ */ jsx18("div", { className: "linkedin-preview__header--profile-name", children: name || __4("Account Name", "social-previews") }),
/* @__PURE__ */ jsx18("span", { children: "\u2022" }),
/* @__PURE__ */ jsx18("div", {
className: "linkedin-preview__header--profile-actor",
// translators: refers to the actor level of the post being shared, e.g. "1st", "2nd", "3rd", etc.
children: __4("1st", "social-previews")
})
] }),
jobTitle ? /* @__PURE__ */ jsx18("div", { className: "linkedin-preview__header--profile-title", children: jobTitle }) : null,
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__header--profile-meta", children: [
/* @__PURE__ */ jsx18("span", {
// translators: refers to the time since the post was published, e.g. "1h"
children: __4("1h", "social-previews")
}),
/* @__PURE__ */ jsx18("span", { children: "\u2022" }),
/* @__PURE__ */ jsx18("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", focusable: "false", children: /* @__PURE__ */ jsx18("path", { d: "M8 1a7 7 0 107 7 7 7 0 00-7-7zM3 8a5 5 0 011-3l.55.55A1.5 1.5 0 015 6.62v1.07a.75.75 0 00.22.53l.56.56a.75.75 0 00.53.22H7v.69a.75.75 0 00.22.53l.56.56a.75.75 0 01.22.53V13a5 5 0 01-5-5zm6.24 4.83l2-2.46a.75.75 0 00.09-.8l-.58-1.16A.76.76 0 0010 8H7v-.19a.51.51 0 01.28-.45l.38-.19a.74.74 0 01.68 0L9 7.5l.38-.7a1 1 0 00.12-.48v-.85a.78.78 0 01.21-.53l1.07-1.09a5 5 0 01-1.54 9z" }) })
] })
] })
] }),
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__content", children: [
description ? /* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__caption", children: [
/* @__PURE__ */ jsx18("span", { children: /* @__PURE__ */ jsx18(ExpandableText, { text: description, children: (visibleText) => preparePreviewText(visibleText, {
platform: "linkedin",
maxChars: FEED_TEXT_MAX_LENGTH
}) }) }),
hasMedia && url && !description.includes(url) && /* @__PURE__ */ jsxs10(Fragment3, { children: [
" - ",
/* @__PURE__ */ jsx18("a", { href: url, rel: "nofollow noopener noreferrer", target: "_blank", children: url })
] })
] }) : null,
hasMedia ? /* @__PURE__ */ jsx18("div", { className: "linkedin-preview__media", children: media.map((mediaItem, index) => /* @__PURE__ */ jsx18(
"div",
{
className: "linkedin-preview__media-item",
children: mediaItem.type.startsWith("video/") ? /* @__PURE__ */ jsx18("video", { controls: true, children: /* @__PURE__ */ jsx18("source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ jsx18("img", { alt: mediaItem.alt || "", src: mediaItem.url })
},
`linkedin-preview__media-item-${index}`
)) }) : /* @__PURE__ */ jsxs10("article", { children: [
image ? /* @__PURE__ */ jsx18("img", { className: "linkedin-preview__image", src: image, alt: "" }) : null,
url ? /* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__description", children: [
/* @__PURE__ */ jsx18("h2", { className: "linkedin-preview__description--title", children: title || getTitleFromDescription(description) }),
/* @__PURE__ */ jsxs10("div", { className: "linkedin-preview__description--meta", children: [
/* @__PURE__ */ jsx18("span", { className: "linkedin-preview__description--url", children: baseDomain(url) }),
/* @__PURE__ */ jsx18("span", { children: "\u2022" }),
/* @__PURE__ */ jsx18("span", { children: sprintf2(
// translators: %d is the number of minutes it takes to read the article
__4("%d min read", "social-previews"),
articleReadTime
) })
] })
] }) : null
] })
] })
] }) });
}
// src/linkedin-preview/link-preview.tsx
import { jsx as jsx19 } from "react/jsx-runtime";
function LinkedInLinkPreview(props) {
return /* @__PURE__ */ jsx19(
LinkedInPostPreview,
{
name: "",
profileImage: "",
...props,
description: "",
media: void 0,
title: props.title || getTitleFromDescription(props.description)
}
);
}
// src/linkedin-preview/previews.tsx
import { __ as __5 } from "@wordpress/i18n";
import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
var LinkedInPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
...props
}) => {
return /* @__PURE__ */ jsxs11("div", { className: "social-preview linkedin-preview", children: [
!hidePostPreview && /* @__PURE__ */ jsxs11("section", { className: "social-preview__section linkedin-preview__section", children: [
/* @__PURE__ */ jsx20(section_heading_default, {
level: headingLevel,
// translators: refers to a social post on LinkedIn
children: __5("Your post", "social-previews")
}),
/* @__PURE__ */ jsx20("p", { className: "social-preview__section-desc", children: __5("This is what your social post will look like on LinkedIn:", "social-previews") }),
/* @__PURE__ */ jsx20(LinkedInPostPreview, { ...props })
] }),
!hideLinkPreview && /* @__PURE__ */ jsxs11("section", { className: "social-preview__section linkedin-preview__section", children: [
/* @__PURE__ */ jsx20(section_heading_default, {
level: headingLevel,
// translators: refers to a link to a LinkedIn post
children: __5("Link preview", "social-previews")
}),
/* @__PURE__ */ jsx20("p", { className: "social-preview__section-desc", children: __5(
"This is what it will look like when someone shares the link to your WordPress post on LinkedIn.",
"social-previews"
) }),
/* @__PURE__ */ jsx20(LinkedInLinkPreview, { ...props, name: "", profileImage: "" })
] })
] });
};
// src/tumblr-preview/link-preview.tsx
import { __ as __8 } from "@wordpress/i18n";
// src/tumblr-preview/helpers.ts
var TITLE_LENGTH2 = 1e3;
var DESCRIPTION_LENGTH3 = 4096;
var tumblrTitle = (text) => firstValid(
shortEnough(TITLE_LENGTH2),
hardTruncation(TITLE_LENGTH2)
)(stripHtmlTags(text)) || "";
var tumblrDescription = (text) => {
let processedText = text;
let startIndex = processedText.indexOf("<!--");
while (startIndex !== -1) {
const endIndex = processedText.indexOf("-->", startIndex);
if (endIndex === -1) {
processedText = processedText.substring(0, startIndex);
break;
}
processedText = processedText.substring(0, startIndex) + processedText.substring(endIndex + 3);
startIndex = processedText.indexOf("<!--");
}
processedText = processedText.replace(/<\/p>/g, "</p>\n\n");
return firstValid(
shortEnough(DESCRIPTION_LENGTH3),
hardTruncation(DESCRIPTION_LENGTH3)
)(stripHtmlTags(processedText)) || "";
};
// src/tumblr-preview/post/actions/index.tsx
import { __ as __6 } from "@wordpress/i18n";
// src/tumblr-preview/post/icons/index.tsx
import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
var TumblrPostIcon = ({ name }) => {
let svg;
switch (name) {
case "blaze":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 25 22", children: /* @__PURE__ */ jsx21("path", { d: "m7.5059-0.24414c-0.79843 0.057223-1.2169 0.88587-1.1635 1.6128-0.2266 2.0449-1.4898 3.8696-3.1975 4.9778-3.0182 2.414-4.2201 6.8066-2.8033 10.411 0.92417 2.4679 2.9589 4.5674 5.4768 5.3928 0.95914 0.16102 1.7233-0.94358 1.3074-1.8059-0.11578-0.51062-0.17482-0.96516-0.17845-1.487 1.0413 1.5607 2.5484 2.8986 4.341 3.4975 1.0396-0.0154 1.98-0.64458 2.8516-1.1608 3.3821-2.1786 4.9604-6.7097 3.6597-10.518-0.49144-1.4599-1.2948-2.8935-2.5028-3.8698-0.7512-0.45498-1.661 0.09677-1.9202 0.86038-0.12274 0.16822-0.70352 1.1955-0.6191 0.61976 0.25488-3.4397-1.6789-7.0066-4.8123-8.4958-0.14322-0.037843-0.292-0.049464-0.43945-0.035156zm1.0586 3.5605c1.8947 2.0016 2.2326 5.1984 0.89062 7.5879-0.38498 0.96148 0.71762 2.0063 1.6567 1.5681 1.4159-0.4624 2.6998-1.3259 3.6577-2.4665 1.6442 2.5888 1.1465 6.2819-1.0629 8.3379-0.62378 0.60782-1.3666 1.0945-2.1754 1.4179-1.9543-0.989-3.3534-3.0966-3.5625-5.3125-0.25636-1.0253-1.81-1.2013-2.2852-0.25781-0.75058 1.3054-1.1846 2.7948-1.2305 4.3008-2.2396-1.9852-2.8468-5.4435-1.4609-8.0527 0.58926-1.239 1.651-2.13 2.724-2.9329 1.2958-1.1271 2.2791-2.62 2.7682-4.2683l0.071578 0.069832z" }) });
break;
case "delete":
svg = /* @__PURE__ */ jsxs12("svg", { viewBox: "0 0 14 17", children: [
/* @__PURE__ */ jsx21("path", { d: "M12 5v9c.1.7-.3 1-1 1H3c-.5 0-.9-.3-1-1V5c0-.6-.4-1-1-1-.5 0-1 .4-1 1v9.5C0 16.1 1.4 17 3 17h8c1.8 0 3-.8 3-2.5V5c0-.6-.5-1-1-1-.6 0-1 .5-1 1z" }),
/* @__PURE__ */ jsx21("path", { d: "M4 12s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm4 0s0 1 1 1 1-1 1-1V5c0-.5-.4-1-1-1-.5 0-1 .5-1 1v7zm5-10c.5 0 1-.4 1-1 0-.5-.4-.9-1-1H1C.5.1 0 .5 0 1c0 .6.6 1 1.1 1H13z" })
] });
break;
case "edit":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 17.6 17.6", children: /* @__PURE__ */ jsx21("path", { d: "M5.3 13.8l-2.1.7.7-2.1L10.3 6l1.4 1.4-6.4 6.4zm6.4-9.3l-1.4-1.4-1.4 1.4-6.7 6.7-.2.5-2 5.9 3.8-1.3 2.1-.7.4-.1.3-.3 7.8-7.8c.1 0-2.7-2.9-2.7-2.9zm5.6-1.4L14.5.3c-.4-.4-1-.4-1.4 0l-1.4 1.4L15.9 6l1.4-1.4c.4-.5.4-1.1 0-1.5" }) });
break;
case "share":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { d: "M12.6173 1.07612C12.991 0.921338 13.4211 1.00689 13.7071 1.29289L22.7071 10.2929C23.0832 10.669 23.0991 11.2736 22.7433 11.669L13.7433 21.669C13.4663 21.9767 13.0283 22.082 12.6417 21.9336C12.2552 21.7853 12 21.414 12 21V16H11.5C7.31775 16 3.92896 18.2486 2.95256 21.3044C2.80256 21.7738 2.33292 22.064 1.84598 21.9881C1.35904 21.9122 1 21.4928 1 21V18.5C1 12.3162 5.88069 7.27245 12 7.01067V2C12 1.59554 12.2436 1.2309 12.6173 1.07612ZM14 4.41421V8C14 8.55228 13.5523 9 13 9H12.5C7.64534 9 3.64117 12.6414 3.06988 17.3419C5.09636 15.2366 8.18218 14 11.5 14H13C13.5523 14 14 14.4477 14 15V18.394L20.622 11.0362L14 4.41421Z" }) });
break;
case "reply":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 17 17", children: /* @__PURE__ */ jsx21("path", { d: "M8.7 0C4.1 0 .4 3.7.4 8.3c0 1.2.2 2.3.7 3.4-.2.6-.4 1.5-.7 2.5L0 15.8c-.2.7.5 1.4 1.2 1.2l1.6-.4 2.4-.7c1.1.5 2.2.7 3.4.7 4.6 0 8.3-3.7 8.3-8.3C17 3.7 13.3 0 8.7 0zM15 8.3c0 3.5-2.8 6.3-6.4 6.3-1.2 0-2.3-.3-3.2-.9l-3.2.9.9-3.2c-.5-.9-.9-2-.9-3.2.1-3.4 3-6.2 6.5-6.2S15 4.8 15 8.3z" }) });
break;
case "reblog":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 17 18.1", children: /* @__PURE__ */ jsx21("path", { d: "M12.8.2c-.4-.4-.8-.2-.8.4v2H2c-2 0-2 2-2 2v5s0 1 1 1 1-1 1-1v-4c0-1 .5-1 1-1h9v2c0 .6.3.7.8.4L17 3.6 12.8.2zM4.2 17.9c.5.4.8.2.8-.3v-2h10c2 0 2-2 2-2v-5s0-1-1-1-1 1-1 1v4c0 1-.5 1-1 1H5v-2c0-.6-.3-.7-.8-.4L0 14.6l4.2 3.3z" }) });
break;
case "like":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 20 18", children: /* @__PURE__ */ jsx21("path", { d: "M14.658 0c-1.625 0-3.21.767-4.463 2.156-.06.064-.127.138-.197.225-.074-.085-.137-.159-.196-.225C8.547.766 6.966 0 5.35 0 4.215 0 3.114.387 2.162 1.117c-2.773 2.13-2.611 5.89-1.017 8.5 2.158 3.535 6.556 7.18 7.416 7.875A2.3 2.3 0 0 0 9.998 18c.519 0 1.028-.18 1.436-.508.859-.695 5.257-4.34 7.416-7.875 1.595-2.616 1.765-6.376-1-8.5C16.895.387 15.792 0 14.657 0h.001zm0 2.124c.645 0 1.298.208 1.916.683 1.903 1.461 1.457 4.099.484 5.695-1.973 3.23-6.16 6.7-6.94 7.331a.191.191 0 0 1-.241 0c-.779-.631-4.966-4.101-6.94-7.332-.972-1.595-1.4-4.233.5-5.694.619-.475 1.27-.683 1.911-.683 1.064 0 2.095.574 2.898 1.461.495.549 1.658 2.082 1.753 2.203.095-.12 1.259-1.654 1.752-2.203.8-.887 1.842-1.461 2.908-1.461h-.001z" }) });
break;
case "ellipsis":
svg = /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 17.5 3.9", children: /* @__PURE__ */ jsx21("path", { d: "M17.5 1.9c0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9S14.5 0 15.6 0c1 0 1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 1.9-1.9 1.9-1.1.1-2-.8-2-1.9 0-1 .9-1.9 2-1.9s1.9.9 1.9 1.9m-6.8 0c0 1.1-.9 2-2 2-1 0-1.9-.9-1.9-2S.9 0 1.9 0c1.1 0 2 .9 2 1.9" }) });
break;
}
return /* @__PURE__ */ jsx21("span", { className: `tumblr-preview__post-icon tumblr-preview__post-icon-${name}`, children: svg });
};
var icons_default = TumblrPostIcon;
// src/tumblr-preview/post/actions/index.tsx
import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
var TumblrPostActions = () => /* @__PURE__ */ jsxs13("div", { className: "tumblr-preview__post-actions", children: [
/* @__PURE__ */ jsxs13("div", { className: "tumblr-preview__post-manage-actions", children: [
/* @__PURE__ */ jsxs13("div", { className: "tumblr-preview__post-actions-blaze", children: [
/* @__PURE__ */ jsx22(icons_default, { name: "blaze" }),
"\xA0Blaze"
] }),
/* @__PURE__ */ jsx22("ul", { children: [
{
icon: "delete",
// translators: "Delete" action on a Tumblr post
label: __6("Delete", "social-previews")
},
{
icon: "edit",
// translators: "Edit" action on a Tumblr post
label: __6("Edit", "social-previews")
}
].map(({ icon, label }) => /* @__PURE__ */ jsx22("li", { "aria-label": label, children: /* @__PURE__ */ jsx22(icons_default, { name: icon }) }, icon)) })
] }),
/* @__PURE__ */ jsxs13("div", { className: "tumblr-preview__post-social-actions", children: [
/* @__PURE__ */ jsx22("div", {
// translators: count of notes on a Tumblr post
children: __6("0 notes", "social-previews")
}),
/* @__PURE__ */ jsx22("ul", { children: [
{
icon: "share",
// translators: "Share" action on a Tumblr post
label: __6("Share", "social-previews")
},
{
icon: "reply",
// translators: "Reply" action on a Tumblr post
label: __6("Reply", "social-previews")
},
{
icon: "reblog",
// translators: "Reblog" action on a Tumblr post
label: __6("Reblog", "social-previews")
},
{
icon: "like",
// translators: "Like" action on a Tumblr post
label: __6("Like", "social-previews")
}
].map(({ icon, label }) => /* @__PURE__ */ jsx22("li", { "aria-label": label, children: /* @__PURE__ */ jsx22(icons_default, { name: icon }) }, icon)) })
] })
] });
var actions_default = TumblrPostActions;
// src/tumblr-preview/post/header/index.tsx
import { __ as __7 } from "@wordpress/i18n";
import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
var TumblrPostHeader = ({ user }) => /* @__PURE__ */ jsxs14("div", { className: "tumblr-preview__post-header", children: [
/* @__PURE__ */ jsx23("div", { className: "tumblr-preview__post-header-username", children: user?.displayName || // translators: username of a fictional Tumblr User
__7("anonymous-user", "social-previews") }),
/* @__PURE__ */ jsx23(icons_default, { name: "ellipsis" })
] });
var header_default = TumblrPostHeader;
// src/tumblr-preview/link-preview.tsx
import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
var TumblrLinkPreview = ({
title,
description,
image,
user,
url
}) => {
const avatarUrl = user?.avatarUrl;
return /* @__PURE__ */ jsxs15("div", { className: "tumblr-preview__post", children: [
avatarUrl && /* @__PURE__ */ jsx24("img", { className: "tumblr-preview__avatar", src: avatarUrl, alt: "" }),
/* @__PURE__ */ jsxs15("div", { className: "tumblr-preview__card", children: [
/* @__PURE__ */ jsx24(header_default, { user }),
/* @__PURE__ */ jsxs15("div", { className: "tumblr-preview__window", children: [
image && /* @__PURE__ */ jsxs15("div", { className: "tumblr-preview__window-top", children: [
/* @__PURE__ */ jsx24("div", { className: "tumblr-preview__overlay", children: /* @__PURE__ */ jsx24("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) }),
/* @__PURE__ */ jsx24(
"img",
{
className: "tumblr-preview__image",
src: image,
alt: __8("Tumblr preview thumbnail", "social-previews")
}
)
] }),
/* @__PURE__ */ jsxs15("div", { className: `tumblr-preview__window-bottom ${!image ? "is-full" : ""}`, children: [
!image && /* @__PURE__ */ jsx24("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }),
description && image && /* @__PURE__ */ jsx24("div", { className: "tumblr-preview__description", children: tumblrDescription(description) }),
url && /* @__PURE__ */ jsx24("div", { className: "tumblr-preview__site-name", children: baseDomain(url) })
] })
] }),
/* @__PURE__ */ jsx24(actions_default, {})
] })
] });
};
// src/tumblr-preview/post-preview.tsx
import { __ as __9 } from "@wordpress/i18n";
import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
var TumblrPostPreview = ({
title,
description,
image,
user,
url,
media
}) => {
const avatarUrl = user?.avatarUrl;
const mediaItem = media?.[0];
return /* @__PURE__ */ jsxs16("div", { className: "tumblr-preview__post", children: [
/* @__PURE__ */ jsx25(AvatarWithFallback, { className: "tumblr-preview__avatar", src: avatarUrl }),
/* @__PURE__ */ jsxs16("div", { className: "tumblr-preview__card", children: [
/* @__PURE__ */ jsx25(header_default, { user }),
/* @__PURE__ */ jsxs16("div", { className: "tumblr-preview__body", children: [
title ? /* @__PURE__ */ jsx25("div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) : null,
description && /* @__PURE__ */ jsx25("div", { className: "tumblr-preview__description", children: /* @__PURE__ */ jsx25(ExpandableText, { text: description, children: (visibleText) => preparePreviewText(tumblrDescription(visibleText), {
platform: "tumblr"
}) }) }),
mediaItem ? /* @__PURE__ */ jsx25("div", { className: "tumblr-preview__media-item", children: mediaItem.type.startsWith("video/") ? /* @__PURE__ */ jsx25("video", { controls: true, className: "tumblr-preview__media--video", children: /* @__PURE__ */ jsx25("source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ jsx25("img", { className: "tumblr-preview__image", src: mediaItem.url, alt: "" }) }) : image && /* @__PURE__ */ jsx25(
"img",
{
className: "tumblr-preview__image",
src: image,
alt: __9("Tumblr preview thumbnail", "social-previews")
}
),
/* @__PURE__ */ jsx25("a", { className: "tumblr-preview__url", href: url, target: "_blank", rel: "noreferrer", children: __9("View On WordPress", "social-previews") })
] }),
/* @__PURE__ */ jsx25(actions_default, {})
] })
] });
};
// src/tumblr-preview/previews.tsx
import { __ as __10 } from "@wordpress/i18n";
import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
var TumblrPreviews = ({
headingLevel,
hideLinkPreview,
hidePostPreview,
...props
}) => {
const hasMedia = !!props.media?.length;
return /* @__PURE__ */ jsxs17("div", { className: "social-preview tumblr-preview", children: [
!hidePostPreview && /* @__PURE__ */ jsxs17("section", { className: "social-preview__section tumblr-preview__section", children: [
/* @__PURE__ */ jsx26(SectionHeading, {
level: headingLevel,
// translators: refers to a social post on Tumblr
children: __10("Your post", "social-previews")
}),
/* @__PURE__ */ jsx26("p", { className: "social-preview__section-desc", children: __10("This is what your social post will look like on Tumblr:", "social-previews") }),
hasMedia ? /* @__PURE__ */ jsx26(TumblrPostPreview, { ...props }) : /* @__PURE__ */ jsx26(TumblrLinkPreview, { ...props })
] }),
!hideLinkPreview && /* @__PURE__ */ jsxs17("section", { className: "social-preview__section tumblr-preview__section", children: [
/* @__PURE__ */ jsx26(SectionHeading, {
level: headingLevel,
// translators: refers to a link on Tumblr
children: __10("Link preview", "social-previews")
}),
/* @__PURE__ */ jsx26("p", { className: "social-preview__section-desc", children: __10(
"This is what it will look like when someone shares the link to your WordPress post on Tumblr.",
"social-previews"
) }),
/* @__PURE__ */ jsx26(TumblrLinkPreview, { ...props, user: void 0 })
] })
] });
};
// src/facebook-preview/previews.tsx
import { __ as __15 } from "@wordpress/i18n";
// src/facebook-preview/link-preview.tsx
import { __ as __14 } from "@wordpress/i18n";
// src/constants.ts
var AUTO_SHARED_SOCIAL_POST_PREVIEW = "AUTO_SHARED_SOCIAL_POST_PREVIEW";
var AUTO_SHARED_LINK_PREVIEW = "AUTO_SHARED_LINK_PREVIEW";
var DEFAULT_LINK_PREVIEW = "DEFAULT_LINK_PREVIEW";
var TYPE_WEBSITE = "website";
var TYPE_ARTICLE = "article";
var LANDSCAPE_MODE = "landscape";
var PORTRAIT_MODE = "portrait";
// src/facebook-preview/helpers.ts
var TITLE_LENGTH3 = 110;
var DESCRIPTION_LENGTH4 = 200;
var CUSTOM_TEXT_LENGTH = 63206;
var facebookTitle = (text) => firstValid(
shortEnough(TITLE_LENGTH3),
hardTruncation(TITLE_LENGTH3)
)(stripHtmlTags(text)) || "";
var facebookDescription = (text) => firstValid(
shortEnough(DESCRIPTION_LENGTH4),
hardTruncation(DESCRIPTION_LENGTH4)
)(stripHtmlTags(text)) || "";
// src/facebook-preview/custom-text.tsx
import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
var CustomText = ({ text, url, forceUrlDisplay }) => {
let postLink;
const showPostLink = hasTag(text, "a") || forceUrlDisplay && !!url && !text.includes(url);
if (showPostLink) {
postLink = /* @__PURE__ */ jsx27(
"a",
{
className: "facebook-preview__custom-text-post-url",
href: url,
rel: "nofollow noopener noreferrer",
target: "_blank",
children: url
}
);
}
return /* @__PURE__ */ jsxs18("p", { className: "facebook-preview__custom-text", children: [
/* @__PURE__ */ jsx27("span", { children: /* @__PURE__ */ jsx27(ExpandableText, { text, children: (visibleText) => preparePreviewText(visibleText, {
platform: "facebook",
maxChars: CUSTOM_TEXT_LENGTH
}) }) }),
postLink
] });
};
var custom_text_default = CustomText;
// src/facebook-preview/hooks/use-image-hook.ts
import { __ as __11 } from "@wordpress/i18n";
import { useCallback as useCallback3, useState as useState3 } from "react";
var useImage = ({ mode: initialMode }) => {
const [mode, setMode] = useState3(initialMode);
const [isLoadingImage, setLoadingImage] = useState3(true);
const onLoad = useCallback3(
({ target }) => {
if (!mode) {
const image = target;
setMode(image.naturalWidth > image.naturalHeight ? LANDSCAPE_MODE : PORTRAIT_MODE);
}
setLoadingImage(false);
},
[mode]
);
const onError = useCallback3(() => setLoadingImage(false), []);
return [
mode,
isLoadingImage,
{
alt: __11("Facebook Preview Thumbnail", "social-previews"),
onLoad,
onError
}
];
};
var use_image_hook_default = useImage;
// src/facebook-preview/post/actions/index.tsx
import { __ as __12 } from "@wordpress/i18n";
// src/facebook-preview/post/icons/index.tsx
import { jsx as jsx28 } from "react/jsx-runtime";
var FacebookPostIcon = ({ name }) => /* @__PURE__ */ jsx28("i", { className: `facebook-preview__post-icon facebook-preview__post-icon-${name}` });
var icons_default2 = FacebookPostIcon;
// src/facebook-preview/post/actions/index.tsx
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
var FacebookPostActions = () => /* @__PURE__ */ jsx29("ul", { className: "facebook-preview__post-actions", children: [
{
icon: "like",
// translators: Facebook "Like" action
label: __12("Like", "social-previews")
},
{
icon: "comment",
// translators: Facebook "Comment" action
label: __12("Comment", "social-previews")
},
{
icon: "share",
// translators: Facebook "Share" action
label: __12("Share", "social-previews")
}
].map(({ icon, label }) => /* @__PURE__ */ jsxs19("li", { children: [
/* @__PURE__ */ jsx29(icons_default2, { name: icon }),
/* @__PURE__ */ jsx29("span", { children: label })
] }, icon)) });
var actions_default2 = FacebookPostActions;
// src/facebook-preview/post/header/index.tsx
import { __ as __13, _x } from "@wordpress/i18n";
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
var FacebookPostHeader = ({ user, timeElapsed, hideOptions }) => {
return /* @__PURE__ */ jsxs20("div", { className: "facebook-preview__post-header", children: [
/* @__PURE__ */ jsxs20("div", { className: "facebook-preview__post-header-content", children: [
/* @__PURE__ */ jsx30(
AvatarWithFallback,
{
className: "facebook-preview__post-header-avatar",
src: user?.avatarUrl
}
),
/* @__PURE__ */ jsxs20("div", { children: [
/* @__PURE__ */ jsx30("div", { className: "facebook-preview__post-header-name", children: user?.displayName || // translators: name of a fictional Facebook User
__13("Anonymous User", "social-previews") }),
/* @__PURE__ */ jsxs20("div", { className: "facebook-preview__post-header-share", children: [
/* @__PURE__ */ jsx30("span", { className: "facebook-preview__post-header-time", children: timeElapsed ? __13(
// translators: short version of `1 hour`
"1h",
"social-previews"
) : _x(
// translators: temporal indication of when a post was published
"Just now",
"",
"social-previews"
) }),
/* @__PURE__ */ jsx30("span", { className: "facebook-