@wix/design-system
Version:
@wix/design-system
241 lines (239 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _draftJs = require("draft-js");
var _draftConvert = require("draft-convert");
var _RichTextInputAreaSt = require("./RichTextInputArea.st.css.js");
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 _StatusContext = require("../FormField/StatusContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/RichTextInputArea.jsx",
_this = void 0;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}
}, children);
}
}]);
var RichTextInputArea = /*#__PURE__*/function (_React$PureComponent) {
function RichTextInputArea(props) {
var _this2;
(0, _classCallCheck2["default"])(this, RichTextInputArea);
_this2 = _callSuper(this, RichTextInputArea, [props]);
_this2._setEditorState = function (newEditorState) {
var onStateChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
_this2.setState({
editorState: newEditorState
}, function () {
var _this2$props$onChange = _this2.props.onChange,
onChange = _this2$props$onChange === void 0 ? function () {} : _this2$props$onChange;
var htmlText = _EditorUtilities["default"].convertToHtml(newEditorState);
var plainText = newEditorState.getCurrentContent().getPlainText();
onChange(htmlText, {
plainText: plainText
});
onStateChanged();
});
};
_this2._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(_this2.state.editorState, content);
_this2.setState({
editorState: updatedEditorState
});
};
/** Set value to display in the editor */
_this2.setValue = function (value) {
_this2._updateContentByValue(value);
};
/** Sets focus on rich text input area element */
_this2.focus = function () {
var _this2$editorRef$curr;
(_this2$editorRef$curr = _this2.editorRef.current) == null || _this2$editorRef$curr.focus();
};
/** Removes focus from rich text input area element */
_this2.blur = function () {
var _this2$editorRef$curr2;
(_this2$editorRef$curr2 = _this2.editorRef.current) == null || _this2$editorRef$curr2.blur();
};
var consumerTexts = props.texts;
_this2.state = {
editorState: _draftJs.EditorState.createEmpty(decorator),
texts: {
toolbarButtons: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.toolbarButtons), consumerTexts.toolbarButtons),
insertionForm: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.insertionForm), consumerTexts.insertionForm)
}
};
return _this2;
}
(0, _inherits2["default"])(RichTextInputArea, _React$PureComponent);
return (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 _this3 = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
className = _this$props.className,
placeholder = _this$props.placeholder,
disabled = _this$props.disabled,
minHeight = _this$props.minHeight,
maxHeight = _this$props.maxHeight,
status = _this$props.status,
statusMessage = _this$props.statusMessage,
spellCheck = _this$props.spellCheck,
customButtons = _this$props.customButtons;
var isEditorEmpty = _EditorUtilities["default"].isEditorEmpty(this.state.editorState);
var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _RichTextInputAreaSt.st)(_RichTextInputAreaSt.classes.root, {
hidePlaceholder: !isEditorEmpty,
disabled: disabled,
hasError: !disabled && finalStatus === 'error',
hasWarning: !disabled && finalStatus === 'warning'
}, className)
// Using CSS variable instead of applying minHeight & maxHeight on each child, down to the editor's content
,
style: (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _RichTextInputAreaSt.vars.minHeight, minHeight), _RichTextInputAreaSt.vars.maxHeight, maxHeight),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Provider, {
value: {
texts: this.state.texts
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_RichTextToolbar["default"], {
dataHook: "richtextarea-toolbar",
className: _RichTextInputAreaSt.classes.toolbar,
isDisabled: disabled,
editorState: this.state.editorState,
onBold: this._setEditorState,
onItalic: this._setEditorState,
onUnderline: this._setEditorState,
onLink: function onLink(newEditorState) {
_this3._setEditorState(newEditorState, function () {
return _this3.focus();
});
},
onBulletedList: this._setEditorState,
onNumberedList: this._setEditorState,
customButtons: customButtons,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 11
}
})), /*#__PURE__*/_react["default"].createElement("div", {
className: _RichTextInputAreaSt.classes.editorWrapper,
onClick: function onClick() {
return _this3.focus();
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_draftJs.Editor, {
ref: this.editorRef,
editorState: this.state.editorState,
onChange: this._setEditorState,
placeholder: placeholder,
readOnly: disabled,
spellCheck: spellCheck,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}
}), !disabled && (status || finalStatus === 'loading') && /*#__PURE__*/_react["default"].createElement("span", {
className: _RichTextInputAreaSt.classes.statusIndicator,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
dataHook: "richtextarea-status-indicator",
status: finalStatus,
message: statusMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 15
}
}))));
}
}]);
}(_react["default"].PureComponent);
RichTextInputArea.contextType = _StatusContext.StatusContext;
RichTextInputArea.displayName = 'RichTextInputArea';
RichTextInputArea.defaultProps = {
initialValue: '<p/>',
texts: {},
disabled: false
};
var _default = exports["default"] = RichTextInputArea;