@automattic/social-previews 3.1.3 → 3.2.0

package/dist/index.js

@@ -7,13 +7,15 @@ var baseDomain = (url) => {
   const slashIndex = withoutProtocol.indexOf("/");
   return slashIndex === -1 ? withoutProtocol : withoutProtocol.substring(0, slashIndex);
 };
-var shortEnough = (limit) => (title) => title.length <= limit ? title : false;
+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) => title.slice(0, limit).concat("\u2026");
+var hardTruncation = (limit) => (title) => codepointSlice(title, 0, limit).concat("\u2026");
 var firstValid = (...predicates) => (a) => _optionalChain([predicates, 'access', _ => _.find, 'call', _2 => _2((p) => false !== p(a)), 'optionalCall', _3 => _3(a)]);
 var stripHtmlTags = (description, allowedTags = []) => {
   const pattern = new RegExp(`(<([^${allowedTags.join("")}>]+)>)`, "gi");
@@ -70,7 +72,7 @@ function preparePreviewText(text, options) {
   } = options;
   let result = stripHtmlTags(text);
   result = result.replaceAll(/(?:\s*[\n\r]){2,}/g, "\n\n");
-  if (maxChars && result.length > maxChars) {
+  if (maxChars && codepointLength(result) > maxChars) {
     result = hardTruncation(maxChars)(result);
   }
   if (maxLines) {
@@ -212,7 +214,7 @@ var GoogleSearchPreview = ({
 // src/twitter-preview/card.tsx
 var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
 
-var DESCRIPTION_LENGTH2 = 200;
+var DESCRIPTION_LENGTH2 = 280;
 var twitterDescription = firstValid(
   shortEnough(DESCRIPTION_LENGTH2),
   hardTruncation(DESCRIPTION_LENGTH2)
@@ -361,12 +363,11 @@ var Sidebar = ({ profileImage, showThreadConnector }) => {
 
 // src/twitter-preview/text.tsx
 
-var Text = ({ text, url, retainUrl }) => {
+var Text = ({ text }) => {
   if (!text) {
     return null;
   }
-  const tweetText = url && !retainUrl && text.endsWith(url) ? text.substring(0, text.lastIndexOf(url)) : text;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__text", children: preparePreviewText(tweetText, { platform: "twitter" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "twitter-preview__text", children: preparePreviewText(text, { platform: "twitter" }) });
 };
 
 // src/twitter-preview/post-preview.tsx
@@ -392,7 +393,7 @@ var TwitterPostPreview = ({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__main", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, { name, screenName, date }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "twitter-preview__content", children: [
-        text ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { text, url: url || "", retainUrl: hasMedia }) : null,
+        text ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { text }) : null,
         hasMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Media, { media }) : null,
         tweetUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QuoteTweet, { tweetUrl }) : null,
         !hasMedia && url && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -489,8 +490,49 @@ var TwitterPreviews = ({
 // src/linkedin-preview/post-preview.tsx
 
 
+// src/shared/expandable-text/index.tsx
+
+
+
+
+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] = _react.useReducer.call(void 0, (state) => !state, false);
+  const stripped = stripHtmlTags(text);
+  if (codepointLength2(stripped) <= EXPAND_THRESHOLD_CHARS) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: children(text) });
+  }
+  if (expanded) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      children(text),
+      " ",
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _components.Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: _i18n.__.call(void 0, "See less", "social-previews") })
+    ] });
+  }
+  const truncated = truncateAtWordBoundary(stripped, EXPAND_THRESHOLD_CHARS);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    children(truncated),
+    "\u2026 ",
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _components.Button, { variant: "link", className: "social-previews__expand-toggle", onClick: toggle, children: _i18n.__.call(void 0, "See more", "social-previews") })
+  ] });
+}
+
 // src/linkedin-preview/constants.ts
-var FEED_TEXT_MAX_LENGTH = 550;
+var FEED_TEXT_MAX_LENGTH = 3e3;
 
 // src/linkedin-preview/post-preview.tsx
 
@@ -532,11 +574,11 @@ function LinkedInPostPreview({
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__content", children: [
       description ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "linkedin-preview__caption", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: preparePreviewText(description, {
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => preparePreviewText(visibleText, {
           platform: "linkedin",
           maxChars: FEED_TEXT_MAX_LENGTH
-        }) }),
-        hasMedia && url && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        }) }) }),
+        hasMedia && url && !description.includes(url) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
           " - ",
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, rel: "nofollow noopener noreferrer", target: "_blank", children: url })
         ] })
