You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// components/custom-editor.js'use client'// only in App Routerimport{CKEditor,CKEditorContext}from'@ckeditor/ckeditor5-react';import{ClassicEditor,Bold,Essentials,Italic,Mention,Paragraph,Undo,Context,ContextWatchdog,CloudServices}from'ckeditor5';import{SlashCommand,CloudServicesCommentsAdapter,CommentsRepository,RealTimeCollaborativeComments,Comments}from'ckeditor5-premium-features';import'ckeditor5/ckeditor5.css';import'ckeditor5-premium-features/ckeditor5-premium-features.css';functionCustomEditorWithContext(){return(<CKEditorContextcontext={Context}contextWatchdog={ContextWatchdog}onError={(err)=>console.log(err)}config={{cloudServices: {tokenUrl: '...',webSocketUrl: '...'},licenseKey: '...',toolbar: ['undo','redo','|','bold','comment','commentsArchive']}}><CKEditoreditor={ClassicEditor}config={{plugins: [Essentials,Mention,Paragraph,SlashCommand,Undo,Bold,RealTimeCollaborativeComments,Comments,CloudServices,CloudServicesCommentsAdapter,CommentsRepository],mention: {feeds: [{marker: '@',feed: ['@Barney','@Lily','@Marshall','@Robin','@Ted']},]},collaboration: {channelId: 'ch-1'},}}data='<p>Hello from the 1st editor working with the context!</p>'onReady={(editor)=>{console.log('Editor 1 is ready to use!',editor);}}/><CKEditoreditor={ ClassicEditor }config={{plugins: [Essentials,Mention,Paragraph,SlashCommand,Undo,RealTimeCollaborativeComments,Comments,CloudServices,CloudServicesCommentsAdapter,CommentsRepository],collaboration: {channelId: 'ch-2'},}}data='<p>Hello from the second editor working with the context!</p>'onReady={(editor)=>{console.log('Editor 2 is ready to use!',editor);}}/></CKEditorContext>);}exportdefaultCustomEditorWithContext;
@Witoso / @f1ames I checked it using #480 branch (yarn link approach) and it's no longer reproducible. I'd suggest to check if this error actually happens on old installation methods.
Using
CKEditorContext
errors withnext.js
dev server.Steps
Create
next.js
project (I usednpx create-next-app@latest
and picked TS, ESlint,src/
andAppRouter
).Prepare below files:
Using
app
structure:page.tsx
:@/components/editorWithContext.tsx
:package.json
:Run
npm run dev
.Visit
localhost:3000
.Actual behavior
Editors are not initialized, error in the console:
Expected behavior
It works.
Additional info
It works with
npm run build && npm start
. I also checked with plain React and it worked there too without problems.Maybe it's related to next.js dev server and hot reload?
The text was updated successfully, but these errors were encountered: