Use link expansion in threadPosts, use generic class for styling the expanded links so that it applies not just to a single component

frontend/src/assets/js/linkExpander.js

@@ -103,7 +103,7 @@ export default {
 							div.appendChild(h2)
 							div.appendChild(textNode)
 
-							div.classList.add('input_editor_preview__expandable');
+							div.classList.add('expanded_link');
 							link.parentNode.replaceChild(div, link);
 
 							completedAPICall();

frontend/src/assets/scss/elementStyles.scss

@@ -241,6 +241,24 @@ b, strong {
 	}
 }
 
+.expanded_link {
+	border: thick solid $color__gray--primary;
+	padding: 0.5rem;
+
+	h2 {
+		margin: 0;
+		margin-bottom: 0.5rem;
+		font-size: 1.25rem;
+	}
+
+	span {
+		margin-left: 0.25rem;
+		font-size: 1rem;
+		font-weight: 400;
+		color: $color__darkgray--primary;
+	}
+}
+
 //Vue transition class
 .fade-enter-active, .fade-leave-active {
 	transition: opacity 0.2s;

frontend/src/components/InputEditorPreview.vue

@@ -64,24 +64,6 @@
 	@import '../assets/scss/variables.scss';
 
 	.input_editor_preview {
-		@at-root #{&}__expandable {
-			border: thick solid $color__gray--primary;
-			padding: 0.5rem;
-
-			h2 {
-				margin: 0;
-				margin-bottom: 0.5rem;
-				font-size: 1.25rem;
-			}
-
-			span {
-				margin-left: 0.25rem;
-				font-size: 1rem;
-				font-weight: 400;
-				color: $color__darkgray--primary;
-			}
-		}
-
 		@at-root #{&}__markdownHTML {
 			height: 8.2rem;
 			overflow: auto;

frontend/src/components/ThreadPost.vue

@@ -45,7 +45,7 @@
 			<div class='post__date'>{{post.createdAt | formatDate('time|date', ', ')}}</div>
 		</div>
 		<div class='post__date post__date--mobile'>{{post.createdAt | formatDate('time|date', ', ')}}</div>
-		<div class='post__content' v-html='post.content'></div>
+		<div class='post__content' v-html='postContentHTML'></div>
 		<div class='post__footer'>
 			<div
 				class='post__footer_group'
@@ -131,7 +131,9 @@
 				showShareModal: false,
 				showReportPostModal: false,
 				postURL: `${location.origin}/p/${post.id}`,
-				selected: false
+				selected: false,
+
+				postContentHTML: post.content
 			}
 		},
 		computed: {
@@ -180,6 +182,9 @@
 
 				this.selected = false
 			}
+		},
+		mounted () {
+			this.$linkExpander(this.post.content, v => this.postContentHTML = v);
 		}
 	}
 </script>