Block level marks


Hey, I was following the information here [1] with the instructions by @saranrapjs to try to add block level marks to among other things paragraphs by using what is now setNodeMarkup. Adding marks that way seems to work and rendering them to the dom also seems to work.

However, I have two issues with this approach:

  1. I normally use <span> elements for marks. But I believe <span>-elements are formally still meant to be used inline, whereas this gives me constructions such as <span><p>...</p></span>. I solved this problem by adding an inline-attribute to each of these marks and using <div>-elements for marks if it’s false. But it feels a bit like this is information that should not need to be stored twice.

  2. Deleting text in paragraphs with marks creates odd editing operations. If I have a paragraph of a few words and hit backspace at the end of it, it reads it as if I was replacing the entire paragraph and replacing it with a new paragraph with almost the same contents. It then places the caret at the beginning of the first paragraph holding the mark.

My guess is that 2 happens because the dom-change-reading engine gets confused by the mark-tag around the paragraph and then doesn’t quite know what to do with it.

Has anyone found to put marks on block nodes without such results?

[1] Discussion: What are marks


I solved this problem by adding an inline-attribute to each of these marks and using <div>-elements for marks if it’s false.

This is what I’ve done in this situation, and it seems to generally work. I hadn’t considered that this could be done automatically by the ProseMirror library — I guess the tricky thing is you might conceivably want to specify some other element type beyond span/div?

The use-case of marks in block-level elements that I’ve worked with doesn’t allow them on paragraphs, so I haven’t seen this particular flow. But I know @marijn has described in the past copy/paste reasons why block-level marks create ambiguity when performing edit operations where block children may also have marks…I’m fuzzy on remembering what the exact specifics there were.


I have created a minimal test case [1] which shows the second issue of large amount of content being replaced, when the user really only enters a single letter in case where block level marks are used. I needed to specify the doc as a JSON object instead of parsing a dom object, as the latter would strip out the comment mark for some reason.



Thanks! I’ll try to find @Marijn’s comment on here about that.


Turns out this is related to a bug that has recently been reported [1]. It’s a bug in how the DOM is being parsed in that it overlooks marks on elements with content. I have created a patch to address this [2], but this needs to be reviewed and possibly rewritten as I have no idea whether it will break in other situations.