Highlight mentions when rendering annotation text #6818

acelaya · 2025-02-11T09:10:29Z

This PR adds the logic to parse annotation texts when rendering them in the list of annotations or the annotation editor preview, look for mention tags, and render them so that they are highlighted.

Mention tags can be highlighted in three different ways:

Proper mentions with a link to the user profile: rendered as a link with brand color, underline and bold text.
Proper mentions without a link to the user profile: rendered as a non-interactive element, with brand color and bold text.
Invalid mentions (the tag appears in the text, but the backend did not include a corresponding entry in the mentions array): rendered as a non-interactive element, with lighter bold text and wavy red underline.

In addition, this PR also ensures all mentions are styled as plain text by default, and only after being processed they look like in the screenshots above.

This is important to ensure invalid mentions do not look like regular links if processing them failed for any reason, as this could confuse users and think the mentions did in fact "work"

This PR does not cover displaying a popover when hovering over a rendered mention. That'll be covered on a follow-up PR.

acelaya · 2025-02-11T09:11:14Z

src/sidebar/helpers/mentions.ts

I removed anything related to styling from here, and moved it to StyledText.scss

codecov · 2025-02-11T09:55:43Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.45%. Comparing base (eca9044) to head (c989091).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6818   +/-   ##
=======================================
  Coverage   99.45%   99.45%           
=======================================
  Files         271      271           
  Lines       10406    10409    +3     
  Branches     2488     2488           
=======================================
+ Hits        10349    10352    +3     
  Misses         57       57

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

robertknight · 2025-02-11T09:55:46Z

Invalid mentions (the tag appears in the text, but the backend did not include a corresponding entry in the mentions array): rendered as a non-interactive element, with lighter text, and italic bold font.

I think the difference compared to a valid mention may be too subtle for users who cannot perceive the color difference. Perhaps invalid mentions could use a style that reminds of a spelling or grammar error (text-decoration-style: wavy)? Other ideas welcome.

I can't remember what you already had planned here, but I think there needs to be some kind of popover for invalid mentions as well as valid ones to spell out the issue more explicitly.

acelaya · 2025-02-11T09:59:12Z

I think the difference compared to a valid mention may be too subtle for users who cannot perceive the color difference.

Good point. I have been experimenting with some style that includes a different border, but they ended up cropped when the mention is at the very top of very bottom.

Perhaps invalid mentions could use a style that reminds of a spelling or grammar error (text-decoration-style: wavy)?

Good idea. Let me see if I can put something together.

I can't remember what you already had planned here, but I think there needs to be some kind of popover for invalid mentions as well as valid ones to spell out the issue more explicitly.

Yes! I will address popovers on a follow-up PR.

robertknight

I got confused when testing initially because mentions are only parsed when an annotation is created rather than edited. I think we should change that on the backend soon because that is going to cause a lot of confusion.

In this PR I found an issue that invalid mentions are not styled as such if the annotation contains no valid mentions, because the annotation tags created when the text is submitted to the server are tags that match the styling for valid mentions, and if the mentions payload from the server is empty, these don't get updated when the annotation is rendered.

src/sidebar/components/MarkdownEditor.tsx

src/sidebar/components/MarkdownView.tsx

src/styles/sidebar/components/StyledText.scss

robertknight · 2025-02-11T12:02:00Z

src/sidebar/components/MarkdownView.tsx

@@ -35,6 +41,12 @@ export default function MarkdownView({
    });
  }, [markdown]);

