Ckeditor5: Font plugin is not working in laravel mix

[RezaT1994]

📝 Provide detailed reproduction steps (if any)

1. I followed exactly from the Building from source - and "Running the editor – method 1"

2. Then I installed the Font plugin and added to the build like this

import Font from '@ckeditor/ckeditor5-font/src/font';

ClassicEditor.builtinPlugins = [
    ...
    Font
];

ClassicEditor.defaultConfig = {
    ...
    toolbar: {
        items: [
            ...
            'fontFamily',
        ]
    }
    ...
};

✔️ Expected result

Font plugin should work

❌ Actual result

I got this error:

Uncaught (in promise) TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.<anonymous> (observablemixin.js:255)
    at IconView.fire (emittermixin.js:209)
    at IconView.<computed> [as render] (observablemixin.js:259)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:204)
    at ViewCollection.<anonymous> (viewcollection.js:65)
    at ViewCollection.fire (emittermixin.js:209)
    at ViewCollection.add (collection.js:202)
    at DropdownButtonView.render (buttonview.js:181)

📃 Other details

I'm using webpack mix in laravel and I got this in output of the build

fonts/vendor/@ckeditor/ckeditor5-theme/icons/font-background.svg?2481763bb191bf3bc5ecaf4dff827960  284 bytes                                                    [emitted]        
     fonts/vendor/@ckeditor/ckeditor5-theme/icons/font-color.svg?92db021c0028be340b90c9b45f4f0695  223 bytes                                                    [emitted]        
    fonts/vendor/@ckeditor/ckeditor5-theme/icons/font-family.svg?6f2349d59306c27bdeb0796c1d1a6cc0  362 bytes                                                    [emitted]        
      fonts/vendor/@ckeditor/ckeditor5-theme/icons/font-size.svg?2e41af159c9303b97114585347345bd3  409 bytes                                                    [emitted]        

Other plugins like BoldPlugin, LinkPlugin, ListPlugin, Alignment are working. but when I added the Font plugin I got that error.

[FilipTokarski]

Hi, thanks for the report. Seems like webpack has problems with svg icons - I'd advise double checking webpack config and if you don't want to modify webpack, you can use Online Builder to get an already built editor with all the plugins you need. If you'll still encounter problems, please provide your webpack and editor configuration, so we could look into this.

[RezaT1994]

Thank you for the reply.
Here is my webpack.config.js and ckeditor config:

const defaultConfig = require("laravel-mix/setup/webpack.config.js");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

const ckeditor5_pattern = {
    svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
};

defaultConfig.module.rules.map(rule => {
    for (let key in ckeditor5_pattern) {
        if (`test.${key}`.match(rule.test)) {
            if (rule.exclude) {
                if (rule.exclude instanceof Array)
                    rule.exclude.push(ckeditor5_pattern[key]);
                else rule.exclude = [rule.exclude, ckeditor5_pattern[key]];
            } else rule.exclude = ckeditor5_pattern[key];
        }
    }

    return rule;
});

const rules = [
    {
        test: ckeditor5_pattern["svg"],
        use: ["raw-loader"]
    },
    {
        test: ckeditor5_pattern["css"],
        use: [
            {
                loader: "style-loader",
                options: {
                    singleton: true
                }
            },
            {
                loader: "postcss-loader",
                options: styles.getPostCssConfig({
                    themeImporter: {
                        themePath: require.resolve(
                            "@ckeditor/ckeditor5-theme-lark"
                        )
                    },
                    minify: true
                })
            }
        ]
    }
];

defaultConfig.module.rules = defaultConfig.module.rules.concat(rules);

module.exports = defaultConfig;

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Font from '@ckeditor/ckeditor5-font/src/font';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    UploadAdapterPlugin,
    AutoformatPlugin,
    BoldPlugin,
    ItalicPlugin,
    BlockQuotePlugin,
    EasyImagePlugin,
    HeadingPlugin,
    ImagePlugin,
    ImageCaptionPlugin,
    ImageStylePlugin,
    ImageToolbarPlugin,
    ImageUploadPlugin,
    LinkPlugin,
    ListPlugin,
    ParagraphPlugin,
    Font,
    Alignment,
];

ClassicEditor.defaultConfig = {
    fontFamily: {
        options: [
        ],
        supportAllValues: true
    },
    toolbar: {
        items: [
            'heading',
            'fontFamily',
            '|',
            'alignment',
            '|',
            'bold',
            'italic',
            '|',
            'bulletedList',
            'numberedList',
            '|',
            'link',
            'imageUpload',
            '|',
            'blockQuote',
            '|',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    language: 'en'
};

[FilipTokarski]

Hi, sorry for late response. Did you see this discussion regarding Laravel Mix and Vue? Looks like a similar case with some solutions, so you can check if it helps.

[RezaT1994]

That doesn't help me. and I'm not using Vue.

[ibnujakaria]

Got the same problem when adding Font plugin.

Is there any solutions?