replace django-ckedtitor with django-ckeditor-5

adhocracy4/ckeditor/fields.py

@@ -1,23 +1,10 @@
 from ckeditor.fields import RichTextField
 from ckeditor_uploader.fields import RichTextUploadingField
 
-_extra_plugins = ["collapsibleItem", "embed", "embedbase"]
-_external_plugin_resources = [
-    (
-        "collapsibleItem",
-        "/static/ckeditor_collapsible/",
-        "plugin.js",
-    )
-]
-
 
+# FIXME: remove these fields / file
 class RichTextCollapsibleMixin:
-    def __init__(self, *args, **kwargs):
-        kwargs["extra_plugins"] = kwargs.get("extra_plugins", []) + _extra_plugins
-        kwargs["external_plugin_resources"] = (
-            kwargs.get("external_plugin_resources", []) + _external_plugin_resources
-        )
-        super().__init__(*args, **kwargs)
+    pass
 
 
 class RichTextCollapsibleField(RichTextCollapsibleMixin, RichTextField):

adhocracy4/ckeditor/storage.py

@@ -0,0 +1,12 @@
+import os
+from urllib.parse import urljoin
+
+from django.conf import settings
+from django.core.files.storage import FileSystemStorage
+
+
+class CustomStorage(FileSystemStorage):
+    """Custom storage to store uploads in a subfolder called uploads"""
+
+    location = os.path.join(settings.MEDIA_ROOT, "uploads")
+    base_url = urljoin(settings.MEDIA_URL, "uploads/")

adhocracy4/projects/admin.py

@@ -1,7 +1,7 @@
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
 from django import forms
 from django.contrib import admin
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from . import models
 
@@ -37,10 +37,10 @@ class ProjectAdminForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.fields["information"].widget = CKEditorUploadingWidget(
+        self.fields["information"].widget = CKEditor5Widget(
             config_name="collapsible-image-editor"
         )
-        self.fields["result"].widget = CKEditorUploadingWidget(
+        self.fields["result"].widget = CKEditor5Widget(
             config_name="collapsible-image-editor"
         )
 

adhocracy4/projects/migrations/0040_auto_20230919_0952.py

@@ -0,0 +1,31 @@
+# Generated by Django 3.2.20 on 2023-09-19 09:52
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4projects", "0039_add_alt_text_to_field"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="project",
+            name="information",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="This description should tell participants what the goal of the project is, how the project’s participation will look like. It will be always visible in the „Info“ tab on your project’s page.",
+                verbose_name="Description of your project",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="project",
+            name="result",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="Here you should explain what the expected outcome of the project will be and how you are planning to use the results. If the project is finished you should add a summary of the results.",
+                verbose_name="Results of your project",
+            ),
+        ),
+    ]

adhocracy4/projects/migrations/0041_ckeditor5_iframes.py

@@ -0,0 +1,52 @@
+# Generated by Django 3.2.20 on 2023-11-16 11:35
+
+from bs4 import BeautifulSoup
+from django.db import migrations
+
+
+def replace_iframe_with_figur(apps, schema_editor):
+    template = (
+        '<figure class="media"><div data-oembed-url="{url}"><div><iframe src="'
+        '{url}"></iframe></div></div></figure>'
+    )
+    Project = apps.get_model("a4projects", "Project")
+    informations = 0
+    results = 0
+    for project in Project.objects.all():
+        soup = BeautifulSoup(project.information, "html.parser")
+        iframes = soup.findAll("iframe")
+        changed = False
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+            informations += 1
+        if iframes:
+            project.information = soup.prettify(formatter="html")
+            changed = True
+        soup = BeautifulSoup(project.result, "html.parser")
+        iframes = soup.findAll("iframe")
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+            results += 1
+        if iframes:
+            project.result = soup.prettify(formatter="html")
+            changed = True
+        if changed:
+            project.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4projects", "0040_auto_20230919_0952"),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            replace_iframe_with_figur,
+        ),
+    ]

adhocracy4/projects/models.py

@@ -9,11 +9,11 @@
 from django.utils import timezone
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 from django_enumfield.enum import EnumField
 
 from adhocracy4 import transforms as html_transforms
 from adhocracy4.administrative_districts.models import AdministrativeDistrict
