Toolbar Items Configuration Doesn't Work

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

As per https://ckeditor.com/docs/ckeditor4/latest/features/toolbarconcepts.html#item-by-item-configuration you are supposed to be able to customize whether individual toolbar buttons appear, like so (JSON taken directly from that page):

{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },

However, if you put that exact JSON (inside a toolbarGroups array prop) you get an error, because the first line (a = a.render(c, f);) of this minified code:

var E = function (a) {
a = a.render(c, f);
F = x.items.push(a) - 1;
0 < F &&
((a.previous = x.items[F - 1]),
(a.previous.next = a));
a.toolbar = x;
a.onkey = h;
a.onfocus = function () {
c.toolbox
  .focusCommandExecuted ||
  c.focus();
};
};

is trying to run the string "Cut" as if it were an object with a render function (but of course, as a string it has none), resulting in:

ckeditor.js:formatted:15566 Uncaught TypeError: a.render is not a function

Using the exact same config, except with groups instead of items:

{ name: 'clipboard', groups: ['clipboard', 'undo'] },

... produces no such error.

Expected result

JSON taken directly from a CK Editor documentation page should surely work in the React CK Editor, no?

Actual result

The described error.

Other details

Browser: Chrome
OS: Linux
Integration version: ?
CKEditor version: "ckeditor4-react": "^2.1.0",
Installed CKEditor plugins: None

P.S. If I use an empty items array, ie. { name: 'clipboard', items: [] } it avoids the error ... which makes sense since it never has anything to iterate over and try to call a.render() on.

Thanks for your report!

As far as I can see, the config option used in the docs section you are referring to is called toolbar rather than toolbarGroups. Using that toolbar config option in CKEditor4 React works correctly:

<CKEditor
    debug={true}
    config={{
        toolbar: [
            { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
        ]
    }}
    initData="<p>Hello <strong>world</strong>!</p>"
/>

If you still believe the documentation on this matter is unclear or incorrect, please raise an issue in https://github.com/ckeditor/ckeditor4 repo rather than here. ckeditor4-react package simply passes configuration options to underlying CKEditor4 constructor, so it's rather unlikely that any bugs in this regard would be introduced by the React integration itself.

ckeditor / ckeditor4-react