[CKEditor 5] import MathType 8.11.1 leads to duplicated editors using CKEditor 43.3.1 (version conflict)

[origani]

Description

When you import the MathType plugin in the CKEditor. import MathType from "@wiris/mathtype-ckeditor5/src/plugin" to my app.vue then make npm run start, then version.js:175 Uncaught CKEditorError: ckeditor-duplicated-modules

Environment

CKEditor '^43.3.1'.
MathType '^8.11.1'.

[amitjangid12]

If we use the latest versions of the following packages with CKEditor 5's new installation method:
ckeditor5 v43.3.1
ckeditor5-react v9.3.1
@wiris/mathtype-ckeditor5 v8.11.1
these errors occurs when we use wiris mathtype -
import Mathtype from "@wiris/mathtype-ckeditor5/dist/index"
below error screenshot and errors

https://v2res1-stag.assessprep.com/direct_uploads/attachments/01JD1FY4DCA0HS6JAR2KD57JZ4/image.png

Uncaught CKEditorError: Cannot read properties of undefined (reading 'trim')
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of undefined (reading 'trim')
at HtmlDataProcessor._toDom (chunk-ELVVGUN6.js?v=7bf6d07f:24121:61)
at HtmlDataProcessor.toView (chunk-ELVVGUN6.js?v=7bf6d07f:24085:30)
at createDataString (@wiris_mathtype-cked…v=7bf6d07f:10730:51)
at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20129:25)
at DowncastDispatcher.fire (chunk-ELVVGUN6.js?v=7bf6d07f:584:35)
at DowncastDispatcher._testAndFire (chunk-ELVVGUN6.js?v=7bf6d07f:17531:10)
at DowncastDispatcher._convertInsert (chunk-ELVVGUN6.js?v=7bf6d07f:17321:12)
at Object.convertItem (chunk-ELVVGUN6.js?v=7bf6d07f:17567:35)
at reinsertOrConvertNodes (chunk-ELVVGUN6.js?v=7bf6d07f:20814:21)
at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20138:5)

Uncaught (in promise) CKEditorError: editor-source-element-already-used
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-editor-source-element-already-used
at secureSourceElement (chunk-ELVVGUN6.js?v=7bf6d07f:37929:11)
at new InlineEditor (ckeditor5.js?v=7bf6d07f:9922:7)
at ckeditor5.js?v=7bf6d07f:10040:22
at new Promise ()
at InlineEditor.create (ckeditor5.js?v=7bf6d07f:10036:12)
at CKEditor._createEditor (@ckeditor_ckeditor5-react.js?v=7bf6d07f:1062:30)
at EditorWatchdog._creator (@ckeditor_ckeditor5-react.js?v=7bf6d07f:1023:35)
at chunk-ELVVGUN6.js?v=7bf6d07f:35318:19

An error happened during the editor destroying. CKEditorError: Cannot read properties of undefined (reading 'trim')
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of undefined (reading 'trim')
at HtmlDataProcessor._toDom (chunk-ELVVGUN6.js?v=7bf6d07f:24121:61)
at HtmlDataProcessor.toView (chunk-ELVVGUN6.js?v=7bf6d07f:24085:30)
at createDataString (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:10730:51)
at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20129:25)
at DowncastDispatcher.fire (chunk-ELVVGUN6.js?v=7bf6d07f:584:35)
at DowncastDispatcher._testAndFire (chunk-ELVVGUN6.js?v=7bf6d07f:17531:10)
at DowncastDispatcher._convertInsert (chunk-ELVVGUN6.js?v=7bf6d07f:17321:12)
at Object.convertItem (chunk-ELVVGUN6.js?v=7bf6d07f:17567:35)
at reinsertOrConvertNodes (chunk-ELVVGUN6.js?v=7bf6d07f:20814:21)
at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20138:5)

And we open, insert and close wiris modal then-
Error tracking OPENED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track')
at _ContentManager.onOpen (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7124:28)
at ModalDialog.open (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7975:27)
at _Core.openModalDialog (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:9423:22)

Error tracking INSERTED_FORMULA TypeError: Cannot read properties of undefined (reading 'track')
at CKEditor5Integration.insertFormula (@wiris_mathtype-cked…v=7bf6d07f:10298:28)
at CKEditor5Integration.updateFormula (@wiris_mathtype-cked…?v=7bf6d07f:9850:16)

