SlateComponents to decouple styling

[zbeyens]

Slate Components

Package: @udecode/slate-plugins-components

In the current state, you can pass a custom component using the component option of each plugin.

We also want to let people create slate "design system components" inside a single package: material-ui, antd,.. But it would be cumbersome to manually add the provided components to the options of each plugin.

Solution: <SlateComponents components={slateComponents} /> provider.

interface SlateComponent<Props> {
	component: (props: Props) => React.ReactElement,
	props?: Props // there would be the fluent styles props
}

interface SlateComponents {
	[type: ComponentType]: SlateComponent<ComponentProps>
}

// Hook to get a component:
useSlateComponent: (type: string) => (props: RenderElementProps) => React.ReactElement

• each rendering plugin will render a component:
  • options.component if defined
  • useSlateComponent(pluginKey) if defined.
  • default to a div for an element, span for a mark.
• it would be nice to have intellisense (typescript) on each component props

Fluent Components

Package @udecode/slate-plugins-components-fluent
Dependency: @udecode/slate-plugins-components

These components support css-in-js using the styles props.

• BREAKING CHANGE: remove the styles option from rendering plugins.
• move all plugins components to this package.
• exports slateComponents: minimal styling.
• exports slateStyledComponents: full styling.
• exports createSlateStyledComponents: (slateComponents: SlateComponents) => SlateComponents to override the styles of slateComponents
• Storybook examples will use slateStyledComponents.
• if we don't want to use all the components (bundle size), we can create a custom SlateComponents object.

Components having dependency can have their own package for bundle size.

See #283 #230

Styling with css

As a good practice, all the slate nodes should have (nested) class names, so anyone can style these without slate-components or css-in-js solution.

[zbeyens]

@udecode/dev @Hideman85 do you have any reference for the provider pattern? How would you tackle that with our current styling system: overridable default styles Fluent UI styling pattern

[zbeyens]

Let's track this in #363