Let VSCode translate ascii/terminal characters in output (#12095)

For #10496

Author: DonJayamanne

src/client/datascience/notebook/helpers.ts

@@ -25,10 +25,6 @@ import { createCodeCell, createMarkdownCell } from '../../../datascience-ui/comm
 import { MARKDOWN_LANGUAGE, PYTHON_LANGUAGE } from '../../common/constants';
 import { traceError, traceWarning } from '../../logging';
 import { CellState, ICell, INotebookModel } from '../types';
-// tslint:disable-next-line: no-var-requires no-require-imports
-const ansiToHtml = require('ansi-to-html');
-// tslint:disable-next-line: no-var-requires no-require-imports
-const ansiRegex = require('ansi-regex');
 
 /**
  * Converts a NotebookModel into VSCode friendly format.
@@ -200,43 +196,14 @@ function isImagePngOrJpegMimeType(mimeType: string) {
     return mimeType === 'image/png' || mimeType === 'image/jpeg';
 }
 function translateStreamOutput(output: nbformat.IStream): CellStreamOutput | CellDisplayOutput {
-    const text = concatMultilineStringOutput(output.text);
-    const hasAngleBrackets = text.includes('<');
-    const hasAnsiChars = ansiRegex().test(text);
-
-    if (!hasAngleBrackets && !hasAnsiChars) {
-        // Plain text output.
-        return {
-            outputKind: vscodeNotebookEnums.CellOutputKind.Text,
-            text
-        };
-    }
-
-    // Format the output, but ensure we have the plain text output as well.
-    const richOutput: CellDisplayOutput = {
+    // Do not return as `CellOutputKind.Text`. VSC will not translate ascii output correctly.
+    // Instead format the output as rich.
+    return {
         outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
         data: {
-            ['text/plain']: text
+            ['text/plain']: concatMultilineStringOutput(output.text)
         }
     };
-
-    if (hasAngleBrackets) {
-        // Stream output needs to be wrapped in xmp so it
-        // show literally. Otherwise < chars start a new html element.
-        richOutput.data['text/html'] = `<xmp>${text}</xmp>`;
-    }
-    if (hasAnsiChars) {
-        // ansiToHtml is different between the tests running and webpack. figure out which one
-        try {
-            const ctor = ansiToHtml instanceof Function ? ansiToHtml : ansiToHtml.default;
-            const converter = new ctor(getAnsiToHtmlOptions());
-            richOutput.data['text/html'] = converter.toHtml(text);
-        } catch (ex) {
-            traceError(`Failed to convert Ansi text to HTML, ${text}`, ex);
-        }
-    }
-
-    return richOutput;
 }
 export function translateErrorOutput(output: nbformat.IError): CellErrorOutput {
     return {
@@ -246,48 +213,3 @@ export function translateErrorOutput(output: nbformat.IError): CellErrorOutput {
         traceback: output.traceback
     };
 }
-
-function getAnsiToHtmlOptions(): { fg: string; bg: string; colors: string[] } {
-    // Here's the default colors for ansiToHtml. We need to use the
-    // colors from our current theme.
-    // const colors = {
-    //     0: '#000',
-    //     1: '#A00',
-    //     2: '#0A0',
-    //     3: '#A50',
-    //     4: '#00A',
-    //     5: '#A0A',
-    //     6: '#0AA',
-    //     7: '#AAA',
-    //     8: '#555',
-    //     9: '#F55',
-    //     10: '#5F5',
-    //     11: '#FF5',
-    //     12: '#55F',
-    //     13: '#F5F',
-    //     14: '#5FF',
-    //     15: '#FFF'
-    // };
-    return {
-        fg: 'var(--vscode-terminal-foreground)',
-        bg: 'var(--vscode-terminal-background)',
-        colors: [
-            'var(--vscode-terminal-ansiBlack)', // 0
-            'var(--vscode-terminal-ansiBrightRed)', // 1
-            'var(--vscode-terminal-ansiGreen)', // 2
-            'var(--vscode-terminal-ansiYellow)', // 3
-            'var(--vscode-terminal-ansiBrightBlue)', // 4
-            'var(--vscode-terminal-ansiMagenta)', // 5
-            'var(--vscode-terminal-ansiCyan)', // 6
-            'var(--vscode-terminal-ansiBrightBlack)', // 7
-            'var(--vscode-terminal-ansiWhite)', // 8
-            'var(--vscode-terminal-ansiRed)', // 9
-            'var(--vscode-terminal-ansiBrightGreen)', // 10
-            'var(--vscode-terminal-ansiBrightYellow)', // 11
-            'var(--vscode-terminal-ansiBlue)', // 12
-            'var(--vscode-terminal-ansiBrightMagenta)', // 13
-            'var(--vscode-terminal-ansiBrightCyan)', // 14
-            'var(--vscode-terminal-ansiBrightWhite)' // 15
-        ]
-    };
-}

src/test/datascience/notebook/helpers.unit.test.ts

@@ -124,12 +124,12 @@ suite('Data Science - NativeNotebook helpers', () => {
                 ],
                 [
                     {
-                        outputKind: vscodeNotebookEnums.CellOutputKind.Text,
-                        text: 'Error'
+                        outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
+                        data: { 'text/plain': 'Error' }
                     },
                     {
-                        outputKind: vscodeNotebookEnums.CellOutputKind.Text,
-                        text: 'NoError'
+                        outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
+                        data: { 'text/plain': 'NoError' }
                     }
                 ]
             );
@@ -147,7 +147,6 @@ suite('Data Science - NativeNotebook helpers', () => {
                     {
                         outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
                         data: {
-                            'text/html': '<span style="color:var(--vscode-terminal-ansiYellow)">✅ </span> Loading\n',
                             'text/plain': '\u001b[K\u001b[33m✅ \u001b[0m Loading\n'
                         }
                     }
@@ -167,7 +166,6 @@ suite('Data Science - NativeNotebook helpers', () => {
                     {
                         outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
                         data: {
-                            'text/html': '<xmp>1 is < 2</xmp>',
                             'text/plain': '1 is < 2'
                         }
                     }
@@ -187,8 +185,6 @@ suite('Data Science - NativeNotebook helpers', () => {
                     {
                         outputKind: vscodeNotebookEnums.CellOutputKind.Rich,
                         data: {
-                            'text/html':
-                                '1 is < 2<span style="color:var(--vscode-terminal-ansiYellow)">✅ </span> Loading\n',
                             'text/plain': '1 is < 2\u001b[K\u001b[33m✅ \u001b[0m Loading\n'
                         }
                     }