Emojis within links (commit messages etc.) aren’t clickable

[JanRomero]

trafficstars

Description

Hi,

when commit messages contain emojis, their <a> tags are split at the emojis and the emojis are wrapped in <span>s, resulting in this:

<span class="commit-summary " title="" data-tooltip-content="Bug ❌ Feature ✅" aria-label="Bug ❌ Feature ✅">
    <a href="/xxx" class="default-link muted">Bug </a>
    <span class="emoji" aria-label="cross mark">❌</span>
    <a href="/xxx" class="default-link muted"> Feature </a>
    <span class="emoji" aria-label="check mark button">✅</span>
</span>

(The example is from the commit list, but the issue happens everywhere.)

This makes the emojis unclickable and splits the clickable link into two separate links, which looks weird on hover (the message is only partially highlighted/underlined). Crucially it also means that commit messages consisting solely of emojis are not clickable at all.

The desirable output in my opinion would be a single <a> wrapping the entire message including the emoji <span>s:

<span class="commit-summary " title="" data-tooltip-content="Bug ❌ Feature ✅" aria-label="Bug ❌ Feature ✅">
    <a href="/xxx" class="default-link muted">
        Bug 
        <span class="emoji" aria-label="cross mark">❌</span>
        Feature 
        <span class="emoji" aria-label="check mark button">✅</span>
    </a>
</span>

I believe the code responsible is this method emojiProcessor():

https://github.com/go-gitea/gitea/blob/36232b69db312e16a43d1134ff98ab5d65bf80da/modules/markup/html.go#L1078

Thank you!

Screenshots

Gitea Version

1.22.0+rc1

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

No response

Browser Version

Any, doesn’t matter

[silverwind]

Sounds good. I agree, emojis should not split links and they can be treated like any other text glyphs, even if they render via image (like for custom emojis), <a> can wrap everything.