@elliemae/ds-wysiwygeditor
Version:
Ellie Mae - Dim Sum - WYSIWYG Editor
285 lines (241 loc) • 13.1 kB
JavaScript
'use strict';
var _extends = require('@babel/runtime/helpers/extends');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
var _inherits = require('@babel/runtime/helpers/inherits');
var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var ReactQuill = require('react-quill');
var BlotFormatter = require('quill-blot-formatter');
var components_ImageLibraryModal = require('./ImageLibraryModal.js');
var components_InsertFieldModal = require('./InsertFieldModal.js');
var components_CustomToolbar = require('./CustomToolbar.js');
var quillOverrides_IndentStyle = require('../quillOverrides/IndentStyle.js');
var quillOverrides_LinkFormat = require('../quillOverrides/LinkFormat.js');
var utils = require('../utils.js');
require('@elliemae/ds-imagelibrarymodal');
require('prop-types');
require('@elliemae/ds-modal');
require('lodash');
require('@elliemae/ds-shared/constants');
require('./customFields.js');
require('@babel/runtime/helpers/slicedToArray');
require('@elliemae/ds-basic/Button');
require('@elliemae/ds-icons/ArrowheadDown');
require('@elliemae/ds-dropdownmenu');
require('@elliemae/ds-basic/Tooltip');
require('../constants.js');
require('@babel/runtime/helpers/toConsumableArray');
require('./colors.js');
require('@babel/runtime/helpers/get');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ReactQuill__default = /*#__PURE__*/_interopDefaultLegacy(ReactQuill);
var BlotFormatter__default = /*#__PURE__*/_interopDefaultLegacy(BlotFormatter);
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) { _defineProperty__default['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 = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['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; } }
ReactQuill.Quill.register('modules/blotFormatter', BlotFormatter__default['default']); // Fix block styled formats ----------------
var AlignStyle = ReactQuill.Quill.import('attributors/style/align');
var FontStyle = ReactQuill.Quill.import('attributors/style/font');
FontStyle.whitelist = [// allow ONLY these fonts and the default
'serif', 'monospace', 'arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
var SizeStyle = ReactQuill.Quill.import('attributors/style/size');
SizeStyle.whitelist = [// allow ONLY these sizes and the default
'x-small', 'large', 'x-large']; // Fix Doc Viewer p tags extra margin issue ---------
var Block = ReactQuill.Quill.import('blots/block');
Block.tagName = 'p';
ReactQuill.Quill.register(Block);
ReactQuill.Quill.register(AlignStyle, true);
ReactQuill.Quill.register(quillOverrides_IndentStyle, true);
ReactQuill.Quill.register(FontStyle, true);
ReactQuill.Quill.register(SizeStyle, true); // -----------------------------------------
var DSWYSIWYGEditorImpl = /*#__PURE__*/function (_React$PureComponent) {
_inherits__default['default'](DSWYSIWYGEditorImpl, _React$PureComponent);
var _super = _createSuper(DSWYSIWYGEditorImpl);
function DSWYSIWYGEditorImpl(props) {
var _this;
_classCallCheck__default['default'](this, DSWYSIWYGEditorImpl);
_this = _super.call(this, props);
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "quillModules", _objectSpread({
toolbar: {
container: _this.props.toolbarContainer ? "#".concat(_this.props.toolbarContainer) : '#toolbar',
handlers: _objectSpread({}, _this.props.toolbarHandlers)
},
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false
},
blotFormatter: {// options... https://github.com/Fandom-OSS/quill-blot-formatter
}
}, _this.props.quillModules));
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onChangeQuill", function (html, delta, source, editor) {
var _this$props = _this.props,
showRawHTML = _this$props.showRawHTML,
onChange = _this$props.onChange;
if (!showRawHTML) onChange(html, delta, source, editor);
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onChangeTextArea", function (e) {
var _this$props2 = _this.props,
showRawHTML = _this$props2.showRawHTML,
onChange = _this$props2.onChange;
if (showRawHTML) onChange(e.target.value);
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onInserFieldConfirm", function (fieldCode) {
var editor = _this.getEditor();
var range = editor.getSelection(true);
editor.insertText(range.index, fieldCode);
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onImageConfirm", function (image) {
if (!image) {
return;
}
var editor = _this.getEditor();
var range = editor.getSelection(true);
editor.insertEmbed(range.index, 'image', image.url);
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onFieldModalClose", function () {
_this.setState({
isFieldModalOpen: false
});
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onImageModalClose", function () {
_this.setState({
isImageModalOpen: false
});
});
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "quillRef", function (ref) {
_this.quill = ref;
});
ReactQuill.Quill.register(quillOverrides_LinkFormat, true);
if (props.quillOverrides.length) {
props.quillOverrides.map(function (override) {
return ReactQuill.Quill.register(override, true);
});
}
_this.state = {
isImageModalOpen: false,
isFieldModalOpen: false
};
var toolbar = _this.quillModules.toolbar;
if (props.imagesData) {
toolbar.handlers.image = function (value) {
var _this$props3 = _this.props,
imagesData = _this$props3.imagesData,
handleImageClick = _this$props3.handleImageClick;
if (!imagesData.length) {
return;
}
_this.setState({
isImageModalOpen: !!value
});
handleImageClick(value);
};
}
if (props.customFields) {
toolbar.handlers.customFields = function (value) {
var _this$props4 = _this.props,
customFields = _this$props4.customFields,
handleCustomFieldClick = _this$props4.handleCustomFieldClick;
if (!customFields.length) {
return;
}
_this.setState({
isFieldModalOpen: !!value
});
handleCustomFieldClick(value);
};
}
return _this;
}
_createClass__default['default'](DSWYSIWYGEditorImpl, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.getQuillRef(this.quill);
} // eslint-disable-next-line max-params
}, {
key: "getEditor",
value: function getEditor() {
return this.quill.getEditor();
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
isFieldModalOpen = _this$state.isFieldModalOpen,
isImageModalOpen = _this$state.isImageModalOpen;
var _this$props5 = this.props,
_this$props5$containe = _this$props5.containerProps,
containerProps = _this$props5$containe === void 0 ? {} : _this$props5$containe,
customFields = _this$props5.customFields,
imagesData = _this$props5.imagesData,
customToolbar = _this$props5.customToolbar;
_this$props5.handleImageClick;
_this$props5.handleCustomFieldClick;
var height = _this$props5.height,
value = _this$props5.value,
showRawHTML = _this$props5.showRawHTML,
onShowHTML = _this$props5.onShowHTML;
_this$props5.onChange;
var hideItems = _this$props5.hideItems,
editorProps = _objectWithoutProperties__default['default'](_this$props5, ["containerProps", "customFields", "imagesData", "customToolbar", "handleImageClick", "handleCustomFieldClick", "height", "value", "showRawHTML", "onShowHTML", "onChange", "hideItems"]);
return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({}, containerProps, {
className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : '')
}), customToolbar || /*#__PURE__*/React__default['default'].createElement(components_CustomToolbar.CustomToolbar, {
customFields: customFields,
onShowHTML: onShowHTML,
hideItems: hideItems
}), /*#__PURE__*/React__default['default'].createElement(ReactQuill__default['default'], _extends__default['default']({
ref: this.quillRef,
bounds: ".quill-wysiwyg-editor",
modules: this.quillModules,
onChange: this.onChangeQuill,
value: value,
style: {
height: height,
overflow: 'scroll',
borderBottom: '1px solid #ccc'
}
}, editorProps, {
id: "wysiwyg-text-container"
})), /*#__PURE__*/React__default['default'].createElement("textarea", {
className: "raw-editor ql-container ql-snow ql-editor",
style: {
width: '100%',
resize: 'none',
height: height,
minHeight: '200px'
},
onChange: this.onChangeTextArea,
value: utils.formatHTML(value)
}), imagesData && imagesData.length && /*#__PURE__*/React__default['default'].createElement(components_ImageLibraryModal, {
imagesData: imagesData,
isOpen: isImageModalOpen,
onClose: this.onImageModalClose,
onConfirm: this.onImageConfirm
}), customFields && customFields.length && /*#__PURE__*/React__default['default'].createElement(components_InsertFieldModal, {
customFields: customFields,
isOpen: isFieldModalOpen,
onClose: this.onFieldModalClose,
onConfirm: this.onInserFieldConfirm
}));
}
}]);
return DSWYSIWYGEditorImpl;
}(React__default['default'].PureComponent);
module.exports = DSWYSIWYGEditorImpl;
//# sourceMappingURL=DSWYSIWYGEditorImpl.js.map