@elliemae/ds-wysiwygeditor 2.2.1 → 2.3.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/cjs/DSWYSIWYGEditor.js +83 -72
  2. package/cjs/DSWYSIWYGEditor.js.map +7 -0
  3. package/cjs/components/CustomImageUploader.js +92 -94
  4. package/cjs/components/CustomImageUploader.js.map +7 -0
  5. package/cjs/components/CustomToolbar.js +172 -193
  6. package/cjs/components/CustomToolbar.js.map +7 -0
  7. package/cjs/components/DSWYSIWYGEditorImpl.js +147 -185
  8. package/cjs/components/DSWYSIWYGEditorImpl.js.map +7 -0
  9. package/cjs/components/ImageLibraryModal.js +75 -55
  10. package/cjs/components/ImageLibraryModal.js.map +7 -0
  11. package/cjs/components/InsertFieldModal.js +109 -142
  12. package/cjs/components/InsertFieldModal.js.map +7 -0
  13. package/cjs/components/TippedButton.js +56 -54
  14. package/cjs/components/TippedButton.js.map +7 -0
  15. package/cjs/components/TippedSelect.js +50 -39
  16. package/cjs/components/TippedSelect.js.map +7 -0
  17. package/cjs/components/colors.js +41 -21
  18. package/cjs/components/colors.js.map +7 -0
  19. package/cjs/components/customFields.js +66 -47
  20. package/cjs/components/customFields.js.map +7 -0
  21. package/cjs/constants.js +112 -38
  22. package/cjs/constants.js.map +7 -0
  23. package/cjs/index.js +39 -21
  24. package/cjs/index.js.map +7 -0
  25. package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +37 -22
  26. package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
  27. package/cjs/quillOverrides/IndentStyle.js +41 -19
  28. package/cjs/quillOverrides/IndentStyle.js.map +7 -0
  29. package/cjs/quillOverrides/LinkFormat.js +57 -39
  30. package/cjs/quillOverrides/LinkFormat.js.map +7 -0
  31. package/cjs/quillOverrides/PlainClipboard.js +41 -21
  32. package/cjs/quillOverrides/PlainClipboard.js.map +7 -0
  33. package/cjs/utils.js +41 -18
  34. package/cjs/utils.js.map +7 -0
  35. package/esm/DSWYSIWYGEditor.js +50 -58
  36. package/esm/DSWYSIWYGEditor.js.map +7 -0
  37. package/esm/components/CustomImageUploader.js +60 -81
  38. package/esm/components/CustomImageUploader.js.map +7 -0
  39. package/esm/components/CustomToolbar.js +145 -184
  40. package/esm/components/CustomToolbar.js.map +7 -0
  41. package/esm/components/DSWYSIWYGEditorImpl.js +113 -169
  42. package/esm/components/DSWYSIWYGEditorImpl.js.map +7 -0
  43. package/esm/components/ImageLibraryModal.js +46 -47
  44. package/esm/components/ImageLibraryModal.js.map +7 -0
  45. package/esm/components/InsertFieldModal.js +72 -124
  46. package/esm/components/InsertFieldModal.js.map +7 -0
  47. package/esm/components/TippedButton.js +27 -44
  48. package/esm/components/TippedButton.js.map +7 -0
  49. package/esm/components/TippedSelect.js +21 -31
  50. package/esm/components/TippedSelect.js.map +7 -0
  51. package/esm/components/colors.js +12 -17
  52. package/esm/components/colors.js.map +7 -0
  53. package/esm/components/customFields.js +38 -40
  54. package/esm/components/customFields.js.map +7 -0
  55. package/esm/constants.js +83 -30
  56. package/esm/constants.js.map +7 -0
  57. package/esm/index.js +10 -4
  58. package/esm/index.js.map +7 -0
  59. package/esm/quillMatchers/clipboardLinkWithTagMatcher.js +8 -18
  60. package/esm/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
  61. package/esm/quillOverrides/IndentStyle.js +12 -17
  62. package/esm/quillOverrides/IndentStyle.js.map +7 -0
  63. package/esm/quillOverrides/LinkFormat.js +28 -37
  64. package/esm/quillOverrides/LinkFormat.js.map +7 -0
  65. package/esm/quillOverrides/PlainClipboard.js +12 -19
  66. package/esm/quillOverrides/PlainClipboard.js.map +7 -0
  67. package/esm/utils.js +12 -14
  68. package/esm/utils.js.map +7 -0
  69. package/package.json +9 -9
