From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 1 Feb 2025 02:34:24 +0000 (-0500)
Subject: Multi-line, html comments and descriptions
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=1af38c733952fbfa12f9decf6de171110fecca8f;p=littlesongplace.git

Multi-line, html comments and descriptions
---

diff --git a/main.py b/main.py
index 57774fa..5fe0955 100644
--- a/main.py
+++ b/main.py
@@ -156,26 +156,7 @@ def users_profile(profile_username):
     # Sanitize bio
     profile_bio = ""
     if profile_data["bio"] is not None:
-        allowed_tags = bleach.sanitizer.ALLOWED_TAGS.union({
-            'area', 'br', 'div', 'img', 'map', 'hr', 'header', 'hgroup', 'table', 'tr', 'td',
-            'th', 'thead', 'tbody', 'span', 'small', 'p', 'q', 'u', 'pre',
-        })
-        allowed_attributes = {
-            "*": ["style"], "a": ["href", "title"], "abbr": ["title"], "acronym": ["title"],
-            "img": ["src", "alt", "usemap", "width", "height"], "map": ["name"],
-            "area": ["shape", "coords", "alt", "href"]
-        }
-        allowed_css_properties = {
-            "font-size", "font-style", "font-variant", "font-family", "font-weight", "color",
-            "background-color", "background-image", "border", "border-color",
-            "border-image", "width", "height"
-        }
-        css_sanitizer = CSSSanitizer(allowed_css_properties=allowed_css_properties)
-        profile_bio = bleach.clean(
-                profile_data["bio"],
-                tags=allowed_tags,
-                attributes=allowed_attributes,
-                css_sanitizer=css_sanitizer)
+        profile_bio = sanitize_user_text(profile_data["bio"])
 
     return render_template(
             "profile.html",
@@ -646,6 +627,28 @@ def flash_and_log(msg, category=None):
     else:
         app.logger.info(logmsg)
 
+def sanitize_user_text(text):
+        allowed_tags = bleach.sanitizer.ALLOWED_TAGS.union({
+            'area', 'br', 'div', 'img', 'map', 'hr', 'header', 'hgroup', 'table', 'tr', 'td',
+            'th', 'thead', 'tbody', 'span', 'small', 'p', 'q', 'u', 'pre',
+        })
+        allowed_attributes = {
+            "*": ["style"], "a": ["href", "title"], "abbr": ["title"], "acronym": ["title"],
+            "img": ["src", "alt", "usemap", "width", "height"], "map": ["name"],
+            "area": ["shape", "coords", "alt", "href"]
+        }
+        allowed_css_properties = {
+            "font-size", "font-style", "font-variant", "font-family", "font-weight", "color",
+            "background-color", "background-image", "border", "border-color",
+            "border-image", "width", "height"
+        }
+        css_sanitizer = CSSSanitizer(allowed_css_properties=allowed_css_properties)
+        return bleach.clean(
+                text,
+                tags=allowed_tags,
+                attributes=allowed_attributes,
+                css_sanitizer=css_sanitizer)
+
 ################################################################################
 # Database
 ################################################################################
@@ -715,6 +718,10 @@ class Song:
 
     def get_comments(self):
         comments = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where songid = ?", [self.songid])
+        comments = [dict(c) for c in comments]
+        for c in comments:
+            c["content"] = sanitize_user_text(c["content"])
+
         # Top-level comments
         song_comments = sorted([dict(c) for c in comments if c["replytoid"] is None], key=lambda c: c["created"])
         song_comments = list(reversed(song_comments))
@@ -760,7 +767,7 @@ class Song:
         for sd in songs_data:
             song_tags = [t["tag"] for t in tags[sd["songid"]]]
             song_collabs = [c["name"] for c in collabs[sd["songid"]]]
-            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sd["description"], song_tags, song_collabs))
+            songs.append(cls(sd["songid"], sd["userid"], sd["username"], sd["title"], sanitize_user_text(sd["description"]), song_tags, song_collabs))
 
         return songs
 
diff --git a/templates/comment.html b/templates/comment.html
index e005d72..dc6cbb0 100644
--- a/templates/comment.html
+++ b/templates/comment.html
@@ -18,6 +18,8 @@ In reply to
 </p>
 {% endif %}
 
+<p>Common HTML tags (&lt;a&gt;, &lt;b&gt;, &lt;i&gt;, &lt;img&gt;, etc.) are allowed.</p>
+
 <form method="post">
     <textarea name="content">{% if comment %}{{ comment['content'] }}{% endif %}</textarea>
     <input type="submit" value="Post Comment">
diff --git a/templates/edit-song.html b/templates/edit-song.html
index 94e49f9..7b47df0 100644
--- a/templates/edit-song.html
+++ b/templates/edit-song.html
@@ -26,7 +26,7 @@ Most standard audio/video formats are supported - .wav, .mp3, .ogg, .mp4, etc.
         <input type="text" name="title" id="song-title" value="{{ song.title }}" maxlength="80" required>
     </div>
     <div class="upload-form">
-        <label for="description">Description</label><br>
+        <label for="description">Description</label> (Common HTML tags (&lt;a&gt;, &lt;b&gt;, &lt;i&gt;, &lt;img&gt;, etc.) are allowed.)<br>
         <textarea name="description" maxlength="10000">{{ song.description }}</textarea>
     </div>
     <div class="upload-form">
diff --git a/templates/profile.html b/templates/profile.html
index 9662de4..3f8bcee 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -19,6 +19,13 @@
 <form id="profile-edit-form" action="/update-bio" method="post" hidden>
     <h2> Edit Bio </h2>
     <p>Common HTML tags (&lt;a&gt;, &lt;b&gt;, &lt;i&gt;, &lt;img&gt;, etc.) are allowed.</p>
+    <p>Examples:</p>
+    <ul>
+        <li>&lt;b&gt;<b>bold</b>&lt;/b&gt;</li>
+        <li>&lt;i&gt;<i>italic</i>&lt;/i&gt;</li>
+        <li>&lt;a href=&quot;https://littlesong.place&quot;&gt;<a href="https://littlesong.place">link</a>&lt;/a&gt;</li>
+        <li>&lt;span style=&quot;color: blue;&quot;&gt;<span style="color: blue">blue</span>&lt;/span&gt;</li>
+    </ul>
     <div>
         <textarea name="bio" maxlength="10000">{{ bio }}</textarea>
     </div>
diff --git a/templates/song-list.html b/templates/song-list.html
index 8251c88..6b6b98c 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -52,7 +52,7 @@
         <div class="song-details" {% if request.endpoint != 'song' %}hidden{% endif %}>
             <!-- Song Description -->
             {% if song.description %}
-            <div class="song-description">{{ song.description }}</div>
+            <div class="song-description">{{ (song.description.replace("\n", "<br>"))|safe  }}</div>
             {% endif %}
 
             <!-- Song Tags -->
@@ -74,7 +74,7 @@
                 <div class="top-level-comment">
 
                     <a href="/users/{{ comment['username'] }}" class="profile-link">{{ comment['username'] }}</a>:
-                    {{ comment['content'] }}
+                    {{ (comment['content'].replace("\n", "<br>"))|safe }}
 
                     {% if session['userid'] == comment['userid'] or session['userid'] == song.userid %}
                     <div class="comment-button-container">
diff --git a/todo.txt b/todo.txt
index 3d0b34c..54e50c6 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,8 +1,4 @@
 UPDATE 1.1
-- Activity indicator
-- Tips and Tricks (or html helper for bio/descriptions?)
-- Multiline/html descriptions, comments
-- Title gif spacing? worse on mobile?
 - Update news
 
 UNSORTED