Last/current line doesn't re-wrap when terminal is resized

[jtbandes]

I'm trying to use xterm.js to make a log viewer (read-only, no keyboard input from the user).

I've used @xterm/addon-fit to handle resizing, and automatic line wrapping seems to work nicely. However, the very last line, i.e. the "current" line, is only wrapped based on the original width when the line is written, and doesn't re-wrap when the terminal is resized. When the terminal is sized down, it seems to delete some characters, and when the terminal is sized back up, those characters are permanently gone and it leaves a blank space on the right.

Note that I haven't included a \r\n on the last line, because I don't want a blank line to be displayed at the bottom of the terminal.

How can I make this last line automatically wrap when the terminal is resized?

Screen.Recording.2024-11-15.at.12.20.55.PM.mov

Details

• Browser and browser version: Chrome 130.0.6723.117
• OS version: macOS 15.1
• xterm.js version: 5.5.0

Steps to reproduce

https://codesandbox.io/p/sandbox/xtermjs-test-7xvd9v

import "./styles.css";
import "@xterm/xterm/css/xterm.css";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";

const container = document.getElementById("app");

const terminal = new Terminal({
  cursorStyle: "bar",
  allowProposedApi: true,
});

const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);

terminal.open(container);

for (let i = 0; i < 100; i++) {
  if (i > 0) {
    terminal.write("\r\n");
  }
  terminal.write(
    `line ${i}: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`
  );
}

const resizeObserver = new ResizeObserver((_entries) => {
  fitAddon.fit();
});
resizeObserver.observe(container);