@elliemae/ds-wysiwygeditor
Version:
Ellie Mae - Dim Sum - WYSIWYG Editor
268 lines (227 loc) • 11 kB
JavaScript
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
import BlotFormatter from 'quill-blot-formatter';
import ImageLibraryModal from './ImageLibraryModal.js';
import InsertFieldModal from './InsertFieldModal.js';
import { CustomToolbar } from './CustomToolbar.js';
import IndentStyle from '../quillOverrides/IndentStyle.js';
import LinkFormat from '../quillOverrides/LinkFormat.js';
import { formatHTML } from '../utils.js';
import '@elliemae/ds-imagelibrarymodal';
import 'prop-types';
import '@elliemae/ds-modal';
import 'lodash';
import '@elliemae/ds-shared/constants';
import './customFields.js';
import '@babel/runtime/helpers/esm/slicedToArray';
import '@elliemae/ds-basic/Button';
import '@elliemae/ds-icons/ArrowheadDown';
import '@elliemae/ds-dropdownmenu';
import '@elliemae/ds-basic/Tooltip';
import '../constants.js';
import '@babel/runtime/helpers/esm/toConsumableArray';
import './colors.js';
import '@babel/runtime/helpers/esm/get';
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(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(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
Quill.register('modules/blotFormatter', BlotFormatter); // Fix block styled formats ----------------
var AlignStyle = Quill.import('attributors/style/align');
var FontStyle = 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 = 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 = Quill.import('blots/block');
Block.tagName = 'p';
Quill.register(Block);
Quill.register(AlignStyle, true);
Quill.register(IndentStyle, true);
Quill.register(FontStyle, true);
Quill.register(SizeStyle, true); // -----------------------------------------
var DSWYSIWYGEditorImpl = /*#__PURE__*/function (_React$PureComponent) {
_inherits(DSWYSIWYGEditorImpl, _React$PureComponent);
var _super = _createSuper(DSWYSIWYGEditorImpl);
function DSWYSIWYGEditorImpl(props) {
var _this;
_classCallCheck(this, DSWYSIWYGEditorImpl);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_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(_assertThisInitialized(_this), "onChangeTextArea", function (e) {
var _this$props2 = _this.props,
showRawHTML = _this$props2.showRawHTML,
onChange = _this$props2.onChange;
if (showRawHTML) onChange(e.target.value);
});
_defineProperty(_assertThisInitialized(_this), "onInserFieldConfirm", function (fieldCode) {
var editor = _this.getEditor();
var range = editor.getSelection(true);
editor.insertText(range.index, fieldCode);
});
_defineProperty(_assertThisInitialized(_this), "onImageConfirm", function (image) {
if (!image) {
return;
}
var editor = _this.getEditor();
var range = editor.getSelection(true);
editor.insertEmbed(range.index, 'image', image.url);
});
_defineProperty(_assertThisInitialized(_this), "onFieldModalClose", function () {
_this.setState({
isFieldModalOpen: false
});
});
_defineProperty(_assertThisInitialized(_this), "onImageModalClose", function () {
_this.setState({
isImageModalOpen: false
});
});
_defineProperty(_assertThisInitialized(_this), "quillRef", function (ref) {
_this.quill = ref;
});
Quill.register(LinkFormat, true);
if (props.quillOverrides.length) {
props.quillOverrides.map(function (override) {
return 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(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(_this$props5, ["containerProps", "customFields", "imagesData", "customToolbar", "handleImageClick", "handleCustomFieldClick", "height", "value", "showRawHTML", "onShowHTML", "onChange", "hideItems"]);
return /*#__PURE__*/React.createElement("div", _extends({}, containerProps, {
className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : '')
}), customToolbar || /*#__PURE__*/React.createElement(CustomToolbar, {
customFields: customFields,
onShowHTML: onShowHTML,
hideItems: hideItems
}), /*#__PURE__*/React.createElement(ReactQuill, _extends({
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.createElement("textarea", {
className: "raw-editor ql-container ql-snow ql-editor",
style: {
width: '100%',
resize: 'none',
height: height,
minHeight: '200px'
},
onChange: this.onChangeTextArea,
value: formatHTML(value)
}), imagesData && imagesData.length && /*#__PURE__*/React.createElement(ImageLibraryModal, {
imagesData: imagesData,
isOpen: isImageModalOpen,
onClose: this.onImageModalClose,
onConfirm: this.onImageConfirm
}), customFields && customFields.length && /*#__PURE__*/React.createElement(InsertFieldModal, {
customFields: customFields,
isOpen: isFieldModalOpen,
onClose: this.onFieldModalClose,
onConfirm: this.onInserFieldConfirm
}));
}
}]);
return DSWYSIWYGEditorImpl;
}(React.PureComponent);
export default DSWYSIWYGEditorImpl;
//# sourceMappingURL=DSWYSIWYGEditorImpl.js.map