@elliemae/ds-wysiwygeditor 2.2.0 → 2.3.0-alpha.3
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.
- package/cjs/DSWYSIWYGEditor.js +83 -72
- package/cjs/DSWYSIWYGEditor.js.map +7 -0
- package/cjs/components/CustomImageUploader.js +92 -94
- package/cjs/components/CustomImageUploader.js.map +7 -0
- package/cjs/components/CustomToolbar.js +172 -193
- package/cjs/components/CustomToolbar.js.map +7 -0
- package/cjs/components/DSWYSIWYGEditorImpl.js +147 -185
- package/cjs/components/DSWYSIWYGEditorImpl.js.map +7 -0
- package/cjs/components/ImageLibraryModal.js +75 -55
- package/cjs/components/ImageLibraryModal.js.map +7 -0
- package/cjs/components/InsertFieldModal.js +109 -142
- package/cjs/components/InsertFieldModal.js.map +7 -0
- package/cjs/components/TippedButton.js +56 -54
- package/cjs/components/TippedButton.js.map +7 -0
- package/cjs/components/TippedSelect.js +50 -39
- package/cjs/components/TippedSelect.js.map +7 -0
- package/cjs/components/colors.js +41 -21
- package/cjs/components/colors.js.map +7 -0
- package/cjs/components/customFields.js +66 -47
- package/cjs/components/customFields.js.map +7 -0
- package/cjs/constants.js +112 -38
- package/cjs/constants.js.map +7 -0
- package/cjs/index.js +39 -21
- package/cjs/index.js.map +7 -0
- package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +37 -22
- package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
- package/cjs/quillOverrides/IndentStyle.js +41 -19
- package/cjs/quillOverrides/IndentStyle.js.map +7 -0
- package/cjs/quillOverrides/LinkFormat.js +57 -39
- package/cjs/quillOverrides/LinkFormat.js.map +7 -0
- package/cjs/quillOverrides/PlainClipboard.js +41 -21
- package/cjs/quillOverrides/PlainClipboard.js.map +7 -0
- package/cjs/utils.js +41 -18
- package/cjs/utils.js.map +7 -0
- package/esm/DSWYSIWYGEditor.js +50 -58
- package/esm/DSWYSIWYGEditor.js.map +7 -0
- package/esm/components/CustomImageUploader.js +60 -81
- package/esm/components/CustomImageUploader.js.map +7 -0
- package/esm/components/CustomToolbar.js +145 -184
- package/esm/components/CustomToolbar.js.map +7 -0
- package/esm/components/DSWYSIWYGEditorImpl.js +113 -169
- package/esm/components/DSWYSIWYGEditorImpl.js.map +7 -0
- package/esm/components/ImageLibraryModal.js +46 -47
- package/esm/components/ImageLibraryModal.js.map +7 -0
- package/esm/components/InsertFieldModal.js +72 -124
- package/esm/components/InsertFieldModal.js.map +7 -0
- package/esm/components/TippedButton.js +27 -44
- package/esm/components/TippedButton.js.map +7 -0
- package/esm/components/TippedSelect.js +21 -31
- package/esm/components/TippedSelect.js.map +7 -0
- package/esm/components/colors.js +12 -17
- package/esm/components/colors.js.map +7 -0
- package/esm/components/customFields.js +38 -40
- package/esm/components/customFields.js.map +7 -0
- package/esm/constants.js +83 -30
- package/esm/constants.js.map +7 -0
- package/esm/index.js +10 -4
- package/esm/index.js.map +7 -0
- package/esm/quillMatchers/clipboardLinkWithTagMatcher.js +8 -18
- package/esm/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
- package/esm/quillOverrides/IndentStyle.js +12 -17
- package/esm/quillOverrides/IndentStyle.js.map +7 -0
- package/esm/quillOverrides/LinkFormat.js +28 -37
- package/esm/quillOverrides/LinkFormat.js.map +7 -0
- package/esm/quillOverrides/PlainClipboard.js +12 -19
- package/esm/quillOverrides/PlainClipboard.js.map +7 -0
- package/esm/utils.js +12 -14
- package/esm/utils.js.map +7 -0
- package/package.json +9 -9
|
@@ -1,188 +1,132 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
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 =
|
|
41
|
+
this.quillModules = {
|
|
50
42
|
toolbar: {
|
|
51
|
-
container: this.props.toolbarContainer ?
|
|
52
|
-
handlers:
|
|
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: {
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
51
|
+
blotFormatter: {},
|
|
52
|
+
...this.props.quillModules
|
|
53
|
+
};
|
|
62
54
|
this.onChangeQuill = (html, delta, source, editor) => {
|
|
63
|
-
const {
|
|
64
|
-
|
|
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
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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,
|
|
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);
|
|
168
|
-
|
|
169
|
-
editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);
|
|
120
|
+
this.props.getQuillRef(quillDomRef);
|
|
121
|
+
editor.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
|
|
170
122
|
});
|
|
171
|
-
}
|
|
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
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
className:
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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
|
-
|
|
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
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
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
|
-
|
|
19
|
-
this.setState({
|
|
20
|
-
selectedImage
|
|
21
|
-
});
|
|
8
|
+
this.onSelect = (selectedImage) => {
|
|
9
|
+
this.setState({ selectedImage });
|
|
22
10
|
};
|
|
23
|
-
|
|
24
11
|
this.onConfirm = () => {
|
|
25
|
-
const {
|
|
26
|
-
|
|
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:
|
|
18
|
+
selectedImage: void 0
|
|
38
19
|
};
|
|
39
20
|
}
|
|
40
|
-
|
|
41
21
|
render() {
|
|
42
|
-
return
|
|
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:
|
|
51
|
-
imagesData: [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
+
}
|