Spoilers: Keep non-overlapping bodyRanges separate
This commit is contained in:
parent
1c9651f557
commit
269cd9b51d
3 changed files with 55 additions and 20 deletions
|
@ -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={{}} />
|
||||
</>
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue