last-draft-js-plugins
Version:
Last Draft draft-js-plugins
252 lines (215 loc) • 9.36 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _entity = require('./entity');
var _linkifyIt = require('linkify-it');
var _linkifyIt2 = _interopRequireDefault(_linkifyIt);
var _tlds = require('tlds');
var _tlds2 = _interopRequireDefault(_tlds);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var LinkWrapper = function (_Component) {
_inherits(LinkWrapper, _Component);
function LinkWrapper() {
_classCallCheck(this, LinkWrapper);
return _possibleConstructorReturn(this, (LinkWrapper.__proto__ || Object.getPrototypeOf(LinkWrapper)).apply(this, arguments));
}
_createClass(LinkWrapper, [{
key: 'render',
value: function render() {
var editorState = this.props.getEditorState();
var entitySelected = (0, _entity.hasEntity)('LINK', editorState);
var entity = (0, _entity.getCurrentEntity)(editorState);
var entityData = null;
if (entitySelected) {
if (entity) {
entityData = entity.getData();
}
}
var url = entityData ? entityData.url : null;
return _react2.default.createElement(Link, _extends({
url: url,
entitySelected: entitySelected
}, this.props));
}
}]);
return LinkWrapper;
}(_react.Component);
exports.default = LinkWrapper;
var linkify = (0, _linkifyIt2.default)({ fuzzyIP: false });
linkify.tlds(_tlds2.default);
var Link = function (_Component2) {
_inherits(Link, _Component2);
function Link(props) {
_classCallCheck(this, Link);
var _this2 = _possibleConstructorReturn(this, (Link.__proto__ || Object.getPrototypeOf(Link)).call(this, props));
_this2.state = {
url: props && props.url || '',
error: null
};
return _this2;
}
_createClass(Link, [{
key: 'componentDidMount',
value: function componentDidMount() {
_reactDom2.default.findDOMNode(this.refs.textInput).focus();
}
}, {
key: 'onUrlChange',
value: function onUrlChange(event) {
event.stopPropagation();
var url = event.target.value;
if (url === '') {
this.cancelError();
}
this.setState({ url: url });
}
}, {
key: 'setUrl',
value: function setUrl(event) {
this.submitUrl(this.state.url);
}
}, {
key: 'setError',
value: function setError(errorMsg) {
this.setState({ error: errorMsg });
}
}, {
key: 'cancelError',
value: function cancelError() {
this.setState({ error: null });
}
}, {
key: 'submitUrl',
value: function submitUrl(url) {
var _this3 = this;
var match = linkify.match(url);
if (match === null) {
this.setError('Invalid Link');
_reactDom2.default.findDOMNode(this.refs.textInput).focus();
return;
}
var matchedUrl = match[0].url;
this.setState({ url: matchedUrl }, function () {
_reactDom2.default.findDOMNode(_this3.refs.textInput).value = matchedUrl;
});
(0, _entity.setEntity)('LINK', { url: matchedUrl }, this.props.getEditorState(), this.props.setEditorState);
this.props.closeModal();
}
}, {
key: 'onSubmit',
value: function onSubmit(event) {
event.preventDefault();
this.setUrl();
}
}, {
key: 'onCancel',
value: function onCancel(event) {
event.preventDefault();
if (this.props.entitySelected) {
(0, _entity.removeEntity)('LINK', this.props.getEditorState(), this.props.setEditorState);
}
this.cancelError();
this.props.closeModal();
}
}, {
key: 'onKeyDown',
value: function onKeyDown(event) {
if (event.key === 'Enter') {
event.preventDefault();
this.setUrl();
} else if (event.key === 'Escape') {
event.preventDefault();
this.props.closeModal();
}
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
theme = _props.theme,
entitySelected = _props.entitySelected;
var error = this.state.error;
var toolbarBackgroundStyle = { background: error ? '#e83f26' : '#fff' };
var toolbarErrorStyle = {
height: error ? '28px' : '0',
paddingBottom: error ? '12px' : '0'
};
return _react2.default.createElement(
'div',
{ style: toolbarBackgroundStyle, className: theme.modalStyles.modalWrapper },
_react2.default.createElement('input', {
className: theme.modalStyles.modalInput,
ref: 'textInput',
type: 'text',
onChange: this.onUrlChange.bind(this),
value: this.state.url,
onKeyDown: this.onKeyDown.bind(this),
placeholder: 'Enter a link and press enter' }),
_react2.default.createElement(
'span',
{ className: theme.modalStyles.modalButtonWrapper },
_react2.default.createElement(
'button',
{
className: theme.modalStyles.modalButton,
onClick: this.onSubmit.bind(this),
type: 'button'
},
_react2.default.createElement(
'svg',
{ fill: 'currentColor', width: '18', height: '18', viewBox: '0 0 24 24' },
_react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
_react2.default.createElement('path', { d: 'M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' })
)
),
_react2.default.createElement(
'button',
{
className: theme.modalStyles.modalButton,
onClick: this.onCancel.bind(this),
type: 'button'
},
entitySelected ? _react2.default.createElement(
'svg',
{ width: '24', height: '24', viewBox: '0 0 24 24' },
_react2.default.createElement(
'g',
{ fill: 'currentColor', fillRule: 'evenodd' },
_react2.default.createElement('path', { d: 'M15.027 11l.974.972V11z' }),
_react2.default.createElement('path', { d: 'M22 12c0-2.754-2.24-5-5-5h-4v2h4c1.71-.095 3.1 1.3 3 3 .1 1.121-.484 2.087-1 3l1 1a5 5 0 0 0 2-4M7 7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2H7c-1.71.1-3.1-1.291-3-3-.1-1.71 1.29-3.1 3-3h3L8 7H7zM13 15.099v1.9h4c.37 0 .729-.046 1.076-.123l-1.777-1.777H13z' }),
_react2.default.createElement('path', { d: 'M8 11v2h8v-2z' }),
_react2.default.createElement('path', { d: 'M4.269 3l-1.27 1.27 12.658 12.657-.117-.107L19.73 21l1.269-1.27z' })
)
) : _react2.default.createElement(
'svg',
{ width: '18', height: '18', viewBox: '0 0 24 24' },
_react2.default.createElement(
'g',
{ fill: 'currentColor', fillRule: 'evenodd' },
_react2.default.createElement('path', { d: 'M16.95 5.636l1.414 1.414L7.05 18.364 5.636 16.95z' }),
_react2.default.createElement('path', { d: 'M16.95 18.364l1.414-1.414L7.05 5.636 5.636 7.05z' })
)
)
)
),
this.state.error && _react2.default.createElement(
'p',
{ style: toolbarErrorStyle, className: theme.modalStyles.modalError },
this.state.error
)
);
}
}]);
return Link;
}(_react.Component);