Don't put the ellipsis in a <details> tag

[nex3]

If the last text in the truncated HTML is a <details> tag, the ellipsis should probably go after it, since it'll be collapsed by default in the tag itself.

[oe]

The condition may vary depending on whether the <details> has the open attribute and whether the <details> is the last element.

If the <details> element does not have an open attribute, the additional details may not be counted visually. If it has an open attribute, the opposite is true.

If the <details> element is not the last element, but the last element has a text content, what should be done?

I don't think it's a good idea to deal with this condition in this lib.

[nex3]

To my mind, the value of the lib is specifically to at least try to know about and handle all the weird cases so users don't have to. Is there even a way for a user to handle this outside the lib without essentially re-implementing the whole thing?

To my mind, <details> (or maybe <details> without open) should be treated the same as an element that can't contain text, like <img>.

[oe]

In my opinion, the <summary> inside <details> should be counted, and the visual effect matters. That means a tag should be treated as if it has no text content if it's invisible when rendered.

There should be a way to customize when to ignore a tag.

Please allow me some time to consider this matter thoroughly.

[oe]

A new option customNodeStrategy has been added. Check readme for details.

You can run yarn add truncate-html@beta (v1.2.0-beta.1) to install the beta version and have a try.

For your requirements, the following code may achieve your needs:

import truncate, { type IOptions, type ICustomNodeStrategy } from 'truncate-html'

// argument node is a cheerio instance
const customNodeStrategy: ICustomNodeStrategy = node => {
  // keep details and treat it as nothing inside
  if (node.is('details')) {
    return 'keep'
  }
}

const html = '<div><details><summary>Click me</summary><p>Some details</p></details>other things</div>'

const options: IOptions = {
  length: 3,
  customNodeStrategy
}

truncate(html, options)
// => <div><details><summary>Click me</summary><p>Some details</p></details>oth...</div>

[oe]

@nex3 Hi, is there any problem with this beta version? I'd like to make an official release in a few days.

[nex3]

Sorry, I haven't had a chance to try it yet. I'll see if I can give it a shot tonight.