ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.55k stars 3.7k forks source link

Cannot Integrate custom build with Create React App #12275

Closed ugoQ closed 1 week ago

ugoQ commented 2 years ago

I tried using CKEditor 5 on my React App (created with CRA). I can use the classic build with npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic, it works pretty well.

The classic build is almost enough for me, I would just like to add the "Source editing" plugin. So I tried the "build from source" method, and the "Integrating a build from the online builder" method, but both of them give me the following error:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.44.2"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /home/ugo/workspace/qes/node_modules/webpack (version: 5.74.0) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /home/ugo/workspace/qes/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

Is there a workaround for this? Can I just create a custom "Source editing" plugin for the ClassicEditor if using a custom build with CRA is a dead end? Thanks for any advice you can give me.

amitShimon1983 commented 2 years ago

ok so i had the same problem i fix it installing all of ck dependencies and fallow the js tutorial where you create editor like ClassicEditor.create then I used the editor as ref on a div Follow js tutorial

ugoQ commented 2 years ago

@amitShimon1983 thanks for your answer. What tutorial are you refering to? I am a bit lost in the documentation.

amitShimon1983 commented 2 years ago

ok this is what you need to do,

  1. first class should be like that `import React, { useRef, FunctionComponent, useEffect, useState } from 'react'; import { Editor } from 'ckeditor__ckeditor5-core'; import { ErrorState, LoadingMask, Spinner } from '@harmon.ie/collabria-frontend-storybook'; import { loadEditor, attachEvents } from './helper'; import { RichTextEditorProps } from './types'; import classes from './RichTextEditor.module.scss'; export const RichTextEditor: FunctionComponent = ({ disabled = false, configuration, data, events, styles, commentListId, editorId, }) => { const [loading, setLoading] = useState(true); const [error, setError] = useState<Error | undefined>(undefined); const [editorRef, setEditorRef] = useState<Editor | undefined>(undefined); const domContainer = useRef(null);

    useEffect(() => { let timer; if (domContainer.current && !editorRef && !error) { timer = setTimeout(() => { (async () => { try { const editor = await loadEditor(domContainer?.current, configuration, commentListId, editorId); setEditorRef(editor); // if (disabled) { // // editor.enableReadOnlyMode('true'); // }

        attachEvents(editor, events);
      } catch (e: any) {
        setError(e);
      } finally {
        setLoading(false);
      }
    })();

    }, 700); return () => { timer && clearTimeout(timer); }; } }, [domContainer, editorRef, configuration, error, disabled]); useEffect(() => { if (editorRef && data) { editorRef.editing.view.focus(); editorRef.data.set(data); } }, [editorRef, data]); return (

    {loading && (

    )} {error && }

    ); }; `

  2. import React, { useCallback, useState, useEffect, useRef } from 'react'; import { CommentData, ThreadData } from '../types'; import { RichTextEditor } from '../RichTextEditor'; import { configuration } from './config'; import classes from './Editor.module.scss'; import { gql, useMutation } from '@harmon.ie/collabria-frontend-shared'; import { Context } from '../plugins'; const UPDATE_SHARED_EMAIL = gql mutation UpdateSharedEmail( $action: Action $editedContent: String $messageObjectId: String $sharedEmailObjectId: String $comment: CommentInput ) { updateSharedEmail( args: { action: $action editedContent: $editedContent messageObjectId: $messageObjectId sharedEmailObjectId: $sharedEmailObjectId comment: $comment } ) { _id commentThreads { threadId authorId comments { channelId threadId commentId content authorId createdAt } } } } `;

const Editor = ({ sharedEmail, messageObjectId, data, editorId, commentListId, commentThreads, authorId, members, context, }: { sharedEmail: string; authorId: string; messageObjectId: string; data: any; commentListId: string; editorId: string; commentThreads: any[]; members: { name: string; id: string }[]; context?: Context; }) => { const [updateSharedEmail, { called, loading }] = useMutation(UPDATE_SHARED_EMAIL); const [editorRef, setEditorRef] = useState(); const [commentsRepositoryRef, setCommentsRepository] = useState(); const [commentToSave, setCommentToSave] = useState(); useEffect(() => { if (!!commentToSave && !!editorRef?.data?.get()) { (async () => { const variables = { ...commentToSave, editedContent: editorRef.data.get() }; const { data, errors } = await updateSharedEmail({ variables, }); if (!!data.updateSharedEmail && !errors) { setCommentToSave(undefined); } })(); } }, [commentToSave]); const onAddCommentThread = async (threadData: ThreadData) => { console.log('onAddCommentThread', { threadData }); return Promise.resolve({ createdAt: new Date(), }); };

const onRemoveCommentThread = async (threadData: ThreadData) => { console.log('onRemoveCommentThread', { threadData }); const { threadId } = threadData; const variables = { action: 'DELETE_THREAD', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, authorId }, }; // setCommentToSave(variables); return {}; };

const onAddComment = async (commentData: CommentData) => { console.log('onAddComment', { commentData }); const { threadId, commentId, content } = commentData; const variables = { action: 'ADD_COMMENT', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, commentId, content, authorId }, }; setCommentToSave(variables); return {}; };

const onUpdateComment = async (commentData: CommentData) => { console.log('onUpdateComment', { commentData }); const { threadId, commentId, content } = commentData; const variables = { action: 'EDIT_COMMENT', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, commentId, content, authorId }, }; // setCommentToSave(variables); return {}; };

const onRemoveComment = async (commentData: CommentData) => { console.log('onRemoveComment', { commentData }); const { channelId, threadId, commentId, content } = commentData; const variables = { action: 'DELETE_COMMENT', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, commentId, content, authorId }, }; // setCommentToSave(variables); }; const onThreadRemove = async (editor: any, threadId: string) => { const variables = { action: 'DELETE_THREAD', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, authorId }, }; // setCommentToSave(variables); }; const onReady = editor => { const commentsRepository = editor.plugins.get('CommentsRepository'); setEditorRef(editor); setCommentsRepository(commentsRepository); commentsRepository.on(addCommentThread:${editorId}, async (evt: any, threadData: ThreadData) => { await onAddCommentThread(threadData); }); commentsRepository.on(removeCommentThread:${editorId}, async (evt: any, threadData: ThreadData) => { await onRemoveCommentThread(threadData); });

commentsRepository.adapter = {
  addComment: onAddComment,
  updateComment: onUpdateComment,
  removeComment: onRemoveComment,
  removeCommentThread: onRemoveCommentThread,
};

};

const onChange = async (e, editor) => { console.log('onChange: ', { e, data: editor.data.get() }); }; return ( <>

</>

); };

export default Editor; 3import CustomCommentView from '../views/CustomCommentView';

export default { // CommentView: CustomCommentView, maxCommentsWhenCollapsed: 3, maxCommentCharsWhenCollapsed: 100, maxThreadTotalWeight: 6000, editorConfig: { appData: {}, }, }; `

  1. `import { CommentsIntegration } from '../../integrations'; import plugins from './plugins'; import comments from './comments'; import { UsersIntegration } from './userIntegration';

const configuration = { licenseKey: 'Your key', htmlSupport: { allow: [ { name: /.*/, attributes: true, classes: true, styles: true, }, ], }, balloonToolbar: { items: ['comment'], shouldNotGroupWhenFull: true, }, // comments, extraPlugins: [CommentsIntegration], plugins, removePlugins: ['Markdown'], collaboration: { channelId: 'channel-id', }, };

export default configuration; `

  1. I'm using context you don't need `import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import Mention from '@ckeditor/ckeditor5-mention/src/mention'; import Comments from '@ckeditor/ckeditor5-comments/src/comments'; import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox'; import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; import Heading from '@ckeditor/ckeditor5-heading/src/heading'; import Image from '@ckeditor/ckeditor5-image/src/image'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; import Indent from '@ckeditor/ckeditor5-indent/src/indent'; import Link from '@ckeditor/ckeditor5-link/src/link'; import List from '@ckeditor/ckeditor5-list/src/list'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; import Table from '@ckeditor/ckeditor5-table/src/table'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';

import CommentsOnly from '@ckeditor/ckeditor5-comments/src/commentsonly'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; import StrikeThrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; import ImageBlock from '@ckeditor/ckeditor5-image/src/imageblock'; import ImageInline from '@ckeditor/ckeditor5-image/src/imageinline'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; import ImageTextAlternative from '@ckeditor/ckeditor5-image/src/imagetextalternative'; import ImageUtils from '@ckeditor/ckeditor5-image/src/imageutils'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; import AutoFormat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; import IndentBlockCommand from '@ckeditor/ckeditor5-indent/src/indentblockcommand'; import IndentEditing from '@ckeditor/ckeditor5-indent/src/indentediting'; import IndentUI from '@ckeditor/ckeditor5-indent/src/indentui'; import LinkEditing from '@ckeditor/ckeditor5-link/src/linkediting'; import LinkUI from '@ckeditor/ckeditor5-link/src/linkui'; import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties'; import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle'; import DocumentList from '@ckeditor/ckeditor5-list/src/documentlist'; import DocumentListProperties from '@ckeditor/ckeditor5-list/src/documentlistproperties'; import Undo from '@ckeditor/ckeditor5-undo/src/undo'; import AutoSave from '@ckeditor/ckeditor5-autosave/src/autosave'; import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace'; import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; import Font from '@ckeditor/ckeditor5-font/src/font'; import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak'; import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; import BalloonToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/balloon/balloontoolbar'; // Context plugins: import ContextBase from '@ckeditor/ckeditor5-core/src/context'; import CloudServicesCommentsAdapter from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments/cloudservicescommentsadapter'; import CommentsRepository from '@ckeditor/ckeditor5-comments/src/comments/commentsrepository'; import NarrowSidebar from '@ckeditor/ckeditor5-comments/src/annotations/narrowsidebar'; import WideSidebar from '@ckeditor/ckeditor5-comments/src/annotations/widesidebar'; import PresenceList from '@ckeditor/ckeditor5-real-time-collaboration/src/presencelist'; import { CommentsIntegration } from '../integrations'; import { UsersIntegration } from '../editor/config/userIntegration';

export class Context extends ContextBase {}

// Plugins to include in the context. Context.builtinPlugins = [ // CloudServices, // CloudServicesCommentsAdapter, CommentsRepository, // NarrowSidebar, // PresenceList, // WideSidebar, ]; export const defaultConfig = { // The default configuration for the context plugins: sidebar: { container: document.getElementById('infinite-scroll'), }, presenceList: { container: document.querySelector('#presence-list-container'), }, // Configuration shared between the editors: language: 'en', toolbar: { items: ['bold', 'italic', '|', 'undo', 'redo', '|', 'comment', 'trackChanges'], }, extraPlugins: [UsersIntegration, CommentsIntegration], comments: { editorConfig: { plugins: [Essentials, Paragraph, Bold, Italic], }, }, }; export { BalloonToolbar, Comments, Mention, Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation, GeneralHtmlSupport, HorizontalLine, PageBreak, ImageInsert, Highlight, Font, Code, StrikeThrough, Subscript, Superscript, Underline, ImageResize, AutoFormat, IndentBlock, IndentBlockCommand, LinkEditing, LinkUI, ListProperties, ListStyle, DocumentList, DocumentListProperties, AutoSave, Clipboard, Enter, Undo, ImageBlock, ImageUtils, ImageTextAlternative, ImageInline, Alignment, IndentEditing, IndentUI, CommentsOnly, FindAndReplace, RemoveFormat, // CommentsRepository, // Annotations, // PendingActions, // Users, // CommentsEditing, // CommentsUI, // EditorAnnotations, // WideSidebar, // Sidebar, // AnnotationsUIs, // NarrowSidebar, // InlineAnnotations, // ContextualBalloon, // ClipboardPipeline, // DragDrop, // Widget, // WidgetTypeAround, // Delete, // PastePlainText, // SelectAll, // SelectAllEditing, // SelectAllUI, // ShiftEnter, // Typing, // Input, // UndoEditing, // UndoUI, // BoldEditing, // BoldUI, // ItalicEditing, // ItalicUI, // ImageBlockEditing, // ImageEditing, // ImageTextAlternativeEditing, // ImageTextAlternativeUI, // ImageInlineEditing, // AlignmentEditing, // AlignmentUI, // Autoformat, // ListEditing, // ListUI, }; `

