speakブロックに引数を渡し、アバターと名前を表示

app/javascript/markdown-it-container-speak.js

@@ -3,23 +3,63 @@ import escapeHTML from './escapeHtml.js'
 
 export default (md) => {
   md.use(MarkdownItContainer, 'speak', {
-    render: (tokens, idx) => {
-      const speakerName = escapeHTML(tokens[idx].info)
-        .replace('speak @', '')
+    marker: ':',
+    validate: function (params) {
+      return params
         .trim()
+        .match(/^speak(?:\s(?![(])|$|\s*\([^,]+,\s*[^)]+\)\s*$)/)
+    },
+    render: (tokens, idx) => {
+      const info = tokens[idx].info.trim()
+
+      if (tokens[idx].nesting !== 1) {
+        return '</div></div>\n'
+      }
+
+      const parenMatch = info.match(/^speak\s*\(\s*([^,]+)\s*,\s*([^)]+)\s*\)$/)
+      if (parenMatch) {
+        const speakerName = escapeHTML(parenMatch[1].trim())
+        const avatarUrl = escapeHTML(parenMatch[2].trim())
+
+        return `<div class="speak">
+                  <div class="speak__speaker">
+                    <span class="a-user-emoji-link">
+                      <img src="${avatarUrl}" alt="${speakerName}" title="@${speakerName}" class="a-user-emoji speak__speaker-avatar">
+                      <span class="speak__speaker-name">${speakerName}</span>
+                    </span>
+                  </div>
+                  <div class="speak__body">`
+      }
+
+      const speakerName = escapeHTML(
+        info
+          .replace(/^speak[\s\n]*@?/, '')
+          .replace(/^\*\*/, '')
+          .replace(/\*\*$/, '')
+          .trim()
+      )
 
-      if (tokens[idx].nesting === 1) {
+      if (info.includes('@')) {
         return `<div class="speak">
                   <div class="speak__speaker">
-                    <a href="/users/${speakerName}" class="a-user-emoji-link">
+                    <a href="/users/${encodeURIComponent(
+                      speakerName
+                    )}" class="a-user-emoji-link">
                       <img title="@${speakerName}" class="js-user-icon a-user-emoji" data-user="${speakerName}">
                       <span class="speak__speaker-name">${speakerName}</span>
                     </a>
                   </div>
                   <div class="speak__body">`
-      } else {
-        return '</div></div>\n'
       }
+
+      return `<div class="speak">
+                <div class="speak__speaker">
+                  <span class="a-user-emoji-link">
+                    <img src="/images/users/avatars/default.png" alt="${speakerName}" title="${speakerName}" class="a-user-emoji speak__speaker-avatar">
+                    <span class="speak__speaker-name">${speakerName}</span>
+                  </span>
+                </div>
+                <div class="speak__body">`
     }
   })
 }

app/javascript/stylesheets/config/mixins/_long-text-style.sass

@@ -69,7 +69,8 @@
       font-weight: 700
   .speak__speaker
     margin-bottom: .75em
-    >a
+    & > a,
+    & > span
       display: flex
       align-items: center
       gap: .5rem
@@ -78,6 +79,8 @@
     >a:hover
       .speak__speaker-name
         text-decoration: underline
+    img
+      margin-bottom: 0
   .speak__speaker-name
     flex: 1
     +text-block(1em 1.6, 700)

db/schema.rb

@@ -932,6 +932,7 @@
     t.integer "os"
     t.boolean "trainee", default: false, null: false
     t.text "retire_reason"
+    t.boolean "job_seeking", default: false, null: false
     t.string "customer_id"
     t.string "subscription_id"
     t.boolean "mail_notification", default: true, null: false

test/system/markdown_test.rb

@@ -157,4 +157,39 @@ def undo(selector)
     assert_selector '.twitter-tweet'
     assert_no_selector 'a.before-replacement-link-card[href="https://x.com/fjordbootcamp/status/1866097842483503117"]', visible: true
   end
+
+  test 'speak block with arguments test' do
+    visit_with_auth new_page_path, 'machida'
+    fill_in 'page[title]', with: 'インタビュー'
+    fill_in 'page[body]', with: ":::speak(machida, https://avatars.githubusercontent.com/u/168265?v=4)\n## (名前, 画像URL)ver\n:::"
+
+    click_button 'Docを公開'
+
+    assert_css '.a-long-text.is-md.js-markdown-view'
+    assert_css '.speak'
+    assert_no_css "a[href='/users/machida']"
+
+    img = find('.speak__speaker img')
+    assert_includes img['src'], 'https://avatars.githubusercontent.com/u/168265?v=4'
+    assert_includes img['title'], 'machida'
+
+    name_span = find('.speak__speaker-name')
+    assert_includes name_span.text, 'machida'
+  end
+
+  test 'speak block without @ test' do
+    visit_with_auth new_page_path, 'machida'
+    fill_in 'page[title]', with: 'インタビュー'
+    fill_in 'page[body]', with: ":::speak username\n## 名前のみver\n:::"
+
+    click_button 'Docを公開'
+
+    assert_css '.a-long-text.is-md.js-markdown-view'
+    assert_css '.speak'
+    assert_no_css "a[href='/users/username']"
+
+    img = find('.speak__speaker img')
+    assert_includes img['src'], '/images/users/avatars/default.png'
+    assert_includes img['title'], 'username'
+  end
 end