From 21647272221e4ee9e93be414e8bc1dc913cb870e Mon Sep 17 00:00:00 2001 From: Amemome 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 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({
{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 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} > From 20769e9ee78c533b5dcfa628143ad90e7525ecc6 Mon Sep 17 00:00:00 2001 From: Amemome 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; }