diff --git a/packages/core/src/lib/components/internal/rich-text.tsx b/packages/core/src/lib/components/internal/rich-text.tsx index 3f9a906..5247795 100644 --- a/packages/core/src/lib/components/internal/rich-text.tsx +++ b/packages/core/src/lib/components/internal/rich-text.tsx @@ -39,7 +39,7 @@ function Text({ props }: { props: TextArgs }) { ].filter(Boolean); const renderText = (source: string): React.ReactNode => { - return types.reduce( + const wrapped = types.reduce( (acc, type) => { switch (type) { case "link": @@ -64,6 +64,29 @@ function Text({ props }: { props: TextArgs }) { }, {source}, ); + + if (href) { + const isExternalLink = + href && + !href.startsWith("/") && + !href.includes(window.location.hostname); + return isExternalLink ? ( + + {wrapped} + + ) : ( + + {wrapped} + + ); + } + + return wrapped; }; return <>{renderText(content)}; diff --git a/packages/story/src/stories/internal/rich-text.json b/packages/story/src/stories/internal/rich-text.json new file mode 100644 index 0000000..e69de29 diff --git a/packages/story/src/stories/internal/rich-text.stories.tsx b/packages/story/src/stories/internal/rich-text.stories.tsx new file mode 100644 index 0000000..10978a0 --- /dev/null +++ b/packages/story/src/stories/internal/rich-text.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import Component from "../../lib/Notion"; +import json from "./rich-text.json"; + +const blocks = json.blocks as any; + +const meta: Meta = { + title: "Blocks/Internal/RichText", + component: Component, +}; + +export default meta; +type Story = StoryObj; + +export const RichText: Story = { + args: { + title: "Rich Text", + blocks: blocks.filter((block: any) => block.type !== "external-page-link"), + }, +}; + +export const ExternalPageLink: Story = { + args: { + title: "External Page Link", + blocks: blocks.filter((block: any) => block.type === "external-page-link"), + }, +};