Status: strip compatibility features from markup when importing

app/soapbox/actions/importer/normalizer.js

@@ -1,5 +1,7 @@
 import escapeTextContentForBrowser from 'escape-html';
 
+import { stripCompatibilityFeatures } from 'soapbox/utils/html';
+
 import emojify from '../../features/emoji/emoji';
 import { unescapeHTML } from '../../utils/html';
 
@@ -79,7 +81,7 @@ export function normalizeStatus(status, normalOldStatus, expandSpoilers) {
     const emojiMap      = makeEmojiMap(normalStatus);
 
     normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent;
-    normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
+    normalStatus.contentHtml  = stripCompatibilityFeatures(emojify(normalStatus.content, emojiMap));
     normalStatus.spoilerHtml  = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
     normalStatus.hidden       = expandSpoilers ? false : spoilerText.length > 0 || normalStatus.sensitive;
   }

app/soapbox/components/status_content.js

@@ -75,17 +75,6 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  stripCompatibilityFeatures() {
-    const node = this.node;
-    if (!node) return;
-
-    const inlineQuote = node.querySelector('.quote-inline');
-    const inlineRecipients = node.querySelector('.recipients-inline');
-
-    if (inlineQuote) inlineQuote.remove();
-    if (inlineRecipients) inlineRecipients.remove();
-  }
-
   setCollapse() {
     const node = this.node;
 
@@ -117,7 +106,6 @@ class StatusContent extends React.PureComponent {
   refresh = () => {
     this.setCollapse();
     this._updateStatusLinks();
-    this.stripCompatibilityFeatures();
     this.setOnlyEmoji();
   }
 

app/soapbox/utils/html.js

@@ -4,3 +4,23 @@ export const unescapeHTML = (html) => {
   wrapper.innerHTML = html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '');
   return wrapper.textContent;
 };
+
+export const stripCompatibilityFeatures = html => {
+  const node = document.createElement('div');
+  node.innerHTML = html;
+
+  const selectors = [
+    '.quote-inline',
+    '.recipients-inline',
+  ];
+
+  selectors.forEach(selector => {
+    const elem = node.querySelector(selector);
+
+    if (elem) {
+      elem.remove();
+    }
+  });
+
+  return node.innerHTML;
+};

app/styles/components/status.scss

@@ -821,12 +821,3 @@ a.status-card.compact:hover {
     margin-top: 5px !important;
   }
 }
-
-/* Fedibird quote post compatibility */
-.status__content,
-.quoted-status__content {
-  .quote-inline,
-  .recipients-inline {
-    display: none;
-  }
-}