layoutDropcap: dcap.dcapjsStrut is not invalidated for dynamic content (ReactJS).

[umamialex]

Relevant code in question: https://github.com/adobe-webplatform/dropcap.js/blob/master/src/layout.js#L126-L140

Description:

The .dcapjsStrut property holding the cache of the strut <span> of the designated dropcap element (dcap in the code) is not invalidated in anyway on subsequent reruns of .layoutDropcap.

The outdated cache is a problem for reconciliation-based frameworks such as ReactJS. When new content is loaded into an application using dropcap.js, the dropcap's content and children are replaced, but the element itself stays the same. The lack of an actual strut <span> leads to expected bugs:

Here's the expected behaviour:

Workaround:

The current workaround is to set .dcapjsStrut of any dropcap elements to null before running Dropcap.layout().

Solution:

One solution would be to give a class to the strut <span>, and query the dropcap element for that instead of saving it as an attribute of the element. The class would be something like ._dropcap-strut and could even be a configurable option.

If that solution works, I'll gladly go ahead and make a PR for it!

[sylvain-galineau]

My apologies for the delay and thank you for reporting this. I will try to fix this shortly.

[sylvain-galineau]

I am not really familiar with React and the exact scenario you are mentioning; but it does sound that, even though the dropcap element is still there, the dcapjsStrut property points to a stale span that is no longer in the DOM. If so then I would expectdcapjsStrut.parentNode to be null or undefined. We could easily check for that. Is this something you could confirm?