Skip to main content

Styling

There is multiple ways to style your editor.

Plugins#

Use the plugin property component like this:

const plugins = [
createParagraphPlugin({
component: ParagraphElement,
}),
createLinkPlugin({
component: LinkElement,
}),
];

Components#

Use createPlugins to pass all the components of your editor in one place. This way, the UI is decoupled from the business logic.

It's an object whose property keys are plugin keys and whose property values are React components.

const plugins = createPlugins(plugins, {
components: {
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_LINK]: LinkElement,
},
});

Plate UI#

Plate provides a kit of components for all the plugins.

You can either:

  • use createPlateUI to create all the components. The first parameter can be used to override default components by plugin key.
const components = createPlateUI({
// this will override the paragraph and link components over the default ones
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_LINK]: LinkElement,
});
const plugins = createPlugins(plugins, { components });
  • all Plate element keys start with ELEMENT_.
  • all Plate mark keys start with MARK_.

Styled Components#

Plate provides components with overridable styles and markup:

  • StyledElement
    • This component can be used to style Element nodes (e.g. p, h1, ul, li,...).
  • StyledLeaf
    • This component can be used to style Leaf nodes (e.g. bold, italic, code,...).
  • withProps HOC can be used to override and add props to a component.

as prop#

  • A component type or primitive that is rendered as the type of the root element.
  • StyledElement's default is 'div'
  • StyledLeaf's default 'span'
// Example
const components = {
...
[ELEMENT_H1]: withProps(StyledElement, {
as: 'h1',
}),
...
}

styles prop#

We provide many styled components which accept a styles props.

Unlike a style prop that only applies styles to the root component, the styles prop (provided by most Plate components) allows you to control the styling of every part of a component: the root, the children, and even sub-components. You can use this for one-off component customizations, or you can create a brand new component with these custom styles.

A component consists of DOM elements, or "areas". Each of the areas should be targetable for styling.

To find the available areas for a component, use intellisense or look at the component styling interface in the component's ComponentName.types.ts file.

// Example
const components = {
...
[ELEMENT_H1]: withProps(StyledElement, {
styles: {
root: {
margin: '2em 0 4px',
fontSize: '1.875em',
fontWeight: '500',
lineHeight: '1.3',
},
},
}),
...
}

Custom Components#

You can create your own component.

  • The custom element props interface should extend PlateRenderElementProps<TElement> where TElement is the element type.
  • The custom leaf props interface should extend PlateRenderLeafProps<TText> where TText is the leaf type.

CSS#

Plate add a class attribute to all elements and leaves.

Its value is the plugin type prefixed by slate-, for example:

  • slate-p for the paragraph
  • slate-ul for the list
  • slate-li for the list item
  • ...

That way, you can style your nodes with class selectors.