From 14b96bf37efeeb5b5f1420b248895d4a56f715b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Sat, 16 Aug 2025 05:28:53 +0300
Subject: [PATCH] add spoiler tag to babycode

---
 app/lib/babycode.py               |  8 ++++++++
 app/templates/babycode.html       |  8 ++++++++
 data/static/js/babycode-editor.js |  3 +++
 data/static/js/ui.js              | 23 ++++++++++++++++++-----
 data/static/style.css             |  6 ++++++
 sass/style.scss                   |  6 ++++++
 6 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/app/lib/babycode.py b/app/lib/babycode.py
index abfc23b..8b3c7e2 100644
--- a/app/lib/babycode.py
+++ b/app/lib/babycode.py
@@ -63,6 +63,12 @@ def tag_color(children, attr):
     # return just the way it was if we can't parse it
     return f"[color={attr}]{children}[/color]"
 
+def tag_spoiler(children, attr):
+    spoiler_name = attr if attr else "Spoiler"
+    content = f"<div class='accordion-content post-accordion-content hidden'>{children}</div>"
+    container = f"""<div class='accordion hidden'><div class='accordion-header'><button type='button' class='accordion-toggle'>+</button><span>{spoiler_name}</span></div>{content}</div>"""
+    return container
+
 TAGS = {
     "b": lambda children, attr: f"<strong>{children}</strong>",
     "i": lambda children, attr: f"<em>{children}</em>",
@@ -82,6 +88,8 @@ TAGS = {
 
     "center": lambda children, attr: f"<div style='text-align: center;'>{children}</div>",
     "right": lambda children, attr: f"<div style='text-align: right;'>{children}</div>",
+
+    "spoiler": tag_spoiler,
 }
 
 def make_emoji(name, code):
diff --git a/app/templates/babycode.html b/app/templates/babycode.html
index d161d61..3b67dc6 100644
--- a/app/templates/babycode.html
+++ b/app/templates/babycode.html
@@ -151,6 +151,14 @@
         Will produce the following list:
         {{ list | babycode | safe }}
       </section>
+      <section class="babycode-guide-section">
+      <h2 id="spoilers">Spoilers</h2>
+      {% set spoiler = "[spoiler]My hidden content[/spoiler]" %}
+      <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
+      {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
+      Will produce:
+      {{ spoiler | babycode | safe }}
+      </section>
     {% endset %}
     {{ sections | safe }}
   </div>
diff --git a/data/static/js/babycode-editor.js b/data/static/js/babycode-editor.js
index 6b8eccb..41e9acd 100644
--- a/data/static/js/babycode-editor.js
+++ b/data/static/js/babycode-editor.js
@@ -173,5 +173,8 @@
       const json_resp = await req.json();
       previewContainer.innerHTML = json_resp.html;
       previewErrorsContainer.textContent = "";
+
+      const accordionRefreshEvt = new CustomEvent("refresh_accordions");
+      document.body.dispatchEvent(accordionRefreshEvt);
   });
 }
diff --git a/data/static/js/ui.js b/data/static/js/ui.js
index 03b2351..0c4d7fd 100644
--- a/data/static/js/ui.js
+++ b/data/static/js/ui.js
@@ -110,21 +110,34 @@ document.addEventListener("DOMContentLoaded", () => {
   });
   
   // accordions
-  const accordions = document.querySelectorAll(".accordion");
-  accordions.forEach(accordion => {
+  const handledAccordions = new Set();
+  function attachAccordionHandlers(accordion){
+    if(handledAccordions.has(accordion)) {
+      return;
+    }
+
+    handledAccordions.add(accordion)
     const header = accordion.querySelector(".accordion-header");
     const toggleButton = header.querySelector(".accordion-toggle");
     const content = accordion.querySelector(".accordion-content");
-    
+
     const toggle = (e) => {
       e.stopPropagation();
       accordion.classList.toggle("hidden");
       content.classList.toggle("hidden");
       toggleButton.textContent = content.classList.contains("hidden") ? "+" : "-"
     }
-    
+
     toggleButton.addEventListener("click", toggle);
-  });
+  }
+
+  function refreshAccordions(){
+    const accordions = document.querySelectorAll(".accordion");
+    accordions.forEach(attachAccordionHandlers);
+  }
+  refreshAccordions()
+
+  document.body.addEventListener('refresh_accordions', refreshAccordions)
   
   //lightboxes
   lightboxObj = constructLightbox();
diff --git a/data/static/style.css b/data/static/style.css
index cc2ffe7..92f5d53 100644
--- a/data/static/style.css
+++ b/data/static/style.css
@@ -786,6 +786,12 @@ ul, ol {
   display: none;
 }
 
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+}
+
 .inbox-container {
   padding: 10px;
 }
diff --git a/sass/style.scss b/sass/style.scss
index f198c9e..377ebfe 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -781,6 +781,12 @@ ul, ol {
   display: none;
 }
 
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: $main_bg;
+}
+
 .inbox-container {
   padding: 10px;
 }