IBX-8150: Added option to enable attributes types

src/bundle/Resources/encore/ez.webpack.custom.config.js

@@ -14,6 +14,8 @@ Encore.addEntry('ibexa-richtext-onlineeditor-js', [path.resolve(__dirname, '../p
 
 Encore.addAliases({
     '@ckeditor': path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor'),
+    '@fieldtype-richtext': path.resolve('./vendor/ibexa/fieldtype-richtext'),
+    '@ibexa-admin-ui': path.resolve('./vendor/ibexa/admin-ui'),
 });
 
 const customConfig = Encore.getWebpackConfig();

src/bundle/Resources/public/js/CKEditor/common/input-number/input-number-view.js

@@ -23,6 +23,8 @@ export default class InputNumberView extends InputTextView {
                 readonly: bindTemplate.to('isReadOnly'),
                 'aria-invalid': bindTemplate.if('hasError', true),
                 'aria-describedby': bindTemplate.to('ariaDescribedById'),
+                min: bindTemplate.to('min'),
+                max: bindTemplate.to('max'),
             },
             on: {
                 input: bindTemplate.to('input'),

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js

@@ -111,7 +111,13 @@ class IbexaCustomTagUI extends Plugin {
             this.isNew = false;
 
             Object.entries(this.formView.attributeViews).forEach(([name, attributeView]) => {
-                newValues[name] = attributeView.fieldView.element.value;
+                const getValue = this.formView.getValueMethods[this.config.attributes[name].type];
+
+                if (!getValue) {
+                    return;
+                }
+
+                newValues[name] = getValue(attributeView);
             });
 
             this.editor.model.change((writer) => {
@@ -126,6 +132,10 @@ class IbexaCustomTagUI extends Plugin {
             this.hideForm();
         });
 
+        this.listenTo(formView, 'ibexa-ckeditor-update-balloon-position', () => {
+            this.balloon.updatePosition(this.getBalloonPositionData());
+        });
+
         return formView;
     }
 

src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js

@@ -60,6 +60,8 @@ class IbexaCustomTagAttributesView extends View {
 
         Object.entries(attributes).forEach(([name, config]) => {
             const value = values[name] === null || values[name] === undefined || values[name] === '' ? '-' : values[name];
+            const getValueLabelMethods = window.ibexa.richText.CKEditor.customTags?.getValueLabelMethods || {};
+            const valueLabel = getValueLabelMethods[name] && value !== '-' ? getValueLabelMethods[name](value, config) : value;
 
             children.push({
                 tag: 'div',
@@ -79,7 +81,7 @@ class IbexaCustomTagAttributesView extends View {
                         attributes: {
                             class: 'ibexa-custom-tag-attributes__item-value',
                         },
-                        children: [value],
+                        children: [valueLabel],
                     },
                 ],
             });

src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js

@@ -19,20 +19,35 @@ class IbexaCustomTagFormView extends View {
         this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-custom-tag');
         this.cancelButtonView = this.createButton('Cancel', null, 'ck-button-cancel', 'cancel-custom-tag');
 
+        const attributeRenderMethods = window.ibexa.richText.CKEditor.customTags?.attributeRenderMethods || {};
+        const setValueMethods = window.ibexa.richText.CKEditor.customTags?.setValueMethods || {};
+        const getValueMethods = window.ibexa.richText.CKEditor.customTags?.getValueMethods || {};
+
         this.attributeViews = {};
         this.attributeRenderMethods = {
             string: this.createTextInput,
             number: this.createNumberInput,
             choice: this.createDropdown,
             boolean: this.createBoolean,
             link: this.createTextInput,
+            ...attributeRenderMethods,
         };
         this.setValueMethods = {
             string: this.setStringValue,
             number: this.setNumberValue,
             choice: this.setChoiceValue,
             boolean: this.setBooleanValue,
             link: this.setStringValue,
+            ...setValueMethods,
+        };
+
+        this.getValueMethods = {
+            string: this.getStringValue,
+            number: this.getNumberValue,
+            choice: this.getChoiceValue,
+            boolean: this.getBooleanValue,
+            link: this.getStringValue,
+            ...getValueMethods,
         };
     }
 
@@ -77,6 +92,22 @@ class IbexaCustomTagFormView extends View {
         attributeView.fieldView.set('isEmpty', false);
     }
 
+    getNumberValue(attributeView) {
+        return attributeView.fieldView.element.value;
+    }
+
+    getStringValue(attributeView) {
+        return attributeView.fieldView.element.value;
+    }
+
+    getChoiceValue(attributeView) {
+        return attributeView.fieldView.element.value;
+    }
+
+    getBooleanValue(attributeView) {
+        return attributeView.fieldView.element.value;
+    }
+
     setChildren(childrenData, label) {
         this.childrenData = childrenData;
         this.children = this.createFormChildren(childrenData);
@@ -154,7 +185,9 @@ class IbexaCustomTagFormView extends View {
                 }
 
                 const createAttribute = createAttributeMethod.bind(this);
-                const attributeView = createAttribute(config);
+                const attributeView = createAttribute(config, this.locale, name);
+
+                attributeView.delegate('ibexa-ckeditor-update-balloon-position').to(this, 'ibexa-ckeditor-update-balloon-position');
 
                 this.attributeViews[name] = attributeView;