Replace truncate-html with Paragon <Truncate> component

[bradenmacdonald]

truncate-html is a 200kB dependency that's only used in two places. I suspect it can be replaced by Paragon's <Truncate> component, and the dependency on truncate-html could then be removed. Edit: Truncate is actually deprecated now: https://github.com/openedx/paragon/issues/3311

[holaontiveros]

assign me

[holaontiveros]

Update on this...

The <Truncate /> component will get deprecated in the most recent version of Paragon, which suggests it is not a good idea to use it for now...

Even if we decided that we wanted to use it while being deprecated, the Truncate component is not a direct replacement for the current functionality.

The component doesn't work with HTML because it's not a "real node" given that it tries to apply transformations while cloning and handling the Html node, which it's not something that can be done either with {htmlToShow} or <div dangerouslySetInnerHTML={htmlToShow} />` given that it either would show the HTML tags or wouldn't be a "real node" (dangerouslySetInnerHTML only sets the innerhtml without the rest of the vanilla dom functions that would be expected on a real element) and that breaks the the component.

So, an option could be to, instead of truncating the HTML with a library, use some CSS magic to truncate visually, and we use a cleaning library to ensure the HTML is safe.

• Pros

• We end up with a way to show HTML content that doesn't depend on an iFrame, which can have multiple a11y problems or be a trap focus with multiple code patches to try to "control" those issues

• Libraries that can securely clean the HTML are smaller than truncate-html, for example, DomPurify weighs 20kb

• Cons

  • A CSS clamp applied to the text would need to change a bit how we approach UI here, because probably we have 3 groups of people to service, people without any a11y requirements, people that are blind or completely unable to use the UI by itself and people with reduced vision which use the voiceover or equivalents to help with what they are partially seeing
    • So for the first group, a CSS text clamp works perfectly, nothing really important to do here...
    • For the second group, given that the clamp only visually hides the content, they would have the full content, which normally doesn't present any issues for this kind of user because they are free to move to the next block of content
    • For the third group, the CSS clamp gets "messy" when the voiceover tool focuses on something that is beyond the clamped lines, which doesn't feel nice visually (overlapped text), so something needs to be done in this context, like maybe not hiding anything?

So, given these cons, I suggest we get a bit more details on how we want to achieve this to ensure a "simple" library removal doesn't create complications and helps to improve the UI

[bradenmacdonald]

Thanks for the thorough investigation on this, @holaontiveros ! I think it might make sense to close this issue for now or at least pause it, as I'm not sure that any of the solutions are worth the effort and it seems to be working fine today.

[e0d]

@bradenmacdonald should we close?