Styling
By default, plate plugins have no component: you'll need to plug them. There is multiple ways to style your editor.
#
PluginsTo register a single component, use the plugin property component
:
#
ComponentsTo 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.
#
Plate UIPlate 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.
- all Plate element keys start with
ELEMENT_
. - all Plate mark keys start with
MARK_
.
#
Styled ComponentsPlate provides components with overridable styles and markup:
- StyledElement
- This component can be used to style
Element
nodes (e.g.p
,h1
,ul
,li
,...).
- This component can be used to style
- StyledLeaf
- This component can be used to style
Leaf
nodes (e.g.bold
,italic
,code
,...).
- This component can be used to style
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'
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.
#
Custom ComponentsYou can create your own component.
- The custom element props interface should extend
PlateRenderElementProps<V>
whereTElement
is the element type. - The custom leaf props interface should extend
PlateRenderLeafProps<V>
whereTText
is the leaf type.
#
CSSPlate add a class
attribute to all elements and leaves.
Its value is the plugin type
prefixed by slate-
, for example:
slate-p
for the paragraphslate-ul
for the listslate-li
for the list item- ...
That way, you can style your nodes with class selectors.