fix #36: Stream outputs don't show backspace characters sometimes

Author: williamstein

__tests__/index.spec.tsx

@@ -64,6 +64,43 @@ describe("Ansi", () => {
     expect(el.text()).toBe("that sentence\nwill make you pause");
   });
 
+  test("can handle backspace symbol", () => {
+    const el = shallow(
+      React.createElement(
+        Ansi,
+        null,
+        "01hello\b goodbye"
+      )
+    );
+    expect(el).not.toBeNull();
+    expect(el.text()).toBe("01hell goodbye");
+  });
+
+  // see https://stackoverflow.com/questions/55440152/multiple-b-doesnt-work-as-expected-in-jupyter#
+  test("handles backspace symbol in same funny way as Jupyter Classic -- 1/2", () => {
+    const el = shallow(
+      React.createElement(
+        Ansi,
+        null,
+        "02hello\b\b goodbye"
+      )
+    );
+    expect(el).not.toBeNull();
+    expect(el.text()).toBe("02hel goodbye");
+  });
+
+  test("handles backspace symbol in same funny way as Jupyter Classic -- 2/2", () => {
+    const el = shallow(
+      React.createElement(
+        Ansi,
+        null,
+        "03hello\b\b\b goodbye"
+      )
+    );
+    expect(el).not.toBeNull();
+    expect(el.text()).toBe("03hell goodbye");
+  });
+
   test("can linkify", () => {
     const el = shallow(
       React.createElement(

src/index.ts

@@ -15,11 +15,11 @@ function ansiToJSON(
   input: string,
   use_classes: boolean = false
 ): AnserJsonEntry[] {
-  input = escapeCarriageReturn(input);
+  input = escapeCarriageReturn(fixBackspace(input));
   return Anser.ansiToJson(input, {
     json: true,
     remove_empty: true,
-    use_classes
+    use_classes,
   });
 }
 
@@ -106,7 +106,7 @@ function convertBundleIntoReact(
   let index = 0;
   let match: RegExpExecArray | null;
   while ((match = linkRegex.exec(bundle.content)) !== null) {
-    const [ , pre, url ] = match;
+    const [, pre, url] = match;
 
     const startIndex = match.index + pre.length;
     if (startIndex > index) {
@@ -122,7 +122,7 @@ function convertBundleIntoReact(
         {
           key: index,
           href,
-          target: "_blank"
+          target: "_blank",
         },
         `${url}`
       )
@@ -155,3 +155,18 @@ export default function Ansi(props: Props): JSX.Element {
     )
   );
 }
+
+// This is copied from the Jupyter Classic source code
+// notebook/static/base/js/utils.js to handle \b in a way
+// that is **compatible with Jupyter classic**.   One can
+// argue that this behavior is questionable:
+//   https://stackoverflow.com/questions/55440152/multiple-b-doesnt-work-as-expected-in-jupyter#
+function fixBackspace(txt: string) {
+  let tmp = txt;
+  do {
+    txt = tmp;
+    // Cancel out anything-but-newline followed by backspace
+    tmp = txt.replace(/[^\n]\x08/gm, "");
+  } while (tmp.length < txt.length);
+  return txt;
+}