Line Height Kit

Features

• Block-level lineHeight storage.
• HTML line-height style deserialization.
• Default-value cleanup.
• Configurable target block types.
• Shared setLineHeight transform.
• Registry dropdown toolbar driven by valid node values.

Usage

Add the Kit

Use LineHeightKit for the Plate UI setup. It targets paragraphs and all heading levels, with valid values 1, 1.2, 1.5, 2, and 3.

import { createPlateEditor } from "platejs/react";

import { LineHeightKit } from "@/components/editor/plugins/line-height-kit";

export const editor = createPlateEditor({
  plugins: [...LineHeightKit],
});

Add the Toolbar Control

LineHeightToolbarButton reads defaultNodeValue and validNodeValues from the plugin inject props.

import { LineHeightToolbarButton } from "@/components/ui/line-height-toolbar-button";

export function LineHeightControls() {
  return <LineHeightToolbarButton />;
}