Fix image rendering

Author: tobiaslins

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,7 @@
       "pre-commit": "tsdx lint"
     }
   },
+  "types": "./dist/types.d.ts",
   "prettier": {},
   "bugs": {
     "url": "https://github.com/splitbee/react-notion/issues"

src/components/asset.tsx

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { CSSProperties } from "react";
-import { BlockType } from "types";
+import { BlockType, ContentValueType } from "../types";
 
-const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
-  const { value } = block;
+const types = ["video", "image", "embed"];
 
-  if (block.value.type === "embed") {
+const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
+  const value = block.value as ContentValueType;
+  const type = block.value.type;
+  if (types.includes(type)) {
     const { id } = value;
-    const format = block.value.format;
+    const format = (block.value as any).format;
     const {
       block_width,
       block_height,
       display_source,
       block_aspect_ratio
     } = format;
 
-    const isImage = value.type === "image";
+    const isImage = type === "image";
     const Comp = isImage ? "img" : "video";
 
     const useWrapper = block_aspect_ratio && !block_height;
@@ -46,7 +48,7 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
         <Comp
           key={!useWrapper ? id : undefined}
           src={`https://notion.so/image/${encodeURIComponent(
-            block.value.properties.source[0][0]
+            value.properties.source[0][0]
           )}`}
           controls={!isImage}
           alt={`An ${isImage ? "image" : "video"} from Splitbee`}

src/types.ts

@@ -197,8 +197,8 @@ export type BlockValueType =
   | ColumnListValueType
   | ColumnValueType
   | QuoteValueType
-  | ImageValueType
   | CodeValueType
+  | ImageValueType
   | VideoValueType
   | EmbedValueType;