add mfm support

src/components/blog/BlogEntry.svelte

@@ -17,7 +17,7 @@
   import { isoDate, longDate, stampDate } from '$lib/util/time'
   import { extractYouTubeVideoIds } from '$lib/util/youtube'
   import Avatar from '../common/Avatar.svelte'
-  import RichText from '../common/RichText.svelte'
+  import MfmContent from '../common/MfmContent.svelte'
   import Attachments from './Attachments.svelte'
   import PollView from './PollView.svelte'
   import PreviewCardView from './PreviewCardView.svelte'
@@ -181,7 +181,7 @@
     {#if entry.spoiler_text}
       <details class="content-warning">
         <summary class="content-warning-summary">{entry.spoiler_text}</summary>
-        <RichText
+        <MfmContent
           html={entry.content}
           emojis={entry.emojis}
           mentions={entry.mentions}
@@ -194,7 +194,7 @@
         <YouTubeEmbeds videoIds={youtubeVideoIds} sensitive={entry.sensitive} />
       </details>
     {:else}
-      <RichText
+      <MfmContent
         html={entry.content}
         emojis={entry.emojis}
         mentions={entry.mentions}

src/components/blog/BlogEntry.test.ts

@@ -48,3 +48,21 @@ describe('BlogEntry YouTube embeds', () => {
     expect(view.getByTitle('YouTube video')).toBeInTheDocument()
   })
 })
+
+describe('BlogEntry MFM rendering', () => {
+  it('renders the Pleroma API MFM HTML inside a backend-free blog entry', () => {
+    const view = renderEntry({
+      content:
+        '<p>It <span class="mfm-spin" data-mfm-speed="2s" data-mfm-left>works</span></p>',
+    })
+
+    const effect = view.getByText('works')
+    expect(effect).toHaveClass('mfm', '-pause')
+    expect(effect).toHaveAttribute('data-mfm-operator', 'spin')
+    expect(effect).toHaveStyle({
+      animationName: 'mfm-spin',
+      animationDuration: '2s',
+      animationDirection: 'reverse',
+    })
+  })
+})