From 3121e31bc03cb2f38c00fa5ae33eba3bb325b6dc Mon Sep 17 00:00:00 2001
From: Oleksii Surnin <bromkrololo@gmail.com>
Date: Sun, 29 Oct 2023 20:33:07 +0100
Subject: [PATCH 1/5] Devided block into block-components, added custom
 components feature

---
 examples/minimal/components/NotionPage.tsx    |   2 +-
 .../src/block-components/alias.tsx            |  31 +
 .../src/block-components/bookmark.tsx         |  94 +++
 .../src/block-components/callout.tsx          |  30 +
 .../src/block-components/column-list.tsx      |  13 +
 .../src/block-components/column.tsx           |  34 +
 .../src/block-components/divider.tsx          |  12 +
 .../src/block-components/drive.tsx            |  24 +
 .../src/block-components/header.tsx           | 117 +++
 .../src/block-components/list.tsx             |  57 ++
 .../src/block-components/page.tsx             | 264 +++++++
 .../src/block-components/quote.tsx            |  31 +
 .../block-components/table-of-contents.tsx    |  53 ++
 .../src/block-components/table-row.tsx        |  56 ++
 .../src/block-components/table.tsx            |  17 +
 .../src/block-components/text.tsx             |  34 +
 .../src/block-components/to-do.tsx            |  40 +
 .../src/block-components/toggle.tsx           |  22 +
 packages/react-notion-x/src/block.tsx         | 730 ++----------------
 packages/react-notion-x/src/context.tsx       |  43 +-
 packages/react-notion-x/src/types.ts          |  19 +
 21 files changed, 1057 insertions(+), 666 deletions(-)
 create mode 100644 packages/react-notion-x/src/block-components/alias.tsx
 create mode 100644 packages/react-notion-x/src/block-components/bookmark.tsx
 create mode 100644 packages/react-notion-x/src/block-components/callout.tsx
 create mode 100644 packages/react-notion-x/src/block-components/column-list.tsx
 create mode 100644 packages/react-notion-x/src/block-components/column.tsx
 create mode 100644 packages/react-notion-x/src/block-components/divider.tsx
 create mode 100644 packages/react-notion-x/src/block-components/drive.tsx
 create mode 100644 packages/react-notion-x/src/block-components/header.tsx
 create mode 100644 packages/react-notion-x/src/block-components/list.tsx
 create mode 100644 packages/react-notion-x/src/block-components/page.tsx
 create mode 100644 packages/react-notion-x/src/block-components/quote.tsx
 create mode 100644 packages/react-notion-x/src/block-components/table-of-contents.tsx
 create mode 100644 packages/react-notion-x/src/block-components/table-row.tsx
 create mode 100644 packages/react-notion-x/src/block-components/table.tsx
 create mode 100644 packages/react-notion-x/src/block-components/text.tsx
 create mode 100644 packages/react-notion-x/src/block-components/to-do.tsx
 create mode 100644 packages/react-notion-x/src/block-components/toggle.tsx

diff --git a/examples/minimal/components/NotionPage.tsx b/examples/minimal/components/NotionPage.tsx
index c39f9653..da28f3b1 100644
--- a/examples/minimal/components/NotionPage.tsx
+++ b/examples/minimal/components/NotionPage.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Head from 'next/head'
 
+import { NotionRenderer } from 'areyes-react-notion-x'
 import { ExtendedRecordMap } from 'notion-types'
 import { getPageTitle } from 'notion-utils'
