I'm currently working on integrating Draft.js, a rich text editor framework, into my application. I'm encountering a specific issue where I want to prevent the deletion of text within the editor.
Here's a brief overview of my current setup: I have a Draft.js editor initialized with some pre-existing content using convertFromRaw. The content contains various text blocks with different entity types such as IMMUTABLE, MUTABLE, and SEGMENTED. I'm using a custom decorator to style and manage these entities.
However, when I set an entity with the type IMMUTABLE, the text associated with it gets deleted when users attempt to edit it, which is not the behavior I desire. Instead, I want to make this text immutable so that it cannot be edited or deleted.
What I want that Nobody can delete this text "*Wait for the prospect to respond". Maybe it should show a tooltip
I've tried modifying the TokenSpan component to handle IMMUTABLE entities appropriately, but I'm still facing the issue of the text being deleted when attempting to edit it.
Is there a way to ensure that text associated with IMMUTABLE entities remains uneditable and undeletable within Draft.js?
I appreciate any guidance or suggestions you can provide to help me achieve this functionality. Thank you in advance!
Here is the live sample example https://codesandbox.io/s/nice-thunder-x7vt4y?file=/src/App.js