Text Area with CKEditor or Quill editor is not working when placed in Edit Grid

[prathipatipraveen]

Environment

• Vue-formio version: 5.0.0-rc.2
• Frontend framework: vue.js
• Vue version: ^3.3.4
• Browser: Firefox, Chrome

Steps to Reproduce

1. Place an Edit Grid in the form.
2. Add a Text Area with CKEditor to the Edit Grid
3. Add form to the vue component and render it using the form JSON.
4. Click on Add Another button of the Edit Grid and Enter text in the text area and format it and click on Save button of the Edit Grid.

Expected behavior

The Data should be persisted to the grid on clicking of Save button

Observed behavior

The control renders fine but when data is entered and clicked on Save button of the Edit Grid, getting the below error in console

This is the form schema

{
    "components": [
        {
            "label": "Edit Grid",
            "labelPosition": "top",
            "description": "",
            "tooltip": "",
            "customClass": "",
            "tabindex": "",
            "openWhenEmpty": false,
            "disableAddingRemovingRows": false,
            "conditionalAddButton": "",
            "hidden": false,
            "hideLabel": false,
            "autofocus": false,
            "disabled": false,
            "tableView": false,
            "modalEdit": false,
            "templates": {
                "header": "<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n          <div class=\"col-sm-2\">{{ component.label }}</div>\n        {% } %}\n      {% }) %}\n    </div>",
                "row": "<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n          <div class=\"col-sm-2\">\n            {{ getView(component, row[component.key]) }}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>",
                "footer": ""
            },
            "rowClass": "",
            "addAnother": "",
            "modal": false,
            "saveRow": "",
            "removeRow": "Cancel",
            "persistent": true,
            "inlineEdit": false,
            "protected": false,
            "dbIndex": false,
            "encrypted": false,
            "redrawOn": "",
            "clearOnHide": true,
            "customDefaultValue": "",
            "calculateValue": "",
            "calculateServer": false,
            "allowCalculateOverride": false,
            "validateOn": "change",
            "validate": {
                "required": false,
                "customMessage": "",
                "custom": "",
                "customPrivate": false,
                "json": "",
                "strictDateValidation": false,
                "multiple": false,
                "unique": false
            },
            "unique": false,
            "rowDrafts": false,
            "errorLabel": "",
            "key": "editGrid",
            "tags": [],
            "properties": {},
            "conditional": {
                "show": null,
                "when": null,
                "eq": "",
                "json": ""
            },
            "customConditional": "",
            "logic": [],
            "attributes": {},
            "overlay": {
                "style": "",
                "page": "",
                "left": "",
                "top": "",
                "width": "",
                "height": ""
            },
            "type": "editgrid",
            "input": true,
            "placeholder": "",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": null,
            "refreshOn": "",
            "widget": null,
            "showCharCount": false,
            "showWordCount": false,
            "allowMultipleMasks": false,
            "tree": true,
            "defaultOpen": false,
            "components": [
                {
                    "label": "Text Area",
                    "labelPosition": "top",
                    "placeholder": "",
                    "description": "",
                    "tooltip": "",
                    "prefix": "",
                    "suffix": "",
                    "widget": {
                        "type": "input"
                    },
                    "editor": "ckeditor",
                    "autoExpand": false,
                    "customClass": "",
                    "tabindex": "",
                    "autocomplete": "",
                    "hidden": false,
                    "hideLabel": false,
                    "showWordCount": false,
                    "showCharCount": false,
                    "autofocus": false,
                    "spellcheck": true,
                    "disabled": false,
                    "tableView": true,
                    "modalEdit": false,
                    "multiple": false,
                    "persistent": true,
                    "inputFormat": "html",
                    "protected": false,
                    "dbIndex": false,
                    "case": "",
                    "encrypted": false,
                    "redrawOn": "",
                    "clearOnHide": true,
                    "customDefaultValue": "",
                    "calculateValue": "",
                    "calculateServer": false,
                    "allowCalculateOverride": false,
                    "validateOn": "change",
                    "validate": {
                        "required": false,
                        "pattern": "",
                        "customMessage": "",
                        "custom": "",
                        "customPrivate": false,
                        "json": "",
                        "minLength": "",
                        "maxLength": "",
                        "minWords": "",
                        "maxWords": "",
                        "strictDateValidation": false,
                        "multiple": false,
                        "unique": false
                    },
                    "unique": false,
                    "errorLabel": "",
                    "key": "textArea2",
                    "tags": [],
                    "properties": {},
                    "conditional": {
                        "show": null,
                        "when": null,
                        "eq": "",
                        "json": ""
                    },
                    "customConditional": "",
                    "logic": [],
                    "fixedSize": true,
                    "overlay": {
                        "style": "",
                        "page": "",
                        "left": "",
                        "top": "",
                        "width": "",
                        "height": ""
                    },
                    "attributes": {},
                    "type": "textarea",
                    "rows": 3,
                    "wysiwyg": false,
                    "input": true,
                    "refreshOn": "",
                    "allowMultipleMasks": false,
                    "mask": false,
                    "inputType": "text",
                    "inputMask": "",
                    "id": "eadmfhj",
                    "defaultValue": null
                }
            ],
            "id": "etpezo2"
        }
    ],
    "display": "form",
    "page": 0,
    "numPages": 1
}

Here is the vue component

<script>
 import { Form } from '@formio/vue';
 import schema from '@/services/input' // this file has the above schema

 export default {
  components: {
    Form,
  },
  data() {
    return {
      formSchema: "",
      options: {}
    };
  },
  async created() {
   this.formSchema = schema;
  }
}
</script>

<template>
    <div>
    <Form :form="formSchema"></Form>
  </div>
</template>

When using Quill editor instead of CKEditor you cannot format the data but clicking on Save button will update that data in the grid. In the console you get the below error when you try to format the data using Quill editor

[lane-formio]

Could you provide any code sandbox to illustrate?