diff --git a/examples/nextjs/src/app/[slug]/page.tsx b/examples/nextjs/src/app/[slug]/page.tsx
index ffa9a45..a70c993 100644
--- a/examples/nextjs/src/app/[slug]/page.tsx
+++ b/examples/nextjs/src/app/[slug]/page.tsx
@@ -38,13 +38,11 @@ export default async function SlugPage({ params }: { params: { slug: string } })
}
},
// Example customization: Render links in a different style
+ // Note that instead of an underline a border bottom is used because a link can contain more than just text (e.g. an icon).
htmlComponents: {
a: (props: React.ComponentPropsWithoutRef<"a">) => {
return (
-
+
{props.children}
)
diff --git a/packages/render/src/components/page-title.tsx b/packages/render/src/components/page-title.tsx
index ed3f180..448d7a1 100644
--- a/packages/render/src/components/page-title.tsx
+++ b/packages/render/src/components/page-title.tsx
@@ -9,10 +9,8 @@ export const PageTitle = ({ icon, children }: { icon: IconResponse; children: Re
{/* note: plus ref .notion-page-icon-inline for margins */}
{/* ref: .notion-page-title-text */}
- {/* note: Consider how to use the border-buttom here in combination with a link. See also `.notion-link .notion-page-title-text` */}
-
- {children}
-
+ {/* note: In case of links no border is applied, but otherwise it is. See ref above and `.notion-link .notion-page-title-text` */}
+ {children}
)
}
diff --git a/packages/render/src/components/text.tsx b/packages/render/src/components/text.tsx
index 4fd56d2..e9e78f3 100644
--- a/packages/render/src/components/text.tsx
+++ b/packages/render/src/components/text.tsx
@@ -6,7 +6,6 @@ import type {
import { cn, idToUuid, notionColor, notionUrl } from "../util"
import { RenderOptions } from "../types"
-import { A } from "./html/a"
import { PageTitle } from "./page-title"
export const RichTexts = ({ value, options }: { value: Array; options: RenderOptions }) => {