I am new to Ckeditor5 with React and created sample application where I am trying to create custom comment view where user can view/ edit the comment. (refer below screenshot)
Description – We have a editor with comments. As per our requirement we are trying to customize the Comment view, where user can edit the comment in TextArea (later we will going to add few more controls like Input, Input as File) in comment popup as shown below(View and edit mode). We are using vite.config for bundling.
package.json
"devDependencies": {
"@ckeditor/ckeditor5-react": "^9.2.0",
"@vitejs/plugin-react": "^4.0.0",
"ckeditor5": "44.3.0",
"ckeditor5-premium-features": "44.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"vite": "^5.0.0"
},
"dependencies": {
"html-to-text": "^9.0.5"
}
}import { BaseCommentView, CommentView } from 'ckeditor5-premium-features';
import { View, icons, ButtonView } from "ckeditor5";
export default class CustomCommentView extends BaseCommentView {
constructor(locale, model, config) {
super(locale, model,
{
....
});
this._model = model;
this.commentContent = model.content || '';
this.state = 'view';
// Define the template
this._setTemplateBasedOnState();
}
// Dynamically update the template based on the state (view/edit)
_setTemplateBasedOnState() {
if (this.state === 'edit') {
// Edit Mode Template
this.setTemplate({
tag: 'div',
attributes: {
class: 'custom-comment-view edit-mode'
},
children: [
{
tag: 'textarea',
attributes: {
class: 'comment-textarea',
rows: 3,
value: this.commentContent,
onchange: this._onContentChange.bind(this)
}
},
{
tag: 'button',
attributes: {
class: 'save-button',
onclick: this._onSave.bind(this)
},
children: [{ text: 'Save' }]
},
{
tag: 'button',
attributes: {
class: 'cancel-button',
onclick: this._onCancel.bind(this)
},
children: [{ text: 'Cancel' }]
}
]
});
} else {
// View Mode Template
this.setTemplate({
tag: 'div',
attributes: {
class: 'custom-comment-view view-mode'
},
children: [
{
tag: 'p',
attributes: {
class: 'comment-content'
},
children: [{ text: this.commentContent }]
},
{
tag: 'button',
attributes: {
class: 'edit-button',
onclick: this._onEdit.bind(this)
},
children: [{ text: 'Edit' }]
},
{
tag: 'button',
attributes: {
class: 'delete-button',
onclick: this._onDelete.bind(this)
},
children: [{ text: 'Remove' }]
}
]
});
}
}
// Handle content changes in the textarea
_onContentChange(event) {
this.commentContent = event.target.value;
}
// Switch to edit mode
_onEdit() {
this.state = 'edit';
this._setTemplateBasedOnState(); // Re-render the template
}
// Save changes and switch back to view mode
_onSave() {
console.log('Saved Comment:', this.commentContent);
this.state = 'view';
this._setTemplateBasedOnState();
// Trigger a save callback if defined
// if (this._options.onSave) {
// this._options.onSave(this.commentContent);
// }
}
// Cancel editing and revert back to the original state
_onCancel() {
console.log('Edit cancelled');
this.state = 'view';
this._setTemplateBasedOnState();
}
_onDelete() {
console.log('Delete button clicked');
// if (this._options.onDelete) {
// this._options.onDelete(this.commentContent);
// }
}
}Below I have created CustomCommentView and used it in Ckeditor config but after running I am getting “TypeError: Cannot read properties of undefined (reading ‘on’)” error for removebutton. When i checked this error is coming on remove button while creating template. Due to this events are not getting registered on button and also not able to check whether other edit template loading will also work or not.
If someone can help us on this will be appreciated.