Wiris MathType plugin is not working with ckeditor5 in React/Vue

[mstermaaten]

Bug report

@ckeditor/ckeditor5-react: v1.1.3,
@wiris/mathtype-ckeditor5: v7.16.1,
....

I simply try to implement the MathType plugin following this documentation:

• https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
• https://ckeditor.com/docs/ckeditor5/latest/features/mathtype.html#usage

I'm getting an error and this only happens when i try to implement the MathType plugin. I'm not sure if i'm missing any config settings that i have to parse to
initialize the plugin but reading trough the documentation i'm not seeing anything i'm missing. Maybe I have to buy a licence or something??

📋 Steps to reproduce

1. Clone this Repo: https://github.com/mstermaaten/CKEditor-Issue
2. npm i && npm start

✅ Expected result

[Mgsy]

Hello, thank you for the report. I'm able to reproduce this issue - adding MathType plugin to the editor built from source with React triggers the error. It looks like some changes in Webpack config are required.

Steps to reproduce:

1. Follow the Integrating CKEditor 5 built from source guide.
2. Add MathType plugin to the editor.
3. Run the application.

We're in touch with Wiris about this issue.

[SudhirTrisys]

any alternative for the time being?

[mlewand]

This issue occurs also with vue too, see #2057.

[Silencer-1984]

Here's how I do it
file vue.config.js

  chainWebpack: config => {
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'))
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@wiris'))

 config.module
      .rule('cke-svg')
      .test(/theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader')

    config.module
      .rule('cke-css')
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(() => {

That's not all。Because mathtype does not match the current filtering rules, the icon cannot be found。

[nnabinh]

@duzhihao-github thanks a lot man, you saved my day!

I confirm that adding this line

svgRule.exclude.add(path.join(__dirname, 'node_modules', '@wiris'))

and by updating the cke-svg config rule from
/ckeditor5-[^/\\]+[/\]theme[/\]icons[/\][^/\\]+.svg$/
(as being described here) to
/theme[/\]icons[/\][^/\\]+.svg$/
it works great since all svg icons are loaded now

config.module
      .rule('cke-svg')
      .test(/theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader')

[mstermaaten]

Okay we are getting closer but it's not very clear for me how i can implement this also for React.
Anybody that can help me out here?
@nnabinh
@duzhihao-github
@Mgsy

[Silencer-1984]

@mstermaaten
Check the path to read the SVG file in webpack

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#ckeditor-5-built-from-source

[mstermaaten]

This is my first time i had to go add & change stuff in my webpack.config so i find it difficult to find where to add all these additional configs...
If anybody could show me how this would apply in a react webpack.config would be super awesome :)

[cy-nimitha-cherian]

Add two new elements to the exported object under the module.rules array (as new items of the oneOf array). These are SVG and CSS loaders required to handle the CKEditor 5 source:
{
test: /theme[/\]icons[/\][^/\\]+.svg$/,
use: [ 'raw-loader' ]
},
{
test: /ckeditor5-[^/\\]+[/\]theme[/\].+.css/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
]
},

Note the change: test: /theme[/\]icons[/\][^/\\]+.svg$/,

This works in React!!! (Mathtype and Chemtype) . Hope this helps! Thanks!

[Reinmar]

@mlewand did the recent changes with icons solve this issue?

[mstermaaten]

I've actually fixed this problem by:

and by updating the cke-svg config rule from:

/ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/

(as being described here) to:

/theme[/\]icons[/\][^/\]+.svg$/

it works great since all svg icons are loaded now

[Reinmar]

Hm... That makes sense. The problem comes from the fact that MathType comes in @wiris/mathtype-ckeditor5 and not @wiris/ckeditor5-mathtype. That's why the original regexp doesn't work.

I'll talk with guys from Wiris, maybe they'll be fine with renaming their package to follow the convention.

[tuannd255]

@mstermaaten Hello, I clone your app fixed this issues but I still error when run project. Can you support me fix it? Thank you!!!

[vmarcosp]

Hey everyone, any news about this issue? @tuannd255

[vmarcosp]

@tuannd255 I fixed this error making the file loader from the CRA config ignore icons from ckeditor plugins, something like:

svgRule.exclude.add(/theme[/\]icons[/\][^/\]+.svg$/)

Adding this line to your CRA config the file loader will ignore icons from any plugin that you are using with ckeditor.

[vmarcosp]

@Reinmar what do you think to add to the official docs a section to help people with similar problems with loaders and config for custom builds?

[vmarcosp]

@Reinmar Take a look at this PR please

[mohitsehgal]

Frankly this thread saved my day.!! Awesome

[Reinmar]

Hi all! This issue will be resolved with #8114. We want to change the default regexp that we're proposing to cover packages that are named sth-ckeditor5 too.