From 4a2e29f1a00bbc08385d8ef55aced1467e7cf31d Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Wed, 28 Feb 2024 18:15:10 +0200
Subject: [PATCH 01/14] Update ckeditor5 django fields

---
 adhocracy-plus/config/settings/base.py        | 274 +++++++++++++-----
 adhocracy-plus/config/urls.py                 |   3 +
 apps/activities/admin.py                      |   4 +-
 .../a4_candy_contrib/item_detail.html         |   6 +-
 apps/documents/assets/ParagraphForm.jsx       |  44 ++-
 apps/documents/models.py                      |   8 +-
 .../a4_candy_documents/chapter_detail.html    |   6 +-
 .../a4_candy_documents/paragraph_detail.html  |   2 +-
 .../documents/templatetags/react_documents.py |   4 +-
 apps/newsletters/forms.py                     |  10 +
 apps/newsletters/models.py                    |  10 +-
 apps/offlineevents/forms.py                   |  14 +
 apps/offlineevents/models.py                  |  16 +-
 .../offlineevent_detail.html                  |   4 +-
 apps/organisations/admin.py                   |   4 +-
 apps/organisations/forms.py                   |   9 +-
 .../a4_candy_projects/project_detail.html     |   6 +-
 apps/topicprio/forms.py                       |  30 +-
 apps/topicprio/models.py                      |   9 +-
 .../a4_candy_topicprio/topic_detail.html      |   4 +-
 package.json                                  |   2 +-
 requirements/base.txt                         |   3 +-
 tests/documents/test_document_api.py          |  65 +++++
 tests/newsletters/test_newsletter_views.py    |  65 +++++
 .../test_views_project_offlineevents.py       |  74 +++++
 .../test_views_module_topics.py               |  60 ++++
 26 files changed, 601 insertions(+), 135 deletions(-)

diff --git a/adhocracy-plus/config/settings/base.py b/adhocracy-plus/config/settings/base.py
index 046a9ddc3..139688ec6 100644
--- a/adhocracy-plus/config/settings/base.py
+++ b/adhocracy-plus/config/settings/base.py
@@ -25,6 +25,7 @@
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "django.contrib.humanize",
+    "django_ckeditor_5",
     "widget_tweaks",
     "rest_framework",
     "rest_framework.authtoken",
@@ -305,120 +306,110 @@
     ],
 }
 
-# CKEditor
-
-CKEDITOR_UPLOAD_PATH = "uploads/"
-CKEDITOR_RESTRICT_BY_USER = "username"
-CKEDITOR_ALLOW_NONIMAGE_FILES = True
-
-CKEDITOR_CONFIGS = {
+BLEACH_LIST = {
     "default": {
-        "width": "100%",
-        "toolbar": "Custom",
-        "toolbar_Custom": [
-            ["Bold", "Italic", "Underline"],
-            ["NumberedList", "BulletedList"],
-            ["Link", "Unlink"],
+        "tags": [
+            "p",
+            "strong",
+            "em",
+            "u",
+            "ol",
+            "li",
+            "ul",
+            "a",
+            "img",
+            "iframe",
+            "div",
         ],
+        "attributes": {
+            "a": ["href", "rel", "target"],
+            "img": ["src", "alt", "style"],
+            "div": ["class"],
+            "iframe": ["src", "alt", "style"],
+        },
     },
     "image-editor": {
-        "width": "100%",
-        "toolbar": "Custom",
-        "toolbar_Custom": [
-            ["Bold", "Italic", "Underline"],
-            ["Image"],
-            ["NumberedList", "BulletedList"],
-            ["Link", "Unlink"],
-        ],
-        "removeDialogTabs": "image:Link",
-    },
-    "collapsible-image-editor": {
-        "width": "100%",
-        "title": _("Rich text editor"),
-        "toolbar": "Custom",
-        "toolbar_Custom": [
-            ["Bold", "Italic", "Underline"],
-            ["Image"],
-            ["NumberedList", "BulletedList"],
-            ["Link", "Unlink"],
-            ["CollapsibleItem"],
-            ["Embed", "EmbedBase"],
+        "tags": [
+            "a",
+            "em",
+            "figcaption",
+            "figure",
+            "img",
+            "li",
+            "ol",
+            "p",
+            "span",
+            "strong",
+            "u",
+            "ul",
         ],
-        "removePlugins": "stylesheetparser",
-        "extraAllowedContent": "iframe[*]; div[*]",
-        "removeDialogTabs": "image:Link",
-    },
-    "video-editor": {
-        "width": "100%",
-        "title": _("Rich text editor"),
-        "toolbar": "Custom",
-        "toolbar_Custom": [["Embed", "EmbedBase"]],
-        "removePlugins": "stylesheetparser",
-        "extraAllowedContent": "iframe[*]; div[*]",
-    },
-}
-
-BLEACH_LIST = {
-    "default": {
-        "tags": ["p", "strong", "em", "u", "ol", "li", "ul", "a"],
         "attributes": {
             "a": ["href", "rel", "target"],
+            "figure": ["class", "style"],
+            "figcaption": ["class"],
+            "img": ["class", "src", "alt", "style", "height", "width"],
+            "span": ["class", "style"],
         },
-    },
-    "image-editor": {
-        "tags": ["p", "strong", "em", "u", "ol", "li", "ul", "a", "img"],
-        "attributes": {"a": ["href", "rel", "target"], "img": ["src", "alt", "style"]},
         "styles": [
+            "aspect-ratio",
             "float",
-            "margin",
-            "padding",
-            "width",
             "height",
+            "margin",
             "margin-bottom",
-            "margin-top",
             "margin-left",
             "margin-right",
+            "margin-top",
+            "padding",
+            "width",
         ],
     },
     "collapsible-image-editor": {
         "tags": [
+            "a",
+            "div",
+            "em",
+            "figcaption",
+            "figure",
+            "iframe",
+            "img",
+            "li",
+            "ol",
             "p",
+            "span",
             "strong",
-            "em",
             "u",
-            "ol",
-            "li",
             "ul",
-            "a",
-            "img",
-            "div",
-            "iframe",
         ],
         "attributes": {
             "a": ["href", "rel", "target"],
-            "img": ["src", "alt", "style"],
-            "div": ["class"],
-            "iframe": ["src", "alt", "style"],
+            "div": ["class", "data-oembed-url"],
+            "figure": ["class", "style"],
+            "figcaption": ["class"],
+            "iframe": ["src", "alt"],
+            "img": ["class", "src", "alt", "style", "height", "width"],
+            "span": ["class", "style"],
         },
         "styles": [
+            "aspect-ratio",
             "float",
-            "margin",
-            "padding",
-            "width",
             "height",
+            "margin",
             "margin-bottom",
-            "margin-top",
             "margin-left",
             "margin-right",
+            "margin-top",
+            "padding",
+            "width",
         ],
     },
     "video-editor": {
-        "tags": ["a", "img", "div", "iframe"],
+        "tags": ["a", "img", "div", "iframe", "figure"],
         "attributes": {
             "a": ["href", "rel", "target"],
             "img": ["src", "alt", "style"],
-            "div": ["class"],
-            "iframe": ["src", "alt", "style"],
+            "div": ["class", "data-oembed-url"],
+            "iframe": ["src", "alt"],
+            "figure": ["class", "div", "iframe"],
         },
     },
 }
@@ -560,3 +551,134 @@
 CELERY_RESULT_BACKEND = "redis://localhost:6379"
 CELERY_BROKER_CONNECTION_RETRY_ON_STARTUP = True
 CELERY_RESULT_EXTENDED = True
+
+# CKEditor config
+CKEDITOR_UPLOAD_PATH = "uploads/"  # to be removed after django upgrade and ckeditor_uploader removal
+CKEDITOR_5_FILE_STORAGE = "adhocracy4.ckeditor.storage.CustomStorage"
+CKEDITOR_5_PATH_FROM_USERNAME = True
+CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True
+CKEDITOR_5_UPLOAD_FILE_TYPES = ["jpg", "jpeg", "png", "gif", "pdf", "docx"]
+CKEDITOR_5_CONFIGS = {
+    "default": {
+        "language": "de",
+        "toolbar": [
+            "bold",
+            "italic",
+            "underline",
+            "|",
+            "link",
+            "bulletedList",
+            "numberedList",
+        ],
+        "list": {
+            "properties": {
+                "styles": "true",
+                "startIndex": "true",
+                "reversed": "true",
+            }
+        },
+        "link": {"defaultProtocol": "https://"},
+    },
+    "image-editor": {
+        "language": "de",
+        "toolbar": {
+            "items": [
+                "bold",
+                "italic",
+                "underline",
+                "bulletedList",
+                "numberedList",
+                "link",
+                "imageUpload",
+                "fileUpload",
+            ],
+            "shouldNotGroupWhenFull": "true",
+        },
+        "image": {
+            "toolbar": [
+                "imageUpload",
+                "imageTextAlternative",
+                "toggleImageCaption",
+                "imageStyle:inline",
+                "imageStyle:wrapText",
+                "imageStyle:breakText",
+                "imageStyle:alignLeft",
+                "imageStyle:alignRight",
+            ],
+            "insert": {"type": "auto"},
+        },
+        "list": {
+            "properties": {
+                "styles": "true",
+                "startIndex": "true",
+                "reversed": "true",
+            }
+        },
+        "link": {"defaultProtocol": "https://"},
+    },
+    "collapsible-image-editor": {
+        "language": "de",
+        "toolbar": [
+            "bold",
+            "italic",
+            "underline",
+            "bulletedList",
+            "numberedList",
+            "link",
+            "imageUpload",
+            "fileUpload",
+            "mediaEmbed",
+            "accordionButton",
+            "fontSize",
+        ],
+        "image": {
+            "toolbar": [
+                "imageUpload",
+                "imageTextAlternative",
+                "toggleImageCaption",
+                "imageStyle:inline",
+                "imageStyle:wrapText",
+                "imageStyle:breakText",
+                "imageStyle:alignLeft",
+                "imageStyle:alignRight",
+            ],
+            "insert": {"type": "auto"},
+        },
+        "list": {
+            "properties": {
+                "styles": "true",
+                "startIndex": "true",
+                "reversed": "true",
+            }
+        },
+        "link": {"defaultProtocol": "https://"},
+        "mediaEmbed": {
+            "removeProviders": [
+                "dailymotion",
+                "spotify",
+                "facebook",
+                "flickr",
+                "googleMaps",
+                "instagram",
+                "twitter",
+            ],
+            "previewsInData": True,
+        },
+    },
+    "video-editor": {
+        "language": "de",
+        "toolbar": ["mediaEmbed"],
+        "mediaEmbed": {
+            "removeProviders": [
+                "dailymotion",
+                "spotify",
+                "facebook",
+                "flickr",
+                "googleMaps",
+                "instagram",
+                "twitter",
+            ],
+            "previewsInData": True,
+        },
+    },
+}
diff --git a/adhocracy-plus/config/urls.py b/adhocracy-plus/config/urls.py
index 501076c0f..1dcf99880 100644
--- a/adhocracy-plus/config/urls.py
+++ b/adhocracy-plus/config/urls.py
@@ -176,6 +176,9 @@
             ]
         ),
     ),
