fix: TOC word-break not being inserted in generic types #8217
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Expected behavior: Word-break opportunities are inserted into the API references in the TOC.
Actual behavior: Word-break opportunities are not inserted if the reference is a generic type, causing that link to overflow its container.
Before fix
After fix
These were taken from a template I am using. As shown in the before image, the second reference in the TOC on the left word-breaks correctly because it is non-generic, however the fourth and last references is generic and it overflows. I managed to fix it by overriding the docfx.js file in the template and applying the fix there. However, this is just a workaround and isn't an ideal one. It would be better if the fix was included in the default template so overriding this file becomes unnecessary. Also, for some more context, this issue is also present in DocFx's own API documentation site, not just the template I am using. As you can see below, there are quite a few generics in the TOC that overflow.
This issue is caused because the function that inserts the
<wbr>
(word-break opportunity) tags only does so ifthis.html()
has no html tags and is only text. It does this by comparingthis.html()
withthis.text()
to see if they are equal. This only works if the text is a non-generic reference. If it is generic, thenthis.html()
returns the reference with the less-than and greater-than symbols encoded as<
and>
respectively.this.text()
doesn't encode those symbols, so the check fails and the tags are never inserted.This fix replaces that check. Instead, it checks if
this.html()
doesn't match this regex:/(<\w*)((\s\/>)|(.*<\/\w*>))/g
. This regex matches if there are any html tags. This regex has been tested with https://www.regextester.com/ and the following text:The first line should match, the second one should not.