fix: Spoilers on Pages with markdown, adjust styles

app/Helpers/BBCodeConverter.php

@@ -316,9 +316,22 @@ class BBCodeConverter
      */
     protected function replaceSpoilers()
     {
-        $this->text = \preg_replace_callback('#\[spoiler\]([\W\D\w\s]*?)\[/spoiler\]#iu',
+        $this->text = \preg_replace_callback('#\[spoiler\](.*?)\[\/spoiler\]#ius',
 
-            fn ($matches) => '<details><summary>Spoiler!</summary><pre><code>'.\trim($matches[1], ' ').'</code></pre></details>',
+            fn ($matches) => '<p><details class="label label-primary"><summary>Spoiler</summary><pre><code>'.\trim($matches[1]).'</code></pre></details></p>',
+
+            $this->text
+        );
+    }
+
+    /**
+     * @brief Replace BBCode named spoiler.
+     */
+    protected function replaceNamedSpoilers()
+    {
+        $this->text = \preg_replace_callback('#\[spoiler\=(.*?)\](.*?)\[\/spoiler\]#ius',
+
+            fn ($matches) => '<p><details class="label label-primary"><summary>'.\trim($matches[1]).'</summary><pre><code>'.\trim($matches[2]).'</code></pre></details></p>',
 
             $this->text
         );
@@ -408,6 +421,7 @@ class BBCodeConverter
         $this->replaceQuotes();
         $this->replaceSnippets();
         $this->replaceSpoilers();
+        $this->replaceNamedSpoilers();
         $this->replaceColor();
         $this->replaceVideo();
         $this->replaceYoutube();

resources/sass/main/_custom.scss

@@ -9411,11 +9411,16 @@ section.recommendations div.scroller div.item span.glyphicons {
     font-size: 1.2em;
 }
 
-.page-content p {
+.page-content p,
+.page-content details {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
 
+.page-content details {
+    text-align: left;
+}
+
 .page-content>blockquote {
     color: #555;
     border-color: #555;
@@ -9424,7 +9429,7 @@ section.recommendations div.scroller div.item span.glyphicons {
 }
 
 .page-content code,
-pre {
+.page-content pre {
     color: #555;
     background-color: #f5f5f5;
     border: 1px solid #ccc;
@@ -9435,7 +9440,7 @@ pre {
     word-break: normal;
 }
 
-.page-content>pre>code {
+.page-content pre>code {
     border: none;
 }