+    path(
+        "ckeditor5/", include("django_ckeditor_5.urls"), name="ck_editor_5_upload_file"
+    ),
     path("sitemap.xml", static_sitemap_index, name="static-sitemap-index"),
     path("sitemap-wagtail.xml", wagtail_sitemap, name="wagtail-sitemap"),
     path(
diff --git a/apps/activities/admin.py b/apps/activities/admin.py
index 783ef6e14..7c31a246c 100644
--- a/apps/activities/admin.py
+++ b/apps/activities/admin.py
@@ -1,6 +1,6 @@
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
 from django import forms
 from django.contrib import admin
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from . import models
 
@@ -9,7 +9,7 @@ class ActivityAdminForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.fields["description"].widget = CKEditorUploadingWidget(
+        self.fields["description"].widget = CKEditor5Widget(
             config_name="collapsible-image-editor",
         )
 
diff --git a/apps/contrib/templates/a4_candy_contrib/item_detail.html b/apps/contrib/templates/a4_candy_contrib/item_detail.html
index ec0144b6d..3f2980327 100644
--- a/apps/contrib/templates/a4_candy_contrib/item_detail.html
+++ b/apps/contrib/templates/a4_candy_contrib/item_detail.html
@@ -57,7 +57,9 @@ <h1 class="item-detail__title">{{ object.name }}</h1>
                     <div class="item-detail__content">
                         <div class="item-detail__basic-content">
                             <img class="item-detail__image" src="{% thumbnail object.image 'item_image' %}" alt="">
-                            {{ object.description | richtext }}
+			    <div class="ck-content">
+                                {{ object.description | richtext }}
+			    </div>
                         </div>
 
                         {% block additional_content %}{% endblock %}
@@ -144,7 +146,7 @@ <h2 class="moderator-feedback__title">{% translate 'Official Feedback' %}</h2>
                             </strong>
                             {% html_date object.moderator_feedback_text.created %}
                         </div>
-                        <div class="moderator-feedback__body">
+                        <div class="moderator-feedback__body ck-content">
                             {{ object.moderator_feedback_text.feedback_text | safe }}
                         </div>
                     </div>
diff --git a/apps/documents/assets/ParagraphForm.jsx b/apps/documents/assets/ParagraphForm.jsx
index a4206e310..46ae752f7 100644
--- a/apps/documents/assets/ParagraphForm.jsx
+++ b/apps/documents/assets/ParagraphForm.jsx
@@ -10,6 +10,21 @@ const ckReplace = function (id, config) {
   return window.CKEDITOR.replace(id, config)
 }
 
+// translations
+const translations = {
+  headline: django.gettext('Headline'),
+  paragraph: django.gettext('Paragraph'),
+  moveUp: django.gettext('Move up'),
+  moveDown: django.gettext('Move down'),
+  delete: django.gettext('Delete'),
+  helpText: django.gettext(
+    'If you add an image, please provide an ' +
+      'alternate text. It serves as a textual description of the image ' +
+      'content and is read out by screen readers. Describe the image in ' +
+      'approx. 80 characters. Example: A busy square with people in summer.'
+  )
+}
+
 class ParagraphForm extends React.Component {
   handleNameChange (e) {
     const name = e.target.value
@@ -68,7 +83,7 @@ class ParagraphForm extends React.Component {
               <label
                 htmlFor={'id_paragraphs-' + this.props.id + '-name'}
               >
-                {django.gettext('Headline')}
+                {translations.headline}
                 <input
                   className="form-control"
                   id={'id_paragraphs-' + this.props.id + '-name'}
@@ -82,12 +97,19 @@ class ParagraphForm extends React.Component {
             </div>
 
             <div className="form-group">
-              <label
-                htmlFor={'id_paragraphs-' + this.props.id + '-text'}
-              >
-                {django.gettext('Paragraph')}
+              <label htmlFor={'id_paragraphs-' + props.id + '-text'}>
+                {translations.paragraph}
+                <div
+                  id={'id_paragraph-help-text-' + props.id}
+                  className="form-hint"
+                >
+                  {translations.helpText}
+                </div>
                 <div
                   className="django-ckeditor-widget"
+                <div
+                  id={'id_paragraph-help-text-' + props.id}
+                  className="form-hint"
                   data-field-id={'id_paragraphs-' + this.props.id + '-text'}
                   style={{ display: 'inline-block' }}
                 >
@@ -107,35 +129,35 @@ class ParagraphForm extends React.Component {
             className="btn btn--light btn--small"
             onClick={this.props.onMoveUp}
             disabled={!this.props.onMoveUp}
-            title={django.gettext('Move up')}
+            title={translations.moveUp}
             type="button"
           >
             <i
               className="fa fa-chevron-up"
-              aria-label={django.gettext('Move up')}
+              aria-label={translations.moveUp}
             />
           </button>
           <button
             className="btn btn--light btn--small"
             onClick={this.props.onMoveDown}
             disabled={!this.props.onMoveDown}
-            title={django.gettext('Move down')}
+            title={translations.moveDown}
             type="button"
           >
             <i
               className="fa fa-chevron-down"
-              aria-label={django.gettext('Move down')}
+              aria-label={translations.moveDown}
             />
           </button>
           <button
             className="btn btn--light btn--small"
             onClick={this.props.onDelete}
-            title={django.gettext('Delete')}
+            title={translations.delete}
             type="button"
           >
             <i
               className="far fa-trash-alt"
-              aria-label={django.gettext('Delete')}
+              aria-label={translations.delete}
             />
           </button>
         </div>
diff --git a/apps/documents/models.py b/apps/documents/models.py
index 8c1b00858..f273728a8 100644
--- a/apps/documents/models.py
+++ b/apps/documents/models.py
@@ -1,11 +1,12 @@
-from ckeditor_uploader.fields import RichTextUploadingField
 from django.contrib.contenttypes.fields import GenericRelation
 from django.db import models
 from django.urls import reverse
 from django.utils.functional import cached_property
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
 from adhocracy4.comments import models as comment_models
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.models import base
 from adhocracy4.modules import models as module_models
 
@@ -57,7 +58,10 @@ def next(self):
 
 class Paragraph(base.TimeStampedModel):
     name = models.CharField(max_length=120, blank=True)
-    text = RichTextUploadingField(config_name="image-editor")
+    text = CKEditor5Field(
+    config_name="image-editor", validators=[ImageAltTextValidator()]
+)
+
     weight = models.PositiveIntegerField()
     chapter = models.ForeignKey(
         Chapter, on_delete=models.CASCADE, related_name="paragraphs"
diff --git a/apps/documents/templates/a4_candy_documents/chapter_detail.html b/apps/documents/templates/a4_candy_documents/chapter_detail.html
index 65a2bc546..65f74e5ff 100644
--- a/apps/documents/templates/a4_candy_documents/chapter_detail.html
+++ b/apps/documents/templates/a4_candy_documents/chapter_detail.html
@@ -38,11 +38,13 @@ <h2 class="chapter-title">{{ object.name }}</h2>
                         {% for paragraph in object.paragraphs.all %}
 
                             <section class="paragraph" id="paragraph-{{ object.pk }}-{{ paragraph.pk }}">
-                                <div class="paragraph__content">
+                                <div class="paragraph__content ck-content">
                                     <h3 class="paragraph__title">
                                         {{ paragraph.name }}
                                     </h3>
-                                    {{ paragraph.text|richtext }}
+				    <div class="ck-content">
+                                        {{ paragraph.text|richtext }}
+				    </div>
                                 </div>
                                 <div class="paragraph__actions">
                                     <a
diff --git a/apps/documents/templates/a4_candy_documents/paragraph_detail.html b/apps/documents/templates/a4_candy_documents/paragraph_detail.html
index 2912e1485..5c5ce5d4f 100644
--- a/apps/documents/templates/a4_candy_documents/paragraph_detail.html
+++ b/apps/documents/templates/a4_candy_documents/paragraph_detail.html
@@ -29,7 +29,7 @@
                 <h1 class="item-detail__title">
                     {{ paragraph.name }}
                 </h1>
-                <div class="item-detail__content">
+                <div class="item-detail__content ck-content">
                     {{ paragraph.text | richtext }}
                 </div>
             </article>
diff --git a/apps/documents/templatetags/react_documents.py b/apps/documents/templatetags/react_documents.py
index 1ddb22934..9dc905256 100644
--- a/apps/documents/templatetags/react_documents.py
+++ b/apps/documents/templatetags/react_documents.py
@@ -1,6 +1,6 @@
 import json
 
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
+from django_ckeditor_5.widgets import CKEditor5Widget
 from django import template
 from rest_framework.renderers import JSONRenderer
 
@@ -16,7 +16,7 @@ def react_documents(context, module, reload_on_success=False):
     serializer = ChapterSerializer(chapters, many=True)
     chapters_json = JSONRenderer().render(serializer.data).decode("utf-8")
 
-    widget = CKEditorUploadingWidget(config_name="image-editor")
+    widget = CKEditor5Widget(config_name="image-editor")
     widget._set_config()
     config = JSONRenderer().render(widget.config).decode("utf-8")
 
diff --git a/apps/newsletters/forms.py b/apps/newsletters/forms.py
index dd7564215..b7e807c47 100644
--- a/apps/newsletters/forms.py
+++ b/apps/newsletters/forms.py
@@ -24,6 +24,16 @@ class Meta:
             "subject",
             "body",
         ]
+        help_texts = {
+            "body": _(
+                "If you add an image, please ensure to set the width "
+                "no larger than 650px and to provide an alternate text "
+                "of the image. An alternate text serves as a textual "
+                "description of the image content and is read out by "
+                "screen readers. Describe the image in approx. 80 characters. "
+                "Example: A busy square with people in summer."
+            ),
+        }
 
     def __init__(self, user=None, organisation=None, *args, **kwargs):
         super().__init__(*args, **kwargs)
diff --git a/apps/newsletters/models.py b/apps/newsletters/models.py
index ed75e8e20..861035d2e 100644
--- a/apps/newsletters/models.py
+++ b/apps/newsletters/models.py
@@ -1,12 +1,13 @@
 import re
 
-from ckeditor_uploader.fields import RichTextUploadingField
 from django.conf import settings
 from django.db import models
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.models.base import UserGeneratedContentModel
 from adhocracy4.projects.models import Project
 
@@ -28,14 +29,11 @@ class Newsletter(UserGeneratedContentModel):
     sender_name = models.CharField(max_length=254, verbose_name=_("Name"))
     sender = models.EmailField(blank=True, verbose_name=_("Sender"))
     subject = models.CharField(max_length=254, verbose_name=_("Subject"))
-    body = RichTextUploadingField(
+    body = CKEditor5Field(
         blank=True,
         config_name="image-editor",
         verbose_name=_("Email body"),
-        help_text=_(
-            "When adding images, please ensure to "
-            "set the width no larger than 600px."
-        ),
+        validators=[ImageAltTextValidator()],
     )
     sent = models.DateTimeField(blank=True, null=True, verbose_name=_("Sent"))
 
diff --git a/apps/offlineevents/forms.py b/apps/offlineevents/forms.py
index be83f5a66..2920daa1a 100644
--- a/apps/offlineevents/forms.py
+++ b/apps/offlineevents/forms.py
@@ -18,3 +18,17 @@ class OfflineEventForm(forms.ModelForm):
     class Meta:
         model = models.OfflineEvent
         fields = ["name", "event_type", "date", "description"]
+        help_texts = {
+            "description": _(
+                "If you add an image, please provide an alternate text. "
+                "It serves as a textual description of the image content "
+                "and is read out by screen readers. Describe the image "
+                "in approx. 80 characters. Example: A busy square with "
+                "people in summer."
+            ),
+            "event_type": _(
+                "The content of this field is shown in the timeline. It "
+                "should have no more than 30 characters e.g. Information "
+                "event or 3rd public workshop."
+            ),
+        }
diff --git a/apps/offlineevents/models.py b/apps/offlineevents/models.py
index c37d5b08f..2d4587077 100644
--- a/apps/offlineevents/models.py
+++ b/apps/offlineevents/models.py
@@ -1,13 +1,14 @@
 from datetime import timedelta
 
 from autoslug import AutoSlugField
-from ckeditor_uploader.fields import RichTextUploadingField
 from django.db import models
 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 adhocracy4 import transforms
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.models.base import UserGeneratedContentModel
 from adhocracy4.projects import models as project_models
 
@@ -25,16 +26,13 @@ class OfflineEvent(UserGeneratedContentModel):
     event_type = models.CharField(
         max_length=30,
         verbose_name=_("Event type"),
-        help_text=_(
-            "The content of this field is shown in the timeline. It "
-            "should have no more than 30 characters e.g. Information "
-            "event or 3rd public workshop."
-        ),
     )
     date = models.DateTimeField(verbose_name=_("Date"))
-    description = RichTextUploadingField(
-        config_name="image-editor", verbose_name=_("Description")
-    )
+    description = CKEditor5Field(
+            config_name="collapsible-image-editor",
+            verbose_name=_("Description"),
+            validators=[ImageAltTextValidator()],
+            )
     project = models.ForeignKey(project_models.Project, on_delete=models.CASCADE)
 
     objects = OfflineEventsQuerySet.as_manager()
diff --git a/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_detail.html b/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_detail.html
index 35e51d8eb..d7056faa5 100644
--- a/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_detail.html
+++ b/apps/offlineevents/templates/a4_candy_offlineevents/offlineevent_detail.html
@@ -16,7 +16,9 @@ <h2 class="item-detail__title">{{ object.name }}</h2>
 
 
                     <div class="item-detail__content">
-                        {{ object.description | richtext }}
+			<div class="ck-content">
+                            {{ object.description | richtext }}
+			</div>
 
                         {% block additional_content %}{% endblock %}
                     </div>
diff --git a/apps/organisations/admin.py b/apps/organisations/admin.py
index fbe00fcc2..798152d6a 100644
--- a/apps/organisations/admin.py
+++ b/apps/organisations/admin.py
@@ -1,5 +1,5 @@
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
 from django.contrib import admin
+from django_ckeditor_5.widgets import CKEditor5Widget
 from parler.admin import TranslatableAdmin
 from parler.forms import TranslatableModelForm
 
@@ -19,7 +19,7 @@ class OrganisationAdminForm(TranslatableModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.fields["information"].widget = CKEditorUploadingWidget(
+        self.fields["information"].widget = CKEditor5Widget(
             config_name="collapsible-image-editor"
         )
 
diff --git a/apps/organisations/forms.py b/apps/organisations/forms.py
index c43cef3b9..e7cd14a51 100644
--- a/apps/organisations/forms.py
+++ b/apps/organisations/forms.py
@@ -1,10 +1,9 @@
 import parler
-from ckeditor_uploader import widgets
-from ckeditor_uploader.fields import RichTextUploadingFormField
 from django import forms
 from django.conf import settings
 from django.core.exceptions import ValidationError
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from adhocracy4 import transforms
 from apps.cms.settings import helpers
@@ -136,7 +135,7 @@ class OrganisationForm(forms.ModelForm):
         ),
         (
             "information",
-            RichTextUploadingFormField,
+            CKEditor5Widget,
             {
                 "config_name": "collapsible-image-editor",
                 "label": OrganisationTranslation._meta.get_field(
@@ -147,9 +146,7 @@ class OrganisationForm(forms.ModelForm):
                 ).help_text,
                 "external_plugin_resources": _external_plugin_resources,
                 "extra_plugins": ["collapsibleItem"],
-                "widget": widgets.CKEditorUploadingWidget(
-                    external_plugin_resources=_external_plugin_resources,
-                    extra_plugins=["collapsibleItem"],
+                "widget": CKEditor5Widget(
                     config_name="collapsible-image-editor",
                 ),
             },
diff --git a/apps/projects/templates/a4_candy_projects/project_detail.html b/apps/projects/templates/a4_candy_projects/project_detail.html
index 788d90186..1c37e67d3 100644
--- a/apps/projects/templates/a4_candy_projects/project_detail.html
+++ b/apps/projects/templates/a4_candy_projects/project_detail.html
@@ -129,7 +129,9 @@ <h1 class="project-header__title">{{ project.name }}</h1>
                 <div class="container">
                     <div class="row">
                         <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
-                            {{ project.information | transform_collapsibles | richtext }}
+                            <div class="ck-content">
+                                {{ project.information | transform_collapsibles | richtext }}
+			    </div>
                             {% if project.contact_name or project.contact_address_text or project.contact_email or project.contact_phone or project.contact_url %}
                                 <h3 class="u-top-divider">{% translate 'Contact for questions' %}</h3>
                                 {% if project.contact_name %}
@@ -305,7 +307,7 @@ <h5>{% translate 'Insights' %}</h5>
                         <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
                           <h5>{{ result_title|title }}</h5>
                         </div>
-                        <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
+                        <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2 ck-content">
                             {% if project.result %}
                                 {{ project.result | transform_collapsibles | richtext }}
                             {% else %}
diff --git a/apps/topicprio/forms.py b/apps/topicprio/forms.py
index 2fb446b17..26f456e09 100644
--- a/apps/topicprio/forms.py
+++ b/apps/topicprio/forms.py
@@ -1,19 +1,39 @@
-from ckeditor_uploader import fields
 from django import forms
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4.categories.forms import CategorizableFieldMixin
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.labels.mixins import LabelsAddableFieldMixin
+from apps.contrib.widgets import Select2Widget
 
 from . import models
 
 
-class TopicForm(CategorizableFieldMixin, LabelsAddableFieldMixin, forms.ModelForm):
-
-    description = fields.RichTextUploadingFormField(
-        config_name="image-editor", required=True, label=_("Description")
+class TopicForm(
+    CategorizableFieldMixin,
+    LabelsAddableFieldMixin,
+#    CategoryAndLabelAliasMixin,
+    forms.ModelForm,
+):
+    description = CKEditor5Field(
+        config_name="image-editor", validators=[ImageAltTextValidator()]
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["description"].label = _("Description")
+
     class Meta:
         model = models.Topic
         fields = ["name", "description", "category", "labels"]
+        widgets = {"category": Select2Widget(attrs={"class": "select2__no-search"})}
+        help_texts = {
+            "description": _(
+                "If you add an image, please provide an alternate text. "
+                "It serves as a textual description of the image content "
+                "and is read out by screen readers. Describe the image "
+                "in approx. 80 characters. Example: A busy square with "
+                "people in summer."
+            ),
+        }
diff --git a/apps/topicprio/models.py b/apps/topicprio/models.py
index 1861ce713..ad17125ba 100644
--- a/apps/topicprio/models.py
+++ b/apps/topicprio/models.py
@@ -1,14 +1,15 @@
 from autoslug import AutoSlugField
-from ckeditor_uploader.fields import RichTextUploadingField
 from django.contrib.contenttypes.fields import GenericRelation
 from django.db import models
 from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
 from adhocracy4.categories.fields import CategoryField
 from adhocracy4.comments import models as comment_models
 from adhocracy4.images.fields import ConfiguredImageField
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.labels import models as labels_models
 from adhocracy4.models import query
 from adhocracy4.modules import models as module_models
@@ -28,8 +29,10 @@ class Topic(module_models.Item):
     )
     slug = AutoSlugField(populate_from="name", unique=True)
     name = models.CharField(max_length=120, verbose_name=_("Title"))
-    description = RichTextUploadingField(
-        config_name="image-editor", verbose_name=_("Description")
+    description = CKEditor5Field(
+        config_name="image-editor",
+        verbose_name=_("Description"),
+        validators=[ImageAltTextValidator()],
     )
     image = ConfiguredImageField(
         "idea_image",
diff --git a/apps/topicprio/templates/a4_candy_topicprio/topic_detail.html b/apps/topicprio/templates/a4_candy_topicprio/topic_detail.html
index 1efb923de..d15e28b56 100644
--- a/apps/topicprio/templates/a4_candy_topicprio/topic_detail.html
+++ b/apps/topicprio/templates/a4_candy_topicprio/topic_detail.html
@@ -45,7 +45,9 @@ <h1 class="item-detail__title">{{ object.name }}</h1>
             <div class="item-detail__content">
                 <div class="item-detail__basic-content">
                     <img class="item-detail__image" src="{% thumbnail object.image 'item_image' %}" alt="">
-                    {{ object.description | richtext }}
+		    <div class="ck-content">
+                        {{ object.description | richtext }}
+		    </div>
                 </div>
             </div>
 
diff --git a/package.json b/package.json
index daaea25b1..994a394c6 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.4",
     "@maplibre/maplibre-gl-leaflet": "0.0.19",
-    "adhocracy4": "git+https://github.com/liqd/adhocracy4#7378cb6f161a79e5dd9b1d685b62502614fcd35f",
+    "adhocracy4": "git+https://github.com/liqd/adhocracy4#ckeditor5-transition-a4",
     "autoprefixer": "10.4.14",
     "bootstrap": "5.2.3",
     "css-loader": "6.8.1",
diff --git a/requirements/base.txt b/requirements/base.txt
index 161e95b83..c5e115c4f 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -1,5 +1,5 @@
 # A4
-git+https://github.com/liqd/adhocracy4.git@7378cb6f161a79e5dd9b1d685b62502614fcd35f#egg=adhocracy4
+git+https://github.com/liqd/adhocracy4.git@ckeditor5-transition-a4#egg=adhocracy4
 
 # Additional requirements
 brotli==1.0.9
@@ -19,6 +19,7 @@ Django==3.2.19
 django-allauth==0.54.0
 git+https://github.com/liqd/django-autoslug.git@liqd2212#egg=django-autoslug
 django-ckeditor==6.5.1
+https://github.com/liqd/django-ckeditor-5/releases/download/v0.2.11-liqd/django_ckeditor_5-0.2.11-py3-none-any.whl
 django-filter==23.5
 django-widget-tweaks==1.4.12
 djangorestframework==3.14.0
diff --git a/tests/documents/test_document_api.py b/tests/documents/test_document_api.py
index b41e3d32f..408f6d61a 100644
--- a/tests/documents/test_document_api.py
+++ b/tests/documents/test_document_api.py
@@ -3,6 +3,7 @@
 from django.urls import reverse
 from rest_framework import status
 
+from adhocracy4.images.validators import ImageAltTextValidator
 from apps.documents import models as document_models
 
 
@@ -398,3 +399,67 @@ def test_moderator_can_update_and_create_paragraph(apiclient, module):
 
     paragraphs_all_count = document_models.Paragraph.objects.all().count()
     assert paragraphs_all_count == 2
+
+
+@pytest.mark.django_db
+def test_moderator_cannot_create_paragraph_image_without_alt_text(apiclient, module):
+    project = module.project
+    moderator = project.moderators.first()
+    apiclient.force_authenticate(user=moderator)
+    url = reverse("chapters-list", kwargs={"module_pk": module.pk})
+    data = {
+        "chapters": [
+            {
+                "name": "This is a text",
+                "paragraphs": [
+                    {
+                        "name": "paragraph 1",
+                        "text": "A beautiful image <img>",
+                        "weight": 0,
+                    },
+                ],
+            }
+        ]
+    }
+    response = apiclient.post(url, data, format="json")
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    chapters_all_count = document_models.Chapter.objects.all().count()
+    assert chapters_all_count == 0
+    paragraphs_all_count = document_models.Paragraph.objects.all().count()
+    assert paragraphs_all_count == 0
+    assert (
+        response.data["chapters"][0]["paragraphs"][0]["text"][0]
+        == ImageAltTextValidator.message
+    )
+
+
+@pytest.mark.django_db
+def test_moderator_can_create_paragraph_image_has_alt_text(apiclient, module):
+    project = module.project
+    moderator = project.moderators.first()
+    apiclient.force_authenticate(user=moderator)
+    url = reverse("chapters-list", kwargs={"module_pk": module.pk})
+    data = {
+        "chapters": [
+            {
+                "name": "This is a text",
+                "paragraphs": [
+                    {
+                        "name": "paragraph 1",
+                        "text": 'A beautiful image <img alt="description">',
+                        "weight": 0,
+                    },
+                ],
+            }
+        ]
+    }
+    response = apiclient.post(url, data, format="json")
+    assert response.status_code == status.HTTP_201_CREATED
+    chapters_all_count = document_models.Chapter.objects.all().count()
+    assert chapters_all_count == 1
+    chapter = response.data["chapters"][0]
+    paragraphs_all_count = document_models.Paragraph.objects.all().count()
+    assert paragraphs_all_count == 1
+    paragraph_pk = chapter["paragraphs"][0]["id"]
+    paragraph_text = document_models.Paragraph.objects.get(pk=paragraph_pk).text
+    assert paragraph_text == 'A beautiful image <img alt="description">'
diff --git a/tests/newsletters/test_newsletter_views.py b/tests/newsletters/test_newsletter_views.py
index 2dcd56d5d..6af927328 100644
--- a/tests/newsletters/test_newsletter_views.py
+++ b/tests/newsletters/test_newsletter_views.py
@@ -4,6 +4,7 @@
 from django.urls import reverse
 
 from adhocracy4.follows import models as follow_models
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.test.helpers import assert_template_response
 from adhocracy4.test.helpers import redirect_target
 from apps.newsletters import models as newsletter_models
@@ -256,3 +257,67 @@ def test_limit_initiators_organisation_projects(client, project_factory):
     response = client.post(url, data)
     assert not response.context["form"].is_valid()
     assert newsletter_models.Newsletter.objects.count() == 0
+
+
+@pytest.mark.django_db
+def test_send_organisation_missing_alt_text(admin, client, project):
+    organisation = project.organisation
+
+    data = {
+        "sender_name": "Tester",
+        "sender": "test@test.de",
+        "subject": "Testsubject",
+        "body": "Testbody <img>",
+        "receivers": newsletter_models.ORGANISATION,
+        "organisation": organisation.pk,
+        "project": "",
+        "send": "Send",
+    }
+
+    url = reverse(
+        "a4dashboard:newsletter-create", kwargs={"organisation_slug": organisation.slug}
+    )
+    client.login(username=admin.email, password="password")
+    response = client.post(url, data)
+    assert newsletter_models.Newsletter.objects.count() == 0
+    assert "body" in response.context_data["form"].errors
+    assert (
+        response.context_data["form"].errors["body"][0] == ImageAltTextValidator.message
+    )
+
+
+@pytest.mark.django_db
+def test_send_organisation_with_alt_text(
+    admin, client, project, user_factory, follow_factory, email_address_factory
+):
+    organisation = project.organisation
+    user1 = user_factory(get_newsletters=True)
+    user2 = user_factory(get_newsletters=True)
+    user_factory()
+    email_address_factory(user=user1, email=user1.email, primary=True, verified=True)
+    email_address_factory(user=user2, email=user2.email, primary=True, verified=True)
+    follow_models.Follow.objects.all().delete()
+    follow_factory(creator=user1, project=project)
+    follow_factory(creator=user2, project=project, enabled=False)
+
+    data = {
+        "sender_name": "Tester",
+        "sender": "test@test.de",
+        "subject": "Testsubject",
+        "body": 'Testbody <img alt="description">',
+        "receivers": newsletter_models.ORGANISATION,
+        "organisation": organisation.pk,
+        "project": "",
+        "send": "Send",
+    }
+
+    url = reverse(
+        "a4dashboard:newsletter-create", kwargs={"organisation_slug": organisation.slug}
+    )
+    client.login(username=admin.email, password="password")
+    response = client.post(url, data)
+    assert redirect_target(response) == "newsletter-create"
+    assert newsletter_models.Newsletter.objects.count() == 1
+    assert len(mail.outbox) == 1
+    assert mail.outbox[0].to == [user1.email]
+    assert mail.outbox[0].subject == "Testsubject"
diff --git a/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py b/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
index 064628094..cfcc6ab0b 100644
--- a/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
+++ b/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
@@ -1,8 +1,13 @@
+from unittest.mock import ANY
+from unittest.mock import MagicMock
+
 import pytest
 from dateutil.parser import parse
 from django.urls import reverse
 
 from adhocracy4.dashboard import components
+from adhocracy4.dashboard.signals import project_component_updated
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.test.helpers import assert_template_response
 from adhocracy4.test.helpers import redirect_target
 from adhocracy4.test.helpers import setup_phase
@@ -94,3 +99,72 @@ def test_offlineevent_delete_view(client, phase_factory, offline_event_factory):
     response = client.delete(url)
     assert redirect_target(response) == "offlineevent-list"
     assert not OfflineEvent.objects.exists()
+
+
+@pytest.mark.django_db
+def test_offlineevent_update_view_missing_alt_text(
+    client, phase_factory, offline_event_factory
+):
+    phase, module, project, item = setup_phase(
+        phase_factory, None, CollectFeedbackPhase
+    )
+    initiator = module.project.organisation.initiators.first()
+    event = offline_event_factory(project=project)
+    url = reverse("a4dashboard:offlineevent-update", kwargs={
+        "organisation_slug": project.organisation.slug,
+        "slug": event.slug}
+        )
+    data = {
+        "name": "name",
+        "event_type": "event_type",
+        "description": "desc <img>",
+        "date_0": "2013-01-01",
+        "date_1": "18:00",
+    }
+    client.login(username=initiator.email, password="password")
+    signal_handler = MagicMock()
+    project_component_updated.connect(signal_handler)
+    response = client.post(url, data)
+    assert "description" in response.context_data["form"].errors
+    assert (
+        response.context_data["form"].errors["description"][0]
+        == ImageAltTextValidator.message
+    )
+    signal_handler.assert_not_called()
+
+
+@pytest.mark.django_db
+def test_offlineevent_update_view_with_alt_text(
+    client, phase_factory, offline_event_factory
+):
+    phase, module, project, item = setup_phase(
+        phase_factory, None, CollectFeedbackPhase
+    )
+    initiator = module.project.organisation.initiators.first()
+    event = offline_event_factory(project=project)
+    url = reverse("a4dashboard:offlineevent-update", kwargs={
+        "organisation_slug": project.organisation.slug,
+        "slug": event.slug}
+        )
+    data = {
+        "name": "name",
+        "event_type": "event_type",
+        "description": 'desc <img alt="Description">',
+        "date_0": "2013-01-01",
+        "date_1": "18:00",
+    }
+    client.login(username=initiator.email, password="password")
+    signal_handler = MagicMock()
+    project_component_updated.connect(signal_handler)
+    response = client.post(url, data)
+    assert redirect_target(response) == "offlineevent-list"
+    event.refresh_from_db()
+    assert event.description == data.get("description")
+    assert event.date == parse("2013-01-01 17:00:00 UTC")
+    signal_handler.assert_called_once_with(
+        signal=ANY,
+        sender=component.__class__,
+        project=project,
+        component=component,
+        user=initiator,
+    )
diff --git a/tests/topicprio/dashboard_components/test_views_module_topics.py b/tests/topicprio/dashboard_components/test_views_module_topics.py
index c88e2c707..580b6eea1 100644
--- a/tests/topicprio/dashboard_components/test_views_module_topics.py
+++ b/tests/topicprio/dashboard_components/test_views_module_topics.py
@@ -2,6 +2,7 @@
 from django.urls import reverse
 
 from adhocracy4.dashboard import components
+from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.test.helpers import assert_template_response
 from adhocracy4.test.helpers import redirect_target
 from adhocracy4.test.helpers import setup_phase
@@ -96,3 +97,62 @@ def test_topic_delete_view(client, phase_factory, topic_factory):
     response = client.delete(url)
     assert redirect_target(response) == "topic-list"
     assert not Topic.objects.exists()
+
+
+@pytest.mark.django_db
+def test_topic_update_view_missing_alt_text(
+    client, phase_factory, topic_factory, category_factory
+):
+    phase, module, project, item = setup_phase(
+        phase_factory, topic_factory, PrioritizePhase
+    )
+    initiator = module.project.organisation.initiators.first()
+    category = category_factory(module=module)
+    url = reverse(
+        "a4dashboard:topic-update", kwargs={
+            "organisation_slug": item.module.project.organisation.slug,
+            "pk": item.pk,
+            "year": item.created.year
+            }
+    )
+    data = {
+        "name": "name",
+        "description": "desc <img>",
+        "category": category.pk,
+    }
+    client.login(username=initiator.email, password="password")
+    response = client.post(url, data)
+    assert "description" in response.context_data["form"].errors
+    assert (
+        response.context_data["form"].errors["description"][0]
+        == ImageAltTextValidator.message
+    )
+
+
+@pytest.mark.django_db
+def test_topic_update_view_with_alt_text(
+    client, phase_factory, topic_factory, category_factory
+):
+    phase, module, project, item = setup_phase(
+        phase_factory, topic_factory, PrioritizePhase
+    )
+    initiator = module.project.organisation.initiators.first()
+    category = category_factory(module=module)
+    url = reverse(
+        "a4dashboard:topic-update", kwargs={
+            "organisation_slug": item.module.project.organisation.slug,
+            "pk": item.pk,
+            "year": item.created.year
+            }
+    )
+    data = {
+        "name": "name",
+        "description": 'desc <img alt="description">',
+        "category": category.pk,
+    }
+    client.login(username=initiator.email, password="password")
+    response = client.post(url, data)
+    assert redirect_target(response) == "topic-list"
+    topic = Topic.objects.get(name=data.get("name"))
+    assert topic.description == data.get("description")
+    assert topic.category.pk == data.get("category")

From 11d1991d4d611d5c18c19f65aeedfbb6127db714 Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Thu, 29 Feb 2024 13:05:24 +0200
Subject: [PATCH 02/14] ckeditor5 django migrations

---
 .../migrations/0003_alter_paragraph_text.py   | 21 +++++++++++++++
 .../migrations/0004_alter_newsletter_body.py  | 23 ++++++++++++++++
 .../migrations/0003_auto_20240229_1203.py     | 27 +++++++++++++++++++
 .../0003_alter_topic_description.py           | 22 +++++++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 apps/documents/migrations/0003_alter_paragraph_text.py
 create mode 100644 apps/newsletters/migrations/0004_alter_newsletter_body.py
 create mode 100644 apps/offlineevents/migrations/0003_auto_20240229_1203.py
 create mode 100644 apps/topicprio/migrations/0003_alter_topic_description.py

diff --git a/apps/documents/migrations/0003_alter_paragraph_text.py b/apps/documents/migrations/0003_alter_paragraph_text.py
new file mode 100644
index 000000000..f7799936c
--- /dev/null
+++ b/apps/documents/migrations/0003_alter_paragraph_text.py
@@ -0,0 +1,21 @@
+# Generated by Django 3.2.19 on 2024-02-29 11:03
+
+import adhocracy4.images.validators
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_documents", "0002_verbose_name_created_modified"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="paragraph",
+            name="text",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()]
+            ),
+        ),
+    ]
diff --git a/apps/newsletters/migrations/0004_alter_newsletter_body.py b/apps/newsletters/migrations/0004_alter_newsletter_body.py
new file mode 100644
index 000000000..a17b43335
--- /dev/null
+++ b/apps/newsletters/migrations/0004_alter_newsletter_body.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.19 on 2024-02-29 11:03
+
+import adhocracy4.images.validators
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_newsletters", "0003_verbose_name_created_modified"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="newsletter",
+            name="body",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()],
+                verbose_name="Email body",
+            ),
+        ),
+    ]
diff --git a/apps/offlineevents/migrations/0003_auto_20240229_1203.py b/apps/offlineevents/migrations/0003_auto_20240229_1203.py
new file mode 100644
index 000000000..47ef9f882
--- /dev/null
+++ b/apps/offlineevents/migrations/0003_auto_20240229_1203.py
@@ -0,0 +1,27 @@
+# Generated by Django 3.2.19 on 2024-02-29 11:03
+
+import adhocracy4.images.validators
+from django.db import migrations, models
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_offlineevents", "0002_verbose_name_created_modified"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="offlineevent",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()],
+                verbose_name="Description",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="offlineevent",
+            name="event_type",
+            field=models.CharField(max_length=30, verbose_name="Event type"),
+        ),
+    ]
diff --git a/apps/topicprio/migrations/0003_alter_topic_description.py b/apps/topicprio/migrations/0003_alter_topic_description.py
new file mode 100644
index 000000000..30dbaad7f
--- /dev/null
+++ b/apps/topicprio/migrations/0003_alter_topic_description.py
@@ -0,0 +1,22 @@
+# Generated by Django 3.2.19 on 2024-02-29 11:03
+
+import adhocracy4.images.validators
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_topicprio", "0002_topic_description_add_verbose_name"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="topic",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                validators=[adhocracy4.images.validators.ImageAltTextValidator()],
+                verbose_name="Description",
+            ),
+        ),
+    ]

From 5c8a3fe4c052294c8614d3b453de8d5a9d925a94 Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Thu, 29 Feb 2024 13:07:39 +0200
Subject: [PATCH 03/14] assets: ckeditor5 js and style

---
 .../assets/extra_css/_ckeditor.scss           | 227 ++++++++++++++++++
 adhocracy-plus/assets/js/app.js               |   5 -
 .../scss/components/_ck_embed_iframe.scss     |  14 ++
 adhocracy-plus/assets/scss/style.scss         |   2 +
 apps/documents/assets/ParagraphForm.jsx       |  12 +-
 5 files changed, 249 insertions(+), 11 deletions(-)
 create mode 100644 adhocracy-plus/assets/extra_css/_ckeditor.scss
 create mode 100644 adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss

diff --git a/adhocracy-plus/assets/extra_css/_ckeditor.scss b/adhocracy-plus/assets/extra_css/_ckeditor.scss
new file mode 100644
index 000000000..c67b0bc61
--- /dev/null
+++ b/adhocracy-plus/assets/extra_css/_ckeditor.scss
@@ -0,0 +1,227 @@
+/*
+ * CKEditor 5 (v40.2.0) content styles.
+ * Generated on Wed, 13 Dec 2023 08:57:10 GMT.
+ * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
+ */
+
+:root {
+  --ck-color-image-caption-background: hsl(0deg, 0%, 97%);
+  --ck-color-image-caption-text: hsl(0deg, 0%, 20%);
+  --ck-color-mention-background: hsla(341deg, 100%, 30%, 0.1);
+  --ck-color-mention-text: hsl(341deg, 100%, 30%);
+  --ck-color-selector-caption-background: hsl(0deg, 0%, 97%);
+  --ck-color-selector-caption-text: hsl(0deg, 0%, 20%);
+  --ck-highlight-marker-blue: hsl(201deg, 97%, 72%);
+  --ck-highlight-marker-green: hsl(120deg, 93%, 68%);
+  --ck-highlight-marker-pink: hsl(345deg, 96%, 73%);
+  --ck-highlight-marker-yellow: hsl(60deg, 97%, 73%);
+  --ck-highlight-pen-green: hsl(112deg, 100%, 27%);
+  --ck-highlight-pen-red: hsl(0deg, 85%, 49%);
+  --ck-image-style-spacing: 1.5em;
+  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+  --ck-todo-list-checkmark-size: 16px;
+}
+
+/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
+.ck-content .media {
+  clear: both;
+  margin: 0.9em 0;
+  display: block;
+  min-width: 15em;
+}
+
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  min-width: 100%;
+  height: auto;
+}
+
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline {
+  /*
+     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
+     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
+     * This strange behavior does not happen with inline-flex.
+     */
+  display: inline-flex;
+  max-width: 100%;
+  align-items: flex-start;
+}
+
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline picture,
+.ck-content .image-inline img {
+  flex-grow: 1;
+  flex-shrink: 1;
+  max-width: 100%;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content img.image_resized {
+  height: auto;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized {
+  max-width: 100%;
+  display: block;
+  box-sizing: border-box;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized img {
+  width: 100%;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
+.ck-content .image > figcaption {
+  display: table-caption;
+  caption-side: bottom;
+  word-break: break-word;
+  color: var(--ck-color-image-caption-text);
+  background-color: var(--ck-color-image-caption-background);
+  padding: 0.6em;
+  font-size: 0.75em;
+  outline-offset: -1px;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imageresize.css */
+.ck-content .image.image_resized > figcaption {
+  display: block;
+}
+
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image {
+  display: table;
+  clear: both;
+  text-align: center;
+  margin: 0.9em auto;
+  min-width: 50px;
+}
+
+/* @ckeditor/ckeditor5-image/theme/image.css */
+.ck-content .image-inline picture {
+  display: flex;
+}
+
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol {
+  list-style-type: decimal;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol {
+  list-style-type: lower-latin;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol {
+  list-style-type: lower-roman;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol ol {
+  list-style-type: upper-latin;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ol ol ol ol ol {
+  list-style-type: upper-roman;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul {
+  list-style-type: disc;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul {
+  list-style-type: circle;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul ul {
+  list-style-type: square;
+}
+
+/* @ckeditor/ckeditor5-list/theme/list.css */
+.ck-content ul ul ul ul {
+  list-style-type: square;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-left,
+.ck-content .image-style-block-align-right {
+  max-width: calc(100% - var(--ck-image-style-spacing));
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-left,
+.ck-content .image-style-align-right {
+  clear: none;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-side {
+  float: right;
+  margin-left: var(--ck-image-style-spacing);
+  max-width: 50%;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-left {
+  float: left;
+  margin-right: var(--ck-image-style-spacing);
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-align-right {
+  float: right;
+  margin-left: var(--ck-image-style-spacing);
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-right {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-style-block-align-left {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content p + .image-style-align-left,
+.ck-content p + .image-style-align-right,
+.ck-content p + .image-style-side {
+  margin-top: 0;
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-left,
+.ck-content .image-inline.image-style-align-right {
+  margin-top: var(--ck-inline-image-style-spacing);
+  margin-bottom: var(--ck-inline-image-style-spacing);
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-left {
+  margin-right: var(--ck-inline-image-style-spacing);
+}
+
+/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
+.ck-content .image-inline.image-style-align-right {
+  margin-left: var(--ck-inline-image-style-spacing);
+}
diff --git a/adhocracy-plus/assets/js/app.js b/adhocracy-plus/assets/js/app.js
index a25cb6b9f..d9df2e814 100644
--- a/adhocracy-plus/assets/js/app.js
+++ b/adhocracy-plus/assets/js/app.js
@@ -68,11 +68,6 @@ function init () {
     $('.js-select2').select2()
   }
 
-  // This function adds required classes to iframes added by ckeditor
-  $('.rich-text iframe').addClass('ck_embed_iframe')
-  $('.ck_embed_iframe').parent('div').addClass('ck_embed_iframe__container')
-}
-
 document.addEventListener('DOMContentLoaded', init, false)
 
 export function getCurrentPath () {
diff --git a/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss b/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss
new file mode 100644
index 000000000..05b551c75
--- /dev/null
+++ b/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss
@@ -0,0 +1,14 @@
+.ck_embed_iframe__container {
+  overflow: hidden;
+  padding-top: 56.25%; // 16:9 aspect ratio
+  position: relative;
+
+  .ck_embed_iframe {
+    border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
diff --git a/adhocracy-plus/assets/scss/style.scss b/adhocracy-plus/assets/scss/style.scss
index deb860544..83aa28bad 100644
--- a/adhocracy-plus/assets/scss/style.scss
+++ b/adhocracy-plus/assets/scss/style.scss
@@ -77,6 +77,7 @@
 @import "components/complete";
 @import "components/contact_form";
 @import "components/copyright";
+@import "components/ck_embed_iframe";
 @import "components/creator_count";
 @import "components/dashboard_nav";
 @import "components/data_table";
@@ -135,3 +136,4 @@
 @import "utility";
 
 @import "shame";
+@import "../extra_css/ckeditor";
diff --git a/apps/documents/assets/ParagraphForm.jsx b/apps/documents/assets/ParagraphForm.jsx
index 46ae752f7..f171fb178 100644
--- a/apps/documents/assets/ParagraphForm.jsx
+++ b/apps/documents/assets/ParagraphForm.jsx
@@ -107,16 +107,16 @@ class ParagraphForm extends React.Component {
                 </div>
                 <div
                   className="django-ckeditor-widget"
-                <div
-                  id={'id_paragraph-help-text-' + props.id}
-                  className="form-hint"
                   data-field-id={'id_paragraphs-' + this.props.id + '-text'}
                   style={{ display: 'inline-block' }}
                 >
                   <textarea
-                    // fix height to avoid jumping on ckeditor initalization
-                    style={{ height: this.props.config.height + ckEditorToolbarsHeight }}
-                    id={'id_paragraphs-' + this.props.id + '-text'}
+                    id={'id_paragraphs-' + props.id + '-text'}
+                    aria-invalid={props.errors ? 'true' : 'false'}
+                    aria-describedby={
+                      (props.errors ? 'id_paragraph-help-text-' : 'id_error-') +
+                      props.id
+                    }
                   />
                 </div>
               </label>

From 509b388b7956db427448eb5be53319e10ee2f74e Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Thu, 29 Feb 2024 13:08:23 +0200
Subject: [PATCH 04/14] docs, changelog: ckeditor

---
 changelog/7632.md | 24 +++++++++++++++++++++++
 docs/ckeditor.md  | 49 ++++++++++++++++++++++++-----------------------
 2 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 changelog/7632.md

diff --git a/changelog/7632.md b/changelog/7632.md
new file mode 100644
index 000000000..01d69a994
--- /dev/null
+++ b/changelog/7632.md
@@ -0,0 +1,24 @@
+### Added
+
+- custom migration to make iframes work with ckeditor5
+- added dependency beautifulsoup4
+- add helptext to paragraph form in documents/text review
+- add helptext for maptopicprio ckeditor5 field
+- add helptext for topicprio ckeditor5 field
+- add helptext for offlinevent ckeditor5 field
+
+
+### Changed
+
+- replace django-ckeditor with django-ckeditor5
+- disable browser-side form checks for forms which use ckeditor by adding
+  `novalidate` to them  This is necessary as ckeditor form fields which are
+  required will block form submission otherwise.
+- update and move helptext for plans ckeditor5 field from model to form
+- update and move helptext for newsletter ckeditor5 field from model to form
+- update and move helptext for plattform email ckeditor5 field from model to
+  form
+- update a4 to ckeditor5-transition-a4
+- add image validator which validates that all img tags have the alt attribute
+  set to all ckedito5 fields
+
diff --git a/docs/ckeditor.md b/docs/ckeditor.md
index 68cd3fb57..579e93702 100644
--- a/docs/ckeditor.md
+++ b/docs/ckeditor.md
@@ -1,30 +1,31 @@
-# CKEditor
+# General
 
-We use the ckeditor in the dashboard for information and result inputs and also user side for idea adding. This allows users to add formatted text, editable images, accordions and videos. To achieve this we have 4 configured editors for different use cases, default (ideas), image-editor, collapsible-image-editor(information, results), video-editor(live stream).
+for general info see [ckeditor](https://github.com/liqd/adhocracy4/blob/main/docs/ckeditor.md) in
+adhocracy4.
 
-## Editor
--   We use [django-ckeditor](https://pypi.org/project/django-ckeditor/) which utilises [ckeditor 4.7](https://ckeditor.com/docs/ckeditor4/latest/index.html).
+# Local Testing
 
-## Configs
--   The configs of the editors can be found in base.py.
--   Config options can be found [here](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html) syntax is slightly different for django-ckeditor (see removeDialogTabs). Official [example config](https://github.com/django-ckeditor/django-ckeditor#example-ckeditor-configuration).
+To test mb with a local version of django-ckeditor-5 you need to follow these
+steps:
 
-## Dialog windows
--   The dialog windows which open when addinga  link, image, ect. can be customised via [CKEditor Dialog API](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog.html).
--   An example of this can be seen in app.js where the code snippet is deleting the URL input in the image dialog, futher examples can be found [here](https://docs.cksource.com/CKEditor_3.x/Howto/Editing_Dialog_Windows) and [here](https://ckeditor.com/old/forums/Support/How-remove-Element-particular-Tab#comment-62739).
--   NOTE: The id/name of the input you wish to delete will follow the naming conventions in the examples but will not be the id from the rendered page.
+```
+# clone django-ckeditor-5
+git clone git@github.com:liqd/django-ckeditor-5.git
+# cd into the directory
+cd django-ckeditor-5/django-ckeditor-5
+# install npm dependencies
+npm install
+# build js files
+npm run dev
+```
 
-## Plugins
--   To add plugins, it should be done in a4 in adhocracy4/ckeditor, then update config in aplus (see embedbase), not all ckeditor plugins can be used in django-ckeditor, see below for a list.
--   It is possible to create custom plugins (see collapsibleItem in a4).
--   The embed plugin we use also uses a self hosted version of iframely in order to serve iframes from a urls, configs are found in admin repository.
+Now in mb, do the folowing:
 
-### Allowed plugins
-
-a11yhelp, about, adobeair, ajax, autoembed, autogrow, autolink, bbcode, clipboard, codesnippet,
-codesnippetgeshi, colordialog, devtools, dialog, div, divarea, docprops, embed, embedbase,
-embedsemantic, filetools, find, flash, forms, iframe, iframedialog, image, image2, language,
-lineutils, link, liststyle, magicline, mathjax, menubutton, notification, notificationaggregator,
-pagebreak, pastefromword, placeholder, preview, scayt, sharedspace, showblocks, smiley,
-sourcedialog, specialchar, stylesheetparser, table, tableresize, tabletools, templates, uicolor,
-uploadimage, uploadwidget, widget, wsc, xml
+```
+# activate the venv
+source venv/bin/activate
+# install the local django-ckeditor-5
+# replace ../django-ckeditor-5 with the correct path if its not in the parent
+# directory
+pip install -e ../django-ckeditor-5
+```

From 010c49f2f8ba9b840b12bff57228e2d8b4875c61 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Wed, 13 Mar 2024 09:36:12 +0100
Subject: [PATCH 05/14] ckeditor5: use user language

---
 adhocracy-plus/config/settings/base.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/adhocracy-plus/config/settings/base.py b/adhocracy-plus/config/settings/base.py
index 139688ec6..5d54ddd6b 100644
--- a/adhocracy-plus/config/settings/base.py
+++ b/adhocracy-plus/config/settings/base.py
@@ -553,14 +553,17 @@
 CELERY_RESULT_EXTENDED = True
 
 # CKEditor config
-CKEDITOR_UPLOAD_PATH = "uploads/"  # to be removed after django upgrade and ckeditor_uploader removal
+CKEDITOR_UPLOAD_PATH = (
+    "uploads/"  # to be removed after django upgrade and ckeditor_uploader removal
+)
 CKEDITOR_5_FILE_STORAGE = "adhocracy4.ckeditor.storage.CustomStorage"
 CKEDITOR_5_PATH_FROM_USERNAME = True
 CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True
 CKEDITOR_5_UPLOAD_FILE_TYPES = ["jpg", "jpeg", "png", "gif", "pdf", "docx"]
+CKEDITOR_5_USER_LANGUAGE = True
 CKEDITOR_5_CONFIGS = {
     "default": {
-        "language": "de",
+        "language": ["de", "en", "nl", "ky", "ru"],
         "toolbar": [
             "bold",
             "italic",
@@ -580,7 +583,6 @@
         "link": {"defaultProtocol": "https://"},
     },
     "image-editor": {
-        "language": "de",
         "toolbar": {
             "items": [
                 "bold",
@@ -617,7 +619,6 @@
         "link": {"defaultProtocol": "https://"},
     },
     "collapsible-image-editor": {
-        "language": "de",
         "toolbar": [
             "bold",
             "italic",
@@ -666,7 +667,6 @@
         },
     },
     "video-editor": {
-        "language": "de",
         "toolbar": ["mediaEmbed"],
         "mediaEmbed": {
             "removeProviders": [

From 0139d60ea03fcefe11935c7796cdf6a716916cb3 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Wed, 13 Mar 2024 09:36:36 +0100
Subject: [PATCH 06/14] FIXUP: add missing bracket back in

---
 adhocracy-plus/assets/js/app.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/adhocracy-plus/assets/js/app.js b/adhocracy-plus/assets/js/app.js
index d9df2e814..c46e1fc9c 100644
--- a/adhocracy-plus/assets/js/app.js
+++ b/adhocracy-plus/assets/js/app.js
@@ -67,6 +67,7 @@ function init () {
   if ($.fn.select2) {
     $('.js-select2').select2()
   }
+}
 
 document.addEventListener('DOMContentLoaded', init, false)
 

From c58a806a04aab6ab8339372793aca54cd028bfba Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Wed, 13 Mar 2024 09:42:56 +0100
Subject: [PATCH 07/14] FIXUP: fix urls

---
 adhocracy-plus/config/settings/base.py |  7 +------
 adhocracy-plus/config/urls.py          | 17 +++++------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/adhocracy-plus/config/settings/base.py b/adhocracy-plus/config/settings/base.py
index 5d54ddd6b..c473856cb 100644
--- a/adhocracy-plus/config/settings/base.py
+++ b/adhocracy-plus/config/settings/base.py
@@ -35,8 +35,6 @@
     "allauth.socialaccount",
     "rules.apps.AutodiscoverRulesConfig",
     "easy_thumbnails",
-    "ckeditor",
-    "ckeditor_uploader",
     "parler",
     # Wagtail cms components
     "wagtail.contrib.forms",
@@ -552,10 +550,7 @@
 CELERY_BROKER_CONNECTION_RETRY_ON_STARTUP = True
 CELERY_RESULT_EXTENDED = True
 
-# CKEditor config
-CKEDITOR_UPLOAD_PATH = (
-    "uploads/"  # to be removed after django upgrade and ckeditor_uploader removal
-)
+# CKEditor5 config
 CKEDITOR_5_FILE_STORAGE = "adhocracy4.ckeditor.storage.CustomStorage"
 CKEDITOR_5_PATH_FROM_USERNAME = True
 CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True
diff --git a/adhocracy-plus/config/urls.py b/adhocracy-plus/config/urls.py
index 1dcf99880..b78877168 100644
--- a/adhocracy-plus/config/urls.py
+++ b/adhocracy-plus/config/urls.py
@@ -1,16 +1,15 @@
 """adhocracy+ URL Configuration."""
 
-from ckeditor_uploader import views as ck_views
 from django.conf import settings
 from django.conf.urls import i18n
 from django.contrib import admin
 from django.urls import include
 from django.urls import path
 from django.urls import re_path
-from django.views.decorators.cache import never_cache
 from django.views.defaults import server_error
 from django.views.generic import TemplateView
 from django.views.i18n import JavaScriptCatalog
+from django_ckeditor_5 import views as ckeditor5_views
 from rest_framework import routers
 from rest_framework.authtoken.views import obtain_auth_token
 from wagtail.contrib.sitemaps.views import sitemap as wagtail_sitemap
@@ -107,13 +106,10 @@
     re_path(r"^api/", include(router.urls)),
     re_path(r"^api/login", obtain_auth_token, name="api-login"),
     re_path(r"^api/account/", AccountViewSet.as_view(), name="api-account"),
-    re_path(
-        r"^upload/", user_is_project_admin(ck_views.upload), name="ckeditor_upload"
-    ),
-    re_path(
-        r"^browse/",
-        never_cache(user_is_project_admin(ck_views.browse)),
-        name="ckeditor_browse",
+    path(
+        "ckeditor5/image_upload/",
+        user_is_project_admin(ckeditor5_views.upload_file),
+        name="ck_editor_5_upload_file",
     ),
     re_path(r"^components/$", contrib_views.ComponentLibraryView.as_view()),
     re_path(r"^jsi18n/$", JavaScriptCatalog.as_view(), name="javascript-catalog"),
@@ -176,9 +172,6 @@
             ]
         ),
     ),
-    path(
-        "ckeditor5/", include("django_ckeditor_5.urls"), name="ck_editor_5_upload_file"
-    ),
     path("sitemap.xml", static_sitemap_index, name="static-sitemap-index"),
     path("sitemap-wagtail.xml", wagtail_sitemap, name="wagtail-sitemap"),
     path(

From 817e4f108df1d30f890ebcce49ff8c26df5dd832 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Wed, 13 Mar 2024 14:16:33 +0100
Subject: [PATCH 08/14] fixup

---
 apps/organisations/forms.py | 13 ++++++++-----
 apps/topicprio/forms.py     |  3 ---
 docs/ckeditor.md            |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/organisations/forms.py b/apps/organisations/forms.py
index e7cd14a51..54c6239d5 100644
--- a/apps/organisations/forms.py
+++ b/apps/organisations/forms.py
@@ -101,7 +101,6 @@
 
 
 class OrganisationForm(forms.ModelForm):
-
     translated_fields = [
         (
             "description",
@@ -138,9 +137,6 @@ class OrganisationForm(forms.ModelForm):
             CKEditor5Widget,
             {
                 "config_name": "collapsible-image-editor",
-                "label": OrganisationTranslation._meta.get_field(
-                    "information"
-                ).verbose_name,
                 "help_text": OrganisationTranslation._meta.get_field(
                     "information"
                 ).help_text,
@@ -175,6 +171,14 @@ def __init__(self, *args, **kwargs):
             for name, field_cls, kwargs in self.translated_fields:
                 self.instance.set_current_language(lang_code)
                 field = field_cls(**kwargs)
+                # The CKEditor5Widget doesn't have a label field, so we need to set it
+                # after creating the object
+                if isinstance(field, CKEditor5Widget):
+                    field.label = (
+                        OrganisationTranslation._meta.get_field(
+                            "information"
+                        ).verbose_name,
+                    )
                 identifier = self._get_identifier(lang_code, name)
                 field.required = False
 
@@ -297,7 +301,6 @@ def __init__(self, organisation=None, *args, **kwargs):
 
 
 class CommunicationContentCreationForm(forms.Form):
-
     sizes = None
 
     def __init__(self, project=None, format=None, *args, **kwargs):
diff --git a/apps/topicprio/forms.py b/apps/topicprio/forms.py
index 26f456e09..71142dcb1 100644
--- a/apps/topicprio/forms.py
+++ b/apps/topicprio/forms.py
@@ -5,7 +5,6 @@
 from adhocracy4.categories.forms import CategorizableFieldMixin
 from adhocracy4.images.validators import ImageAltTextValidator
 from adhocracy4.labels.mixins import LabelsAddableFieldMixin
-from apps.contrib.widgets import Select2Widget
 
 from . import models
 
@@ -13,7 +12,6 @@
 class TopicForm(
     CategorizableFieldMixin,
     LabelsAddableFieldMixin,
-#    CategoryAndLabelAliasMixin,
     forms.ModelForm,
 ):
     description = CKEditor5Field(
@@ -27,7 +25,6 @@ def __init__(self, *args, **kwargs):
     class Meta:
         model = models.Topic
         fields = ["name", "description", "category", "labels"]
-        widgets = {"category": Select2Widget(attrs={"class": "select2__no-search"})}
         help_texts = {
             "description": _(
                 "If you add an image, please provide an alternate text. "
diff --git a/docs/ckeditor.md b/docs/ckeditor.md
index 579e93702..08f854362 100644
--- a/docs/ckeditor.md
+++ b/docs/ckeditor.md
@@ -5,7 +5,7 @@ adhocracy4.
 
 # Local Testing
 
-To test mb with a local version of django-ckeditor-5 you need to follow these
+To test aplus with a local version of django-ckeditor-5 you need to follow these
 steps:
 
 ```
@@ -19,7 +19,7 @@ npm install
 npm run dev
 ```
 
-Now in mb, do the folowing:
+Now in aplus, do the folowing:
 
 ```
 # activate the venv

From 05ec9992f1ea82a2bf98d8044cc577c17842dbf3 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Thu, 14 Mar 2024 13:06:34 +0100
Subject: [PATCH 09/14] FIXUP: add migrations for new iframe format, replace
 RichtextCollapsible*Field with CKEditor5Field"

---
 .../migrations/0002_ckeditor_iframes.py       | 35 ++++++++++++++++++
 .../0003_alter_activity_description.py        | 18 +++++++++
 apps/activities/models.py                     |  4 +-
 .../migrations/0005_ckeditor_iframes.py       | 37 +++++++++++++++++++
 ...extrafieldsinteractiveevent_live_stream.py | 20 ++++++++++
 apps/interactiveevents/models.py              |  4 +-
 .../migrations/0004_ckeditor_iframes.py       | 35 ++++++++++++++++++
 .../migrations/0022_ckeditor_iframes.py       | 35 ++++++++++++++++++
 ...ter_organisationtranslation_information.py | 22 +++++++++++
 apps/organisations/models.py                  |  4 +-
 10 files changed, 208 insertions(+), 6 deletions(-)
 create mode 100644 apps/activities/migrations/0002_ckeditor_iframes.py
 create mode 100644 apps/activities/migrations/0003_alter_activity_description.py
 create mode 100644 apps/interactiveevents/migrations/0005_ckeditor_iframes.py
 create mode 100644 apps/interactiveevents/migrations/0006_alter_extrafieldsinteractiveevent_live_stream.py
 create mode 100644 apps/offlineevents/migrations/0004_ckeditor_iframes.py
 create mode 100644 apps/organisations/migrations/0022_ckeditor_iframes.py
 create mode 100644 apps/organisations/migrations/0023_alter_organisationtranslation_information.py

diff --git a/apps/activities/migrations/0002_ckeditor_iframes.py b/apps/activities/migrations/0002_ckeditor_iframes.py
new file mode 100644
index 000000000..c6c13f37e
--- /dev/null
+++ b/apps/activities/migrations/0002_ckeditor_iframes.py
@@ -0,0 +1,35 @@
+# 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>'
+    )
+    Activity = apps.get_model("a4_candy_activities", "Activity")
+    for activity in Activity.objects.all():
+        soup = BeautifulSoup(activity.description, "html.parser")
+        iframes = soup.findAll("iframe")
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+        if iframes:
+            activity.live_stream = soup.prettify(formatter="html")
+            activity.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_activities", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            replace_iframe_with_figur,
+        ),
+    ]
diff --git a/apps/activities/migrations/0003_alter_activity_description.py b/apps/activities/migrations/0003_alter_activity_description.py
new file mode 100644
index 000000000..195613599
--- /dev/null
+++ b/apps/activities/migrations/0003_alter_activity_description.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.19 on 2024-03-14 12:05
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_activities", "0002_ckeditor_iframes"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="activity",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(verbose_name="Description"),
+        ),
+    ]
diff --git a/apps/activities/models.py b/apps/activities/models.py
index bde2cf15b..84c52cdc7 100644
--- a/apps/activities/models.py
+++ b/apps/activities/models.py
@@ -1,9 +1,9 @@
 from autoslug import AutoSlugField
 from django.db import models
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms as html_transforms
-from adhocracy4.ckeditor.fields import RichTextCollapsibleUploadingField
 from adhocracy4.modules import models as module_models
 
 
@@ -18,7 +18,7 @@ class Activity(module_models.Item):
             "or location of your face-to-face event"
         ),
     )
-    description = RichTextCollapsibleUploadingField(
+    description = CKEditor5Field(
         config_name="collapsible-image-editor", verbose_name=_("Description")
     )
 
diff --git a/apps/interactiveevents/migrations/0005_ckeditor_iframes.py b/apps/interactiveevents/migrations/0005_ckeditor_iframes.py
new file mode 100644
index 000000000..221671b63
--- /dev/null
+++ b/apps/interactiveevents/migrations/0005_ckeditor_iframes.py
@@ -0,0 +1,37 @@
+# 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>'
+    )
+    InteractiveEvent = apps.get_model(
+        "a4_candy_interactive_events", "ExtraFieldsInteractiveEvent"
+    )
+    for interactiveEvent in InteractiveEvent.objects.all():
+        soup = BeautifulSoup(interactiveEvent.live_stream, "html.parser")
+        iframes = soup.findAll("iframe")
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+        if iframes:
+            interactiveEvent.live_stream = soup.prettify(formatter="html")
+            interactiveEvent.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_interactive_events", "0004_verbose_name_created_modified"),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            replace_iframe_with_figur,
+        ),
+    ]
diff --git a/apps/interactiveevents/migrations/0006_alter_extrafieldsinteractiveevent_live_stream.py b/apps/interactiveevents/migrations/0006_alter_extrafieldsinteractiveevent_live_stream.py
new file mode 100644
index 000000000..b170ca934
--- /dev/null
+++ b/apps/interactiveevents/migrations/0006_alter_extrafieldsinteractiveevent_live_stream.py
@@ -0,0 +1,20 @@
+# Generated by Django 3.2.19 on 2024-03-14 12:05
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_interactive_events", "0005_ckeditor_iframes"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="extrafieldsinteractiveevent",
+            name="live_stream",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True, verbose_name="Live Stream"
+            ),
+        ),
+    ]
diff --git a/apps/interactiveevents/models.py b/apps/interactiveevents/models.py
index 53bef5edc..4d848ac16 100644
--- a/apps/interactiveevents/models.py
+++ b/apps/interactiveevents/models.py
@@ -2,10 +2,10 @@
 from django.db import models
 from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
 from adhocracy4.categories.fields import CategoryField
-from adhocracy4.ckeditor.fields import RichTextCollapsibleUploadingField
 from adhocracy4.images.fields import ConfiguredImageField
 from adhocracy4.models.base import TimeStampedModel
 from adhocracy4.modules import models as module_models
@@ -70,7 +70,7 @@ class Meta:
 
 
 class ExtraFieldsInteractiveEvent(module_models.Item):
-    live_stream = RichTextCollapsibleUploadingField(
+    live_stream = CKEditor5Field(
         verbose_name="Live Stream", blank=True, config_name="video-editor"
     )
 
diff --git a/apps/offlineevents/migrations/0004_ckeditor_iframes.py b/apps/offlineevents/migrations/0004_ckeditor_iframes.py
new file mode 100644
index 000000000..a247c644e
--- /dev/null
+++ b/apps/offlineevents/migrations/0004_ckeditor_iframes.py
@@ -0,0 +1,35 @@
+# 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>'
+    )
+    OfflineEvent = apps.get_model("a4_candy_offlineevents", "OfflineEvent")
+    for offlineEvent in OfflineEvent.objects.all():
+        soup = BeautifulSoup(offlineEvent.description, "html.parser")
+        iframes = soup.findAll("iframe")
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+        if iframes:
+            offlineEvent.live_stream = soup.prettify(formatter="html")
+            offlineEvent.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_offlineevents", "0003_auto_20240229_1203"),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            replace_iframe_with_figur,
+        ),
+    ]
diff --git a/apps/organisations/migrations/0022_ckeditor_iframes.py b/apps/organisations/migrations/0022_ckeditor_iframes.py
new file mode 100644
index 000000000..c4c7200f2
--- /dev/null
+++ b/apps/organisations/migrations/0022_ckeditor_iframes.py
@@ -0,0 +1,35 @@
+# 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>'
+    )
+    Organisation = apps.get_model("a4_candy_organisations", "Organisation")
+    for organisation in Organisation.objects.all():
+        soup = BeautifulSoup(organisation.description, "html.parser")
+        iframes = soup.findAll("iframe")
+        for iframe in iframes:
+            figure = BeautifulSoup(
+                template.format(url=iframe.attrs["src"]), "html.parser"
+            )
+            iframe.replaceWith(figure)
+        if iframes:
+            organisation.description = soup.prettify(formatter="html")
+            organisation.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_organisations", "0021_alter_organisation_logo"),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            replace_iframe_with_figur,
+        ),
+    ]
diff --git a/apps/organisations/migrations/0023_alter_organisationtranslation_information.py b/apps/organisations/migrations/0023_alter_organisationtranslation_information.py
new file mode 100644
index 000000000..59e928cb7
--- /dev/null
+++ b/apps/organisations/migrations/0023_alter_organisationtranslation_information.py
@@ -0,0 +1,22 @@
+# Generated by Django 3.2.19 on 2024-03-14 12:05
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_organisations", "0022_ckeditor_iframes"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="organisationtranslation",
+            name="information",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text='You can provide general information about your participation platform to your visitors. It’s also helpful to name a general person of contact for inquiries. The information will be shown on a separate "About" page that can be reached via the main menu.',
+                verbose_name="Information about your organisation",
+            ),
+        ),
+    ]
diff --git a/apps/organisations/models.py b/apps/organisations/models.py
index fc3d685ab..bc544f9d4 100644
--- a/apps/organisations/models.py
+++ b/apps/organisations/models.py
@@ -7,12 +7,12 @@
 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 jsonfield.fields import JSONField
 from parler.models import TranslatableModel
 from parler.models import TranslatedFields
 
 from adhocracy4 import transforms
-from adhocracy4.ckeditor.fields import RichTextCollapsibleUploadingField
 from adhocracy4.images import fields as images_fields
 from adhocracy4.projects.models import Project
 from apps.projects import query
@@ -55,7 +55,7 @@ class Organisation(TranslatableModel):
             ),
             blank=True,
         ),
-        information=RichTextCollapsibleUploadingField(
+        information=CKEditor5Field(
             config_name="collapsible-image-editor",
             verbose_name=_("Information about your organisation"),
             help_text=_(

From 2d1f7bb378975420a560aaf0dce748da4695514d Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Mon, 25 Mar 2024 10:18:50 +0100
Subject: [PATCH 10/14] apps/documents: adjust to new ckeditor5

---
 adhocracy-plus/assets/scss/_form.scss         |   6 +
 apps/documents/assets/ChapterForm.jsx         |  33 ++--
 apps/documents/assets/DocumentManagement.jsx  |   3 +
 apps/documents/assets/ParagraphForm.jsx       | 168 +++++++++---------
 .../documents/assets/react_documents_init.jsx |  35 ++--
 .../a4_candy_documents/chapter_detail.html    |   6 +-
 .../document_dashboard.html                   |  10 +-
 .../a4_candy_documents/react_documents.html   |  13 --
 .../documents/templatetags/react_documents.py |  33 ++--
 apps/documents/views.py                       |   7 +
 10 files changed, 164 insertions(+), 150 deletions(-)
 delete mode 100644 apps/documents/templates/a4_candy_documents/react_documents.html

diff --git a/adhocracy-plus/assets/scss/_form.scss b/adhocracy-plus/assets/scss/_form.scss
index 3f999b897..ab3e131bd 100644
--- a/adhocracy-plus/assets/scss/_form.scss
+++ b/adhocracy-plus/assets/scss/_form.scss
@@ -12,6 +12,7 @@ label {
     border-radius: 0;
 }
 
+
 textarea,
 select,
 input {
@@ -86,6 +87,11 @@ div.cke_focus {
         // adhocracy4 core).
         margin-bottom: 0;
     }
+
+    // hide ckeditor input field
+    .django-ckeditor-widget textarea {
+        display: none;
+    }
 }
 
 .form-fieldset {
diff --git a/apps/documents/assets/ChapterForm.jsx b/apps/documents/assets/ChapterForm.jsx
index caa0bdf2d..6136cd69e 100644
--- a/apps/documents/assets/ChapterForm.jsx
+++ b/apps/documents/assets/ChapterForm.jsx
@@ -28,20 +28,25 @@ const ChapterForm = (props) => {
           props.chapter.paragraphs.map(function (paragraph, index, arr) {
             const key = paragraph.id || paragraph.key
             return (
-              <ParagraphForm
-                id={key}
-                key={key}
-                index={index}
-                paragraph={paragraph}
-                config={props.config}
-                onDelete={() => { props.onParagraphDelete(index) }}
-                onMoveUp={index !== 0 ? () => { props.onParagraphMoveUp(index) } : null}
-                onMoveDown={index < arr.length - 1 ? () => { props.onParagraphMoveDown(index) } : null}
-                onParagraphAddBefore={() => { props.onParagraphAddBefore(index) }}
-                onNameChange={(name) => { props.onParagraphNameChange(index, name) }}
-                onTextChange={(text) => { props.onParagraphTextChange(index, text) }}
-                errors={props.errors && props.errors.paragraphs ? props.errors.paragraphs[index] : {}}
-              />
+              <div key={key}>
+                <ParagraphForm
+                  id={key}
+                  key={key}
+                  index={index}
+                  paragraph={paragraph}
+                  csrfCookieName={props.csrfCookieName}
+                  uploadUrl={props.uploadUrl}
+                  uploadFileTypes={props.uploadFileTypes}
+                  config={props.config}
+                  onDelete={() => { props.onParagraphDelete(index) }}
+                  onMoveUp={index !== 0 ? () => { props.onParagraphMoveUp(index) } : null}
+                  onMoveDown={index < arr.length - 1 ? () => { props.onParagraphMoveDown(index) } : null}
+                  onParagraphAddBefore={() => { props.onParagraphAddBefore(index) }}
+                  onNameChange={(name) => { props.onParagraphNameChange(index, name) }}
+                  onTextChange={(text) => { props.onParagraphTextChange(index, text) }}
+                  errors={props.errors && props.errors.paragraphs ? props.errors.paragraphs[index] : {}}
+                />
+              </div>
             )
           })
         }
diff --git a/apps/documents/assets/DocumentManagement.jsx b/apps/documents/assets/DocumentManagement.jsx
index 61c786eeb..64bceef60 100644
--- a/apps/documents/assets/DocumentManagement.jsx
+++ b/apps/documents/assets/DocumentManagement.jsx
@@ -314,6 +314,9 @@ class DocumentManagement extends React.Component {
           onParagraphMoveUp={(paragraphIndex) => { this.handleParagraphMoveUp(chapterIndex, paragraphIndex) }}
           onParagraphMoveDown={(paragraphIndex) => { this.handleParagraphMoveDown(chapterIndex, paragraphIndex) }}
           onParagraphDelete={(paragraphIndex) => { this.handleParagraphDelete(chapterIndex, paragraphIndex) }}
+          csrfCookieName={this.props.csrfCookieName}
+          uploadUrl={this.props.uploadUrl}
+          uploadFileTypes={this.props.uploadFileTypes}
           config={this.props.config}
           chapter={chapter}
           errors={chapterErrors}
diff --git a/apps/documents/assets/ParagraphForm.jsx b/apps/documents/assets/ParagraphForm.jsx
index f171fb178..73c651805 100644
--- a/apps/documents/assets/ParagraphForm.jsx
+++ b/apps/documents/assets/ParagraphForm.jsx
@@ -1,14 +1,6 @@
-const React = require('react')
-const django = require('django')
-const FormFieldError = require('adhocracy4/adhocracy4/static/FormFieldError')
-
-const ckGet = function (id) {
-  return window.CKEDITOR.instances[id]
-}
-
-const ckReplace = function (id, config) {
-  return window.CKEDITOR.replace(id, config)
-}
+import React, { useRef, useEffect } from 'react'
+import django from 'django'
+import FormFieldError from 'adhocracy4/adhocracy4/static/FormFieldError'
 
 // translations
 const translations = {
@@ -25,75 +17,90 @@ const translations = {
   )
 }
 
-class ParagraphForm extends React.Component {
-  handleNameChange (e) {
-    const name = e.target.value
-    this.props.onNameChange(name)
-  }
+const ParagraphForm = (props) => {
+  const editor = useRef(null)
+  const index = useRef(props.index)
+  const id = 'id_paragraphs-' + props.id + '-text'
 
-  ckId () {
-    return 'id_paragraphs-' + this.props.id + '-text'
-  }
-
-  ckEditorDestroy () {
-    const editor = ckGet(this.ckId())
-    if (editor) {
-      editor.destroy()
+  useEffect(() => {
+    // destroy if component renders multiple times to prevent
+    // multiple CKEditors
+    let destroy = false
+    const createEditor = async () => {
+      const config = window.ckeditorPrepareConfig(
+        JSON.stringify(props.config),
+        props.csrfCookieName,
+        props.uploadUrl,
+        props.uploadFileTypes
+      )
+      const ckeditor = await window.ClassicEditor.create(
+        document.querySelector('#' + id),
+        config
+      )
+      if (destroy) {
+        ckeditor.destroy()
+      } else {
+        editor.current = ckeditor
+        editor.current.model.document.on('change:data', (e) => {
+          const text = editor.current.getData()
+          props.onTextChange(text)
+        })
+        editor.current.setData(props.paragraph.text)
+      }
     }
-  }
-
-  ckEditorCreate () {
-    if (!ckGet(this.ckId())) {
-      const editor = ckReplace(this.ckId(), this.props.config)
-      editor.on('change', function (e) {
-        const text = e.editor.getData()
-        this.props.onTextChange(text)
-      }.bind(this))
-      editor.setData(this.props.paragraph.text)
+    if (editor.current) {
+      if (index.current !== props.index) {
+        // recreate if index changed
+        destroyEditor()
+      }
     }
-  }
-
-  UNSAFE_componentWillUpdate (nextProps) {
-    if (nextProps.index > this.props.index) {
-      this.ckEditorDestroy()
+    index.current = props.index
+    if (!editor.current) {
+      createEditor()
+      return () => {
+        // destroy if still in process of creating
+        destroy = true
+        // destroy if already created
+        destroyEditor()
+      }
     }
-  }
+  }, [props.index])
 
-  componentDidUpdate (prevProps) {
-    if (this.props.index > prevProps.index) {
-      this.ckEditorCreate()
+  const destroyEditor = () => {
+    if (editor.current) {
+      editor.current.destroy()
+      editor.current = null
     }
   }
-
-  componentDidMount () {
-    this.ckEditorCreate()
-  }
-
-  componentWillUnmount () {
-    this.ckEditorDestroy()
+  const handleNameChange = (e) => {
+    const name = e.target.value
+    props.onNameChange(name)
   }
 
-  render () {
-    const ckEditorToolbarsHeight = 60 // measured on example editor
-    return (
-      <section className="commenting">
-        <div className="commenting__content">
+  return (
+    <section>
+      <div className="row">
+        <div className="col-lg-9">
           <div className="commenting__content--border">
             <div className="form-group">
-              <label
-                htmlFor={'id_paragraphs-' + this.props.id + '-name'}
-              >
+              <label htmlFor={'id_paragraphs-' + props.id + '-name'}>
                 {translations.headline}
                 <input
                   className="form-control"
-                  id={'id_paragraphs-' + this.props.id + '-name'}
-                  name={'paragraphs-' + this.props.id + '-name'}
+                  id={'id_paragraphs-' + props.id + '-name'}
+                  name={'paragraphs-' + props.id + '-name'}
                   type="text"
-                  value={this.props.paragraph.name}
-                  onChange={this.handleNameChange.bind(this)}
+                  value={props.paragraph.name}
+                  onChange={handleNameChange}
+                  aria-invalid={props.errors ? 'true' : 'false'}
+                  aria-describedby={props.errors && 'id_error-' + props.id}
+                />
+                <FormFieldError
+                  id={'id_error-' + props.id}
+                  error={props.errors}
+                  field="name"
                 />
               </label>
-              <FormFieldError id={'id_error-' + this.props.id} error={this.props.errors} field="name" />
             </div>
 
             <div className="form-group">
@@ -107,7 +114,7 @@ class ParagraphForm extends React.Component {
                 </div>
                 <div
                   className="django-ckeditor-widget"
-                  data-field-id={'id_paragraphs-' + this.props.id + '-text'}
+                  data-field-id={'id_paragraphs-' + props.id + '-text'}
                   style={{ display: 'inline-block' }}
                 >
                   <textarea
@@ -119,28 +126,30 @@ class ParagraphForm extends React.Component {
                     }
                   />
                 </div>
+                <FormFieldError
+                  id={'id_error-' + props.id}
+                  error={props.errors}
+                  field="text"
+                />
               </label>
-              <FormFieldError id={'id_error-' + this.props.id} error={this.props.errors} field="text" />
             </div>
           </div>
         </div>
+
         <div className="commenting__actions btn-group" role="group">
           <button
             className="btn btn--light btn--small"
-            onClick={this.props.onMoveUp}
-            disabled={!this.props.onMoveUp}
+            onClick={props.onMoveUp}
+            disabled={!props.onMoveUp}
             title={translations.moveUp}
             type="button"
           >
-            <i
-              className="fa fa-chevron-up"
-              aria-label={translations.moveUp}
-            />
+            <i className="fa fa-chevron-up" aria-label={translations.moveUp} />
           </button>
           <button
             className="btn btn--light btn--small"
-            onClick={this.props.onMoveDown}
-            disabled={!this.props.onMoveDown}
+            onClick={props.onMoveDown}
+            disabled={!props.onMoveDown}
             title={translations.moveDown}
             type="button"
           >
@@ -151,19 +160,16 @@ class ParagraphForm extends React.Component {
           </button>
           <button
             className="btn btn--light btn--small"
-            onClick={this.props.onDelete}
+            onClick={props.onDelete}
             title={translations.delete}
             type="button"
           >
-            <i
-              className="far fa-trash-alt"
-              aria-label={translations.delete}
-            />
+            <i className="fas fa-trash-alt" aria-label={translations.delete} />
           </button>
         </div>
-      </section>
-    )
-  }
+      </div>
+    </section>
+  )
 }
 
 module.exports = ParagraphForm
diff --git a/apps/documents/assets/react_documents_init.jsx b/apps/documents/assets/react_documents_init.jsx
index 076bc3dcb..3c874b57c 100644
--- a/apps/documents/assets/react_documents_init.jsx
+++ b/apps/documents/assets/react_documents_init.jsx
@@ -1,32 +1,19 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import DocumentManagement from './DocumentManagement'
 import { widget as ReactWidget } from 'adhocracy4'
 
-function init () {
-  ReactWidget.initialise('mb', 'document-management',
-    function (el) {
-      const chapters = JSON.parse(el.dataset.chapters)
-      const module = el.dataset.module
-      const config = JSON.parse(el.dataset.config)
-
-      // used getAttribute as returns string that can be parsed as json
-      const reloadOnSuccess = JSON.parse(el.getAttribute('data-reloadOnSuccess'))
+import DocumentManagement from './DocumentManagement'
 
-      const root = createRoot(el)
-      root.render(
-        <React.StrictMode>
-          <DocumentManagement
-            key={module}
-            module={module}
-            chapters={chapters}
-            config={config}
-            reloadOnSuccess={reloadOnSuccess}
-          />
-        </React.StrictMode>
-      )
-    }
-  )
+function init () {
+  ReactWidget.initialise('mb', 'document-management', (el) => {
+    const props = JSON.parse(el.dataset.attributes)
+    const root = createRoot(el)
+    root.render(
+      <React.StrictMode>
+        <DocumentManagement {...props} />
+      </React.StrictMode>
+    )
+  })
 }
 
 document.addEventListener('DOMContentLoaded', init, false)
diff --git a/apps/documents/templates/a4_candy_documents/chapter_detail.html b/apps/documents/templates/a4_candy_documents/chapter_detail.html
index 65f74e5ff..a8995469f 100644
--- a/apps/documents/templates/a4_candy_documents/chapter_detail.html
+++ b/apps/documents/templates/a4_candy_documents/chapter_detail.html
@@ -38,13 +38,13 @@ <h2 class="chapter-title">{{ object.name }}</h2>
                         {% for paragraph in object.paragraphs.all %}
 
                             <section class="paragraph" id="paragraph-{{ object.pk }}-{{ paragraph.pk }}">
-                                <div class="paragraph__content ck-content">
+                                <div class="paragraph__content">
                                     <h3 class="paragraph__title">
                                         {{ paragraph.name }}
                                     </h3>
-				    <div class="ck-content">
+                                    <div class="ck-content">
                                         {{ paragraph.text|richtext }}
-				    </div>
+                                    </div>
                                 </div>
                                 <div class="paragraph__actions">
                                     <a
diff --git a/apps/documents/templates/a4_candy_documents/document_dashboard.html b/apps/documents/templates/a4_candy_documents/document_dashboard.html
index 5ebf8b719..2f3e7947f 100644
--- a/apps/documents/templates/a4_candy_documents/document_dashboard.html
+++ b/apps/documents/templates/a4_candy_documents/document_dashboard.html
@@ -8,7 +8,15 @@ <h1 class="mt-0">{% translate 'Edit document' %}</h1>
 
 {% endblock %}
 
+
+{% block extra_css %}
+    {{ block.super }}
+    {# include ckeditor css from widget, comes as link tag #}
+    {{ ckeditor_media.css }}
+{% endblock %}
 {% block extra_js %}
-  {{ block.super }}
+    {{ block.super }}
+    {# include ckeditor js from widget, comes as script tag #}
+    {{ ckeditor_media.js }}
     <script type="text/javascript" src="{% static 'documents.js' %}"></script>
 {% endblock %}
diff --git a/apps/documents/templates/a4_candy_documents/react_documents.html b/apps/documents/templates/a4_candy_documents/react_documents.html
deleted file mode 100644
index 72af75380..000000000
--- a/apps/documents/templates/a4_candy_documents/react_documents.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% load static %}
-
-{{ ckeditor_media.js }}
-
-
-<div
-  data-mb-widget="document-management"
-  data-module="{{ module }}"
-  data-chapters="{{ chapters }}"
-  data-config="{{ config }}"
-  data-reloadOnSuccess="{{ reload_on_success }}"
->
-</div>
diff --git a/apps/documents/templatetags/react_documents.py b/apps/documents/templatetags/react_documents.py
index 9dc905256..706e2457a 100644
--- a/apps/documents/templatetags/react_documents.py
+++ b/apps/documents/templatetags/react_documents.py
@@ -1,8 +1,10 @@
 import json
 
-from django_ckeditor_5.widgets import CKEditor5Widget
 from django import template
-from rest_framework.renderers import JSONRenderer
+from django.conf import settings
+from django.urls import reverse
+from django.utils.html import format_html
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from apps.documents.models import Chapter
 from apps.documents.serializers import ChapterSerializer
@@ -10,23 +12,26 @@
 register = template.Library()
 
 
-@register.inclusion_tag("a4_candy_documents/react_documents.html", takes_context=True)
-def react_documents(context, module, reload_on_success=False):
+@register.simple_tag()
+def react_documents(module, reload_on_success=False):
     chapters = Chapter.objects.filter(module=module)
     serializer = ChapterSerializer(chapters, many=True)
-    chapters_json = JSONRenderer().render(serializer.data).decode("utf-8")
-
     widget = CKEditor5Widget(config_name="image-editor")
-    widget._set_config()
-    config = JSONRenderer().render(widget.config).decode("utf-8")
 
-    context = {
-        "chapters": chapters_json,
+    attributes = {
+        "key": module.pk,
+        "chapters": serializer.data,
         "module": module.pk,
-        "config": config,
+        "config": widget.config,
+        "csrfCookieName": settings.CSRF_COOKIE_NAME,  # double check
+        "uploadUrl": reverse("ck_editor_5_upload_file"),
+        "uploadFileTypes": settings.CKEDITOR_5_UPLOAD_FILE_TYPES,
         "id": "document-" + str(module.id),
-        "reload_on_success": json.dumps(reload_on_success),
-        "ckeditor_media": widget.media,
+        "reload_on_success": reload_on_success,
     }
 
-    return context
+    return format_html(
+        '<div data-mb-widget="document-management" '
+        'data-attributes="{attributes}"></div>',
+        attributes=json.dumps(attributes),
+    )
diff --git a/apps/documents/views.py b/apps/documents/views.py
index 293d483a9..458ff873c 100644
--- a/apps/documents/views.py
+++ b/apps/documents/views.py
@@ -3,6 +3,7 @@
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 from django.views import generic
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from adhocracy4.dashboard import mixins as dashboard_mixins
 from adhocracy4.exports.views import DashboardExportView
@@ -25,6 +26,12 @@ class DocumentDashboardView(
     def get_permission_object(self):
         return self.project
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        widget = CKEditor5Widget(config_name="image-editor")
+        context["ckeditor_media"] = widget.media
+        return context
+
 
 class ChapterDetailView(
     ProjectMixin,

From 9cc7bfb95b736048a870e36f7798c8e0993a0956 Mon Sep 17 00:00:00 2001
From: Julian Dehm <j.dehm@liqd.net>
Date: Mon, 25 Mar 2024 10:19:18 +0100
Subject: [PATCH 11/14] apps/organisation: add migration for ckeditor iframes

---
 apps/organisations/migrations/0022_ckeditor_iframes.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/organisations/migrations/0022_ckeditor_iframes.py b/apps/organisations/migrations/0022_ckeditor_iframes.py
index c4c7200f2..e12b7094f 100644
--- a/apps/organisations/migrations/0022_ckeditor_iframes.py
+++ b/apps/organisations/migrations/0022_ckeditor_iframes.py
@@ -2,6 +2,7 @@
 
 from bs4 import BeautifulSoup
 from django.db import migrations
+from django.utils import translation
 
 
 def replace_iframe_with_figur(apps, schema_editor):
@@ -10,6 +11,8 @@ def replace_iframe_with_figur(apps, schema_editor):
         '{url}"></iframe></div></div></figure>'
     )
     Organisation = apps.get_model("a4_candy_organisations", "Organisation")
+    translation.activate("en")
+
     for organisation in Organisation.objects.all():
         soup = BeautifulSoup(organisation.description, "html.parser")
         iframes = soup.findAll("iframe")

From 4f1f118ec1cce573f1764250310a4af64ec989fc Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Tue, 26 Mar 2024 15:25:44 +0200
Subject: [PATCH 12/14] ideas,moderatorfeedback,organisations: replace richtext
 with ckeditor

---
 .../0003_alter_proposal_description.py        | 18 +++++++
 .../migrations/0003_alter_idea_description.py | 18 +++++++
 apps/ideas/models.py                          |  4 +-
 .../0003_alter_mapidea_description.py         | 18 +++++++
 apps/moderatorfeedback/forms.py               |  8 +++
 .../migrations/0006_auto_20240326_1134.py     | 27 ++++++++++
 apps/moderatorfeedback/models.py              | 11 ++---
 apps/organisations/forms.py                   | 20 +++-----
 .../migrations/0024_auto_20240326_1134.py     | 49 +++++++++++++++++++
 apps/organisations/models.py                  |  9 ++--
 tests/newsletters/test_newsletter_views.py    | 15 +++---
 11 files changed, 163 insertions(+), 34 deletions(-)
 create mode 100644 apps/budgeting/migrations/0003_alter_proposal_description.py
 create mode 100644 apps/ideas/migrations/0003_alter_idea_description.py
 create mode 100644 apps/mapideas/migrations/0003_alter_mapidea_description.py
 create mode 100644 apps/moderatorfeedback/migrations/0006_auto_20240326_1134.py
 create mode 100644 apps/organisations/migrations/0024_auto_20240326_1134.py

diff --git a/apps/budgeting/migrations/0003_alter_proposal_description.py b/apps/budgeting/migrations/0003_alter_proposal_description.py
new file mode 100644
index 000000000..c0ffc0b18
--- /dev/null
+++ b/apps/budgeting/migrations/0003_alter_proposal_description.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.19 on 2024-03-26 10:34
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_budgeting", "0002_rename_moderatorfeedback_fields"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="proposal",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(verbose_name="Description"),
+        ),
+    ]
diff --git a/apps/ideas/migrations/0003_alter_idea_description.py b/apps/ideas/migrations/0003_alter_idea_description.py
new file mode 100644
index 000000000..d8f4a012a
--- /dev/null
+++ b/apps/ideas/migrations/0003_alter_idea_description.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.19 on 2024-03-26 10:34
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_ideas", "0002_rename_moderatorfeedback_fields"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="idea",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(verbose_name="Description"),
+        ),
+    ]
diff --git a/apps/ideas/models.py b/apps/ideas/models.py
index c9aa25f32..18ea48680 100644
--- a/apps/ideas/models.py
+++ b/apps/ideas/models.py
@@ -1,10 +1,10 @@
 from autoslug import AutoSlugField
-from ckeditor.fields import RichTextField
 from django.contrib.contenttypes.fields import GenericRelation
 from django.contrib.contenttypes.models import ContentType
 from django.db import models
 from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
 from adhocracy4.categories.fields import CategoryField
@@ -31,7 +31,7 @@ class AbstractIdea(module_models.Item, Moderateable):
     )
     slug = AutoSlugField(populate_from="name", unique=True)
     name = models.CharField(max_length=120, verbose_name=_("Title"))
-    description = RichTextField(verbose_name=_("Description"))
+    description = CKEditor5Field(verbose_name=_("Description"))
     image = ConfiguredImageField(
         "idea_image",
         verbose_name=_("Add image"),
diff --git a/apps/mapideas/migrations/0003_alter_mapidea_description.py b/apps/mapideas/migrations/0003_alter_mapidea_description.py
new file mode 100644
index 000000000..a246a9b99
--- /dev/null
+++ b/apps/mapideas/migrations/0003_alter_mapidea_description.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.19 on 2024-03-26 10:34
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_mapideas", "0002_moderatorfeedback_fields"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="mapidea",
+            name="description",
+            field=django_ckeditor_5.fields.CKEditor5Field(verbose_name="Description"),
+        ),
+    ]
diff --git a/apps/moderatorfeedback/forms.py b/apps/moderatorfeedback/forms.py
index d15b7ab29..6669c5327 100644
--- a/apps/moderatorfeedback/forms.py
+++ b/apps/moderatorfeedback/forms.py
@@ -1,4 +1,5 @@
 from django import forms
+from django.utils.translation import gettext_lazy as _
 
 from . import models
 
@@ -7,3 +8,10 @@ class ModeratorFeedbackForm(forms.ModelForm):
     class Meta:
         model = models.ModeratorFeedback
         fields = ["feedback_text"]
+        help_texts = {
+            "feedback_text": _(
+                "The official feedback will appear below the idea, "
+                "indicating your organisation. The idea provider receives "
+                "a notification."
+            ),
+        }
diff --git a/apps/moderatorfeedback/migrations/0006_auto_20240326_1134.py b/apps/moderatorfeedback/migrations/0006_auto_20240326_1134.py
new file mode 100644
index 000000000..46fe38a5b
--- /dev/null
+++ b/apps/moderatorfeedback/migrations/0006_auto_20240326_1134.py
@@ -0,0 +1,27 @@
+# Generated by Django 3.2.19 on 2024-03-26 10:34
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_moderatorfeedback", "0005_moderatorcommentfeedback"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="moderatorcommentfeedback",
+            name="feedback_text",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True, verbose_name="Moderator feedback"
+            ),
+        ),
+        migrations.AlterField(
+            model_name="moderatorfeedback",
+            name="feedback_text",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True, verbose_name="Official feedback"
+            ),
+        ),
+    ]
diff --git a/apps/moderatorfeedback/models.py b/apps/moderatorfeedback/models.py
index 2ac0bc53e..bc1115a54 100644
--- a/apps/moderatorfeedback/models.py
+++ b/apps/moderatorfeedback/models.py
@@ -1,6 +1,6 @@
-from ckeditor.fields import RichTextField
 from django.db import models
 from django.utils.translation import gettext_lazy as _
+from django_ckeditor_5.fields import CKEditor5Field
 
 from adhocracy4 import transforms
 from adhocracy4.comments.models import Comment
@@ -16,14 +16,9 @@
 
 
 class ModeratorFeedback(UserGeneratedContentModel):
-    feedback_text = RichTextField(
+    feedback_text = CKEditor5Field(
         blank=True,
         verbose_name=_("Official feedback"),
-        help_text=_(
-            "The official feedback will appear below the idea, "
-            "indicating your organisation. The idea provider receives "
-            "a notification."
-        ),
     )
 
     def save(self, *args, **kwargs):
@@ -56,7 +51,7 @@ class Meta:
 
 
 class ModeratorCommentFeedback(UserGeneratedContentModel):
-    feedback_text = RichTextField(
+    feedback_text = CKEditor5Field(
         blank=True,
         verbose_name=_("Moderator feedback"),
     )
diff --git a/apps/organisations/forms.py b/apps/organisations/forms.py
index 54c6239d5..58f06f8f4 100644
--- a/apps/organisations/forms.py
+++ b/apps/organisations/forms.py
@@ -134,14 +134,17 @@ class OrganisationForm(forms.ModelForm):
         ),
         (
             "information",
-            CKEditor5Widget,
+            forms.CharField,
             {
-                "config_name": "collapsible-image-editor",
+                "label": OrganisationTranslation._meta.get_field(
+                    "information"
+                ).verbose_name,
                 "help_text": OrganisationTranslation._meta.get_field(
                     "information"
                 ).help_text,
-                "external_plugin_resources": _external_plugin_resources,
-                "extra_plugins": ["collapsibleItem"],
+                "max_length": OrganisationTranslation._meta.get_field(
+                    "information"
+                ).max_length,
                 "widget": CKEditor5Widget(
                     config_name="collapsible-image-editor",
                 ),
@@ -170,15 +173,8 @@ def __init__(self, *args, **kwargs):
         for lang_code in self.languages:
             for name, field_cls, kwargs in self.translated_fields:
                 self.instance.set_current_language(lang_code)
+                print(field_cls)
                 field = field_cls(**kwargs)
-                # The CKEditor5Widget doesn't have a label field, so we need to set it
-                # after creating the object
-                if isinstance(field, CKEditor5Widget):
-                    field.label = (
-                        OrganisationTranslation._meta.get_field(
-                            "information"
-                        ).verbose_name,
-                    )
                 identifier = self._get_identifier(lang_code, name)
                 field.required = False
 
diff --git a/apps/organisations/migrations/0024_auto_20240326_1134.py b/apps/organisations/migrations/0024_auto_20240326_1134.py
new file mode 100644
index 000000000..fd05dd7e8
--- /dev/null
+++ b/apps/organisations/migrations/0024_auto_20240326_1134.py
@@ -0,0 +1,49 @@
+# Generated by Django 3.2.19 on 2024-03-26 10:34
+
+from django.db import migrations
+import django_ckeditor_5.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("a4_candy_organisations", "0023_alter_organisationtranslation_information"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="organisation",
+            name="data_protection",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="Please provide all the legally required information of your data protection. The data protection policy will be shown on a separate page.",
+                verbose_name="Data protection policy",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="organisation",
+            name="imprint",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="Please provide all the legally required information of your imprint. The imprint will be shown on a separate page.",
+                verbose_name="Imprint",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="organisation",
+            name="netiquette",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="Please provide a netiquette for the participants. The netiquette helps improving the climate of online discussions and supports the moderation.",
+                verbose_name="Netiquette",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="organisation",
+            name="terms_of_use",
+            field=django_ckeditor_5.fields.CKEditor5Field(
+                blank=True,
+                help_text="Please provide all the legally required information of your terms of use. The terms of use will be shown on a separate page.",
+                verbose_name="Terms of use",
+            ),
+        ),
+    ]
diff --git a/apps/organisations/models.py b/apps/organisations/models.py
index bc544f9d4..515f7df99 100644
--- a/apps/organisations/models.py
+++ b/apps/organisations/models.py
@@ -1,5 +1,4 @@
 from autoslug import AutoSlugField
-from ckeditor.fields import RichTextField
 from django.conf import settings
 from django.contrib.sites.models import Site
 from django.db import models
@@ -120,7 +119,7 @@ class Organisation(TranslatableModel):
         blank=True,
         verbose_name="Instagram handle",
     )
-    imprint = RichTextField(
+    imprint = CKEditor5Field(
         verbose_name=_("Imprint"),
         help_text=_(
             "Please provide all the legally "
@@ -129,7 +128,7 @@ class Organisation(TranslatableModel):
         ),
         blank=True,
     )
-    terms_of_use = RichTextField(
+    terms_of_use = CKEditor5Field(
         verbose_name=_("Terms of use"),
         help_text=_(
             "Please provide all the legally "
@@ -138,7 +137,7 @@ class Organisation(TranslatableModel):
         ),
         blank=True,
     )
-    data_protection = RichTextField(
+    data_protection = CKEditor5Field(
         verbose_name=_("Data protection policy"),
         help_text=_(
             "Please provide all the legally "
@@ -148,7 +147,7 @@ class Organisation(TranslatableModel):
         ),
         blank=True,
     )
-    netiquette = RichTextField(
+    netiquette = CKEditor5Field(
         verbose_name=_("Netiquette"),
         help_text=_(
             "Please provide a netiquette for the participants. "
diff --git a/tests/newsletters/test_newsletter_views.py b/tests/newsletters/test_newsletter_views.py
index 6af927328..d570a3e05 100644
--- a/tests/newsletters/test_newsletter_views.py
+++ b/tests/newsletters/test_newsletter_views.py
@@ -268,9 +268,9 @@ def test_send_organisation_missing_alt_text(admin, client, project):
         "sender": "test@test.de",
         "subject": "Testsubject",
         "body": "Testbody <img>",
-        "receivers": newsletter_models.ORGANISATION,
+        "receivers": newsletter_models.PROJECT,
         "organisation": organisation.pk,
-        "project": "",
+        "project": project.pk,
         "send": "Send",
     }
 
@@ -293,21 +293,23 @@ def test_send_organisation_with_alt_text(
     organisation = project.organisation
     user1 = user_factory(get_newsletters=True)
     user2 = user_factory(get_newsletters=True)
-    user_factory()
+
     email_address_factory(user=user1, email=user1.email, primary=True, verified=True)
     email_address_factory(user=user2, email=user2.email, primary=True, verified=True)
+
     follow_models.Follow.objects.all().delete()
     follow_factory(creator=user1, project=project)
     follow_factory(creator=user2, project=project, enabled=False)
+    assert newsletter_models.Newsletter.objects.count() == 0
 
     data = {
         "sender_name": "Tester",
         "sender": "test@test.de",
         "subject": "Testsubject",
         "body": 'Testbody <img alt="description">',
-        "receivers": newsletter_models.ORGANISATION,
+        "receivers": newsletter_models.PROJECT,
         "organisation": organisation.pk,
-        "project": "",
+        "project": project.pk,
         "send": "Send",
     }
 
@@ -315,8 +317,7 @@ def test_send_organisation_with_alt_text(
         "a4dashboard:newsletter-create", kwargs={"organisation_slug": organisation.slug}
     )
     client.login(username=admin.email, password="password")
-    response = client.post(url, data)
-    assert redirect_target(response) == "newsletter-create"
+    client.post(url, data)
     assert newsletter_models.Newsletter.objects.count() == 1
     assert len(mail.outbox) == 1
     assert mail.outbox[0].to == [user1.email]

From 54c5bd96fe5e8c1c2d95a34282bf5073f16736e2 Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Wed, 27 Mar 2024 16:44:24 +0200
Subject: [PATCH 13/14] tests: fix E123 error

---
 .../test_views_project_offlineevents.py          | 16 ++++++++--------
 .../test_views_module_topics.py                  | 14 ++++++++------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py b/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
index cfcc6ab0b..c30dcd9c6 100644
--- a/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
+++ b/tests/offlineevents/dashboard_components/test_views_project_offlineevents.py
@@ -110,10 +110,10 @@ def test_offlineevent_update_view_missing_alt_text(
     )
     initiator = module.project.organisation.initiators.first()
     event = offline_event_factory(project=project)
-    url = reverse("a4dashboard:offlineevent-update", kwargs={
-        "organisation_slug": project.organisation.slug,
-        "slug": event.slug}
-        )
+    url = reverse(
+        "a4dashboard:offlineevent-update",
+        kwargs={"organisation_slug": project.organisation.slug, "slug": event.slug},
+    )
     data = {
         "name": "name",
         "event_type": "event_type",
@@ -142,10 +142,10 @@ def test_offlineevent_update_view_with_alt_text(
     )
     initiator = module.project.organisation.initiators.first()
     event = offline_event_factory(project=project)
-    url = reverse("a4dashboard:offlineevent-update", kwargs={
-        "organisation_slug": project.organisation.slug,
-        "slug": event.slug}
-        )
+    url = reverse(
+        "a4dashboard:offlineevent-update",
+        kwargs={"organisation_slug": project.organisation.slug, "slug": event.slug},
+    )
     data = {
         "name": "name",
         "event_type": "event_type",
diff --git a/tests/topicprio/dashboard_components/test_views_module_topics.py b/tests/topicprio/dashboard_components/test_views_module_topics.py
index 580b6eea1..b0779a489 100644
--- a/tests/topicprio/dashboard_components/test_views_module_topics.py
+++ b/tests/topicprio/dashboard_components/test_views_module_topics.py
@@ -109,11 +109,12 @@ def test_topic_update_view_missing_alt_text(
     initiator = module.project.organisation.initiators.first()
     category = category_factory(module=module)
     url = reverse(
-        "a4dashboard:topic-update", kwargs={
+        "a4dashboard:topic-update",
+        kwargs={
             "organisation_slug": item.module.project.organisation.slug,
             "pk": item.pk,
-            "year": item.created.year
-            }
+            "year": item.created.year,
+        },
     )
     data = {
         "name": "name",
@@ -139,11 +140,12 @@ def test_topic_update_view_with_alt_text(
     initiator = module.project.organisation.initiators.first()
     category = category_factory(module=module)
     url = reverse(
-        "a4dashboard:topic-update", kwargs={
+        "a4dashboard:topic-update",
+        kwargs={
             "organisation_slug": item.module.project.organisation.slug,
             "pk": item.pk,
-            "year": item.created.year
-            }
+            "year": item.created.year,
+        },
     )
     data = {
         "name": "name",

From b9551a5a2b2116725ef7ae76fca4a02cb52320bc Mon Sep 17 00:00:00 2001
From: Mara Karagianni <m.karagianni@liqd.net>
Date: Thu, 28 Mar 2024 12:44:08 +0200
Subject: [PATCH 14/14] migrations,assets: remove ck iframe migration and
 ck_embed_iframe.scss

---
 .../scss/components/_ck_embed_iframe.scss     | 14 -------
 adhocracy-plus/assets/scss/style.scss         |  1 -
 .../migrations/0002_ckeditor_iframes.py       |  2 +-
 .../migrations/0004_ckeditor_iframes.py       |  2 +-
 apps/organisations/forms.py                   |  1 -
 ...er_organisationtranslation_information.py} |  2 +-
 .../migrations/0022_ckeditor_iframes.py       | 38 -------------------
 ...326_1134.py => 0023_auto_20240328_1138.py} |  4 +-
 8 files changed, 5 insertions(+), 59 deletions(-)
 delete mode 100644 adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss
 rename apps/organisations/migrations/{0023_alter_organisationtranslation_information.py => 0022_alter_organisationtranslation_information.py} (92%)
 delete mode 100644 apps/organisations/migrations/0022_ckeditor_iframes.py
 rename apps/organisations/migrations/{0024_auto_20240326_1134.py => 0023_auto_20240328_1138.py} (94%)

diff --git a/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss b/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss
deleted file mode 100644
index 05b551c75..000000000
--- a/adhocracy-plus/assets/scss/components/_ck_embed_iframe.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ck_embed_iframe__container {
-  overflow: hidden;
-  padding-top: 56.25%; // 16:9 aspect ratio
-  position: relative;
-
-  .ck_embed_iframe {
-    border: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-}
diff --git a/adhocracy-plus/assets/scss/style.scss b/adhocracy-plus/assets/scss/style.scss
index 83aa28bad..d069cecd2 100644
--- a/adhocracy-plus/assets/scss/style.scss
+++ b/adhocracy-plus/assets/scss/style.scss
@@ -77,7 +77,6 @@
 @import "components/complete";
 @import "components/contact_form";
 @import "components/copyright";
-@import "components/ck_embed_iframe";
 @import "components/creator_count";
 @import "components/dashboard_nav";
 @import "components/data_table";
diff --git a/apps/activities/migrations/0002_ckeditor_iframes.py b/apps/activities/migrations/0002_ckeditor_iframes.py
index c6c13f37e..b27f393ba 100644
--- a/apps/activities/migrations/0002_ckeditor_iframes.py
+++ b/apps/activities/migrations/0002_ckeditor_iframes.py
@@ -19,7 +19,7 @@ def replace_iframe_with_figur(apps, schema_editor):
             )
             iframe.replaceWith(figure)
         if iframes:
-            activity.live_stream = soup.prettify(formatter="html")
+            activity.description = soup.prettify(formatter="html")
             activity.save()
 
 
diff --git a/apps/offlineevents/migrations/0004_ckeditor_iframes.py b/apps/offlineevents/migrations/0004_ckeditor_iframes.py
index a247c644e..8310edd06 100644
--- a/apps/offlineevents/migrations/0004_ckeditor_iframes.py
+++ b/apps/offlineevents/migrations/0004_ckeditor_iframes.py
@@ -19,7 +19,7 @@ def replace_iframe_with_figur(apps, schema_editor):
             )
             iframe.replaceWith(figure)
         if iframes:
-            offlineEvent.live_stream = soup.prettify(formatter="html")
+            offlineEvent.description = soup.prettify(formatter="html")
             offlineEvent.save()
 
 
diff --git a/apps/organisations/forms.py b/apps/organisations/forms.py
index 58f06f8f4..01810d9a3 100644
--- a/apps/organisations/forms.py
+++ b/apps/organisations/forms.py
@@ -173,7 +173,6 @@ def __init__(self, *args, **kwargs):
         for lang_code in self.languages:
             for name, field_cls, kwargs in self.translated_fields:
                 self.instance.set_current_language(lang_code)
-                print(field_cls)
                 field = field_cls(**kwargs)
                 identifier = self._get_identifier(lang_code, name)
                 field.required = False
diff --git a/apps/organisations/migrations/0023_alter_organisationtranslation_information.py b/apps/organisations/migrations/0022_alter_organisationtranslation_information.py
similarity index 92%
rename from apps/organisations/migrations/0023_alter_organisationtranslation_information.py
rename to apps/organisations/migrations/0022_alter_organisationtranslation_information.py
index 59e928cb7..16b5d9c96 100644
--- a/apps/organisations/migrations/0023_alter_organisationtranslation_information.py
+++ b/apps/organisations/migrations/0022_alter_organisationtranslation_information.py
@@ -6,7 +6,7 @@
 
 class Migration(migrations.Migration):
     dependencies = [
-        ("a4_candy_organisations", "0022_ckeditor_iframes"),
+        ("a4_candy_organisations", "0021_alter_organisation_logo"),
     ]
 
     operations = [
diff --git a/apps/organisations/migrations/0022_ckeditor_iframes.py b/apps/organisations/migrations/0022_ckeditor_iframes.py
deleted file mode 100644
index e12b7094f..000000000
--- a/apps/organisations/migrations/0022_ckeditor_iframes.py
+++ /dev/null
@@ -1,38 +0,0 @@
-# Generated by Django 3.2.20 on 2023-11-16 11:35
-
-from bs4 import BeautifulSoup
-from django.db import migrations
-from django.utils import translation
-
-
-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>'
-    )
-    Organisation = apps.get_model("a4_candy_organisations", "Organisation")
-    translation.activate("en")
-
-    for organisation in Organisation.objects.all():
-        soup = BeautifulSoup(organisation.description, "html.parser")
-        iframes = soup.findAll("iframe")
-        for iframe in iframes:
-            figure = BeautifulSoup(
-                template.format(url=iframe.attrs["src"]), "html.parser"
-            )
-            iframe.replaceWith(figure)
-        if iframes:
-            organisation.description = soup.prettify(formatter="html")
-            organisation.save()
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("a4_candy_organisations", "0021_alter_organisation_logo"),
-    ]
-
-    operations = [
-        migrations.RunPython(
-            replace_iframe_with_figur,
-        ),
-    ]
diff --git a/apps/organisations/migrations/0024_auto_20240326_1134.py b/apps/organisations/migrations/0023_auto_20240328_1138.py
similarity index 94%
rename from apps/organisations/migrations/0024_auto_20240326_1134.py
rename to apps/organisations/migrations/0023_auto_20240328_1138.py
index fd05dd7e8..97216a8b8 100644
--- a/apps/organisations/migrations/0024_auto_20240326_1134.py
+++ b/apps/organisations/migrations/0023_auto_20240328_1138.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.2.19 on 2024-03-26 10:34
+# Generated by Django 3.2.19 on 2024-03-28 10:38
 
 from django.db import migrations
 import django_ckeditor_5.fields
@@ -6,7 +6,7 @@
 
 class Migration(migrations.Migration):
     dependencies = [
-        ("a4_candy_organisations", "0023_alter_organisationtranslation_information"),
+        ("a4_candy_organisations", "0022_alter_organisationtranslation_information"),
     ]
 
     operations = [