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

Sets the line height for selected nodes in the editor.

OptionsSetLineHeightOptions

Collapse all

    Line height value to set.

    Additional options for setting nodes.

Hooks

useLineHeightDropdownMenu

The behavior hook for the line height dropdown menu.

State

Collapse all

    Current line height value.

Returnsobject

Collapse all

    Props for the radio group.