Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
orun028 opened this issue Oct 2, 2023 · 0 comments
Assignees

Comments

@orun028
Copy link

orun028 commented Oct 2, 2023

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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants