fix: rework two-color-word effect & implement blinking 重作雙色字效果與實作閃爍

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;

src/components/Row/WordSegmentBuilder/ColorSpan.js

@@ -3,7 +3,7 @@ import cx from "classnames";
 export const ColorSpan = ({ className, colorState, inner }) => (
   <span
     className={cx(className, `q${colorState.fg}`, `b${colorState.bg}`, {
-      [`qq${colorState.bg}`]: colorState.blink
+      qq: colorState.blink
     })}
   >
     {inner}

src/components/Row/WordSegmentBuilder/TwoColorWord.js

@@ -2,19 +2,33 @@ import cx from "classnames";
 import { forceWidthStyle } from "./ForceWidthWord";
 
 /**
- * TODO: add blinking.
+ * TwoColorWord implements the two-color-word effect,
+ * where the first half ("head") and the last half ("tail")
+ * of a fullwidth character ("word") have different colors.
+ *
+ * The two-color-word effect is achieved
+ * by using two half-word pseudo elements (enabled by CSS class .o),
+ * one for the left half (::before; controlled by non-prefixed CSS classes)
+ * and one for the right half (::after; controlled by CSS classes prefixed with 'r'),
+ * so that the two halves of the word can be controlled independently.
+ *
+ * Additionally, to make the text selection appear normal,
+ * the real element is made invisible and placed on top of the pseudo elements.
  */
 export const TwoColorWord = ({ colorLead, colorTail, forceWidth, text }) => (
   <span
-    className={cx({
-      [`q${colorLead.fg}`]: colorLead.fg === colorTail.fg,
-      [`w${colorLead.fg}`]: colorLead.fg !== colorTail.fg,
-      [`q${colorTail.fg}`]: colorLead.fg !== colorTail.fg,
-      o: colorLead.fg !== colorTail.fg,
-      [`b${colorLead.bg}`]: colorLead.bg === colorTail.bg,
-      [`b${colorLead.bg}b${colorTail.bg}`]: colorLead.bg !== colorTail.bg,
-      wpadding: forceWidth
-    })}
+    className={cx(
+      "o",
+      `q${colorLead.fg}`,
+      `rq${colorTail.fg}`,
+      `b${colorLead.bg}`,
+      `rb${colorTail.bg}`,
+      {
+        qq: colorLead.blink,
+        rqq: colorTail.blink,
+        wpadding: forceWidth
+      }
+    )}
     style={forceWidthStyle(forceWidth)}
     data-text={text}
   >

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}
       />
     );
   }