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

Set the font size mark.

Parameters

Collapse all

    The font size value to set.

Utils

toUnitLess

Convert a font size value to a unitless value.

Parameters

Collapse all

    The font size value to convert.

Returnsstring

    The font size value without units.

FontWeightPlugin

Plugin for font weight formatting.

Hooks

useColorDropdownMenu

A behavior hook for the color dropdown menu component.

State

Collapse all

    Whether the dropdown menu is open.

    Callback to toggle the open state.

Returnsobject

Collapse all

    Props for the menu component.

    Props for the button component.

useColorInput

A behavior hook for the color input component.

Returnsobject

Collapse all

    Ref for the color input element.

    Props for the child component that triggers the color picker.

useColorsCustom

A behavior hook for custom colors in a color picker.

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.

    Props for menu item elements.