Merge pull request #7327 from fjordllc/feature/display-user-name-when…

…-hovering-user-icon ユーザーアイコンにhoverしたときにユーザー名を表示する
fjordllc · Feb 20, 2024 · 133e15e · 133e15e
2 parents 4a622cd + 37cc341
commit 133e15e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/app/javascript/markdown-it-container-speak.js b/app/javascript/markdown-it-container-speak.js
@@ -11,7 +11,7 @@ export default (md) => {
         return `<div class="speak">
                   <div class="speak__speaker">
                     <a href="/users/${speakerName}" class="a-user-emoji-link">
-                      <img class="js-user-icon a-user-emoji" data-user="${speakerName}">
+                      <img title="@${speakerName}" class="js-user-icon a-user-emoji" data-user="${speakerName}">
                       <spanv class="speak__speaker-name">${speakerName}</span>
                     </a>
                   </div>

diff --git a/app/javascript/markdown-it-user-icon.js b/app/javascript/markdown-it-user-icon.js
@@ -4,6 +4,6 @@ export default MarkdownItRegexp(
   /:@(?!mentor:)([a-zA-Z0-9_-]+):/,
 
   (match) => {
-    return `<a href="/users/${match[1]}" class="a-user-emoji-link"><img class="js-user-icon a-user-emoji" data-user="${match[1]}" width="40" height="40"></a>`
+    return `<a href="/users/${match[1]}" class="a-user-emoji-link"><img title="@${match[1]}" class="js-user-icon a-user-emoji" data-user="${match[1]}" width="40" height="40"></a>`
   }
 )
diff --git a/test/system/markdown_test.rb b/test/system/markdown_test.rb
@@ -13,7 +13,9 @@ class MarkdownTest < ApplicationSystemTestCase
     assert_css '.a-long-text.is-md.js-markdown-view'
     assert_css '.speak'
     assert_css "a[href='/users/mentormentaro']"
-    assert_includes find('.js-user-icon.a-user-emoji')['data-user'], 'mentormentaro'
+    emoji = find('.js-user-icon.a-user-emoji')
+    assert_includes emoji['title'], '@mentormentaro'
+    assert_includes emoji['data-user'], 'mentormentaro'
   end
 
   test 'user profile image markdown test' do
@@ -25,7 +27,9 @@ class MarkdownTest < ApplicationSystemTestCase
 
     assert_css '.a-long-text.is-md.js-markdown-view'
     assert_css "a[href='/users/mentormentaro']"
-    assert_includes find('.js-user-icon.a-user-emoji')['data-user'], 'mentormentaro'
+    emoji = find('.js-user-icon.a-user-emoji')
+    assert_includes emoji['title'], '@mentormentaro'
+    assert_includes emoji['data-user'], 'mentormentaro'
   end
 
   def cmd_ctrl