[Bug] Rich text drops the \n between styled runs when width and overflow: 'break' are set #21813

Version

6.1.0 (the latest release). 5.6.0 behaves the same, and zrender master has the same code.

Link to Minimal Reproduction

Official Editor, ECharts 6.1.0. The same page as a standalone HTML file, with the screenshot below: https://gist.github.com/floke75/3b924d190ceee31063b4a02dc2ca7064

Steps to Reproduce

Open the link. Both titles have the same text, '{name|First line}\n{note|Second line}'. The right-hand one adds width: 280, overflow: 'break' to its textStyle.

const rich = { name: { fontSize: 18, fontWeight: 'bold' }, note: { fontSize: 12, color: '#666' } };
const text = '{name|First line}\n{note|Second line}';
option = {
  title: [
    // No width: two lines, as expected.
    { text: text, left: 10, top: 10, textStyle: { rich: rich } },
    // Same text with width + overflow 'break': the \n is dropped and both runs share one line.
    { text: text, left: '50%', top: 10, textStyle: { rich: rich, width: 280, overflow: 'break' } }
  ]
};

Current Behavior

In the right-hand title, "First line" and "Second line" are drawn on one line. The left-hand one, without overflow, has two lines.

With width and overflow: 'break' or 'breakAll', the same happens with:

• a \n at the end of a run: '{name|First line\n}{note|Second line}';
• two breaks, which become one: '{name|First line}\n\n{note|Second line}';
• plain text before a run: 'First line\n{note|Second line}';
• axis labels, for example axisLabel: { width: 80, overflow: 'break', formatter: '{n|{value}}\n{u|SEK bn}' }, and pie labels with a width.

A \n at the start of a run ('{name|First line}{note|\nSecond line}') is kept, and overflow: 'truncate' keeps all of them.

Expected Behavior

The same line breaks as without overflow: 'break': "Second line" on its own line.

Environment

- OS: macOS 26.6.1, Apple M3
- Browser: Chromium 148.0.7778.96 (Playwright), and the official editor in the same browser. Also in server-side rendering (Node, SVG renderer).
- Framework: none

Any additional comments?

This looks like Problem 1 in #17573, which was closed as stale in 2024. I'm opening a new issue, as the template asks.

Where it comes from, as far as I can tell: with overflow: 'break', pushTokens splits each text segment with wrapText instead of str.split('\n') (parseText.ts). When a segment ends with \n (the \n between two runs is a segment of its own), wrapText doesn't push the empty line after it (if (line)). '\n'.split('\n') gives ['', ''], but wrapText gives [''], so the next run continues on the same line.

This change fixed all the cases above for me. I checked it only against them, not against your test suite:

--- a/src/graphic/helper/parseText.ts
+++ b/src/graphic/helper/parseText.ts
@@ -822,7 +822,7 @@
     if (currentWord) {
         line += currentWord;
     }
-    if (line) {
+    if (line || text.charAt(text.length - 1) === '\n') {
         lines.push(line);
         linesWidths.push(accumWidth);
     }

It also gives plain text that ends in \n an empty last line under overflow: 'break', which is what that text already gets without overflow.

Thank you for ECharts!