@elliemae/ds-wysiwygeditor 2.3.1 → 3.0.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.
Files changed (120) hide show
  1. package/dist/cjs/DSWYSIWYGEditor.js +128 -0
  2. package/dist/cjs/DSWYSIWYGEditor.js.map +7 -0
  3. package/dist/cjs/components/CustomImageUploader.js +123 -0
  4. package/dist/cjs/components/CustomImageUploader.js.map +7 -0
  5. package/dist/cjs/components/CustomToolbar.js +261 -0
  6. package/dist/cjs/components/CustomToolbar.js.map +7 -0
  7. package/dist/cjs/components/DSWYSIWYGEditorImpl.js +255 -0
  8. package/dist/cjs/components/DSWYSIWYGEditorImpl.js.map +7 -0
  9. package/dist/cjs/components/ImageLibraryModal.js +108 -0
  10. package/dist/cjs/components/ImageLibraryModal.js.map +7 -0
  11. package/dist/cjs/components/InsertFieldModal.js +212 -0
  12. package/dist/cjs/components/InsertFieldModal.js.map +7 -0
  13. package/dist/cjs/components/TippedButton.js +91 -0
  14. package/dist/cjs/components/TippedButton.js.map +7 -0
  15. package/dist/cjs/components/TippedSelect.js +57 -0
  16. package/dist/cjs/components/TippedSelect.js.map +7 -0
  17. package/dist/cjs/components/colors.js +50 -0
  18. package/dist/cjs/components/colors.js.map +7 -0
  19. package/dist/cjs/components/customFields.js +76 -0
  20. package/dist/cjs/components/customFields.js.map +7 -0
  21. package/dist/cjs/constants.js +114 -0
  22. package/dist/cjs/constants.js.map +7 -0
  23. package/dist/cjs/index.js +39 -0
  24. package/dist/cjs/index.js.map +7 -0
  25. package/dist/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +48 -0
  26. package/dist/cjs/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
  27. package/dist/cjs/quillOverrides/IndentStyle.js +51 -0
  28. package/dist/cjs/quillOverrides/IndentStyle.js.map +7 -0
  29. package/dist/cjs/quillOverrides/LinkFormat.js +86 -0
  30. package/dist/cjs/quillOverrides/LinkFormat.js.map +7 -0
  31. package/dist/cjs/quillOverrides/PlainClipboard.js +47 -0
  32. package/dist/cjs/quillOverrides/PlainClipboard.js.map +7 -0
  33. package/dist/cjs/utils.js +50 -0
  34. package/dist/cjs/utils.js.map +7 -0
  35. package/dist/esm/DSWYSIWYGEditor.js +101 -0
  36. package/dist/esm/DSWYSIWYGEditor.js.map +7 -0
  37. package/dist/esm/components/CustomImageUploader.js +94 -0
  38. package/dist/esm/components/CustomImageUploader.js.map +7 -0
  39. package/dist/esm/components/CustomToolbar.js +232 -0
  40. package/dist/esm/components/CustomToolbar.js.map +7 -0
  41. package/dist/esm/components/DSWYSIWYGEditorImpl.js +228 -0
  42. package/dist/esm/components/DSWYSIWYGEditorImpl.js.map +7 -0
  43. package/dist/esm/components/ImageLibraryModal.js +81 -0
  44. package/dist/esm/components/ImageLibraryModal.js.map +7 -0
  45. package/dist/esm/components/InsertFieldModal.js +185 -0
  46. package/dist/esm/components/InsertFieldModal.js.map +7 -0
  47. package/dist/esm/components/TippedButton.js +64 -0
  48. package/dist/esm/components/TippedButton.js.map +7 -0
  49. package/dist/esm/components/TippedSelect.js +28 -0
  50. package/dist/esm/components/TippedSelect.js.map +7 -0
  51. package/dist/esm/components/colors.js +21 -0
  52. package/dist/esm/components/colors.js.map +7 -0
  53. package/dist/esm/components/customFields.js +47 -0
  54. package/dist/esm/components/customFields.js.map +7 -0
  55. package/dist/esm/constants.js +85 -0
  56. package/dist/esm/constants.js.map +7 -0
  57. package/dist/esm/index.js +10 -0
  58. package/dist/esm/index.js.map +7 -0
  59. package/dist/esm/quillMatchers/clipboardLinkWithTagMatcher.js +19 -0
  60. package/dist/esm/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
  61. package/dist/esm/quillOverrides/IndentStyle.js +22 -0
  62. package/dist/esm/quillOverrides/IndentStyle.js.map +7 -0
  63. package/dist/esm/quillOverrides/LinkFormat.js +57 -0
  64. package/dist/esm/quillOverrides/LinkFormat.js.map +7 -0
  65. package/dist/esm/quillOverrides/PlainClipboard.js +18 -0
  66. package/dist/esm/quillOverrides/PlainClipboard.js.map +7 -0
  67. package/dist/esm/utils.js +21 -0
  68. package/dist/esm/utils.js.map +7 -0
  69. package/package.json +64 -55
  70. package/cjs/DSWYSIWYGEditor.js +0 -82
  71. package/cjs/components/CustomImageUploader.js +0 -125
  72. package/cjs/components/CustomToolbar.js +0 -282
  73. package/cjs/components/DSWYSIWYGEditorImpl.js +0 -256
  74. package/cjs/components/ImageLibraryModal.js +0 -72
  75. package/cjs/components/InsertFieldModal.js +0 -218
  76. package/cjs/components/TippedButton.js +0 -56
  77. package/cjs/components/TippedSelect.js +0 -46
  78. package/cjs/components/colors.js +0 -30
  79. package/cjs/components/customFields.js +0 -57
  80. package/cjs/constants.js +0 -40
  81. package/cjs/index.js +0 -21
  82. package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +0 -33
  83. package/cjs/quillOverrides/IndentStyle.js +0 -29
  84. package/cjs/quillOverrides/LinkFormat.js +0 -68
  85. package/cjs/quillOverrides/PlainClipboard.js +0 -27
  86. package/cjs/utils.js +0 -27
  87. package/esm/DSWYSIWYGEditor.js +0 -72
  88. package/esm/components/CustomImageUploader.js +0 -115
  89. package/esm/components/CustomToolbar.js +0 -271
  90. package/esm/components/DSWYSIWYGEditorImpl.js +0 -245
  91. package/esm/components/ImageLibraryModal.js +0 -64
  92. package/esm/components/InsertFieldModal.js +0 -208
  93. package/esm/components/TippedButton.js +0 -46
  94. package/esm/components/TippedSelect.js +0 -38
  95. package/esm/components/colors.js +0 -26
  96. package/esm/components/customFields.js +0 -49
  97. package/esm/constants.js +0 -32
  98. package/esm/index.js +0 -4
  99. package/esm/quillMatchers/clipboardLinkWithTagMatcher.js +0 -29
  100. package/esm/quillOverrides/IndentStyle.js +0 -27
  101. package/esm/quillOverrides/LinkFormat.js +0 -66
  102. package/esm/quillOverrides/PlainClipboard.js +0 -25
  103. package/esm/utils.js +0 -23
  104. package/types/DSWYSIWYGEditor.d.ts +0 -75
  105. package/types/components/CustomImageUploader.d.ts +0 -8
  106. package/types/components/CustomToolbar.d.ts +0 -21
  107. package/types/components/DSWYSIWYGEditorImpl.d.ts +0 -15
  108. package/types/components/ImageLibraryModal.d.ts +0 -31
  109. package/types/components/InsertFieldModal.d.ts +0 -41
  110. package/types/components/TippedButton.d.ts +0 -12
  111. package/types/components/TippedSelect.d.ts +0 -13
  112. package/types/components/colors.d.ts +0 -1
  113. package/types/components/customFields.d.ts +0 -36
  114. package/types/constants.d.ts +0 -26
  115. package/types/index.d.ts +0 -4
  116. package/types/quillMatchers/clipboardLinkWithTagMatcher.d.ts +0 -2
  117. package/types/quillOverrides/IndentStyle.d.ts +0 -10
  118. package/types/quillOverrides/LinkFormat.d.ts +0 -12
  119. package/types/quillOverrides/PlainClipboard.d.ts +0 -8
  120. package/types/utils.d.ts +0 -1
