react-app-starterkit icon indicating copy to clipboard operation
react-app-starterkit copied to clipboard

Content component with CKEditor5 (Some CKEditor 5 modules are duplicated)

Open orun028 opened this issue 1 year ago • 0 comments

I created a package for my project from https://ckeditor.com/ckeditor-5/online-builder/ Use with package.json file

"dependencies": {
    "@ckeditor/ckeditor5-react": "^5.0.2",
    "ckeditor5-custom-build": "file:./packages/ckeditor5-custom-build",
    "@formio/contrib": "^2.0.0",
    "@formio/react": "^5.3.0-rc.2"
}

Error because CKEditor has already rendered And Warning: ace.js:1 misspelled option "isUseWorkerDisabled" And Sometimes errors Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.form.io/ace/1.4.12/worker-json.js' failed to load.

import './eform.scss';
import { FormBuilder, Formio } from '@formio/react';
import React, { FC } from 'react';
import FormioContrib from "@formio/contrib";

Formio.use(FormioContrib);

interface IEFormBuilderPage {
    form?: any
    onChange: (value: any) => void
}

const EFormBuilderPage: FC<IEFormBuilderPage> = ({ form, onChange }) => {

    const onFormChange = (schema: any) => {
        onChange({ ...schema, components: [...schema.components] });
    };
    return form ? <Isolate>
        <FormBuilder
            form={form}
            onChange={onFormChange} 
            options={{
                builder: {
                    resource: false,
                    advanced: false,
                    premium: false,
                    layout: {
                        components: {
                            table: true
                        }
                    },
                    data: false,
                    basic: {
                        components: {
                            checkmatrix: false
                        }
                    }
                }
            }}/>
    </Isolate> : <></>
}

class Isolate extends React.Component {
    shouldComponentUpdate() {
        return false // prevent parent state changes from re-rendering FormBuilder
    }
    render() {
        return <React.Fragment>
            {this.props.children}
        </React.Fragment>
    }
}

export default EFormBuilderPage;

orun028 avatar Oct 02 '23 07:10 orun028