amitShimon1983 commented 2 years ago

installing all of those "dependencies": { "@ckeditor/ckeditor5-real-time-collaboration": "^34.2.0", "@ckeditor/ckeditor-cloud-services-collaboration": "^33.0.0", "@ckeditor/ckeditor5-adapter-ckfinder": "^34.2.0", "@ckeditor/ckeditor5-alignment": "^34.2.0", "@ckeditor/ckeditor5-autoformat": "^34.2.0", "@ckeditor/ckeditor5-autosave": "^34.2.0", "@ckeditor/ckeditor5-basic-styles": "^34.2.0", "@ckeditor/ckeditor5-block-quote": "^34.2.0", "@ckeditor/ckeditor5-build-balloon-block": "^34.2.0", "@ckeditor/ckeditor5-build-balloon": "^34.2.0", "@ckeditor/ckeditor5-build-classic": "^34.2.0", "@ckeditor/ckeditor5-build-decoupled-document": "^34.2.0", "@ckeditor/ckeditor5-build-inline": "^34.2.0", "@ckeditor/ckeditor5-ckbox": "^34.2.0", "@ckeditor/ckeditor5-ckfinder": "^34.2.0", "@ckeditor/ckeditor5-clipboard": "^34.2.0", "@ckeditor/ckeditor5-cloud-services": "^34.2.0", "@ckeditor/ckeditor5-code-block": "^34.2.0", "@ckeditor/ckeditor5-collaboration-core": "^34.2.0", "@ckeditor/ckeditor5-comments": "^34.2.0", "@ckeditor/ckeditor5-core": "^34.2.0", "@ckeditor/ckeditor5-dev-docs": "^30.3.4", "@ckeditor/ckeditor5-dev-env": "^30.3.4", "@ckeditor/ckeditor5-dev-tests": "^30.3.4", "@ckeditor/ckeditor5-dev-utils": "^30.3.4", "@ckeditor/ckeditor5-dev-webpack-plugin": "^30.3.4", "@ckeditor/ckeditor5-easy-image": "^34.2.0", "@ckeditor/ckeditor5-editor-balloon": "^34.2.0", "@ckeditor/ckeditor5-editor-classic": "^34.2.0", "@ckeditor/ckeditor5-editor-decoupled": "^34.2.0", "@ckeditor/ckeditor5-editor-inline": "^34.2.0", "@ckeditor/ckeditor5-engine": "^34.2.0", "@ckeditor/ckeditor5-enter": "^34.2.0", "@ckeditor/ckeditor5-essentials": "^34.2.0", "@ckeditor/ckeditor5-export-pdf": "^34.2.0", "@ckeditor/ckeditor5-export-word": "^34.2.0", "@ckeditor/ckeditor5-find-and-replace": "^34.2.0", "@ckeditor/ckeditor5-font": "^34.2.0", "@ckeditor/ckeditor5-heading": "^34.2.0", "@ckeditor/ckeditor5-highlight": "^34.2.0", "@ckeditor/ckeditor5-horizontal-line": "^34.2.0", "@ckeditor/ckeditor5-html-embed": "^34.2.0", "@ckeditor/ckeditor5-html-support": "^34.2.0", "@ckeditor/ckeditor5-image": "^34.2.0", "@ckeditor/ckeditor5-indent": "^34.2.0", "@ckeditor/ckeditor5-inspector": "^4.1.0", "@ckeditor/ckeditor5-language": "^34.2.0", "@ckeditor/ckeditor5-link": "^34.2.0", "@ckeditor/ckeditor5-list": "^34.2.0", "@ckeditor/ckeditor5-markdown-gfm": "^34.2.0", "@ckeditor/ckeditor5-media-embed": "^34.2.0", "@ckeditor/ckeditor5-mention": "^34.2.0", "@ckeditor/ckeditor5-minimap": "^34.2.0", "@ckeditor/ckeditor5-operations-compressor": "^34.2.0", "@ckeditor/ckeditor5-page-break": "^34.2.0", "@ckeditor/ckeditor5-pagination": "^34.2.0", "@ckeditor/ckeditor5-paragraph": "^34.2.0", "@ckeditor/ckeditor5-paste-from-office": "^34.2.0", "@ckeditor/ckeditor5-react": "^5.0.2", "@ckeditor/ckeditor5-remove-format": "^34.2.0", "@ckeditor/ckeditor5-restricted-editing": "^34.2.0", "@ckeditor/ckeditor5-revision-history": "^34.2.0", "@ckeditor/ckeditor5-select-all": "^34.2.0", "@ckeditor/ckeditor5-source-editing": "^34.2.0", "@ckeditor/ckeditor5-special-characters": "^34.2.0", "@ckeditor/ckeditor5-style": "^34.2.0", "@ckeditor/ckeditor5-table": "^34.2.0", "@ckeditor/ckeditor5-theme-lark": "^34.2.0", "@ckeditor/ckeditor5-track-changes": "^34.2.0", "@ckeditor/ckeditor5-typing": "^34.2.0", "@ckeditor/ckeditor5-ui": "^34.2.0", "@ckeditor/ckeditor5-undo": "^34.2.0", "@ckeditor/ckeditor5-upload": "^34.2.0", "@ckeditor/ckeditor5-utils": "^34.2.0", "@ckeditor/ckeditor5-watchdog": "^34.2.0", "@ckeditor/ckeditor5-widget": "^34.2.0", "@ckeditor/ckeditor5-word-count": "^34.2.0", "@ckeditor/jsdoc-plugins": "^30.3.4" }

