SF-3101 Highlight range of source segments

src/SIL.XForge.Scripture/ClientApp/src/app/shared/text/text.component.spec.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { TranslocoService } from '@ngneat/transloco';
 import { VerseRef } from '@sillsdev/scripture';
 import Quill, { Delta, EmitterSource, Range as QuillRange } from 'quill';
@@ -24,7 +24,7 @@ import { TestOnlineStatusModule } from 'xforge-common/test-online-status.module'
 import { TestOnlineStatusService } from 'xforge-common/test-online-status.service';
 import { TestRealtimeModule } from 'xforge-common/test-realtime.module';
 import { TestRealtimeService } from 'xforge-common/test-realtime.service';
-import { TestTranslocoModule, configureTestingModule } from 'xforge-common/test-utils';
+import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { UserService } from 'xforge-common/user.service';
 import { isGecko } from 'xforge-common/utils';
@@ -1530,6 +1530,30 @@ describe('TextComponent', () => {
       tick();
     }).toThrowError();
   }));
+
+  it('highlights individual segments when a verse range is requested that does not directly correspond to a segment', fakeAsync(() => {
+    const env = new TestEnvironment();
+    env.fixture.detectChanges();
+    // Suppose we have a text with separate segments for verse 2 and verse 3.
+    env.id = new TextDocId('project01', 40, 1);
+    env.component.highlightSegment = true;
+    env.waitForEditor();
+
+    // Suppose in the target text, there is a single segment for the verse range of verse 2-3, and that the user clicks
+    // in that segment. This segment does not directly correspond to a segment in our source text.
+    env.component.setSegment('verse_1_2-3');
+    tick();
+    env.fixture.detectChanges();
+    // Because there is not a 'verse_1_2-3 segment, only verse 2 is set as the current segment.
+    expect(env.component.segment!.ref).toEqual('verse_1_2');
+
+    // Both the segment for verse 2 and the segment for verse 3 should be highlighted.
+    expect(env.isSegmentHighlighted(1, '2')).toBe(true);
+    expect(env.isSegmentHighlighted(1, '3')).toBe(true);
+    expect(env.isSegmentHighlighted(1, '1')).toBe(false);
+
+    TestEnvironment.waitForPresenceTimer();
+  }));
 });
 
 class MockDragEvent extends DragEvent {

src/SIL.XForge.Scripture/ClientApp/src/app/shared/text/text.component.ts

@@ -1406,6 +1406,12 @@ export class TextComponent extends SubscriptionDisposable implements AfterViewIn
       return false;
     }
 
+    const originalSegmentRefRequest: string = segmentRef;
+
+    // One project's chapter may have verses combined (eg "1-2"), or a verse split in paragraphs, differently than the
+    // same chapter in another project. When the user clicks in a verse range, or in a paragraph of a verse, the segment
+    // reference they clicked in in one TextComponent may or may not directly correspond to a segment in another
+    // TextComponent's viewModel.
     if (!this.viewModel.hasSegmentRange(segmentRef)) {
       let resetSegment = true;
 
@@ -1453,8 +1459,23 @@ export class TextComponent extends SubscriptionDisposable implements AfterViewIn
     }
     this.updateSegment();
     this.segmentRefChange.emit(this.segmentRef);
+
     if (this.highlightSegment) {
-      this.highlight();
+      if (this.viewModel.hasSegmentRange(originalSegmentRefRequest)) {
+        this.highlight();
+      } else {
+        // If the requested segment was a verse range, highlight all segments in the range.
+        const verseStr: string | undefined = getVerseStrFromSegmentRef(originalSegmentRefRequest);
+        if (verseStr != null && this.id != null) {
+          const verseRef: VerseRef = new VerseRef(
+            Canon.bookNumberToId(this.id.bookNum),
+            this.id.chapterNum.toString(),
+            verseStr
+          );
+          const segmentsInVerseRange: string[] = this.getVerseSegments(verseRef);
+          this.highlight(segmentsInVerseRange);
+        }
+      }
     }
     return true;
   }