Transpile CKEditor to ES5 using Webpack/Laravel mix - laravel

Question

CKEditor does not work in iOS 10 (Safari).
I have found a guide that describes how to transpile it to ES5 which should get it working. I try to make it work with Laravel. The guide is here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-building-to-es5-target
I try to make it work using Laravel Mix, but it is not my strongest skill, though I have tried. From Laravels doc, the problem may be solved with something like:
mix.webpackConfig({
resolve: {
module: {
rules: [
{
test: /ckeditor5-[^\/\\]+[\/\\].*\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [ require( '#babel/preset-env' ) ]
}
}
]
},
]
}
}
});
but I cannot get it to work.
I have also considered making a copy of webpack.config.js like explained here: https://laravel.com/docs/5.8/mix#custom-webpack-configuration
But again I get in doubt when I try to solve the issue (it's most related to the syntax). Have anyone tried to get CKEditor to work in Safari iOS 10 using Laravel?
In advance, thank you.

Answer 1

i know you asked for this long ago, but i stumbled into the same problem today.
i solved following the docs with a little trick, in your webpack.mix.js
const CKEditorWebpackPlugin = require( '#ckeditor/ckeditor5-dev-webpack-plugin' );
const CKEStyles = require('#ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'it'
})
],
module: {
rules: [
{
test: /ckeditor5-[^\/\\]+[\/\\].+\.js$/,
use: [
{
loader: 'babel-loader',
options: Config.babel()
}
]
},
{
test: CKERegex.svg,
use: [ 'raw-loader' ]
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('#ckeditor/ckeditor5-theme-lark')
},
minify: true
})
},
]
}
]
}
});
be sure to follow the documentation for installing the correct packages!