[WIP][AdminBundle] Migrate CKEditor4 to CKEditor5

.eslintrc

@@ -2,13 +2,15 @@
   "root": true,
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jquery": true
   },
   "globals": {
     "dataLayer": "readonly"
   },
   "extends": ["./node_modules/@kunstmaan/eslint-config/index.js"],
   "rules": {
     "import/no-extraneous-dependencies": ["error", {"devDependencies": ["gulpfile.babel.js", "./groundcontrol/**/*.js"]}]
-  }
+  },
+  "ignorePatterns": ["**/AdminBundle/Resources/ui/js/*.js"]
 }

.stylelintrc

@@ -1,5 +1,8 @@
 {
     "extends": ["./node_modules/@kunstmaan/stylelint-config/index.js"],
     "rules": {
-    }
+    },
+    "ignoreFiles": [
+        "**/*.js"
+    ]
 }

docs/cookbook/defining-custom-ckeditor-configuration.md

@@ -1,5 +1,7 @@
 # Defining custom CKEditor configurations
 
+TODO: UPDATE DOC FOR CKEDITOR5
+
 Sometimes you want to limit or extend the possibilities of your rich text editor fields used in the Kunstmaan bundles admin.
 You can do so by following 3 easy steps.
 

groundcontrol/admin-bundle.tasks.js

@@ -1,48 +1,65 @@
 /* eslint-env node */
-
 import gulp from 'gulp';
-import webpack from 'webpack';
 import path from 'path';
+import CKEditorWebpackPlugin from '@ckeditor/ckeditor5-dev-webpack-plugin';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
+import TerserPlugin from 'terser-webpack-plugin';
 
 import consoleArguments from './console-arguments';
 
 import createEslintTask from './tasks/eslint';
 import createStylelintTask from './tasks/stylelint';
 import createCopyTask from './tasks/copy';
-import {createCssLocalTask, createCssOptimizedTask} from './tasks/css';
+import { createCssLocalTask, createCssOptimizedTask } from './tasks/css';
 import createScriptsTask from './tasks/scripts';
-import createBundleTask, {getBabelLoaderOptions} from './tasks/bundle';
+import createBundleTask, { getBabelLoaderOptions } from './tasks/bundle';
 
 export const adminBundle = {
     config: {
         srcPath: './src/Kunstmaan/AdminBundle/Resources/ui/',
         distPath: './src/Kunstmaan/AdminBundle/Resources/public/',
-        publicPath: '/bundles/kunstmaanadmin'
+        publicPath: '/bundles/kunstmaanadmin',
     },
-    tasks: {}
+    tasks: {},
 };
 
 adminBundle.tasks.eslint = createEslintTask({
     src: `${adminBundle.config.srcPath}jsnext/**/*.js`,
-    failAfterError: !consoleArguments.continueAfterTestError
+    failAfterError: !consoleArguments.continueAfterTestError,
 });
 
 adminBundle.tasks.stylelint = createStylelintTask({
     src: `${adminBundle.config.srcPath}scssnext/**/*.scss`,
 });
 
 adminBundle.tasks.copy = gulp.parallel(
-    createCopyTask({src: [`${adminBundle.config.srcPath}img/**`], dest: `${adminBundle.config.distPath}img`}),
-    createCopyTask({src: [`${adminBundle.config.srcPath}icons/**`], dest: `${adminBundle.config.distPath}icons`})
+    createCopyTask({
+        src: [`${adminBundle.config.srcPath}img/**`],
+        dest: `${adminBundle.config.distPath}img`,
+    }),
+    createCopyTask({
+        src: [`${adminBundle.config.srcPath}icons/**`],
+        dest: `${adminBundle.config.distPath}icons`,
+    }),
 );
 
-adminBundle.tasks.cssLocal = createCssLocalTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
-adminBundle.tasks.cssNextLocal = createCssLocalTask({src: `${adminBundle.config.srcPath}scssnext/*.scss`, dest: `${adminBundle.config.distPath}cssnext`});
-
-
+adminBundle.tasks.cssLocal = createCssLocalTask({
+    src: `${adminBundle.config.srcPath}scss/*.scss`,
+    dest: `${adminBundle.config.distPath}css`,
+});
+adminBundle.tasks.cssNextLocal = createCssLocalTask({
+    src: `${adminBundle.config.srcPath}scssnext/*.scss`,
+    dest: `${adminBundle.config.distPath}cssnext`,
+});
 
