CKEditor 5 Custom Build - When integrated with React causing the below error

[gourav-ambekar]

📝 Provide detailed reproduction steps (if any)

1. I have created custom build with necessary plugins from Online Builder.
2. I wanted Placeholder feature as well so followed CKEditor 5 Inline widget docs.
3. It is working fine in Html file
   
4. But, When I use the same build/ckeditor.js in React using @ckeditor/ckeditor5-react, It is causing the below error.
   TypeError: Cannot add property name, object is not extensible at new o (ckeditor.js:76) at Function.rethrowUnexpectedError (ckeditor.js:94) at El.fire (ckeditor.js:1367) at El.addMany (ckeditor.js:1513) at El.add (ckeditor.js:1505) at Zd (ckeditor.js:22251) at rh._createGroupedItemsDropdown (ckeditor.js:22497)

✔️ Expected result

Before integrating Placeholder plugin It was loading correctly.

❌ Actual result

What is the actual result of the above steps?
TypeError: Cannot add property name, object is not extensible at new o (ckeditor.js:76) at Function.rethrowUnexpectedError (ckeditor.js:94) at El.fire (ckeditor.js:1367) at El.addMany (ckeditor.js:1513) at El.add (ckeditor.js:1505) at Zd (ckeditor.js:22251) at rh._createGroupedItemsDropdown (ckeditor.js:22497)

📃 Other details

import React, { useState } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
const editorConfiguration = {
  toolbar: {
    items: [
      'heading',
      '|',
      'fontSize',
      'fontFamily',
      '|',
      'bold',
      'italic',
      '|',
      'alignment',
      '|',
      'numberedList',
      'bulletedList',
      '|',
      'indent',
      'outdent',
      '|',
      'link',
      'blockQuote',
      'imageUpload',
      'insertTable',
      'mediaEmbed',
      '|',
      'undo',
      'redo',
      'placeholder',
    ],
  },
  image: {
    toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side'],
  },
  table: {
    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
  },
  placeholderConfig: {
    types: ['Name', 'DOB'],
  },
};
const CKEditor = (props: CKEditorProps) => {
   const [content, setContent] = useState(props.value || '');
  return (
      <CKEditor
        editor={Editor}
        config={editorConfiguration}
        data={content}
        onChange={(event, editor) => {
          setContent(editor.getData());
          props.updateFormData(content);
        }}
        onInit={editor => {
          window.editor = editor;
        }}
      />
  );
};
export default CKEditor;

---

https://stackoverflow.com/questions/65949809/ckeditor-5-custom-build-when-integrated-with-react-causing-the-below-error

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mgsy]

Hi, did you follow our guide about integrating builds created in the online builder with React?

[ga521]

Hi @Mgsy Sorry it was my bad. There was mix of v23.0 dependencies with v3.0.0 react. I resolved it by updating the correct version dependencies.

The new issue I am facing now is, I am using redux form and CKEditor is one of redux fields. Whenever I place the cursor in textarea it is asking me to select first element in toolbar. I guess this is due to the focus ui element, can yoy help me out in resolving this.

[Mgsy]

Hi @Mgsy Sorry it was my bad. There was mix of v23.0 dependencies with v3.0.0 react. I resolved it by updating the correct version dependencies.

I'm glad you managed to solve the issue.

The new issue I am facing now is, I am using redux form and CKEditor is one of redux fields. Whenever I place the cursor in textarea it is asking me to select first element in toolbar. I guess this is due to the focus ui element, can yoy help me out in resolving this.

As the original problem has been solved, I'd like to close this ticket. Could you please create a new issue for a new problem and provide a detailed description of your problem with steps to reproduce?