Improve Monaco syntax highlighting (codesandbox#834)

* Improve tokenization

* Add two syntax highlight rule

Author: fathyb

packages/app/src/app/components/CodeEditor/Monaco/elements.js

@@ -62,52 +62,32 @@ export const CodeContainer = styled.div`
   .mtk5 {
     color: #99c794 !important;
   }
-  .mtk12.PropertyAssignment {
-    color: #99c794;
-  }
-  .mtk12.PropertyAssignment.PropertyAccessExpression {
-    color: #fac863;
-  }
-  .mtk12.Identifier.JsxOpeningElement {
-    color: #ec5f67;
-  }
-  .mtk12.Identifier.JsxExpression.JsxClosingElement {
-    color: #ec5f67;
-  }
-  .mtk12.Identifier.JsxClosingElement {
-    color: #ec5f67 !important;
-  }
-  .mtk12.Identifier.JsxSelfClosingElement {
-    color: #ec5f67;
-  }
-  .mtk12.Identifier.VariableStatement.JsxClosingElement {
-    color: #ec5f67 !important;
+
+  .JsxText,
+  .JsxSelfClosingElement,
+  .JsxClosingElement {
+    color: #e0e0e0;
   }
-  .mtk12.VariableStatement.JsxSelfClosingElement.Identifier {
+
+  .tagName-of-JsxOpeningElement,
+  .tagName-of-JsxClosingElement,
+  .tagName-of-JsxSelfClosingElement {
     color: #ec5f67;
   }
-  .mtk12.Identifier.JsxAttribute.VariableDeclaration {
+
+  .name-of-JsxAttribute {
     color: #aa759f;
   }
-  .mtk12.JsxExpression.VariableStatement {
-    color: #fac863;
-  }
-  .mtk12.VariableStatement.JsxSelfClosingElement {
-    color: #e0e0e0;
-  }
-  .mtk12.VariableStatement.JsxClosingElement {
-    color: #e0e0e0;
-  }
-  .mtk12.JsxElement.JsxText {
-    color: #e0e0e0;
+
+  .name-of-PropertyAssignment {
+    color: #99c794;
   }
-  .JsxText {
-    color: #e0e0e0;
+
+  .typeName-of-TypeReference {
+    color: #5faeec;
   }
 
-  .Identifier.CallExpression
-    + .OpenParenToken.CallExpression
-    + .Identifier.CallExpression {
-    color: #fac863 !important;
+  .name-of-PropertyAccessExpression {
+    color: #83bdc9;
   }
 `;

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -1041,7 +1041,11 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
         classification.end
       ),
       options: {
-        inlineClassName: classification.kind,
+        inlineClassName: classification.type
+          ? `${classification.kind} ${classification.type}-of-${
+              classification.parentKind
+            }`
+          : classification.kind,
       },
     }));
 

packages/app/src/app/components/CodeEditor/Monaco/workers/syntax-highlighter.js

@@ -28,20 +28,60 @@ function nodeToRange(node) {
   return [0, 0];
 }
 
+function getNodeType(parent, node) {
+  return Object.keys(parent).find(key => parent[key] === node);
+}
+
+function getParentRanges(node) {
+  const ranges = [];
+  const [start, end] = nodeToRange(node);
+  let lastEnd = start;
+
+  self.ts.forEachChild(node, child => {
+    const [start, end] = nodeToRange(child);
+
+    ranges.push({
+      start: lastEnd,
+      end: start,
+    });
+    lastEnd = end;
+  });
+
+  if (lastEnd !== end) {
+    ranges.push({
+      start: lastEnd,
+      end,
+    });
+  }
+
+  return ranges;
+}
+
 function addChildNodes(node, lines, classifications) {
+  const parentKind = ts.SyntaxKind[node.kind];
+
   self.ts.forEachChild(node, id => {
-    const [start, end] = nodeToRange(id);
-
-    const { offset, line: startLine } = getLineNumberAndOffset(start, lines);
-    const { line: endLine } = getLineNumberAndOffset(end, lines);
-    classifications.push({
-      start: id.getStart() + 1 - offset,
-      end: id.getEnd() + 1 - offset,
-      kind: self.ts.SyntaxKind[id.kind],
-      node: id,
-      startLine,
-      endLine,
-    });
+    const type = getNodeType(node, id);
+
+    classifications.push(
+      ...getParentRanges(id).map(({ start, end }) => {
+        const { offset, line: startLine } = getLineNumberAndOffset(
+          start,
+          lines
+        );
+        const { line: endLine } = getLineNumberAndOffset(end, lines);
+
+        return {
+          start: start + 1 - offset,
+          end: end + 1 - offset,
+          kind: ts.SyntaxKind[id.kind],
+          parentKind,
+          type,
+          startLine,
+          endLine,
+        };
+      })
+    );
 
     addChildNodes(id, lines, classifications);
   });