@softwarefactory-project/re-ansi 0.2.1 → 0.5.0

package/README.md

@@ -7,9 +7,11 @@ Ansi code to HTML
 re-ansi supports:
 
 * Cursor movement: `\n`, line erase and `\r` line erase
-* SGR parameter: italic and bold
+* SGR parameter: italic, bold, underline and line-through
 * 3/4 bits [color code][ansi-color-code]
 
+re-ansi removes styles on new lines, so that a `<br />` can't be nested inside `<span style>` elements.
+
 For details, see the `AnsiCode.parse` function.
 
 ## Install
@@ -79,17 +81,32 @@ Make sure to read about [React][reason-react] and [Reason][rescript-lang] too.
 
 ## Changes
 
+### 0.5.0
+
+- Add support for `[m` and `[K`.
+
+### 0.4.0
+
+- Add support for underline and line-through text decoration.
+- Add support for lighter font style.
+- Add initial support for color reset.
+
+### 0.3.0
+
+- Add unique keys to react list elements.
+- Create a href elements for http links.
+
 ### 0.2.1
 
-- Fix Ansi.parse to return the full document instead of the last line
+- Fix Ansi.parse to return the full document instead of the last line.
 
 ### 0.2.0
 
-- Fix a recursion limit in Ansi.parse for log bigger than 10MB
+- Fix a recursion limit in Ansi.parse for log bigger than 10MB.
 
 ### 0.1.3
 
-- Initial release
+- Initial release.
 
 [ansi-color-code]: https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit
 [reason-react]: https://reasonml.github.io/reason-react/docs/en/components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softwarefactory-project/re-ansi",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "description": "ANSI code to HTML",
   "files": ["README.md", "LICENSE", "bsconfig.json", "src"],
   "main": "./src/Ansi.bs.js",

package/src/Ansi.bs.js

@@ -23,8 +23,10 @@ function fourBitColors(code) {
     case 6 :
         return "cyan";
     case 8 :
+        console.log("Unknown color value:", code);
+        return ;
     case 9 :
-        break;
+        return "initial";
     case 10 :
         return "grey";
     case 11 :
@@ -43,10 +45,9 @@ function fourBitColors(code) {
     case 17 :
         return "white";
     default:
-      
+      console.log("Unknown color value:", code);
+      return ;
   }
-  console.log("Unknown color value:", code);
-  
 }
 
 function combine(css1, css2) {
@@ -65,6 +66,12 @@ function addStyle(fontStyle) {
         };
 }
 
+function addDecoration(textDecoration) {
+  return {
+          textDecoration: textDecoration
+        };
+}
+
 function int_of_cp(c) {
   return c - 48 | 0;
 }
@@ -129,18 +136,29 @@ function getFontStyle(fontMode) {
         return /* FontStyle */{
                 _0: addWeight("bold")
               };
+    case 2 :
+        return /* FontStyle */{
+                _0: addWeight("lighter")
+              };
     case 3 :
         return /* FontStyle */{
                 _0: addStyle("italic")
               };
-    case 2 :
     case 4 :
-    case 5 :
-    case 6 :
-        return ;
+        return /* FontStyle */{
+                _0: addDecoration("underline")
+              };
     case 0 :
     case 7 :
         return /* Regular */0;
+    case 5 :
+    case 6 :
+    case 8 :
+        return ;
+    case 9 :
+        return /* FontStyle */{
+                _0: addDecoration("line-through")
+              };
     default:
       return ;
   }
@@ -163,480 +181,539 @@ var FontCss = {
   get: get$1
 };
 
+var linkRe = /^(http(s)?:\/\/[^\s]+)/;
+
+function get$2(txt) {
+  return Belt_Option.getWithDefault(Belt_Option.flatMap(Caml_option.null_to_opt(linkRe.exec(txt)), (function (res) {
+                    return Belt_Option.flatMap(res.length !== 3 ? undefined : Caml_option.nullable_to_opt(res[0]), (function (url) {
+                                  return [
+                                          url.length,
+                                          {
+                                            TAG: /* HRef */0,
+                                            _0: url
+                                          }
+                                        ];
+                                }));
+                  })), [
+              1,
+              undefined
+            ]);
+}
+
+var HttpLink = {
+  linkRe: linkRe,
+  get: get$2
+};
+
 function parse(txt, pos) {
   var match = txt.codePointAt(pos);
+  var exit = 0;
   if (match === undefined) {
     return [
             0,
             undefined
           ];
   }
-  var switcher = match - 13 | 0;
-  if (switcher > 14 || switcher < 0) {
-    if (switcher !== -3) {
-      return [
-              0,
-              undefined
-            ];
-    } else {
+  if (match >= 14) {
+    if (match !== 27) {
+      if (match !== 104) {
+        return [
+                0,
+                undefined
+              ];
+      }
+      var func = function (param, param$1) {
+        return param$1.slice(pos, param);
+      };
+      return get$2(Curry._2(func, 512, txt));
+    }
+    exit = 1;
+  } else {
+    if (match === 10) {
       return [
               1,
               /* CarriageReturn */2
             ];
     }
-  }
-  if (!(switcher > 13 || switcher < 1)) {
-    return [
-            0,
-            undefined
-          ];
-  }
-  var cps = function (_idx, _acc) {
-    while(true) {
-      var acc = _acc;
-      var idx = _idx;
-      var match = idx > 10;
-      var match$1 = txt.codePointAt(pos + idx | 0);
-      if (match) {
-        return acc;
-      }
-      if (match$1 === undefined) {
-        return acc;
-      }
-      if (match$1 === 109) {
-        return acc;
-      }
-      _acc = Belt_List.add(acc, match$1);
-      _idx = idx + 1 | 0;
-      continue ;
-    };
-  };
-  var codePoints = Belt_List.reverse(cps(1, /* [] */0));
-  var length = Belt_List.length(codePoints) + 2 | 0;
-  var exit = 0;
-  var colorMode;
-  var colorValue;
-  var xs;
-  var colorMode$1;
-  var colorValue$1;
-  var style;
-  var style$1;
-  var cm1;
-  var cv1;
-  var cm2;
-  var cv2;
-  var xs$1;
-  if (!codePoints) {
-    return [
-            1,
-            undefined
-          ];
-  }
-  var match$1 = codePoints.hd;
-  if (match$1 !== 10) {
-    if (match$1 !== 91) {
+    if (match < 13) {
       return [
-              1,
+              0,
               undefined
             ];
     }
-    var match$2 = codePoints.tl;
-    if (!match$2) {
+    exit = 1;
+  }
+  if (exit === 1) {
+    var cps = function (_idx, _acc) {
+      while(true) {
+        var acc = _acc;
+        var idx = _idx;
+        var match = idx > 10;
+        var match$1 = txt.codePointAt(pos + idx | 0);
+        if (match) {
+          return acc;
+        }
+        if (match$1 === undefined) {
+          return acc;
+        }
+        if (match$1 === 109) {
+          return acc;
+        }
+        _acc = Belt_List.add(acc, match$1);
+        _idx = idx + 1 | 0;
+        continue ;
+      };
+    };
+    var codePoints = Belt_List.reverse(cps(1, /* [] */0));
+    var length = Belt_List.length(codePoints) + 2 | 0;
+    var exit$1 = 0;
+    var colorMode;
+    var colorValue;
+    var xs;
+    var colorMode$1;
+    var colorValue$1;
+    var style;
+    var style$1;
+    var cm1;
+    var cv1;
+    var cm2;
+    var cv2;
+    var xs$1;
+    if (!codePoints) {
       return [
               1,
               undefined
             ];
     }
-    var style$2 = match$2.hd;
-    var exit$1 = 0;
-    if (style$2 !== 48) {
-      if (style$2 !== 49) {
-        exit$1 = 4;
-      } else {
-        var match$3 = match$2.tl;
-        if (match$3) {
-          var match$4 = match$3.tl;
-          if (match$4 && !match$4.tl) {
-            colorMode = match$3.hd;
-            colorValue = match$4.hd;
-            xs = codePoints;
-            exit = 1;
-          } else {
-            exit$1 = 4;
-          }
-        } else {
-          exit$1 = 4;
-        }
+    var match$1 = codePoints.hd;
+    if (match$1 !== 10) {
+      if (match$1 !== 91) {
+        return [
+                1,
+                undefined
+              ];
       }
-    } else {
-      var match$5 = match$2.tl;
-      if (!match$5) {
+      var match$2 = codePoints.tl;
+      if (!match$2) {
         return [
                 length,
                 /* Clear */0
               ];
       }
-      var style$3 = match$5.hd;
+      var style$2 = match$2.hd;
       var exit$2 = 0;
-      if (style$3 !== 48) {
-        if (style$3 === 75) {
+      var exit$3 = 0;
+      var match$3 = match$2.tl;
+      if (match$3) {
+        if (match$3.hd === 75) {
           return [
                   4,
                   /* EraseLine */1
                 ];
         }
-        exit$2 = 5;
+        exit$3 = 6;
       } else {
-        if (!match$5.tl) {
-          return [
-                  length,
-                  /* Clear */0
-                ];
-        }
-        exit$2 = 5;
+        exit$3 = 6;
       }
-      if (exit$2 === 5) {
-        var match$6 = match$5.tl;
-        if (match$6 && match$6.hd === 59) {
-          var match$7 = match$6.tl;
-          if (!match$7) {
-            return [
-                    1,
-                    undefined
-                  ];
-          }
-          var match$8 = match$7.tl;
-          if (match$8) {
-            var match$9 = match$8.tl;
-            var colorValue$2 = match$8.hd;
-            var colorMode$2 = match$7.hd;
-            if (match$9) {
-              if (match$9.hd !== 59) {
-                exit$1 = 4;
+      if (exit$3 === 6) {
+        var switcher = style$2 - 48 | 0;
+        if (switcher === 0 || switcher === 1) {
+          if (switcher !== 0) {
+            var match$4 = match$2.tl;
+            if (match$4) {
+              var match$5 = match$4.tl;
+              if (match$5 && !match$5.tl) {
+                colorMode = match$4.hd;
+                colorValue = match$5.hd;
+                xs = codePoints;
+                exit$1 = 2;
               } else {
-                var match$10 = match$9.tl;
-                if (!match$10) {
+                exit$2 = 5;
+              }
+            } else {
+              exit$2 = 5;
+            }
+          } else {
+            var match$6 = match$2.tl;
+            if (!match$6) {
+              return [
+                      length,
+                      /* Clear */0
+                    ];
+            }
+            var style$3 = match$6.hd;
+            var exit$4 = 0;
+            if (style$3 !== 48) {
+              exit$4 = 7;
+            } else {
+              if (!match$6.tl) {
+                return [
+                        length,
+                        /* Clear */0
+                      ];
+              }
+              exit$4 = 7;
+            }
+            if (exit$4 === 7) {
+              var match$7 = match$6.tl;
+              if (match$7 && match$7.hd === 59) {
+                var match$8 = match$7.tl;
+                if (!match$8) {
                   return [
                           1,
                           undefined
                         ];
                 }
-                var cm2$1 = match$10.hd;
-                var match$11 = match$10.tl;
-                if (match$11) {
-                  if (match$11.tl) {
-                    if (cm2$1 !== 49) {
-                      exit$1 = 4;
+                var match$9 = match$8.tl;
+                if (match$9) {
+                  var match$10 = match$9.tl;
+                  var colorValue$2 = match$9.hd;
+                  var colorMode$2 = match$8.hd;
+                  if (match$10) {
+                    if (match$10.hd !== 59) {
+                      exit$2 = 5;
                     } else {
-                      var match$12 = match$10.tl;
-                      var match$13 = match$12.tl;
-                      if (match$13.tl) {
+                      var match$11 = match$10.tl;
+                      if (!match$11) {
                         return [
                                 1,
                                 undefined
                               ];
                       }
-                      style$1 = style$3;
-                      cm1 = colorMode$2;
-                      cv1 = colorValue$2;
-                      cm2 = match$12.hd;
-                      cv2 = match$13.hd;
-                      xs$1 = codePoints;
-                      exit = 3;
+                      var cm2$1 = match$11.hd;
+                      var match$12 = match$11.tl;
+                      if (match$12) {
+                        if (match$12.tl) {
+                          if (cm2$1 !== 49) {
+                            exit$2 = 5;
+                          } else {
+                            var match$13 = match$11.tl;
+                            var match$14 = match$13.tl;
+                            if (match$14.tl) {
+                              return [
+                                      1,
+                                      undefined
+                                    ];
+                            }
+                            style$1 = style$3;
+                            cm1 = colorMode$2;
+                            cv1 = colorValue$2;
+                            cm2 = match$13.hd;
+                            cv2 = match$14.hd;
+                            xs$1 = codePoints;
+                            exit$1 = 4;
+                          }
+                        } else {
+                          style$1 = style$3;
+                          cm1 = colorMode$2;
+                          cv1 = colorValue$2;
+                          cm2 = cm2$1;
+                          cv2 = match$12.hd;
+                          xs$1 = codePoints;
+                          exit$1 = 4;
+                        }
+                      } else {
+                        exit$2 = 5;
+                      }
                     }
                   } else {
-                    style$1 = style$3;
-                    cm1 = colorMode$2;
-                    cv1 = colorValue$2;
-                    cm2 = cm2$1;
-                    cv2 = match$11.hd;
-                    xs$1 = codePoints;
-                    exit = 3;
+                    colorMode$1 = colorMode$2;
+                    colorValue$1 = colorValue$2;
+                    style = style$3;
+                    exit$1 = 3;
                   }
                 } else {
-                  exit$1 = 4;
+                  exit$2 = 5;
                 }
+              } else {
+                exit$2 = 5;
               }
-            } else {
-              colorMode$1 = colorMode$2;
-              colorValue$1 = colorValue$2;
-              style = style$3;
-              exit = 2;
             }
-          } else {
-            exit$1 = 4;
+            
           }
         } else {
-          exit$1 = 4;
-        }
-      }
-      
-    }
-    if (exit$1 === 4) {
-      var match$14 = match$2.tl;
-      if (!match$14) {
-        return [
-                length,
-                Belt_Option.flatMap(get$1(style$2), (function (style) {
-                        return /* Style */{
-                                _0: style
-                              };
-                      }))
-              ];
-      }
-      var colorValue$3 = match$14.hd;
-      var exit$3 = 0;
-      var match$15 = match$14.tl;
-      if (match$15) {
-        if (match$15.hd !== 59) {
-          exit$3 = 5;
-        } else {
-          var match$16 = match$15.tl;
-          if (!match$16) {
+          if (switcher === 27) {
             return [
-                    1,
-                    undefined
+                    3,
+                    /* EraseLine */1
                   ];
           }
-          if (match$16.tl) {
-            exit$3 = 5;
-          } else {
-            colorMode$1 = style$2;
-            colorValue$1 = colorValue$3;
-            style = match$16.hd;
-            exit = 2;
-          }
+          exit$2 = 5;
         }
-      } else {
-        colorMode = style$2;
-        colorValue = colorValue$3;
-        xs = codePoints;
-        exit = 1;
       }
-      if (exit$3 === 5) {
-        if (colorValue$3 !== 59) {
-          return [
-                  1,
-                  undefined
-                ];
-        }
-        var match$17 = match$14.tl;
-        var match$18 = match$17.tl;
-        if (!match$18) {
+      if (exit$2 === 5) {
+        var match$15 = match$2.tl;
+        if (!match$15) {
           return [
-                  1,
-                  undefined
+                  length,
+                  Belt_Option.flatMap(get$1(style$2), (function (style) {
+                          return {
+                                  TAG: /* Style */1,
+                                  _0: style
+                                };
+                        }))
                 ];
         }
-        var match$19 = match$18.tl;
-        var colorValue$4 = match$18.hd;
-        var colorMode$3 = match$17.hd;
-        if (match$19) {
-          if (match$19.hd !== 59) {
-            return [
-                    1,
-                    undefined
-                  ];
+        var colorValue$3 = match$15.hd;
+        var exit$5 = 0;
+        var match$16 = match$15.tl;
+        if (match$16) {
+          if (match$16.hd !== 59) {
+            exit$5 = 6;
+          } else {
+            var match$17 = match$16.tl;
+            if (!match$17) {
+              return [
+                      1,
+                      undefined
+                    ];
+            }
+            if (match$17.tl) {
+              exit$5 = 6;
+            } else {
+              colorMode$1 = style$2;
+              colorValue$1 = colorValue$3;
+              style = match$17.hd;
+              exit$1 = 3;
+            }
           }
-          var match$20 = match$19.tl;
-          if (!match$20) {
+        } else {
+          colorMode = style$2;
+          colorValue = colorValue$3;
+          xs = codePoints;
+          exit$1 = 2;
+        }
+        if (exit$5 === 6) {
+          if (colorValue$3 !== 59) {
             return [
                     1,
                     undefined
                   ];
           }
-          var cm2$2 = match$20.hd;
-          var match$21 = match$20.tl;
-          if (!match$21) {
+          var match$18 = match$15.tl;
+          var match$19 = match$18.tl;
+          if (!match$19) {
             return [
                     1,
                     undefined
                   ];
           }
-          if (match$21.tl) {
-            if (cm2$2 !== 49) {
+          var match$20 = match$19.tl;
+          var colorValue$4 = match$19.hd;
+          var colorMode$3 = match$18.hd;
+          if (match$20) {
+            if (match$20.hd !== 59) {
               return [
                       1,
                       undefined
                     ];
             }
-            var match$22 = match$20.tl;
-            var match$23 = match$22.tl;
-            if (match$23.tl) {
+            var match$21 = match$20.tl;
+            if (!match$21) {
               return [
                       1,
                       undefined
                     ];
             }
-            style$1 = style$2;
-            cm1 = colorMode$3;
-            cv1 = colorValue$4;
-            cm2 = match$22.hd;
-            cv2 = match$23.hd;
-            xs$1 = codePoints;
-            exit = 3;
+            var cm2$2 = match$21.hd;
+            var match$22 = match$21.tl;
+            if (!match$22) {
+              return [
+                      1,
+                      undefined
+                    ];
+            }
+            if (match$22.tl) {
+              if (cm2$2 !== 49) {
+                return [
+                        1,
+                        undefined
+                      ];
+              }
+              var match$23 = match$21.tl;
+              var match$24 = match$23.tl;
+              if (match$24.tl) {
+                return [
+                        1,
+                        undefined
+                      ];
+              }
+              style$1 = style$2;
+              cm1 = colorMode$3;
+              cv1 = colorValue$4;
+              cm2 = match$23.hd;
+              cv2 = match$24.hd;
+              xs$1 = codePoints;
+              exit$1 = 4;
+            } else {
+              style$1 = style$2;
+              cm1 = colorMode$3;
+              cv1 = colorValue$4;
+              cm2 = cm2$2;
+              cv2 = match$22.hd;
+              xs$1 = codePoints;
+              exit$1 = 4;
+            }
           } else {
-            style$1 = style$2;
-            cm1 = colorMode$3;
-            cv1 = colorValue$4;
-            cm2 = cm2$2;
-            cv2 = match$21.hd;
-            xs$1 = codePoints;
-            exit = 3;
+            colorMode$1 = colorMode$3;
+            colorValue$1 = colorValue$4;
+            style = style$2;
+            exit$1 = 3;
           }
-        } else {
-          colorMode$1 = colorMode$3;
-          colorValue$1 = colorValue$4;
-          style = style$2;
-          exit = 2;
         }
+        
       }
       
-    }
-    
-  } else {
-    var match$24 = codePoints.tl;
-    if (!match$24) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$24.hd !== 27) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$25 = match$24.tl;
-    if (!match$25) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$25.hd !== 91) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$26 = match$25.tl;
-    if (!match$26) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$26.hd !== 49) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$27 = match$26.tl;
-    if (!match$27) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$27.hd !== 65) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$28 = match$27.tl;
-    if (!match$28) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$28.hd !== 27) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$29 = match$28.tl;
-    if (!match$29) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    if (match$29.hd !== 91) {
-      return [
-              1,
-              undefined
-            ];
-    }
-    var match$30 = match$29.tl;
-    if (match$30 && match$30.hd === 74) {
-      return [
-              9,
-              /* EraseLine */1
-            ];
     } else {
-      return [
-              1,
-              undefined
-            ];
-    }
-  }
-  switch (exit) {
-    case 1 :
+      var match$25 = codePoints.tl;
+      if (!match$25) {
         return [
-                length,
-                Belt_Option.flatMap(get(colorMode, colorValue + (
-                          Belt_List.length(xs) === 4 ? 10 : 0
-                        ) | 0), (function (colorCss) {
-                        return /* Style */{
-                                _0: colorCss
-                              };
-                      }))
+                1,
+                undefined
               ];
-    case 2 :
+      }
+      if (match$25.hd !== 27) {
         return [
-                length,
-                Belt_Option.flatMap(get(colorMode$1, colorValue$1), (function (colorCss) {
-                        var fontCss = get$1(style);
-                        if (fontCss !== undefined) {
-                          return /* Style */{
-                                  _0: Object.assign({}, colorCss, Caml_option.valFromOption(fontCss))
-                                };
-                        } else {
-                          return /* Style */{
-                                  _0: colorCss
-                                };
-                        }
-                      }))
+                1,
+                undefined
               ];
-    case 3 :
+      }
+      var match$26 = match$25.tl;
+      if (!match$26) {
         return [
-                length,
-                Belt_Option.flatMap(get(cm1, cv1), (function (colorCss1) {
-                        return Belt_Option.flatMap(get(cm2, cv2 + (
-                                        Belt_List.length(xs$1) === 9 ? 10 : 0
-                                      ) | 0), (function (colorCss2) {
-                                      var css = Object.assign({}, colorCss1, colorCss2);
-                                      var fontCss = get$1(style$1);
-                                      if (fontCss !== undefined) {
-                                        return /* Style */{
-                                                _0: Object.assign({}, css, Caml_option.valFromOption(fontCss))
-                                              };
-                                      } else {
-                                        return /* Style */{
-                                                _0: css
-                                              };
-                                      }
-                                    }));
-                      }))
+                1,
+                undefined
+              ];
+      }
+      if (match$26.hd !== 91) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      var match$27 = match$26.tl;
+      if (!match$27) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      if (match$27.hd !== 49) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      var match$28 = match$27.tl;
+      if (!match$28) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      if (match$28.hd !== 65) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      var match$29 = match$28.tl;
+      if (!match$29) {
+        return [
+                1,
+                undefined
               ];
-    
+      }
+      if (match$29.hd !== 27) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      var match$30 = match$29.tl;
+      if (!match$30) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      if (match$30.hd !== 91) {
+        return [
+                1,
+                undefined
+              ];
+      }
+      var match$31 = match$30.tl;
+      if (match$31 && match$31.hd === 74) {
+        return [
+                9,
+                /* EraseLine */1
+              ];
+      } else {
+        return [
+                1,
+                undefined
+              ];
+      }
+    }
+    switch (exit$1) {
+      case 2 :
+          return [
+                  length,
+                  Belt_Option.flatMap(get(colorMode, colorValue + (
+                            Belt_List.length(xs) === 4 ? 10 : 0
+                          ) | 0), (function (colorCss) {
+                          return {
+                                  TAG: /* Style */1,
+                                  _0: colorCss
+                                };
+                        }))
+                ];
+      case 3 :
+          return [
+                  length,
+                  Belt_Option.flatMap(get(colorMode$1, colorValue$1), (function (colorCss) {
+                          var fontCss = get$1(style);
+                          if (fontCss !== undefined) {
+                            return {
+                                    TAG: /* Style */1,
+                                    _0: Object.assign({}, colorCss, Caml_option.valFromOption(fontCss))
+                                  };
+                          } else {
+                            return {
+                                    TAG: /* Style */1,
+                                    _0: colorCss
+                                  };
+                          }
+                        }))
+                ];
+      case 4 :
+          return [
+                  length,
+                  Belt_Option.flatMap(get(cm1, cv1), (function (colorCss1) {
+                          return Belt_Option.flatMap(get(cm2, cv2 + (
+                                          Belt_List.length(xs$1) === 9 ? 10 : 0
+                                        ) | 0), (function (colorCss2) {
+                                        var css = Object.assign({}, colorCss1, colorCss2);
+                                        var fontCss = get$1(style$1);
+                                        if (fontCss !== undefined) {
+                                          return {
+                                                  TAG: /* Style */1,
+                                                  _0: Object.assign({}, css, Caml_option.valFromOption(fontCss))
+                                                };
+                                        } else {
+                                          return {
+                                                  TAG: /* Style */1,
+                                                  _0: css
+                                                };
+                                        }
+                                      }));
+                        }))
+                ];
+      
+    }
   }
+  
 }
 
 var AnsiCode = {
@@ -644,9 +721,11 @@ var AnsiCode = {
   combine: combine,
   addWeight: addWeight,
   addStyle: addStyle,
+  addDecoration: addDecoration,
   int_of_cp: int_of_cp,
   ColorCss: ColorCss,
   FontCss: FontCss,
+  HttpLink: HttpLink,
   parse: parse
 };
 
@@ -708,6 +787,21 @@ function parse$1(txt, length, pos) {
             
           }
         } else {
+          if (!code.TAG) {
+            return [
+                    pos$1,
+                    {
+                      hd: prevElem,
+                      tl: {
+                        hd: {
+                          TAG: /* Link */1,
+                          _0: code._0
+                        },
+                        tl: /* [] */0
+                      }
+                    }
+                  ];
+          }
           var match$2 = go(pos$1, pos$1);
           var styled = match$2[1];
           if (styled !== undefined) {
@@ -717,7 +811,7 @@ function parse$1(txt, length, pos) {
                       hd: prevElem,
                       tl: {
                         hd: {
-                          TAG: /* DocStyle */1,
+                          TAG: /* DocStyle */2,
                           _0: code._0,
                           _1: styled
                         },
@@ -770,32 +864,51 @@ function parse$2(txt) {
 }
 
 function render(doc) {
-  var go = function (_xs, _acc) {
+  var go = function (_xs, _idx, _acc) {
     while(true) {
       var acc = _acc;
+      var idx = _idx;
       var xs = _xs;
       if (!xs) {
         return Belt_List.toArray(Belt_List.reverse(acc));
       }
       var txt = xs.hd;
       if (typeof txt === "number") {
-        _acc = Belt_List.add(acc, React.createElement("br", undefined));
+        _acc = Belt_List.add(acc, React.createElement("br", {
+                  key: String(idx)
+                }));
+        _idx = idx + 1 | 0;
         _xs = xs.tl;
         continue ;
       }
-      if (txt.TAG) {
-        _acc = Belt_List.add(acc, React.createElement("span", {
-                  style: txt._0
-                }, go(txt._1, /* [] */0)));
-        _xs = xs.tl;
-        continue ;
+      switch (txt.TAG | 0) {
+        case /* Text */0 :
+            _acc = Belt_List.add(acc, txt._0);
+            _idx = idx + 1 | 0;
+            _xs = xs.tl;
+            continue ;
+        case /* Link */1 :
+            var href = txt._0;
+            _acc = Belt_List.add(acc, React.createElement("a", {
+                      key: String(idx),
+                      href: href
+                    }, href));
+            _idx = idx + 1 | 0;
+            _xs = xs.tl;
+            continue ;
+        case /* DocStyle */2 :
+            _acc = Belt_List.add(acc, React.createElement("span", {
+                      key: String(idx),
+                      style: txt._0
+                    }, go(txt._1, 0, /* [] */0)));
+            _idx = idx + 1 | 0;
+            _xs = xs.tl;
+            continue ;
+        
       }
-      _acc = Belt_List.add(acc, txt._0);
-      _xs = xs.tl;
-      continue ;
     };
   };
-  return go(doc, /* [] */0);
+  return go(doc, 0, /* [] */0);
 }
 
 function Ansi(Props) {

package/src/Ansi.re

@@ -18,6 +18,7 @@
 type document = list(atom)
 and atom =
   | Text(string)
+  | Link(string)
   | LineBreak
   | DocStyle(ReactDOM.Style.t, document);
 
@@ -30,6 +31,7 @@ module AnsiCode = {
     | Clear
     | EraseLine
     | CarriageReturn
+    | HRef(string)
     | Style(ReactDOM.Style.t);
 
   // Convert a 4 bits color code to its css color: https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit
@@ -43,6 +45,7 @@ module AnsiCode = {
     | 05 => "magenta"->Some
     | 06 => "cyan"->Some
     | 07 => "white"->Some
+    | 09 => "initial"->Some
     | 10 => "grey"->Some
     | 11 => "#DA2647"->Some
     | 12 => "#87FF2A"->Some
@@ -60,6 +63,7 @@ module AnsiCode = {
   let combine = (css1, css2) => ReactDOM.Style.combine(css1, css2);
   let addWeight = fontWeight => ReactDOM.Style.make(~fontWeight, ());
   let addStyle = fontStyle => ReactDOM.Style.make(~fontStyle, ());
+  let addDecoration = textDecoration => ReactDOM.Style.make(~textDecoration, ());
   let int_of_cp = c => c - 48;
 
   // Color management
@@ -109,8 +113,13 @@ module AnsiCode = {
       switch (fontMode) {
       | 0 => Regular->Some
       | 1 => "bold"->addWeight->FontStyle->Some
+      | 2 => "lighter"->addWeight->FontStyle->Some
       | 3 => "italic"->addStyle->FontStyle->Some
+      | 4 => "underline"->addDecoration->FontStyle->Some
+      // TODO: add blink for 5/6
       | 7 => Regular->Some
+      // 8 is for hiding, not widely supported.
+      | 9 => "line-through"->addDecoration->FontStyle->Some
       | _ => None
       };
 
@@ -124,9 +133,31 @@ module AnsiCode = {
       fontMode->int_of_cp->getFontStyle->Option.flatMap(getFontStyleCss);
   };
 
+  // Link management
+  module HttpLink = {
+    let linkRe = [%re "/^(http(s)?:\\/\\/[^\s]+)/"];
+
+    let get = (txt: string): parser(code) =>
+      linkRe
+      ->Js.Re.exec_(txt)
+      ->Option.flatMap(res =>
+          (
+            switch (res->Js.Re.captures) {
+            | [|url, _, _|] => url->Js.Nullable.toOption
+            | _ => None
+            }
+          )
+          ->Option.flatMap(url =>
+              (url->Js.String.length, url->HRef->Some)->Some
+            )
+        )
+      ->Option.getWithDefault((1, None));
+  };
+
   // Parse an ANSI code, returning the length of the sequence
   let parse = (txt: string, pos: int): parser(code) =>
     switch (Js.String.codePointAt(pos, txt)) {
+    | Some(0x68) => HttpLink.get(txt->Js.String.slice(~from=pos, ~to_=512))
     | Some(0x0a) => (1, CarriageReturn->Some)
     | Some(0x0d)
     | Some(0x1b) =>
@@ -143,12 +174,17 @@ module AnsiCode = {
       switch (codePoints) {
       // \n\x0d[1A\x0d[J
       | [10, 27, 91, 49, 65, 27, 91, 74, ..._] => (9, EraseLine->Some)
-      // [1K
-      | [91, 48, 75, ..._] => (4, EraseLine->Some)
+      // [_K
+      | [91, _, 75, ..._] => (4, EraseLine->Some)
+      // [K
+      | [91, 75, ..._] => (3, EraseLine->Some)
       // [00m
       | [91, 48, 48]
       // [0m
-      | [91, 48] => (length, Clear->Some)
+      | [91, 48]
+      // [m
+      | [91] => (length, Clear->Some)
+      // [_m
       | [91, style] => (
           length,
           style->FontCss.get->Option.flatMap(style => style->Style->Some),
@@ -219,7 +255,7 @@ module Document = {
       switch (pos == length, txt->AnsiCode.parse(pos)) {
       // we reached the end of the txt
       | (true, _) => (pos, [text(txt, prev, pos)]->Some)
-      // current codepoint is an ANSI code
+      // current codepoint is an ANSI code or a HRef
       | (_, (length, Some(code))) =>
         let prevElem = txt->text(prev, pos);
         let pos = pos + length;
@@ -227,6 +263,7 @@ module Document = {
         | Clear => (pos, [prevElem]->Some)
         | EraseLine => pos->go(pos)
         | CarriageReturn => (pos, [prevElem, LineBreak]->Some)
+        | HRef(link) => (pos, [prevElem, link->Link]->Some)
         | Style(style) =>
           // recursively parse the stylized block
           switch (pos->go(pos)) {
@@ -260,15 +297,30 @@ let parse = (txt: string): document => {
 
 // Convert a document to a React.element
 let render = (doc: document): React.element => {
-  let rec go = (xs: document, acc: list(React.element)): React.element =>
+  let rec go =
+          (xs: document, idx: int, acc: list(React.element)): React.element =>
     switch (xs) {
     | [] => acc->List.reverse->List.toArray->ReasonReact.array
-    | [LineBreak, ...xs] => xs->go(acc->List.add(<br />))
-    | [Text(txt), ...xs] => xs->go(acc->List.add(txt->React.string))
+    | [LineBreak, ...xs] =>
+      xs->go(idx + 1, acc->List.add(<br key={idx->string_of_int} />))
+    | [Text(txt), ...xs] =>
+      xs->go(idx + 1, acc->List.add(txt->React.string))
+    | [Link(href), ...xs] =>
+      xs->go(
+        idx + 1,
+        acc->List.add(
+          <a key={idx->string_of_int} href> href->React.string </a>,
+        ),
+      )
     | [DocStyle(style, elems), ...xs] =>
-      xs->go(acc->List.add(<span style> {elems->go([])} </span>))
+      xs->go(
+        idx + 1,
+        acc->List.add(
+          <span key={idx->string_of_int} style> {elems->go(0, [])} </span>,
+        ),
+      )
     };
-  doc->go([]);
+  doc->go(0, []);
 };
 
 // The react component