Instructions for Compiling a Custom CKEditor 5 Module for Drupal 9/10

Below are my step-by-step instructions for what I did to get my Node environment working to compile a custom module for Drupal. Your mileage may vary - use at your own risk.

  1. Unpack the Drupal CKEditor5 Dev Tools [ https://git.drupalcode.org/project/ckeditor5_dev]

  2. Set up your module using the template

  3. Copy your plugin(s) into js/ckeditor_plugins/

  4. (Possibly Optional) Edit js/webpack.config.js, replacing the rules at the bottom with the following. I needed these extra rules due to including CSS files within my GT Buttons plugin.

             module: {
                     rules: [
                             {
                                     test: /\.svg$/,
                                     use: [ 'raw-loader' ]
                             },
                             {
                                     test: /\.css$/,
                                     use: [
                                             {
                                                     loader: 'style-loader',
                                                     options: {
                                                             injectType: 'singletonStyleTag',
                                                             attributes: { 'data-cke': true
                                                             }
                                                     }
                                             },
                                             {
                                                     loader: 'css-loader'
                                             },
                                             {
                                                     loader: 'postcss-loader',
                                                     options: {
                                                             postcssOptions: styles.getPostCssConfig( {
     								themeImporter: {
    									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                                                    },
                                                                    minify: true
                                                             } )
                                                     }
                                             },
                                     ]
                             }
                     ]
             }
    
  5. While in js/:

       # This creates the node_modules directory and populates it
       $ npm install yarn css-loader @ckeditor/ckeditor5-theme-lark
    
       # This updates modules that have security issues
       $ npm audit fix --force
    
       # This updates everything to the latest versions
       $ npm update
    
       # Not sure what this does or if it's necessary, but the dev tools README says to do it ...
       $ node_modules/.bin/yarn install

    (I would imagine there's a simpler way of doing this, as I'd have to think there's a way to install the most recent versions of everything from the start, rather than having to install and then update. That said, I haven't tried testing alternatives as I was satisfied with simply being able to get the stuff to compile at all.)

  6. To compile your plugin, from js/ run:

       # node_modules/.bin/webpack
  7. If all goes well, you should have compiled modules in the js/build/ directory

From here, you just make sure the Drupal module is configured to include this JavaScript file as part of a Drupal JS/CSS library, then set up a stanza in your MODULENAME.ckeditor5.yml file to define the plugin and point to that library so that Drupal can tell CKEditor 5 about it.

If the plugin provides a toolbar button, then you'll have to extract the button's SVG from the plugin and provide that via a CSS rule tied to the CSS class used by the button. This involves identifying the right classname to build the rule around, and then including that CSS via the library you created to load in the plugin's JavaScript file.