Merge pull request #350 from MichaelCasaDev/support-image-alignment

Support for new assets alignment

Author: transitive-bullshit

packages/notion-types/src/block.ts

@@ -131,6 +131,7 @@ export interface BaseContentBlock extends BaseBlock {
     caption?: Decoration[]
   }
   format?: {
+    block_alignment: 'center' | 'left' | 'right'
     block_width: number
     block_height: number
     display_source: string
@@ -351,6 +352,7 @@ export interface GoogleDriveBlock extends BaseContentBlock {
       user_name: string
       modified_time: number
     }
+    block_alignment: 'center' | 'left' | 'right'
     block_width: number
     block_height: number
     display_source: string

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

@@ -87,6 +87,21 @@ export const Asset: React.FC<{
         }
       }
     } else {
+      switch (block.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
       }