Bookmark card truncation in emails (#1388)

fixes https://linear.app/ghost/issue/DES-875/bookmark-card-doesnt-have-ellipses-on-truncated-subhead-in-newsletter

Bookmark cards in emails weren't properly being truncated. The truncation happened, but no ellipsis were showing, which was confusing. That's solved now, applying the same functions that we use in the editor.

packages/kg-default-nodes/lib/nodes/bookmark/bookmark-renderer.js

@@ -17,6 +17,50 @@ export function renderBookmarkNode(node, options = {}) {
     }
 }
 
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+function truncateText(text, maxLength) {
+    if (text && text.length > maxLength) {
+        return text.substring(0, maxLength - 1).trim() + '…';
+    } else {
+        return text ?? '';
+    }
+}
+
+function truncateHtml(text, maxLength, maxLengthMobile) {
+    // If no mobile length specified or mobile length is larger than desktop,
+    // just do a simple truncate
+    if (!maxLengthMobile || maxLength <= maxLengthMobile) {
+        return escapeHtml(truncateText(text, maxLength));
+    }
+
+    // Handle text shorter than mobile length
+    if (text.length <= maxLengthMobile) {
+        return escapeHtml(text);
+    }
+
+    if (text && text.length > maxLengthMobile) {
+        let ellipsis = '';
+
+        if (text.length > maxLengthMobile && text.length <= maxLength) {
+            ellipsis = '<span class="hide-desktop">…</span>';
+        } else if (text.length > maxLength) {
+            ellipsis = '…';
+        }
+
+        return escapeHtml(text.substring(0, maxLengthMobile - 1)) + '<span class="desktop-only">' + escapeHtml(text.substring(maxLengthMobile - 1, maxLength - 1)) + '</span>' + ellipsis;
+    } else {
+        return escapeHtml(text ?? '');
+    }
+}
+
 function emailTemplate(node, document) {
     const title = node.title;
     const publisher = node.publisher;
@@ -36,7 +80,7 @@ function emailTemplate(node, document) {
                 <a class="kg-bookmark-container" href="${url}">
                     <div class="kg-bookmark-content">
                         <div class="kg-bookmark-title">${title}</div>
-                        <div class="kg-bookmark-description">${description}</div>
+                        <div class="kg-bookmark-description">${truncateHtml(description, 120, 90)}</div>
                         <div class="kg-bookmark-metadata">
                             ${icon ? `<img class="kg-bookmark-icon" src="${icon}" alt="">` : ''}
                             ${publisher ? `<span class="kg-bookmark-author" src="${publisher}">${publisher}</span>` : ''}
@@ -65,7 +109,7 @@ function emailTemplate(node, document) {
                                 <td>
                                     <div class="kg-bookmark-description--outlook">
                                         <a href="${url}" style="text-decoration: none; margin-top: 12px; color: #738a94; font-size: 13px; line-height: 1.5em; font-weight: 400;">
-                                            ${description}
+                                            ${truncateHtml(description, 120, 90)}
                                         </a>
                                     </div>
                                 </td>