ユーザーメモ欄、提出物ページのプラクティスメモ欄でユーザーアイコンが表示されるようにした

[mousu-a]

Issue

• ユーザーメモ欄、提出物ページのプラクティスメモ欄で :@username: を入力するとアイコンが真っ白になる #7335

概要

変更確認方法

1. bug/fix-user-icon-in-user-notes-fieldをローカルに取り込む。
   1. git fetch origin bug/fix-user-icon-in-user-notes-field
   2. git checkout bug/fix-user-icon-in-user-notes-field
2. foreman start -f Procfile.devでローカルサーバーを立ち上げる。
3. ユーザー名komagata、パスワードtesttestでログインする。（メンターであれば誰でもいいです）
4. ユーザープロフィールにアクセスする。
5. メンター向けユーザーメモに:@komagata:を貼り付けて保存する。（←の文字列を貼り付けるとなぜかアイコンが増殖するかもしれませんがこちらのissueと同じ問題と思われます）
6. メンター向けユーザーメモのテキストエリアにユーザーアイコンが表示されることを確認する。
7. 画面を再読み込みする。
8. 同じようにユーザーアイコンが表示されることを確認する。
9. 編集時のプレビューでもユーザーアイコンが表示されることを確認する。
10. ユーザーの提出物詳細にアクセスする。
11. ページ下部に4つ並んでいるタブから"プラクティスメモ"を選び、ユーザープロフィールと同様にユーザーアイコンが表示されることを確認する。

Screenshot

変更前

ユーザープロフィール

ユーザーの提出物詳細

変更後

ユーザープロフィール

ユーザーの提出物詳細

[mousu-a]

@Ryooo-k
お疲れ様です！
よろしければこちらのレビューをお願いできますでしょうか🙏
全く急ぎではないので、ご検討いただけますと幸いです。

都合が合わなければ遠慮なく仰ってください🙇‍♂️

[Ryooo-k]

@mousu-a
お疲れ様です！レビューさせていただきます🫡
１週間程度お時間ください。

[mousu-a]

@Ryooo-k
ありがとうございます🙏一週間了解いたしました！
レビューでコードに関する質問などあればお気軽にお願いいたします😊

[Ryooo-k]

@mousu-a
確認いたしました！コードは問題なさそうです👍
一点だけですが、キャンセル→編集→プレビューの場合、アイコンが表示されてないようなので、こちらも対応されていた方が良いかと思いました！

2025-01-29.17.29.13.mov

ご確認お願いしますー🙏

[mousu-a]

@Ryooo-k

一点だけですが、キャンセル→編集→プレビューの場合、アイコンが表示されてないようなので、こちらも対応されていた方が良いかと思いました！

すみません、盲点でした👀
動画とてもわかりやすく助かりました。ありがとうございます！

修正しましたので再度レビューをお願いいたします🙏

[Ryooo-k]

@mousu-a
修正ありがとうございます！またバグ見つけましたのでご報告です💦
一度に見つけられずすみません💦

バグ１

提出物のプラクティスメモでアイコンを保存後、画面更新をするとなぜか表示されません。

2025-02-04.9.13.23.mov

バグ２

画面更新を何度も押すと、アイコンが表示・非表示で切り替わる。（切り替わるタイミングはランダム？）

2025-02-04.9.25.45.mov

プロフィールのメモはこのようなバグにはなっていないのですが、原因わかりますでしょうか？

[mousu-a]

@Ryooo-k

修正ありがとうございます！またバグ見つけましたのでご報告です💦
一度に見つけられずすみません💦

お気になさらないでくださいー！
発見ありがとうございます！！
すみません、調査します🫡

[mousu-a]

@Ryooo-k
すみません、返信が遅れてしまいました🙇‍♂️

バグの発生理由がわかりました！
ちょっと長いですが説明させてください🙏

なぜこのバグが発生しているのか

そもそもユーザーアイコンの機能は、markdown-it-user-icon.js(以下user-icon)が実行された後にuser-icon-renderer.js(以下user-icon-renderer)が実行されることで実装されています。

ただ、時々user-iconの前にuser-icon-rendererが実行されてしまうことがあり、その場合にユーザーアイコンが表示されずこのバグが発生します。（実行すべき順番が逆になってしまう）

解決策

必ずuser-iconが実行された後にuser-icon-rendererが実行されるようにする

問題点

ただこの方法には問題点があります。
user-iconはmarkdown-itというnpmのプラグインとして読み込むことで機能を実現していますが、markdown-itはasync（非同期処理）に対応しておらず、上記解決策を取ることが出来ないようです。
自分も解決を試みてみましたが、確実にuser-iconが実行された後にuser-icon-rendererが実行されるようにすることは出来ませんでした。

参考：
I need async rule, how to do it?

補足情報

user-iconとuser-icon-rendererは同じPR内で実装されたものになりますので、当時の開発者も同じように考えこの実装（時々順番が逆になってしまう状態）になっているのだと思われます。

妥協案

妥協案として、user-icon-rendererの実行をsetTimeOutで遅らせることでこの問題が解決できたらなと考えています。

---

すみません、手元では実装は終了しているんですがただいまテストが通らないため、落ち着いたら再レビューしていただければと思います！取り急ぎご報告でした🙇‍♂️