Styling

By default, plate plugins have no component: you'll need to plug them. There is multiple ways to style your editor.

Plugins#

To register a single component, use the plugin property component:

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

Components#

To register all the components in one place, use createPlugins second parameter. This way, the UI is decoupled from the plugins. Note that there is no difference with the plugin component property.

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 UI provides a component for each plugin as you can see in the examples.

use createPlateUI to use Plate UI components. The first parameter can be used to override 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,
});

// can be used in `createPlugins`
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<V> where TElement is the element type.
The custom leaf props interface should extend PlateRenderLeafProps<V> 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.