[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'.

[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

[Blissful89]

bump

[lucasbertovic]

Is there a solution to this problem yet? I have the same error with: "@ckeditor/ckeditor5-build-classic": "^44.1.0", "@ckeditor/ckeditor5-react": "^9.4.0", "@wiris/mathtype-ckeditor5": "^8.11.1",

[carla-at-wiris]

Hi, we've tried your issue in our local react and Vue environments with the code examples provided, and we have not been able to reproduce this issue.

We encourage you to open a ticket at our email support at [email protected], and provide a demo with the bug so that we can review each case separately and focus on your specific build.