Error tracking CLOSED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track')
at ModalDialog.close (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7995:36)
at ModalDialog.submitAction (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7794:16)

[carla-at-wiris]

Hello, thanks for reporting this!

It looks like MathType plugin is not fully compatible with react-ckeditor5.

With the new installation methods, it's included the browser (CDN) one as well. This method contains all wiris code compiled and ready to use directly. Here are the steps we follow for these cases:

1. Change your import Mathtype from "@wiris/mathtype-ckeditor5/dist/index" for '@wiris/mathtype-ckeditor5/dist/browser/index.js'.
2. On the index.html, import the styles on @wiris/mathtype-ckeditor5/dist/browser/index.css.
3. Follow our instructions to add MathType on the list of CKEditor5 plugins, and 'MathType', 'ChemType' on the list of toolbar items.

If possible, we encourage you to try this method and let us know if this has solved your issue.

Any further issues, please feel free to contact us or write an email to our support team at [email protected].

[amitjangid12]

Hii @carla-at-wiris,Hi, I followed these steps, but the issue remains unresolved, and the same problems are occurring:

1. Replace the import of MathType from @wiris/mathtype-ckeditor5/dist/index with @wiris/mathtype-ckeditor5/dist/browser/index.js.
2. In index.html, import the styles from @wiris/mathtype-ckeditor5/dist/browser/index.css.
3. Follow the instructions to add MathType to the list of CKEditor 5 plugins and include 'MathType' and 'ChemType' in the toolbar items.

[carla-at-wiris]

We would need a bit more information on your environment, which plugins are you using, are they premium CK5 features or third party ones, the steps that lead to the issue, and any useful additional information.

We've lately had been having issues with CK5 premium features when MathType is installed as well.

I would also recommend cleaning the lock files, as they might be storing old version information, which could cause the duplicated modules' error. As well as using >= on the package.json to specify the CKEditor's plugins versions.

We will be able to perform a discovery on your issue once have the requested context to understand of your situation

[amitjangid12]

@carla-at-wiris @cicd-wiris @hqiu-at-wiris
In a React.js Vite project, we are using CKEditor 5 with the following imports:

javascript code
import {
InlineEditor, Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, Underline, Subscript, Superscript, Paragraph, BlockQuote, HorizontalLine, CKFinder, Heading, Font, Highlight, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ImageResize, Indent, Alignment, Link, List, MediaEmbed, PasteFromOffice, Table, TableToolbar, TableProperties, TableCellProperties, TextTransformation, SimpleUploadAdapter, SpecialCharacters, SpecialCharactersEssentials, RemoveFormat, WordCount, GeneralHtmlSupport
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
import MathType from '@wiris/mathtype-ckeditor5/dist/browser/index.js';
import '@wiris/mathtype-ckeditor5/dist/browser/index.css';
import { CKEditor } from "@ckeditor/ckeditor5-react";
Here is the issue:
When we open the Wiris MathType modal, type a mathematical expression, and insert it into the editor, an error occurs. The typed math is not displayed in the editor.

Additionally, the input UI of CKEditor 5 plugins appears as shown in the image:
https://v2res1-stag.assessprep.com/direct_uploads/attachments/01JD4RW4VGWKTFHNDHQ3QAXYM2/image.png

<CKEditor
editor={InlineEditor}
config={
plugins: [
Essentials, CKFinderUploadAdapter, Autoformat, Bold, Italic, Underline, Subscript, Superscript, Font, Highlight, BlockQuote, HorizontalLine, RemoveFormat, CKFinder, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ImageResize, Alignment, Indent, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TableProperties, TableCellProperties, TextTransformation, SpecialCharacters, SpecialCharactersEssentials, WordCount, SimpleUploadAdapter, GeneralHtmlSupport, MathType
],
toolbar: {
items: [
"bold", "italic", "underline", "superscript", "subscript",
"removeFormat", "|", "bulletedList", "numberedList", "|", "imageUpload", "|", "undo",
"redo", "|", "alignment", "insertTable", "specialCharacters", "Mathtype"
]}
data={initialData}
onReady={(editor) => {
console.log("on ready giving editors ==>", editor);
}}
/>

[amitjangid12]

please give this solution