@kedao/editor
Version:
Rich Text Editor Based On Draft.js
40 lines • 1.86 kB
JavaScript
/* eslint-disable camelcase */
import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import { ContentUtils } from '@kedao/utils';
import mergeClassNames from 'merge-class-names';
import ControlGroup from '../ControlGroup';
class TextAlign extends React.Component {
constructor() {
super(...arguments);
this.state = {
currentAlignment: undefined
};
this.setAlignment = (event) => {
let { alignment } = event.currentTarget.dataset;
const hookReturns = this.props.hooks('toggle-text-alignment', alignment)(alignment);
if (this.props.textAligns.indexOf(hookReturns) > -1) {
alignment = hookReturns;
}
this.props.editor.setValue(ContentUtils.toggleSelectionAlignment(this.props.editorState, alignment));
this.props.editor.requestFocus();
};
}
UNSAFE_componentWillReceiveProps(next) {
this.setState({
currentAlignment: ContentUtils.getSelectionBlockData(next.editorState, 'textAlign')
});
}
render() {
const textAlignmentTitles = [
this.props.language.controls.alignLeft,
this.props.language.controls.alignCenter,
this.props.language.controls.alignRight,
this.props.language.controls.alignJustify
];
return (React.createElement(ControlGroup, null, this.props.textAligns.map((item, index) => (React.createElement("button", { type: "button", key: uuidv4(), "data-title": textAlignmentTitles[index], "data-alignment": item, className: mergeClassNames('control-item button', item === this.state.currentAlignment && 'active'), onClick: this.setAlignment },
React.createElement("i", { className: `bfi-align-${item}` }))))));
}
}
export default TextAlign;
//# sourceMappingURL=index.js.map