-from adhocracy4.ckeditor.fields import RichTextCollapsibleUploadingField
 from adhocracy4.images import fields
 from adhocracy4.maps.fields import PointField
 from adhocracy4.models import base
@@ -194,7 +194,7 @@ class Project(
             "in max. 250 chars."
         ),
     )
-    information = RichTextCollapsibleUploadingField(
+    information = CKEditor5Field(
         blank=True,
         config_name="collapsible-image-editor",
         verbose_name=_("Description of your project"),
@@ -205,7 +205,7 @@ class Project(
             "in the „Info“ tab on your project’s page."
         ),
     )
-    result = RichTextCollapsibleUploadingField(
+    result = CKEditor5Field(
         blank=True,
         config_name="collapsible-image-editor",
         verbose_name=_("Results of your project"),

changelog/7274.md

@@ -0,0 +1,14 @@
+### Added
+
+- custom migration for iframes to make them work with ckeditor5 (WARNING:
+  backing up your database before running is recommended).
+- added dependency beautifulsoup4
+
+### Changed
+
+- replace django-ckeditor with django-ckeditor-5
+
+### Removed
+
+- removed RichTextCollapsibleField
+- removed RichtTextCollapsibleMixin

pyproject.toml

@@ -23,7 +23,7 @@ dependencies = [
     "django-allauth",
     "django-autoslug",
     "django-background-tasks",
-    "django-ckeditor",
+    "django-ckeditor-5",
     "django-enumfield",
     "django-filter",
     "django-multiselectfield",

requirements/base.txt

@@ -1,8 +1,10 @@
+beautifulsoup4==4.12.2
 bleach[css]==6.0.0
 Django==3.2.20
 django-allauth==0.54.0
 git+https://github.com/liqd/django-autoslug.git@liqd2212#egg=django-autoslug
 django-background-tasks==1.2.5
+https://github.com/liqd/django-ckeditor-5/releases/download/v0.2.11-liqd/django_ckeditor_5-0.2.11-py3-none-any.whl
 django-ckeditor==6.6.1
 django-enumfield==3.1
 django-filter==22.1

tests/apps/ideas/migrations/0006_alter_idea_description.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.2.20 on 2023-09-19 13:10
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4test_ideas", "0005_idea_is_bool_test"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="idea",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True, verbose_name="Description"
+            ),
+        ),
+    ]

tests/apps/ideas/models.py

@@ -1,6 +1,6 @@
-from ckeditor.fields import RichTextField
 from django.contrib.contenttypes.fields import GenericRelation
 from django.db import models
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4.categories.fields import CategoryField
 from adhocracy4.comments.models import Comment
@@ -19,7 +19,7 @@ class IdeaQuerySet(RateableQuerySet, CommentableQuerySet):
 
 class Idea(Item):
     name = models.CharField(max_length=120, default="Can i haz cheezburger, pls?")
-    description = RichTextField(verbose_name="Description", blank=True)
+    description = CKEditor5Field(verbose_name="Description", blank=True)
     moderator_status = models.CharField(max_length=256, blank=True)
     moderator_feedback_text = models.OneToOneField(
         ModeratorFeedback,

tests/apps/moderatorfeedback/migrations/0005_alter_moderatorfeedback_feedback_text.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.20 on 2023-09-19 13:10
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("moderatorfeedback", "0004_verbose_name_created_modified"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="moderatorfeedback",
+            name="feedback_text",
+            field=django_ckeditor_5.fields.CKEditor5Field(blank=True),
+        ),
+    ]

tests/apps/moderatorfeedback/models.py

@@ -1,9 +1,9 @@
-from ckeditor.fields import RichTextField
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4.models.base import UserGeneratedContentModel
 
 
 class ModeratorFeedback(UserGeneratedContentModel):
-    feedback_text = RichTextField(
+    feedback_text = CKEditor5Field(
         blank=True,
     )

tests/ckeditor/test_ckeditor.py

@@ -0,0 +1,8 @@
+from django.conf import settings
+
+from adhocracy4.ckeditor.storage import CustomStorage
+
+
+def test_ckeditor_storage_backend():
+    storage = CustomStorage()
+    assert storage.path("test.txt").endswith(settings.MEDIA_ROOT + "/uploads/test.txt")