@elliemae/ds-wysiwygeditor 3.20.3 → 3.21.0-next.2
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/dist/cjs/components/DSWYSIWYGEditorImpl.js +6 -16
- package/dist/cjs/components/DSWYSIWYGEditorImpl.js.map +2 -2
- package/dist/esm/components/DSWYSIWYGEditorImpl.js +6 -16
- package/dist/esm/components/DSWYSIWYGEditorImpl.js.map +2 -2
- package/dist/types/components/DSWYSIWYGEditorImpl.d.ts +5 -11
- package/package.json +10 -10
|
@@ -45,13 +45,7 @@ var import_quillSingletonConfigurations = __toESM(require("../config/quillSingle
|
|
|
45
45
|
class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
|
|
46
46
|
constructor(props) {
|
|
47
47
|
super(props);
|
|
48
|
-
this.getEditor = () =>
|
|
49
|
-
try {
|
|
50
|
-
this.quill?.getEditor?.();
|
|
51
|
-
} catch (error) {
|
|
52
|
-
console.warn("Error getting quill editor", error);
|
|
53
|
-
}
|
|
54
|
-
};
|
|
48
|
+
this.getEditor = () => this.quill?.getEditor();
|
|
55
49
|
// eslint-disable-next-line max-params
|
|
56
50
|
this.onChangeQuill = (html, delta, source, editor) => {
|
|
57
51
|
const { showRawHTML, onChange } = this.props;
|
|
@@ -83,16 +77,12 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
|
|
|
83
77
|
this.setState({ isImageModalOpen: false });
|
|
84
78
|
};
|
|
85
79
|
this.quillRef = (ref) => {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
editor?.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
|
|
90
|
-
}
|
|
91
|
-
this.props.getQuillRef(ref);
|
|
92
|
-
this.quill = ref;
|
|
93
|
-
} catch (error) {
|
|
94
|
-
console.warn("Error getting quill ref", error);
|
|
80
|
+
const editor = ref?.getEditor();
|
|
81
|
+
if (this.getEditor() !== editor) {
|
|
82
|
+
editor?.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
|
|
95
83
|
}
|
|
84
|
+
this.props.getQuillRef(ref);
|
|
85
|
+
this.quill = ref;
|
|
96
86
|
};
|
|
97
87
|
this.quill = void 0;
|
|
98
88
|
const instanceUid = (0, import_uid.uid)(12);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/DSWYSIWYGEditorImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal.js';\nimport InsertFieldModal from './InsertFieldModal.js';\nimport { CustomToolbar } from './CustomToolbar.js';\nimport { formatHTML } from '../utils.js';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';\nimport Quill from '../config/quillSingletonConfigurations.js';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n quill: undefined | typeof ReactQuill;\n\n constructor(props
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal.js';\nimport InsertFieldModal from './InsertFieldModal.js';\nimport { CustomToolbar } from './CustomToolbar.js';\nimport { formatHTML } from '../utils.js';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';\nimport Quill from '../config/quillSingletonConfigurations.js';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n quill: undefined | typeof ReactQuill;\n\n constructor(props) {\n super(props);\n this.quill = undefined; // this will hold the quill instance reference\n const instanceUid = uid(12);\n const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;\n const { hideToolbar } = props;\n\n const quillModules = {\n toolbar: hideToolbar\n ? false\n : {\n container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,\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 ...this.props.quillModules,\n };\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 uid: instanceUid,\n uniqueClassName,\n quillModules,\n };\n const { toolbar } = 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\n getEditor = () => this.quill?.getEditor();\n\n // eslint-disable-next-line max-params\n onChangeQuill = (html, delta, source, editor) => {\n // console.log('quill detected a change');\n const { showRawHTML, onChange } = this.props;\n if (!showRawHTML) onChange(html, delta, source, editor);\n };\n\n onChangeTextArea = (e) => {\n const { showRawHTML, onChange, readOnly } = this.props;\n if (showRawHTML && !readOnly) 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 quillRef = (ref) => {\n const editor = ref?.getEditor();\n if (this.getEditor() !== editor) {\n // the underlying quill instance has changed\n // this may happens because it's the first render or for other reasons\n // but any instance configuration must happen again in this case\n\n // we add a clipboard matcher\n // https://github.com/quilljs/quill/issues/2677\n editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n }\n this.props.getQuillRef(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 height,\n value,\n showRawHTML,\n onShowHTML,\n hideItems,\n // bounds,\n // a bunch of props we don't want to pass to the editor\n onChange,\n handleImageClick,\n handleCustomFieldClick,\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 data-uid={this.state.uid}\n >\n {this.props.hideToolbar ? null : (\n <>\n {customToolbar || (\n <CustomToolbar\n customFields={customFields}\n onShowHTML={onShowHTML}\n hideItems={hideItems}\n userProps={this.props}\n id={`toolbar-${this.state.uniqueClassName}`}\n />\n )}\n </>\n )}\n <ReactQuill\n ref={this.quillRef}\n modules={this.state.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-${this.state.uid}`}\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 readOnly={editorProps.readOnly}\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
6
|
"names": ["React", "Quill", "ReactQuill", "ImageLibraryModal", "InsertFieldModal"]
|
|
7
7
|
}
|
|
@@ -12,13 +12,7 @@ import Quill from "../config/quillSingletonConfigurations.js";
|
|
|
12
12
|
class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
13
13
|
constructor(props) {
|
|
14
14
|
super(props);
|
|
15
|
-
this.getEditor = () =>
|
|
16
|
-
try {
|
|
17
|
-
this.quill?.getEditor?.();
|
|
18
|
-
} catch (error) {
|
|
19
|
-
console.warn("Error getting quill editor", error);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
15
|
+
this.getEditor = () => this.quill?.getEditor();
|
|
22
16
|
// eslint-disable-next-line max-params
|
|
23
17
|
this.onChangeQuill = (html, delta, source, editor) => {
|
|
24
18
|
const { showRawHTML, onChange } = this.props;
|
|
@@ -50,16 +44,12 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
|
50
44
|
this.setState({ isImageModalOpen: false });
|
|
51
45
|
};
|
|
52
46
|
this.quillRef = (ref) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
editor?.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
|
|
57
|
-
}
|
|
58
|
-
this.props.getQuillRef(ref);
|
|
59
|
-
this.quill = ref;
|
|
60
|
-
} catch (error) {
|
|
61
|
-
console.warn("Error getting quill ref", error);
|
|
47
|
+
const editor = ref?.getEditor();
|
|
48
|
+
if (this.getEditor() !== editor) {
|
|
49
|
+
editor?.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
|
|
62
50
|
}
|
|
51
|
+
this.props.getQuillRef(ref);
|
|
52
|
+
this.quill = ref;
|
|
63
53
|
};
|
|
64
54
|
this.quill = void 0;
|
|
65
55
|
const instanceUid = uid(12);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal.js';\nimport InsertFieldModal from './InsertFieldModal.js';\nimport { CustomToolbar } from './CustomToolbar.js';\nimport { formatHTML } from '../utils.js';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';\nimport Quill from '../config/quillSingletonConfigurations.js';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n quill: undefined | typeof ReactQuill;\n\n constructor(props
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal.js';\nimport InsertFieldModal from './InsertFieldModal.js';\nimport { CustomToolbar } from './CustomToolbar.js';\nimport { formatHTML } from '../utils.js';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';\nimport Quill from '../config/quillSingletonConfigurations.js';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n quill: undefined | typeof ReactQuill;\n\n constructor(props) {\n super(props);\n this.quill = undefined; // this will hold the quill instance reference\n const instanceUid = uid(12);\n const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;\n const { hideToolbar } = props;\n\n const quillModules = {\n toolbar: hideToolbar\n ? false\n : {\n container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,\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 ...this.props.quillModules,\n };\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 uid: instanceUid,\n uniqueClassName,\n quillModules,\n };\n const { toolbar } = 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\n getEditor = () => this.quill?.getEditor();\n\n // eslint-disable-next-line max-params\n onChangeQuill = (html, delta, source, editor) => {\n // console.log('quill detected a change');\n const { showRawHTML, onChange } = this.props;\n if (!showRawHTML) onChange(html, delta, source, editor);\n };\n\n onChangeTextArea = (e) => {\n const { showRawHTML, onChange, readOnly } = this.props;\n if (showRawHTML && !readOnly) 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 quillRef = (ref) => {\n const editor = ref?.getEditor();\n if (this.getEditor() !== editor) {\n // the underlying quill instance has changed\n // this may happens because it's the first render or for other reasons\n // but any instance configuration must happen again in this case\n\n // we add a clipboard matcher\n // https://github.com/quilljs/quill/issues/2677\n editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n }\n this.props.getQuillRef(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 height,\n value,\n showRawHTML,\n onShowHTML,\n hideItems,\n // bounds,\n // a bunch of props we don't want to pass to the editor\n onChange,\n handleImageClick,\n handleCustomFieldClick,\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 data-uid={this.state.uid}\n >\n {this.props.hideToolbar ? null : (\n <>\n {customToolbar || (\n <CustomToolbar\n customFields={customFields}\n onShowHTML={onShowHTML}\n hideItems={hideItems}\n userProps={this.props}\n id={`toolbar-${this.state.uniqueClassName}`}\n />\n )}\n </>\n )}\n <ReactQuill\n ref={this.quillRef}\n modules={this.state.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-${this.state.uid}`}\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 readOnly={editorProps.readOnly}\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
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,21 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import ReactQuill from 'react-quill';
|
|
3
3
|
export default class DSWYSIWYGEditorImpl extends React.PureComponent {
|
|
4
4
|
quill: undefined | typeof ReactQuill;
|
|
5
|
-
constructor(props:
|
|
5
|
+
constructor(props: any);
|
|
6
6
|
componentDidMount(): void;
|
|
7
|
-
getEditor: () =>
|
|
7
|
+
getEditor: () => any;
|
|
8
8
|
onChangeQuill: (html: any, delta: any, source: any, editor: any) => void;
|
|
9
|
-
onChangeTextArea: (e:
|
|
10
|
-
target: {
|
|
11
|
-
value: any;
|
|
12
|
-
};
|
|
13
|
-
}) => void;
|
|
9
|
+
onChangeTextArea: (e: any) => void;
|
|
14
10
|
onInserFieldConfirm: (fieldCode: any) => void;
|
|
15
|
-
onImageConfirm: (image:
|
|
16
|
-
url: any;
|
|
17
|
-
}) => void;
|
|
11
|
+
onImageConfirm: (image: any) => void;
|
|
18
12
|
onFieldModalClose: () => void;
|
|
19
13
|
onImageModalClose: () => void;
|
|
20
|
-
quillRef: (ref:
|
|
14
|
+
quillRef: (ref: any) => void;
|
|
21
15
|
render(): import("react/jsx-runtime.js").JSX.Element;
|
|
22
16
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-wysiwygeditor",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.21.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - WYSIWYG Editor",
|
|
6
6
|
"files": [
|
|
@@ -103,15 +103,15 @@
|
|
|
103
103
|
"quill-delta": "5.0.0",
|
|
104
104
|
"react-quill": "2.0.0-beta.4",
|
|
105
105
|
"uid": "^2.0.1",
|
|
106
|
-
"@elliemae/ds-button": "3.
|
|
107
|
-
"@elliemae/ds-
|
|
108
|
-
"@elliemae/ds-
|
|
109
|
-
"@elliemae/ds-
|
|
110
|
-
"@elliemae/ds-
|
|
111
|
-
"@elliemae/ds-
|
|
112
|
-
"@elliemae/ds-
|
|
113
|
-
"@elliemae/ds-imagelibrarymodal": "3.
|
|
114
|
-
"@elliemae/ds-
|
|
106
|
+
"@elliemae/ds-button": "3.21.0-next.2",
|
|
107
|
+
"@elliemae/ds-modal": "3.21.0-next.2",
|
|
108
|
+
"@elliemae/ds-dropdownmenu": "3.21.0-next.2",
|
|
109
|
+
"@elliemae/ds-props-helpers": "3.21.0-next.2",
|
|
110
|
+
"@elliemae/ds-shared": "3.21.0-next.2",
|
|
111
|
+
"@elliemae/ds-tooltip": "3.21.0-next.2",
|
|
112
|
+
"@elliemae/ds-icons": "3.21.0-next.2",
|
|
113
|
+
"@elliemae/ds-imagelibrarymodal": "3.21.0-next.2",
|
|
114
|
+
"@elliemae/ds-uploader": "3.21.0-next.2"
|
|
115
115
|
},
|
|
116
116
|
"publishConfig": {
|
|
117
117
|
"access": "public",
|