feat: link block

package.json

@@ -72,12 +72,14 @@
     "nanoid": "^5.0.5",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
+    "open-graph-scraper": "^6.4.0",
     "react": "^18",
     "react-dom": "^18",
     "slugify": "^1.6.6",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "url-metadata": "^3.5.6",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -99,8 +101,8 @@
     "eslint-plugin-tailwindcss": "^3.14.2",
     "postcss": "^8",
     "prettier": "^3.2.5",
-    "shiki": "^1.1.3",
     "prettier-plugin-tailwindcss": "^0.5.11",
+    "shiki": "^1.1.3",
     "simple-git-hooks": "^2.9.0",
     "tailwindcss": "^3.3.0",
     "tsx": "^4.7.0",

src/app/api/link-preview/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { getUserAuth } from "@/lib/auth/utils";
+
+import metaScraper from "open-graph-scraper";
+
+export async function GET(request: NextRequest) {
+  const { session } = await getUserAuth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const url = request.nextUrl.searchParams.get("url");
+
+  if (!url) {
+    return NextResponse.json({ error: "Invalid URL" }, { status: 400 });
+  }
+
+  const domain = new URL(url).origin;
+
+  return metaScraper({ url: url })
+    .then((data) => {
+      const { error, result } = data;
+
+      if (error) {
+        console.error("Error fetching metadata:", error);
+        return NextResponse.json({ error: error }, { status: 500 });
+      }
+
+      let imageUrl =
+        (result.ogImage && result.ogImage[0]?.url) || result.favicon || "";
+
+      if (imageUrl.startsWith("/")) {
+        imageUrl = domain + imageUrl;
+      }
+
+      const response = {
+        success: 1,
+        link: url,
+        meta: {
+          title: result.ogTitle || "",
+          description: result.ogDescription || "",
+          image: {
+            url: imageUrl,
+          },
+        },
+      };
+
+      return NextResponse.json(response);
+    })
+    .catch((error) => {
+      console.error("Error fetching metadata:", error);
+      return NextResponse.json({ error: "Server error" }, { status: 500 });
+    });
+}

src/components/editor/tools.ts

@@ -13,7 +13,7 @@ import Embed from "@editorjs/embed";
 import Header from "@editorjs/header";
 import Image from "@editorjs/image";
 import InlineCode from "@editorjs/inline-code";
-import Link from "@editorjs/link";
+import LinkTool from "@editorjs/link";
 import NestedList from "@editorjs/nested-list";
 import Paragraph from "@editorjs/paragraph";
 import Table from "@editorjs/table";
@@ -54,7 +54,12 @@ export const tools: Record<string, ToolSettings | ToolConstructable> = {
   delimiter: Delimiter,
   table: Table,
   embed: Embed,
-  fancyLink: Link,
+  fancyLink: {
+    class: LinkTool,
+    config: {
+      endpoint: "/api/link-preview",
+    },
+  },
   code: Code,
   strikethrough: StrikeThrough,
 

src/components/renderer/blocks/index.ts

@@ -2,6 +2,7 @@ import { CodeBlock } from "./code";
 import { DefaultBlock } from "./default";
 import { HeaderBlock } from "./header";
 import { ImageBlock } from "./image";
+import { LinkPreview } from "./link-preview";
 import { ParagraphBlock } from "./paragraph";
 
 export const BLOCKS = {
@@ -11,4 +12,5 @@ export const BLOCKS = {
   image: ImageBlock,
   header: HeaderBlock,
   paragraph: ParagraphBlock,
+  fancyLink: LinkPreview,
 } as Record<string, any>;