Playground color for MISSING/ERROR

[mingodad]

Problem

When looking at non trivial input in the playground it's not easy to spot MISSING/ERROR nodes if we could have then with a different color/background-color that would help.

Here is one possible way to allow it (tested locally):

--------------------------- cli/src/playground.html ---------------------------
index 420cd28d..ea2ee843 100644
@@ -172,5 +172,9 @@
       text-decoration: underline red dashed;
       -webkit-text-decoration: underline red dashed;
     }
+
+    a.a-missing, a.a-error {
+	color : blue;
+    }
   </style>
 </body>

------------------------- docs/assets/js/playground.js -------------------------
index c14bf0f5..800a5d17 100644
@@ -146,10 +146,15 @@ let tree;
       }
 
       let displayName;
+      let displayClass = 'plain';
       if (cursor.nodeIsMissing) {
         displayName = `MISSING ${cursor.nodeType}`
+	displayClass += ' a-missing';
       } else if (cursor.nodeIsNamed) {
         displayName = cursor.nodeType;
+	if (displayName == 'ERROR') {
+	  displayClass += ' a-error';
+	}
       }
 
       if (visitedChildren) {
@@ -181,7 +186,7 @@ let tree;
           } else {
             fieldName = '';
           }
-          row = `<div>${'  '.repeat(indentLevel)}${fieldName}<a class='plain' href="#" data-id=${id} data-range="${start.row},${start.column},${end.row},${end.column}">${displayName}</a> [${start.row}, ${start.column}] - [${end.row}, ${end.column}]`;
+          row = `<div>${'  '.repeat(indentLevel)}${fieldName}<a class='${displayClass}' href="#" data-id=${id} data-range="${start.row},${start.column},${end.row},${end.column}">${displayName}</a> [${start.row}, ${start.column}] - [${end.row}, ${end.column}]`;
           finishedRow = true;
         }

Expected behavior

No response

[amaanq]

PR welcome if you think it looks good (a screenshot would be nice too)

[mingodad]

Here is a screenshot:

[mingodad]

Here is the PR #3042