@@ -1,188 +1,132 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
9
- import 'core-js/modules/esnext.async-iterator.map.js';
10
- import 'core-js/modules/esnext.iterator.map.js';
11
- import React from 'react';
12
- import ReactQuill, { Quill } from 'react-quill';
13
- import BlotFormatter from 'quill-blot-formatter';
14
- import ImageLibraryModal from './ImageLibraryModal.js';
15
- import InsertFieldModal from './InsertFieldModal.js';
16
- import { CustomToolbar } from './CustomToolbar.js';
17
- import IndentStyle from '../quillOverrides/IndentStyle.js';
18
- import LinkFormat from '../quillOverrides/LinkFormat.js';
19
- import { formatHTML } from '../utils.js';
20
- import { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';
21
- import { jsxs, jsx } from 'react/jsx-runtime';
22
-
23
- const _excluded = ["containerProps", "customFields", "imagesData", "customToolbar", "handleImageClick", "handleCustomFieldClick", "height", "value", "showRawHTML", "onShowHTML", "onChange", "hideItems"];
24
-
25
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
26
-
27
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
28
- Quill.register('modules/blotFormatter', BlotFormatter); // Fix block styled formats ----------------
29
-
30
- const AlignStyle = Quill.import('attributors/style/align');
31
- const FontStyle = Quill.import('attributors/style/font');
32
- FontStyle.whitelist = [// allow ONLY these fonts and the default
33
- 'serif', 'monospace', 'arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
34
- const SizeStyle = Quill.import('attributors/style/size');
35
- SizeStyle.whitelist = [// allow ONLY these sizes and the default
36
- 'x-small', 'large', 'x-large']; // Fix Doc Viewer p tags extra margin issue ---------
37
-
38
- const Block = Quill.import('blots/block');
39
- Block.tagName = 'p';
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import ReactQuill, { Quill } from "react-quill";
4
+ import BlotFormatter from "quill-blot-formatter";
5
+ import ImageLibraryModal from "./ImageLibraryModal";
6
+ import InsertFieldModal from "./InsertFieldModal";
7
+ import { CustomToolbar } from "./CustomToolbar";
8
+ import IndentStyle from "../quillOverrides/IndentStyle";
9
+ import LinkFormat from "../quillOverrides/LinkFormat";
10
+ import { formatHTML } from "../utils";
11
+ import { clipboardLinkWithTagMatcher } from "../quillMatchers/clipboardLinkWithTagMatcher";
12
+ Quill.register("modules/blotFormatter", BlotFormatter);
13
+ const AlignStyle = Quill.import("attributors/style/align");
14
+ const FontStyle = Quill.import("attributors/style/font");
15
+ FontStyle.whitelist = [
16
+ "serif",
17
+ "monospace",
18
+ "arial",
19
+ "comic-sans",
20
+ "courier-new",
21
+ "georgia",
22
+ "helvetica",
23
+ "lucida"
24
+ ];
25
+ const SizeStyle = Quill.import("attributors/style/size");
26
+ SizeStyle.whitelist = [
27
+ "x-small",
28
+ "large",
29
+ "x-large"
30
+ ];
31
+ const Block = Quill.import("blots/block");
32
+ Block.tagName = "p";
40
33
  Quill.register(Block);
41
34
  Quill.register(AlignStyle, true);
42
35
  Quill.register(IndentStyle, true);
43
36
  Quill.register(FontStyle, true);
44
- Quill.register(SizeStyle, true); // -----------------------------------------
45
-
46
- class DSWYSIWYGEditorImpl extends React.PureComponent {
37
+ Quill.register(SizeStyle, true);
38
+ class DSWYSIWYGEditorImpl extends React2.PureComponent {
47
39
  constructor(props) {
48
40
  super(props);
49
- this.quillModules = _objectSpread({
41
+ this.quillModules = {
50
42
  toolbar: {
51
- container: this.props.toolbarContainer ? "#".concat(this.props.toolbarContainer) : '#toolbar',
52
- handlers: _objectSpread({}, this.props.toolbarHandlers)
43
+ container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
44
+ handlers: {
45
+ ...this.props.toolbarHandlers
46
+ }
53
47
  },
54
48
  clipboard: {
55
- // toggle to add extra line breaks when pasting HTML:
56
49
  matchVisual: false
57
50
  },
58
- blotFormatter: {// options... https://github.com/Fandom-OSS/quill-blot-formatter
59
- }
60
- }, this.props.quillModules);
61
-
51
+ blotFormatter: {},
52
+ ...this.props.quillModules
53
+ };
62
54
  this.onChangeQuill = (html, delta, source, editor) => {
63
- const {
64
- showRawHTML,
65
- onChange
66
- } = this.props;
67
- if (!showRawHTML) onChange(html, delta, source, editor);
55
+ const { showRawHTML, onChange } = this.props;
56
+ if (!showRawHTML)
57
+ onChange(html, delta, source, editor);
68
58
  };
69
-
70
- this.onChangeTextArea = e => {
71
- const {
72
- showRawHTML,
73
- onChange
74
- } = this.props;
75
- if (showRawHTML) onChange(e.target.value);
59
+ this.onChangeTextArea = (e) => {
60
+ const { showRawHTML, onChange } = this.props;
61
+ if (showRawHTML)
62
+ onChange(e.target.value);
76
63
  };
77
-
78
- this.onInserFieldConfirm = fieldCode => {
64
+ this.onInserFieldConfirm = (fieldCode) => {
79
65
  const editor = this.getEditor();
80
66
  const range = editor.getSelection(true);
81
67
  editor.insertText(range.index, fieldCode);
82
68
  };
83
-
84
- this.onImageConfirm = image => {
69
+ this.onImageConfirm = (image) => {
85
70
  if (!image) {
86
71
  return;
87
72
  }
88
-
89
73
  const editor = this.getEditor();
90
74
  const range = editor.getSelection(true);
91
- editor.insertEmbed(range.index, 'image', image.url);
75
+ editor.insertEmbed(range.index, "image", image.url);
92
76
  };
93
-
94
77
  this.onFieldModalClose = () => {
95
- this.setState({
96
- isFieldModalOpen: false
97
- });
78
+ this.setState({ isFieldModalOpen: false });
98
79
  };
99
-
100
80
  this.onImageModalClose = () => {
101
- this.setState({
102
- isImageModalOpen: false
103
- });
81
+ this.setState({ isImageModalOpen: false });
104
82
  };
105
-
106
- this.quillRef = ref => {
83
+ this.quillRef = (ref) => {
107
84
  this.quill = ref;
108
85
  };
109
-
110
86
  Quill.register(LinkFormat, true);
111
-
112
87
  if (props.quillOverrides.length) {
113
- props.quillOverrides.map(override => Quill.register(override, true));
88
+ props.quillOverrides.map((override) => Quill.register(override, true));
114
89
  }
115
-
116
90
  this.state = {
117
91
  isImageModalOpen: false,
118
92
  isFieldModalOpen: false
119
93
  };
120
- const {
121
- toolbar
122
- } = this.quillModules;
123
-
94
+ const { toolbar } = this.quillModules;
124
95
  if (props.imagesData) {
125
- toolbar.handlers.image = value => {
126
- const {
127
- imagesData,
128
- handleImageClick
129
- } = this.props;
130
-
96
+ toolbar.handlers.image = (value) => {
97
+ const { imagesData, handleImageClick } = this.props;
131
98
  if (!imagesData.length) {
132
99
  return;
133
100
  }
134
-
135
- this.setState({
136
- isImageModalOpen: !!value
137
- });
101
+ this.setState({ isImageModalOpen: !!value });
138
102
  handleImageClick(value);
139
103
  };
140
104
  }
141
-
142
105
  if (props.customFields) {
143
- toolbar.handlers.customFields = value => {
144
- const {
145
- customFields,
146
- handleCustomFieldClick
147
- } = this.props;
148
-
106
+ toolbar.handlers.customFields = (value) => {
107
+ const { customFields, handleCustomFieldClick } = this.props;
149
108
  if (!customFields.length) {
150
109
  return;
151
110
  }
152
-
153
- this.setState({
154
- isFieldModalOpen: !!value
155
- });
111
+ this.setState({ isFieldModalOpen: !!value });
156
112
  handleCustomFieldClick(value);
157
113
  };
158
114
  }
159
115
  }
160
-
161
116
  componentDidMount() {
162
- // this.quill doesn't exist untill the full call-stack execute
163
- // we need to "setTimeout" so this componentDidMount work as expected
164
117
  setTimeout(() => {
165
118
  const quillDomRef = this.quill;
166
119
  const editor = quillDomRef.getEditor();
167
- this.props.getQuillRef(quillDomRef); // https://github.com/quilljs/quill/issues/2677
168
-
169
- editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);
120
+ this.props.getQuillRef(quillDomRef);
121
+ editor.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
170
122
  });
171
- } // eslint-disable-next-line max-params
172
-
173
-
123
+ }
174
124
  getEditor() {
175
125
  return this.quill.getEditor();
176
126
  }
177
-
178
127
  render() {
128
+ const { isFieldModalOpen, isImageModalOpen } = this.state;
179
129
  const {
180
- isFieldModalOpen,
181
- isImageModalOpen
182
- } = this.state;
183
-
184
- const _this$props = this.props,
185
- {
186
130
  containerProps = {},
187
131
  customFields,
188
132
  imagesData,
@@ -194,52 +138,52 @@ class DSWYSIWYGEditorImpl extends React.PureComponent {
194
138
  showRawHTML,
195
139
  onShowHTML,
196
140
  onChange,
197
- hideItems
198
- } = _this$props,
199
- editorProps = _objectWithoutProperties(_this$props, _excluded);
200
-
201
- return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
202
- className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : ''),
203
- children: [customToolbar || /*#__PURE__*/_jsx(CustomToolbar, {
204
- customFields: customFields,
205
- onShowHTML: onShowHTML,
206
- hideItems: hideItems,
207
- userProps: this.props
208
- }), /*#__PURE__*/jsx(ReactQuill, _objectSpread(_objectSpread({
209
- ref: this.quillRef,
210
- modules: this.quillModules,
211
- onChange: this.onChangeQuill,
212
- value: value,
213
- style: {
214
- height,
215
- borderBottom: '1px solid #ccc'
216
- }
217
- }, editorProps), {}, {
218
- id: "wysiwyg-text-container"
219
- })), /*#__PURE__*/_jsx("textarea", {
220
- className: "raw-editor ql-container ql-snow ql-editor",
221
- style: {
222
- width: '100%',
223
- resize: 'none',
224
- height,
225
- minHeight: '200px'
226
- },
227
- onChange: this.onChangeTextArea,
228
- value: formatHTML(value)
229
- }), imagesData && imagesData.length && /*#__PURE__*/_jsx(ImageLibraryModal, {
230
- imagesData: imagesData,
231
- isOpen: isImageModalOpen,
232
- onClose: this.onImageModalClose,
233
- onConfirm: this.onImageConfirm
234
- }), customFields && customFields.length && /*#__PURE__*/_jsx(InsertFieldModal, {
235
- customFields: customFields,
236
- isOpen: isFieldModalOpen,
237
- onClose: this.onFieldModalClose,
238
- onConfirm: this.onInserFieldConfirm
239
- })]
141
+ hideItems,
142
+ ...editorProps
143
+ } = this.props;
144
+ return /* @__PURE__ */ React2.createElement("div", {
145
+ ...containerProps,
146
+ className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`
147
+ }, customToolbar || /* @__PURE__ */ React2.createElement(CustomToolbar, {
148
+ customFields,
149
+ onShowHTML,
150
+ hideItems,
151
+ userProps: this.props
152
+ }), /* @__PURE__ */ React2.createElement(ReactQuill, {
153
+ ref: this.quillRef,
154
+ modules: this.quillModules,
155
+ onChange: this.onChangeQuill,
156
+ value,
157
+ style: {
158
+ height,
159
+ borderBottom: "1px solid #ccc"
160
+ },
161
+ ...editorProps,
162
+ id: "wysiwyg-text-container"
163
+ }), /* @__PURE__ */ React2.createElement("textarea", {
164
+ className: "raw-editor ql-container ql-snow ql-editor",
165
+ style: {
166
+ width: "100%",
167
+ resize: "none",
168
+ height,
169
+ minHeight: "200px"
170
+ },
171
+ onChange: this.onChangeTextArea,
172
+ value: formatHTML(value)
173
+ }), imagesData && imagesData.length && /* @__PURE__ */ React2.createElement(ImageLibraryModal, {
174
+ imagesData,
175
+ isOpen: isImageModalOpen,
176
+ onClose: this.onImageModalClose,
177
+ onConfirm: this.onImageConfirm
178
+ }), customFields && customFields.length && /* @__PURE__ */ React2.createElement(InsertFieldModal, {
179
+ customFields,
180
+ isOpen: isFieldModalOpen,
181
+ onClose: this.onFieldModalClose,
182
+ onConfirm: this.onInserFieldConfirm
240
183
  }));
241
184
  }
242
-
243
185
  }
244
-
245
- export { DSWYSIWYGEditorImpl as default };
186
+ export {
187
+ DSWYSIWYGEditorImpl as default
188
+ };
189
+ //# sourceMappingURL=DSWYSIWYGEditorImpl.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSWYSIWYGEditorImpl.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill, { Quill } from 'react-quill';\nimport BlotFormatter from 'quill-blot-formatter';\n\nimport ImageLibraryModal from './ImageLibraryModal';\nimport InsertFieldModal from './InsertFieldModal';\nimport { CustomToolbar } from './CustomToolbar';\nimport IndentStyle from '../quillOverrides/IndentStyle';\nimport LinkFormat from '../quillOverrides/LinkFormat';\nimport { formatHTML } from '../utils';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher';\n\nQuill.register('modules/blotFormatter', BlotFormatter);\n\n// Fix block styled formats ----------------\nconst AlignStyle = Quill.import('attributors/style/align');\nconst FontStyle = Quill.import('attributors/style/font');\nFontStyle.whitelist = [\n // allow ONLY these fonts and the default\n 'serif',\n 'monospace',\n 'arial',\n 'comic-sans',\n 'courier-new',\n 'georgia',\n 'helvetica',\n 'lucida',\n];\nconst SizeStyle = Quill.import('attributors/style/size');\nSizeStyle.whitelist = [\n // allow ONLY these sizes and the default\n 'x-small',\n 'large',\n 'x-large',\n];\n\n// Fix Doc Viewer p tags extra margin issue ---------\nconst Block = Quill.import('blots/block');\nBlock.tagName = 'p';\nQuill.register(Block);\n\nQuill.register(AlignStyle, true);\nQuill.register(IndentStyle, true);\nQuill.register(FontStyle, true);\nQuill.register(SizeStyle, true);\n// -----------------------------------------\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n quillModules = {\n toolbar: {\n container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : '#toolbar',\n handlers: {\n ...this.props.toolbarHandlers,\n },\n },\n clipboard: {\n // toggle to add extra line breaks when pasting HTML:\n matchVisual: false,\n },\n blotFormatter: {\n // options... https://github.com/Fandom-OSS/quill-blot-formatter\n },\n ...this.props.quillModules,\n };\n\n constructor(props) {\n super(props);\n Quill.register(LinkFormat, true);\n if (props.quillOverrides.length) {\n props.quillOverrides.map((override) => Quill.register(override, true));\n }\n this.state = {\n isImageModalOpen: false,\n isFieldModalOpen: false,\n };\n const { toolbar } = this.quillModules;\n if (props.imagesData) {\n toolbar.handlers.image = (value) => {\n const { imagesData, handleImageClick } = this.props;\n if (!imagesData.length) {\n return;\n }\n this.setState({ isImageModalOpen: !!value });\n handleImageClick(value);\n };\n }\n if (props.customFields) {\n toolbar.handlers.customFields = (value) => {\n const { customFields, handleCustomFieldClick } = this.props;\n if (!customFields.length) {\n return;\n }\n this.setState({ isFieldModalOpen: !!value });\n handleCustomFieldClick(value);\n };\n }\n }\n\n componentDidMount() {\n // this.quill doesn't exist untill the full call-stack execute\n // we need to \"setTimeout\" so this componentDidMount work as expected\n setTimeout(() => {\n const quillDomRef = this.quill;\n const editor = quillDomRef.getEditor();\n this.props.getQuillRef(quillDomRef);\n // https://github.com/quilljs/quill/issues/2677\n editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n });\n }\n\n // eslint-disable-next-line max-params\n onChangeQuill = (html, delta, source, editor) => {\n const { showRawHTML, onChange } = this.props;\n if (!showRawHTML) onChange(html, delta, source, editor);\n };\n\n onChangeTextArea = (e) => {\n const { showRawHTML, onChange } = this.props;\n if (showRawHTML) onChange(e.target.value);\n };\n\n onInserFieldConfirm = (fieldCode) => {\n const editor = this.getEditor();\n const range = editor.getSelection(true);\n editor.insertText(range.index, fieldCode);\n };\n\n onImageConfirm = (image) => {\n if (!image) {\n return;\n }\n const editor = this.getEditor();\n const range = editor.getSelection(true);\n editor.insertEmbed(range.index, 'image', image.url);\n };\n\n onFieldModalClose = () => {\n this.setState({ isFieldModalOpen: false });\n };\n\n onImageModalClose = () => {\n this.setState({ isImageModalOpen: false });\n };\n\n getEditor() {\n return this.quill.getEditor();\n }\n\n quillRef = (ref) => {\n this.quill = ref;\n };\n\n render() {\n const { isFieldModalOpen, isImageModalOpen } = this.state;\n const {\n containerProps = {},\n customFields,\n imagesData,\n customToolbar,\n handleImageClick,\n handleCustomFieldClick,\n height,\n value,\n showRawHTML,\n onShowHTML,\n onChange,\n hideItems,\n ...editorProps\n } = this.props;\n\n return (\n <div\n // data-testid=\"wysiwyg-text-container\"\n {...containerProps}\n className={`quill-wysiwyg-editor ${showRawHTML ? 'show-raw' : ''}`}\n >\n {customToolbar || (\n <CustomToolbar\n customFields={customFields}\n onShowHTML={onShowHTML}\n hideItems={hideItems}\n userProps={this.props}\n />\n )}\n <ReactQuill\n ref={this.quillRef}\n modules={this.quillModules}\n onChange={this.onChangeQuill}\n value={value}\n style={{\n height,\n borderBottom: '1px solid #ccc',\n }}\n {...editorProps}\n id=\"wysiwyg-text-container\"\n />\n <textarea\n className=\"raw-editor ql-container ql-snow ql-editor\"\n style={{\n width: '100%',\n resize: 'none',\n height,\n minHeight: '200px',\n }}\n onChange={this.onChangeTextArea}\n value={formatHTML(value)}\n />\n {imagesData && imagesData.length && (\n <ImageLibraryModal\n imagesData={imagesData}\n isOpen={isImageModalOpen}\n onClose={this.onImageModalClose}\n onConfirm={this.onImageConfirm}\n />\n )}\n {customFields && customFields.length && (\n <InsertFieldModal\n customFields={customFields}\n isOpen={isFieldModalOpen}\n onClose={this.onFieldModalClose}\n onConfirm={this.onInserFieldConfirm}\n />\n )}\n </div>\n );\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,64 +1,63 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import React from 'react';
8
- import DSImageLibraryModal from '@elliemae/ds-imagelibrarymodal';
9
- import { jsx } from 'react/jsx-runtime';
10
-
11
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
-
13
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
14
- class ImageLibraryModal extends React.PureComponent {
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import DSImageLibraryModal from "@elliemae/ds-imagelibrarymodal";
4
+ import PropTypes from "prop-types";
5
+ class ImageLibraryModal extends React2.PureComponent {
15
6
  constructor(props) {
16
7
  super(props);
17
-
18
- this.onSelect = selectedImage => {
19
- this.setState({
20
- selectedImage
21
- });
8
+ this.onSelect = (selectedImage) => {
9
+ this.setState({ selectedImage });
22
10
  };
23
-
24
11
  this.onConfirm = () => {
25
- const {
26
- selectedImage
27
- } = this.state;
28
- const {
29
- onConfirm,
30
- onClose
31
- } = this.props;
12
+ const { selectedImage } = this.state;
13
+ const { onConfirm, onClose } = this.props;
32
14
  onConfirm(selectedImage);
33
15
  onClose();
34
16
  };
35
-
36
17
  this.state = {
37
- selectedImage: undefined
18
+ selectedImage: void 0
38
19
  };
39
20
  }
40
-
41
21
  render() {
42
- return /*#__PURE__*/jsx(DSImageLibraryModal, _objectSpread(_objectSpread({}, this.props), {}, {
22
+ return /* @__PURE__ */ React2.createElement(DSImageLibraryModal, {
23
+ ...this.props,
43
24
  onConfirm: this.onConfirm,
44
25
  onSelect: this.onSelect
45
- }));
26
+ });
46
27
  }
47
-
48
28
  }
29
+ ImageLibraryModal.propTypes = {
30
+ onConfirm: PropTypes.func.isRequired,
31
+ onClose: PropTypes.func.isRequired,
32
+ onReject: PropTypes.func,
33
+ imagesData: PropTypes.arrayOf(PropTypes.shape({
34
+ id: PropTypes.string,
35
+ url: PropTypes.string.isRequired,
36
+ name: PropTypes.string.isRequired,
37
+ description: PropTypes.string,
38
+ createdBy: PropTypes.string.isRequired,
39
+ createdDate: PropTypes.string.isRequired
40
+ })),
41
+ isOpen: PropTypes.bool.isRequired
42
+ };
49
43
  ImageLibraryModal.defaultProps = {
50
- onReject: undefined,
51
- imagesData: [{
52
- url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
53
- name: 'no image',
54
- createdBy: 'user:John Doe',
55
- createdDate: '0000-01-01 00:00 AM UTC'
56
- }, {
57
- url: 'https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e',
58
- name: 'no image 2',
59
- createdBy: 'user:Jane Doe',
60
- createdDate: '0000-01-01 00:00 AM UTC'
61
- }]
44
+ onReject: void 0,
45
+ imagesData: [
46
+ {
47
+ url: "https://www.freeiconspng.com/minicovers/no-image-icon-6.png",
48
+ name: "no image",
49
+ createdBy: "user:John Doe",
50
+ createdDate: "0000-01-01 00:00 AM UTC"
51
+ },
52
+ {
53
+ url: "https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e",
54
+ name: "no image 2",
55
+ createdBy: "user:Jane Doe",
56
+ createdDate: "0000-01-01 00:00 AM UTC"
57
+ }
58
+ ]
59
+ };
60
+ export {
61
+ ImageLibraryModal as default
62
62
  };
63
-
64
- export { ImageLibraryModal as default };
63
+ //# sourceMappingURL=ImageLibraryModal.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/ImageLibraryModal.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSImageLibraryModal from '@elliemae/ds-imagelibrarymodal';\nimport PropTypes from 'prop-types';\n\nexport default class ImageLibraryModal extends React.PureComponent {\n static propTypes = {\n onConfirm: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired,\n onReject: PropTypes.func,\n imagesData: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n description: PropTypes.string,\n createdBy: PropTypes.string.isRequired,\n createdDate: PropTypes.string.isRequired,\n }),\n ),\n isOpen: PropTypes.bool.isRequired,\n };\n\n static defaultProps = {\n onReject: undefined,\n imagesData: [\n {\n url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',\n name: 'no image',\n createdBy: 'user:John Doe',\n createdDate: '0000-01-01 00:00 AM UTC',\n },\n {\n url:\n 'https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e',\n name: 'no image 2',\n createdBy: 'user:Jane Doe',\n createdDate: '0000-01-01 00:00 AM UTC',\n },\n ],\n };\n\n constructor(props) {\n super(props);\n this.state = {\n selectedImage: undefined,\n };\n }\n\n onSelect = selectedImage => {\n this.setState({ selectedImage });\n };\n\n onConfirm = () => {\n const { selectedImage } = this.state;\n const { onConfirm, onClose } = this.props;\n onConfirm(selectedImage);\n onClose();\n };\n\n render() {\n return (\n <DSImageLibraryModal\n {...this.props}\n onConfirm={this.onConfirm}\n onSelect={this.onSelect}\n />\n );\n }\n}\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AAEA,gCAA+C,OAAM,cAAc;AAAA,EAqCjE,YAAY,OAAO;AACjB,UAAM;AAMR,oBAAW,mBAAiB;AAC1B,WAAK,SAAS,EAAE;AAAA;AAGlB,qBAAY,MAAM;AAChB,YAAM,EAAE,kBAAkB,KAAK;AAC/B,YAAM,EAAE,WAAW,YAAY,KAAK;AACpC,gBAAU;AACV;AAAA;AAbA,SAAK,QAAQ;AAAA,MACX,eAAe;AAAA;AAAA;AAAA,EAenB,SAAS;AACP,WACE,qCAAC,qBAAD;AAAA,SACM,KAAK;AAAA,MACT,WAAW,KAAK;AAAA,MAChB,UAAU,KAAK;AAAA;AAAA;AAAA;AA3Dd,AADT,kBACS,YAAY;AAAA,EACjB,WAAW,UAAU,KAAK;AAAA,EAC1B,SAAS,UAAU,KAAK;AAAA,EACxB,UAAU,UAAU;AAAA,EACpB,YAAY,UAAU,QACpB,UAAU,MAAM;AAAA,IACd,IAAI,UAAU;AAAA,IACd,KAAK,UAAU,OAAO;AAAA,IACtB,MAAM,UAAU,OAAO;AAAA,IACvB,aAAa,UAAU;AAAA,IACvB,WAAW,UAAU,OAAO;AAAA,IAC5B,aAAa,UAAU,OAAO;AAAA;AAAA,EAGlC,QAAQ,UAAU,KAAK;AAAA;AAGlB,AAlBT,kBAkBS,eAAe;AAAA,EACpB,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA;AAAA,IAEf;AAAA,MACE,KACE;AAAA,MACF,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }