IBX-9297: Custom CSS can not be removed from link element

ibexa · Dec 11, 2024 · ed8b55c · ed8b55c
1 parent f6b1f85
commit ed8b55c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
@@ -7,6 +7,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
+import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+
 import { createLabeledInputNumber } from '../../common/input-number/utils';
 import { createLabeledSwitchButton } from '../../common/switch-button/utils';
 
@@ -191,11 +193,23 @@ class IbexaCustomAttributesFormView extends View {
     }
 
     createDropdown(config) {
+        const Translator = getTranslator();
         const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown);
         const itemsList = new Collection();
 
         labeledDropdown.label = config.label;
 
+        if (!config.multiple && !config.required) {
+            itemsList.add({
+                type: 'button',
+                model: new Model({
+                    withText: true,
+                    label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'),
+                    value: null,
+                }),
+            });
+        }
+
         config.choices.forEach((choice) => {
             itemsList.add({
                 type: 'button',
@@ -219,9 +233,7 @@ class IbexaCustomAttributesFormView extends View {
 
             labeledDropdown.fieldView.element.value = value;
 
-            if (event.source.value) {
-                labeledDropdown.set('isEmpty', false);
-            }
+            labeledDropdown.set('isEmpty', !event.source.value);
         });
 
         return labeledDropdown;

diff --git a/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js b/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js
@@ -6,6 +6,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
+import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+
 import { createLabeledSwitchButton } from '../../common/switch-button/utils';
 import { createLabeledInputNumber } from '../../common/input-number/utils';
 import { getCustomAttributesConfig, getCustomClassesConfig } from '../../custom-attributes/helpers/config-helper';
@@ -19,6 +21,7 @@ class IbexaLinkFormView extends View {
 
         this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-link');
         this.cancelButtonView = this.createButton('Remove link', null, 'ck-button-cancel', 'remove-link');
+        this.removeCustomAttributesButtonView = this.createButton('Remove attributes', null, 'ck-button-cancel');
         this.selectContentButtonView = this.createButton('Select content', null, 'ibexa-btn--select-content');
         this.urlInputView = this.createTextInput({ label: 'Link to' });
         this.titleView = this.createTextInput({ label: 'Title' });
@@ -42,6 +45,7 @@ class IbexaLinkFormView extends View {
         const customAttributesLinkConfig = customAttributesConfig.link;
         const customClassesLinkConfig = customClassesConfig.link;
         const customAttributesDefinitions = [];
+        const actionBtns = [this.saveButtonView, this.cancelButtonView];
 
         this.children = this.createFormChildren();
         this.attributesChildren = this.createFromAttributesChildren(customAttributesLinkConfig, customClassesLinkConfig);
@@ -63,6 +67,8 @@ class IbexaLinkFormView extends View {
 
                 children: this.attributesChildren,
             });
+
+            actionBtns.push(this.removeCustomAttributesButtonView);
         }
 
         this.setTemplate({
@@ -107,7 +113,7 @@ class IbexaLinkFormView extends View {
                             attributes: {
                                 class: 'ibexa-ckeditor-balloon-form__actions',
                             },
-                            children: [this.saveButtonView, this.cancelButtonView],
+                            children: actionBtns,
                         },
                     ],
                 },
@@ -264,11 +270,23 @@ class IbexaLinkFormView extends View {
     }
 
     createDropdown(config) {
+        const Translator = getTranslator();
         const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown);
         const itemsList = new Collection();
 
         labeledDropdown.label = config.label;
 
+        if (!config.multiple && !config.required) {
+            itemsList.add({
+                type: 'button',
+                model: new Model({
+                    withText: true,
+                    label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'),
+                    value: null,
+                }),
+            });
+        }
+
         config.choices.forEach((choice) => {
             itemsList.add({
                 type: 'button',
@@ -292,9 +310,13 @@ class IbexaLinkFormView extends View {
 
             labeledDropdown.fieldView.element.value = value;
 
-            if (event.source.value) {
-                labeledDropdown.set('isEmpty', false);
-            }
+            labeledDropdown.set('isEmpty', !event.source.value);
+        });
+
+        this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
+            labeledDropdown.fieldView.element.value = null;
+
+            labeledDropdown.set('isEmpty', true);
         });
 
         return labeledDropdown;
@@ -323,6 +345,11 @@ class IbexaLinkFormView extends View {
 
         labeledInput.label = label;
 
+        this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
+            labeledInput.fieldView.reset();
+            labeledInput.set('isEmpty', true);
+        });
+
         return labeledInput;
     }
 
@@ -331,6 +358,11 @@ class IbexaLinkFormView extends View {
 
         labeledInput.label = config.label;
 
+        this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
+            labeledInput.fieldView.reset();
+            labeledInput.set('isEmpty', true);
+        });
+
         return labeledInput;
     }
 
@@ -348,6 +380,12 @@ class IbexaLinkFormView extends View {
         labeledSwitch.label = label;
         labeledSwitch.fieldView.set('isEmpty', false);
 
+        this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
+            labeledSwitch.fieldView.element.value = false;
+            labeledSwitch.fieldView.set('value', false);
+            labeledSwitch.fieldView.isOn = false;
+        });
+
         return labeledSwitch;
     }
 

diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss
@@ -69,14 +69,17 @@
         .ck.ck-button {
             cursor: pointer;
 
+            & + .ck-button {
+                margin-left: calculateRem(8px);
+            }
+
             &.ck-button-save {
                 color: $ibexa-color-white;
                 fill: $ibexa-color-white;
                 background-image: $ibexa-gradient-danger-primary;
                 border-width: 0;
                 padding: calculateRem(0px) calculateRem(16px);
                 border-radius: $ibexa-border-radius;
-                margin-right: calculateRem(8px);
 
                 &:hover {
                     color: $ibexa-color-white;

diff --git a/src/bundle/Resources/translations/ck_editor.en.xliff b/src/bundle/Resources/translations/ck_editor.en.xliff
@@ -56,6 +56,11 @@
         <target state="new">Custom tag toolbar</target>
         <note>key: custom_tag.toolbar.label</note>
       </trans-unit>
+      <trans-unit id="544c548dcc8ae0e549e5e027fc48a7b072bc8872" resname="dropdown.none.label">
+        <source>None</source>
+        <target state="new">None</target>
+        <note>key: dropdown.none.label</note>
+      </trans-unit>
       <trans-unit id="3b257be2c6dd1f7bf0d5c70e64c22bf5b298dbbf" resname="elements_path.list.label">
         <source>list</source>
         <target state="new">list</target>