Project description TinyMCE HTML editor (#618)

* Replace project description text field with TinyMCE HTML editor (unsanitized) * Add HTML input sanitization for project descriptions * Fix indentation inconsistency --------- Co-authored-by: Job Doesburg <[email protected]>
GiPHouse · May 8, 2023 · 653bbc1 · 653bbc1
1 parent f6e655d
commit 653bbc1
Show file tree

Hide file tree

Showing 7 changed files with 878 additions and 748 deletions.
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -30,6 +30,8 @@ uWSGI = {version = "^2.0.19", optional = true}
 admin-totals = "^1.0.1"
 django-bootstrap5 = "^22.1"
 django-easy-admin-object-actions = "^1.1.0"
+django-tinymce = "^3.4.0"
+django-bleach = "^3.0.1"
 
 [tool.poetry.extras]
 production = ["uwsgi", "psycopg2-binary"]

diff --git a/website/giphousewebsite/settings/base.py b/website/giphousewebsite/settings/base.py
@@ -32,6 +32,8 @@
     'admin_auto_filters',
     'admin_totals',
     'django_easy_admin_object_actions',
+    'tinymce',
+    'django_bleach',
 
     'questionnaires.apps.QuestionnairesConfig',
     'github_oauth.apps.GithubConfig',
@@ -146,3 +148,44 @@
     "https://www.googleapis.com/auth/admin.directory.group",
     "https://www.googleapis.com/auth/apps.groups.settings",
 ]
+
+TINYMCE_DEFAULT_CONFIG = {
+    "max_height": 500,
+    "menubar": False,
+    "plugins": "autolink autoresize link image code media paste lists",
+    "toolbar": "h2 h3 | bold italic underline strikethrough | image | link unlink "
+    "| bullist numlist | undo redo | code",
+    "contextmenu": "bold italic underline strikethrough | link",
+    "paste_as_text": True,
+    "relative_urls": False,
+    "remove_script_host": False,
+    "autoresize_bottom_margin": 50,
+}
+
+# HTML input sanitization settings for the bleach template filter
+BLEACH_ALLOWED_TAGS = [
+    "h2",
+    "h3",
+    "p",
+    "a",
+    "div",
+    "strong",
+    "em",
+    "i",
+    "b",
+    "ul",
+    "li",
+    "br",
+    "ol",
+    "img",
+    "span",
+]
+
+BLEACH_ALLOWED_ATTRIBUTES = {
+    "*": ["class", "style"],
+    "a": ["href", "rel", "target", "title"],
+    "img": ["alt", "title", "src"],
+}
+
+BLEACH_STRIP_TAGS = True
+BLEACH_STRIP_COMMENTS = False
diff --git a/website/giphousewebsite/urls.py b/website/giphousewebsite/urls.py
@@ -38,4 +38,5 @@ def get_redirect_url(self, *args, **kwargs):
     path("projects/", include("projects.urls")),
     path("reservations/", include("room_reservation.urls")),
     path("lectures/", include("lecture_registrations.urls")),
+    path("tinymce/", include("tinymce.urls")),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
diff --git a/website/projects/migrations/0007_alter_project_description.py b/website/projects/migrations/0007_alter_project_description.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.1.3 on 2023-02-15 20:50
+
+from django.db import migrations
+import tinymce.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("projects", "0006_alter_project_unique_together_project_slug_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="project",
+            name="description",
+            field=tinymce.models.HTMLField(),
+        ),
+    ]
diff --git a/website/projects/models.py b/website/projects/models.py
@@ -3,6 +3,8 @@
 from django.db.models.signals import pre_delete
 from django.dispatch import receiver
 
+from tinymce.models import HTMLField
+
 from courses.models import Semester
 
 from registrations.models import Employee
@@ -38,7 +40,7 @@ class Meta:
     slug = models.SlugField("slug", max_length=50, blank=False, null=False)
 
     semester = models.ForeignKey(Semester, on_delete=models.CASCADE)
-    description = models.TextField()
+    description = HTMLField()
     client = models.ForeignKey(Client, on_delete=models.SET_NULL, blank=True, null=True)
 
     comments = models.TextField(

diff --git a/website/projects/templates/projects/index.html b/website/projects/templates/projects/index.html
@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load bleach_tags %}
 
 {% block title %}Projects - {{ block.super }}{% endblock %}
 
@@ -14,11 +15,11 @@ <h5>No projects found.</h5>
                     {% if project.client.logo %}<img class="project-logo mt-2 mx-2" src="{{ project.client.logo.url }}" alt="logo {{ project.client.name }}">{% endif %}
                     <div class="card-body">
                         <h4 class="card-title">{{ project.name }}</h4>
-                        {% if project.client %}<h6 class="card-subtitle text-muted mb-2">By {{ project.client.name}}</h6>{% endif %}
-                        <p class="card-text">{{ project.description|linebreaks }}</p>
+                        {% if project.client %}<h6 class="card-subtitle text-muted mb-2">By {{ project.client.name }}</h6>{% endif %}
+                        <p class="card-text">{{ project.description | bleach }}</p>
                     </div>
                 </div>
             </div>
         {% endfor %}
     {% endif %}
-{% endblock %}
+{% endblock %}