Coloring issue when used in association with lipgloss.JoinHorizontal

[pomdtr]

When the wrapping is done on the right of the terminal, the start of the line is highlighted (aapt in the screenshot).

Here is the method setting the preview

func (c *List) RefreshPreview() {
	previewWidth := c.viewport.Width - 2 // padding
	previewContent := wrap.String(wordwrap.String(c.previewContent, previewWidth), previewWidth)

	c.viewport.SetContent(previewContent)
}

and here is the view method:

func (c List) View() string {
	if c.actions.Focused() {
		return c.actions.View()
	}

	if c.ShowPreview {
		var separatorChars = make([]string, c.viewport.Height)
		for i := 0; i < c.viewport.Height; i++ {
			separatorChars[i] = "│"
		}
		separator := strings.Join(separatorChars, "\n")
		view := lipgloss.JoinHorizontal(lipgloss.Top, c.filter.View(), separator, c.viewport.View())

		return lipgloss.JoinVertical(lipgloss.Top, c.header.View(), view, c.footer.View())
	}

	return lipgloss.JoinVertical(lipgloss.Left, c.header.View(), c.filter.View(), c.footer.View())
}

[pomdtr]

An additional screenshot with even more occurence of the issue:

[leg100]

@pomdtr I saw the same phenomenom in my bubbletea app and I've pushed a fix:

leg100/pug@1b58356

See the SanitizeColors function.

The problem is that the ANSI escape codes that produce color are not "reset" at the end of each line. As a result, the color "bleeds" onto the next line of the whole terminal. The solution is to reset the color at the end of each line, and re-activate the color on the next line.

I think this solution should be in-corporated into the wrap and wordwrap packages of this module. But it looks like this repo is no longer activately maintained.

Note you'll run into this problem with any multi-line ANSI colored strings, with or without wrapping.