IBX-9296: Custom CSS classes not working for "embedimage" (#197)

Author: GrabowskiM

src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-command.js

@@ -32,20 +32,24 @@ class IbexaCustomAttributesCommand extends Command {
     cleanClasses(modelElement, classes) {
         Object.keys(classes).forEach((elementName) => {
             const configName = findConfigName(modelElement.name);
-            const selectedCustomClasses = modelElement.getAttribute('custom-classes') ?? '';
+            const selectedCustomClasses = modelElement.getAttribute('custom-classes')?.split(' ') ?? [];
             const elementCustomClassesConfig = classes[configName];
+            const filteredSelectedCustomClasses = selectedCustomClasses.filter(
+                (className) => !elementCustomClassesConfig || className !== elementCustomClassesConfig.predefinedClass,
+            );
+
             const hasOwnCustomClasses =
                 elementCustomClassesConfig &&
-                selectedCustomClasses
-                    .split(' ')
-                    .every((selectedCustomClass) => elementCustomClassesConfig.choices.includes(selectedCustomClass));
-
-            if (elementName === configName || hasOwnCustomClasses) {
-                return;
-            }
+                filteredSelectedCustomClasses.every((selectedCustomClass) =>
+                    elementCustomClassesConfig.choices.includes(selectedCustomClass),
+                );
 
             this.editor.model.change((writer) => {
-                writer.removeAttribute('custom-classes', modelElement);
+                if (elementName !== configName && !hasOwnCustomClasses) {
+                    writer.removeAttribute('custom-classes', modelElement);
+                } else if (selectedCustomClasses.length !== filteredSelectedCustomClasses.length) {
+                    writer.setAttribute('custom-classes', filteredSelectedCustomClasses.join(' '), modelElement);
+                }
             });
         });
     }

src/bundle/Resources/public/js/CKEditor/custom-attributes/helpers/config-helper.js

@@ -52,11 +52,20 @@ const getCustomClassesElementConfig = (elementName) => {
 
     return config[configName];
 };
+const addPredefinedClassToConfig = (elementName, className) => {
+    const configName = findConfigName(elementName);
+    const config = window.ibexa.richText.alloyEditor.classes[configName];
+
+    if (config) {
+        config.predefinedClass = className;
+    }
+};
 
 export {
     getCustomAttributesConfig,
     getCustomClassesConfig,
     getCustomAttributesElementConfig,
     getCustomClassesElementConfig,
     findConfigName,
+    addPredefinedClassToConfig,
 };

src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-editing.js

@@ -5,6 +5,9 @@ import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import IbexaEmbedImageCommand from './embed-image-command';
 
 import { findContent } from '../../services/content-service';
+import { addPredefinedClassToConfig } from '../../custom-attributes/helpers/config-helper';
+
+const CONTAINER_CLASS = 'ibexa-embed-type-image';
 
 class IbexaEmbedImageEditing extends Plugin {
     static get requires() {
@@ -17,6 +20,8 @@ class IbexaEmbedImageEditing extends Plugin {
         this.loadImagePreview = this.loadImagePreview.bind(this);
         this.loadImageVariation = this.loadImageVariation.bind(this);
         this.getSetting = this.getSetting.bind(this);
+
+        addPredefinedClassToConfig('embedImage', CONTAINER_CLASS);
     }
 
     loadImagePreview(modelElement) {
@@ -89,7 +94,7 @@ class IbexaEmbedImageEditing extends Plugin {
                     const container = downcastWriter.createContainerElement('div', {
                         'data-ezelement': 'ezembed',
                         'data-ezview': 'embed',
-                        class: 'ibexa-embed-type-image',
+                        class: CONTAINER_CLASS,
                     });
 
                     this.loadImagePreview(modelElement);
@@ -136,7 +141,7 @@ class IbexaEmbedImageEditing extends Plugin {
                     'data-href': `ezcontent://${modelElement.getAttribute('contentId')}`,
                     'data-ezelement': 'ezembed',
                     'data-ezview': 'embed',
-                    class: 'ibexa-embed-type-image',
+                    class: CONTAINER_CLASS,
                 });
                 const config = downcastWriter.createUIElement('span', { 'data-ezelement': 'ezconfig' }, function (domDocument) {
                     const domElement = this.toDomElement(domDocument);
@@ -177,7 +182,7 @@ class IbexaEmbedImageEditing extends Plugin {
                 attributes: {
                     'data-ezelement': 'ezembed',
                 },
-                classes: 'ibexa-embed-type-image',
+                classes: CONTAINER_CLASS,
             },
             model: (viewElement, { writer: upcastWriter }) => {
                 const href = viewElement.getAttribute('data-href');