āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(styles)/indent ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Indent docs:
indent prop into targeted block elements.The fastest way to add indent functionality is with the IndentKit, which includes pre-configured IndentPlugin targeting paragraph, heading, blockquote, code block, and toggle elements.
Paragraph, Heading, Blockquote, CodeBlock, and Toggle elements to support the indent property.24px for indentation spacing.Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { IndentKit } from '@/components/editor/plugins/indent-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...IndentKit,
],
});
npm install @platejs/indent
Include IndentPlugin in your Plate plugins array when creating the editor.
import { IndentPlugin } from '@platejs/indent/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin,
],
});
You can configure the IndentPlugin to target specific elements and customize indentation behavior.
import { IndentPlugin } from '@platejs/indent/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
IndentPlugin.configure({
inject: {
nodeProps: {
styleKey: 'marginLeft',
},
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote],
},
options: {
offset: 24,
unit: 'px',
indentMax: 10,
},
}),
],
});
inject.nodeProps.styleKey: Maps the injected prop to the CSS marginLeft property.inject.targetPlugins: An array of plugin keys indicating which element types can be indented.options.offset: Indentation offset in pixels (default: 24).options.unit: Unit for indentation values (default: 'px').options.indentMax: Maximum number of indentations allowed.You can add IndentToolbarButton to your Toolbar to control indentation.
IndentPluginPlugin for indenting block elements. It injects an indent prop into the elements specified by inject.targetPlugins and applies marginLeft styling.
indentIndents the selected block(s) in the editor.
<API name="indent"> <APIOptions type="SetIndentOptions" optional> Options for indenting blocks. </APIOptions> </API>outdentDecrease the indentation of the selected blocks.
<API name="outdent"> <APIOptions type="SetIndentOptions" optional> Options for outdenting blocks. </APIOptions> </API>setIndentAdd offset to the indentation of the selected blocks.
<API name="setIndent"> <APIOptions type="SetIndentOptions"> <APIItem name="offset" type="number" optional> Indentation offset used in `(offset * element.indent) + unit`. - **Default:** `1` </APIItem> <APIItem name="getNodesOptions" type="EditorNodesOptions" optional> Options to get nodes to indent. </APIItem> <APIItem name="setNodesProps" type="object" optional> Additional props to set on nodes to indent. </APIItem> <APIItem name="unsetNodesProps" type="string[]" optional> Additional props to unset on nodes to indent. - **Default:** `[]` </APIItem> </APIOptions> </API>SetIndentOptionsUsed to provide options for setting the indentation of a block of text.
<API name="SetIndentOptions"> <APIOptions> <APIItem name="offset" type="number"> Change in indentation (1 to indent, -1 to outdent). - **Default:** `1` </APIItem> <APIItem name="getNodesOptions" type="EditorNodesOptions<V>"> Additional `getNodes` options. </APIItem> <APIItem name="setNodesProps" type="object"> Additional `setNodes` options. </APIItem> <APIItem name="unsetNodesProps" type="string[]"> Properties to unset when indentation is 0. </APIItem> </APIOptions> </API>useIndentButtonA behavior hook for the indent button component.
<API name="useIndentButton"> <APIReturns type="object"> <APIItem name="props" type="object"> Props for the indent button. <APISubList> <APISubListItem parent="props" name="onClick" type="function"> Callback to handle click event. Indents selected content and focuses editor. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>useOutdentButtonA behavior hook for the outdent button component.
<API name="useOutdentButton"> <APIReturns type="object"> <APIItem name="props" type="object"> Props for the outdent button. <APISubList> <APISubListItem parent="props" name="onClick" type="function"> Callback to handle click event. Outdents selected content and focuses editor. </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā