boxes/messages: Add support for spoiler header markup in MessageBox.

This commit:
 * adds styles for spoiler header in themes
 * adds markup entry in `soup2markup` for spoilers.

Tests added.

Co-authored-by: Preet Mishra <[email protected]>
Co-authored-by: Ezio-Sarthak <[email protected]>

Author: 3 people

tests/ui_tools/test_messages.py

@@ -669,6 +669,52 @@ def test_private_message_to_self(self, mocker):
                 [("msg_emoji", ":github:")],
                 id="custom_emoji",
             ),
+            case(
+                '<div class="spoiler-block"><div class="spoiler-header"></div>'
+                '<div aria-hidden="true" class="spoiler-content">'
+                "<p>Test</p></div></div>",
+                [
+                    "┌─",
+                    "────────",
+                    "─┬─",
+                    "───────",
+                    "─┐\n",
+                    "│ ",
+                    ("msg_spoiler", "Spoiler:"),
+                    " │ ",
+                    "Spoiler",
+                    " │\n",
+                    "└─",
+                    "────────",
+                    "─┴─",
+                    "───────",
+                    "─┘",
+                ],
+                id="spoiler_no_header",
+            ),
+            case(
+                '<div class="spoiler-block"><div class="spoiler-header">'
+                '<p>Header</p></div><div aria-hidden="true" class="spoiler-content">'
+                "<p>Test</p></div></div>",
+                [
+                    "┌─",
+                    "────────",
+                    "─┬─",
+                    "──────",
+                    "─┐\n",
+                    "│ ",
+                    ("msg_spoiler", "Spoiler:"),
+                    " │ ",
+                    "Header",
+                    " │\n",
+                    "└─",
+                    "────────",
+                    "─┴─",
+                    "──────",
+                    "─┘",
+                ],
+                id="spoiler_with_header",
+            ),
         ],
     )
     def test_soup2markup(self, content, expected_markup, mocker):

zulipterminal/config/themes.py

@@ -50,6 +50,7 @@
     'msg_quote'       : 'underline',
     'msg_bold'        : 'bold',
     'msg_time'        : 'bold',
+    'msg_spoiler'     : 'bold',
     'footer'          : 'standout',
     'footer_contrast' : 'standout',
     'starred'         : 'bold',

zulipterminal/themes/gruvbox_dark.py

@@ -46,6 +46,7 @@
     'msg_quote'        : (Color.NEUTRAL_YELLOW,        Color.DARK0_HARD),
     'msg_bold'         : (Color.LIGHT2__BOLD,          Color.DARK0_HARD),
     'msg_time'         : (Color.DARK0_HARD,            Color.LIGHT2),
+    'msg_spoiler'      : (Color.BRIGHT_GREEN__BOLD,    Color.DARK0_HARD),
     'footer'           : (Color.DARK0_HARD,            Color.LIGHT4),
     'footer_contrast'  : (Color.LIGHT2,                Color.DARK0_HARD),
     'starred'          : (Color.BRIGHT_RED__BOLD,      Color.DARK0_HARD),

zulipterminal/themes/gruvbox_light.py

@@ -45,6 +45,7 @@
     'msg_quote'        : (Color.NEUTRAL_YELLOW,         Color.LIGHT0_HARD),
     'msg_bold'         : (Color.DARK2__BOLD,            Color.LIGHT0_HARD),
     'msg_time'         : (Color.LIGHT0_HARD,            Color.DARK2),
+    'msg_spoiler'      : (Color.FADED_GREEN__BOLD,      Color.LIGHT0_HARD),
     'footer'           : (Color.LIGHT0_HARD,            Color.DARK4),
     'footer_contrast'  : (Color.DARK2,                  Color.LIGHT0_HARD),
     'starred'          : (Color.FADED_RED__BOLD,        Color.LIGHT0_HARD),

zulipterminal/themes/zt_blue.py

@@ -40,6 +40,7 @@
     'msg_quote'       : (Color.BROWN,               Color.DARK_BLUE),
     'msg_bold'        : (Color.WHITE__BOLD,         Color.DARK_BLUE),
     'msg_time'        : (Color.DARK_BLUE,           Color.WHITE),
+    'msg_spoiler'     : (Color.LIGHT_GREEN__BOLD,   Color.LIGHT_BLUE),
     'footer'          : (Color.WHITE,               Color.DARK_GRAY),
     'footer_contrast' : (Color.BLACK,               Color.WHITE),
     'starred'         : (Color.LIGHT_RED__BOLD,     Color.LIGHT_BLUE),

zulipterminal/themes/zt_dark.py

@@ -40,6 +40,7 @@
     'msg_quote'       : (Color.BROWN,               Color.BLACK),
     'msg_bold'        : (Color.WHITE__BOLD,         Color.BLACK),
     'msg_time'        : (Color.BLACK,               Color.WHITE),
+    'msg_spoiler'     : (Color.LIGHT_GREEN__BOLD,   Color.BLACK),
     'footer'          : (Color.BLACK,               Color.LIGHT_GRAY),
     'footer_contrast' : (Color.WHITE,               Color.BLACK),
     'starred'         : (Color.LIGHT_RED__BOLD,     Color.BLACK),

zulipterminal/themes/zt_light.py

@@ -40,6 +40,7 @@
     'msg_quote'       : (Color.BLACK,               Color.BROWN),
     'msg_bold'        : (Color.WHITE__BOLD,         Color.DARK_GRAY),
     'msg_time'        : (Color.WHITE,               Color.DARK_GRAY),
+    'msg_spoiler'     : (Color.DARK_GREEN__BOLD,    Color.WHITE),
     'footer'          : (Color.WHITE,               Color.DARK_GRAY),
     'footer_contrast' : (Color.BLACK,               Color.WHITE),
     'starred'         : (Color.LIGHT_RED__BOLD,     Color.WHITE),

zulipterminal/ui_tools/messages.py

@@ -31,7 +31,7 @@
 from zulipterminal.config.ui_mappings import STATE_ICON, STREAM_ACCESS_TYPE
 from zulipterminal.helper import get_unused_fence
 from zulipterminal.server_url import near_message_url
-from zulipterminal.ui_tools.tables import render_table
+from zulipterminal.ui_tools.tables import render_table, row_with_only_border
 from zulipterminal.urwid_types import urwid_MarkupTuple, urwid_Size
 
 
@@ -632,6 +632,45 @@ def soup2markup(
 
                 source_text = f"Original text was {tag_text.strip()}"
                 metadata["time_mentions"].append((time_string, source_text))
+            elif tag == "div" and "spoiler-block" in tag_classes:
+                # SPOILERS
+                header = element.find(class_="spoiler-header")
+                header.contents = [part for part in header.contents if part != "\n"]
+
+                if not header.contents:
+                    default = BeautifulSoup("<p>Spoiler</p>", "html.parser")
+                    header.contents.append(default)
+
+                processed_header = cls.soup2markup(header, metadata)[0]
+
+                processed_header_text = "".join(
+                    part[1] if isinstance(part, tuple) else part
+                    for part in processed_header
+                )
+
+                # Limit to the first 10 characters and append "..."
+                if len(processed_header_text) > 10:
+                    processed_header_text = processed_header_text[:10] + "..."
+
+                processed_header_len = len(processed_header_text)
+                marker = "Spoiler:"
+
+                widths = [len(marker), processed_header_len]
+                top_border = row_with_only_border("┌", "─", "┬", "┐", widths)
+                bottom_border = row_with_only_border(
+                    "└", "─", "┴", "┘", widths, newline=False
+                )
+                markup.extend(top_border)
+                markup.extend(
+                    [
+                        "│ ",
+                        ("msg_spoiler", marker),
+                        " │ ",
+                        processed_header_text,
+                        " │\n",
+                    ]
+                )
+                markup.extend(bottom_border)
             else:
                 markup.extend(cls.soup2markup(element, metadata)[0])
         return markup, metadata["message_links"], metadata["time_mentions"]