feat: Add drag and drop support for djangocms-text-ckeditor (#165)

Co-authored-by: Steffen Jasper <[email protected]>

CHANGELOG.rst

@@ -2,6 +2,16 @@
 Changelog
 =========
 
+1.2.0 (2023-11-28)
+==================
+
+* feat: Add float option for images by @fsbraun in https://github.com/django-cms/djangocms-frontend/pull/162
+* feat: Add drag'n'drop support for djangocms-text-ckeditor by @fsbraun in https://github.com/django-cms/djangocms-frontend/pull/165
+* fix: Ckeditor does not show icons for editing by @fsbraun in https://github.com/django-cms/djangocms-frontend/pull/163
+* fix: Replace ``stylesSet`` setting in docs with ``customConfig` for icons in ckeditor by @fsbraun in https://github.com/django-cms/djangocms-frontend/pull/164
+* ci: pre-commit autoupdate by @pre-commit-ci in https://github.com/django-cms/djangocms-frontend/pull/161
+
+
 1.1.10 (2023-10-23)
 ===================
 

djangocms_frontend/__init__.py

@@ -19,4 +19,4 @@
 13. Github actions will publish the new package to pypi
 """
 
-__version__ = "1.1.10"
+__version__ = "1.2.0"

djangocms_frontend/contrib/image/forms.py

@@ -145,7 +145,8 @@ class Meta:
     )
     alignment = forms.ChoiceField(
         label=_("Alignment"),
-        choices=get_alignment(),
+        choices=settings.EMPTY_CHOICE + get_alignment(),
+        initial=settings.EMPTY_CHOICE[0][0],
         required=False,
         help_text=_("Aligns the image according to the selected option."),
     )

djangocms_frontend/contrib/image/image_save.py

@@ -0,0 +1,35 @@
+from django.core.files.base import ContentFile
+
+from djangocms_frontend.contrib.image.cms_plugins import ImagePlugin
+from djangocms_frontend.contrib.image.forms import get_templates
+from djangocms_frontend.contrib.image.models import Image
+from djangocms_frontend.helpers import add_plugin, first_choice
+
+default_template = first_choice(get_templates())
+
+
+def create_image_plugin(filename, file, parent_plugin, **kwargs):
+
+    # Set the FilerImageField value.
+    from filer.settings import FILER_IMAGE_MODEL
+    from filer.utils.loader import load_model
+    image_class = load_model(FILER_IMAGE_MODEL)
+    image_obj = image_class(file=ContentFile(file.read(), name=filename))
+    image_obj.save()
+
+    img = Image(
+        parent=parent_plugin,
+        position=parent_plugin.position + 1,
+        placeholder=parent_plugin.placeholder,
+        language=parent_plugin.language,
+        plugin_type=ImagePlugin.__name__,
+        ui_item=Image.__class__.__name__,
+        config={},
+    ).initialize_from_form()
+    img.config.update({
+        "picture": {"pk": image_obj.pk, "model": "filer.image"},
+        "use_no_cropping": True,
+    })
+    add_plugin(parent_plugin.placeholder, img)
+
+    return img

docs/source/components.rst

@@ -286,6 +286,25 @@ Picture / image component
 The image or picture component make responsive picture uploads available as
 well as responsive embedding of external pictures.
 
+.. versionadded:: 1.2
+
+   djangocms-text-ckeditor supports dragging and dropping images into a rich
+   text field. If you add the following line to your `settings.py` file,
+   djangocms-text-ckeditor will automatically convert an image dropped into it
+   to a djangocms-frontend image component.
+
+   .. code-block::
+
+      TEXT_SAVE_IMAGE_FUNCTION = 'djangocms_frontend.contrib.image.image_save.create_image_plugin'
+
+   Please note, that images dropped into djangocms-text-ckeditor are base64-
+   encoded and take a quite a bit of band width. You may have to increase your
+   `DATA_UPLOAD_MAX_MEMORY_SIZE` setting in `settings.py`.
+
+   We recommend not using this feature but instead adding a image component
+   through the "CMS Plugin" menu of Ckeditor.
+
+
 
 .. index::
     single: Spacing

docs/source/reference.rst

@@ -223,15 +223,14 @@ in your project's ``settings.py``.
 
 .. py:attribute:: settings.TEXT_SAVE_IMAGE_FUNCTION
 
-    Requirement: ``TEXT_SAVE_IMAGE_FUNCTION = None``
+    If you want to use
+    djangocms-text-ckeditor's `Drag & Drop Images
+    <https://github.com/django-cms/djangocms-text-ckeditor/#drag--drop-images>`_
+    so be sure to set ``TEXT_SAVE_IMAGE_FUNCTION``::
 
-    .. warning::
-
-        Please be aware that this package does not support
-        djangocms-text-ckeditor's `Drag & Drop Images
-        <https://github.com/divio/djangocms-text-ckeditor/#drag--drop-images>`_
-        so be sure to set ``TEXT_SAVE_IMAGE_FUNCTION = None``.
+      TEXT_SAVE_IMAGE_FUNCTION = 'djangocms_frontend.contrib.image.image_save.create_image_plugin'
 
+    Otherwise set ``TEXT_SAVE_IMAGE_FUNCTION = None``
 
 .. py:attribute:: settings.DJANGOCMS_FRONTEND_ICON_LIBRARIES
 

tests/image/test_drag_n_drop.py

@@ -0,0 +1,31 @@
+from cms.api import add_plugin
+from cms.test_utils.testcases import CMSTestCase
+
+from djangocms_frontend.contrib.image.models import Image
+from tests.fixtures import TestFixture
+
+
+class DjangoCMSPictureIntegrationTestCase(TestFixture, CMSTestCase):
+    def setUp(self):
+        super().setUp()
+        self.placeholder = self.get_placeholders(self.home).get(slot='content')
+
+    def test_extract_images(self):
+        text_plugin = add_plugin(
+            self.placeholder,
+            'TextPlugin',
+            'en',
+            body='<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42m'
+                 'P8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==">',
+        )
+
+        picture_plugins = Image.objects.order_by('-id')
+        self.assertEqual(len(picture_plugins), 1)
+        self.assertEqual(picture_plugins[0].parent.id, text_plugin.id)
+        id = picture_plugins[0].id
+        self.assertHTMLEqual(
+            text_plugin.body,
+            f'<cms-plugin alt="Picture / Image - Image ({id}) " '
+            f'title="Picture / Image - Image ({id})" '
+            f'id="{id}"></cms-plugin>',
+        )

tests/test_settings.py

@@ -119,3 +119,5 @@
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 CMS_CONFIRM_VERSION4 = True  # Needed for v4, neglected in v3
+
+TEXT_SAVE_IMAGE_FUNCTION = 'djangocms_frontend.contrib.image.image_save.create_image_plugin'