[feature] Parse content warning to HTML, serialize via client API as plaintext (#3876)

* [feature] Parse content warning as HTML, serialize via API to plaintext

* tidy up some cruft

* whoops

* oops

* i'm da joker baybee

* clemency muy lorde

* rename some of the text functions for clarity

* jiggle the opts

* fiddle de deee

* hopefully the last test fix i ever have to do in my beautiful life

3 files changed, 50 insertions, 47 deletions

diff --git a/web/source/css/status.css b/web/source/css/status.css
index 8ab0471fb..5938919f5 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -141,15 +141,10 @@ main {
 		}
 	}
 
-	.text {
-		margin: 0;
-		grid-row: span 1;
-		grid-column: 1 / span 3;
-
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-
+	.text > .content,
+	.text-spoiler > summary > .spoiler-content {
+		word-break: break-word;
+		line-height: 1.6rem;
 		width: 100%;
 
 		a {
@@ -157,45 +152,51 @@ main {
 			text-decoration: underline;
 		}
 
-		.content {
-			word-break: break-word;
-			line-height: 1.6rem;
-			width: 100%;
-
-			/*
-				Normalize header sizes to fit better
-				with the line-height we use for statuses.
-			*/
-			h1 {
-				margin: 0;
-				font-size: 1.8rem;
-				line-height: initial;
-			}
+		/*
+			Normalize header sizes to fit better
+			with the line-height we use for statuses.
+		*/
+		h1 {
+			margin: 0;
+			font-size: 1.8rem;
+			line-height: initial;
+		}
 
-			h2 {
-				margin: 0;
-				font-size: 1.6rem;
-				line-height: initial;
-			}
+		h2 {
+			margin: 0;
+			font-size: 1.6rem;
+			line-height: initial;
+		}
 
-			h3 {
-				margin: 0;
-				font-size: 1.4rem;
-				line-height: initial;
-			}
+		h3 {
+			margin: 0;
+			font-size: 1.4rem;
+			line-height: initial;
+		}
 
-			h4 {
-				margin: 0;
-				font-size: 1.2rem;
-				line-height: initial;
-			}
+		h4 {
+			margin: 0;
+			font-size: 1.2rem;
+			line-height: initial;
+		}
 
-			h5 {
-				margin: 0;
-				font-size: 1rem;
-				line-height: initial;
-			}
+		h5 {
+			margin: 0;
+			font-size: 1rem;
+			line-height: initial;
 		}
+	}
+
+	.text {
+		margin: 0;
+		grid-row: span 1;
+		grid-column: 1 / span 3;
+
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+
+		width: 100%;
 
 		.poll {
 			background-color: $gray2;
diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx
index d2116e60d..ec7af3ad3 100644
--- a/web/source/settings/components/status.tsx
+++ b/web/source/settings/components/status.tsx
@@ -126,15 +126,15 @@ function StatusBody({ status }: { status: StatusType }) {
 		<div className="status-body">
 			<details className="text-spoiler">
 				<summary>
-					<span
-						className="spoiler-text"
+					<div
+						className="spoiler-content"
 						lang={status.language}
 					>
 						{ status.spoiler_text
 							? status.spoiler_text + " "
 							: "[no content warning set] "
 						}
-					</span>
+					</div>
 					<span
 						className="button"
 						role="button"
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index ca956e8a7..85000fd72 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -38,7 +38,9 @@
     {{- if .SpoilerText }}
     <details class="text-spoiler">
         <summary>
-            <span class="spoiler-text p-summary" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
+            <div class="spoiler-content p-summary" lang="{{- .LanguageTag.TagStr -}}">
+                {{ noescape .SpoilerContent | emojify .Emojis }}
+            </div>
             <span class="button" role="button" tabindex="0">Toggle visibility</span>
         </summary>
         <div class="text">