Editable Components
Besides all the components mentioned above – we'd like to tell a little more about our UI Editable component.
It handles all changes within the user's input, just like <Paragraph>
, <ListItem>
and other editable components of ours (they all use <Editable>
component in their's core).
In this guide, we will create our own <Paragraph>
element, but fully customizable.
Let's start with describing our component's edit & view modes:
/** @jsx window.SetkaEditor.lib.React.createElement */
const CustomParagraph = {};
CustomParagraph.edit = class CustomParagraph extends window.SetkaEditor.lib.React.Component {
render() {
const {element} = this.props;
const attrs = {
...element.attributes,
tabIndex: -1,
};
const style = {
minHeight: 20,
outline: 'none',
};
return (
<div {...attrs}>
{/*
Here goes our Editable component with all available props
You MUST pass ref, actions, isEditable & content props. Other are optional.
*/}
<SetkaEditor.UI.Editable
ref={el => this._domElement = el && el._domElement}
id={element.id}
tagName={'div'}
attributes={{ style }}
content={element.content}
isEditable={this.props.isEditable}
/>
</div>
);
}
};
CustomParagraph.view = class CustomParagraph extends window.SetkaEditor.lib.React.Component {
render() {
const {element} = this.props;
return (
<div {...element.attributes}>
{/*
Within element.content prop we can access data,
stored in element & render it in view mode
*/}
{element.content}
</div>
);
}
};
export default CustomParagraph;
That's all of it. But you should take in mind the process of registering this type of components (it's essential!):
window.SetkaEditor.registerElement({
type: 'CustomParagraph',
typeName: {
en: (n = 1) => n > 1 ? 'Custom Pargraph' : 'Custom Pargraph',
ru: (n = 1) => window.SetkaEditor.utils.pluralize(n, 'Кастомный Параграф', 'Кастомного Параграфа', 'Кастомных
Параграфов'),
},
component: {
edit: CustomParagraph.edit,
view: CustomParagraph.view,
},
mapStateToProps: (state, props) => ({
lang: state.lang,
element: window.SetkaEditor.selectors.getElementById(state, props.id),
// It is deadly important to pass isSelected & isEditable prop to
// Editable component. Otherwise it wouldn't work.
isSelected: window.SetkaEditor.selectors.isElementSelected(state, props.id),
isEditable: window.SetkaEditor.selectors.isElementSelected(state, props.id) && window.SetkaEditor.selectors.getSelectedElementsCount(state) === 1
}),
});
So, the final result:
And all of the code:
/** @jsx window.SetkaEditor.lib.React.createElement */
const CustomParagraph = {};
CustomParagraph.edit = class CustomParagraph extends window.SetkaEditor.lib.React.Component {
render() {
const {element} = this.props;
const attrs = {
...element.attributes,
tabIndex: -1,
};
const style = {
minHeight: 20,
outline: 'none',
};
return (
<div {...attrs}>
{/*
Here goes our Editable component with all available props
You MUST pass ref, actions, isEditable & content props. Other are optional.
*/}
<SetkaEditor.UI.Editable
ref={el => this._domElement = el && el._domElement}
id={element.id}
tagName={'div'}
attributes={{ style }}
content={element.content}
isEditable={this.props.isEditable}
/>
</div>
);
}
};
CustomParagraph.view = class CustomParagraph extends window.SetkaEditor.lib.React.Component {
render() {
const {element} = this.props;
return (
<div {...element.attributes}>
{/*
Within element.content prop we can access data,
stored in element & render it in view mode
*/}
{element.content}
</div>
);
}
};
export default CustomParagraph;
window.SetkaEditor.registerElement({
type: 'CustomParagraph',
typeName: {
en: (n = 1) => n > 1 ? 'Custom Pargraph' : 'Custom Pargraph',
ru: (n = 1) => window.SetkaEditor.utils.pluralize(n, 'Кастомный Параграф', 'Кастомного Параграфа', 'Кастомных
Параграфов'),
},
component: {
edit: CustomParagraph.edit,
view: CustomParagraph.view,
},
mapStateToProps: (state, props) => ({
lang: state.lang,
element: window.SetkaEditor.selectors.getElementById(state, props.id),
// It is deadly important to pass isSelected & isEditable prop to
// Editable component. Otherwise it wouldn't work.
isSelected: window.SetkaEditor.selectors.isElementSelected(state, props.id),
isEditable: window.SetkaEditor.selectors.isElementSelected(state, props.id) && window.SetkaEditor.selectors.getSelectedElementsCount(state) === 1
}),
});