Font

PreviousNext

Provide extended formatting options for document content.

Font Color Toolbar ButtonFont Size Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Apply font styling to selected text including size, family, color, background color, and weight.
  • Supports custom font families, sizes, colors, and weights.

Plugins

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

Kit Usage

Installation

The fastest way to add font styling functionality is with the FontKit, which includes pre-configured font plugins with their Plate UI components.

'use client';
 
import type { PlatePluginConfig } from 'platejs/react';
 
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
const options = {
  inject: { targetPlugins: [KEYS.p] },
} satisfies PlatePluginConfig;
 
export const FontKit = [
  FontColorPlugin.configure({
    inject: {
      ...options.inject,
      nodeProps: {
        defaultNodeValue: 'black',
      },
    },
  }),
  FontBackgroundColorPlugin.configure(options),
  FontSizePlugin.configure(options),
  FontFamilyPlugin.configure(options),
];
  • Includes all font plugins (FontColorPlugin, FontBackgroundColorPlugin, FontSizePlugin, FontFamilyPlugin) with sensible defaults.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { FontKit } from '@/components/editor/plugins/font-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...FontKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/basic-styles

Add Plugins

Include the font plugins in your Plate plugins array when creating the editor.

import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin,
    FontBackgroundColorPlugin,
    FontFamilyPlugin,
    FontSizePlugin,
  ],
});

Configure Plugins

You can configure individual font plugins with custom options and target elements.

import {
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'black',
        },
        targetPlugins: [KEYS.p],
      },
    }),
    FontSizePlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontBackgroundColorPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontFamilyPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
  ],
});
  • inject.nodeProps.defaultNodeValue: Sets the default font color value.
  • inject.targetPlugins: Specifies which element types can receive font styling (affects HTML parsing).

Add Toolbar Button

You can add FontColorToolbarButton and FontSizeToolbarButton to your Toolbar to control font color and size.

Plugins

FontBackgroundColorPlugin

Plugin for font background color formatting. Applies background-color style to selected text.

FontColorPlugin

Plugin for font color formatting. Applies color style to selected text.

FontFamilyPlugin

Plugin for font family formatting. Applies font-family style to selected text.

FontSizePlugin

Plugin for font size formatting. Applies font-size style to selected text.

FontWeightPlugin

Plugin for font weight formatting. Applies font-weight style to selected text.

Transforms

tf.backgroundColor.addMark

Set the font background color mark on the selected text.

Parameters

Collapse all

    The background color value to set (e.g., '#ff0000', 'red').

tf.color.addMark

Set the font color mark on the selected text.

Parameters

Collapse all

    The color value to set (e.g., '#0000ff', 'blue').

tf.fontFamily.addMark

Set the font family mark on the selected text.

Parameters

Collapse all

    The font family value to set (e.g., 'Arial', 'Times New Roman').

tf.fontSize.addMark

Set the font size mark on the selected text.

Parameters

Collapse all

    The font size value to set (e.g., '16px', '1.2em').

tf.fontWeight.addMark

Set the font weight mark on the selected text.

Parameters

Collapse all

    The font weight value to set (e.g., 'bold', '400', '600').

API

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.

SuperscriptLine Height