Registering Option
In this guide, we're going to develop our custom Option, which will contain a simple button. When this button is clicked, it adds some unique styles for selected paragraphs. It can be useful for stylizing some components with any amount of presets (in our case it will be only one preset).
Describing Option's markup
At first, we should define our component's markup. As it will be a simple button – let's use default Setka Editor's UI component.
// Replaces default jsx parser to our own createElement function
/** @jsx SetkaEditor.lib.React.createElement */
const StylePresetOptionComponent = () => (
<SetkaEditor.UI.Button kind="default">
Apply preset
</SetkaEditor.UI.Button>
);
Registering option
After that, we've got our simple button's markup. So let's register it in Setka Editor to check if everything works fine!
const StylePresetOptionComponent = () => (
<SetkaEditor.UI.Button kind="default">
Apply preset
</SetkaEditor.UI.Button>
);
// Registering our component in Setka Editor
SetkaEditor.registerOption({
// Unique name of our custom option
name: 'StylePresetOption',
// Our simple component
component: StylePresetOptionComponent,
// Elements to show on
// We're interested in paragraphs only
elementsToShow: ['Paragraph'],
});
// Start Setka Editor
SetkaEditor.start(config, assets);
If you've done everything right and you do not see any errors in developer's console, then you should see something like this:
⚠️ At this point, we do not support placing your option in custom positions in the header, so it always appears last. In may be changed in future releases.
As you can see our custom option is shown only when Paragraph element is selected and hidden when other types of content are selected.
Retrieving selected elements
Our button is at the right place, so we can start describing the behavior of this component.
At first–let's retrieve selected element!
const StylePresetOptionComponent = ({selectedElement}) => (
<SetkaEditor.UI.Button kind="default">
Apply preset
</SetkaEditor.UI.Button>
);
const mapStateToProps = state => ({
// Get current selected element
selectedElement: SetkaEditor.selectors.getSelectedElements(state)[0],
});
// Connect component to Editor's state
const StylePresetOption =
SetkaEditor.lib.ReactRedux.connect(mapStateToProps)(StylePresetOptionComponent);
After connecting our Option to Editor's state, we do have access to the currently selected component. So let's do something with it!
Updating selected component
In this example let's add some attributes and styles to selected component, when our Option button is clicked, like this:
const StylePresetOptionComponent = ({selectedElement, onClick}) => (
<SetkaEditor.UI.Button kind="default" onClick={() => onClick(selectedElement)}>
Apply preset
</SetkaEditor.UI.Button>
);
const mapStateToProps = state => ({ // Get current selected element
selectedElement: SetkaEditor.selectors.getSelectedElements(state)[0],
});
const mapDispatchToProps = dispatch => ({
onClick: selectedElement => {
// Set element attributes, via action, provided by Setka Editor
dispatch(SetkaEditor.actions.setElementAttribute({
id: selectedElement.id,
attrs: {
'data-custom-preset-applied': true
}
}));
// Update element's styles
dispatch(SetkaEditor.actions.setElementStyle({
id: selectedElement.id,
style: {
backgroundColor: '#fcdfa6',
fontSize: '14px',
lineHeight: '16px',
textTransform: 'uppercase',
}
}));
}
});
// Connect component to Editor's state
const StylePresetOption =
SetkaEditor.lib.ReactRedux.connect(
mapStateToProps,
mapDispatchToProps
)(StylePresetOptionComponent);
If everything went fine you should get a picture like this:
💪 Congratulations! We've developed our first custom Option component!
Full code of StylePresetOption
// Replaces default jsx parser to our own createElement function
/** @jsx SetkaEditor.lib.React.createElement */
const StylePresetOptionComponent = ({selectedElement, onClick}) => (
<SetkaEditor.UI.Button kind="default" onClick={() => onClick(selectedElement)}>
Apply preset
</SetkaEditor.UI.Button>
);
const mapStateToProps = state => ({ // Get current selected element
selectedElement: SetkaEditor.selectors.getSelectedElements(state)[0],
});
const mapDispatchToProps = dispatch => ({
onClick: selectedElement => {
// Set element attributes, via action, provided by Setka Editor
dispatch(SetkaEditor.actions.setElementAttribute({
id: selectedElement.id,
attrs: {
'data-custom-preset-applied': true
}
}));
// Update element's styles
dispatch(SetkaEditor.actions.setElementStyle({
id: selectedElement.id,
style: {
backgroundColor: '#fcdfa6',
fontSize: '14px',
lineHeight: '16px',
textTransform: 'uppercase',
}
}));
}
});
// Connect component to Editor's state
const StylePresetOption =
SetkaEditor.lib.ReactRedux.connect(
mapStateToProps,
mapDispatchToProps
)(StylePresetOptionComponent);
// Registering our component in Setka Editor
SetkaEditor.registerOption({
// Unique name of our custom option
name: 'StylePresetOption',
// Our simple component
component: StylePresetOption,
// Elements to show on
// We're interested in paragraphs only
elementsToShow: ['Paragraph'],
});
// Start Setka Editor
SetkaEditor.start(config, assets);