fix: handle p.quote-inline class in content parsing (#3504)

Author: shuuji3

app/components/status/StatusBody.vue

@@ -55,4 +55,8 @@ const vnode = computed(() => {
 .status-body.with-action p {
   cursor: pointer;
 }
+
+.status-body .quote-inline {
+  display: none;
+}
 </style>

app/composables/content-parse.ts

@@ -23,7 +23,9 @@ const sanitizerBasicClasses = filterClasses(/^h-\S*|p-\S*|u-\S*|dt-\S*|e-\S*|men
 const sanitizer = sanitize({
   // Allow basic elements as seen in https://github.com/mastodon/mastodon/blob/17f79082b098e05b68d6f0d38fabb3ac121879a9/lib/sanitize_ext/sanitize_config.rb
   br: {},
-  p: {},
+  p: {
+    class: filterClasses(/^quote-inline$/),
+  },
   a: {
     href: filterHref(),
     class: sanitizerBasicClasses,

tests/nuxt/__snapshots__/html-parse.test.ts.snap

@@ -142,3 +142,26 @@ exports[`html-parse > link + mention > html 1`] = `
 `;
 
 exports[`html-parse > link + mention > text 1`] = `"Happy 🤗 we’re now using @vitest (migrated from chai+mocha) https://github.com/ayoayco/astro-reactive-library/pull/203"`;
+
+exports[`html-parse > quote-inline > html 1`] = `
+"<p class="quote-inline" dir="auto">
+  RE:
+  <a
+    href="https://tapbots.social/@example/123"
+    rel="nofollow noopener noreferrer"
+    target="_blank"
+    ><span class="invisible">https://</span
+    ><span class="ellipsis">tapbots.social/@example/123</span
+    ><span class="invisible">123</span></a
+  >
+</p>
+<p></p>
+<p>Quoting post!</p>
+"
+`;
+
+exports[`html-parse > quote-inline > text 1`] = `
+"RE: https://tapbots.social/@example/123123
+
+Quoting post!"
+`;

tests/nuxt/html-parse.test.ts

@@ -62,6 +62,12 @@ describe('html-parse', () => {
     expect(formatted).toMatchSnapshot('html')
     expect(serializedText).toMatchSnapshot('text')
   })
+
+  it('quote-inline', async () => {
+    const { formatted, serializedText } = await render('<p class="quote-inline">RE: <a href="https://tapbots.social/@example/123" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">tapbots.social/@example/123</span><span class="invisible">123</span></a></p><p>Quoting post!</p>')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
 })
 
 async function render(input: string, options?: ContentParseOptions) {