4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1645,--- title: Font description: Provide extended formatting options for document content. docs: - route: /docs/components/font-color-toolbar-button title: Font Color Toolbar Button - route: /docs/components/font-size-toolbar-button title: Font Size Toolbar Button --- ## 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](/docs/installation/plate-ui) components. - Includes all font plugins (`FontColorPlugin`, `FontBackgroundColorPlugin`, `FontSizePlugin`, `FontFamilyPlugin`) with sensible defaults. ### Add Kit Add the kit to your plugins: ```tsx import { createPlateEditor } from 'platejs/react'; import { FontKit } from '@/components/editor/plugins/font-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...FontKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/basic-styles ``` ### Add Plugins Include the font plugins in your Plate plugins array when creating the editor. ```tsx 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. ```tsx 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`](/docs/components/font-color-toolbar-button) and [`FontSizeToolbarButton`](/docs/components/font-size-toolbar-button) to your [Toolbar](/docs/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. The background color value to set (e.g., `'#ff0000'`, `'red'`). ### `tf.color.addMark` Set the font color mark on the selected text. The color value to set (e.g., `'#0000ff'`, `'blue'`). ### `tf.fontFamily.addMark` Set the font family mark on the selected text. The font family value to set (e.g., `'Arial'`, `'Times New Roman'`). ### `tf.fontSize.addMark` Set the font size mark on the selected text. The font size value to set (e.g., `'16px'`, `'1.2em'`). ### `tf.fontWeight.addMark` Set the font weight mark on the selected text. The font weight value to set (e.g., `'bold'`, `'400'`, `'600'`). ## API ### `toUnitLess` Convert a font size value to a unitless value. The font size value to convert. The font size value without units. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(styles)/font.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(styles)/font.mdx"}],"className":"h-[70svh] min-h-80"}]]}]