🪲 fix custom adventures' alignment (#5297)

Fixes #5296 
Fixes #5293

**Description**
In this PR, I attempted to split the teachers' adventures into two columns optimally. This is done by splitting the tags rather than the text, as we currently do. Furthermore, I've set a maximum height on the code blocks to equal the editor's height. This is to avoid very long code blocks which would most likely smaller than other information within the adventure content.

**How to test?**
- create long adventures
- add them to your class
- preview the class and whether the adventure is split intow 2 columns, the best they could!

**ALSO** this PR should fix how currently live adventures, please try to find public adventures and test them locally. Here's some:
- https://hedy.org/public-adventures?level=5&lang=&tag=&search=lootjes
- https://hedy.org/public-adventures?level=5&lang=&tag=&search=Schildpad
- https://hedy.org/public-adventures?level=13&lang=&tag=&search=bonus

static/css/additional.css

@@ -290,4 +290,9 @@ kbd {
     line-height: 1em;
     vertical-align: middle;
     border-radius: 3px;
+}
+
+.teacher-adv pre {
+  max-height: 22rem;
+  overflow-y: scroll;
 }

static/js/appbundle.js

@@ -97931,7 +97931,7 @@ notes_mapping = {
         i++;
       }
     }
-    const formatted_content = html.getElementsByTagName("body")[0].outerHTML.replace(/<br>/, "\n");
+    const formatted_content = html.getElementsByTagName("body")[0].outerHTML.replace(/<br>/g, "\n");
     const agree_public = $("#agree_public").prop("checked");
     const language2 = $("#language").val();
     $.ajax({

static/js/teachers.ts

@@ -245,7 +245,7 @@ function update_db_adventure(adventure_id: string) {
     }
   }
   // We have to replace <br> for newlines, because the serializer swithces them around
-  const formatted_content = html.getElementsByTagName('body')[0].outerHTML.replace(/<br>/, '\n');
+  const formatted_content = html.getElementsByTagName('body')[0].outerHTML.replace(/<br>/g, '\n');
   const agree_public = $('#agree_public').prop('checked');
   const language = $('#language').val();
 

templates/incl/adventure-tabs.html

@@ -41,27 +41,10 @@
                 {% if adventure.short_name != initial_tab %}hidden{% endif %}
                 turn-pre-into-ace show-copy-button p-4 text-adventure-copy"
                 >
-                {% set text_length = adventure.text|length // 2 %}
-                {% set midpoint = adventure.text.find("\n", text_length) %}
-                {% if midpoint == -1 %}
-                    {% set midpoint = text_length %}
-                {% endif %}
-              <div class="lg:flex lg:flex-row">
-                  <div class="{% if adventure.example_code or (adventure.is_teacher_adventure and adventure.text|length > 750) %}lg:w-1/2 {% endif %}w-full p-2 ltr:mr-2 rtl:ml-2">
-                    <div class="max-w-prose">
-                    {% if adventure.is_teacher_adventure and adventure.text|length > 750 %}
-                        {{ adventure.text[:midpoint]|commonmark }}
-                    {% else %}
+              <div class="lg:flex lg:flex-row {% if adventure.is_teacher_adventure %}teacher-adv{% endif %}">
+                    <div class="w-full {% if adventure.example_code or adventure.is_teacher_adventure %}lg:w-1/2 {% endif %} p-2 ltr:mr-2 rtl:ml-2">
                         {{ adventure.text|commonmark }}
-                    {% endif %}
-                    </div>
-                </div>
-                {% if adventure.is_teacher_adventure and adventure.text|length > 750 %}
-                    <div class="border"></div>
-                    <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
-                        {{ adventure.text[midpoint:]|commonmark }}
                     </div>
-                {% endif %}
                   {% if adventure.example_code %}
                       <div class="border"></div>
                       <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">

website/frontend_types.py

@@ -13,6 +13,7 @@
 import functools
 from typing import Optional, List
 from dataclasses import dataclass, field
+from bs4 import BeautifulSoup
 import utils
 
 
@@ -99,6 +100,24 @@ def from_program(program: Program):
         )
 
 
+def halve_adventure_content(content, max_char_length=750):
+    """Splits content if its length exceeds the max_length characters (excluding tags) and sets example_code."""
+    soup = BeautifulSoup(content, 'html.parser')
+    text_without_tags = soup.get_text(separator='')
+    text = content
+    example_code = ""
+    if len(text_without_tags) > max_char_length:
+        # Split text at a suitable breaking point
+        split_index = content.find('</p>', len(text_without_tags)//2)  # Find a closing paragraph tag.
+        if split_index > -1:
+            text = content[:split_index]
+            example_code = content[split_index:]
+        else:
+            # If no suitable split point found, don't truncate content
+            text = content
+    return text, example_code
+
+
 @require_kwargs
 @dataclass
 class Adventure:
@@ -124,11 +143,13 @@ def get(self, key, default=None):
 
     @staticmethod
     def from_teacher_adventure_database_row(row):
+        text, example_code = halve_adventure_content(row["content"])
         return Adventure(
             short_name=row['id'],
             name=row['name'],
             save_name=row['name'],
             editor_contents='',  # Teacher adventures don't seem to have this
-            text=row['formatted_content'] if 'formatted_content' in row else row['content'],
+            text=text,
+            example_code=example_code,
             is_teacher_adventure=True,
             is_command_adventure=False)