Can't add mathtype plugin locally in CKEditor

Question

import React from 'react'
import CKEditor4 from 'ckeditor4-react'

export default function App () {
  return (
    <CKEditor4
      data='<h1>hello</h1>'
      config={{
        extraPlugins: ['ckeditor_wiris'],
        allowedContent: true,
        height: 300,
        startupFocus: 'end',
        skin: 'moono'
      }}
      onBeforeLoad={(CKEDITOR) => {
        CKEDITOR.plugins.addExternal(
          'ckeditor_wiris',
          'https://www.wiris.net/demo/plugins/ckeditor/',
          'plugin.js'
        )
      }}
    />
  )
}

I created a react app using CRA, this code will render CKEditor with Mathtype plugin.

I want to use mathtype from this package, https://www.npmjs.com/package/@wiris/mathtype-ckeditor4, locally instead of the path https://www.wiris.net/demo/plugins/ckeditor/.

CKEDITOR.plugins.addExternal(
  'ckeditor_wiris',
  '../node_modules/@wiris/mathtype-ckeditor4/',
  'plugin.js'
)

But I'm getting an error when I change the mathtype path,

Answer 1

Since we can't directly access files from node_modules folder from CRA App, due to webpack configuration, we should copy @wiris/mathtype-ckeditor4/ folder to public folder at the build time.

To do that, first integrate react-app-rewired to customize webpack without ejecting it. And then install copy-webpack-plugin to copy files at a build time, finally inside config-overrides.js add this snippet to copy mathtype to mathtype-ckeditor4 folder inside public folder.,

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = function override (config, env) {
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [
        { from: 'node_modules/@wiris/mathtype-ckeditor4', to: 'mathtype-ckeditor4' }
      ]
    })
  )

  return config
}

Lastly change the code inside onBeforeLoad to this,

CKEDITOR.plugins.addExternal('ckeditor_wiris', '/mathtype-ckeditor4/', 'plugin.js')

This way we can install and use mathtype locally in CKEditor.