A Plate editor plugin kit that registers base marks — bold, italic, underline, code, strikethrough, subscript, superscript, highlight, and kbd — for static/server-side rendering.
import * as React from "react";
import { BaseBasicMarksKit } from "@/components/ui/basic-marks-base-kit";
export default function Demo() {
const marks = [
{ label: "Bold", node: <strong>bold</strong> },
{ label: "Italic", node: <em>italic</em> },
{ label: "Underline", node: <u>underline</u> },
{
label: "Code",
node: (
<code className="rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm">
code
</code>
),
},
{ label: "Strikethrough", node: <s>strikethrough</s> },
{
label: "Subscript",
node: (
<span>
x<sub>2</sub>
</span>
),
},
{
label: "Superscript",
node: (
<span>
x<sup>2</sup>
</span>
),
},
{
label: "Highlight",
node: <mark className="bg-yellow-200 text-inherit">highlight</mark>,
},
{
label: "Kbd",
node: (
<kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
⌘K
</kbd>
),
},
];
return (
<div className="mx-auto max-w-md p-6">
<p className="mb-3 text-sm text-muted-foreground">
{BaseBasicMarksKit.length} basic mark plugins registered:
</p>
<ul className="space-y-2 text-sm">
{marks.map((m) => (
<li key={m.label} className="flex items-center justify-between gap-4">
<span className="text-muted-foreground">{m.label}</span>
<span>{m.node}</span>
</li>
))}
</ul>
</div>
);
}