CONCD-610 Use Rich Text editor to Django admin

Pipfile

@@ -15,6 +15,7 @@ bagit = "*"
 django-registration = "*"
 django-prometheus-metrics = "*"
 django-simple-captcha = "*"
+django-tinymce = "*"
 elasticsearch = "<7.14.0"
 django-elasticsearch-dsl = "==7.3"
 django-debug-toolbar = "*"

concordia/admin/__init__.py

@@ -89,6 +89,8 @@
 from .forms import (
     AdminItemImportForm,
     BleachedDescriptionAdminForm,
+    CampaignAdminForm,
+    ProjectAdminForm,
     SimpleContentBlockAdminForm,
 )
 
@@ -182,7 +184,7 @@ def truncated_metadata(self, obj):
 
 @admin.register(Campaign)
 class CampaignAdmin(admin.ModelAdmin, CustomListDisplayFieldsMixin):
-    form = BleachedDescriptionAdminForm
+    form = CampaignAdminForm
 
     list_display = (
         "title",
@@ -383,7 +385,7 @@ class TopicAdmin(admin.ModelAdmin):
 
 @admin.register(Project)
 class ProjectAdmin(admin.ModelAdmin, CustomListDisplayFieldsMixin):
-    form = BleachedDescriptionAdminForm
+    form = ProjectAdminForm
 
     # todo: add foreignKey link for campaign
     list_display = ("id", "title", "slug", "campaign", "published", "ordering")

concordia/admin/forms.py

@@ -1,5 +1,8 @@
 import bleach
 from django import forms
+from tinymce.widgets import TinyMCE
+
+from ..models import Campaign, Project
 
 FRAGMENT_ALLOWED_TAGS = {"br", "kbd", "span"} | bleach.sanitizer.ALLOWED_TAGS
 
@@ -65,6 +68,25 @@ def clean_short_description(self):
         )
 
 
+class CampaignAdminForm(BleachedDescriptionAdminForm):
+    class Meta:
+        model = Campaign
+        widgets = {
+            "short_description": TinyMCE(),
+            "description": TinyMCE(),
+        }
+        fields = "__all__"
+
+
+class ProjectAdminForm(BleachedDescriptionAdminForm):
+    class Meta:
+        model = Project
+        widgets = {
+            "description": TinyMCE(),
+        }
+        fields = "__all__"
+
+
 class SimpleContentBlockAdminForm(forms.ModelForm):
     def clean_body(self):
         return bleach.clean(

concordia/settings_template.py

@@ -122,6 +122,7 @@
     "flags",
     "channels",
     "django_admin_multiple_choice_list_filter",
+    "tinymce",
 ]
 
 MIDDLEWARE = [
@@ -388,3 +389,13 @@
         },
     }
 }
+
+SECURE_REFERRER_POLICY = "origin"
+TINYMCE_COMPRESSOR = False
+TINYMCE_DEFAULT_CONFIG = {
+    "selector": "textarea.tinymce",
+    "referrer_policy": "origin",
+    "skin": "oxide-dark",
+    "content_css": "dark",
+}
+TINYMCE_JS_URL = "https://cdn.tiny.cloud/1/rf486i5f1ww9m8191oolczn7f0ry61mzdtfwbu7maiiiv2kv/tinymce/6/tinymce.min.js"

concordia/templates/admin/concordia/campaign/change_form.html

@@ -45,19 +45,3 @@
     {% endif %}
     {{ block.super }}
 {% endblock %}
-
-{% block extrahead %}
-    {{ block.super }}
-
-    {% include 'fragments/codemirror.html' %}
-{% endblock extrahead %}
-
-
-{% block content %}
-    {{ block.super }}
-
-    <script>
-        setupCodeMirror(document.getElementById('id_description'), 'html');
-        setupCodeMirror(document.getElementById('id_short_description'), 'html');
-    </script>
-{% endblock content %}

concordia/templates/admin/concordia/project/change_form.html

@@ -35,18 +35,3 @@
     {% endif %}
     {{ block.super }}
 {% endblock %}
-
-{% block extrahead %}
-    {{ block.super }}
-
-    {% include 'fragments/codemirror.html' %}
-{% endblock extrahead %}
-
-
-{% block content %}
-    {{ block.super }}
-
-    <script>
-        setupCodeMirror(document.getElementById('id_description'), 'html');
-    </script>
-{% endblock content %}

concordia/urls.py

@@ -240,6 +240,7 @@
     path("error/404/", page_not_found, {"exception": Http404()}),
     path("error/429/", views.ratelimit_view),
     path("error/403/", permission_denied, {"exception": HttpResponseForbidden()}),
+    path("tinymce/", include("tinymce.urls")),
     path("", include("django_prometheus_metrics.urls")),
     path("robots.txt", include("robots.urls")),
 ]