diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index 91e5314d45..4341aaf22f 100644 --- a/tools/linter_lib/custom_check.py +++ b/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": ['

Foo

', 'style = "color: blue;"'], diff --git a/web/src/postprocess_content.ts b/web/src/postprocess_content.ts index 45a0dc664d..330c2cf88c 100644 --- a/web/src/postprocess_content.ts +++ b/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. diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css index 81b62feb46..e19cc668ef 100644 --- a/web/styles/rendered_markdown.css +++ b/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 diff --git a/web/tests/postprocess_content.test.cjs b/web/tests/postprocess_content.test.cjs index 80aa314eec..c61ad547cd 100644 --- a/web/tests/postprocess_content.test.cjs +++ b/web/tests/postprocess_content.test.cjs @@ -34,6 +34,15 @@ run_test("postprocess_content", () => { '' + '' + "" + + "" + + '
' + + '' + + '
' + + '
' + + 'About us' + + "
" + + '
All about us.
' + + "
" + "
", ), 'good ' + @@ -56,6 +65,15 @@ run_test("postprocess_content", () => { '' + "" + "" + + "" + + '
' + + '' + + '
' + + '
' + + 'About us' + + "
" + + '
All about us.
' + + "
" + "
", ); });