Add bilibili Embed Service (#2550)

* feat: Add bilibili Embed Service

* chore: code format

* chore: update bilibili icon

shared/embeds/Bilibili.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+const URL_REGEX = /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Vimeo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const videoId = matches[2];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1`}
+        title={`Bilibili Embed (${videoId})`}
+      />
+    );
+  }
+}

shared/embeds/Bilibili.test.js

@@ -0,0 +1,23 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import Bilibili from "./Bilibili";
+
+describe("Bilibili", () => {
+  const match = Bilibili.ENABLED[0];
+  test("to be enabled on video link", () => {
+    expect(
+      "https://www.bilibili.com/video/BV1CV411s7jd?spm_id_from=333.999.0.0".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://youtu.be".match(match)).toBe(null);
+    expect("https://bilibili.com".match(match)).toBe(null);
+    expect("https://www.bilibili.com".match(match)).toBe(null);
+    expect("https://www.bilibili.com/logout".match(match)).toBe(null);
+    expect("https://www.bilibili.com/feed/subscriptions".match(match)).toBe(
+      null
+    );
+  });
+});

shared/embeds/index.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Abstract from "./Abstract";
 import Airtable from "./Airtable";
+import Bilibili from "./Bilibili";
 import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
@@ -66,6 +67,13 @@ export default [
     component: Airtable,
     matcher: matcher(Airtable),
   },
+  {
+    title: "Bilibili",
+    keywords: "video",
+    icon: () => <Img src="/images/bilibili.png" />,
+    component: Bilibili,
+    matcher: matcher(Bilibili),
+  },
   {
     title: "Cawemo",
     keywords: "bpmn process",