wix-style-react
Version:
wix-style-react
284 lines (282 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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _draftJs = require("draft-js");
var _draftConvert = require("draft-convert");
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 _StatusContext = require("../FormField/StatusContext");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/RichTextInputArea/RichTextInputArea.js";
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; }
var decorator = new _draftJs.CompositeDecorator([{
strategy: _EditorUtilities.default.findLinkEntities,
component: _ref => {
var {
contentState,
entityKey,
children
} = _ref;
var {
url
} = contentState.getEntity(entityKey).getData();
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}
}, children);
}
}]);
class RichTextInputArea extends _react.default.PureComponent {
constructor(props) {
var _this;
super(props);
_this = this;
this._setEditorState = function (newEditorState) {
var onStateChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
_this.setState({
editorState: newEditorState
}, () => {
var {
onChange = () => {}
} = _this.props;
var htmlText = _EditorUtilities.default.convertToHtml(newEditorState);
var plainText = newEditorState.getCurrentContent().getPlainText();
onChange(htmlText, {
plainText
});
onStateChanged();
});
};
this._updateContentByValue = value => {
var content = (0, _draftConvert.convertFromHTML)({
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
});
};
/** Set value to display in the editor */
this.setValue = value => {
this._updateContentByValue(value);
};
var {
texts: consumerTexts
} = props;
this.state = {
editorState: _draftJs.EditorState.createEmpty(decorator),
texts: {
toolbarButtons: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.toolbarButtons), consumerTexts.toolbarButtons),
insertionForm: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.insertionForm), consumerTexts.insertionForm)
}
};
}
componentDidMount() {
var {
initialValue
} = this.props;
// TODO: currently it treats the value as an initial value
this._updateContentByValue(initialValue);
this.editorRef = /*#__PURE__*/_react.default.createRef();
}
render() {
var {
dataHook,
className,
placeholder,
disabled,
minHeight,
maxHeight,
status,
statusMessage,
spellCheck
} = this.props;
var isEditorEmpty = _EditorUtilities.default.isEditorEmpty(this.state.editorState);
var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 7
}
}, _ref2 => {
var {
newColorsBranding
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _RichTextInputAreaSt.st)(_RichTextInputAreaSt.classes.root, {
hidePlaceholder: !isEditorEmpty,
disabled,
hasError: !disabled && finalStatus === 'error',
hasWarning: !disabled && finalStatus === 'warning',
newColorsBranding
}, className)
// Using CSS variable instead of applying minHeight & maxHeight on each child, down to the editor's content
,
style: {
[_RichTextInputAreaSt.vars.minHeight]: minHeight,
[_RichTextInputAreaSt.vars.maxHeight]: maxHeight
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Provider, {
value: {
texts: this.state.texts
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 13
}
}, /*#__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: newEditorState => {
this._setEditorState(newEditorState, () => this.editorRef.current.focus());
},
onBulletedList: this._setEditorState,
onNumberedList: this._setEditorState,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: _RichTextInputAreaSt.classes.editorWrapper,
onClick: () => this.editorRef.current.focus(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 13
}
}, /*#__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: 132,
columnNumber: 15
}
}), !disabled && (status || finalStatus === 'loading') && /*#__PURE__*/_react.default.createElement("span", {
className: _RichTextInputAreaSt.classes.statusIndicator,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_StatusIndicator.default, {
dataHook: "richtextarea-status-indicator",
status: finalStatus,
message: statusMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 19
}
}))));
});
}
}
RichTextInputArea.contextType = _StatusContext.StatusContext;
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
})
})
})
};
RichTextInputArea.defaultProps = {
initialValue: '<p/>',
texts: {},
disabled: false
};
var _default = exports.default = RichTextInputArea;
//# sourceMappingURL=RichTextInputArea.js.map