Marks and nodes implemented using span tag are not retained when pressing backspace

Codesandbox URL: https://codesandbox.io/p/sandbox/keen-hopper-k6mmwr?file=%2Fsrc%2Feditor%2Findex.jsx%3A1%2C1-104%2C1

Bug demo video: Marks and nodes implemented using span tag are not retained when pressing backspace.mov - Google Drive

Hey @marijn, As shown in the video, I have two marks: fontFamily and fontColor, and one node for a plain span tag.

When I press backspace before the word Hello, the fontColor span and the plain span are removed.

The expectation is to retain these spans and only remove the first paragraph.

Am I missing something, or is this an inherent bug?

It looks like, because no commands bound to backspace apply in this situation, the editor doesn’t call preventDefault on the event, and the browser’s native behavior steps in, which seems to be to delete those wrapping spans, for some reason. Falling back to built-in browser behavior when no key bindings override a key is part of ProseMirror’s intentional, expected behavior, so in a case like this you’re going to have to work around this with a custom command, bound to backspace but with lower precedence than other bindings, that always returns true.

1 Like

@marijn Okay. But I feel this is not a browser’s native behaviour - deleting the wrapping spans. I have experienced the same behaviour when pasting rich text to the editor.

I have updated the code for rich text paste demo in the same codesandbox url. Here is a demo video for it: 2-Marks and nodes implemented using span tag are not retained when pressing backspace.mov.mov - Google Drive

As you can see, when the first <p> contains the spans, after paste, it’s gone. But only when the second <p> contains the spans, it’s retained.

I encountered this, when I copy and paste content from Google docs. To overcome it, I had to add an empty <p> in the starting. But as soon as that one is deleted, the spans from the second <p> is removed as in the first demo video.

So can’t we say its a bug in Prosemirror?

It is. No ProseMirror command is running in your script when pressing backspace, and the DOM created by the browser is…

<p><span style="color: rgb(255, 0, 0); font-family: Arial;">Hello</span><br></p>

The three spans got merged into a single one.

1 Like