Line Height

Adjust the height between lines of text.

Line Height Dropdown Menu
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Set line height for selected blocks.

Installation

npm install @udecode/plate-line-height

Usage

import { LineHeightPlugin } from '@udecode/plate-line-height/react';
 
const plugins = [
  // ...otherPlugins,
  LineHeightPlugin,
];

Plugins

LineHeightPlugin

API

setLineHeight

Sets the line height for selected nodes in the editor.

Parameters

Collapse all

    The editor instance.

    The options for setting the line height.

API Components

useLineHeightDropdownMenu

The behavior hook for the line height dropdown menu.

State

Collapse all

    The line height value.

Returns

Collapse all

    The props for the radio group.

Keyboard InputLink