Font

Provide extended formatting options for document content.

Color 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

  • Font size, family, color, background color, and weight.

Plugins

  • FontFamilyPlugin: Change font family using inline elements with font-family style
  • FontSizePlugin: Control font size with CSS class or font-size style
  • FontColorPlugin: Control font color with color style
  • FontBackgroundColorPlugin: Control background color with background-color style
  • FontWeightPlugin: Control font weight with font-weight style

Installation

npm install @udecode/plate-font

Usage

import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontSizePlugin,
} from '@udecode/plate-font/react';
 
const plugins = [
  // ...otherPlugins,
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
];

Plugins

FontBackgroundColorPlugin

Plugin for font background color formatting.

FontColorPlugin

Plugin for font color formatting.

FontFamilyPlugin

Plugin for font family formatting.

FontSizePlugin

Plugin for font size formatting.

API

editor.api.fontSize.setMark

Parameters

Collapse all

    The font size value to set.

Utils

toUnitLess

Parameters

Collapse all

    The font size value to convert.

Returnsstring

    The font size value without units.

FontWeightPlugin

Plugin for font weight formatting.

Hooks

useColorDropdownMenu

State

Collapse all

    Whether the dropdown menu is open.

    Callback to toggle the open state.

Returnsobject

Collapse all

    Props for the menu component.

    OptionsmenuProps

    Collapse all

      Whether the dropdown menu is open.

      Callback to toggle the open state.

    Props for the button component.

    OptionsbuttonProps

    Collapse all

      Whether the dropdown menu is open.

useColorInput

Returnsobject

Collapse all

    Ref for the color input element.

    Props for the child component that triggers the color picker.

    OptionschildProps

    Collapse all

      Callback for click events.

useColorsCustom

State

Collapse all

    Callback to update the custom color.

    Current color input value.

    Callback to update the color value.

Returnsobject

Collapse all

    Props for the color input element.

    OptionsinputProps

    Collapse all

      Current color input value.

      Callback for input changes.

    Props for menu item elements.

    OptionsmenuItemProps

    Collapse all

      Callback for item selection.