-adminBundle.tasks.cssOptimized = createCssOptimizedTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
-adminBundle.tasks.cssNextOptimized = createCssOptimizedTask({src: `${adminBundle.config.srcPath}scssnext/*.scss`, dest: `${adminBundle.config.distPath}cssnext`});
+adminBundle.tasks.cssOptimized = createCssOptimizedTask({
+    src: `${adminBundle.config.srcPath}scss/*.scss`,
+    dest: `${adminBundle.config.distPath}css`,
+});
+adminBundle.tasks.cssNextOptimized = createCssOptimizedTask({
+    src: `${adminBundle.config.srcPath}scssnext/*.scss`,
+    dest: `${adminBundle.config.distPath}cssnext`,
+});
 
 adminBundle.tasks.scripts = createScriptsTask({
     src: [
@@ -58,20 +75,19 @@ adminBundle.tasks.scripts = createScriptsTask({
         './node_modules/sortablejs/Sortable.js',
         './node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
         './node_modules/jquery.typewatch/jquery.typewatch.js',
-        './node_modules/ckeditor/ckeditor.js',
-        './node_modules/ckeditor/adapters/jquery.js',
-        `${adminBundle.config.srcPath}js/**/*.js`
+        `${adminBundle.config.srcPath}js/**/*.js`,
     ],
     dest: `${adminBundle.config.distPath}js`,
-    filename: 'admin-bundle.min.js'
+    filename: 'admin-bundle.min.js',
+    uglifyJs: !consoleArguments.speedupLocalDevelopment,
 });
 
 adminBundle.tasks.bundle = createBundleTask({
     config: {
         entry: `${adminBundle.config.srcPath}jsnext/app.js`,
         output: {
             filename: 'admin-bundle.next.js',
-            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`),
         },
         devtool: 'cheap-module-source-map',
         mode: 'development',
@@ -84,23 +100,60 @@ adminBundle.tasks.bundle = createBundleTask({
                     query: getBabelLoaderOptions({
                         transpileOnlyForLastChromes: consoleArguments.speedupLocalDevelopment
                     })
-                }
-            ]
-        }
-    }
+                },
+                {
+                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+                    use: ['raw-loader'],
+                },
+                {
+                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
+                    use: [
+                        {
+                            loader: 'style-loader',
+                            options: {
+                                injectType: 'singletonStyleTag',
+                                attributes: {
+                                    'data-cke': true,
+                                },
+                            },
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: styles.getPostCssConfig({
+                                themeImporter: {
+                                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
+                                },
+                                sourceMap: true,
+                            }),
+                        },
+                    ],
+                },
+            ],
+        },
+        plugins: [
+            new CKEditorWebpackPlugin({
+                language: 'en',
+                additionalLanguages: 'all',
+                outputDirectory: 'cke-translations',
+            }),
+        ],
+    },
 });
 
 adminBundle.tasks.bundleOptimized = createBundleTask({
     config: {
         entry: `${adminBundle.config.srcPath}jsnext/app.js`,
         output: {
             filename: 'admin-bundle.next.js',
-            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`),
 
         },
-        devtool: 'source-map',
         optimization: {
-            minimize: true
+            minimize: true,
+            minimizer: [new TerserPlugin({
+                sourceMap: false,
+                extractComments: false,
+            })],
         },
         mode: 'production',
         module: {
@@ -110,25 +163,62 @@ adminBundle.tasks.bundleOptimized = createBundleTask({
                     exclude: /node_modules/,
                     loader: 'babel-loader',
                     query: getBabelLoaderOptions({
-                        optimize: true
-                    })
-                }
-            ]
-        }
+                        transpileOnlyForLastChromes: consoleArguments.speedupLocalDevelopment,
+                    }),
+                },
+                {
+                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+                    use: ['raw-loader'],
+                },
+                {
+                    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
+                    use: [
+                        {
+                            loader: 'style-loader',
+                            options: {
+                                injectType: 'singletonStyleTag',
+                                attributes: {
+                                    'data-cke': true,
+                                },
+                            },
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: styles.getPostCssConfig({
+                                themeImporter: {
+                                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
+                                },
+                                minify: true,
+                            }),
+                        },
+                    ],
+                },
+            ],
+        },
+        plugins: [
+            new CKEditorWebpackPlugin({
+                language: 'en',
+                additionalLanguages: 'all',
+                outputDirectory: 'cke-translations',
+            }),
+        ],
     },
