Spoilers: Keep non-overlapping bodyRanges separate

This commit is contained in:
Scott Nonnenberg 2023-08-01 12:06:20 -07:00 committed by GitHub
parent 1c9651f557
commit 269cd9b51d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 20 deletions

View file

@ -278,7 +278,19 @@ export function FormattingSpoiler(): JSX.Element {
bodyRanges: [
{
start: 8,
length: 89,
length: 60,
style: BodyRange.Style.SPOILER,
},
// This is touching, but not overlapping; they should not reveal together
{
start: 68,
length: 29,
style: BodyRange.Style.SPOILER,
},
// Note: in overlaps, the last spoiler wins
{
start: 94,
length: 6,
style: BodyRange.Style.SPOILER,
},
{
@ -322,7 +334,11 @@ export function FormattingSpoiler(): JSX.Element {
<hr />
<MessageBody {...props} disableLinks />
<hr />
<MessageBody {...props} isSpoilerExpanded={{}} />
<MessageBody
{...props}
onExpandSpoiler={() => null}
isSpoilerExpanded={{}}
/>
<hr />
<MessageBody {...props} disableLinks isSpoilerExpanded={{}} />
</>

View file

@ -75,8 +75,22 @@ export function MessageTextRenderer({
// Create range tree, dropping bodyRanges that don't apply. Read More means truncated
// strings.
let spoilerCount = 0;
const tree = sortedRanges.reduce<ReadonlyArray<RangeNode>>(
(acc, range) => {
if (
BodyRange.isFormatting(range) &&
range.style === BodyRange.Style.SPOILER
) {
spoilerCount += 1;
return insertRange(
{
...range,
spoilerId: spoilerCount,
},
acc
);
}
if (range.start < textLength) {
return insertRange(range, acc);
}
@ -139,7 +153,7 @@ function renderNode({
if (node.isSpoiler && node.spoilerChildren?.length) {
const isSpoilerHidden = Boolean(
node.isSpoiler && !isSpoilerExpanded[node.spoilerIndex || 0]
node.isSpoiler && !isSpoilerExpanded[node.spoilerId || 0]
);
const content = node.spoilerChildren?.map(spoilerNode =>
renderNode({
@ -193,7 +207,7 @@ function renderNode({
event.stopPropagation();
onExpandSpoiler({
...isSpoilerExpanded,
[node.spoilerIndex || 0]: true,
[node.spoilerId || 0]: true,
});
}
}
@ -209,7 +223,7 @@ function renderNode({
event.stopPropagation();
onExpandSpoiler?.({
...isSpoilerExpanded,
[node.spoilerIndex || 0]: true,
[node.spoilerId || 0]: true,
});
}
}