[playground] add flow parsing

I don't think there is a monaco config to parse flow (for IDE integration), but 
now we should be able to parse flow for the Forget compiler. 

Since typescript and flow has different parsing rules, playground will only use 
flow parser if `// @flow` is at the top of the file. 

Test: 
[link](https://react-forget-playground-j7nd7j8cv-fbopensource.vercel.app/#eyJzb3VyY2UiOiIvLyBAZmxvd1xuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGxldCB4ID0gKHByb3BzOiBudW1iZXIpO1xuICByZXR1cm4geDtcbn1cbiJ9)

compiler/forget/packages/playground/components/Editor/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { parse } from "@babel/parser";
+import { parse, ParserPlugin } from "@babel/parser";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
 import {
@@ -39,8 +39,18 @@ function parseFunctions(
 ): Array<NodePath<t.FunctionDeclaration>> {
   const items: Array<NodePath<t.FunctionDeclaration>> = [];
   try {
+    const isFlow = source
+      .trim()
+      .split("\n", 1)[0]
+      .match(/\s*\/\/\s*\@flow\s*/);
+    let type_transform: ParserPlugin;
+    if (isFlow) {
+      type_transform = "flow";
+    } else {
+      type_transform = "typescript";
+    }
     const ast = parse(source, {
-      plugins: ["typescript", "jsx"],
+      plugins: [type_transform, "jsx"],
       sourceType: "module",
     });
     traverse(ast, {
@@ -150,7 +160,7 @@ export default function Editor() {
 
   return (
     <>
-      <div className="flex basis relative top-14">
+      <div className="relative flex basis top-14">
         <div
           style={{ minWidth: 650 }}
           className={clsx("relative sm:basis-1/4")}