@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/mjs/components/textarea/TextArea.js

@@ -15,8 +15,8 @@ export default class TextAreaComponent extends TextFieldComponent {
             inputFormat: 'html',
             validate: {
                 minWords: '',
-                maxWords: '',
-            },
+                maxWords: ''
+            }
         }, ...extend);
     }
     static get builderInfo() {
@@ -26,7 +26,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             icon: 'font',
             documentation: '/userguide/form-building/form-components#text-area',
             weight: 20,
-            schema: TextAreaComponent.schema(),
+            schema: TextAreaComponent.schema()
         };
     }
     init() {
@@ -69,7 +69,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,
-                value,
+                value
             });
         }
         return this.renderTemplate('input', {
@@ -77,7 +77,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             suffix: this.suffix,
             input: info,
             value,
-            index,
+            index
         });
     }
     get autoExpand() {
@@ -96,9 +96,9 @@ export default class TextAreaComponent extends TextFieldComponent {
             newArray[index] = newValue;
             newValue = newArray;
         }
-        if (!_.isEqual(newValue, dataValue) && (!_.isEmpty(newValue) || !_.isEmpty(dataValue))) {
+        if ((!_.isEqual(newValue, dataValue)) && (!_.isEmpty(newValue) || !_.isEmpty(dataValue))) {
             this.updateValue(newValue, {
-                modified: !this.autoModified,
+                modified: !this.autoModified
             }, index);
         }
         this.autoModified = false;
@@ -115,8 +115,8 @@ export default class TextAreaComponent extends TextFieldComponent {
         if (this.component.wysiwyg && !this.component.editor) {
             this.component.editor = 'ckeditor';
         }
-        let settings = _.isEmpty(this.component.wysiwyg)
-            ? this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
+        let settings = _.isEmpty(this.component.wysiwyg) ?
+            this.wysiwygDefault[this.component.editor] || this.wysiwygDefault.default
             : this.component.wysiwyg;
         // Keep track of when this editor is ready.
         this.editorsReady[index] = new Promise((editorReady) => {
@@ -126,20 +126,15 @@ export default class TextAreaComponent extends TextFieldComponent {
                     if (!settings) {
                         settings = {};
                     }
-                    settings.mode = this.component.as
-                        ? `ace/mode/${this.component.as}`
-                        : 'ace/mode/javascript';
-                    this.addAce(element, settings, (newValue) => this.updateEditorValue(index, newValue))
-                        .then((ace) => {
+                    settings.mode = this.component.as ? `ace/mode/${this.component.as}` : 'ace/mode/javascript';
+                    this.addAce(element, settings, (newValue) => this.updateEditorValue(index, newValue)).then((ace) => {
                         this.editors[index] = ace;
                         let dataValue = this.dataValue;
-                        dataValue =
-                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
+                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
                         ace.setValue(this.setConvertedValue(dataValue, index));
                         editorReady(ace);
                         return ace;
-                    })
-                        .catch((err) => console.warn(err));
+                    }).catch(err => console.warn(err));
                     break;
                 case 'quill':
                     // Normalize the configurations for quill.
@@ -148,8 +143,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                         settings = this.wysiwygDefault.quill;
                     }
                     // Add the quill editor.
-                    this.addQuill(element, settings, () => this.updateEditorValue(index, this.editors[index].root.innerHTML))
-                        .then((quill) => {
+                    this.addQuill(element, settings, () => this.updateEditorValue(index, this.editors[index].root.innerHTML)).then((quill) => {
                         this.editors[index] = quill;
                         if (this.component.isUploadEnabled) {
                             const _this = this;
@@ -164,22 +158,20 @@ export default class TextAreaComponent extends TextFieldComponent {
                             quill.disable();
                         }
                         let dataValue = this.dataValue;
-                        dataValue =
-                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
+                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
                         quill.setContents(quill.clipboard.convert({ html: this.setConvertedValue(dataValue, index) }));
                         editorReady(quill);
                         return quill;
-                    })
-                        .catch((err) => console.warn(err));
+                    }).catch(err => console.warn(err));
                     break;
                 case 'ckeditor':
                     settings = settings || {};
                     settings.rows = this.component.rows;
-                    this.addCKE(element, settings, (newValue) => this.updateEditorValue(index, newValue)).then((editor) => {
+                    this.addCKE(element, settings, (newValue) => this.updateEditorValue(index, newValue))
+                        .then((editor) => {
                         this.editors[index] = editor;
                         let dataValue = this.dataValue;
-                        dataValue =
-                            this.component.multiple && Array.isArray(dataValue) ? dataValue[index] : dataValue;
+                        dataValue = (this.component.multiple && Array.isArray(dataValue)) ? dataValue[index] : dataValue;
                         const value = this.setConvertedValue(dataValue, index);
                         const isReadOnly = this.options.readOnly || this.disabled;
                         // Use ckeditor 4 in IE browser
@@ -193,8 +185,8 @@ export default class TextAreaComponent extends TextFieldComponent {
                             const numRows = parseInt(this.component.rows, 10);
                             if (_.isFinite(numRows) && _.has(editor, 'ui.view.editable.editableElement')) {
                                 // Default height is 21px with 10px margin + a 14px top margin.
-                                const editorHeight = numRows * 31 + 14;
-                                editor.ui.view.editable.editableElement.style.height = `${editorHeight}px`;
+                                const editorHeight = (numRows * 31) + 14;
+                                editor.ui.view.editable.editableElement.style.height = `${(editorHeight)}px`;
                             }
                             editor.isReadOnly = isReadOnly;
                             editor.data.set(value);
@@ -228,30 +220,29 @@ export default class TextAreaComponent extends TextFieldComponent {
         this.fileService
             .uploadFile(uploadStorage, files[0], uniqueName(files[0].name), uploadDir || '', //should pass empty string if undefined
         null, uploadUrl, uploadOptions, fileKey)
-            .then((result) => {
+            .then(result => {
             requestData = result;
             return this.fileService.downloadFile(result);
         })
-            .then((result) => {
+            .then(result => {
             quillInstance.enable(true);
             const Delta = Quill.import('delta');
             quillInstance.updateContents(new Delta()
                 .retain(range.index)
                 .delete(range.length)
                 .insert({
-                image: result.url,
+                image: result.url
             }, {
                 alt: JSON.stringify(requestData),
             }), Quill.sources.USER);
-        })
-            .catch((error) => {
+        }).catch(error => {
             console.warn('Quill image upload failed');
             console.warn(error);
             quillInstance.enable(true);
         });
     }
     get isPlain() {
-        return !this.component.wysiwyg && !this.component.editor;
+        return (!this.component.wysiwyg && !this.component.editor);
     }
     get htmlView() {
         return this.options.readOnly && (this.component.editor || this.component.wysiwyg);
@@ -268,7 +259,8 @@ export default class TextAreaComponent extends TextFieldComponent {
                             break;
                         case 'quill':
                             if (this.component.isUploadEnabled) {
-                                this.setAsyncConvertedValue(value).then((result) => {
+                                this.setAsyncConvertedValue(value)
+                                    .then(result => {
                                     const content = editor.clipboard.convert({ html: result });
                                     editor.setContents(content);
                                 });
@@ -290,27 +282,18 @@ export default class TextAreaComponent extends TextFieldComponent {
     }
     setValue(value, flags = {}) {
         if (this.isPlain || this.options.readOnly || this.disabled) {
-            value =
-                this.component.multiple && Array.isArray(value)
-                    ? value.map((val, index) => this.setConvertedValue(val, index))
-                    : this.setConvertedValue(value);
+            value = (this.component.multiple && Array.isArray(value)) ?
+                value.map((val, index) => this.setConvertedValue(val, index)) :
+                this.setConvertedValue(value);
             return super.setValue(value, flags);
         }
-        flags.skipWysiwyg =
-            value === '' && flags.resetValue ? false : _.isEqual(value, this.getValue());
+        flags.skipWysiwyg = value === '' && flags.resetValue ? false : _.isEqual(value, this.getValue());
         return super.setValue(value, flags);
     }
     setContent(element, content, forceSanitize) {
         super.setContent(element, content, forceSanitize, {
-            addAttr: [
-                'allow',
-                'allowfullscreen',
-                'frameborder',
-                'scrolling',
-            ],
-            addTags: [
-                'iframe',
-            ],
+            addAttr: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+            addTags: ['iframe'],
         });
     }
     setReadOnlyValue(value, index) {
@@ -318,9 +301,7 @@ export default class TextAreaComponent extends TextFieldComponent {
         if (this.options.readOnly || this.disabled) {
             if (this.refs.input && this.refs.input[index]) {
                 if (this.component.inputFormat === 'plain') {
-                    this.refs.input[index].innerText = this.isPlain
-                        ? value
-                        : this.interpolate(value, {}, { noeval: true });
+                    this.refs.input[index].innerText = this.isPlain ? value : this.interpolate(value, {}, { noeval: true });
                 }
                 else {
                     this.setContent(this.refs.input[index], this.isPlain ? value : this.interpolate(value, {}, { noeval: true }), this.shouldSanitizeValue);
@@ -381,7 +362,8 @@ export default class TextAreaComponent extends TextFieldComponent {
         const htmlDoc = new DOMParser().parseFromString(value, 'text/html');
         const images = htmlDoc.getElementsByTagName('img');
         if (images.length) {
-            return this.setImagesUrl(images).then(() => {
+            return this.setImagesUrl(images)
+                .then(() => {
                 value = htmlDoc.getElementsByTagName('body')[0].innerHTML;
                 return value;
             });
@@ -391,7 +373,7 @@ export default class TextAreaComponent extends TextFieldComponent {
         }
     }
     setImagesUrl(images) {
-        return Promise.all(_.map(images, (image) => {
+        return Promise.all(_.map(images, image => {
             let requestData;
             try {
                 requestData = JSON.parse(image.getAttribute('alt'));
@@ -399,7 +381,8 @@ export default class TextAreaComponent extends TextFieldComponent {
             catch (error) {
                 console.warn(error);
             }
-            return this.fileService.downloadFile(requestData).then((result) => {
+            return this.fileService.downloadFile(requestData)
+                .then((result) => {
                 image.setAttribute('src', result.url);
             });
         }));
@@ -459,8 +442,7 @@ export default class TextAreaComponent extends TextFieldComponent {
         }, 200);
         const computedStyle = window.getComputedStyle(textarea, null);
         textarea.style.resize = 'none';
-        heightOffset =
-            parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth) || 0;
+        heightOffset = parseFloat(computedStyle.borderTopWidth) + parseFloat(computedStyle.borderBottomWidth) || 0;
         if (window) {
             this.addEventListener(window, 'resize', update);
         }
@@ -492,7 +474,7 @@ export default class TextAreaComponent extends TextFieldComponent {
     }
     onChange(flags, fromRoot) {
         const changed = super.onChange(flags, fromRoot);
-        this.updateSizes.forEach((updateSize) => updateSize());
+        this.updateSizes.forEach(updateSize => updateSize());
         return changed;
     }
     hasChanged(newValue, oldValue) {
@@ -513,7 +495,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             try {
                 value = JSON.parse(value);
             }
-            catch (ignoreErr) {
+            catch (err) {
                 // console.warn(err);
             }
         }
@@ -521,14 +503,14 @@ export default class TextAreaComponent extends TextFieldComponent {
     }
     detach() {
         // Destroy all editors.
-        this.editors.forEach((editor) => {
+        this.editors.forEach(editor => {
             if (editor.destroy) {
                 editor.destroy();
             }
         });
         this.editors = [];
         this.editorsReady = [];
-        this.updateSizes.forEach((updateSize) => this.removeEventListener(window, 'resize', updateSize));
+        this.updateSizes.forEach(updateSize => this.removeEventListener(window, 'resize', updateSize));
         this.updateSizes = [];
         super.detach();
     }
@@ -543,35 +525,29 @@ export default class TextAreaComponent extends TextFieldComponent {
         switch (this.component.editor) {
             case 'ckeditor': {
                 // Wait for the editor to be ready.
-                this.editorsReady[0]
-                    ?.then(() => {
+                this.editorsReady[0]?.then(() => {
                     if (this.editors[0].editing?.view?.focus) {
                         this.editors[0].editing.view.focus();
                     }
                     this.element.scrollIntoView();
-                })
-                    .catch((err) => {
+                }).catch((err) => {
                     console.warn('An editor did not initialize properly when trying to focus:', err);
                 });
                 break;
             }
             case 'ace': {
-                this.editorsReady[0]
-                    ?.then(() => {
+                this.editorsReady[0]?.then(() => {
                     this.editors[0].focus();
                     this.element.scrollIntoView();
-                })
-                    .catch((err) => {
+                }).catch((err) => {
                     console.warn('An editor did not initialize properly when trying to focus:', err);
                 });
                 break;
             }
             case 'quill': {
-                this.editorsReady[0]
-                    ?.then(() => {
+                this.editorsReady[0]?.then(() => {
                     this.editors[0].focus();
-                })
-                    .catch((err) => {
+                }).catch((err) => {
                     console.warn('An editor did not initialize properly when trying to focus:', err);
                 });
                 break;

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -3,15 +3,15 @@ import { Formio } from '../../../Formio';
 export default [
     {
         key: 'inputMask',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'allowMultipleMasks',
-        ignore: true,
+        ignore: true
     },
     {
         key: 'mask',
-        ignore: true,
+        ignore: true
     },
     {
         type: 'number',
@@ -20,7 +20,7 @@ export default [
         label: 'Rows',
         weight: 210,
         tooltip: 'This allows control over how many rows are visible in the text area.',
-        placeholder: 'Enter the amount of rows',
+        placeholder: 'Enter the amount of rows'
     },
     {
         weight: 1350,
@@ -28,7 +28,7 @@ export default [
         input: true,
         key: 'spellcheck',
         defaultValue: true,
-        label: 'Allow Spellcheck',
+        label: 'Allow Spellcheck'
     },
     {
         type: 'select',
@@ -43,25 +43,25 @@ export default [
                 { label: 'ACE', value: 'ace' },
                 { label: 'CKEditor', value: 'ckeditor' },
                 { label: 'Quill', value: 'quill' },
-            ],
+            ]
         },
-        weight: 415,
+        weight: 415
     },
     {
         type: 'checkbox',
         input: true,
         key: 'autoExpand',
         label: 'Auto Expand',
-        tooltip: "This will make the TextArea auto expand it's height as the user is typing into the area.",
+        tooltip: 'This will make the TextArea auto expand it\'s height as the user is typing into the area.',
         weight: 415,
         conditional: {
             json: {
                 '==': [
                     { var: 'data.editor' },
-                    '',
-                ],
-            },
-        },
+                    ''
+                ]
+            }
+        }
     },
     {
         type: 'checkbox',
@@ -75,18 +75,18 @@ export default [
                     {
                         '===': [
                             { var: 'data.editor' },
-                            'quill',
+                            'quill'
                         ],
                     },
                     {
                         '===': [
                             { var: 'data.editor' },
-                            'ckeditor',
+                            'ckeditor'
                         ],
-                    },
-                ],
-            },
-        },
+                    }
+                ]
+            }
+        }
     },
     {
         type: 'select',
@@ -102,18 +102,18 @@ export default [
             custom() {
                 return _.map(Formio.Providers.getProviders('storage'), (storage, key) => ({
                     label: storage.title,
-                    value: key,
+                    value: key
                 }));
-            },
+            }
         },
         conditional: {
             json: {
                 '===': [
                     { var: 'data.isUploadEnabled' },
-                    true,
-                ],
-            },
-        },
+                    true
+                ]
+            }
+        }
     },
     {
         type: 'textfield',
@@ -122,15 +122,10 @@ export default [
         label: 'Image Upload Url',
         weight: 415.3,
         placeholder: 'Enter the url to post the files to.',
-        tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.",
+        tooltip: 'See <a href=\'https://github.com/danialfarid/ng-file-upload#server-side\' target=\'_blank\'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.',
         conditional: {
-            json: {
-                '===': [
-                    { var: 'data.uploadStorage' },
-                    'url',
-                ],
-            },
-        },
+            json: { '===': [{ var: 'data.uploadStorage' }, 'url'] }
+        }
     },
     {
         type: 'textarea',
@@ -146,14 +141,11 @@ export default [
     }`,
         conditional: {
             json: {
-                '===': [
-                    {
-                        var: 'data.uploadStorage',
-                    },
-                    'url',
-                ],
-            },
-        },
+                '===': [{
+                        var: 'data.uploadStorage'
+                    }, 'url']
+            }
+        }
     },
     {
         type: 'textfield',
@@ -167,10 +159,10 @@ export default [
             json: {
                 '===': [
                     { var: 'data.isUploadEnabled' },
-                    true,
-                ],
-            },
-        },
+                    true
+                ]
+            }
+        }
     },
     {
         type: 'textfield',
@@ -184,27 +176,21 @@ export default [
         conditional: {
             json: {
                 and: [
-                    {
-                        '===': [
+                    { '===': [
                             { var: 'data.editor' },
-                            'quill',
-                        ],
-                    },
-                    {
-                        '===': [
+                            'quill'
+                        ] },
+                    { '===': [
                             { var: 'data.isUploadEnabled' },
-                            true,
-                        ],
-                    },
-                    {
-                        '===': [
+                            true
+                        ] },
+                    { '===': [
                             { var: 'data.uploadStorage' },
-                            'url',
-                        ],
-                    },
-                ],
-            },
-        },
+                            'url'
+                        ] },
+                ]
+            }
+        }
     },
     {
         type: 'select',
@@ -218,28 +204,24 @@ export default [
             values: [
                 { label: 'String', value: 'string' },
                 { label: 'JSON', value: 'json' },
-                { label: 'HTML', value: 'html' },
-            ],
+                { label: 'HTML', value: 'html' }
+            ]
         },
         conditional: {
             json: {
                 or: [
-                    {
-                        '===': [
+                    { '===': [
                             { var: 'data.editor' },
-                            'quill',
-                        ],
-                    },
-                    {
-                        '===': [
+                            'quill'
+                        ] },
+                    { '===': [
                             { var: 'data.editor' },
-                            'ace',
-                        ],
-                    },
-                ],
-            },
+                            'ace'
+                        ] }
+                ]
+            }
         },
-        weight: 416,
+        weight: 416
     },
     {
         type: 'textarea',
@@ -256,27 +238,21 @@ export default [
         conditional: {
             json: {
                 or: [
-                    {
-                        '===': [
+                    { '===': [
                             { var: 'data.editor' },
-                            'ace',
-                        ],
-                    },
-                    {
-                        '===': [
+                            'ace'
+                        ] },
+                    { '===': [
                             { var: 'data.editor' },
-                            'ckeditor',
-                        ],
-                    },
-                    {
-                        '===': [
+                            'ckeditor'
+                        ] },
+                    { '===': [
                             { var: 'data.editor' },
-                            'quill',
-                        ],
-                    },
-                ],
-            },
+                            'quill'
+                        ] },
+                ]
+            }
         },
-        weight: 417,
-    },
+        weight: 417
+    }
 ];

package/lib/mjs/components/textarea/editForm/TextArea.edit.validation.js

@@ -6,7 +6,7 @@ export default [
         placeholder: 'Minimum Word Length',
         type: 'number',
         tooltip: 'The minimum amount of words that can be added to this field.',
-        input: true,
+        input: true
     },
     {
         weight: 126,
@@ -15,6 +15,6 @@ export default [
         placeholder: 'Maximum Word Length',
         type: 'number',
         tooltip: 'The maximum amount of words that can be added to this field.',
-        input: true,
-    },
+        input: true
+    }
 ];

package/lib/mjs/components/textfield/TextField.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: TextFieldEditDisplay,
+            components: TextFieldEditDisplay
         },
         {
             key: 'data',
-            components: TextFieldEditData,
+            components: TextFieldEditData
         },
         {
             key: 'validation',
-            components: TextFieldEditValidation,
+            components: TextFieldEditValidation
         },
     ], ...extend);
 }