@kedao/editor
Version:
Rich Text Editor Based On Draft.js
52 lines • 2.2 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import { ContentUtils } from '@kedao/utils';
import DropDown from '../../common/DropDown';
import './style.scss';
const toggleLineHeight = (event, props) => {
let lineHeight = event.currentTarget.dataset.size;
const hookReturns = props.hooks('toggle-line-height', lineHeight)(lineHeight);
if (hookReturns === false) {
return false;
}
if (!isNaN(hookReturns)) {
lineHeight = hookReturns;
}
props.editor.setValue(ContentUtils.toggleSelectionLineHeight(props.editorState, lineHeight));
props.editor.requestFocus();
return true;
};
const LineHeight = (props) => {
let caption = null;
let currentLineHeight = null;
const dropDownInstance = React.createRef();
props.lineHeights.find((item) => {
if (ContentUtils.selectionHasInlineStyle(props.editorState, `LINEHEIGHT-${item}`)) {
caption = item;
currentLineHeight = item;
return true;
}
return false;
});
return (React.createElement(DropDown, { autoHide: true, caption: caption || props.defaultCaption, getContainerNode: props.getContainerNode, title: props.language.controls.lineHeight, ref: dropDownInstance, className: "control-item dropdown bf-line-height-dropdown" },
React.createElement("ul", { className: "bf-line-heights" }, props.lineHeights.map((item) => {
return (React.createElement("li", { key: uuidv4(), role: "presentation", className: item === currentLineHeight ? 'active' : null, "data-size": item, onClick: (event) => {
var _a;
toggleLineHeight(event, props);
(_a = dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
} }, item));
}))));
};
LineHeight.propTypes = {
headings: PropTypes.any,
lineHeights: PropTypes.any,
current: PropTypes.any,
onChange: PropTypes.any,
editorState: PropTypes.any,
defaultCaption: PropTypes.any,
getContainerNode: PropTypes.any,
language: PropTypes.any
};
export default LineHeight;
//# sourceMappingURL=index.js.map