Using Editor js, How do i make the document partial read only

I am composing a document using Editor.js. https://editorjs.io/ I want the document to be partially read-only. Like some portions of the document, I want the user to be able to edit, and for the other blocks, I want the user to be restricted from editing, by making it read-only. Here's my Editor.js configuration:

        this.editor = new EditorJS({

            readOnly: this.userRole ? true: false,

            holder: 'editorjs',
            tools: {
                  
                header: Header,   
                image: {
                    class: ImageTool,
                    config:{
                        uploader:{
                            async uploadByFile(file) {
                                // Create a form data
                                const formData = new FormData();
                                formData.append('image', file);

                                try {
                                    const response = await axios.post('upload_image_file', formData, {
                                        headers: {
                                        'Content-Type': 'multipart/form-data'
                                        }
                                    });
                                    console.log("🚀 ~ uploadByFile ~ response.data:", response.data)

                                    return {

                                        success: 1,
                                        file: {
                                        url: response.data.file.url
                                        }
                                    };
                                } catch (error) {
                                console.error('Image upload error:', error);
                                    return {
                                        success: 0,
                                        error: 'Image upload failed'
                                    };
                                }
                            },             
                            async uploadByUrl(url) {
                                try {
                                const response = await axios.post('upload_image_url', {
                                    url: url
                                });

                                if (response.data.success && response.data.file && response.data.file.url) {
                                    return {
                                    success: 1,
                                    file: {
                                        url: response.data.file.url
                                    }
                                    };
                                } else {
                                    return {
                                    success: 0,
                                    error: 'Image upload failed'
                                    };
                                }
                                } catch (error) {
                                console.error('Image upload error:', error);
                                return {
                                    success: 0,
                                    error: 'Image upload failed'
                                };
                                }
                            }                                           
                        }
                    }
                },
                textVariant: TextVariantTune,
                checklist: {
                    class: Checklist,
                    inlineToolbar: true,
                },   
                list: {
                    class: NestedList,
                    inlineToolbar: true,
                    config: {
                        defaultStyle: 'unordered'
                    },
                },   
                embed: Embed,    
                Marker: {
                    class: Marker,
                    shortcut: 'CMD+SHIFT+M',
                },
                table: {
                    class: Table,
                    inlineToolbar: true,
                    config: {
                        rows: 2,
                        cols: 3,
                    },
                },   
                warning: {
                    class: Warning,
                    inlineToolbar: true,
                    shortcut: 'CMD+SHIFT+W',
                    config: {
                        titlePlaceholder: 'Title',
                        messagePlaceholder: 'Message',
                    },
                },    
                translator: {
                    class: Translate,
                    config: {
                        endpoint: 'http://localhost:5000/translate?text=',
                    }
                },     
                attaches: {
                    class: AttachesTool,
                    config: {
                        endpoint: 'http://localhost:8008/uploadFile'
                    }
                }                                                                 
            },
            tunes: ['textVariant'],
            data:this.contractData
        });

You can easily achieve this behaviour with custom plugin created by you. You have to allow certain part to be accessible by ignoring readOnly flag.

If you want to acheive partial readonly with existing plugins available npm. Then you will have to patch those libraries. You have two ways to achieve this thing:

1. Fork the project to own github made changes then use your own repo in your project.
2. Directly patch in the project. using patch-package library.

If you want to control different plugin behavior based on different roles. Which is also possible same, but in this case. You will be have to rely on multiple role check cases.

I hope this will you.