IBX-8184: Implemented reusable RichText validator (#1255)

ibexa · May 21, 2024 · 74c422b · 74c422b
1 parent 61447f5
commit 74c422b
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 54 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezrichtext.js b/src/bundle/Resources/public/js/scripts/fieldType/ezrichtext.js
@@ -1,6 +1,9 @@
+import initValidator from './validator/richtext-validator';
+
 (function (global, doc, ibexa, React, ReactDOM) {
     const SELECTOR_FIELD = '.ibexa-field-edit--ezrichtext';
     const SELECTOR_INPUT = '.ibexa-data-source__richtext';
+    const SELECTOR_LABEL = '.ibexa-field-edit__label';
     const SELECTOR_ERROR_NODE = '.ibexa-form-error';
     const selectContent = (config) => {
         const udwContainer = document.querySelector('#react-udw');
@@ -26,62 +29,12 @@
 
     ibexa.addConfig('richText.alloyEditor.callbacks.selectContent', selectContent);
 
-    class EzRichTextValidator extends ibexa.BaseFieldValidator {
-        constructor(config) {
-            super(config);
-
-            this.richtextEditor = config.richtextEditor;
-        }
-        /**
-         * Validates the input
-         *
-         * @method validateInput
-         * @param {Event} event
-         * @returns {Object}
-         * @memberof EzRichTextValidator
-         */
-        validateInput(event) {
-            const fieldContainer = event.currentTarget.closest(SELECTOR_FIELD);
-            const isRequired = fieldContainer.classList.contains('ibexa-field-edit--required');
-            const label = fieldContainer.querySelector('.ibexa-field-edit__label').innerHTML;
-            const isEmpty = !this.richtextEditor.getData().length;
-            const isError = isRequired && isEmpty;
-            const result = { isError };
-
-            if (isError) {
-                result.errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
-            }
-
-            return result;
-        }
-    }
-
     doc.querySelectorAll(`${SELECTOR_FIELD} ${SELECTOR_INPUT}`).forEach((container) => {
         const richtextEditor = new ibexa.BaseRichText();
 
         richtextEditor.init(container);
 
-        const validator = new EzRichTextValidator({
-            classInvalid: 'is-invalid',
-            fieldContainer: container.closest(SELECTOR_FIELD),
-            richtextEditor,
-            eventsMap: [
-                {
-                    selector: '.ibexa-data-source__input.ibexa-input--textarea',
-                    eventName: 'input',
-                    callback: 'validateInput',
-                    errorNodeSelectors: [SELECTOR_ERROR_NODE],
-                },
-                {
-                    selector: SELECTOR_INPUT,
-                    eventName: 'blur',
-                    callback: 'validateInput',
-                    errorNodeSelectors: [SELECTOR_ERROR_NODE],
-                },
-            ],
-        });
-
-        validator.init();
+        const validator = initValidator(container, SELECTOR_FIELD, SELECTOR_ERROR_NODE, SELECTOR_INPUT, SELECTOR_LABEL, richtextEditor);
 
         ibexa.addConfig('fieldTypeValidators', [validator], true);
     });

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/validator/richtext-validator.js b/src/bundle/Resources/public/js/scripts/fieldType/validator/richtext-validator.js
@@ -0,0 +1,65 @@
+const { ibexa } = window;
+
+class RichTextValidator extends ibexa.BaseFieldValidator {
+    constructor({ richtextEditor, selectorField, labelSelector, ...config }) {
+        super(config);
+
+        this.richtextEditor = richtextEditor;
+        this.selectorField = selectorField;
+        this.labelSelector = labelSelector;
+    }
+
+    /**
+     * Validates the input
+     *
+     * @method validateInput
+     * @param {Event} event
+     * @returns {Object}
+     * @memberof RichTextValidator
+     */
+    validateInput(event) {
+        const fieldContainer = event.currentTarget.closest(this.selectorField);
+        const isRequired = fieldContainer.classList.contains('ibexa-field-edit--required');
+        const label = fieldContainer.querySelector(this.labelSelector).innerHTML;
+        const isEmpty = !this.richtextEditor.getData().length;
+        const isError = isRequired && isEmpty;
+        const result = { isError };
+
+        if (isError) {
+            result.errorMessage = ibexa.errors.emptyField.replace('{fieldName}', label);
+        }
+
+        return result;
+    }
+}
+
+const initValidator = (container, selectorField, selectorErrorNone, selectorInput, labelSelector, richtextEditor) => {
+    const validator = new RichTextValidator({
+        classInvalid: 'is-invalid',
+        fieldContainer: container.closest(selectorField),
+        eventsMap: [
+            {
+                selector: '.ibexa-data-source__input.ibexa-input--textarea',
+                eventName: 'input',
+                callback: 'validateInput',
+                errorNodeSelectors: [selectorErrorNone],
+            },
+            {
+                selector: selectorInput,
+                eventName: 'blur',
+                callback: 'validateInput',
+                errorNodeSelectors: [selectorErrorNone],
+            },
+        ],
+        richtextEditor,
+        selectorField,
+        selectorInput,
+        labelSelector,
+    });
+
+    validator.init();
+
+    return validator;
+};
+
+export default initValidator;
diff --git a/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js b/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js
@@ -29,7 +29,7 @@ const checkIsEmpty = (field) => {
     }
 
     return {
-        isValid: input.value,
+        isValid: input?.value ?? true,
         errorMessage,
     };
 };
@@ -40,9 +40,11 @@ const validateIsEmptyField = (field) => {
     const validatorOutput = checkIsEmpty(field);
     const { isValid, errorMessage } = validatorOutput;
 
-    input.classList.toggle('is-invalid', !isValid);
+    if (input) {
+        input.classList.toggle('is-invalid', !isValid);
+    }
 
-    if (label) {
+    if (label && input) {
         label.classList.toggle('is-invalid', !isValid);
     }