From 17fd98010a265169bed11fc99702c3f328efa501 Mon Sep 17 00:00:00 2001
From: "Wei-Cheng Yeh (IID)" <iid@ccns.ncku.edu.tw>
Date: Mon, 13 Dec 2021 01:59:23 +0800
Subject: [PATCH] fix(components/Row): fix black bg on two-color char tail not
 causing visual effects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This issue was described in commit a75d5501ece7a6c511984d0900af4cfcc628bcde
("Fix two-color character rendering bug when the right-half is black.").

This issue was caused by the HTML layout of two-color chars, e.g.:

```html
<span class="q15 b1"> <!-- Non-black BG. -->
    <span class="q15 b1 rb0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;">
        Ａ
    </span> <!-- "Black" (transparent) right-half BG., appeared as non-black -->
    Ｍ
</span>
```

To fix this issue, WordSegmentBuilder is specialized for two-color chars
(as JavaScript class TwoColorWordBuilder)
so as to instead generate such layout as:

```html
<span class="q15 b1 rb0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;">
    Ａ
</span>
<span class="q15 b1">
    Ｍ
</span>
```

This not only avoids the unwanted background color introduced by the outer span
but also eliminates the unnecessary outer span for a sole two-color char.

Note that this requires the fix introduced in commit d6ebaab0ec5f0a66d7d365d065c058cf84e09558
("feat: rework two-color-word effect & implement blinking")
to make the un-nested span rendered expectedly.
---
 src/components/Row/ColorSegmentBuilder.js     |  9 ++---
 .../Row/WordSegmentBuilder/index.js           | 34 +++++++++++++------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/Row/ColorSegmentBuilder.js b/src/components/Row/ColorSegmentBuilder.js
index 50ff635e..71c3d7dd 100644
--- a/src/components/Row/ColorSegmentBuilder.js
+++ b/src/components/Row/ColorSegmentBuilder.js
@@ -1,4 +1,4 @@
-import WordSegmentBuilder from "./WordSegmentBuilder";
+import { WordSegmentBuilder, TwoColorWordBuilder } from "./WordSegmentBuilder";
 import { b2u, isDBCSLead } from "../../js/string_util";
 import { symbolTable } from "../../js/symbol_table";
 
@@ -56,13 +56,14 @@ export class ColorSegmentBuilder {
       return;
     }
     if (!leadColor.equals(ch.getColor())) {
-      this.beginSegment(leadColor);
-      this.wordBuilder.appendTwoColorWord(
-        text,
+      this.segs.push(this.wordBuilder.build());
+      this.wordBuilder = new TwoColorWordBuilder(
+        this.segs.length,
         leadColor,
         ch.getColor(),
         this.forceWidth
       );
+      this.wordBuilder.appendNormalText(text);
       return;
     }
     const forceWidth = shouldForceWidth(text) ? this.forceWidth : 0;
diff --git a/src/components/Row/WordSegmentBuilder/index.js b/src/components/Row/WordSegmentBuilder/index.js
index b46dad47..4498f3d7 100644
--- a/src/components/Row/WordSegmentBuilder/index.js
+++ b/src/components/Row/WordSegmentBuilder/index.js
@@ -32,24 +32,36 @@ export class WordSegmentBuilder {
     );
   }
 
-  appendTwoColorWord(text, colorLead, colorTail, forceWidth) {
-    this.inner.push(
-      <TwoColorWord
-        key={this.inner.length}
-        text={text}
-        colorLead={colorLead}
-        colorTail={colorTail}
-        forceWidth={forceWidth}
+  build() {
+    return (
+      <ColorSpan
+        key={this.key}
+        colorState={this.colorState}
+        inner={this.inner}
       />
     );
   }
+}
+
+export class TwoColorWordBuilder extends WordSegmentBuilder {
+  constructor(key, colorState, colorTail, forceWidth) {
+    super(key, colorState);
+    this.colorTail = colorTail;
+    this.forceWidth = forceWidth;
+  }
+
+  isLastSegmentSameColor(color) {
+    return false; // forbid appending
+  }
 
   build() {
     return (
-      <ColorSpan
+      <TwoColorWord
         key={this.key}
-        colorState={this.colorState}
-        inner={this.inner}
+        colorLead={this.colorState}
+        colorTail={this.colorTail}
+        forceWidth={this.forceWidth}
+        text={this.inner}
       />
     );
   }