@@ -622,7 +664,7 @@ var LinkedInPreviews = ({
 
 // src/tumblr-preview/helpers.ts
 var TITLE_LENGTH2 = 1e3;
-var DESCRIPTION_LENGTH3 = 400;
+var DESCRIPTION_LENGTH3 = 4096;
 var tumblrTitle = (text) => firstValid(
   shortEnough(TITLE_LENGTH2),
   hardTruncation(TITLE_LENGTH2)
@@ -804,9 +846,9 @@ var TumblrPostPreview = ({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, header_default, { user }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tumblr-preview__body", children: [
         title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__title", children: tumblrTitle(title) }) : null,
-        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__description", children: preparePreviewText(tumblrDescription(description), {
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__description", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => preparePreviewText(tumblrDescription(visibleText), {
           platform: "tumblr"
-        }) }),
+        }) }) }),
         mediaItem ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tumblr-preview__media-item", children: mediaItem.type.startsWith("video/") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { controls: true, className: "tumblr-preview__media--video", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "source", { src: mediaItem.url, type: mediaItem.type }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "tumblr-preview__image", src: mediaItem.url, alt: "" }) }) : image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "img",
           {
@@ -875,7 +917,7 @@ var PORTRAIT_MODE = "portrait";
 // src/facebook-preview/helpers.ts
 var TITLE_LENGTH3 = 110;
 var DESCRIPTION_LENGTH4 = 200;
-var CUSTOM_TEXT_LENGTH = 440;
+var CUSTOM_TEXT_LENGTH = 63206;
 var facebookTitle = (text) => firstValid(
   shortEnough(TITLE_LENGTH3),
   hardTruncation(TITLE_LENGTH3)
@@ -889,7 +931,8 @@ var facebookDescription = (text) => firstValid(
 
 var CustomText = ({ text, url, forceUrlDisplay }) => {
   let postLink;
-  if (forceUrlDisplay || hasTag(text, "a")) {
+  const showPostLink = hasTag(text, "a") || forceUrlDisplay && !!url && !text.includes(url);
+  if (showPostLink) {
     postLink = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "a",
       {
@@ -902,10 +945,10 @@ var CustomText = ({ text, url, forceUrlDisplay }) => {
     );
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "facebook-preview__custom-text", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: preparePreviewText(text, {
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text, children: (visibleText) => preparePreviewText(visibleText, {
       platform: "facebook",
       maxChars: CUSTOM_TEXT_LENGTH
-    }) }),
+    }) }) }),
     postLink
   ] });
 };
@@ -1233,6 +1276,7 @@ var DEFAULT_MASTODON_INSTANCE = "mastodon.social";
 var TITLE_LENGTH4 = 200;
 var BODY_LENGTH = 500;
 var URL_LENGTH2 = 30;
+var BODY_CHAR_LIMIT = BODY_LENGTH - URL_LENGTH2;
 var ADDRESS_PATTERN = /^@([^@]*)@([^@]*)$/i;
 var mastodonTitle = (text) => firstValid(
   shortEnough(TITLE_LENGTH4),
@@ -1357,17 +1401,17 @@ var MastonPostBody = (props) => {
   };
   let bodyTxt;
   if (customText) {
-    bodyTxt = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: mastodonBody(customText, options) });
+    bodyTxt = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: customText, children: (visibleText) => mastodonBody(visibleText, options) }) });
   } else if (description) {
     if (title) {
       const renderedTitle = stripHtmlTags(title);
       options.offset = renderedTitle.length;
       bodyTxt = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: renderedTitle }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: mastodonBody(description, options) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => mastodonBody(visibleText, options) }) })
       ] });
     } else {
-      bodyTxt = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: mastodonBody(description, options) });
+      bodyTxt = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => mastodonBody(visibleText, options) }) });
     }
   } else {
     bodyTxt = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: mastodonBody(title, options) });
@@ -1438,7 +1482,7 @@ var MastodonPreviews = ({
 
 
 // src/nextdoor-preview/constants.ts
-var FEED_TEXT_MAX_LENGTH2 = 500;
+var FEED_TEXT_MAX_LENGTH2 = 65e3;
 
 // src/nextdoor-preview/footer-actions.tsx
 
@@ -1592,11 +1636,11 @@ function NextdoorPostPreview({
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "nextdoor-preview__body", children: [
       description ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "nextdoor-preview__caption", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: preparePreviewText(description, {
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: description, children: (visibleText) => preparePreviewText(visibleText, {
           platform: "nextdoor",
           maxChars: FEED_TEXT_MAX_LENGTH2
-        }) }),
-        !hasMedia && url && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        }) }) }),
+        !hasMedia && url && !description.includes(url) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, rel: "nofollow noopener noreferrer", target: "_blank", children: url })
@@ -1774,15 +1818,16 @@ var actions_default4 = BlueskyPostActions;
 var TITLE_LENGTH5 = 200;
 var BODY_LENGTH2 = 300;
 var URL_LENGTH3 = 40;
+var BODY_CHAR_LIMIT2 = BODY_LENGTH2 - URL_LENGTH3;
 var blueskyTitle = (text) => firstValid(
   shortEnough(TITLE_LENGTH5),
   hardTruncation(TITLE_LENGTH5)
 )(stripHtmlTags(text)) || "";
 var blueskyBody = (text, options = {}) => {
-  const { offset = 0 } = options;
+  const { offset = 0, reserveUrlSpace = true } = options;
   return preparePreviewText(text, {
     platform: "bluesky",
-    maxChars: BODY_LENGTH2 - URL_LENGTH3 - offset
+    maxChars: BODY_LENGTH2 - (reserveUrlSpace ? URL_LENGTH3 : 0) - offset
   });
 };
 var blueskyUrl = (text) => firstValid(shortEnough(URL_LENGTH3), hardTruncation(URL_LENGTH3))(stripHtmlTags(text)) || "";
