wiris / html-integrations

The official JavaScript library for MathType, the leading formula editor and equation writer for the web by Wiris
https://wiris.com/solutions/integrations/html-editors/
MIT License
78 stars 53 forks source link

[CKEditor5] New installation method can't be customized #1008

Open mibs-pal opened 2 months ago

mibs-pal commented 2 months ago

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 commented 2 months ago

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 support@wiris.com.

amitjangid12 commented 1 week ago

@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