I am creating a text editor using the tip-tap library and next js with tailwind but I have an issue customizing the default behavior while deleting list items. When I delete a list item, the cursor jumps back to the previous list item instead of going to the beginning of the line. However, I would like the cursor to clear out all the content until the front of the line and only jump to the previous list item if I continue deleting it. Can anyone help me to achieve this desirable behavior?
This is my code:
const TextEditor: React.FC<TextEditorProps> = ({ value, onChange }) => {
const editor = useEditor({
extensions: [
StarterKit.configure({
bulletList: {
keepMarks: true,
keepAttributes: false,
},
orderedList: {
keepMarks: true,
keepAttributes: false,
},
}),
],
content: ,
editorProps: {
attributes: {
class:
'prose-max-w-max prose-black prose-mb-0 prose-text-black focus:outline-none prose-h1:text-4xl prose-h1:text-black prose-h2:text-3xl prose-h2:text-black prose-h3:text-2xl prose-h3:text-black prose-p:mt-1 prose-p:mb-0 prose-p:text-base prose-p:font-normal prose-p:text-black prose-ul:list-disc prose-ul:pl-6 prose-ul:mt-2 prose-ul:mb-0 prose-ol:list-decimal prose-ol:pl-6 prose-ol:mt-2 prose-ol:mb-0 prose-li:pl-0 prose-li:my-0 marker:prose-ul:text-black prose-strong:font-bold prose-headings:font-normal prose-headings:mt-4 prose-headings:mb-0',
style: 'min-height: 6rem',
},
},
});
return (
<div>
<div className="block w-full rounded-md border-0 px-6 pb-3 pt-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6">
<div className="border-b-solid border-b border-b-gray-200 pb-3">
<MenuBar editor={editor} />
</div>
<div className="pt-3">
<EditorContent editor={editor} />
</div>
</div>
</div>
);
};