wavesoft / local-echo

A local-echo controller for xterm.js
Apache License 2.0
142 stars 71 forks source link

Using color code moves cursor to the right #24

Open SciLor opened 4 years ago

SciLor commented 4 years ago

If you use for example \u001b[32m to colorize you prompt the cursor will be moved to the right (by the count of the hidden chars) if you have entered at least one character:

image

vjee commented 3 years ago

If you're using a local copy of local-echo, you can make the following changes to LocalEchoController.js to remove ANSI escape sequences from the input before retrieving the length.

That solved it for me.

+ import ansiRegex from "ansi-regex";
  /**
   * Advances the `offset` as required in order to accompany the prompt
   * additions to the input.
   */
  applyPromptOffset(input, offset) {
    const newInput = this.applyPrompts(input.substr(0, offset));
-  return newInput.length;
+  return newInput.replace(ansiRegex(), "").length;
  }

You'll have to install ansi-regex or copy-paste its code as it's only a few lines.

robertaboukhalil commented 3 years ago

Thank you! In addition to the change above, I also updated lib/Utils.js to prevent long commands from wrapping around incorrectly:

export function countLines(input, maxCols) {
-  return offsetToColRow(input, input.length, maxCols).row + 1;
+  return offsetToColRow(input, input.replace(ansiRegex(), "").length, maxCols).row + 1;
}
dragoncoder047 commented 2 years ago

offsetToColRow also needs patching:

 let row = 0,
     col = 0;
+input = input.replace(ansiRegex(), '');
 for (let i = 0; i < offset; ++i) {