@@ -0,0 +1,255 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __reExport = (target, module2, copyDefault, desc) => {
42
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
43
+ for (let key of __getOwnPropNames(module2))
44
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
45
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
46
+ }
47
+ return target;
48
+ };
49
+ var __toESM = (module2, isNodeMode) => {
50
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
51
+ };
52
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
53
+ return (module2, temp) => {
54
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
55
+ };
56
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
57
+ var DSWYSIWYGEditorImpl_exports = {};
58
+ __export(DSWYSIWYGEditorImpl_exports, {
59
+ default: () => DSWYSIWYGEditorImpl
60
+ });
61
+ var React = __toESM(require("react"));
62
+ var import_react = __toESM(require("react"));
63
+ var import_react_quill = __toESM(require("react-quill"));
64
+ var import_quill_blot_formatter = __toESM(require("quill-blot-formatter"));
65
+ var import_ImageLibraryModal = __toESM(require("./ImageLibraryModal"));
66
+ var import_InsertFieldModal = __toESM(require("./InsertFieldModal"));
67
+ var import_CustomToolbar = require("./CustomToolbar");
68
+ var import_IndentStyle = __toESM(require("../quillOverrides/IndentStyle"));
69
+ var import_LinkFormat = __toESM(require("../quillOverrides/LinkFormat"));
70
+ var import_utils = require("../utils");
71
+ var import_clipboardLinkWithTagMatcher = require("../quillMatchers/clipboardLinkWithTagMatcher");
72
+ import_react_quill.Quill.register("modules/blotFormatter", import_quill_blot_formatter.default);
73
+ const AlignStyle = import_react_quill.Quill.import("attributors/style/align");
74
+ const FontStyle = import_react_quill.Quill.import("attributors/style/font");
75
+ FontStyle.whitelist = [
76
+ "serif",
77
+ "monospace",
78
+ "arial",
79
+ "comic-sans",
80
+ "courier-new",
81
+ "georgia",
82
+ "helvetica",
83
+ "lucida"
84
+ ];
85
+ const SizeStyle = import_react_quill.Quill.import("attributors/style/size");
86
+ SizeStyle.whitelist = [
87
+ "x-small",
88
+ "large",
89
+ "x-large"
90
+ ];
91
+ const Block = import_react_quill.Quill.import("blots/block");
92
+ Block.tagName = "p";
93
+ import_react_quill.Quill.register(Block);
94
+ import_react_quill.Quill.register(AlignStyle, true);
95
+ import_react_quill.Quill.register(import_IndentStyle.default, true);
96
+ import_react_quill.Quill.register(FontStyle, true);
97
+ import_react_quill.Quill.register(SizeStyle, true);
98
+ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
99
+ constructor(props) {
100
+ super(props);
101
+ this.quillModules = __spreadValues({
102
+ toolbar: {
103
+ container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
104
+ handlers: __spreadValues({}, this.props.toolbarHandlers)
105
+ },
106
+ clipboard: {
107
+ matchVisual: false
108
+ },
109
+ blotFormatter: {}
110
+ }, this.props.quillModules);
111
+ this.onChangeQuill = (html, delta, source, editor) => {
112
+ const { showRawHTML, onChange } = this.props;
113
+ if (!showRawHTML)
114
+ onChange(html, delta, source, editor);
115
+ };
116
+ this.onChangeTextArea = (e) => {
117
+ const { showRawHTML, onChange } = this.props;
118
+ if (showRawHTML)
119
+ onChange(e.target.value);
120
+ };
121
+ this.onInserFieldConfirm = (fieldCode) => {
122
+ const editor = this.getEditor();
123
+ const range = editor.getSelection(true);
124
+ editor.insertText(range.index, fieldCode);
125
+ };
126
+ this.onImageConfirm = (image) => {
127
+ if (!image) {
128
+ return;
129
+ }
130
+ const editor = this.getEditor();
131
+ const range = editor.getSelection(true);
132
+ editor.insertEmbed(range.index, "image", image.url);
133
+ };
134
+ this.onFieldModalClose = () => {
135
+ this.setState({ isFieldModalOpen: false });
136
+ };
137
+ this.onImageModalClose = () => {
138
+ this.setState({ isImageModalOpen: false });
139
+ };
140
+ this.quillRef = (ref) => {
141
+ this.quill = ref;
142
+ };
143
+ import_react_quill.Quill.register(import_LinkFormat.default, true);
144
+ if (props.quillOverrides.length) {
145
+ props.quillOverrides.map((override) => import_react_quill.Quill.register(override, true));
146
+ }
147
+ this.state = {
148
+ isImageModalOpen: false,
149
+ isFieldModalOpen: false
150
+ };
151
+ const { toolbar } = this.quillModules;
152
+ if (props.imagesData) {
153
+ toolbar.handlers.image = (value) => {
154
+ const { imagesData, handleImageClick } = this.props;
155
+ if (!imagesData.length) {
156
+ return;
157
+ }
158
+ this.setState({ isImageModalOpen: !!value });
159
+ handleImageClick(value);
160
+ };
161
+ }
162
+ if (props.customFields) {
163
+ toolbar.handlers.customFields = (value) => {
164
+ const { customFields, handleCustomFieldClick } = this.props;
165
+ if (!customFields.length) {
166
+ return;
167
+ }
168
+ this.setState({ isFieldModalOpen: !!value });
169
+ handleCustomFieldClick(value);
170
+ };
171
+ }
172
+ }
173
+ componentDidMount() {
174
+ setTimeout(() => {
175
+ const quillDomRef = this.quill;
176
+ const editor = quillDomRef.getEditor();
177
+ this.props.getQuillRef(quillDomRef);
178
+ editor.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
179
+ });
180
+ }
181
+ getEditor() {
182
+ return this.quill.getEditor();
183
+ }
184
+ render() {
185
+ const { isFieldModalOpen, isImageModalOpen } = this.state;
186
+ const _a = this.props, {
187
+ containerProps = {},
188
+ customFields,
189
+ imagesData,
190
+ customToolbar,
191
+ handleImageClick,
192
+ handleCustomFieldClick,
193
+ height,
194
+ value,
195
+ showRawHTML,
196
+ onShowHTML,
197
+ onChange,
198
+ hideItems
199
+ } = _a, editorProps = __objRest(_a, [
200
+ "containerProps",
201
+ "customFields",
202
+ "imagesData",
203
+ "customToolbar",
204
+ "handleImageClick",
205
+ "handleCustomFieldClick",
206
+ "height",
207
+ "value",
208
+ "showRawHTML",
209
+ "onShowHTML",
210
+ "onChange",
211
+ "hideItems"
212
+ ]);
213
+ return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
214
+ className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`
215
+ }), customToolbar || /* @__PURE__ */ import_react.default.createElement(import_CustomToolbar.CustomToolbar, {
216
+ customFields,
217
+ onShowHTML,
218
+ hideItems,
219
+ userProps: this.props
220
+ }), /* @__PURE__ */ import_react.default.createElement(import_react_quill.default, __spreadProps(__spreadValues({
221
+ ref: this.quillRef,
222
+ modules: this.quillModules,
223
+ onChange: this.onChangeQuill,
224
+ value,
225
+ style: {
226
+ height,
227
+ borderBottom: "1px solid #ccc"
228
+ }
229
+ }, editorProps), {
230
+ id: "wysiwyg-text-container"
231
+ })), /* @__PURE__ */ import_react.default.createElement("textarea", {
232
+ className: "raw-editor ql-container ql-snow ql-editor",
233
+ style: {
234
+ width: "100%",
235
+ resize: "none",
236
+ height,
237
+ minHeight: "200px"
238
+ },
239
+ onChange: this.onChangeTextArea,
240
+ value: (0, import_utils.formatHTML)(value)
241
+ }), imagesData && imagesData.length && /* @__PURE__ */ import_react.default.createElement(import_ImageLibraryModal.default, {
242
+ imagesData,
243
+ isOpen: isImageModalOpen,
244
+ onClose: this.onImageModalClose,
245
+ onConfirm: this.onImageConfirm
246
+ }), customFields && customFields.length && /* @__PURE__ */ import_react.default.createElement(import_InsertFieldModal.default, {
247
+ customFields,
248
+ isOpen: isFieldModalOpen,
249
+ onClose: this.onFieldModalClose,
250
+ onConfirm: this.onInserFieldConfirm
251
+ }));
252
+ }
253
+ }
254
+ module.exports = __toCommonJS(DSWYSIWYGEditorImpl_exports);
255
+ //# sourceMappingURL=DSWYSIWYGEditorImpl.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/DSWYSIWYGEditorImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -0,0 +1,108 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
25
+ var __export = (target, all) => {
26
+ for (var name in all)
27
+ __defProp(target, name, { get: all[name], enumerable: true });
28
+ };
29
+ var __reExport = (target, module2, copyDefault, desc) => {
30
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
31
+ for (let key of __getOwnPropNames(module2))
32
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
33
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
34
+ }
35
+ return target;
36
+ };
37
+ var __toESM = (module2, isNodeMode) => {
38
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
39
+ };
40
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
41
+ return (module2, temp) => {
42
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
43
+ };
44
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
45
+ var ImageLibraryModal_exports = {};
46
+ __export(ImageLibraryModal_exports, {
47
+ default: () => ImageLibraryModal
48
+ });
49
+ var React = __toESM(require("react"));
50
+ var import_react = __toESM(require("react"));
51
+ var import_ds_imagelibrarymodal = __toESM(require("@elliemae/ds-imagelibrarymodal"));
52
+ var import_prop_types = __toESM(require("prop-types"));
53
+ class ImageLibraryModal extends import_react.default.PureComponent {
54
+ constructor(props) {
55
+ super(props);
56
+ this.onSelect = (selectedImage) => {
57
+ this.setState({ selectedImage });
58
+ };
59
+ this.onConfirm = () => {
60
+ const { selectedImage } = this.state;
61
+ const { onConfirm, onClose } = this.props;
62
+ onConfirm(selectedImage);
63
+ onClose();
64
+ };
65
+ this.state = {
66
+ selectedImage: void 0
67
+ };
68
+ }
69
+ render() {
70
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_imagelibrarymodal.default, __spreadProps(__spreadValues({}, this.props), {
71
+ onConfirm: this.onConfirm,
72
+ onSelect: this.onSelect
73
+ }));
74
+ }
75
+ }
76
+ ImageLibraryModal.propTypes = {
77
+ onConfirm: import_prop_types.default.func.isRequired,
78
+ onClose: import_prop_types.default.func.isRequired,
79
+ onReject: import_prop_types.default.func,
80
+ imagesData: import_prop_types.default.arrayOf(import_prop_types.default.shape({
81
+ id: import_prop_types.default.string,
82
+ url: import_prop_types.default.string.isRequired,
83
+ name: import_prop_types.default.string.isRequired,
84
+ description: import_prop_types.default.string,
85
+ createdBy: import_prop_types.default.string.isRequired,
86
+ createdDate: import_prop_types.default.string.isRequired
87
+ })),
88
+ isOpen: import_prop_types.default.bool.isRequired
89
+ };
90
+ ImageLibraryModal.defaultProps = {
91
+ onReject: void 0,
92
+ imagesData: [
93
+ {
94
+ url: "https://www.freeiconspng.com/minicovers/no-image-icon-6.png",
95
+ name: "no image",
96
+ createdBy: "user:John Doe",
97
+ createdDate: "0000-01-01 00:00 AM UTC"
98
+ },
99
+ {
100
+ url: "https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e",
101
+ name: "no image 2",
102
+ createdBy: "user:Jane Doe",
103
+ createdDate: "0000-01-01 00:00 AM UTC"
104
+ }
105
+ ]
106
+ };
107
+ module.exports = __toCommonJS(ImageLibraryModal_exports);
108
+ //# sourceMappingURL=ImageLibraryModal.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/ImageLibraryModal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,kCAAgC;AAChC,wBAAsB;AAEtB,gCAA+C,qBAAM,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,mDAAC,qCAAD,iCACM,KAAK,QADX;AAAA,MAEE,WAAW,KAAK;AAAA,MAChB,UAAU,KAAK;AAAA;AAAA;AAAA;AA3Dd,AADT,kBACS,YAAY;AAAA,EACjB,WAAW,0BAAU,KAAK;AAAA,EAC1B,SAAS,0BAAU,KAAK;AAAA,EACxB,UAAU,0BAAU;AAAA,EACpB,YAAY,0BAAU,QACpB,0BAAU,MAAM;AAAA,IACd,IAAI,0BAAU;AAAA,IACd,KAAK,0BAAU,OAAO;AAAA,IACtB,MAAM,0BAAU,OAAO;AAAA,IACvB,aAAa,0BAAU;AAAA,IACvB,WAAW,0BAAU,OAAO;AAAA,IAC5B,aAAa,0BAAU,OAAO;AAAA;AAAA,EAGlC,QAAQ,0BAAU,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
+ }
@@ -0,0 +1,212 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __reExport = (target, module2, copyDefault, desc) => {
42
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
43
+ for (let key of __getOwnPropNames(module2))
44
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
45
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
46
+ }
47
+ return target;
48
+ };
49
+ var __toESM = (module2, isNodeMode) => {
50
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
51
+ };
52
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
53
+ return (module2, temp) => {
54
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
55
+ };
56
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
57
+ var InsertFieldModal_exports = {};
58
+ __export(InsertFieldModal_exports, {
59
+ default: () => InsertFieldModal
60
+ });
61
+ var React = __toESM(require("react"));
62
+ var import_react = __toESM(require("react"));
63
+ var import_prop_types = __toESM(require("prop-types"));
64
+ var import_ds_modal = __toESM(require("@elliemae/ds-modal"));
65
+ var import_constants = require("@elliemae/ds-shared/constants");
66
+ var import_lodash = require("lodash");
67
+ var import_customFields = require("./customFields");
68
+ const modalTypes = Object.values(import_ds_modal.MODAL_TYPE);
69
+ const elementClassName = "insertfieldmodal-element";
70
+ class InsertFieldModal extends import_react.default.PureComponent {
71
+ constructor(props) {
72
+ super(props);
73
+ this.onConfirm = () => {
74
+ const { onConfirm, onClose } = this.props;
75
+ const { selectedFieldCode } = this.state;
76
+ onConfirm(selectedFieldCode);
77
+ onClose();
78
+ };
79
+ this.onReject = () => {
80
+ const { onReject, onClose } = this.props;
81
+ if (onReject) {
82
+ onReject();
83
+ } else {
84
+ onClose();
85
+ }
86
+ };
87
+ this.drawDiv = (className, content, content2) => /* @__PURE__ */ import_react.default.createElement("div", {
88
+ className
89
+ }, /* @__PURE__ */ import_react.default.createElement("span", null, content), /* @__PURE__ */ import_react.default.createElement("span", null, content2));
90
+ this.drawLabel = (className, label, value) => /* @__PURE__ */ import_react.default.createElement("div", {
91
+ className
92
+ }, /* @__PURE__ */ import_react.default.createElement("span", {
93
+ className: "label"
94
+ }, label), /* @__PURE__ */ import_react.default.createElement("span", {
95
+ className: "value"
96
+ }, value));
97
+ this.handleElementClick = (e, selectedFieldCode) => {
98
+ if (e.key && e.key !== " ") {
99
+ return;
100
+ }
101
+ const { selectedFieldCode: fCode } = this.state;
102
+ const { disableDoubleClick } = this.props;
103
+ if (selectedFieldCode === fCode && !disableDoubleClick) {
104
+ this.onConfirm();
105
+ return;
106
+ }
107
+ this.setState({
108
+ selectedFieldCode
109
+ });
110
+ const { onSelect } = this.props;
111
+ if (onSelect) {
112
+ onSelect(selectedFieldCode);
113
+ }
114
+ };
115
+ this.preventSpacebarScroll = () => {
116
+ document.onkeypress = function(e) {
117
+ if (!(0, import_lodash.includes)(e.target.className, elementClassName)) {
118
+ return true;
119
+ }
120
+ e = e || window.event;
121
+ const charCode = e.keyCode || e.which;
122
+ if (charCode === 32) {
123
+ e.preventDefault();
124
+ return false;
125
+ }
126
+ return true;
127
+ };
128
+ };
129
+ this.renderElements = () => {
130
+ const { customFields } = this.props;
131
+ if (!customFields) {
132
+ return "Empty";
133
+ }
134
+ const { selectedFieldCode } = this.state;
135
+ return customFields.map((customField, idx) => {
136
+ const extras = {};
137
+ const fieldCode = (0, import_customFields.getFieldCode)(customField);
138
+ if (this.focusFirst && idx === 0) {
139
+ extras.ref = (element) => element && element.focus();
140
+ this.focusFirst = void 0;
141
+ } else if (fieldCode === selectedFieldCode) {
142
+ extras.ref = (element) => element && element.focus();
143
+ }
144
+ return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
145
+ key: fieldCode,
146
+ className: elementClassName,
147
+ onClick: (e) => this.handleElementClick(e, fieldCode),
148
+ onKeyUp: (e) => this.handleElementClick(e, fieldCode),
149
+ role: "button",
150
+ tabIndex: 0
151
+ }, extras), this.drawLabel("content", (0, import_customFields.getFieldName)(customField), fieldCode));
152
+ });
153
+ };
154
+ this.state = {
155
+ selectedFieldCode: (0, import_customFields.getFieldCode)(import_customFields.fields[0])
156
+ };
157
+ this.preventSpacebarScroll();
158
+ }
159
+ componentDidMount() {
160
+ const { customFields } = this.props;
161
+ if (customFields) {
162
+ this.handleElementClick({}, customFields[0]);
163
+ this.focusFirst = true;
164
+ }
165
+ }
166
+ getDerivedStateFromProps(nextProps) {
167
+ const { customFields } = this.props;
168
+ if (!customFields && nextProps.customFields) {
169
+ this.setState({ selectedFieldCode: customFields[0] });
170
+ }
171
+ }
172
+ render() {
173
+ const _a = this.props, { customFields, onSelect } = _a, modalProps = __objRest(_a, ["customFields", "onSelect"]);
174
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_modal.default, __spreadProps(__spreadValues({}, modalProps), {
175
+ className: "insert-field-modal",
176
+ onConfirm: this.onConfirm,
177
+ onReject: this.onReject
178
+ }), /* @__PURE__ */ import_react.default.createElement("div", {
179
+ className: "wrapper"
180
+ }, /* @__PURE__ */ import_react.default.createElement("div", {
181
+ className: "col-1"
182
+ }, this.drawDiv("title", "Field Name", "\xAB Field ID \xBB"), this.renderElements())));
183
+ }
184
+ }
185
+ InsertFieldModal.propTypes = {
186
+ onConfirm: import_prop_types.default.func.isRequired,
187
+ onClose: import_prop_types.default.func.isRequired,
188
+ confirmLabel: import_prop_types.default.string,
189
+ customFields: import_prop_types.default.arrayOf(import_prop_types.default.string),
190
+ disableDoubleClick: import_prop_types.default.bool,
191
+ isOpen: import_prop_types.default.bool,
192
+ modalTitle: import_prop_types.default.string,
193
+ modalType: import_prop_types.default.string,
194
+ rejectLabel: import_prop_types.default.string,
195
+ shouldCloseOnOverlayClick: import_prop_types.default.bool,
196
+ size: import_prop_types.default.string,
197
+ onSelect: import_prop_types.default.func
198
+ };
199
+ InsertFieldModal.defaultProps = {
200
+ confirmLabel: "Add",
201
+ customFields: import_customFields.fields,
202
+ disableDoubleClick: false,
203
+ isOpen: true,
204
+ modalTitle: "Add Field",
205
+ modalType: modalTypes[1],
206
+ rejectLabel: "Cancel",
207
+ shouldCloseOnOverlayClick: true,
208
+ size: import_constants.sizeOptions[1],
209
+ onSelect: void 0
210
+ };
211
+ module.exports = __toCommonJS(InsertFieldModal_exports);
212
+ //# sourceMappingURL=InsertFieldModal.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/InsertFieldModal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable react/static-property-placement */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSModal, { MODAL_TYPE } from '@elliemae/ds-modal';\nimport { sizeOptions } from '@elliemae/ds-shared/constants';\nimport { includes } from 'lodash';\nimport { fields, getFieldName, getFieldCode } from './customFields';\n\nconst modalTypes = Object.values(MODAL_TYPE);\nconst elementClassName = 'insertfieldmodal-element';\n\nexport default class InsertFieldModal extends React.PureComponent {\n static propTypes = {\n onConfirm: PropTypes.func.isRequired,\n onClose: PropTypes.func.isRequired,\n confirmLabel: PropTypes.string,\n customFields: PropTypes.arrayOf(PropTypes.string),\n disableDoubleClick: PropTypes.bool,\n isOpen: PropTypes.bool,\n modalTitle: PropTypes.string,\n modalType: PropTypes.string,\n rejectLabel: PropTypes.string,\n shouldCloseOnOverlayClick: PropTypes.bool,\n size: PropTypes.string,\n onSelect: PropTypes.func,\n };\n\n static defaultProps = {\n confirmLabel: 'Add',\n customFields: fields,\n disableDoubleClick: false,\n isOpen: true,\n modalTitle: 'Add Field',\n modalType: modalTypes[1],\n rejectLabel: 'Cancel',\n shouldCloseOnOverlayClick: true,\n size: sizeOptions[1],\n onSelect: undefined,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n selectedFieldCode: getFieldCode(fields[0]),\n };\n this.preventSpacebarScroll();\n }\n\n componentDidMount() {\n const { customFields } = this.props;\n if (customFields) {\n this.handleElementClick({}, customFields[0]);\n this.focusFirst = true;\n }\n }\n\n getDerivedStateFromProps(nextProps) {\n const { customFields } = this.props;\n if (!customFields && nextProps.customFields) {\n this.setState({ selectedFieldCode: customFields[0] });\n }\n }\n\n onConfirm = () => {\n const { onConfirm, onClose } = this.props;\n const { selectedFieldCode } = this.state;\n onConfirm(selectedFieldCode);\n onClose();\n };\n\n onReject = () => {\n const { onReject, onClose } = this.props;\n if (onReject) {\n onReject();\n } else {\n onClose();\n }\n };\n\n drawDiv = (className, content, content2) => (\n <div className={className}>\n <span>{content}</span>\n <span>{content2}</span>\n </div>\n );\n\n drawLabel = (className, label, value) => (\n <div className={className}>\n <span className=\"label\">{label}</span>\n <span className=\"value\">{value}</span>\n </div>\n );\n\n handleElementClick = (e, selectedFieldCode) => {\n if (e.key && e.key !== ' ') {\n return;\n }\n const { selectedFieldCode: fCode } = this.state;\n const { disableDoubleClick } = this.props;\n if (selectedFieldCode === fCode && !disableDoubleClick) {\n this.onConfirm();\n return;\n }\n this.setState({\n selectedFieldCode,\n });\n const { onSelect } = this.props;\n if (onSelect) {\n onSelect(selectedFieldCode);\n }\n };\n\n preventSpacebarScroll = () => {\n document.onkeypress = function (e) {\n if (!includes(e.target.className, elementClassName)) {\n return true;\n }\n e = e || window.event;\n const charCode = e.keyCode || e.which;\n if (charCode === 32) {\n e.preventDefault();\n return false;\n }\n return true;\n };\n };\n\n renderElements = () => {\n const { customFields } = this.props;\n if (!customFields) {\n return 'Empty';\n }\n const { selectedFieldCode } = this.state;\n return customFields.map((customField, idx) => {\n const extras = {};\n const fieldCode = getFieldCode(customField);\n if (this.focusFirst && idx === 0) {\n extras.ref = (element) => element && element.focus();\n this.focusFirst = undefined;\n } else if (fieldCode === selectedFieldCode) {\n extras.ref = (element) => element && element.focus();\n }\n return (\n <div\n key={fieldCode}\n className={elementClassName}\n onClick={(e) => this.handleElementClick(e, fieldCode)}\n onKeyUp={(e) => this.handleElementClick(e, fieldCode)}\n role=\"button\"\n tabIndex={0}\n {...extras}\n >\n {this.drawLabel('content', getFieldName(customField), fieldCode)}\n </div>\n );\n });\n };\n\n render() {\n const { customFields, onSelect, ...modalProps } = this.props;\n return (\n <DSModal {...modalProps} className=\"insert-field-modal\" onConfirm={this.onConfirm} onReject={this.onReject}>\n <div className=\"wrapper\">\n <div className=\"col-1\">\n {this.drawDiv('title', 'Field Name', '\u00AB Field ID \u00BB')}\n {this.renderElements()}\n </div>\n </div>\n </DSModal>\n );\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }