ckeditor5-react does not work with optimized imports

stonebk commented 5 days ago

📝 Provide detailed reproduction steps (if any)

Using optimized imports with @ckeditor/ckeditor5-react results in incompatible type errors in TypeScript.

I modified the Headless editor demo to include an optimized import to @ckeditor/ckeditor5-core and I get build errors.

/**
 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

import React, { useState, useEffect, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import HeadlessEditor from './headless.js';
+import { EditorConfig } from '@ckeditor/ckeditor5-core/dist/index.js';

function App() {
    const [editor, setEditor] = useState(null);

+   const config: EditorConfig = {
+       placeholder: 'Type your text here!',
+   };

    return (
        <div className="App">
            <EditorToolbar editor={editor} />

            <CKEditor
+               config={config}
                editor={HeadlessEditor}

✔️ Expected result

No build errors.

❌ Actual result

❓ Possible solution

Switching the import from '@ckeditor/ckeditor5-core/dist/index.js' to '@ckeditor/ckeditor5-core/src/index.js' seems to resolve the build time error, but this required all imports to now point to src instead of dist, and this resulted in runtime errors:

This is actually the point I started from. I was previously using optimized imports before trying to upgrade with new installation methods when I ran into #17504. Upgrading without using the new installation method resulted in the same runtime error as above. I noticed that I was importing from src instead of dist so I tried updating all the imports and instead ran into the TS build error.

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

amitjangid12 commented 2 days ago

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_indexjs.js?v=7bf6d07f:7975:27) at _Core.openModalDialog (@wiris_mathtype-ckeditor5_dist_indexjs.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)

and

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); }} />

please give this solution

amitjangid12 commented 2 days ago

[Ipad pro 4th gen os v18.2][ckeditor5] when wiris popup is open in both portrait and landscape then its inserting at the beginning of the line not where the cursor is, wiris modal open in full screen mode then happening

and this solution also

Witoso commented 2 days ago

@amitjangid12 those issues are off-topic to this thread, please contact our support, as it relates to a premium plugin of our partner.

Witoso commented 2 days ago

@stonebk we will take a look at this with @filipsobol. Looks like our legacy support uncovered additional thing. We will figure this out, possibly we only need to maintain one set of types (src?) as the source generating this for src and dist is the same. Stay tuned.

ckeditor / ckeditor5