pinafore/routes/_components/profile/AccountDisplayName.html

<span class="account-display-name">{@html massagedAccountName }</span>
<style>
  .account-display-name {
    pointer-events: none; /* allows focus to work correctly, focus on the parent only */
  }
</style>
<script>
  import { emojifyText, removeEmoji } from '../../_utils/emojifyText'
  import { store } from '../../_store/store'
  import escapeHtml from 'escape-html'
  import emojiRegex from 'emoji-regex'

  let theEmojiRegex

  export default {
    store: () => store,
    computed: {
      emojis: ({ account }) => (account.emojis || []),
      accountName: ({ account }) => (account.display_name || account.username),
      massagedAccountName: ({ accountName, emojis, $autoplayGifs, $omitEmojiInDisplayNames }) => {
        accountName = escapeHtml(accountName)

        if ($omitEmojiInDisplayNames) { // display name emoji are annoying to some screenreader users
          theEmojiRegex = theEmojiRegex || emojiRegex() // only init when needed
          let emojiFreeAccountName = removeEmoji(accountName.replace(theEmojiRegex, ''), emojis).trim()
          if (emojiFreeAccountName) {
            return emojiFreeAccountName // only remove emoji if the resulting username is non-empty
          }
        }

        return emojifyText(accountName, emojis, $autoplayGifs)
      }
    }
  }
</script>