@@ -1790,10 +1835,11 @@ var blueskyUrl = (text) => firstValid(shortEnough(URL_LENGTH3), hardTruncation(U
 // src/bluesky-preview/post/body/index.tsx
 
 var BlueskyPostBody = ({ customText, url, children, appendUrl }) => {
+  const showUrl = appendUrl && !!url && !_optionalChain([customText, 'optionalAccess', _28 => _28.includes, 'call', _29 => _29(url)]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "bluesky-preview__body", children: [
     customText ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: blueskyBody(customText) }),
-      appendUrl && url ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: blueskyBody(customText, { reserveUrlSpace: showUrl }) }),
+      showUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: url, target: "_blank", rel: "noreferrer noopener", children: blueskyUrl(url.replace(/^https?:\/\//, "")) })
       ] }) : null
@@ -1856,7 +1902,7 @@ var BlueskyPostPreview = (props) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BlueskyPostSidebar, { user }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, header_default4, { user }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, body_default2, { ...props, appendUrl: _nullishCoalesce(appendUrl, () => ( Boolean(_optionalChain([media, 'optionalAccess', _28 => _28.length])))), children: _optionalChain([media, 'optionalAccess', _29 => _29.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "bluesky-preview__media", { "as-grid": media.length > 1 }), children: media.map((mediaItem, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, body_default2, { ...props, appendUrl: _nullishCoalesce(appendUrl, () => ( Boolean(_optionalChain([media, 'optionalAccess', _30 => _30.length])))), children: _optionalChain([media, 'optionalAccess', _31 => _31.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "bluesky-preview__media", { "as-grid": media.length > 1 }), children: media.map((mediaItem, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
           className: "bluesky-preview__media-item",
@@ -1864,7 +1910,7 @@ var BlueskyPostPreview = (props) => {
         },
         `bluesky-preview__media-item-${index}`
       )) }) : null }),
-      !_optionalChain([media, 'optionalAccess', _30 => _30.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, card_default2, { ...props }) : null,
+      !_optionalChain([media, 'optionalAccess', _32 => _32.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, card_default2, { ...props }) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, actions_default4, {})
     ] })
   ] });
@@ -2053,17 +2099,17 @@ var ThreadsPostPreview = ({
   title,
   url
 }) => {
-  const hasMedia = !!_optionalChain([media, 'optionalAccess', _31 => _31.length]);
+  const hasMedia = !!_optionalChain([media, 'optionalAccess', _33 => _33.length]);
   const displayAsCard = url && image && !hasMedia;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "threads-preview__wrapper", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "threads-preview__container", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Sidebar2, { profileImage, showThreadConnector }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "threads-preview__main", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header2, { name, date }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "threads-preview__content", children: [
-        caption ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "threads-preview__text", children: preparePreviewText(caption, {
+        caption ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "threads-preview__text", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: caption, children: (visibleText) => preparePreviewText(visibleText, {
           platform: "threads",
           maxChars: CAPTION_MAX_CHARS
-        }) }) : null,
+        }) }) }) : null,
         hasMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Media2, { media }) : null,
         displayAsCard ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Card2, { image, title: title || "", url }) : null
       ] }),
@@ -2100,7 +2146,7 @@ var ThreadsPreviews = ({
   hidePostPreview,
   posts
 }) => {
-  if (!_optionalChain([posts, 'optionalAccess', _32 => _32.length])) {
+  if (!_optionalChain([posts, 'optionalAccess', _34 => _34.length])) {
     return null;
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "social-preview threads-preview", children: [
@@ -2147,7 +2193,7 @@ var ThreadsPreviews = ({
 
 
 // src/instagram-preview/constants.tsx
-var FEED_TEXT_MAX_LENGTH3 = 520;
+var FEED_TEXT_MAX_LENGTH3 = 2200;
 
 // src/instagram-preview/icons/bookmark.tsx
 
@@ -2305,7 +2351,7 @@ function InstagramPostPreview({
   url
 }) {
   const username = name || "username";
-  const mediaItem = _optionalChain([media, 'optionalAccess', _33 => _33[0]]);
+  const mediaItem = _optionalChain([media, 'optionalAccess', _35 => _35[0]]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "instagram-preview__wrapper", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "instagram-preview__container", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "instagram-preview__header", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "instagram-preview__header--avatar", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarWithFallback, { src: profileImage }) }),
@@ -2328,11 +2374,11 @@ function InstagramPostPreview({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "instagram-preview__content--name", children: username }),
         "\xA0",
         caption ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "instagram-preview__content--text", children: [
-          preparePreviewText(caption, {
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandableText, { text: caption, children: (visibleText) => preparePreviewText(visibleText, {
             platform: "instagram",
             maxChars: FEED_TEXT_MAX_LENGTH3
-          }),
-          media && url && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          }) }),
+          media && url && !caption.includes(url) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
             url