I have an idea: what if we use JavaScript to transform the document by splitting the ins and del tags and pushing them down the tree so they only wrap the text nodes? Then they will never contain block elements, and there will be no problem. Here is some JavaScript code to do that:
window.onload = function() {
splitAllElements("ins");
splitAllElements("del");
};
function splitAllElements(tagName)
{
var i;
var elems = [];
var ns = document.getElementsByTagName(tagName)
for (i = 0; i < ns.length; ++i)
{
elems.push(ns[i]);
}
for (i = 0; i < elems.length; ++i)
{
splitElement(elems[i]);
}
}
function splitElement(elem)
{
var frag = document.createDocumentFragment();
while (elem.firstChild)
{
var child = elem.firstChild;
elem.removeChild(child);
frag.appendChild(wrapTextNodes(elem.tagName, child));
}
elem.parentNode.insertBefore(frag, elem);
elem.parentNode.removeChild(elem);
}
function wrapTextNodes(tagName, node)
{
if (node.nodeType == Node.TEXT_NODE)
{
var wrapElem = document.createElement(tagName);
wrapElem.appendChild(node);
return wrapElem;
}
else if (node.nodeType == Node.ELEMENT_NODE && node.tagName != tagName)
{
var frag = document.createDocumentFragment();
while (node.firstChild)
{
var child = node.firstChild;
node.removeChild(child);
frag.appendChild(wrapTextNodes(tagName, child));
}
node.appendChild(frag);
return node;
}
else
{
return node;
}
}
If you run this code on your example document, it transforms it like this:
<del>Here is </del>
<p><del>deleted text in a p</del></p>
<del>and more deleted text</del>
<del>Here is </del>
<p><del>deleted text in a p</del></p>
<del>and more deleted text</del>
Currently it doesn't duplicate the attributes on the ins/del elements, so it will need some tweaks if you use class or style attributes on these elements.