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-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

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

Plugins:

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

Installation

npm install @udecode/plate-font

Usage

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

Plugins

FontBackgroundColorPlugin

FontColorPlugin

FontFamilyPlugin

FontSizePlugin

FontWeightPlugin

API Components

useColorDropdownMenu

A behavior hook for the color dropdown menu component.

State

Collapse all

    A boolean indicating whether the dropdown menu is open.

    A callback function to toggle the open state of the dropdown menu.

Returns

Collapse all

    The props to be spread on the menu component.

    The props to be spread on the button component.

useColorInput

A behavior hook for the color input component.

Returns

Collapse all

    A ref object that should be assigned to the color input element.

    The props to be spread on the child component that triggers the color picker.

useColorsCustom

A behavior hook for custom colors in a color picker.

State

Collapse all

    The callback function to update the custom color.

    The current value of the color input.

    The callback function to update the value of the color input.

Returns

Collapse all

    The props to be spread on the color input element.

    The props to be spread on the menu item elements in the color picker.

Exit BreakForced Layout