From 21647272221e4ee9e93be414e8bc1dc913cb870e Mon Sep 17 00:00:00 2001
From: Amemome <meltksq5140@gmail.com>
Date: Thu, 20 Mar 2025 19:58:06 +0900
Subject: [PATCH 1/4] fix: update page icon styles to match Notion's default
behavior
---
packages/react-notion-x/src/styles.css | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 19f7dccae..7502a0aec 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -623,7 +623,6 @@
.notion-page-icon-hero {
position: absolute;
top: 0;
- left: 50%;
display: flex;
flex-direction: row;
justify-content: center;
@@ -632,7 +631,7 @@
.notion-page-icon-hero.notion-page-icon-image {
width: 124px;
height: 124px;
- margin-left: -62px;
+ margin-left: 11px;
}
.notion-page-icon-hero.notion-page-icon-span {
From e08738d79096a6170395cc9aa75c0019eef18313 Mon Sep 17 00:00:00 2001
From: Amemome <meltksq5140@gmail.com>
Date: Thu, 20 Mar 2025 21:46:02 +0900
Subject: [PATCH 2/4] feat: add alignCenter prop to PageIcon component for
flexible icon alignment
---
.../src/components/page-icon.tsx | 7 +++++--
packages/react-notion-x/src/styles.css | 21 ++++++++++++++++++-
2 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/packages/react-notion-x/src/components/page-icon.tsx b/packages/react-notion-x/src/components/page-icon.tsx
index a0a1a0d6b..a9e33c0ec 100644
--- a/packages/react-notion-x/src/components/page-icon.tsx
+++ b/packages/react-notion-x/src/components/page-icon.tsx
@@ -21,13 +21,15 @@ export function PageIconImpl({
className,
inline = true,
hideDefaultIcon = false,
- defaultIcon
+ defaultIcon,
+ alignCenter = false
}: {
block: Block
className?: string
inline?: boolean
hideDefaultIcon?: boolean
defaultIcon?: string | null
+ alignCenter?: boolean
}) {
const { mapImageUrl, recordMap, darkMode } = useNotionContext()
let isImage = false
@@ -94,7 +96,8 @@ export function PageIconImpl({
<div
className={cs(
inline ? 'notion-page-icon-inline' : 'notion-page-icon-hero',
- isImage ? 'notion-page-icon-image' : 'notion-page-icon-span'
+ isImage ? 'notion-page-icon-image' : 'notion-page-icon-span',
+ alignCenter ? 'align-center' : 'align-left'
)}
>
{content}
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 7502a0aec..4f66e13bf 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -631,7 +631,16 @@
.notion-page-icon-hero.notion-page-icon-image {
width: 124px;
height: 124px;
- margin-left: 11px;
+}
+
+.notion-page-icon-hero.notion-page-icon-image.align-left {
+ left: 0%;
+ margin-left: 26px;
+}
+
+.notion-page-icon-hero.notion-page-icon-image.align-center {
+ left: 50%;
+ margin-left: -62px;
}
.notion-page-icon-hero.notion-page-icon-span {
@@ -640,6 +649,16 @@
margin-left: -39px;
}
+.notion-page-icon-hero.notion-page-icon-span.align-left {
+ left: 0%;
+ margin-left: 16px;
+}
+
+.notion-page-icon-hero.notion-page-icon-span.align-center {
+ left: 50%;
+ margin-left: -39px;
+}
+
.notion-page-icon-hero .notion-page-icon {
position: relative;
display: block;
From fafe3d41b67e9cb6a841036202c1f5c28c3430fa Mon Sep 17 00:00:00 2001
From: Amemome <meltksq5140@gmail.com>
Date: Thu, 20 Mar 2025 22:09:20 +0900
Subject: [PATCH 3/4] feat: add alignCenter option to NotionRenderer and
NotionContext
---
packages/react-notion-x/src/components/page-icon.tsx | 6 ++----
packages/react-notion-x/src/context.tsx | 3 +++
packages/react-notion-x/src/renderer.tsx | 3 +++
3 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/packages/react-notion-x/src/components/page-icon.tsx b/packages/react-notion-x/src/components/page-icon.tsx
index a9e33c0ec..4de3a33f5 100644
--- a/packages/react-notion-x/src/components/page-icon.tsx
+++ b/packages/react-notion-x/src/components/page-icon.tsx
@@ -21,17 +21,15 @@ export function PageIconImpl({
className,
inline = true,
hideDefaultIcon = false,
- defaultIcon,
- alignCenter = false
+ defaultIcon
}: {
block: Block
className?: string
inline?: boolean
hideDefaultIcon?: boolean
defaultIcon?: string | null
- alignCenter?: boolean
}) {
- const { mapImageUrl, recordMap, darkMode } = useNotionContext()
+ const { alignCenter, mapImageUrl, recordMap, darkMode } = useNotionContext()
let isImage = false
let content: any = null
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index 4bb8a5418..f770c076a 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -35,6 +35,7 @@ export interface NotionContext {
minTableOfContentsItems: number
linkTableTitleProperties: boolean
isLinkCollectionToUrlProperty: boolean
+ alignCenter: boolean
defaultPageIcon?: string | null
defaultPageCover?: string | null
@@ -63,6 +64,7 @@ export interface PartialNotionContext {
showCollectionViewDropdown?: boolean
linkTableTitleProperties?: boolean
isLinkCollectionToUrlProperty?: boolean
+ alignCenter?: boolean
showTableOfContents?: boolean
minTableOfContentsItems?: number
@@ -169,6 +171,7 @@ const defaultNotionContext: NotionContext = {
showCollectionViewDropdown: true,
linkTableTitleProperties: true,
isLinkCollectionToUrlProperty: false,
+ alignCenter: true,
showTableOfContents: false,
minTableOfContentsItems: 3,
diff --git a/packages/react-notion-x/src/renderer.tsx b/packages/react-notion-x/src/renderer.tsx
index 474370814..f0f69941a 100644
--- a/packages/react-notion-x/src/renderer.tsx
+++ b/packages/react-notion-x/src/renderer.tsx
@@ -34,6 +34,7 @@ export function NotionRenderer({
defaultPageIcon,
defaultPageCover,
defaultPageCoverPosition,
+ alignCenter,
...rest
}: {
recordMap: ExtendedRecordMap
@@ -59,6 +60,7 @@ export function NotionRenderer({
linkTableTitleProperties?: boolean
isLinkCollectionToUrlProperty?: boolean
isImageZoomable?: boolean
+ alignCenter?: boolean
showTableOfContents?: boolean
minTableOfContentsItems?: number
@@ -117,6 +119,7 @@ export function NotionRenderer({
defaultPageCover={defaultPageCover}
defaultPageCoverPosition={defaultPageCoverPosition}
zoom={isImageZoomable ? zoom : null}
+ alignCenter={alignCenter}
>
<NotionBlockRenderer {...rest} />
</NotionContextProvider>
From 20769e9ee78c533b5dcfa628143ad90e7525ecc6 Mon Sep 17 00:00:00 2001
From: Amemome <meltksq5140@gmail.com>
Date: Thu, 20 Mar 2025 22:35:47 +0900
Subject: [PATCH 4/4] fix: clarify CSS class names for page icon alignment
---
packages/react-notion-x/src/components/page-icon.tsx | 4 +++-
packages/react-notion-x/src/styles.css | 9 ++++-----
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/packages/react-notion-x/src/components/page-icon.tsx b/packages/react-notion-x/src/components/page-icon.tsx
index 4de3a33f5..edc6c626d 100644
--- a/packages/react-notion-x/src/components/page-icon.tsx
+++ b/packages/react-notion-x/src/components/page-icon.tsx
@@ -95,7 +95,9 @@ export function PageIconImpl({
className={cs(
inline ? 'notion-page-icon-inline' : 'notion-page-icon-hero',
isImage ? 'notion-page-icon-image' : 'notion-page-icon-span',
- alignCenter ? 'align-center' : 'align-left'
+ alignCenter
+ ? 'notion-page-icon--align-center'
+ : 'notion-page-icon--align-left'
)}
>
{content}
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 4f66e13bf..3c954a362 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -633,12 +633,12 @@
height: 124px;
}
-.notion-page-icon-hero.notion-page-icon-image.align-left {
+.notion-page-icon-hero.notion-page-icon-image.notion-page-icon--align-left {
left: 0%;
margin-left: 26px;
}
-.notion-page-icon-hero.notion-page-icon-image.align-center {
+.notion-page-icon-hero.notion-page-icon-image.notion-page-icon--align-center {
left: 50%;
margin-left: -62px;
}
@@ -646,15 +646,14 @@
.notion-page-icon-hero.notion-page-icon-span {
height: 78px;
width: 78px;
- margin-left: -39px;
}
-.notion-page-icon-hero.notion-page-icon-span.align-left {
+.notion-page-icon-hero.notion-page-icon-span.notion-page-icon--align-left {
left: 0%;
margin-left: 16px;
}
-.notion-page-icon-hero.notion-page-icon-span.align-center {
+.notion-page-icon-hero.notion-page-icon-span.notion-page-icon--align-center {
left: 50%;
margin-left: -39px;
}