Line Height

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

import React from 'react';

import { Plate } from '@udecode/plate/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

Plugin for setting line height on blocks.

API

setLineHeight

Parameters

Collapse all

    The editor instance.

    Options for setting line height.

OptionsSetLineHeightOptions

Collapse all

    Line height value to set.

    Additional options for setting nodes.

Hooks

useLineHeightDropdownMenu

State

Collapse all

    Current line height value.

Returnsobject

Collapse all

    Props for the radio group.

    OptionsradioGroupProps

    Collapse all

      Current line height value.

      Handler to update line height value.