Add support for Figma Asset

Author: vinpac

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.8.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/block.tsx

@@ -240,6 +240,7 @@ export const Block: React.FC<Block> = props => {
 
     case "image":
     case "embed":
+    case "figma":
     case "video":
       const value = block.value as ContentValueType;
 

src/components/asset.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BlockType, ContentValueType, MapImageUrl } from "../types";
 
-const types = ["video", "image", "embed"];
+const types = ["video", "image", "embed", "figma"];
 
 const Asset: React.FC<{
   block: BlockType;
@@ -24,6 +24,22 @@ const Asset: React.FC<{
 
   const aspectRatio = block_aspect_ratio || block_height / block_width;
 
+  if (type === "figma") {
+    return (
+      <div
+        style={{
+          paddingBottom: `${aspectRatio * 100}%`,
+          position: "relative"
+        }}
+      >
+        <iframe
+          className="notion-image-inset"
+          src={value.properties.source[0][0]}
+        />
+      </div>
+    );
+  }
+
   if (type === "embed" || type === "video") {
     return (
       <div

src/types.ts

@@ -214,6 +214,11 @@ interface ImageValueType extends ContentValueType {
 interface EmbedValueType extends ContentValueType {
   type: "embed";
 }
+
+interface FigmaValueType extends ContentValueType {
+  type: "figma";
+}
+
 interface VideoValueType extends ContentValueType {
   type: "video";
 }
@@ -273,6 +278,7 @@ export type BlockValueType =
   | ImageValueType
   | VideoValueType
   | EmbedValueType
+  | FigmaValueType
   | CalloutValueType
   | BookmarkValueType
   | ToggleValueType