+  useEffect(() => {
+    if (hasMentions) {
+      renderMentionTags(content.current!, mentions);


I'm looking at the code for renderMentionTags and it is a bit confusing because it looks like it doesn't change anything at first glance. The elementForMention function does actually modify the element, but this isn't obvious from the name.

When you say "it looks like it doesn't change anything at first glance", do you mean that it is not obvious that the function has side effects? If so, I agree.

Yes, exactly.

Ok, since the function is not new from this PR, I'll add that to my todo list and address it separately, if that's ok.

Here https://github.com/orgs/hypothesis/projects/153/views/1?pane=issue&itemId=97415193

src/sidebar/components/MarkdownView.tsx

acelaya · 2025-02-11T13:46:50Z

I got confused when testing initially because mentions are only parsed when an annotation is created rather than edited. I think we should change that on the backend soon because that is going to cause a lot of confusion.

I'll give this a thought. Thanks!

acelaya · 2025-02-11T13:49:36Z

src/styles/sidebar/components/StyledText.scss

+    a[data-hyp-mention][data-hyp-mention-type='link'] {
+      @apply text-brand font-bold underline;
+    }
+
+    // Valid processed mention without link
+    span[data-hyp-mention][data-hyp-mention-type='no-link'] {
+      @apply text-brand font-bold;
+    }
+
+    // Invalid processed mention
+    span[data-hyp-mention][data-hyp-mention-type='invalid'] {
+      @apply text-grey-6 font-bold underline decoration-wavy decoration-red-error;
+    }


Processed mentions will include the data-hyp-mention-type attribute with values 'link' | 'no-link' | 'invalid'. That way we can make mentions look like plain text until they have been processed.

src/styles/sidebar/components/StyledText.scss

acelaya commented Feb 11, 2025

View reviewed changes

src/sidebar/helpers/mentions.ts Outdated

Copy link

Contributor Author

acelaya Feb 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed anything related to styling from here, and moved it to StyledText.scss

acelaya force-pushed the highlight-mentions branch 6 times, most recently from f3c8d7c to faf3990 Compare February 11, 2025 09:53

acelaya force-pushed the highlight-mentions branch 2 times, most recently from d368b76 to 2e41561 Compare February 11, 2025 10:17

acelaya marked this pull request as ready for review February 11, 2025 10:20

acelaya requested a review from robertknight February 11, 2025 10:20

acelaya force-pushed the highlight-mentions branch from 2e41561 to d28d4c6 Compare February 11, 2025 10:45

acelaya mentioned this pull request Feb 11, 2025

Display a popover when hovering over highlighted mentions #6820

Merged

robertknight requested changes Feb 11, 2025

View reviewed changes

acelaya force-pushed the highlight-mentions branch 2 times, most recently from 51e0f0a to bc353c1 Compare February 11, 2025 13:44

acelaya force-pushed the highlight-mentions branch from bc353c1 to 2f22ac3 Compare February 11, 2025 13:47

acelaya commented Feb 11, 2025

View reviewed changes

acelaya requested a review from robertknight February 11, 2025 13:55

robertknight approved these changes Feb 12, 2025

View reviewed changes

src/styles/sidebar/components/StyledText.scss Outdated Show resolved Hide resolved

Highlight mentions when rendering annotation text

c989091

acelaya force-pushed the highlight-mentions branch from 2f22ac3 to c989091 Compare February 12, 2025 09:27

acelaya merged commit 1e1103f into main Feb 12, 2025
2 checks passed

acelaya deleted the highlight-mentions branch February 12, 2025 09:29

acelaya mentioned this pull request Feb 14, 2025

Consider what needs to happen on annotation editing regarding mentions. hypothesis/h#9351

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Highlight mentions when rendering annotation text #6818

Highlight mentions when rendering annotation text #6818

acelaya commented Feb 11, 2025 •

edited

Loading

acelaya Feb 11, 2025

codecov bot commented Feb 11, 2025 •

edited

Loading

robertknight commented Feb 11, 2025

acelaya commented Feb 11, 2025

robertknight left a comment

robertknight Feb 11, 2025

acelaya Feb 11, 2025

robertknight Feb 11, 2025

acelaya Feb 11, 2025

acelaya Feb 11, 2025

acelaya commented Feb 11, 2025

acelaya Feb 11, 2025

Highlight mentions when rendering annotation text #6818

Highlight mentions when rendering annotation text #6818

Conversation

acelaya commented Feb 11, 2025 • edited Loading

acelaya Feb 11, 2025

Choose a reason for hiding this comment

codecov bot commented Feb 11, 2025 • edited Loading

Codecov Report

robertknight commented Feb 11, 2025

acelaya commented Feb 11, 2025

robertknight left a comment

Choose a reason for hiding this comment

robertknight Feb 11, 2025

Choose a reason for hiding this comment

acelaya Feb 11, 2025

Choose a reason for hiding this comment

robertknight Feb 11, 2025

Choose a reason for hiding this comment

acelaya Feb 11, 2025

Choose a reason for hiding this comment

acelaya Feb 11, 2025

Choose a reason for hiding this comment

acelaya commented Feb 11, 2025

acelaya Feb 11, 2025

Choose a reason for hiding this comment

acelaya commented Feb 11, 2025 •

edited

Loading

codecov bot commented Feb 11, 2025 •

edited

Loading