wix-style-react
Version:
298 lines (239 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _draftJs = require("draft-js");
var _draftConvert = require("draft-convert");
var _context = require("../FontUpgrade/context");
var _RichTextInputAreaSt = require("./RichTextInputArea.st.css");
var _RichTextToolbar = _interopRequireDefault(require("./Toolbar/RichTextToolbar"));
var _EditorUtilities = _interopRequireDefault(require("./EditorUtilities"));
var _RichTextInputAreaContext = require("./RichTextInputAreaContext");
var _RichTextInputAreaTexts = require("./RichTextInputAreaTexts");
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var decorator = new _draftJs.CompositeDecorator([{
strategy: _EditorUtilities["default"].findLinkEntities,
component: function component(_ref) {
var contentState = _ref.contentState,
entityKey = _ref.entityKey,
children = _ref.children;
var _contentState$getEnti = contentState.getEntity(entityKey).getData(),
url = _contentState$getEnti.url;
return /*#__PURE__*/_react["default"].createElement("a", {
"data-hook": "richtextarea-link",
href: url,
className: _RichTextInputAreaSt.classes.link,
target: "_blank" // Avoids a potentially serious vulnerability for '_blank' links
,
rel: "noopener noreferrer"
}, children);
}
}]);
var RichTextInputArea = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(RichTextInputArea, _React$PureComponent);
var _super = _createSuper(RichTextInputArea);
function RichTextInputArea(props) {
var _this;
(0, _classCallCheck2["default"])(this, RichTextInputArea);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setEditorState", function (newEditorState) {
var onStateChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
_this.setState({
editorState: newEditorState
}, function () {
var _this$props = _this.props,
_this$props$onChange = _this$props.onChange,
onChange = _this$props$onChange === void 0 ? function () {} : _this$props$onChange,
prependHTTP = _this$props.prependHTTP;
var htmlText = _EditorUtilities["default"].convertToHtml(newEditorState, prependHTTP);
var plainText = newEditorState.getCurrentContent().getPlainText();
onChange(htmlText, {
plainText: plainText
});
onStateChanged();
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updateContentByValue", function (value) {
var content = (0, _draftConvert.convertFromHTML)({
htmlToEntity: function htmlToEntity(nodeName, node, createEntity) {
if (nodeName === 'a') {
return createEntity('LINK', 'MUTABLE', {
url: node.href
});
}
}
})(value);
var updatedEditorState = _draftJs.EditorState.push(_this.state.editorState, content);
_this.setState({
editorState: updatedEditorState
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setValue", function (value) {
_this._updateContentByValue(value);
});
var consumerTexts = props.texts,
_prependHTTP = props.prependHTTP;
if (_prependHTTP) {
(0, _deprecationLog["default"])('<RichTextInputArea /> - prependHTTP prop is deprecated and will be removed in next major release, please use tooltipContent instead');
}
_this.state = {
editorState: _draftJs.EditorState.createEmpty(decorator),
texts: {
toolbarButtons: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.toolbarButtons), consumerTexts.toolbarButtons),
insertionForm: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.insertionForm), consumerTexts.insertionForm)
}
};
return _this;
}
(0, _createClass2["default"])(RichTextInputArea, [{
key: "componentDidMount",
value: function componentDidMount() {
var initialValue = this.props.initialValue; // TODO: currently it treats the value as an initial value
this._updateContentByValue(initialValue);
this.editorRef = /*#__PURE__*/_react["default"].createRef();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
placeholder = _this$props2.placeholder,
disabled = _this$props2.disabled,
minHeight = _this$props2.minHeight,
maxHeight = _this$props2.maxHeight,
status = _this$props2.status,
statusMessage = _this$props2.statusMessage,
spellCheck = _this$props2.spellCheck;
var isEditorEmpty = _EditorUtilities["default"].isEditorEmpty(this.state.editorState);
return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
var _ref3;
var isMadefor = _ref2.active;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _RichTextInputAreaSt.st)(_RichTextInputAreaSt.classes.root, {
isMadefor: isMadefor,
hidePlaceholder: !isEditorEmpty,
disabled: disabled,
hasError: !disabled && status === 'error',
hasWarning: !disabled && status === 'warning'
}, className) // Using CSS variable instead of applying minHeight & maxHeight on each child, down to the editor's content
,
style: (_ref3 = {}, (0, _defineProperty2["default"])(_ref3, _RichTextInputAreaSt.vars.minHeight, minHeight), (0, _defineProperty2["default"])(_ref3, _RichTextInputAreaSt.vars.maxHeight, maxHeight), _ref3)
}, /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Provider, {
value: {
texts: _this2.state.texts
}
}, /*#__PURE__*/_react["default"].createElement(_RichTextToolbar["default"], {
dataHook: "richtextarea-toolbar",
className: _RichTextInputAreaSt.classes.toolbar,
isDisabled: disabled,
editorState: _this2.state.editorState,
onBold: _this2._setEditorState,
onItalic: _this2._setEditorState,
onUnderline: _this2._setEditorState,
onLink: function onLink(newEditorState) {
_this2._setEditorState(newEditorState, function () {
return _this2.editorRef.current.focus();
});
},
onBulletedList: _this2._setEditorState,
onNumberedList: _this2._setEditorState
})), /*#__PURE__*/_react["default"].createElement("div", {
className: _RichTextInputAreaSt.classes.editorWrapper
}, /*#__PURE__*/_react["default"].createElement(_draftJs.Editor, {
ref: _this2.editorRef,
editorState: _this2.state.editorState,
onChange: _this2._setEditorState,
placeholder: placeholder,
readOnly: disabled,
spellCheck: spellCheck
}), !disabled && status && /*#__PURE__*/_react["default"].createElement("span", {
className: _RichTextInputAreaSt.classes.statusIndicator
}, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
dataHook: "richtextarea-status-indicator",
status: status,
message: statusMessage
}))));
});
}
}]);
return RichTextInputArea;
}(_react["default"].PureComponent);
RichTextInputArea.displayName = 'RichTextInputArea';
RichTextInputArea.propTypes = {
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes["default"].string,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes["default"].string,
/** Sets the initial value to be displayed in the editor. */
initialValue: _propTypes["default"].string,
/** Sets a placeholder message to display. */
placeholder: _propTypes["default"].string,
/** Specifies whether an editor and its toolbar should be disabled. */
disabled: _propTypes["default"].bool,
/** Specifies the status of a field. */
status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage: _propTypes["default"].string,
/** Defines a standard callback function for changes: `onChange(htmlText, { plainText })` */
onChange: _propTypes["default"].func,
/** Defines a minimum height for the editor (it grows by default) */
minHeight: _propTypes["default"].string,
/** Defines a maximum height for the editor (it grows by default) */
maxHeight: _propTypes["default"].string,
/**
* Enables browsers spell checking.
* Do not affect IE.
* In Safari, autocorrects by default.
*/
spellCheck: _propTypes["default"].bool,
/** Defines text styles to be shown. */
texts: _propTypes["default"].shape({
toolbarButtons: _propTypes["default"].shape({
boldButtonLabel: _propTypes["default"].string,
italicButtonLabel: _propTypes["default"].string,
underlineButtonLabel: _propTypes["default"].string,
linkButtonLabel: _propTypes["default"].string,
bulletedListButtonLabel: _propTypes["default"].string,
numberedListButtonLabel: _propTypes["default"].string
}),
insertionForm: _propTypes["default"].shape({
confirmButtonLabel: _propTypes["default"].string,
cancelButtonLabel: _propTypes["default"].string,
link: _propTypes["default"].shape({
textInputPlaceholder: _propTypes["default"].string,
urlInputPlaceholder: _propTypes["default"].string
})
})
}),
/** Prepend http protocol to link if it does not have it.
* (ex. typed link is wix.com becomes http://wix.com)
* @deprecated
*/
prependHTTP: _propTypes["default"].bool
};
RichTextInputArea.defaultProps = {
initialValue: '<p/>',
texts: {},
disabled: false
};
var _default = RichTextInputArea;
exports["default"] = _default;