Skip to main content

Styling

There is multiple ways to style your editor.

Components#

Plate accepts the components prop so you can pass all the components of your editor in one place. This way, the design is decoupled from the other props.

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

Factory#

Plate provides a kit of components for all the plugins.

You can either:

  • import and use createPlateComponents to create all the components. The first parameter can be used to override default components by plugin key.
// this will override the paragraph markup
const components = createPlateComponents({
[ELEMENT_PARAGRAPH]: withProps(StyledElement, {
as: 'div',
}),
})
  • or create your own factory:
export const createPlateComponents = (
overrides?: Partial<Record<DefaultPlatePluginKey, PlatePluginComponent>>
) => {
const components = {
[ELEMENT_ALIGN_CENTER]: AlignCenterElement,
[ELEMENT_ALIGN_JUSTIFY]: AlignJustifyElement,
[ELEMENT_ALIGN_LEFT]: AlignLeftElement,
[ELEMENT_ALIGN_RIGHT]: AlignRightElement,
[ELEMENT_BLOCKQUOTE]: BlockquoteElement,
[ELEMENT_CODE_BLOCK]: CodeBlockElement,
[ELEMENT_CODE_LINE]: CodeLineElement,
[ELEMENT_EXCALIDRAW]: ExcalidrawElement,
[ELEMENT_H1]: Heading1Element,
[ELEMENT_H2]: Heading2Element,
[ELEMENT_H3]: Heading3Element,
[ELEMENT_H4]: Heading4Element,
[ELEMENT_H5]: Heading5Element,
[ELEMENT_H6]: Heading6Element,
[ELEMENT_IMAGE]: ImageElement,
[ELEMENT_LI]: ListItemElement,
[ELEMENT_LINK]: LinkElement,
[ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
[ELEMENT_MENTION]: MentionElement,
[ELEMENT_UL]: BulletedListElement,
[ELEMENT_OL]: NumberedListElement,
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_TABLE]: TableElement,
[ELEMENT_TD]: TableCellElement,
[ELEMENT_TH]: TableHeaderElement,
[ELEMENT_TODO_LI]: TodoListElement,
[ELEMENT_TR]: TableRowElement,
[MARK_BOLD]: BoldLeaf,
[MARK_CODE]: CodeLeaf,
[MARK_HIGHLIGHT]: HighlightLeaf,
[MARK_ITALIC]: ItalicLeaf,
[MARK_KBD]: KbdLeaf,
[MARK_SEARCH_HIGHLIGHT]: SearchHighlightLeaf,
[MARK_STRIKETHROUGH]: StrikethroughLeaf,
[MARK_SUBSCRIPT]: SubscriptLeaf,
[MARK_SUPERSCRIPT]: SuperscriptLeaf,
[MARK_UNDERLINE]: UnderlineLeaf,
};
if (overrides) {
Object.keys(overrides).forEach((key) => {
components[key] = overrides[key];
});
}
return components as Record<DefaultPlatePluginKey, PlatePluginComponent>;
};

Styled Components#

We provide 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#

note

This prop is subject to change for another CSS-in-JS solution in v1.

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 Component.types.ts file.

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

More in FluentUI docs.

Custom Components#

You can create your own component.

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

CSS#

Plate add a class attribute to all elements and leaves.

It is equals to the plugin key 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.