or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-udecode--plate-line-height

Line height plugin for Plate rich-text editor framework providing customizable line spacing for block elements

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-line-height@49.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-line-height@49.0.0

index.mddocs/

Plate Line Height Plugin

A line height plugin for Plate, a rich-text editor framework built on Slate.js and React. This plugin enables developers to apply custom line spacing to block elements such as paragraphs and headings by injecting line height properties into targeted elements. It supports HTML deserialization, provides configurable defaults, and includes transform functions for programmatic control.

Package Information

  • Package Name: @udecode/plate-line-height
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-line-height

Core Imports

import { BaseLineHeightPlugin, setLineHeight } from "@udecode/plate-line-height";
import { LineHeightPlugin } from "@udecode/plate-line-height/react";
import type { SlateEditor, SetNodesOptions } from "@udecode/plate";

For CommonJS:

const { BaseLineHeightPlugin, setLineHeight } = require("@udecode/plate-line-height");
const { LineHeightPlugin } = require("@udecode/plate-line-height/react");

Basic Usage

import { Plate } from "@udecode/plate/react";
import { LineHeightPlugin } from "@udecode/plate-line-height/react";

// Add to your Plate editor
const editor = Plate.create({
  plugins: [
    LineHeightPlugin,
    // ... other plugins
  ],
});

// Programmatically set line height
import { setLineHeight } from "@udecode/plate-line-height";
setLineHeight(editor, 2.0); // Sets line height to 2.0

Architecture

The plugin consists of three main components:

  • BaseLineHeightPlugin: Core plugin implementation for base Slate.js integration
  • LineHeightPlugin: React-compatible version using toPlatePlugin wrapper
  • Transform Functions: Utilities for programmatically setting line heights

The plugin works by:

  1. Injecting a lineHeight property into block elements (paragraphs by default)
  2. Deserializing line-height CSS properties from HTML during paste operations
  3. Providing transform functions to set/unset line height values programmatically
  4. Using a default value of 1.5 when no explicit line height is set

Capabilities

Base Line Height Plugin

Core plugin implementation that provides line height functionality for Slate.js editors.

import { createSlatePlugin, KEYS } from '@udecode/plate';

/**
 * Core line height plugin that provides line height functionality for block elements.
 * Targets paragraph blocks by default with a default line height of 1.5.
 * Supports HTML deserialization of line-height CSS properties from pasted HTML.
 */
export const BaseLineHeightPlugin: SlatePlugin;

Configuration options:

  • Plugin Key: KEYS.lineHeight
  • Default Value: 1.5
  • Target Elements: Paragraph elements (KEYS.p) by default
  • Node Property: lineHeight
  • Block-level: Yes (isBlock: true)

React Line Height Plugin

React-compatible version of the base plugin for use in Plate React applications.

import { toPlatePlugin } from '@udecode/plate/react';

/**
 * React-compatible version of BaseLineHeightPlugin.
 * Created by wrapping BaseLineHeightPlugin with toPlatePlugin.
 */
export const LineHeightPlugin: PlatePlugin;

Set Line Height Transform

Transform function to programmatically set line height on selected elements.

import {
  type SetNodesOptions,
  type SlateEditor,
  getInjectMatch,
  KEYS,
} from '@udecode/plate';

/**
 * Transform function to set line height on selected elements.
 * If value equals the default (1.5), removes the line height property.
 * Otherwise sets the line height property on matching nodes.
 * 
 * @param editor - SlateEditor instance
 * @param value - Line height value (number)
 * @param setNodesOptions - Optional SetNodesOptions for controlling the operation
 */
export const setLineHeight = (
  editor: SlateEditor,
  value: number,
  setNodesOptions?: SetNodesOptions
): void;

Usage Examples:

import { setLineHeight } from "@udecode/plate-line-height";

// Set line height to 2.0
setLineHeight(editor, 2.0);

// Reset to default (removes the line height property)
setLineHeight(editor, 1.5);

// Set line height with specific options
setLineHeight(editor, 1.8, {
  at: editor.selection, // Apply to current selection
  match: (n) => n.type === 'paragraph' // Only apply to paragraphs
});

Types

import type {
  SlateEditor,
  SetNodesOptions,
  SlatePlugin,
  PlatePlugin
} from '@udecode/plate';

// The core types used by this plugin are imported from @udecode/plate:
// - SlateEditor: The main editor instance with transform methods (tf.setNodes, tf.unsetNodes)
// - SetNodesOptions: Options for controlling node operations (at, match, etc.)
// - SlatePlugin: Base plugin type for Slate integration
// - PlatePlugin: React-compatible plugin type wrapped with toPlatePlugin

HTML Integration

The plugin automatically handles HTML deserialization when pasting content. It includes a parser that extracts line-height CSS properties from HTML elements and applies them to the corresponding Plate nodes.

<!-- This HTML will be automatically parsed -->
<p style="line-height: 2.0;">This paragraph has custom line height</p>
<div style="line-height: 1.25;">This div also gets line height applied</div>

The parser implementation:

  • Checks for element.style.lineHeight on pasted HTML elements
  • Extracts the line-height value and applies it as a node property
  • Works with any HTML element that has a line-height style attribute
  • Integrates seamlessly with Plate's HTML deserialization system
// Parser logic (internal implementation)
parse: ({ element }) => {
  if (element.style.lineHeight) {
    return {
      [editor.getType(plugin.key)]: element.style.lineHeight,
    };
  }
}