fix: port breakLines to wrap-ansi (#1106)

* fix: port breakLines to wrap-ansi

This PR addresses incorrect line wrapping with `terminal-link`. It does so by employing the `wrap-ansi` npm.

Fixes #1014
Fixes #304

* - update core utils.js to use wrapAnsi as well
- move wrapAnsi dependence out of the top-level

* revert yarn.lock

* add examples/terminal-link.js

package.json

@@ -44,6 +44,5 @@
   "jest": {
     "coverageDirectory": "./coverage/",
     "collectCoverage": true
-  },
-  "dependencies": {}
+  }
 }

packages/core/lib/utils.js

@@ -1,19 +1,14 @@
+const wrapAnsi = require('wrap-ansi');
+
 /**
  * Force line returns at specific width. This function is ANSI code friendly and it'll
  * ignore invisible codes during width calculation.
  * @param {string} content
  * @param {number} width
  * @return {string}
  */
-exports.breakLines = (content, width) => {
-  const regex = new RegExp('(?:(?:\\033[[0-9;]*m)*.?){1,' + width + '}', 'g');
-  return content
+exports.breakLines = (content, width) =>
+  content
     .split('\n')
-    .flatMap((line) => {
-      const chunk = line.match(regex);
-      // Remove the last match as it's always empty
-      chunk.pop();
-      return chunk || '';
-    })
+    .map((line) => wrapAnsi(line, width, { trim: false, hard: true }))
     .join('\n');
-};

packages/core/package.json

@@ -21,7 +21,8 @@
     "mute-stream": "^0.0.8",
     "run-async": "^2.3.0",
     "string-width": "^4.1.0",
-    "strip-ansi": "^6.0.0"
+    "strip-ansi": "^6.0.0",
+    "wrap-ansi": "^7.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/inquirer/examples/terminal-link.js

@@ -0,0 +1,36 @@
+/**
+ * A terminal-link example. We expect no odd line breaks.
+ * Note: you will need a compatible terminal to see the rendered links. https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda
+ * For screenshots of the expected behavior, see https://github.com/SBoudrias/Inquirer.js/pull/1106
+ */
+
+'use strict';
+const inquirer = require('..');
+const terminalLink = require('terminal-link');
+
+inquirer
+  .prompt([
+    {
+      type: 'list',
+      name: 'size',
+      message: 'What size do you need?',
+      choices: [
+        'Jumbo',
+        'Large',
+        'Standard',
+        'Medium',
+        'Small',
+        'Micro which is truly and surely the ' +
+          terminalLink(
+            'very very very very very very smallest',
+            'https://www.google.com/search?q=very+very+very+very+very+very+very+very+very+very+long'
+          ),
+      ],
+      filter(val) {
+        return val.toLowerCase();
+      },
+    },
+  ])
+  .then((answers) => {
+    console.log(JSON.stringify(answers, null, '  '));
+  });

packages/inquirer/lib/utils/screen-manager.js

@@ -1,6 +1,7 @@
 'use strict';
 const util = require('./readline');
 const cliWidth = require('cli-width');
+const wrapAnsi = require('wrap-ansi');
 const stripAnsi = require('strip-ansi');
 const stringWidth = require('string-width');
 const ora = require('ora');
@@ -156,13 +157,10 @@ class ScreenManager {
   breakLines(lines, width = this.normalizedCliWidth()) {
     // Break lines who're longer than the cli width so we can normalize the natural line
     // returns behavior across terminals.
-    const regex = new RegExp(`(?:(?:\\033[[0-9;]*m)*.?){1,${width}}`, 'g');
-    return lines.map((line) => {
-      const chunk = line.match(regex);
-      // Last match is always empty
-      chunk.pop();
-      return chunk || '';
-    });
+    // re: trim: false; by default, `wrap-ansi` trims whitespace, which
+    // is not what we want.
+    // re: hard: true; by default', `wrap-ansi` does soft wrapping
+    return lines.map((line) => wrapAnsi(line, width, { trim: false, hard: true }));
   }
 
   /**

packages/inquirer/package.json

@@ -26,7 +26,8 @@
     "mocha": "^9.2.2",
     "mockery": "^2.1.0",
     "nyc": "^15.0.0",
-    "sinon": "^13.0.1"
+    "sinon": "^13.0.1",
+    "terminal-link": "^2.1.1"
   },
   "scripts": {
     "test": "nyc mocha test/**/* -r ./test/before",
@@ -50,6 +51,7 @@
     "rxjs": "^7.5.5",
     "string-width": "^4.1.0",
     "strip-ansi": "^6.0.0",
-    "through": "^2.3.6"
+    "through": "^2.3.6",
+    "wrap-ansi": "^7.0.0"
   }
 }