Danger: marks on block nodes

Hey, just so that maybe others avoid falling into the same trap:

I felt at first that it would be nicer to use marks for certain kinds of things both on block and inline nodes. Mainly this was for reasons of consistency. And with some additions here and there to make surre to use <div> for marks on block nodes and <span> for inline nodes, it did actually work for most basic node types.

Problems started when I needed to add marks to list items. Because marks always need to wrap around the element they are marking, that would basically create HTML such as this:

<ul>
    <div class="mark">
        <li></li>
    </div>
</ul>

And that’s just not valid HTML. I guess trying to tag table cells or rows would have given me similar problems.

3 Likes

Did you come up with a solution? I’m interested in adding commenting via PM but haven’t figured out how to do it, mostly it’s not obvious to me how to handle one comment spanning multiple blocks, or overlapping comments, etc…

the solution I found is to add an attribute with one specific name to all block nodes whose value is an array of objects with all the attributes of marks, like so:

[{type:'comment', id: 2345}, {type:...}]

One can then use that attribute similar to how one uses marks on inline nodes. The syntax for dealing with this attribute will be slightly different from dealing with marks though.

For creating the DOM-node, one can use JSON.stringify(…) to create an attribute on the HTML element.

So to be clear, rather than setting a mark, you’re tracking the comment on the nodes attrs?

Not actually using this for the type of comments you were looking at, but yes, in case of comment-like information that potentially needs to be added to list items and table cells, I track them via a special attribute.