[CKEditor5] New installation method can't be customized

[mibs-pal]

Description

Previously it was possible to customize CKEditor5Integration since you could do something like

import MathTypePlugin from '@wiris/mathtype-ckeditor5';
import Integration from '@wiris/mathtype-ckeditor5/src/integration';

class MyIntegration extends Integration {
  insertMathml(mathml: string) {
    console.log("Custom insertMathml here")
  }
}

export default class MyPlugin extends MathTypePlugin {
  _addIntegration() {
    return new MyIntegration()
  }
}

This is not possible anymore with your new installation method (import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';) because CKEditor5Integration (and other classes that are exported in the old installation method, but not in the new one) are not exported from that file.

And combining it with old installation methods doesn't work either, likely because of many reasons, one being that MathTypeCommand throws an error if CKEditor5Integration if the integration extends another class which it is, since the class in the dist version is not the same as the source version

import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';
import Integration from '@wiris/mathtype-ckeditor5/src/integration';

class MyIntegration extends Integration {
  insertMathml(mathml: string) {
    // Custom handling here
  }
}

export default class MyPlugin extends CKEditor5Integration {
  _addIntegration() {
    return new MyIntegration()
  }
}

Environment

Using

"@wiris/mathtype-ckeditor5": "^8.11.0",
"@wiris/mathtype-html-integration-devkit": "^1.17.4",
"ckeditor5": "^43.1.0"

on Google Chrome, Version 128.0.6613.120 (Official Build) (arm64), MacOS 14.5

Steps to reproduce

Use the example above. In _addIntegration you can add the same code as in the original function but replace integration = new CKEditor5Integration(integrationProperties); with MyIntegration

Expected result

You should be able to use MathType and see Custom insertMathml here in the console when inserting

Actual result

Error in the console: 'Must pass a valid CKEditor5Integration instance as attribute "integration" of options'

Other details

Something like this will likely solve the issue?

export {default as CKEditor5Integration} from './integration'
// And why not export the rest too (since they are available using legacy install method and exported in the package.json file)?
export * from './commands'

in https://github.com/wiris/html-integrations/blob/4bc9bffd9a87ae2560621777f23e97994027d153/packages/ckeditor5/src/index.js

[carla-at-wiris]

Hello @mibs-pal, thank you for writing us!

Your proposal seems possible. The team will conduct an investigation and let you know what the final solution is once it's released. Any further issues, please feel free to contact us or write an email to our support team at [email protected].

[amitjangid12]

@mibs-pal and @carla-at-wiris https://stackoverflow.com/questions/79128860/hook-js608-error-tracking-opened-mtct-editor-typeerror-cannot-read-properties this type error is occur when we using wiris mathtype in reactjs, how to resolve this

[carla-at-wiris]

Hello, this should be fixed in the latest version: 8.13.1. Thank you!

[amitjangid12]

but with this version used then occurring other issue- When I insert a math equation and then copy and paste it, the equation gets pasted twice. This issue is being faced.

On Tue, 18 Mar 2025 at 15:43, Carla Lara @.***> wrote:

Closed #1008 https://github.com/wiris/html-integrations/issues/1008 as completed.

— Reply to this email directly, view it on GitHub https://github.com/wiris/html-integrations/issues/1008#event-16828337192, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3YG2R3JHZPPHZLEPGRYC6D2U7WS7AVCNFSM6AAAAABOAUZMBOVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJWHAZDQMZTG4YTSMQ . You are receiving this because you commented.Message ID: @.***>

-- Amit