Support for new image alignment

- Support the new Notion image alignment system, with left, right and center alignment
- Some types in asset-wrapper

Author: MichaelCasaDev

packages/notion-types/src/block.ts

@@ -142,6 +142,24 @@ export interface BaseContentBlock extends BaseBlock {
   file_ids?: string[]
 }
 
+export interface BaseImageBlock extends BaseContentBlock {
+  properties: {
+    source: string[][]
+    caption?: Decoration[]
+  }
+  format?: {
+    block_alignment: 'center' | 'left' | 'right'
+    block_width: number
+    block_height: number
+    display_source: string
+    block_full_width: boolean
+    block_page_width: boolean
+    block_aspect_ratio: number
+    block_preserve_scale: boolean
+  }
+  file_ids?: string[]
+}
+
 export interface BasePageBlock extends BaseBlock {
   properties?: {
     title: Decoration[]

packages/react-notion-x/src/components/asset-wrapper.tsx

@@ -74,7 +74,7 @@ export const AssetWrapper: React.FC<{
   return figure
 }
 
-function isValidURL(str) {
+function isValidURL(str: string) {
   // TODO: replace this with a more well-tested package
   const pattern = new RegExp(
     '^(https?:\\/\\/)?' + // protocol
@@ -88,7 +88,7 @@ function isValidURL(str) {
   return !!pattern.test(str)
 }
 
-function extractHostname(url) {
+function extractHostname(url: string) {
   try {
     const hostname = new URL(url).hostname
     return hostname

packages/react-notion-x/src/components/asset.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { BaseContentBlock, Block } from 'notion-types'
+import { BaseContentBlock, BaseImageBlock, Block } from 'notion-types'
 import { getTextContent } from 'notion-utils'
 
 import { useNotionContext } from '../context'
@@ -87,6 +87,23 @@ export const Asset: React.FC<{
         }
       }
     } else {
+      if (block.type == 'image') {
+        switch ((block as BaseImageBlock).format?.block_alignment) {
+          case 'center': {
+            style.alignSelf = 'center'
+            break
+          }
+          case 'left': {
+            style.alignSelf = 'start'
+            break
+          }
+          case 'right': {
+            style.alignSelf = 'end'
+            break
+          }
+        }
+      }
+
       if (block_width) {
         style.width = block_width
       }