-    logStats: true
+    logStats: true,
 });
 
 adminBundle.tasks.bundlePolyfills = createBundleTask({
     config: {
         entry: ['babel-polyfill', `${adminBundle.config.srcPath}jsnext/polyfills.js`],
         output: {
             filename: 'admin-bundle-polyfills.js',
-            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`),
         },
-        devtool: 'source-map',
         optimization: {
-            minimize: true
+            minimize: true,
+            minimizer: [new TerserPlugin({
+                sourceMap: false,
+                extractComments: false,
+            })],
         },
         mode: 'production',
         module: {
@@ -138,11 +228,11 @@ adminBundle.tasks.bundlePolyfills = createBundleTask({
                     exclude: /node_modules/,
                     loader: 'babel-loader',
                     query: getBabelLoaderOptions({
-                        optimize: true
-                    })
-                }
-            ]
-        }
+                        optimize: true,
+                    }),
+                },
+            ],
+        },
     },
-    logStats: true
+    logStats: true,
 });

groundcontrol/tasks/bundle.js

@@ -1,18 +1,16 @@
 import webpack from 'webpack';
+
 /**
  * You can let webpack watch the files and rebundle on change, or you can do it
  * via gulp. Gulp will probably be easier at first, since you have to configure
  * multiple watches for the other src files as well.
  */
-export default function createBundleTask({config = undefined, watch = false, logStats = false}) {
+export default function createBundleTask({config = undefined, logStats = false}) {
     const compiler = webpack(config);
+    const devMode = config.mode === 'development';
 
     return function bundle(done) {
-        if (watch) {
-            compiler.watch({}, handleWebpackResult);
-        } else {
-            compiler.run(handleWebpackResult);
-        }
+        compiler.run(handleWebpackResult);
 
         function handleWebpackResult(err, stats) {
             if (err) {
@@ -26,11 +24,15 @@ export default function createBundleTask({config = undefined, watch = false, log
             const info = stats.toJson();
 
             if (stats.hasErrors()) {
-                console.error(info.errors);
+                if (devMode) {
+                    console.error('\x1b[31m%s\x1b[0m: ', info.errors.toString());
+                } else {
+                    throw Error(info.errors.toString());
+                }
             }
 
             if (stats.hasWarnings()) {
-                console.warn(info.warnings);
+                console.warn(info.warnings.toString());
             }
 
             if (logStats) {

groundcontrol/tasks/scripts.js

@@ -2,21 +2,30 @@ import gulp from 'gulp';
 import uglify from 'gulp-uglify';
 import concat from 'gulp-concat';
 import debug from 'gulp-debug';
+import { noop } from 'gulp-util';
 
 /**
  * Temporary scripts task.
  * This should be replaced by webpack to bundle the files
  */
 
-export default function createScriptsTask({ src = undefined, dest = undefined, filename = undefined }) {
+export default function createScriptsTask({
+    src = undefined,
+    dest = undefined,
+    filename = undefined,
+    uglifyJs = true,
+}) {
     return function scriptsLocal() {
-        return gulp.src(src)
+        return gulp
+            .src(src)
             .pipe(debug({ title: 'Building' }))
-            .pipe(uglify({
-                mangle: {
-                    except: ['jQuery']
-                }
-            }))
+            .pipe(uglifyJs
+                ? uglify({
+                    mangle: {
+                        except: ['jQuery'],
+                    },
+                })
+                : noop())
             .pipe(concat(filename))
             .pipe(gulp.dest(dest));
     };