[DRAFT][Features/external page link]

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 }) {
       },
       <span className={`${getColorCss(color)} notion-span`}>{source}</span>,
     );
+
+    if (href) {
+      const isExternalLink =
+        href &&
+        !href.startsWith("/") &&
+        !href.includes(window.location.hostname);
+      return isExternalLink ? (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="notion-link notion-link-external"
+        >
+          {wrapped} <span className="notion-external-icon">↗</span>
+        </a>
+      ) : (
+        <a href={href} className="notion-link">
+          {wrapped}
+        </a>
+      );
+    }
+
+    return wrapped;
   };
 
   return <>{renderText(content)}</>;

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<typeof Component> = {
+  title: "Blocks/Internal/RichText",
+  component: Component,
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+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"),
+  },
+};