@formio/js 5.2.3 → 5.2.4-rc.0

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,15 +126,20 @@ 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.
@@ -143,7 +148,8 @@ 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;
@@ -158,20 +164,22 @@ 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
@@ -185,8 +193,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);
@@ -220,29 +228,30 @@ 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);
@@ -259,8 +268,7 @@ 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);
                                 });
@@ -282,18 +290,27 @@ 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) {
@@ -301,7 +318,9 @@ 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);
@@ -362,8 +381,7 @@ 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;
             });
@@ -373,7 +391,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'));
@@ -381,8 +399,7 @@ 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);
             });
         }));
@@ -442,7 +459,8 @@ 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);
         }
@@ -474,7 +492,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) {
@@ -495,7 +513,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             try {
                 value = JSON.parse(value);
             }
-            catch (err) {
+            catch (ignoreErr) {
                 // console.warn(err);
             }
         }
@@ -503,14 +521,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();
     }
@@ -525,29 +543,35 @@ 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,10 +122,15 @@ 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',
@@ -141,11 +146,14 @@ export default [
     }`,
         conditional: {
             json: {
-                '===': [{
-                        var: 'data.uploadStorage'
-                    }, 'url']
-            }
-        }
+                '===': [
+                    {
+                        var: 'data.uploadStorage',
+                    },
+                    'url',
+                ],
+            },
+        },
     },
     {
         type: 'textfield',
@@ -159,10 +167,10 @@ export default [
             json: {
                 '===': [
                     { var: 'data.isUploadEnabled' },
-                    true
-                ]
-            }
-        }
+                    true,
+                ],
+            },
+        },
     },
     {
         type: 'textfield',
@@ -176,21 +184,27 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { '===': [
+                    {
+                        '===': [
                             { var: 'data.editor' },
-                            'quill'
-                        ] },
-                    { '===': [
+                            'quill',
+                        ],
+                    },
+                    {
+                        '===': [
                             { var: 'data.isUploadEnabled' },
-                            true
-                        ] },
-                    { '===': [
+                            true,
+                        ],
+                    },
+                    {
+                        '===': [
                             { var: 'data.uploadStorage' },
-                            'url'
-                        ] },
-                ]
-            }
-        }
+                            'url',
+                        ],
+                    },
+                ],
+            },
+        },
     },
     {
         type: 'select',
@@ -204,24 +218,28 @@ 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',
@@ -238,21 +256,27 @@ 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);
 }