Backport emoji fixes to 1.12 (#12327)

* Fix emoji detection in certain cases (#12320)

* Fix emoji detection certain cases

Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes #12312

* ok spell bot

Co-authored-by: Lauris BH <lauris@nix.lv>

* Reduce emoji size (#12317)

* Reduce emoji size

Rendering should now pretty much match GitHub with 1.25em. I verified
that emojis don't increase the line height and removed unecessary size
overrides because now all emojis should appear similar in relation to
the font size.

* fix reaction hover

Co-authored-by: mrsdizzie <info@mrsdizzie.com>
Co-authored-by: Lauris BH <lauris@nix.lv>

modules/emoji/emoji.go

@@ -130,6 +130,8 @@ func ReplaceAliases(s string) string {
 // FindEmojiSubmatchIndex returns index pair of longest emoji in a string
 func FindEmojiSubmatchIndex(s string) []int {
 	loadMap()
+	found := make(map[int]int)
+	keys := make([]int, 0)
 
 	//see if there are any emoji in string before looking for position of specific ones
 	//no performance difference when there is a match but 10x faster when there are not
@@ -137,11 +139,26 @@ func FindEmojiSubmatchIndex(s string) []int {
 		return nil
 	}
 
+	// get index of first emoji occurrence while also checking for longest combination
 	for j := range GemojiData {
 		i := strings.Index(s, GemojiData[j].Emoji)
 		if i != -1 {
-			return []int{i, i + len(GemojiData[j].Emoji)}
+			if _, ok := found[i]; !ok {
+				if len(keys) == 0 || i < keys[0] {
+					found[i] = j
+					keys = []int{i}
+				}
+				if i == 0 {
+					break
+				}
+			}
 		}
 	}
+
+	if len(keys) > 0 {
+		index := keys[0]
+		return []int{index, index + len(GemojiData[found[index]].Emoji)}
+	}
+
 	return nil
 }

modules/markup/html_test.go

@@ -266,6 +266,10 @@ func TestRender_emoji(t *testing.T) {
 	test(
 		"Some text with 😄😄 2 emoji next to each other",
 		`<p>Some text with <span class="emoji" aria-label="grinning face with smiling eyes">😄</span><span class="emoji" aria-label="grinning face with smiling eyes">😄</span> 2 emoji next to each other</p>`)
+	test(
+		"😎🤪🔐🤑❓",
+		`<p><span class="emoji" aria-label="smiling face with sunglasses">😎</span><span class="emoji" aria-label="zany face">🤪</span><span class="emoji" aria-label="locked with key">🔐</span><span class="emoji" aria-label="money-mouth face">🤑</span><span class="emoji" aria-label="question mark">❓</span></p>`)
+
 	// should match nothing
 	test(
 		"2001:0db8:85a3:0000:0000:8a2e:0370:7334",

web_src/less/_base.less

@@ -1271,33 +1271,18 @@ i.icon.centerlock {
 
 .emoji,
 .reaction {
-    font-size: 1.5em;
+    font-size: 1.25em;
-    line-height: 1.2;
+    line-height: 1;
     font-style: normal !important;
     font-weight: normal !important;
-    vertical-align: middle;
+    vertical-align: -.075em;
 }
 
-#issue-title > .emoji {
-    font-size: 1em;
-}
-
-.commit-summary > .emoji {
-    font-size: 1em;
-}
-
-.label > .emoji {
-    font-size: 1em;
-}
-
-.dropdown .emoji {
-    font-size: 1em;
-}
 .emoji img,
 .reaction img {
     border-width: 0 !important;
     margin: 0 !important;
     width: 1em !important;
     height: 1em !important;
-    vertical-align: middle !important;
+    vertical-align: -.15em;
 }

web_src/less/_repository.less

@@ -2246,7 +2246,7 @@
         .select-reaction {
             display: flex;
             align-items: center;
-            padding: .5rem;
+            padding: 0 .5rem;
 
             &:not(.active) a {
                 display: none;