Spoilers: Keep non-overlapping bodyRanges separate

ts/components/conversation/MessageBody.stories.tsx

@@ -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={{}} />
     </>

ts/components/conversation/MessageTextRenderer.tsx

@@ -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,
                 });
               }
         }