Ckeditor5: parcel support

[ocavue]

This issue is a feature request.

It seems that ckeditor 5 only support webpack for now. Does ckeditor have any plan to support parcel?

BTW, if you are interesting to it, there is the error when I try to build ckeditor 5 framework with parcel:

$ ./node_modules/.bin/parcel index.html
Server running at http://localhost:1234
🚨  /my_project/node_modules/@ckeditor/ckeditor5-ui/src/componentfactory.js: /my_project/node_modules/@ckeditor/ckeditor5-ui/src/componentfactory.js: unknown Statement of type "ForOfStatement"
    at Emitter.Ep.explodeStatement (/my_project/node_modules/regenerator-transform/lib/emit.js:648:13)
    at /my_project/node_modules/regenerator-transform/lib/emit.js:344:12
    at Array.forEach (<anonymous>)
    at Emitter.Ep.explodeStatement (/my_project/node_modules/regenerator-transform/lib/emit.js:343:22)
    at Emitter.Ep.explode (/my_project/node_modules/regenerator-transform/lib/emit.js:298:40)
    at PluginPass.exit (/my_project/node_modules/regenerator-transform/lib/visit.js:122:15)
    at newFn (/my_project/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/my_project/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/my_project/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/my_project/node_modules/babel-traverse/lib/path/context.js:117:8)

[Reinmar]

Hi!

The Advanced setup guide explains the minimal configuration which is needed to build CKEditor 5. It talks about webpack, but these 3 points should help you understand what needs to be configured in general:

You can now configure webpack. There are a couple of things that you need to take care of when building CKEditor:

• Handling CSS files of the CKEditor theme. They are included in the CKEditor sources using import 'path/to/styles.css' statements, so you need proper loaders.
• Similarly, you need to handle bundling SVG icons, which are also imported directly into the source. For that you need the raw-loader.
• Finally, to localize the editor you need to use the @ckeditor/ckeditor5-dev-webpack-plugin webpack plugin.

I don't know parcel but assuming that it implements some similar mechanism to webpack's loaders, you can easily handle the point about SVG files.

The CSS files are a bigger problem. We use PostCSS with a couple of standard plugins. However, we also needed to implement our own custom plugin for it. @oleq will tell you more what it does and whether it's possible to leave without it.

Finally, there's localisation. If you want to use CKEditor 5 in English, then you don't need to do anything. If you, however, want to have it localised, then you'd need to port the @ckeditor/ckeditor5-dev-webpack-plugin to parcel. I'm afraid that this may be tough.

---

Please note that unless you want to integrate with CKEditor 5 very closely, there are other methods to include CKEditor 5 into your app. See my comments in https://github.com/ckeditor/ckeditor5/issues/987#issuecomment-383501672.

[oleq]

The CSS files are a bigger problem. We use PostCSS with a couple of standard plugins. However, we also needed to implement our own custom plugin for it. @oleq will tell you more what it does and whether it's possible to leave without it.

It's the theme importer plugin we're talking about.

Every single UI component of the editor comes with some CSS. But that's only the wireframe. To make it look like an actual button/dropdown/input, a theme is required.

ATM we have only one theme https://github.com/ckeditor/ckeditor5-theme-lark. What the theme importer plugin does is glue the wireframe CSS files with the theme CSS files, that's all.

This importer plugin and other PostCSS essentials are wrapped in the getPostCssConfig helper which generates the PostCSS-readable configuration.

At some point, you have to import getPostCssConfig() and pass its output to PostCSS in your bundler, e.g.

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

...

somePostCssOptions: styles.getPostCssConfig( {
    themeImporter: {
        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
    },
    minify: true
} )

though I'm not sure what does it look like in parcel. It looks like the configuration is in the .postcssrc.js file. You could use getPostCssConfig() there, I guess.

[ocavue]

Thanks for your reply. Your explanations are really helpful.

[ThaddeusJiang]

@ocavue can you share your solution? Thanks.

[ocavue]

@ThaddeusJiang I didn't find out a solution in the end so I switch to webpack. Sorry about that.

I will keep this issue open in case someone figures it out in the future.

[ThaddeusJiang]

@ocavue Thank you very much.

[ThaddeusJiang]

@ocavue Hi, brother.
Now, the CKEditor 5 can work in project with parcel .
I created a custom builds.

see: https://github.com/ThaddeusJiang/ckeditor5-build-blueberry

[ocavue]

Just did some work. I found out that parcel can't import postcss-import. Both import PI from 'postcss-import' and const PI = 'postcss-import' will cause Uncaught TypeError: Cannot convert undefined or null to object in chrome's console.

I get this error because getPostCssConfig use postcss-import. As what @oleq said, I have to deal with getPostCssConfig. So that's where I have to stop.

Maybe https://github.com/parcel-bundler/parcel/issues/329 is related but I'm not sure.