plspace/src/components/common/MfmContent.svelte

<script lang="ts">
  /**
   * Status HTML renderer with Pleroma-FE-compatible MFM effects.
   *
   * This consumes the server-rendered FEP-c16b spans found in `status.content`;
   * it intentionally does not parse raw `$[...]` source syntax.
   */
  import type { CustomEmoji, StatusMention, StatusTag } from '$lib/api/types'
  import { renderMfmHtml } from '$lib/util/mfm'

  interface Props {
    html: string | null | undefined
    emojis?: CustomEmoji[]
    mentions?: StatusMention[]
    tags?: StatusTag[]
    inline?: boolean
    class?: string
    lang?: string | null
    /** Pleroma-FE defaults to pausing animation until hover. */
    pause?: boolean
    scale?: boolean
  }

  let {
    html,
    emojis,
    mentions,
    tags,
    inline = false,
    class: extraClass = '',
    lang,
    pause = true,
    scale = false,
  }: Props = $props()

  const rendered = $derived(
    renderMfmHtml(html, { emojis, mentions, tags, inline, pause, scale }),
  )
</script>

{#if rendered}
  <div
    class="rich-text {extraClass}"
    class:rich-text--inline={inline}
    lang={lang ?? undefined}
    dir="auto"
  >
    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in renderMfmHtml -->
    {@html rendered}
  </div>
{/if}