Link Element

Text 3

About

A Plate editor element that renders inline hyperlinks with primary-colored underline styling and hover states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Link Element to your project and fits it to your theme.

Code

How Link Element is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { LinkElement } from "@/components/ui/link-node";

import * as React from "react";

import { LinkPlugin } from "@platejs/link/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

const initialValue = [
  {
    type: "p",
    children: [
      { text: "Visit " },
      {
        type: "a",
        url: "https://platejs.org",
        children: [{ text: "platejs.org" }],
      },
      { text: " to learn more about building rich-text editors." },
    ],
  },
];

export default function LinkDemo() {
  const editor = usePlateEditor({
    plugins: [
      LinkPlugin.configure({
        render: { node: LinkElement },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="w-full max-w-xl rounded-lg border p-4">
      <Plate editor={editor}>
        <PlateContent className="outline-none" />
      </Plate>
    </div>
  );
}