@kedao/editor
Version:
Rich Text Editor Based On Draft.js
131 lines • 6.63 kB
JavaScript
import React from 'react';
import { ContentUtils } from '@kedao/utils';
import Switch from '../../common/Switch';
import DropDown from '../../common/DropDown';
import ControlGroup from '../ControlGroup';
import './style.scss';
class LinkEditor extends React.Component {
constructor(props) {
super(props);
this.dropDownInstance = React.createRef();
this.handeKeyDown = (e) => {
if (e.keyCode === 13) {
this.handleConfirm();
e.preventDefault();
return false;
}
return true;
};
this.handleTnputText = (e) => {
this.setState({
text: e.currentTarget.value
});
};
this.handleInputLink = (e) => {
this.setState({
href: e.currentTarget.value
});
};
this.setTarget = () => {
this.setState((prevState) => ({
target: prevState.target === '_blank' ? '' : '_blank'
}));
};
this.handleCancel = () => {
var _a;
(_a = this.dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
};
this.handleUnlink = () => {
var _a;
(_a = this.dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, false));
};
this.handleConfirm = () => {
var _a;
let { href, target } = this.state;
const { text, textSelected } = this.state;
const hookReturns = this.props.hooks('toggle-link', { href, target })({
href,
target
});
(_a = this.dropDownInstance.current) === null || _a === void 0 ? void 0 : _a.hide();
this.props.editor.requestFocus();
if (hookReturns === false) {
return false;
}
if (hookReturns) {
if (typeof hookReturns.href === 'string') {
href = hookReturns.href;
}
if (typeof hookReturns.target === 'string') {
target = hookReturns.target;
}
}
if (textSelected) {
if (href) {
this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, href, target));
}
else {
this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, false));
}
}
else {
this.props.editor.setValue(ContentUtils.insertText(this.props.editorState, text || href, null, {
type: 'LINK',
data: { href, target }
}));
}
return true;
};
this.state = {
text: '',
href: '',
target: props.defaultLinkTarget || '',
textSelected: false
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { href, target } = ContentUtils.getSelectionEntityData(nextProps.editorState, 'LINK');
const textSelected = !ContentUtils.isSelectionCollapsed(this.props.editorState) &&
ContentUtils.getSelectionBlockType(this.props.editorState) !== 'atomic';
let selectedText = '';
if (textSelected) {
selectedText = ContentUtils.getSelectionText(this.props.editorState);
}
this.setState({
textSelected,
text: selectedText,
href: href || '',
target: typeof target === 'undefined'
? nextProps.defaultLinkTarget || ''
: target || ''
});
}
render() {
const { allowInsertLinkText } = this.props;
const { text, href, target, textSelected } = this.state;
const caption = React.createElement("i", { className: "bfi-link" });
return (React.createElement(ControlGroup, null,
React.createElement(DropDown, { key: 0, caption: caption, title: this.props.language.controls.link, autoHide: true, getContainerNode: this.props.getContainerNode, showArrow: false, ref: this.dropDownInstance, className: "control-item dropdown link-editor-dropdown" },
React.createElement("div", { className: "bf-link-editor" },
allowInsertLinkText
? (React.createElement("div", { className: "input-group" },
React.createElement("input", { type: "text", value: text, spellCheck: false, disabled: textSelected, placeholder: this.props.language.linkEditor.textInputPlaceHolder, onKeyDown: this.handeKeyDown, onChange: this.handleTnputText })))
: null,
React.createElement("div", { className: "input-group" },
React.createElement("input", { type: "text", value: href, spellCheck: false, placeholder: this.props.language.linkEditor.linkInputPlaceHolder, onKeyDown: this.handeKeyDown, onChange: this.handleInputLink })),
React.createElement("div", { className: "switch-group" },
React.createElement(Switch, { active: target === '_blank', onClick: this.setTarget }),
React.createElement("label", null, this.props.language.linkEditor.openInNewWindow)),
React.createElement("div", { className: "buttons" },
React.createElement("a", { onClick: this.handleUnlink, role: "presentation", className: "primary button-remove-link pull-left" },
React.createElement("i", { className: "bfi-close" }),
React.createElement("span", null, this.props.language.linkEditor.removeLink)),
React.createElement("button", { type: "button", onClick: this.handleConfirm, className: "primary pull-right" }, this.props.language.base.confirm),
React.createElement("button", { type: "button", onClick: this.handleCancel, className: "default pull-right" }, this.props.language.base.cancel)))),
React.createElement("button", { key: 1, type: "button", "data-title": this.props.language.controls.unlink, className: "control-item button", onClick: this.handleUnlink, disabled: !textSelected || !href },
React.createElement("i", { className: "bfi-link-off" }))));
}
}
export default LinkEditor;
//# sourceMappingURL=index.js.map