add custom button to linkUI of CKEditor5

Kunstmaan · Nov 13, 2020 · 85ff439 · 85ff439
1 parent ee074a2
commit 85ff439
Show file tree

Hide file tree

Showing 75 changed files with 3,635 additions and 1,890 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,5 +11,6 @@
   "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"]
 }
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,5 +1,8 @@
 {
     "extends": ["./node_modules/@kunstmaan/stylelint-config/index.js"],
     "rules": {
-    }
+    },
+    "ignoreFiles": [
+        "**/*.js"
+    ]
 }
diff --git a/groundcontrol/admin-bundle.tasks.js b/groundcontrol/admin-bundle.tasks.js
@@ -1,50 +1,65 @@
 /* eslint-env node */
-
 import gulp from 'gulp';
 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: [
@@ -60,18 +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',
-        `${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',
@@ -87,7 +103,7 @@ adminBundle.tasks.bundle = createBundleTask({
                 },
                 {
                     test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
-                    use: [ 'raw-loader' ]
+                    use: ['raw-loader'],
                 },
                 {
                     test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
@@ -97,27 +113,28 @@ adminBundle.tasks.bundle = createBundleTask({
                             options: {
                                 injectType: 'singletonStyleTag',
                                 attributes: {
-                                    'data-cke': true
-                                }
-                            }
+                                    'data-cke': true,
+                                },
+                            },
                         },
                         {
                             loader: 'postcss-loader',
-                            options: styles.getPostCssConfig( {
+                            options: styles.getPostCssConfig({
                                 themeImporter: {
-                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+                                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
                                 },
-                                minify: true
-                            } )
+                                sourceMap: true,
+                            }),
                         },
-                    ]
-                }
-            ]
+                    ],
+                },
+            ],
         },
         plugins: [
             new CKEditorWebpackPlugin({
-                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                 language: 'en',
+                additionalLanguages: 'all',
+                outputDirectory: 'cke-translations',
             }),
         ],
     },
@@ -128,12 +145,15 @@ adminBundle.tasks.bundleOptimized = createBundleTask({
         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: {
@@ -143,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: {
@@ -171,11 +228,11 @@ adminBundle.tasks.bundlePolyfills = createBundleTask({
                     exclude: /node_modules/,
                     loader: 'babel-loader',
                     query: getBabelLoaderOptions({
-                        optimize: true
-                    })
-                }
-            ]
-        }
+                        optimize: true,
+                    }),
+                },
+            ],
+        },
     },
-    logStats: true
+    logStats: true,
 });
diff --git a/groundcontrol/tasks/bundle.js b/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) {

diff --git a/groundcontrol/tasks/scripts.js b/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));
     };