url_previews: Post-process embed links for performant CSS.

tools/linter_lib/custom_check.py

@@ -211,6 +211,7 @@ js_rules = RuleList(
             "description": "Avoid using the `style=` attribute; we prefer styling in CSS files",
             "exclude": {
                 "web/tests/compose_paste.test.cjs",
+                "web/tests/postprocess_content.test.cjs",
             },
             "good_lines": ["#my-style {color: blue;}", "const style =", 'some_style = "test"'],
             "bad_lines": ['<p style="color: blue;">Foo</p>', 'style = "color: blue;"'],

web/src/postprocess_content.ts

@@ -84,6 +84,11 @@ export function postprocess_content(html: string): string {
             }
         }
 
+        // Add a class to the anchor tag on
+        if (elt.parentElement?.classList.contains("message_embed_title")) {
+            elt.classList.add("message-embed-title-link");
+        }
+
         if (elt.parentElement?.classList.contains("message_inline_image")) {
             // For inline images we want to handle the tooltips explicitly, and disable
             // the browser's built in handling of the title attribute.

web/styles/rendered_markdown.css

@@ -732,7 +732,7 @@
                 color: var(--color-markdown-link-hover);
             }
 
-            a {
+            .message-embed-title-link {
                 /* Line-clamp lines seem to have a small
                    interline area that's not clickable
                    unless we set the anchor to display as

web/tests/postprocess_content.test.cjs

@@ -34,6 +34,15 @@ run_test("postprocess_content", () => {
                 '<a class="" href="https://www.youtube.com/watch?v=tyKJueEk0XM">' +
                 '<img src="https://i.ytimg.com/vi/tyKJueEk0XM/default.jpg">' +
                 "</a>" +
+                "</div>" +
+                '<div class="message_embed">' +
+                '<a class="message_embed_image" href="https://example.com/about" style="background-image: url(&quot;https://example.com/preview.jpeg&quot;)"></a>' +
+                '<div class="data-container">' +
+                '<div class="message_embed_title">' +
+                '<a href="https://example.com/about">About us</a>' +
+                "</div>" +
+                '<div class="message_embed_description">All about us.</div>' +
+                "</div>" +
                 "</div>",
         ),
         '<a href="http://example.com" target="_blank" rel="noopener noreferrer" title="http://example.com/">good</a> ' +
@@ -56,6 +65,15 @@ run_test("postprocess_content", () => {
             '<img src="https://i.ytimg.com/vi/tyKJueEk0XM/mqdefault.jpg" class="media-image-element" loading="lazy">' +
             "</a>" +
             "</div>" +
+            "</div>" +
+            '<div class="message_embed">' +
+            '<a class="message_embed_image" href="https://example.com/about" style="background-image: url(&quot;https://example.com/preview.jpeg&quot;)" target="_blank" rel="noopener noreferrer" title="https://example.com/about"></a>' +
+            '<div class="data-container">' +
+            '<div class="message_embed_title">' +
+            '<a href="https://example.com/about" target="_blank" rel="noopener noreferrer" class="message-embed-title-link" title="https://example.com/about">About us</a>' +
+            "</div>" +
+            '<div class="message_embed_description">All about us.</div>' +
+            "</div>" +
             "</div>",
     );
 });