Ckeditor5-react: Configuration class property conflict

[amanshu-kataria]

I'm trying to set the editor configuration, but it gives an error.

<CKEditor
    editor={BaloonEditor}
    data={this.props.data}
    config={{
            toolbar: ["heading", "|", "bold", "italic"],
            heading: {
              options: [
                {
                  model: "paragraph",
                  title: "Paragraph",
                  class: "ck-heading_paragraph"
                }
              ]
            }
       }}
      onChange={(event, editor) => {
          const data = editor.getData();
          this.props.onChange(data);
     }}
   />

The class property of config.heading.options[0] conflicts with the JS class keyword. I tried using className, but that doesn't work.

[Reinmar]

class is not a reserved keyword nowadays. It was in ES3 times (see https://mathiasbynens.be/notes/javascript-properties). So, unless you're using some ES5+ incompatible tooling/browser, this property name should not be a problem.

[Reinmar]

One more thing that came to my mind – perhaps it's a reserved keyword in JSX?

[pomek]

React DOM uses camelCase property naming convention instead of HTML attribute names. For example, tabindex becomes tabIndex in JSX. The attribute class is also written as className since class is a reserved word in JavaScript:

https://reactjs.org/docs/glossary.html#jsx

[amanshu-kataria]

@pomek I tried className it didn't work.

[pomek]

I know because the heading plugin expects class. I am trying to reproduce it in my test app.

[pomek]

As a workaround you can save the configuration as a variable and use it directly in the component:

class App extends Component {
  render() {
    const editorConfig = {
      toolbar: [ "heading", "|", "bold", "italic" ],
      heading: {
        options: [
          {
            model: "paragraph",
            title: "Paragraph",
            class: "ck-heading_paragraph"
          }
        ]
      }
    };

    return (
      <div className="App">
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          config={editorConfig}
          onInit={editor => {
            // You can store the "editor" and use when it's needed.
            console.log( 'Editor is ready to use!', editor );
          }}
          onChange={( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data } );
          }}
        />
      </div>
    );
  }
}

[amanshu-kataria]

@pomek thanks, it worked :)

[pomek]

I reported a ticket about supporting className (https://github.com/ckeditor/ckeditor5-heading/issues/117).

[Reinmar]

This is JSX's problem (about which even I heard, taken my lack of experience with React). And there's a totally reasonable workaround, so I don't think we should be complicating CKEditor for all its users just because JSX has a problem with class. Therefore, I'm going to reject ckeditor/ckeditor5-heading#117.

[amanshu-kataria]

@Reinmar this (https://mathiasbynens.be/notes/reserved-keywords) says class is a keyword in ES6 as well.

[Reinmar]

Reserved keyword is not the same as a valid property name. It's a reserved keyword because you have class declarations in ES6.

[pomek]

I guess the problem has been solved. If you will have more questions - let us know.