amitShimon1983 commented 2 years ago

look at the components you need the same

johnflux commented 2 years ago

The problem is that it requires that you do: yarn eject But this has a serious downside that you can no longer update create-react-app

ugoQ commented 2 years ago

The problem is that it requires that you do: yarn eject But this has a serious downside that you can no longer update create-react-app

That's what I understand when I read the docs, but it is not an option for me. I will try to use the classic build but I will probably have to move to an other RTE, unfortunately.

Klausdk1999 commented 1 year ago

I have the same problem using the online custom build, is there any workaround for this? After installing my custom build I can't run my project, it shows: The react-scripts package provided by Create React App requires a dependency: "webpack": "4.44.2" Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree:

Witoso commented 1 year ago

@Klausdk1999 we would need more details on how did you integrate this custom build into your project? As mentioned in the docs, you can add editor in a separate folder or eject. There's also some craco setup provided by the community.

Klausdk1999 commented 1 year ago

Thanks for the response, I'm using React, with CRA, and trying to integrate an online build of ckeditor. I just saw that it's not officially supported, but if anyone ends up here, I made it work by installing the webpack: 4.44.2, adding the online build folder to my project root, and following the documentation: npm install file:.ckeditorfolder , and it was compatible with my other dependencies. And using it like this to make the decoupled document editor work with toolbar:

`return (

{ const toolbarContainer = document.querySelector( '.document-editor__toolbar', ); toolbarContainer!.appendChild(editor.ui.view.toolbar.element); }} // rest of the component ` But if there is another way to fix the issue, I could try it, limiting to the 4.44.2 webpack version is not a good solution.
Witoso commented 1 year ago

Thank you for your patience, I think webpack 4.44.2 is not our dependency, and we also work with webpack 5. Isn't this version locked by the CRA and react-scripts on your side?

CKEditorBot commented 1 month ago

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot commented 1 week ago

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).