Editable Components
Кроме всех описанных ранее компонентов мы хотим немного подробнее остановиться на компоненте UI Editable.
Он обрабатывает изменения внутри инпута пользователя в таких элементах контента как <Paragraph>
, <ListItem>
и прочие, в основе которых лежит наш компонент <Editable>
.
В этой инструкции мы создадим наш собственный полностью кастомизируемый компонент <Paragraph>
.
Давайте начнем с описания режимов редактирования и просмотра этого компонента:
/** @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
}),
});
Финальный результат:
Весь код:
/** @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
}),
});