Features
- Leaf plugins for common mark keys.
- Toggle transforms through each mark plugin.
- HTML deserialization for semantic tags and styles.
- Markdown-style input rules in the registry kit.
- Registry leaves for code, highlight, and keyboard text.
- Toolbar support through
MarkToolbarButton.
Usage
Add The Kit
BasicMarksKit is the full client-side registry kit. It includes mark plugins, input rules, CodeLeaf, HighlightLeaf, and KbdLeaf.
import { createPlateEditor } from "platejs/react";
import { BasicMarksKit } from "@/components/editor/plugins/basic-marks-kit";
export const editor = createPlateEditor({
plugins: [...BasicMarksKit],
});
Add Toolbar Buttons
Use MarkToolbarButton for direct mark toggles.
import { BoldIcon } from "lucide-react";
import { KEYS } from "platejs";
import { MarkToolbarButton } from "@/components/ui/mark-toolbar-button";
export function BoldToolbarButton() {
return (
<MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
<BoldIcon />
</MarkToolbarButton>
);
}
