fix: Correct ansi cell width calculation (#214)

Author: nam-hle

src/alignSpanningCell.ts

@@ -1,3 +1,4 @@
+import stringWidth from 'string-width';
 import {
   alignString,
 } from './alignString';
@@ -58,7 +59,7 @@ export const alignVerticalRangeContent = (range: RangeConfig, content: string[],
 
   return padCellVertically(content, availableRangeHeight, verticalAlignment).map((line) => {
     if (line.length === 0) {
-      return ' '.repeat(content[0].length);
+      return ' '.repeat(stringWidth(content[0]));
     }
 
     return line;

test/alignSpanningCell.ts

@@ -1,6 +1,7 @@
 import {
   expect,
 } from 'chai';
+import chalk from 'chalk';
 import {
   alignVerticalRangeContent,
   wrapRangeContent,
@@ -267,4 +268,34 @@ describe('alignVerticalRangeContent', () => {
       ]);
     });
   });
+
+  it('with ansi string', () => {
+    const result = alignVerticalRangeContent(baseRangeConfig, [
+      ` ${chalk.red('ECMAScript')} (or ES) `,
+      ' is a               ',
+      ' general-purpose    ',
+      ' programming        ',
+      ' language,          ',
+      ' standardised by    ',
+      ` ${chalk.bgGreen('Ecma')} ${chalk.bold.blue('International')} `,
+      ' according to the   ',
+      ' document ECMA-262. ',
+    ], {...baseSpanningCellContext,
+      rowHeights: [12]});
+
+    expect(result).to.deep.equal([
+      ` ${chalk.red('ECMAScript')} (or ES) `,
+      ' is a               ',
+      ' general-purpose    ',
+      ' programming        ',
+      ' language,          ',
+      ' standardised by    ',
+      ` ${chalk.bgGreen('Ecma')} ${chalk.bold.blue('International')} `,
+      ' according to the   ',
+      ' document ECMA-262. ',
+      '                    ',
+      '                    ',
+      '                    ',
+    ]);
+  });
 });