3 files changed, 90 insertions, 24 deletions

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 7881e365..99d7daca 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -8,6 +8,27 @@ import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
 
 import './rich_content.scss'
 
+const MAYBE_LINE_BREAKING_ELEMENTS = [
+  'blockquote',
+  'br',
+  'hr',
+  'ul',
+  'ol',
+  'li',
+  'p',
+  'table',
+  'tbody',
+  'td',
+  'th',
+  'thead',
+  'tr',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5'
+]
+
 /**
  * RichContent, The Über-powered component for rendering Post HTML.
  *
@@ -58,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -149,7 +176,9 @@ export default {
       // Handle tag nodes
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
-        const Tag = getTagName(opener)
+        let Tag = getTagName(opener)
+        if (Tag.toLowerCase() === 'script') Tag = 'js-exploit'
+        if (Tag.toLowerCase() === 'style') Tag = 'css-exploit'
         const fullAttrs = getAttrs(opener, () => true)
         const attrs = getAttrs(opener)
         const previouslyMentions = currentMentions !== null
@@ -164,25 +193,22 @@ export default {
               !(children && typeof children[0] === 'string' && children[0].match(/^\s/))
                 ? lastSpacing
                 : ''
-        switch (Tag) {
-          case 'br':
+        if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) {
+          // all the elements that can cause a line change
+          currentMentions = null
+        } else if (Tag === 'img') { // replace images with StillImage
+          return ['', [mentionsLinePadding, renderImage(opener)], '']
+        } else if (Tag === 'a' && this.handleLinks) { // replace mentions with MentionLink
+          if (fullAttrs.class && fullAttrs.class.includes('mention')) {
+            // Handling mentions here
+            return renderMention(attrs, children)
+          } else {
             currentMentions = null
-            break
-          case 'img': // replace images with StillImage
-            return ['', [mentionsLinePadding, renderImage(opener)], '']
-          case 'a': // replace mentions with MentionLink
-            if (!this.handleLinks) break
-            if (fullAttrs.class && fullAttrs.class.includes('mention')) {
-              // Handling mentions here
-              return renderMention(attrs, children)
-            } else {
-              currentMentions = null
-              break
-            }
-          case 'span':
-            if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
-              return ['', children.map(processItem), '']
-            }
+          }
+        } else if (Tag === 'span') {
+          if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
+            return ['', children.map(processItem), '']
+          }
         }
 
         if (children !== undefined) {
@@ -257,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e5d353ac..118b6acf 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,10 +1,19 @@
-@import "../../variables";
-
 .RichContent {
+  font-family: var(--font);
+
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
-    border-left: 0.2em solid var(--faint, $fallback--faint);
+    border-left: 0.2em solid var(--textFaint);
     padding-left: 1em;
   }
 
@@ -17,7 +26,7 @@
   kbd,
   var,
   pre {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 
   p {
@@ -65,4 +74,17 @@
     vertical-align: middle;
     object-fit: contain;
   }
+
+  .greentext {
+    color: var(--funtextGreentext);
+  }
+
+  .cyantext {
+    color: var(--funtextCyantext);
+  }
+}
+
+a .RichContent {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--link) !important;
 }
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
new file mode 100644
index 00000000..c8314000
--- /dev/null
+++ b/src/components/rich_content/rich_content.style.js
@@ -0,0 +1,18 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}