Explore convienent way to integrate custom CKEditor 5 build with CRA app

[jodator]

I think that we can't escape a fact that CRA might be widely used in the development of React apps (#152, #166, #87). It provides worry-less project configuration and development setup for many flavors of the development like adding TypeScript support.

For now, and for the nearest future, CKEditor 5 will not fully support adding plugins to the build. We're somewhere in the road to that but, for instance, adding a widget functionality requires importing stuff.

We provide a way of integrating CKEditor build from source by eject from CRA. This operation is scary:

Note: this is a one-way operation. Once you eject, you can’t go back!

and maybe a no-go for some teams. There are alternatives to eject but requires some overhead.

React is widely used and I think that providing this integration is a good way to advertise CKEditor for many projects. However, our build process might not be suitable here.

Some options to consider:

1. Provide a custom template for CRA (might be a no-go as you can't combine templates, also I'm not sure how changing a template would work in existing CRA project anyway).
2. Explore a side build for the CRA project (
3. Explore creating a fork of the create-react-app (supporting own fork is beyond reason for us).
4. Prioritize Allow adding plugins to a CKEditor 5 build ckeditor5#667 a bit more (we've missed the opportunity for a good ticket number for that 😈 ).

For now, I'd go with 2 (as the least intrusive to CRA) and ckeditor/ckeditor5#667 4.

[Mgsy]

Some interesting stuff - https://medium.com/@adamerose/using-ckeditor-5-in-create-react-app-without-ejecting-cc24ffb3fd9c.

[KostiantynO]

Hello, everyone! I'm Kostia.
TLDR: please provide a plan to community, what needs to be done, to build from source without 'ejecting from CRA'.

Will you allow some icons and .css styles to block GREAT SOFTWARE from widespread adoption?
Think of it! This is your great editor!
If you consider people who uses CKEditor with Create React App a worthy users, I think you will find a way to catch this auditory!

You adding the 'powered by CKEditor' mark, telling that this step will increase the widespread of your editor.
But for some reason, you are not making the real steps to improve the widespread of your software - just compare - other libs from this list does not require to 'eject from CRA' for no reason:
https://npmtrends.com/ckeditor5-vs-draft-js-vs-lexical-vs-quill-vs-react-quill-vs-slate-vs-tinymce
And react-quill allows for easy customization of styles (just add higher specificity), but it does not have so many great features, like CKEditor has source editing - which is one of the TOP functions!

As a new dev myself, I come from CRA land, and by reading word 'eject' from CRA in your docs - it immediately throws me off and fires and major 🚩'RED FLAG', which causes thoughts
I'm using the right tool? I'm not so cool as these guys. I'm not ready to eject. They are probably some gods or what

Because I think there are not so many man and woman, who have the same iron balls / unbendable will as you.
Who want to willingly 'eject'?
Especially because of .css? Common, guys. you cannot be serious about that! Right :) ?

But styles and icons..., you definitely have more experience that me, but even I know that ejecting is not worth it.

I think the problem is in the style loading system. Maybe you can make it optional?
Because I personally does not care about styles at ALL.
I will replace all default editor styles anyway, because I want to use CRA with tailwind css with custom postcss config.

If icons is the real issue, why don't you use iconmoon to make a sprite?
What about solutions for icons. (svgo, svgr, .svg files, .jsx files, react-icons, sprites, inline icons) ?

I think, if you provide a real plan, what needs to be done in order to migrate to optional styles, it would be great!
Because I want use any styles and icons.
I want any options available for styling: vanilla css, scss, styled-components and MUI, tailwind css with postcss.
And definitely I do not want to eject because of styles!

Thank you for attention! It would be beneficial for CRA users of this lib, if you provide initial guidance for steps to improve (to remove the need to 'eject')!

I think, some people are willing to help you to migrate to optional styles/icons system, they just do not know where to start!

[Witoso]

Hey @KostiantynO, thanks for reaching out and sharing your feedback. I must say that your message sounds a bit passive-aggressive but I will take the benefit of the doubt here, and answer from the point of you caring about CKEditor.

As maintainers of the editor, we need to take into account multiple factors. This project is 8 years old, some decisions were made before React started to be a leading framework, esbuild was not created yet, etc. The editor itself is used in multiple different environments, frameworks, setups, and bundlers. And we need to try to be as agnostic as possible.

Speaking of bundlers, we've seen bundlers come and go in the JS world, and it's the additional point where we need to be extremely careful of attaching ourselves to the "proper way" of doing things. For example, CRA is now not recommended on the React side (they are not even linking to it in the docs), and probably will change its purpose (see: facebook/create-react-app#13072).

That being said, it's not that we haven't made mistakes or our approach has not become outdated. We are constantly discussing architecture and product challenges in the surrounding dev environment. But unfortunately, it's not as simple as creating a plan and sharing it with the community. The installation paths are one of the main topics currently @Reinmar is leading, and for sure your feedback will be taken into account.

Thanks again!

[KostiantynO]

@Witoso, yes, definitely! Thank you for good points!
Jeff from Fireship says it is hard to improve without a little pain, so forgive me a bit of aggressiveness here, consider it is for the benefit and progress of the CKEditor :)

I wanted to provide my thought process, as a dev who got familiar with CKEditor for the first time!

I also prefer Vite⚡, as it is faster :), but the curios side is - I got my hands on some existing code with CRA⚛ :)
Currently I didn't tried to migrate to Vite. As it would take time.

And I want to use CKEditor, because it provides source editing feature.
I want to find a way to enable this feature in React.
Is it possible to add section to the docs, how to enable it in React?

[Witoso]

It's the same as installing any other missing dependencies for a React project.

Btw if you're not comfortable with ejecting (which I understand), you can also have a separate build step for the editor. You store the editor in a separate folder, and in the react app you only import already built js.