-import { NotionRenderer } from 'react-notion-x'
 
 export const NotionPage = ({
   recordMap,
diff --git a/packages/react-notion-x/src/block-components/alias.tsx b/packages/react-notion-x/src/block-components/alias.tsx
new file mode 100644
index 00000000..3da6b668
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/alias.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { PageTitle } from '../components/page-title'
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const Alias: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ block }) => {
+  const ctx = useNotionContext()
+  const { recordMap, components, mapPageUrl } = ctx
+
+  const blockPointerId = block?.format?.alias_pointer?.id
+  const linkedBlock = recordMap.block[blockPointerId]?.value
+  if (!linkedBlock) {
+    console.log('"alias" missing block', blockPointerId)
+    return null
+  }
+
+  return (
+    <components.PageLink
+      className={cs('notion-page-link', blockPointerId)}
+      href={mapPageUrl(blockPointerId)}
+    >
+      <PageTitle block={linkedBlock} />
+    </components.PageLink>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/bookmark.tsx b/packages/react-notion-x/src/block-components/bookmark.tsx
new file mode 100644
index 00000000..dbafb574
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/bookmark.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+import { getTextContent } from 'notion-utils'
+
+import { LazyImage } from '../components/lazy-image'
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const Bookmark: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ blockId, block }) => {
+  const ctx = useNotionContext()
+  const { components, mapImageUrl } = ctx
+
+  if (!block.properties) return null
+
+  const link = block.properties.link
+  if (!link || !link[0]?.[0]) return null
+
+  let title = getTextContent(block.properties.title)
+  if (!title) {
+    title = getTextContent(link)
+  }
+
+  if (title) {
+    if (title.startsWith('http')) {
+      try {
+        const url = new URL(title)
+        title = url.hostname
+      } catch (err) {
+        // ignore invalid links
+      }
+    }
+  }
+
+  return (
+    <div className='notion-row'>
+      <components.Link
+        target='_blank'
+        rel='noopener noreferrer'
+        className={cs(
+          'notion-bookmark',
+          block.format?.block_color && `notion-${block.format.block_color}`,
+          blockId
+        )}
+        href={link[0][0]}
+      >
+        <div>
+          {title && (
+            <div className='notion-bookmark-title'>
+              <Text value={[[title]]} block={block} />
+            </div>
+          )}
+
+          {block.properties?.description && (
+            <div className='notion-bookmark-description'>
+              <Text value={block.properties?.description} block={block} />
+            </div>
+          )}
+
+          <div className='notion-bookmark-link'>
+            {block.format?.bookmark_icon && (
+              <div className='notion-bookmark-link-icon'>
+                <LazyImage
+                  src={mapImageUrl(block.format?.bookmark_icon, block)}
+                  alt={title}
+                />
+              </div>
+            )}
+
+            <div className='notion-bookmark-link-text'>
+              <Text value={link} block={block} />
+            </div>
+          </div>
+        </div>
+
+        {block.format?.bookmark_cover && (
+          <div className='notion-bookmark-image'>
+            <LazyImage
+              src={mapImageUrl(block.format?.bookmark_cover, block)}
+              alt={getTextContent(block.properties?.title)}
+              style={{
+                objectFit: 'cover'
+              }}
+            />
+          </div>
+        )}
+      </components.Link>
+    </div>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/callout.tsx b/packages/react-notion-x/src/block-components/callout.tsx
new file mode 100644
index 00000000..32a9286f
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/callout.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { PageIcon } from '../components/page-icon'
+import { Text } from '../components/text'
+import { cs } from '../utils'
+
+export const Callout: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  return (
+    <div
+      className={cs(
+        'notion-callout',
+        block.format?.block_color && `notion-${block.format?.block_color}_co`,
+        blockId
+      )}
+    >
+      <PageIcon block={block} />
+
+      <div className='notion-callout-text'>
+        <Text value={block.properties?.title} block={block} />
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/column-list.tsx b/packages/react-notion-x/src/block-components/column-list.tsx
new file mode 100644
index 00000000..dc4610b0
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/column-list.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { cs } from '../utils'
+
+export const ColumnList: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, children }) => {
+  return <div className={cs('notion-row', blockId)}>{children}</div>
+}
diff --git a/packages/react-notion-x/src/block-components/column.tsx b/packages/react-notion-x/src/block-components/column.tsx
new file mode 100644
index 00000000..04a943b2
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/column.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const Column: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, children, block }) => {
+  const ctx = useNotionContext()
+  const { recordMap } = ctx
+
+  // note: notion uses 46px
+  const spacerWidth = `min(32px, 4vw)`
+  const ratio = block.format?.column_ratio || 0.5
+  const parent = recordMap.block[block.parent_id]?.value
+  const columns = parent?.content?.length || Math.max(2, Math.ceil(1.0 / ratio))
+
+  const width = `calc((100% - (${columns - 1} * ${spacerWidth})) * ${ratio})`
+  const style = { width }
+
+  return (
+    <>
+      <div className={cs('notion-column', blockId)} style={style}>
+        {children}
+      </div>
+
+      <div className='notion-spacer' />
+    </>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/divider.tsx b/packages/react-notion-x/src/block-components/divider.tsx
new file mode 100644
index 00000000..9a0b6d37
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/divider.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { cs } from '../utils'
+
+export const Divider: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ blockId }) => {
+  return <hr className={cs('notion-hr', blockId)} />
+}
diff --git a/packages/react-notion-x/src/block-components/drive.tsx b/packages/react-notion-x/src/block-components/drive.tsx
new file mode 100644
index 00000000..2d446071
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/drive.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import * as types from 'notion-types'
+import { Block } from 'notion-types'
+
+import { AssetWrapper } from '../components/asset-wrapper'
+import { GoogleDrive } from '../components/google-drive'
+
+export const Drive: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ blockId, block }) => {
+  const properties = block.format?.drive_properties
+  if (!properties) {
+    //check if this drive actually needs to be embeded ex. google sheets.
+    if (block.format?.display_source) {
+      return <AssetWrapper blockId={blockId} block={block} />
+    }
+  }
+
+  return (
+    <GoogleDrive block={block as types.GoogleDriveBlock} className={blockId} />
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/header.tsx b/packages/react-notion-x/src/block-components/header.tsx
new file mode 100644
index 00000000..7d75a39d
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/header.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+import {
+  getBlockParentPage,
+  getPageTableOfContents,
+  getTextContent,
+  uuidToId
+} from 'notion-utils'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { LinkIcon } from '../icons/link-icon'
+import { cs } from '../utils'
+
+// TODO: use react state instead of a global for this
+const tocIndentLevelCache: {
+  [blockId: string]: number
+} = {}
+
+export const TextHeader: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  const ctx = useNotionContext()
+  const { recordMap } = ctx
+
+  if (!block.properties) return null
+
+  const blockColor = block.format?.block_color
+  const id = uuidToId(block.id)
+  const title = getTextContent(block.properties.title) || `Notion Header ${id}`
+
+  // we use a cache here because constructing the ToC is non-trivial
+  let indentLevel = tocIndentLevelCache[block.id]
+  let indentLevelClass: string
+
+  if (indentLevel === undefined) {
+    const page = getBlockParentPage(block, recordMap)
+
+    if (page) {
+      const toc = getPageTableOfContents(page, recordMap)
+      const tocItem = toc.find((tocItem) => tocItem.id === block.id)
+
+      if (tocItem) {
+        indentLevel = tocItem.indentLevel
+        tocIndentLevelCache[block.id] = indentLevel
+      }
+    }
+  }
+
+  if (indentLevel !== undefined) {
+    indentLevelClass = `notion-h-indent-${indentLevel}`
+  }
+
+  const isH1 = block.type === 'header'
+  const isH2 = block.type === 'sub_header'
+  const isH3 = block.type === 'sub_sub_header'
+
+  const classNameStr = cs(
+    isH1 && 'notion-h notion-h1',
+    isH2 && 'notion-h notion-h2',
+    isH3 && 'notion-h notion-h3',
+    blockColor && `notion-${blockColor}`,
+    indentLevelClass,
+    blockId
+  )
+
+  const innerHeader = (
+    <span>
+      <div id={id} className='notion-header-anchor' />
+      {!block.format?.toggleable && (
+        <a className='notion-hash-link' href={`#${id}`} title={title}>
+          <LinkIcon />
+        </a>
+      )}
+
+      <span className='notion-h-title'>
+        <Text value={block.properties.title} block={block} />
+      </span>
+    </span>
+  )
+  let headerBlock = null
+
+  //page title takes the h1 so all header blocks are greater
+  if (isH1) {
+    headerBlock = (
+      <h2 className={classNameStr} data-id={id}>
+        {innerHeader}
+      </h2>
+    )
+  } else if (isH2) {
+    headerBlock = (
+      <h3 className={classNameStr} data-id={id}>
+        {innerHeader}
+      </h3>
+    )
+  } else {
+    headerBlock = (
+      <h4 className={classNameStr} data-id={id}>
+        {innerHeader}
+      </h4>
+    )
+  }
+
+  if (block.format?.toggleable) {
+    return (
+      <details className={cs('notion-toggle', blockId)}>
+        <summary>{headerBlock}</summary>
+        <div>{children}</div>
+      </details>
+    )
+  } else {
+    return headerBlock
+  }
+}
diff --git a/packages/react-notion-x/src/block-components/list.tsx b/packages/react-notion-x/src/block-components/list.tsx
new file mode 100644
index 00000000..d2517939
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/list.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { cs, getListNumber } from '../utils'
+
+export const List: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  const ctx = useNotionContext()
+  const { recordMap } = ctx
+
+  const wrapList = (content: React.ReactNode, start?: number) =>
+    block.type === 'bulleted_list' ? (
+      <ul className={cs('notion-list', 'notion-list-disc', blockId)}>
+        {content}
+      </ul>
+    ) : (
+      <ol
+        start={start}
+        className={cs('notion-list', 'notion-list-numbered', blockId)}
+      >
+        {content}
+      </ol>
+    )
+
+  let output: JSX.Element | null = null
+
+  if (block.content) {
+    output = (
+      <>
+        {block.properties && (
+          <li>
+            <Text value={block.properties.title} block={block} />
+          </li>
+        )}
+        {wrapList(children)}
+      </>
+    )
+  } else {
+    output = block.properties ? (
+      <li>
+        <Text value={block.properties.title} block={block} />
+      </li>
+    ) : null
+  }
+
+  const isTopLevel =
+    block.type !== recordMap.block[block.parent_id]?.value?.type
+  const start = getListNumber(block.id, recordMap.block)
+
+  return isTopLevel ? wrapList(output, start) : output
+}
diff --git a/packages/react-notion-x/src/block-components/page.tsx b/packages/react-notion-x/src/block-components/page.tsx
new file mode 100644
index 00000000..dcb23208
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/page.tsx
@@ -0,0 +1,264 @@
+import * as React from 'react'
+
+import * as types from 'notion-types'
+import {
+  getBlockCollectionId,
+  getBlockIcon,
+  getPageTableOfContents,
+  getTextContent
+} from 'notion-utils'
+
+import { LazyImage } from '../components/lazy-image'
+import { PageAside } from '../components/page-aside'
+import { PageIcon } from '../components/page-icon'
+import { PageTitle } from '../components/page-title'
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { cs, isUrl } from '../utils'
+
+const pageCoverStyleCache: Record<string, object> = {}
+
+export const Page: React.FC<{
+  block: types.Block
+  blockId: string
+  level: number
+
+  className?: string
+  bodyClassName?: string
+
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  pageHeader?: React.ReactNode
+  pageFooter?: React.ReactNode
+  pageTitle?: React.ReactNode
+  pageAside?: React.ReactNode
+  pageCover?: React.ReactNode
+
+  hideBlockId?: boolean
+  disableHeader?: boolean
+
+  children?: React.ReactNode
+}> = (props) => {
+  const {
+    block,
+    blockId,
+    children,
+    level,
+    className,
+    bodyClassName,
+    header,
+    footer,
+    pageHeader,
+    pageFooter,
+    pageTitle,
+    pageAside,
+    pageCover,
+    disableHeader
+  } = props
+
+  const [activeSection, setActiveSection] = React.useState(null)
+
+  const ctx = useNotionContext()
+  const {
+    components,
+    fullPage,
+    darkMode,
+    recordMap,
+    mapPageUrl,
+    mapImageUrl,
+    showTableOfContents,
+    minTableOfContentsItems,
+    defaultPageIcon,
+    defaultPageCover,
+    defaultPageCoverPosition
+  } = ctx
+
+  if (!block.properties) return null
+
+  if (level === 0) {
+    const {
+      page_icon = defaultPageIcon,
+      page_cover = defaultPageCover,
+      page_cover_position = defaultPageCoverPosition,
+      page_full_width,
+      page_small_text
+    } = block.format || {}
+
+    if (fullPage) {
+      const properties =
+        block.type === 'page'
+          ? block.properties
+          : {
+              title:
+                recordMap.collection[getBlockCollectionId(block, recordMap)]
+                  ?.value?.name
+            }
+
+      const coverPosition = (1 - (page_cover_position || 0.5)) * 100
+      const pageCoverObjectPosition = `center ${coverPosition}%`
+      let pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition]
+      if (!pageCoverStyle) {
+        pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition] = {
+          objectPosition: pageCoverObjectPosition
+        }
+      }
+
+      const pageIcon = getBlockIcon(block, recordMap) ?? defaultPageIcon
+      const isPageIconUrl = pageIcon && isUrl(pageIcon)
+
+      const toc = getPageTableOfContents(block as types.PageBlock, recordMap)
+
+      const hasToc =
+        showTableOfContents && toc.length >= minTableOfContentsItems
+      const hasAside = (hasToc || pageAside) && !page_full_width
+      const hasPageCover = pageCover || page_cover
+
+      return (
+        <div
+          className={cs(
+            'notion',
+            'notion-app',
+            darkMode ? 'dark-mode' : 'light-mode',
+            blockId,
+            className
+          )}
+        >
+          <div className='notion-viewport' />
+
+          <div className='notion-frame'>
+            {!disableHeader && <components.Header block={block} />}
+            {header}
+
+            <div className='notion-page-scroller'>
+              {hasPageCover &&
+                (pageCover ? (
+                  pageCover
+                ) : (
+                  <div className='notion-page-cover-wrapper'>
+                    <LazyImage
+                      src={mapImageUrl(page_cover, block)}
+                      alt={getTextContent(properties?.title)}
+                      priority={true}
+                      className='notion-page-cover'
+                      style={pageCoverStyle}
+                    />
+                  </div>
+                ))}
+
+              <main
+                className={cs(
+                  'notion-page',
+                  hasPageCover
+                    ? 'notion-page-has-cover'
+                    : 'notion-page-no-cover',
+                  page_icon ? 'notion-page-has-icon' : 'notion-page-no-icon',
+                  isPageIconUrl
+                    ? 'notion-page-has-image-icon'
+                    : 'notion-page-has-text-icon',
+                  'notion-full-page',
+                  page_full_width && 'notion-full-width',
+                  page_small_text && 'notion-small-text',
+                  bodyClassName
+                )}
+              >
+                {page_icon && (
+                  <PageIcon
+                    block={block}
+                    defaultIcon={defaultPageIcon}
+                    inline={false}
+                  />
+                )}
+
+                {pageHeader}
+
+                <h1 className='notion-title'>
+                  {pageTitle ?? (
+                    <Text value={properties?.title} block={block} />
+                  )}
+                </h1>
+
+                {(block.type === 'collection_view_page' ||
+                  (block.type === 'page' &&
+                    block.parent_table === 'collection')) && (
+                  <components.Collection block={block} ctx={ctx} />
+                )}
+
+                {block.type !== 'collection_view_page' && (
+                  <div
+                    className={cs(
+                      'notion-page-content',
+                      hasAside && 'notion-page-content-has-aside',
+                      hasToc && 'notion-page-content-has-toc'
+                    )}
+                  >
+                    <article className='notion-page-content-inner'>
+                      {children}
+                    </article>
+
+                    {hasAside && (
+                      <PageAside
+                        toc={toc}
+                        activeSection={activeSection}
+                        setActiveSection={setActiveSection}
+                        hasToc={hasToc}
+                        hasAside={hasAside}
+                        pageAside={pageAside}
+                      />
+                    )}
+                  </div>
+                )}
+
+                {pageFooter}
+              </main>
+
+              {footer}
+            </div>
+          </div>
+        </div>
+      )
+    } else {
+      return (
+        <main
+          className={cs(
+            'notion',
+            darkMode ? 'dark-mode' : 'light-mode',
+            'notion-page',
+            page_full_width && 'notion-full-width',
+            page_small_text && 'notion-small-text',
+            blockId,
+            className,
+            bodyClassName
+          )}
+        >
+          <div className='notion-viewport' />
+
+          {pageHeader}
+
+          {(block.type === 'collection_view_page' ||
+            (block.type === 'page' && block.parent_table === 'collection')) && (
+            <components.Collection block={block} ctx={ctx} />
+          )}
+
+          {block.type !== 'collection_view_page' && children}
+
+          {pageFooter}
+        </main>
+      )
+    }
+  } else {
+    const blockColor = block.format?.block_color
+
+    return (
+      <components.PageLink
+        className={cs(
+          'notion-page-link',
+          blockColor && `notion-${blockColor}`,
+          blockId
+        )}
+        href={mapPageUrl(block.id)}
+      >
+        <PageTitle block={block} />
+      </components.PageLink>
+    )
+  }
+}
diff --git a/packages/react-notion-x/src/block-components/quote.tsx b/packages/react-notion-x/src/block-components/quote.tsx
new file mode 100644
index 00000000..56ea377a
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/quote.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { cs } from '../utils'
+
+export const Quote: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  if (!block.properties) return null
+
+  const blockColor = block.format?.block_color
+
+  return (
+    <blockquote
+      className={cs(
+        'notion-quote',
+        blockColor && `notion-${blockColor}`,
+        blockId
+      )}
+    >
+      <div>
+        <Text value={block.properties.title} block={block} />
+      </div>
+      {children}
+    </blockquote>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/table-of-contents.tsx b/packages/react-notion-x/src/block-components/table-of-contents.tsx
new file mode 100644
index 00000000..62d5ec6d
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/table-of-contents.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+import {
+  getBlockParentPage,
+  getPageTableOfContents,
+  uuidToId
+} from 'notion-utils'
+
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const TableOfContents: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ blockId, block }) => {
+  const ctx = useNotionContext()
+  const { recordMap } = ctx
+
+  const page = getBlockParentPage(block, recordMap)
+  if (!page) return null
+
+  const toc = getPageTableOfContents(page, recordMap)
+  const blockColor = block.format?.block_color
+
+  return (
+    <div
+      className={cs(
+        'notion-table-of-contents',
+        blockColor && `notion-${blockColor}`,
+        blockId
+      )}
+    >
+      {toc.map((tocItem) => (
+        <a
+          key={tocItem.id}
+          href={`#${uuidToId(tocItem.id)}`}
+          className='notion-table-of-contents-item'
+        >
+          <span
+            className='notion-table-of-contents-item-body'
+            style={{
+              display: 'inline-block',
+              marginLeft: tocItem.indentLevel * 24
+            }}
+          >
+            {tocItem.text}
+          </span>
+        </a>
+      ))}
+    </div>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/table-row.tsx b/packages/react-notion-x/src/block-components/table-row.tsx
new file mode 100644
index 00000000..9aa6a68e
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/table-row.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+
+import * as types from 'notion-types'
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const TableRow: React.FC<{
+  blockId: string
+  block: Block
+}> = ({ blockId, block }) => {
+  const ctx = useNotionContext()
+  const { recordMap } = ctx
+
+  const tableBlock = recordMap.block[block.parent_id]?.value as types.TableBlock
+  const order = tableBlock.format?.table_block_column_order
+  const formatMap = tableBlock.format?.table_block_column_format
+  const backgroundColor = block.format?.block_color
+
+  if (!tableBlock || !order) {
+    return null
+  }
+
+  return (
+    <tr
+      className={cs(
+        'notion-simple-table-row',
+        backgroundColor && `notion-${backgroundColor}`,
+        blockId
+      )}
+    >
+      {order.map((column) => {
+        const color = formatMap?.[column]?.color
+
+        return (
+          <td
+            key={column}
+            className={color ? `notion-${color}` : ''}
+            style={{
+              width: formatMap?.[column]?.width || 120
+            }}
+          >
+            <div className='notion-simple-table-cell'>
+              <Text
+                value={block.properties?.[column] || [['ㅤ']]}
+                block={block}
+              />
+            </div>
+          </td>
+        )
+      })}
+    </tr>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/table.tsx b/packages/react-notion-x/src/block-components/table.tsx
new file mode 100644
index 00000000..c5ba6b96
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/table.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { cs } from '../utils'
+
+export const Table: React.FC<{
+  blockId: string
+  block: Block
+  children: React.ReactNode
+}> = ({ blockId, children }) => {
+  return (
+    <table className={cs('notion-simple-table', blockId)}>
+      <tbody>{children}</tbody>
+    </table>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/text.tsx b/packages/react-notion-x/src/block-components/text.tsx
new file mode 100644
index 00000000..3cc4641a
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/text.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { cs } from '../utils'
+
+export const TextBlock: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  if (!block.properties && !block.content?.length) {
+    return <div className={cs('notion-blank', blockId)}>&nbsp;</div>
+  }
+
+  const blockColor = block.format?.block_color
+
+  return (
+    <div
+      className={cs(
+        'notion-text',
+        blockColor && `notion-${blockColor}`,
+        blockId
+      )}
+    >
+      {block.properties?.title && (
+        <Text value={block.properties.title} block={block} />
+      )}
+
+      {children && <div className='notion-text-children'>{children}</div>}
+    </div>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/to-do.tsx b/packages/react-notion-x/src/block-components/to-do.tsx
new file mode 100644
index 00000000..95113b3f
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/to-do.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { cs } from '../utils'
+
+export const ToDo: React.FC<{
+  blockId: string
+  block: Block
+  children: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  const ctx = useNotionContext()
+
+  if (!block.properties) return null
+
+  const { components } = ctx
+
+  const isChecked = block.properties?.checked?.[0]?.[0] === 'Yes'
+
+  return (
+    <div className={cs('notion-to-do', blockId)}>
+      <div className='notion-to-do-item'>
+        <components.Checkbox blockId={blockId} isChecked={isChecked} />
+
+        <div
+          className={cs(
+            'notion-to-do-body',
+            isChecked && `notion-to-do-checked`
+          )}
+        >
+          <Text value={block.properties?.title} block={block} />
+        </div>
+      </div>
+
+      <div className='notion-to-do-children'>{children}</div>
+    </div>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/toggle.tsx b/packages/react-notion-x/src/block-components/toggle.tsx
new file mode 100644
index 00000000..8e65f71d
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/toggle.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { Text } from '../components/text'
+import { cs } from '../utils'
+
+export const Toggle: React.FC<{
+  blockId: string
+  block: Block
+  children?: React.ReactNode
+}> = ({ blockId, block, children }) => {
+  return (
+    <details className={cs('notion-toggle', blockId)}>
+      <summary>
+        <Text value={block.properties?.title} block={block} />
+      </summary>
+
+      <div>{children}</div>
+    </details>
+  )
+}
diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index 6b3e0084..35f4846d 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -1,29 +1,12 @@
 import * as React from 'react'
 
 import * as types from 'notion-types'
-import {
-  getBlockCollectionId,
-  getBlockIcon,
-  getBlockParentPage,
-  getPageTableOfContents,
-  getTextContent,
-  uuidToId
-} from 'notion-utils'
+import { uuidToId } from 'notion-utils'
 
 import { AssetWrapper } from './components/asset-wrapper'
-import { Audio } from './components/audio'
-import { EOI } from './components/eoi'
-import { File } from './components/file'
-import { GoogleDrive } from './components/google-drive'
-import { LazyImage } from './components/lazy-image'
-import { PageAside } from './components/page-aside'
-import { PageIcon } from './components/page-icon'
-import { PageTitle } from './components/page-title'
 import { SyncPointerBlock } from './components/sync-pointer-block'
-import { Text } from './components/text'
 import { useNotionContext } from './context'
-import { LinkIcon } from './icons/link-icon'
-import { cs, getListNumber, isUrl } from './utils'
+import { cs } from './utils'
 
 interface BlockProps {
   block: types.Block
@@ -46,47 +29,12 @@ interface BlockProps {
   children?: React.ReactNode
 }
 
-// TODO: use react state instead of a global for this
-const tocIndentLevelCache: {
-  [blockId: string]: number
-} = {}
-
-const pageCoverStyleCache: Record<string, object> = {}
-
 export const Block: React.FC<BlockProps> = (props) => {
   const ctx = useNotionContext()
-  const {
-    components,
-    fullPage,
-    darkMode,
-    recordMap,
-    mapPageUrl,
-    mapImageUrl,
-    showTableOfContents,
-    minTableOfContentsItems,
-    defaultPageIcon,
-    defaultPageCover,
-    defaultPageCoverPosition
-  } = ctx
-
-  const [activeSection, setActiveSection] = React.useState(null)
-
-  const {
-    block,
-    children,
-    level,
-    className,
-    bodyClassName,
-    header,
-    footer,
-    pageHeader,
-    pageFooter,
-    pageTitle,
-    pageAside,
-    pageCover,
-    hideBlockId,
-    disableHeader
-  } = props
+
+  const components = ctx.components
+
+  const { block, children, level, hideBlockId } = props
 
   if (!block) {
     return null
@@ -106,365 +54,39 @@ export const Block: React.FC<BlockProps> = (props) => {
     case 'collection_view_page':
     // fallthrough
     case 'page':
-      if (level === 0) {
-        const {
-          page_icon = defaultPageIcon,
-          page_cover = defaultPageCover,
-          page_cover_position = defaultPageCoverPosition,
-          page_full_width,
-          page_small_text
-        } = block.format || {}
-
-        if (fullPage) {
-          const properties =
-            block.type === 'page'
-              ? block.properties
-              : {
-                  title:
-                    recordMap.collection[getBlockCollectionId(block, recordMap)]
-                      ?.value?.name
-                }
-
-          const coverPosition = (1 - (page_cover_position || 0.5)) * 100
-          const pageCoverObjectPosition = `center ${coverPosition}%`
-          let pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition]
-          if (!pageCoverStyle) {
-            pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition] = {
-              objectPosition: pageCoverObjectPosition
-            }
-          }
-
-          const pageIcon = getBlockIcon(block, recordMap) ?? defaultPageIcon
-          const isPageIconUrl = pageIcon && isUrl(pageIcon)
-
-          const toc = getPageTableOfContents(
-            block as types.PageBlock,
-            recordMap
-          )
-
-          const hasToc =
-            showTableOfContents && toc.length >= minTableOfContentsItems
-          const hasAside = (hasToc || pageAside) && !page_full_width
-          const hasPageCover = pageCover || page_cover
-
-          return (
-            <div
-              className={cs(
-                'notion',
-                'notion-app',
-                darkMode ? 'dark-mode' : 'light-mode',
-                blockId,
-                className
-              )}
-            >
-              <div className='notion-viewport' />
-
-              <div className='notion-frame'>
-                {!disableHeader && <components.Header block={block} />}
-                {header}
-
-                <div className='notion-page-scroller'>
-                  {hasPageCover &&
-                    (pageCover ? (
-                      pageCover
-                    ) : (
-                      <div className='notion-page-cover-wrapper'>
-                        <LazyImage
-                          src={mapImageUrl(page_cover, block)}
-                          alt={getTextContent(properties?.title)}
-                          priority={true}
-                          className='notion-page-cover'
-                          style={pageCoverStyle}
-                        />
-                      </div>
-                    ))}
-
-                  <main
-                    className={cs(
-                      'notion-page',
-                      hasPageCover
-                        ? 'notion-page-has-cover'
-                        : 'notion-page-no-cover',
-                      page_icon
-                        ? 'notion-page-has-icon'
-                        : 'notion-page-no-icon',
-                      isPageIconUrl
-                        ? 'notion-page-has-image-icon'
-                        : 'notion-page-has-text-icon',
-                      'notion-full-page',
-                      page_full_width && 'notion-full-width',
-                      page_small_text && 'notion-small-text',
-                      bodyClassName
-                    )}
-                  >
-                    {page_icon && (
-                      <PageIcon
-                        block={block}
-                        defaultIcon={defaultPageIcon}
-                        inline={false}
-                      />
-                    )}
-
-                    {pageHeader}
-
-                    <h1 className='notion-title'>
-                      {pageTitle ?? (
-                        <Text value={properties?.title} block={block} />
-                      )}
-                    </h1>
-
-                    {(block.type === 'collection_view_page' ||
-                      (block.type === 'page' &&
-                        block.parent_table === 'collection')) && (
-                      <components.Collection block={block} ctx={ctx} />
-                    )}
-
-                    {block.type !== 'collection_view_page' && (
-                      <div
-                        className={cs(
-                          'notion-page-content',
-                          hasAside && 'notion-page-content-has-aside',
-                          hasToc && 'notion-page-content-has-toc'
-                        )}
-                      >
-                        <article className='notion-page-content-inner'>
-                          {children}
-                        </article>
-
-                        {hasAside && (
-                          <PageAside
-                            toc={toc}
-                            activeSection={activeSection}
-                            setActiveSection={setActiveSection}
-                            hasToc={hasToc}
-                            hasAside={hasAside}
-                            pageAside={pageAside}
-                          />
-                        )}
-                      </div>
-                    )}
-
-                    {pageFooter}
-                  </main>
-
-                  {footer}
-                </div>
-              </div>
-            </div>
-          )
-        } else {
-          return (
-            <main
-              className={cs(
-                'notion',
-                darkMode ? 'dark-mode' : 'light-mode',
-                'notion-page',
-                page_full_width && 'notion-full-width',
-                page_small_text && 'notion-small-text',
-                blockId,
-                className,
-                bodyClassName
-              )}
-            >
-              <div className='notion-viewport' />
-
-              {pageHeader}
-
-              {(block.type === 'collection_view_page' ||
-                (block.type === 'page' &&
-                  block.parent_table === 'collection')) && (
-                <components.Collection block={block} ctx={ctx} />
-              )}
-
-              {block.type !== 'collection_view_page' && children}
-
-              {pageFooter}
-            </main>
-          )
-        }
-      } else {
-        const blockColor = block.format?.block_color
-
-        return (
-          <components.PageLink
-            className={cs(
-              'notion-page-link',
-              blockColor && `notion-${blockColor}`,
-              blockId
-            )}
-            href={mapPageUrl(block.id)}
-          >
-            <PageTitle block={block} />
-          </components.PageLink>
-        )
-      }
+      return <components.Page blockId={blockId} {...props}></components.Page>
 
     case 'header':
     // fallthrough
     case 'sub_header':
     // fallthrough
     case 'sub_sub_header': {
-      if (!block.properties) return null
-
-      const blockColor = block.format?.block_color
-      const id = uuidToId(block.id)
-      const title =
-        getTextContent(block.properties.title) || `Notion Header ${id}`
-
-      // we use a cache here because constructing the ToC is non-trivial
-      let indentLevel = tocIndentLevelCache[block.id]
-      let indentLevelClass: string
-
-      if (indentLevel === undefined) {
-        const page = getBlockParentPage(block, recordMap)
-
-        if (page) {
-          const toc = getPageTableOfContents(page, recordMap)
-          const tocItem = toc.find((tocItem) => tocItem.id === block.id)
-
-          if (tocItem) {
-            indentLevel = tocItem.indentLevel
-            tocIndentLevelCache[block.id] = indentLevel
-          }
-        }
-      }
-
-      if (indentLevel !== undefined) {
-        indentLevelClass = `notion-h-indent-${indentLevel}`
-      }
-
-      const isH1 = block.type === 'header'
-      const isH2 = block.type === 'sub_header'
-      const isH3 = block.type === 'sub_sub_header'
-
-      const classNameStr = cs(
-        isH1 && 'notion-h notion-h1',
-        isH2 && 'notion-h notion-h2',
-        isH3 && 'notion-h notion-h3',
-        blockColor && `notion-${blockColor}`,
-        indentLevelClass,
-        blockId
-      )
-
-      const innerHeader = (
-        <span>
-          <div id={id} className='notion-header-anchor' />
-          {!block.format?.toggleable && (
-            <a className='notion-hash-link' href={`#${id}`} title={title}>
-              <LinkIcon />
-            </a>
-          )}
-
-          <span className='notion-h-title'>
-            <Text value={block.properties.title} block={block} />
-          </span>
-        </span>
+      return (
+        <components.TextHeader block={block} blockId={blockId}>
+          {children}
+        </components.TextHeader>
       )
-      let headerBlock = null
-
-      //page title takes the h1 so all header blocks are greater
-      if (isH1) {
-        headerBlock = (
-          <h2 className={classNameStr} data-id={id}>
-            {innerHeader}
-          </h2>
-        )
-      } else if (isH2) {
-        headerBlock = (
-          <h3 className={classNameStr} data-id={id}>
-            {innerHeader}
-          </h3>
-        )
-      } else {
-        headerBlock = (
-          <h4 className={classNameStr} data-id={id}>
-            {innerHeader}
-          </h4>
-        )
-      }
-
-      if (block.format?.toggleable) {
-        return (
-          <details className={cs('notion-toggle', blockId)}>
-            <summary>{headerBlock}</summary>
-            <div>{children}</div>
-          </details>
-        )
-      } else {
-        return headerBlock
-      }
     }
 
     case 'divider':
-      return <hr className={cs('notion-hr', blockId)} />
+      return <components.Divider block={block} blockId={blockId} />
 
     case 'text': {
-      if (!block.properties && !block.content?.length) {
-        return <div className={cs('notion-blank', blockId)}>&nbsp;</div>
-      }
-
-      const blockColor = block.format?.block_color
-
       return (
-        <div
-          className={cs(
-            'notion-text',
-            blockColor && `notion-${blockColor}`,
-            blockId
-          )}
-        >
-          {block.properties?.title && (
-            <Text value={block.properties.title} block={block} />
-          )}
-
-          {children && <div className='notion-text-children'>{children}</div>}
-        </div>
+        <components.TextBlock block={block} blockId={blockId}>
+          {children}
+        </components.TextBlock>
       )
     }
 
     case 'bulleted_list':
     // fallthrough
     case 'numbered_list': {
-      const wrapList = (content: React.ReactNode, start?: number) =>
-        block.type === 'bulleted_list' ? (
-          <ul className={cs('notion-list', 'notion-list-disc', blockId)}>
-            {content}
-          </ul>
-        ) : (
-          <ol
-            start={start}
-            className={cs('notion-list', 'notion-list-numbered', blockId)}
-          >
-            {content}
-          </ol>
-        )
-
-      let output: JSX.Element | null = null
-
-      if (block.content) {
-        output = (
-          <>
-            {block.properties && (
-              <li>
-                <Text value={block.properties.title} block={block} />
-              </li>
-            )}
-            {wrapList(children)}
-          </>
-        )
-      } else {
-        output = block.properties ? (
-          <li>
-            <Text value={block.properties.title} block={block} />
-          </li>
-        ) : null
-      }
-
-      const isTopLevel =
-        block.type !== recordMap.block[block.parent_id]?.value?.type
-      const start = getListNumber(block.id, recordMap.block)
-
-      return isTopLevel ? wrapList(output, start) : output
+      return (
+        <components.List block={block} blockId={blockId}>
+          {children}
+        </components.List>
+      )
     }
 
     case 'embed':
@@ -493,27 +115,21 @@ export const Block: React.FC<BlockProps> = (props) => {
       return <AssetWrapper blockId={blockId} block={block} />
 
     case 'drive': {
-      const properties = block.format?.drive_properties
-      if (!properties) {
-        //check if this drive actually needs to be embeded ex. google sheets.
-        if (block.format?.display_source) {
-          return <AssetWrapper blockId={blockId} block={block} />
-        }
-      }
+      return <components.Drive blockId={blockId} block={block} />
+    }
 
+    case 'audio':
       return (
-        <GoogleDrive
-          block={block as types.GoogleDriveBlock}
+        <components.Audio
+          block={block as types.AudioBlock}
           className={blockId}
         />
       )
-    }
-
-    case 'audio':
-      return <Audio block={block as types.AudioBlock} className={blockId} />
 
     case 'file':
-      return <File block={block as types.FileBlock} className={blockId} />
+      return (
+        <components.File block={block as types.FileBlock} className={blockId} />
+      )
 
     case 'equation':
       return (
@@ -528,50 +144,24 @@ export const Block: React.FC<BlockProps> = (props) => {
       return <components.Code block={block as types.CodeBlock} />
 
     case 'column_list':
-      return <div className={cs('notion-row', blockId)}>{children}</div>
-
-    case 'column': {
-      // note: notion uses 46px
-      const spacerWidth = `min(32px, 4vw)`
-      const ratio = block.format?.column_ratio || 0.5
-      const parent = recordMap.block[block.parent_id]?.value
-      const columns =
-        parent?.content?.length || Math.max(2, Math.ceil(1.0 / ratio))
-
-      const width = `calc((100% - (${
-        columns - 1
-      } * ${spacerWidth})) * ${ratio})`
-      const style = { width }
-
       return (
-        <>
-          <div className={cs('notion-column', blockId)} style={style}>
-            {children}
-          </div>
+        <components.ColumnList blockId={blockId} block={block}>
+          {children}
+        </components.ColumnList>
+      )
 
-          <div className='notion-spacer' />
-        </>
+    case 'column':
+      return (
+        <components.Column blockId={blockId} block={block}>
+          {children}
+        </components.Column>
       )
-    }
 
     case 'quote': {
-      if (!block.properties) return null
-
-      const blockColor = block.format?.block_color
-
       return (
-        <blockquote
-          className={cs(
-            'notion-quote',
-            blockColor && `notion-${blockColor}`,
-            blockId
-          )}
-        >
-          <div>
-            <Text value={block.properties.title} block={block} />
-          </div>
+        <components.Quote blockId={blockId} block={block}>
           {children}
-        </blockquote>
+        </components.Quote>
       )
     }
 
@@ -581,174 +171,36 @@ export const Block: React.FC<BlockProps> = (props) => {
       )
 
     case 'callout':
-      if (components.Callout) {
-        return <components.Callout block={block} className={blockId} />
-      } else {
-        return (
-          <div
-            className={cs(
-              'notion-callout',
-              block.format?.block_color &&
-                `notion-${block.format?.block_color}_co`,
-              blockId
-            )}
-          >
-            <PageIcon block={block} />
-
-            <div className='notion-callout-text'>
-              <Text value={block.properties?.title} block={block} />
-              {children}
-            </div>
-          </div>
-        )
-      }
+      return (
+        <components.Callout blockId={blockId} block={block}>
+          {children}
+        </components.Callout>
+      )
 
     case 'bookmark': {
-      if (!block.properties) return null
-
-      const link = block.properties.link
-      if (!link || !link[0]?.[0]) return null
-
-      let title = getTextContent(block.properties.title)
-      if (!title) {
-        title = getTextContent(link)
-      }
-
-      if (title) {
-        if (title.startsWith('http')) {
-          try {
-            const url = new URL(title)
-            title = url.hostname
-          } catch (err) {
-            // ignore invalid links
-          }
-        }
-      }
-
       return (
-        <div className='notion-row'>
-          <components.Link
-            target='_blank'
-            rel='noopener noreferrer'
-            className={cs(
-              'notion-bookmark',
-              block.format?.block_color && `notion-${block.format.block_color}`,
-              blockId
-            )}
-            href={link[0][0]}
-          >
-            <div>
-              {title && (
-                <div className='notion-bookmark-title'>
-                  <Text value={[[title]]} block={block} />
-                </div>
-              )}
-
-              {block.properties?.description && (
-                <div className='notion-bookmark-description'>
-                  <Text value={block.properties?.description} block={block} />
-                </div>
-              )}
-
-              <div className='notion-bookmark-link'>
-                {block.format?.bookmark_icon && (
-                  <div className='notion-bookmark-link-icon'>
-                    <LazyImage
-                      src={mapImageUrl(block.format?.bookmark_icon, block)}
-                      alt={title}
-                    />
-                  </div>
-                )}
-
-                <div className='notion-bookmark-link-text'>
-                  <Text value={link} block={block} />
-                </div>
-              </div>
-            </div>
-
-            {block.format?.bookmark_cover && (
-              <div className='notion-bookmark-image'>
-                <LazyImage
-                  src={mapImageUrl(block.format?.bookmark_cover, block)}
-                  alt={getTextContent(block.properties?.title)}
-                  style={{
-                    objectFit: 'cover'
-                  }}
-                />
-              </div>
-            )}
-          </components.Link>
-        </div>
+        <components.Bookmark
+          blockId={blockId}
+          block={block}
+        ></components.Bookmark>
       )
     }
 
     case 'toggle':
       return (
-        <details className={cs('notion-toggle', blockId)}>
-          <summary>
-            <Text value={block.properties?.title} block={block} />
-          </summary>
-
-          <div>{children}</div>
-        </details>
+        <components.Toggle blockId={blockId} block={block}>
+          {children}
+        </components.Toggle>
       )
 
-    case 'table_of_contents': {
-      const page = getBlockParentPage(block, recordMap)
-      if (!page) return null
-
-      const toc = getPageTableOfContents(page, recordMap)
-      const blockColor = block.format?.block_color
-
-      return (
-        <div
-          className={cs(
-            'notion-table-of-contents',
-            blockColor && `notion-${blockColor}`,
-            blockId
-          )}
-        >
-          {toc.map((tocItem) => (
-            <a
-              key={tocItem.id}
-              href={`#${uuidToId(tocItem.id)}`}
-              className='notion-table-of-contents-item'
-            >
-              <span
-                className='notion-table-of-contents-item-body'
-                style={{
-                  display: 'inline-block',
-                  marginLeft: tocItem.indentLevel * 24
-                }}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          ))}
-        </div>
-      )
-    }
+    case 'table_of_contents':
+      return <components.TableOfContents blockId={blockId} block={block} />
 
     case 'to_do': {
-      const isChecked = block.properties?.checked?.[0]?.[0] === 'Yes'
-
       return (
-        <div className={cs('notion-to-do', blockId)}>
-          <div className='notion-to-do-item'>
-            <components.Checkbox blockId={blockId} isChecked={isChecked} />
-
-            <div
-              className={cs(
-                'notion-to-do-body',
-                isChecked && `notion-to-do-checked`
-              )}
-            >
-              <Text value={block.properties?.title} block={block} />
-            </div>
-          </div>
-
-          <div className='notion-to-do-children'>{children}</div>
-        </div>
+        <components.ToDo blockId={blockId} block={block}>
+          {children}
+        </components.ToDo>
       )
     }
 
@@ -758,76 +210,28 @@ export const Block: React.FC<BlockProps> = (props) => {
     case 'transclusion_reference':
       return <SyncPointerBlock block={block} level={level + 1} {...props} />
 
-    case 'alias': {
-      const blockPointerId = block?.format?.alias_pointer?.id
-      const linkedBlock = recordMap.block[blockPointerId]?.value
-      if (!linkedBlock) {
-        console.log('"alias" missing block', blockPointerId)
-        return null
-      }
-
+    case 'alias':
       return (
-        <components.PageLink
-          className={cs('notion-page-link', blockPointerId)}
-          href={mapPageUrl(blockPointerId)}
-        >
-          <PageTitle block={linkedBlock} />
-        </components.PageLink>
+        <components.Alias blockId={blockId} block={block}></components.Alias>
       )
-    }
 
     case 'table':
       return (
-        <table className={cs('notion-simple-table', blockId)}>
-          <tbody>{children}</tbody>
-        </table>
+        <components.Table blockId={blockId} block={block}>
+          {children}
+        </components.Table>
       )
 
-    case 'table_row': {
-      const tableBlock = recordMap.block[block.parent_id]
-        ?.value as types.TableBlock
-      const order = tableBlock.format?.table_block_column_order
-      const formatMap = tableBlock.format?.table_block_column_format
-      const backgroundColor = block.format?.block_color
-
-      if (!tableBlock || !order) {
-        return null
-      }
-
+    case 'table_row':
       return (
-        <tr
-          className={cs(
-            'notion-simple-table-row',
-            backgroundColor && `notion-${backgroundColor}`,
-            blockId
-          )}
-        >
-          {order.map((column) => {
-            const color = formatMap?.[column]?.color
-
-            return (
-              <td
-                key={column}
-                className={color ? `notion-${color}` : ''}
-                style={{
-                  width: formatMap?.[column]?.width || 120
-                }}
-              >
-                <div className='notion-simple-table-cell'>
-                  <Text
-                    value={block.properties?.[column] || [['ㅤ']]}
-                    block={block}
-                  />
-                </div>
-              </td>
-            )
-          })}
-        </tr>
+        <components.TableRow
+          blockId={blockId}
+          block={block}
+        ></components.TableRow>
       )
-    }
 
     case 'external_object_instance':
-      return <EOI block={block} className={blockId} />
+      return <components.EOI block={block} className={blockId} />
 
     default:
       if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index 63140538..ca39553b 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -2,8 +2,28 @@ import * as React from 'react'
 
 import { ExtendedRecordMap } from 'notion-types'
 
+import { Alias } from './block-components/alias'
+import { Bookmark } from './block-components/bookmark'
+import { Callout } from './block-components/callout'
+import { Column } from './block-components/column'
+import { ColumnList } from './block-components/column-list'
+import { Divider } from './block-components/divider'
+import { Drive } from './block-components/drive'
+import { TextHeader } from './block-components/header'
+import { List } from './block-components/list'
+import { Page } from './block-components/page'
+import { Quote } from './block-components/quote'
+import { Table } from './block-components/table'
+import { TableOfContents } from './block-components/table-of-contents'
+import { TableRow } from './block-components/table-row'
+import { TextBlock } from './block-components/text'
+import { ToDo } from './block-components/to-do'
+import { Toggle } from './block-components/toggle'
 import { AssetWrapper } from './components/asset-wrapper'
+import { Audio } from './components/audio'
 import { Checkbox as DefaultCheckbox } from './components/checkbox'
+import { EOI } from './components/eoi'
+import { File } from './components/file'
 import { Header } from './components/header'
 import { wrapNextImage, wrapNextLink } from './next'
 import {
@@ -108,7 +128,6 @@ const defaultComponents: NotionComponents = {
   Link: DefaultLinkMemo,
   PageLink: DefaultPageLinkMemo,
   Checkbox: DefaultCheckbox,
-  Callout: undefined, // use the built-in callout rendering by default
 
   Code: dummyComponent('Code'),
   Equation: dummyComponent('Equation'),
@@ -136,8 +155,28 @@ const defaultComponents: NotionComponents = {
   Tweet: dummyComponent('Tweet'),
   Modal: dummyComponent('Modal'),
 
+  Embed: DefaultEmbed,
   Header: DefaultHeader,
-  Embed: DefaultEmbed
+  TextHeader,
+  Divider,
+  TextBlock,
+  Drive,
+  List,
+  ColumnList,
+  Column,
+  Quote,
+  Callout,
+  Bookmark,
+  Toggle,
+  TableOfContents,
+  ToDo,
+  Alias,
+  Table,
+  TableRow,
+  Page,
+  EOI,
+  Audio,
+  File
 }
 
 const defaultNotionContext: NotionContext = {
diff --git a/packages/react-notion-x/src/types.ts b/packages/react-notion-x/src/types.ts
index 9eec16c9..463d3951 100644
--- a/packages/react-notion-x/src/types.ts
+++ b/packages/react-notion-x/src/types.ts
@@ -27,6 +27,25 @@ export interface NotionComponents {
   Code: any
   Equation: any
   Callout?: any
+  TextHeader?: any
+  Divider?: any
+  TextBlock?: any
+  Drive?: any
+  List?: any
+  ColumnList?: any
+  Column?: any
+  Quote?: any
+  Bookmark?: any
+  Toggle?: any
+  TableOfContents?: any
+  ToDo?: any
+  Alias?: any
+  Table?: any
+  TableRow?: any
+  Page?: any
+  EOI?: any
+  Audio?: any
+  File?: any
 
   // collection
   Collection: any

From 9e0c1ba0fef61042bbc3efe01fc20c94f604babf Mon Sep 17 00:00:00 2001
From: Oleksii Surnin <bromkrololo@gmail.com>
Date: Sun, 29 Oct 2023 20:37:42 +0100
Subject: [PATCH 2/5] Moved File and Audio to block-components folder

---
 .../src/{components => block-components}/audio.tsx            | 0
 .../src/{components => block-components}/file.tsx             | 2 +-
 packages/react-notion-x/src/context.tsx                       | 4 ++--
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/react-notion-x/src/{components => block-components}/audio.tsx (100%)
 rename packages/react-notion-x/src/{components => block-components}/file.tsx (96%)

diff --git a/packages/react-notion-x/src/components/audio.tsx b/packages/react-notion-x/src/block-components/audio.tsx
similarity index 100%
rename from packages/react-notion-x/src/components/audio.tsx
rename to packages/react-notion-x/src/block-components/audio.tsx
diff --git a/packages/react-notion-x/src/components/file.tsx b/packages/react-notion-x/src/block-components/file.tsx
similarity index 96%
rename from packages/react-notion-x/src/components/file.tsx
rename to packages/react-notion-x/src/block-components/file.tsx
index aab9b46f..30367fe6 100644
--- a/packages/react-notion-x/src/components/file.tsx
+++ b/packages/react-notion-x/src/block-components/file.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 
 import { FileBlock } from 'notion-types'
 
+import { Text } from '../components/text'
 import { useNotionContext } from '../context'
 import { FileIcon } from '../icons/file-icon'
 import { cs } from '../utils'
-import { Text } from './text'
 
 export const File: React.FC<{
   block: FileBlock
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index ca39553b..39020d91 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -3,12 +3,14 @@ import * as React from 'react'
 import { ExtendedRecordMap } from 'notion-types'
 
 import { Alias } from './block-components/alias'
+import { Audio } from './block-components/audio'
 import { Bookmark } from './block-components/bookmark'
 import { Callout } from './block-components/callout'
 import { Column } from './block-components/column'
 import { ColumnList } from './block-components/column-list'
 import { Divider } from './block-components/divider'
 import { Drive } from './block-components/drive'
+import { File } from './block-components/file'
 import { TextHeader } from './block-components/header'
 import { List } from './block-components/list'
 import { Page } from './block-components/page'
@@ -20,10 +22,8 @@ import { TextBlock } from './block-components/text'
 import { ToDo } from './block-components/to-do'
 import { Toggle } from './block-components/toggle'
 import { AssetWrapper } from './components/asset-wrapper'
-import { Audio } from './components/audio'
 import { Checkbox as DefaultCheckbox } from './components/checkbox'
 import { EOI } from './components/eoi'
-import { File } from './components/file'
 import { Header } from './components/header'
 import { wrapNextImage, wrapNextLink } from './next'
 import {

From 757fa9e3798724adee5989c718c3797bdf500d7c Mon Sep 17 00:00:00 2001
From: Oleksii Surnin <bromkrololo@gmail.com>
Date: Mon, 30 Oct 2023 03:26:30 +0100
Subject: [PATCH 3/5] Split Asset and AssetWrapper

---
 .../src/block-components/aframe.tsx           | 177 +++++++++++++++++
 .../src/block-components/asset-wrapper.tsx    |  24 +++
 .../src/block-components/image.tsx            | 182 ++++++++++++++++++
 .../src/block-components/pdf.tsx              | 127 ++++++++++++
 .../src/block-components/tweet.tsx            | 134 +++++++++++++
 .../src/block-components/video.tsx            | 166 ++++++++++++++++
 packages/react-notion-x/src/block.tsx         |  44 ++++-
 packages/react-notion-x/src/context.tsx       |  18 +-
 packages/react-notion-x/src/types.ts          |   6 +-
 9 files changed, 862 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-notion-x/src/block-components/aframe.tsx
 create mode 100644 packages/react-notion-x/src/block-components/asset-wrapper.tsx
 create mode 100644 packages/react-notion-x/src/block-components/image.tsx
 create mode 100644 packages/react-notion-x/src/block-components/pdf.tsx
 create mode 100644 packages/react-notion-x/src/block-components/tweet.tsx
 create mode 100644 packages/react-notion-x/src/block-components/video.tsx

diff --git a/packages/react-notion-x/src/block-components/aframe.tsx b/packages/react-notion-x/src/block-components/aframe.tsx
new file mode 100644
index 00000000..c6691a74
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/aframe.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react'
+
+import { BaseContentBlock } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+
+export const AFrame: React.FC<{
+  block: BaseContentBlock
+}> = ({ block }) => {
+  const { recordMap } = useNotionContext()
+
+  if (!block) {
+    return null
+  }
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'column'
+  }
+
+  const assetStyle: React.CSSProperties = {}
+  // console.log('asset', block)
+
+  if (block.format) {
+    const {
+      block_aspect_ratio,
+      block_height,
+      block_width,
+      block_full_width,
+      block_page_width,
+      block_preserve_scale
+    } = block.format
+
+    if (block_full_width || block_page_width) {
+      if (block_full_width) {
+        style.width = '100vw'
+      } else {
+        style.width = '100%'
+      }
+
+      if (block.type === 'video') {
+        if (block_height) {
+          style.height = block_height
+        } else if (block_aspect_ratio) {
+          style.paddingBottom = `${block_aspect_ratio * 100}%`
+        } else if (block_preserve_scale) {
+          style.objectFit = 'contain'
+        }
+      } else if (block_aspect_ratio && block.type !== 'image') {
+        style.paddingBottom = `${block_aspect_ratio * 100}%`
+      } else if (block_height) {
+        style.height = block_height
+      } else if (block_preserve_scale) {
+        if (block.type === 'image') {
+          style.height = '100%'
+        } else {
+          // TODO: this is just a guess
+          style.paddingBottom = '75%'
+          style.minHeight = 100
+        }
+      }
+    } 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
+      }
+
+      if (block_preserve_scale && block.type !== 'image') {
+        style.paddingBottom = '50%'
+        style.minHeight = 100
+      } else {
+        if (block_height && block.type !== 'image') {
+          style.height = block_height
+        }
+      }
+    }
+
+    if (block.type === 'image') {
+      assetStyle.objectFit = 'cover'
+    } else if (block_preserve_scale) {
+      assetStyle.objectFit = 'contain'
+    }
+  }
+
+  const source =
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
+  let content = null
+
+  if (!source) {
+    return null
+  }
+
+  let src = block.format?.display_source || source
+
+  if (src) {
+    if (block.type === 'gist') {
+      if (!src.endsWith('.pibb')) {
+        src = `${src}.pibb`
+      }
+
+      assetStyle.width = '100%'
+      style.paddingBottom = '50%'
+
+      // TODO: GitHub gists do not resize their height properly
+      content = (
+        <iframe
+          style={assetStyle}
+          className='notion-asset-object-fit'
+          src={src}
+          title='GitHub Gist'
+          frameBorder='0'
+          // TODO: is this sandbox necessary?
+          // sandbox='allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin'
+          // this is important for perf but react's TS definitions don't seem to like it
+          loading='lazy'
+          scrolling='auto'
+        />
+      )
+    } else {
+      src += block.type === 'typeform' ? '&disable-auto-focus=true' : ''
+
+      content = (
+        <iframe
+          className='notion-asset-object-fit'
+          style={assetStyle}
+          src={src}
+          title={`iframe ${block.type}`}
+          frameBorder='0'
+          // TODO: is this sandbox necessary?
+          // sandbox='allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin'
+          allowFullScreen
+          // this is important for perf but react's TS definitions don't seem to like it
+          loading='lazy'
+          scrolling='auto'
+        />
+      )
+    }
+  }
+
+  const children = (
+    <>
+      {block?.properties?.caption && (
+        <figcaption className='notion-asset-caption'>
+          <Text value={block.properties.caption} block={block} />
+        </figcaption>
+      )}
+    </>
+  )
+
+  return (
+    <>
+      <div style={style}>{content}</div>
+
+      {children}
+    </>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/asset-wrapper.tsx b/packages/react-notion-x/src/block-components/asset-wrapper.tsx
new file mode 100644
index 00000000..ff746f5c
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/asset-wrapper.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { Block } from 'notion-types'
+
+import { cs } from '../utils'
+
+export const AssetWrapper: React.FC<{
+  blockId: string
+  block: Block
+  children: any
+}> = ({ blockId, block, children }) => {
+  return (
+    <figure
+      className={cs(
+        'notion-asset-wrapper',
+        `notion-asset-wrapper-${block.type}`,
+        block.format?.block_full_width && 'notion-asset-wrapper-full',
+        blockId
+      )}
+    >
+      {children}
+    </figure>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/image.tsx b/packages/react-notion-x/src/block-components/image.tsx
new file mode 100644
index 00000000..f2260bb4
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/image.tsx
@@ -0,0 +1,182 @@
+import * as React from 'react'
+
+import { BaseContentBlock, Block } from 'notion-types'
+import { getTextContent, parsePageId } from 'notion-utils'
+
+import { LazyImage } from '../components/lazy-image'
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+
+const urlStyle = { width: '100%' }
+
+export const Image: React.FC<{
+  block: BaseContentBlock
+  zoomable?: boolean
+}> = ({ block, zoomable = true }) => {
+  const { recordMap, mapImageUrl, rootDomain, components, mapPageUrl } =
+    useNotionContext()
+
+  if (!block) {
+    return null
+  }
+
+  let isURL = false
+  const _caption: string = block?.properties?.caption?.[0]?.[0]
+
+  if (_caption) {
+    const id = parsePageId(_caption, { uuid: true })
+
+    const isPage = _caption.charAt(0) === '/' && id
+    if (isPage || isValidURL(_caption)) {
+      isURL = true
+    }
+  }
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'column'
+  }
+
+  const assetStyle: React.CSSProperties = {}
+
+  if (block.format) {
+    const {
+      block_height,
+      block_width,
+      block_full_width,
+      block_page_width,
+      block_preserve_scale
+    } = block.format
+
+    if (block_full_width || block_page_width) {
+      if (block_full_width) {
+        style.width = '100vw'
+      } else {
+        style.width = '100%'
+      }
+
+      if (block_height) {
+        style.height = block_height
+      } else if (block_preserve_scale) {
+        style.height = '100%'
+      }
+    } 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
+      }
+    }
+
+    assetStyle.objectFit = 'cover'
+  }
+
+  let source =
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
+  let content = null
+
+  if (!source) {
+    return null
+  }
+
+  // console.log('image', block)
+  // kind of a hack for now. New file.notion.so images aren't signed correctly
+  if (source.includes('file.notion.so')) {
+    source = block.properties?.source?.[0]?.[0]
+  }
+  const src = mapImageUrl(source, block as Block)
+  const caption = getTextContent(block.properties?.caption)
+  const alt = caption || 'notion image'
+
+  content = (
+    <LazyImage
+      src={src}
+      alt={alt}
+      zoomable={zoomable && !isURL}
+      height={style.height as number}
+      style={assetStyle}
+    />
+  )
+
+  let children = (
+    <>
+      {block?.properties?.caption && (
+        <figcaption className='notion-asset-caption'>
+          <Text value={block.properties.caption} block={block} />
+        </figcaption>
+      )}
+    </>
+  )
+
+  if (isURL) {
+    const caption: string = block?.properties?.caption[0][0]
+    const id = parsePageId(caption, { uuid: true })
+    const isPage = caption.charAt(0) === '/' && id
+    const captionHostname = extractHostname(caption)
+
+    children = (
+      <components.PageLink
+        style={urlStyle}
+        href={isPage ? mapPageUrl(id) : caption}
+        target={
+          captionHostname &&
+          captionHostname !== rootDomain &&
+          !caption.startsWith('/')
+            ? 'blank_'
+            : null
+        }
+      >
+        {children}
+      </components.PageLink>
+    )
+  }
+  const figure = (
+    <div style={style}>
+      {content}
+      {children}
+    </div>
+  )
+
+  return figure
+}
+
+function isValidURL(str: string) {
+  // TODO: replace this with a more well-tested package
+  const pattern = new RegExp(
+    '^(https?:\\/\\/)?' + // protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$',
+    'i'
+  )
+  return !!pattern.test(str)
+}
+
+function extractHostname(url: string) {
+  try {
+    const hostname = new URL(url).hostname
+    return hostname
+  } catch (err) {
+    return ''
+  }
+}
diff --git a/packages/react-notion-x/src/block-components/pdf.tsx b/packages/react-notion-x/src/block-components/pdf.tsx
new file mode 100644
index 00000000..51d6faae
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/pdf.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+
+import { BaseContentBlock } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+
+const isServer = typeof window === 'undefined'
+
+export const PDF: React.FC<{
+  block: BaseContentBlock
+}> = ({ block }) => {
+  const { recordMap, components } = useNotionContext()
+
+  if (!block) {
+    return null
+  }
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'column'
+  }
+
+  const assetStyle: React.CSSProperties = {}
+  // console.log('asset', block)
+
+  if (block.format) {
+    const {
+      block_aspect_ratio,
+      block_height,
+      block_width,
+      block_full_width,
+      block_page_width,
+      block_preserve_scale
+    } = block.format
+
+    if (block_full_width || block_page_width) {
+      if (block_full_width) {
+        style.width = '100vw'
+      } else {
+        style.width = '100%'
+      }
+
+      if (block_aspect_ratio) {
+        style.paddingBottom = `${block_aspect_ratio * 100}%`
+      } else if (block_height) {
+        style.height = block_height
+      } else if (block_preserve_scale) {
+        // TODO: this is just a guess
+        style.paddingBottom = '75%'
+        style.minHeight = 100
+      }
+    } 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
+      }
+
+      if (block_preserve_scale) {
+        style.paddingBottom = '50%'
+        style.minHeight = 100
+      } else {
+        style.height = block_height
+      }
+    }
+
+    assetStyle.objectFit = 'contain'
+  }
+
+  const source =
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
+  let content = null
+
+  if (!source) {
+    return null
+  }
+
+  style.overflow = 'auto'
+  style.background = 'rgb(226, 226, 226)'
+  style.display = 'block'
+
+  if (!style.padding) {
+    style.padding = '8px 16px'
+  }
+
+  if (!isServer) {
+    // console.log('pdf', block, signedUrl)
+    content = <components.Pdf file={source} />
+  }
+
+  const children = (
+    <>
+      {block?.properties?.caption && (
+        <figcaption className='notion-asset-caption'>
+          <Text value={block.properties.caption} block={block} />
+        </figcaption>
+      )}
+    </>
+  )
+
+  return (
+    <>
+      <div style={style}>{content}</div>
+
+      {children}
+    </>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/tweet.tsx b/packages/react-notion-x/src/block-components/tweet.tsx
new file mode 100644
index 00000000..9b5c5928
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/tweet.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react'
+
+import { BaseContentBlock } from 'notion-types'
+
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+
+export const Tweet: React.FC<{
+  block: BaseContentBlock
+}> = ({ block }) => {
+  const { recordMap, components } = useNotionContext()
+
+  if (!block) {
+    return null
+  }
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'column'
+  }
+
+  const assetStyle: React.CSSProperties = {}
+  // console.log('asset', block)
+
+  if (block.format) {
+    const {
+      block_aspect_ratio,
+      block_height,
+      block_width,
+      block_full_width,
+      block_page_width,
+      block_preserve_scale
+    } = block.format
+
+    if (block_full_width || block_page_width) {
+      if (block_full_width) {
+        style.width = '100vw'
+      } else {
+        style.width = '100%'
+      }
+
+      if (block_aspect_ratio) {
+        style.paddingBottom = `${block_aspect_ratio * 100}%`
+      } else if (block_height) {
+        style.height = block_height
+      } else if (block_preserve_scale) {
+        // TODO: this is just a guess
+        style.paddingBottom = '75%'
+        style.minHeight = 100
+      }
+    } 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
+      }
+
+      if (block_preserve_scale) {
+        style.paddingBottom = '50%'
+        style.minHeight = 100
+      } else {
+        if (block_height) {
+          style.height = block_height
+        }
+      }
+    }
+
+    assetStyle.objectFit = 'contain'
+  }
+
+  const source =
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
+  let content = null
+
+  if (!source) {
+    return null
+  }
+
+  const src = source
+  if (!src) return null
+
+  const id = src.split('?')[0].split('/').pop()
+  if (!id) return null
+
+  content = (
+    <div
+      style={{
+        ...assetStyle,
+        maxWidth: 420,
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto'
+      }}
+    >
+      <components.Tweet id={id} />
+    </div>
+  )
+
+  const children = (
+    <>
+      {block?.properties?.caption && (
+        <figcaption className='notion-asset-caption'>
+          <Text value={block.properties.caption} block={block} />
+        </figcaption>
+      )}
+    </>
+  )
+
+  return (
+    <>
+      <div style={style}>{content}</div>
+
+      {children}
+    </>
+  )
+}
diff --git a/packages/react-notion-x/src/block-components/video.tsx b/packages/react-notion-x/src/block-components/video.tsx
new file mode 100644
index 00000000..52a698a5
--- /dev/null
+++ b/packages/react-notion-x/src/block-components/video.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react'
+
+import { BaseContentBlock } from 'notion-types'
+
+import { LiteYouTubeEmbed } from '../components/lite-youtube-embed'
+import { Text } from '../components/text'
+import { useNotionContext } from '../context'
+import { getYoutubeId } from '../utils'
+
+export const Video: React.FC<{
+  block: BaseContentBlock
+}> = ({ block }) => {
+  const { recordMap } = useNotionContext()
+
+  if (!block) {
+    return null
+  }
+
+  const style: React.CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'column'
+  }
+
+  const assetStyle: React.CSSProperties = {}
+
+  if (block.format) {
+    const {
+      block_aspect_ratio,
+      block_height,
+      block_width,
+      block_full_width,
+      block_page_width,
+      block_preserve_scale
+    } = block.format
+
+    if (block_full_width || block_page_width) {
+      if (block_full_width) {
+        style.width = '100vw'
+      } else {
+        style.width = '100%'
+      }
+
+      if (block_height) {
+        style.height = block_height
+      } else if (block_aspect_ratio) {
+        style.paddingBottom = `${block_aspect_ratio * 100}%`
+      } else if (block_preserve_scale) {
+        style.objectFit = 'contain'
+      }
+    } 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
+      }
+
+      style.height = block_height
+    }
+
+    assetStyle.objectFit = 'contain'
+  }
+
+  const source =
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
+  let content = null
+
+  if (!source) {
+    return null
+  }
+
+  if (
+    source &&
+    source.indexOf('youtube') < 0 &&
+    source.indexOf('youtu.be') < 0 &&
+    source.indexOf('vimeo') < 0 &&
+    source.indexOf('wistia') < 0 &&
+    source.indexOf('loom') < 0 &&
+    source.indexOf('videoask') < 0 &&
+    source.indexOf('getcloudapp') < 0
+  ) {
+    style.paddingBottom = undefined
+
+    content = (
+      <video
+        playsInline
+        controls
+        preload='metadata'
+        style={assetStyle}
+        src={source}
+        title={block.type}
+      />
+    )
+  } else {
+    const src = block.format?.display_source || source
+    const youtubeVideoId: string | null = getYoutubeId(src)
+
+    if (src && youtubeVideoId) {
+      content = (
+        <LiteYouTubeEmbed
+          id={youtubeVideoId}
+          style={assetStyle}
+          className='notion-asset-object-fit'
+        />
+      )
+    } else {
+      // Loom handle
+      let src = block.format?.display_source || source
+
+      if (src) {
+        src += block.type === 'typeform' ? '&disable-auto-focus=true' : ''
+
+        content = (
+          <iframe
+            className='notion-asset-object-fit'
+            style={assetStyle}
+            src={src}
+            title={`iframe ${block.type}`}
+            frameBorder='0'
+            // TODO: is this sandbox necessary?
+            // sandbox='allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin'
+            allowFullScreen
+            // this is important for perf but react's TS definitions don't seem to like it
+            loading='lazy'
+            scrolling='auto'
+          />
+        )
+      }
+    }
+  }
+
+  const children = (
+    <>
+      {block?.properties?.caption && (
+        <figcaption className='notion-asset-caption'>
+          <Text value={block.properties.caption} block={block} />
+        </figcaption>
+      )}
+    </>
+  )
+
+  return (
+    <>
+      <div style={style}>{content}</div>
+
+      {children}
+    </>
+  )
+}
diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index 35f4846d..57e4dffd 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -3,7 +3,6 @@ import * as React from 'react'
 import * as types from 'notion-types'
 import { uuidToId } from 'notion-utils'
 
-import { AssetWrapper } from './components/asset-wrapper'
 import { SyncPointerBlock } from './components/sync-pointer-block'
 import { useNotionContext } from './context'
 import { cs } from './utils'
@@ -90,15 +89,11 @@ export const Block: React.FC<BlockProps> = (props) => {
     }
 
     case 'embed':
-      return <components.Embed blockId={blockId} block={block} />
-    case 'replit':
     // fallthrough
-    case 'tweet':
+    case 'replit':
     // fallthrough
     case 'maps':
     // fallthrough
-    case 'pdf':
-    // fallthrough
     case 'figma':
     // fallthrough
     case 'typeform':
@@ -107,17 +102,46 @@ export const Block: React.FC<BlockProps> = (props) => {
     // fallthrough
     case 'excalidraw':
     // fallthrough
-    case 'image':
-    // fallthrough
     case 'gist':
-    // fallthrough
+      // fallthrough
+      return (
+        <components.AssetWrapper blockId={blockId} block={block}>
+          <components.AFrame block={block} />
+        </components.AssetWrapper>
+      )
+
+    case 'pdf':
+      return (
+        <components.AssetWrapper blockId={blockId} block={block}>
+          <components.PDF block={block} />
+        </components.AssetWrapper>
+      )
+
     case 'video':
-      return <AssetWrapper blockId={blockId} block={block} />
+      return (
+        <components.AssetWrapper blockId={blockId} block={block}>
+          <components.Video block={block} />
+        </components.AssetWrapper>
+      )
+
+    case 'image': // for test
+      return (
+        <components.AssetWrapper blockId={blockId} block={block}>
+          <components.Image block={block} />
+        </components.AssetWrapper>
+      )
 
     case 'drive': {
       return <components.Drive blockId={blockId} block={block} />
     }
 
+    case 'tweet':
+      return (
+        <components.AssetWrapper blockId={blockId} block={block}>
+          <components.Tweet block={block} />
+        </components.AssetWrapper>
+      )
+
     case 'audio':
       return (
         <components.Audio
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index 39020d91..4d913b82 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -2,7 +2,9 @@ import * as React from 'react'
 
 import { ExtendedRecordMap } from 'notion-types'
 
+import { AFrame } from './block-components/aframe'
 import { Alias } from './block-components/alias'
+import { AssetWrapper } from './block-components/asset-wrapper'
 import { Audio } from './block-components/audio'
 import { Bookmark } from './block-components/bookmark'
 import { Callout } from './block-components/callout'
@@ -12,8 +14,10 @@ import { Divider } from './block-components/divider'
 import { Drive } from './block-components/drive'
 import { File } from './block-components/file'
 import { TextHeader } from './block-components/header'
+import { Image } from './block-components/image'
 import { List } from './block-components/list'
 import { Page } from './block-components/page'
+import { PDF } from './block-components/pdf'
 import { Quote } from './block-components/quote'
 import { Table } from './block-components/table'
 import { TableOfContents } from './block-components/table-of-contents'
@@ -21,7 +25,8 @@ import { TableRow } from './block-components/table-row'
 import { TextBlock } from './block-components/text'
 import { ToDo } from './block-components/to-do'
 import { Toggle } from './block-components/toggle'
-import { AssetWrapper } from './components/asset-wrapper'
+import { Tweet } from './block-components/tweet'
+import { Video } from './block-components/video'
 import { Checkbox as DefaultCheckbox } from './components/checkbox'
 import { EOI } from './components/eoi'
 import { Header } from './components/header'
@@ -102,7 +107,6 @@ const DefaultLinkMemo = React.memo(DefaultLink)
 const DefaultPageLink: React.FC = (props) => <a {...props} />
 const DefaultPageLinkMemo = React.memo(DefaultPageLink)
 
-const DefaultEmbed = (props) => <AssetWrapper {...props} />
 const DefaultHeader = Header
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -124,7 +128,6 @@ const dummyOverrideFn = (_: any, defaultValueFn: () => React.ReactNode) =>
   defaultValueFn()
 
 const defaultComponents: NotionComponents = {
-  Image: null, // disable custom images by default
   Link: DefaultLinkMemo,
   PageLink: DefaultPageLinkMemo,
   Checkbox: DefaultCheckbox,
@@ -155,7 +158,6 @@ const defaultComponents: NotionComponents = {
   Tweet: dummyComponent('Tweet'),
   Modal: dummyComponent('Modal'),
 
-  Embed: DefaultEmbed,
   Header: DefaultHeader,
   TextHeader,
   Divider,
@@ -176,7 +178,13 @@ const defaultComponents: NotionComponents = {
   Page,
   EOI,
   Audio,
-  File
+  File,
+  Image,
+  Video,
+  PDF,
+  TweetAsset: Tweet,
+  AFrame,
+  AssetWrapper
 }
 
 const defaultNotionContext: NotionContext = {
diff --git a/packages/react-notion-x/src/types.ts b/packages/react-notion-x/src/types.ts
index 463d3951..0c6baf6d 100644
--- a/packages/react-notion-x/src/types.ts
+++ b/packages/react-notion-x/src/types.ts
@@ -46,6 +46,11 @@ export interface NotionComponents {
   EOI?: any
   Audio?: any
   File?: any
+  Video?: any
+  PDF?: any
+  TweetAsset?: any
+  AFrame?: any
+  AssetWrapper?: any
 
   // collection
   Collection: any
@@ -71,7 +76,6 @@ export interface NotionComponents {
   Pdf: any
   Tweet: any
   Modal: any
-  Embed: any
 
   // page navigation
   Header: any

From 081d071917db9eda600704c35bcdc21d143e3919 Mon Sep 17 00:00:00 2001
From: Oleksii Surnin <bromkrololo@gmail.com>
Date: Mon, 30 Oct 2023 03:31:52 +0100
Subject: [PATCH 4/5] Fix errors

---
 packages/react-notion-x/src/block-components/aframe.tsx | 2 +-
 packages/react-notion-x/src/block-components/image.tsx  | 2 +-
 packages/react-notion-x/src/block-components/pdf.tsx    | 2 +-
 packages/react-notion-x/src/block-components/tweet.tsx  | 2 +-
 packages/react-notion-x/src/block-components/video.tsx  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-notion-x/src/block-components/aframe.tsx b/packages/react-notion-x/src/block-components/aframe.tsx
index c6691a74..e676abab 100644
--- a/packages/react-notion-x/src/block-components/aframe.tsx
+++ b/packages/react-notion-x/src/block-components/aframe.tsx
@@ -161,7 +161,7 @@ export const AFrame: React.FC<{
     <>
       {block?.properties?.caption && (
         <figcaption className='notion-asset-caption'>
-          <Text value={block.properties.caption} block={block} />
+          <Text value={block.properties.caption} block={block as any} />
         </figcaption>
       )}
     </>
diff --git a/packages/react-notion-x/src/block-components/image.tsx b/packages/react-notion-x/src/block-components/image.tsx
index f2260bb4..c5d678af 100644
--- a/packages/react-notion-x/src/block-components/image.tsx
+++ b/packages/react-notion-x/src/block-components/image.tsx
@@ -120,7 +120,7 @@ export const Image: React.FC<{
     <>
       {block?.properties?.caption && (
         <figcaption className='notion-asset-caption'>
-          <Text value={block.properties.caption} block={block} />
+          <Text value={block.properties.caption} block={block as any} />
         </figcaption>
       )}
     </>
diff --git a/packages/react-notion-x/src/block-components/pdf.tsx b/packages/react-notion-x/src/block-components/pdf.tsx
index 51d6faae..5510c63c 100644
--- a/packages/react-notion-x/src/block-components/pdf.tsx
+++ b/packages/react-notion-x/src/block-components/pdf.tsx
@@ -111,7 +111,7 @@ export const PDF: React.FC<{
     <>
       {block?.properties?.caption && (
         <figcaption className='notion-asset-caption'>
-          <Text value={block.properties.caption} block={block} />
+          <Text value={block.properties.caption} block={block as any} />
         </figcaption>
       )}
     </>
diff --git a/packages/react-notion-x/src/block-components/tweet.tsx b/packages/react-notion-x/src/block-components/tweet.tsx
index 9b5c5928..11a2702a 100644
--- a/packages/react-notion-x/src/block-components/tweet.tsx
+++ b/packages/react-notion-x/src/block-components/tweet.tsx
@@ -118,7 +118,7 @@ export const Tweet: React.FC<{
     <>
       {block?.properties?.caption && (
         <figcaption className='notion-asset-caption'>
-          <Text value={block.properties.caption} block={block} />
+          <Text value={block.properties.caption} block={block as any} />
         </figcaption>
       )}
     </>
diff --git a/packages/react-notion-x/src/block-components/video.tsx b/packages/react-notion-x/src/block-components/video.tsx
index 52a698a5..e16359a7 100644
--- a/packages/react-notion-x/src/block-components/video.tsx
+++ b/packages/react-notion-x/src/block-components/video.tsx
@@ -150,7 +150,7 @@ export const Video: React.FC<{
     <>
       {block?.properties?.caption && (
         <figcaption className='notion-asset-caption'>
-          <Text value={block.properties.caption} block={block} />
+          <Text value={block.properties.caption} block={block as any} />
         </figcaption>
       )}
     </>

From cd82b4b10c78fb31020f91b956b1f85f46d1912b Mon Sep 17 00:00:00 2001
From: Oleksii Surnin <bromkrololo@gmail.com>
Date: Wed, 1 Nov 2023 04:48:10 +0100
Subject: [PATCH 5/5] Added youtube component to export

---
 examples/minimal/pages/_app.tsx                       | 2 +-
 packages/react-notion-x/src/block-components/file.tsx | 2 +-
 packages/react-notion-x/src/index.tsx                 | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/minimal/pages/_app.tsx b/examples/minimal/pages/_app.tsx
index eac6a0d7..ae03b4ae 100644
--- a/examples/minimal/pages/_app.tsx
+++ b/examples/minimal/pages/_app.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 // core styles shared by all of react-notion-x (required)
-import 'react-notion-x/src/styles.css'
+import 'areyes-react-notion-x/src/styles.css'
 
 import '../styles/globals.css'
 
diff --git a/packages/react-notion-x/src/block-components/file.tsx b/packages/react-notion-x/src/block-components/file.tsx
index 30367fe6..13c2b63a 100644
--- a/packages/react-notion-x/src/block-components/file.tsx
+++ b/packages/react-notion-x/src/block-components/file.tsx
@@ -13,7 +13,7 @@ export const File: React.FC<{
 }> = ({ block, className }) => {
   const { components, recordMap } = useNotionContext()
   const source =
-    recordMap.signed_urls[block.id] || block.properties?.source?.[0]?.[0]
+    recordMap.signed_urls?.[block.id] || block.properties?.source?.[0]?.[0]
 
   return (
     <div className={cs('notion-file', className)}>
diff --git a/packages/react-notion-x/src/index.tsx b/packages/react-notion-x/src/index.tsx
index 44c6541e..b1b2ac4a 100644
--- a/packages/react-notion-x/src/index.tsx
+++ b/packages/react-notion-x/src/index.tsx
@@ -6,3 +6,4 @@ export * from './context'
 export * from './components/text'
 export * from './components/header'
 export * from './components/page-icon'
+export * from './components/lite-youtube-embed'