@elliemae/ds-wysiwygeditor 3.16.0 → 3.16.1
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/DSWYSIWYGEditor.js +5 -1
- package/dist/cjs/DSWYSIWYGEditor.js.map +2 -2
- package/dist/cjs/components/CustomImageUploader.js +5 -1
- package/dist/cjs/components/CustomImageUploader.js.map +2 -2
- package/dist/cjs/components/CustomToolbar.js +7 -3
- package/dist/cjs/components/CustomToolbar.js.map +2 -2
- package/dist/cjs/components/DSWYSIWYGEditorImpl.js +45 -14
- package/dist/cjs/components/DSWYSIWYGEditorImpl.js.map +2 -2
- package/dist/cjs/components/ImageLibraryModal.js +5 -8
- package/dist/cjs/components/ImageLibraryModal.js.map +2 -2
- package/dist/cjs/components/InsertFieldModal.js +5 -1
- package/dist/cjs/components/InsertFieldModal.js.map +2 -2
- package/dist/cjs/components/TippedButton.js +4 -0
- package/dist/cjs/components/TippedButton.js.map +1 -1
- package/dist/cjs/components/TippedSelect.js +4 -0
- package/dist/cjs/components/TippedSelect.js.map +1 -1
- package/dist/cjs/components/colors.js +4 -0
- package/dist/cjs/components/colors.js.map +1 -1
- package/dist/cjs/components/customFields.js +5 -0
- package/dist/cjs/components/customFields.js.map +1 -1
- package/dist/cjs/constants.js +6 -1
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/index.js +8 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +4 -0
- package/dist/cjs/quillMatchers/clipboardLinkWithTagMatcher.js.map +1 -1
- package/dist/cjs/quillOverrides/Image.js +6 -2
- package/dist/cjs/quillOverrides/Image.js.map +2 -2
- package/dist/cjs/quillOverrides/IndentStyle.js +4 -0
- package/dist/cjs/quillOverrides/IndentStyle.js.map +2 -2
- package/dist/cjs/quillOverrides/LinkFormat.js +4 -0
- package/dist/cjs/quillOverrides/LinkFormat.js.map +1 -1
- package/dist/cjs/quillOverrides/PlainClipboard.js +4 -0
- package/dist/cjs/quillOverrides/PlainClipboard.js.map +1 -1
- package/dist/cjs/utils.js +4 -0
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/DSWYSIWYGEditor.js +1 -1
- package/dist/esm/DSWYSIWYGEditor.js.map +2 -2
- package/dist/esm/components/CustomImageUploader.js +1 -1
- package/dist/esm/components/CustomImageUploader.js.map +2 -2
- package/dist/esm/components/CustomToolbar.js +3 -3
- package/dist/esm/components/CustomToolbar.js.map +1 -1
- package/dist/esm/components/DSWYSIWYGEditorImpl.js +41 -14
- package/dist/esm/components/DSWYSIWYGEditorImpl.js.map +2 -2
- package/dist/esm/components/ImageLibraryModal.js +1 -8
- package/dist/esm/components/ImageLibraryModal.js.map +2 -2
- package/dist/esm/components/InsertFieldModal.js +1 -1
- package/dist/esm/components/InsertFieldModal.js.map +2 -2
- package/dist/esm/components/TippedButton.js.map +1 -1
- package/dist/esm/components/TippedSelect.js.map +1 -1
- package/dist/esm/components/customFields.js +1 -0
- package/dist/esm/components/customFields.js.map +1 -1
- package/dist/esm/constants.js +2 -1
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/esm/quillOverrides/Image.js +2 -2
- package/dist/esm/quillOverrides/Image.js.map +2 -2
- package/dist/esm/quillOverrides/IndentStyle.js.map +2 -2
- package/dist/types/DSWYSIWYGEditor.d.ts +13 -12
- package/dist/types/components/CustomImageUploader.d.ts +1 -0
- package/dist/types/components/CustomToolbar.d.ts +1 -0
- package/dist/types/components/InsertFieldModal.d.ts +1 -1
- package/dist/types/index.d.ts +4 -4
- package/package.json +12 -12
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -52,6 +56,7 @@ const fields = [
|
|
|
52
56
|
];
|
|
53
57
|
const getFields = (customFields = fields) => customFields.map((opt, index) => ({
|
|
54
58
|
id: `${opt}_${index}`,
|
|
59
|
+
// icon: 'ADD',
|
|
55
60
|
label: `${opt}`,
|
|
56
61
|
onClick: opt.indexOf("\xAB") !== -1 ? () => (void 0).onOptionClick((void 0).getFieldCode(opt)) : null,
|
|
57
62
|
type: opt === "" ? "separator" : null
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/customFields.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const fields = [\n 'Lender Name \u00AB315\u00BB',\n 'Lender Address \u00AB319\u00BB',\n 'Lender City \u00AB313\u00BB',\n 'Lender State \u00AB321\u00BB',\n 'Lender Zip \u00AB323\u00BB',\n 'Borrower First Name \u00AB4000\u00BB',\n 'Borrower Last Name \u00AB4002\u00BB',\n 'Total Loan Amount \u00AB2\u00BB',\n 'Loan Term \u00AB4\u00BB',\n 'Loan to Value \u00AB976\u00BB',\n 'Monthly Payment \u00AB912\u00BB',\n 'Interest Rate \u00AB3\u00BB',\n 'Loan Originator Name \u00AB1612\u00BB',\n 'Loan Originator Email \u00AB3968\u00BB',\n 'Loan Originator Phone \u00AB1823\u00BB',\n 'NMLS Loan Originator ID \u00AB3238\u00BB',\n];\n/**\n * Returns the fields names\n *\n * @param customFields\n */\nexport const getFields = (customFields = fields) =>\n customFields.map((opt, index) => ({\n id: `${opt}_${index}`,\n // icon: 'ADD',\n label: `${opt}`,\n onClick: opt.indexOf('\u00AB') !== -1 ? () => this.onOptionClick(this.getFieldCode(opt)) : null,\n type: opt === '' ? 'separator' : null,\n }));\n/**\n * Returns a field's name\n *\n * @param field\n */\nexport const getFieldName = (field) => {\n const codeIndex = field.indexOf('\u00AB');\n return field.substring(0, codeIndex);\n};\n/**\n * Returns a field's id. E.g: \u00AB456\u00BB\n *\n * @param field\n */\nexport const getFieldCode = (field) => {\n const codeIndex = field.indexOf('\u00AB');\n return field.substring(codeIndex);\n};\n\nexport default {\n fields,\n getFields,\n getFieldName,\n getFieldCode,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMO,MAAM,YAAY,CAAC,eAAe,WACvC,aAAa,IAAI,CAAC,KAAK,WAAW;AAAA,EAChC,IAAI,GAAG,OAAO;AAAA;AAAA,EAEd,OAAO,GAAG;AAAA,EACV,SAAS,IAAI,QAAQ,MAAG,MAAM,KAAK,MAAM,SAAK,cAAc,SAAK,aAAa,GAAG,CAAC,IAAI;AAAA,EACtF,MAAM,QAAQ,KAAK,cAAc;AACnC,EAAE;AAMG,MAAM,eAAe,CAAC,UAAU;AACrC,QAAM,YAAY,MAAM,QAAQ,MAAG;AACnC,SAAO,MAAM,UAAU,GAAG,SAAS;AACrC;AAMO,MAAM,eAAe,CAAC,UAAU;AACrC,QAAM,YAAY,MAAM,QAAQ,MAAG;AACnC,SAAO,MAAM,UAAU,SAAS;AAClC;AAEA,IAAO,uBAAQ;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/constants.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -32,7 +36,7 @@ __export(constants_exports, {
|
|
|
32
36
|
});
|
|
33
37
|
module.exports = __toCommonJS(constants_exports);
|
|
34
38
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_colors = require("./components/colors");
|
|
39
|
+
var import_colors = require("./components/colors.js");
|
|
36
40
|
const colors = [
|
|
37
41
|
"#000000",
|
|
38
42
|
"#e60000",
|
|
@@ -81,6 +85,7 @@ const fonts = [
|
|
|
81
85
|
];
|
|
82
86
|
const sizes = ["Small", "Normal", "Large", "Huge"];
|
|
83
87
|
const sizesReal = [
|
|
88
|
+
// https://www.w3schools.com/cssref/pr_font_font-size.asp
|
|
84
89
|
"X-Small",
|
|
85
90
|
"Normal",
|
|
86
91
|
"Large",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable prettier/prettier */\nimport { getRainbowColors } from './components/colors';\n\nexport const colors = [\n '#000000',\n '#e60000',\n '#ff9900',\n '#ffff00',\n '#008A00',\n '#0066cc',\n '#9933ff',\n '#ffffff',\n '#facccc',\n '#ffebcc',\n '#ffffcc',\n '#cce8cc',\n '#cce0f5',\n '#ebd6ff',\n '#bbbbbb',\n '#f06666',\n '#ffc266',\n '#ffff66',\n '#66b966',\n '#66a3e0',\n '#c285ff',\n '#888888',\n '#a10000',\n '#b26b00',\n '#b2b200',\n '#006100',\n '#0047b2',\n '#6b24b2',\n '#444444',\n '#5c0000',\n '#663d00',\n '#666600',\n '#003700',\n '#002966',\n '#3d1466',\n ...getRainbowColors(28),\n];\nexport const fonts = [\n 'Sans Serif',\n 'Serif',\n 'Monospace',\n 'Arial',\n 'Georgia',\n 'Helvetica',\n];\nexport const sizes = ['Small', 'Normal', 'Large', 'Huge'];\nexport const sizesReal = [\n // https://www.w3schools.com/cssref/pr_font_font-size.asp\n 'X-Small',\n 'Normal',\n 'Large',\n 'X-Large',\n];\n\nexport const defaultItems = {\n HEADER: 'header',\n FONT: 'font',\n FONT_SIZE: 'size',\n BOLD: 'bold',\n ITALIC: 'italic',\n UNDERLINE: 'underline',\n STRIKE: 'strike',\n SUB: 'sub',\n SUPER: 'super',\n ORDERED_LIST: 'ordered list',\n BULLET_LIST: 'bullet list',\n INDENT_MINUS_ONE: 'indent -1',\n INDENT_PLUS_ONE: 'indent +1',\n ALIGN: 'align',\n FONT_COLOR: 'font color',\n FONT_BACKGROUND_COLOR: 'font background color',\n HYPERLINK: 'hyperlink',\n IMAGE: 'image',\n CLEAR_FORMAT: 'clear format',\n SHOW_HTML: 'show html',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable prettier/prettier */\nimport { getRainbowColors } from './components/colors.js';\n\nexport const colors = [\n '#000000',\n '#e60000',\n '#ff9900',\n '#ffff00',\n '#008A00',\n '#0066cc',\n '#9933ff',\n '#ffffff',\n '#facccc',\n '#ffebcc',\n '#ffffcc',\n '#cce8cc',\n '#cce0f5',\n '#ebd6ff',\n '#bbbbbb',\n '#f06666',\n '#ffc266',\n '#ffff66',\n '#66b966',\n '#66a3e0',\n '#c285ff',\n '#888888',\n '#a10000',\n '#b26b00',\n '#b2b200',\n '#006100',\n '#0047b2',\n '#6b24b2',\n '#444444',\n '#5c0000',\n '#663d00',\n '#666600',\n '#003700',\n '#002966',\n '#3d1466',\n ...getRainbowColors(28),\n];\nexport const fonts = [\n 'Sans Serif',\n 'Serif',\n 'Monospace',\n 'Arial',\n 'Georgia',\n 'Helvetica',\n];\nexport const sizes = ['Small', 'Normal', 'Large', 'Huge'];\nexport const sizesReal = [\n // https://www.w3schools.com/cssref/pr_font_font-size.asp\n 'X-Small',\n 'Normal',\n 'Large',\n 'X-Large',\n];\n\nexport const defaultItems = {\n HEADER: 'header',\n FONT: 'font',\n FONT_SIZE: 'size',\n BOLD: 'bold',\n ITALIC: 'italic',\n UNDERLINE: 'underline',\n STRIKE: 'strike',\n SUB: 'sub',\n SUPER: 'super',\n ORDERED_LIST: 'ordered list',\n BULLET_LIST: 'bullet list',\n INDENT_MINUS_ONE: 'indent -1',\n INDENT_PLUS_ONE: 'indent +1',\n ALIGN: 'align',\n FONT_COLOR: 'font color',\n FONT_BACKGROUND_COLOR: 'font background color',\n HYPERLINK: 'hyperlink',\n IMAGE: 'image',\n CLEAR_FORMAT: 'clear format',\n SHOW_HTML: 'show html',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,oBAAiC;AAE1B,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAG,gCAAiB,EAAE;AACxB;AACO,MAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,QAAQ,CAAC,SAAS,UAAU,SAAS,MAAM;AACjD,MAAM,YAAY;AAAA;AAAA,EAEvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,uBAAuB;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAAA,EACd,WAAW;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
22
26
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
27
|
mod
|
|
24
28
|
));
|
|
@@ -31,8 +35,8 @@ __export(src_exports, {
|
|
|
31
35
|
});
|
|
32
36
|
module.exports = __toCommonJS(src_exports);
|
|
33
37
|
var React = __toESM(require("react"));
|
|
34
|
-
var import_DSWYSIWYGEditor = __toESM(require("./DSWYSIWYGEditor"));
|
|
35
|
-
__reExport(src_exports, require("./components/CustomToolbar"), module.exports);
|
|
36
|
-
__reExport(src_exports, require("./components/CustomImageUploader"), module.exports);
|
|
37
|
-
__reExport(src_exports, require("./constants"), module.exports);
|
|
38
|
+
var import_DSWYSIWYGEditor = __toESM(require("./DSWYSIWYGEditor.js"));
|
|
39
|
+
__reExport(src_exports, require("./components/CustomToolbar.js"), module.exports);
|
|
40
|
+
__reExport(src_exports, require("./components/CustomImageUploader.js"), module.exports);
|
|
41
|
+
__reExport(src_exports, require("./constants.js"), module.exports);
|
|
38
42
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { default, DSWYSIWYGEditor, WYSIWYWithSchema } from './DSWYSIWYGEditor';\nexport * from './components/CustomToolbar';\nexport * from './components/CustomImageUploader';\nexport * from './constants';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { default, DSWYSIWYGEditor, WYSIWYWithSchema } from './DSWYSIWYGEditor.js';\nexport * from './components/CustomToolbar.js';\nexport * from './components/CustomImageUploader.js';\nexport * from './constants.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA2D;AAC3D,wBAAc,0CADd;AAEA,wBAAc,gDAFd;AAGA,wBAAc,2BAHd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/quillMatchers/clipboardLinkWithTagMatcher.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type Delta from 'quill-delta';\n\nconst hrefTagRegexp = /%7B%7B.+%7D%7D/gm;\nexport const clipboardLinkWithTagMatcher = (node: HTMLAnchorElement, delta: Delta): Delta => {\n if (node.origin === window.location.origin) {\n const nodeHref = node.href;\n const tagMatch = nodeHref.match(hrefTagRegexp);\n if (tagMatch) {\n const [overWrittenHrefValue] = tagMatch;\n const insertLinkOperation = delta?.ops?.find((operation) => operation?.attributes?.link?.match?.(hrefTagRegexp));\n if (insertLinkOperation)\n insertLinkOperation.attributes.link = overWrittenHrefValue.replace(/%7B%7B/gm, '{{').replace(/%7D%7D/gm, '}}');\n }\n }\n return delta;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,gBAAgB;AACf,MAAM,8BAA8B,CAAC,MAAyB,UAAwB;AAC3F,MAAI,KAAK,WAAW,OAAO,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,SAAS,MAAM,aAAa;AAC7C,QAAI,UAAU;AACZ,YAAM,CAAC,oBAAoB,IAAI;AAC/B,YAAM,sBAAsB,OAAO,KAAK,KAAK,CAAC,cAAc,WAAW,YAAY,MAAM,QAAQ,aAAa,CAAC;AAC/G,UAAI;AACF,4BAAoB,WAAW,OAAO,qBAAqB,QAAQ,YAAY,IAAI,EAAE,QAAQ,YAAY,IAAI;AAAA,IACjH;AAAA,EACF;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -56,11 +60,11 @@ class Image extends BaseImage {
|
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
sanitize_style(style) {
|
|
59
|
-
|
|
63
|
+
const style_arr = style.split(";");
|
|
60
64
|
let allow_style = "";
|
|
61
65
|
style_arr.forEach((v, i) => {
|
|
62
66
|
if (WHITE_STYLE.indexOf(v.trim().split(":")[0]) !== -1) {
|
|
63
|
-
allow_style += v
|
|
67
|
+
allow_style += `${v};`;
|
|
64
68
|
}
|
|
65
69
|
});
|
|
66
70
|
return allow_style;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/quillOverrides/Image.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Quill } from 'react-quill';\nconst BaseImage = Quill.import('formats/image');\n\nconst ATTRIBUTES = ['alt', 'height', 'width', 'style'];\n\nconst WHITE_STYLE = ['margin', 'display', 'float'];\n\nclass Image extends BaseImage {\n static formats(domNode) {\n return ATTRIBUTES.reduce(function (formats, attribute) {\n if (domNode.hasAttribute(attribute)) {\n formats[attribute] = domNode.getAttribute(attribute);\n }\n return formats;\n }, {});\n }\n\n format(name, value) {\n if (ATTRIBUTES.indexOf(name) > -1) {\n if (value) {\n if (name === 'style') {\n value = this.sanitize_style(value);\n }\n this.domNode.setAttribute(name, value);\n } else {\n this.domNode.removeAttribute(name);\n }\n } else {\n super.format(name, value);\n }\n }\n\n sanitize_style(style) {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Quill } from 'react-quill';\nconst BaseImage = Quill.import('formats/image');\n\nconst ATTRIBUTES = ['alt', 'height', 'width', 'style'];\n\nconst WHITE_STYLE = ['margin', 'display', 'float'];\n\nclass Image extends BaseImage {\n static formats(domNode) {\n return ATTRIBUTES.reduce(function (formats, attribute) {\n if (domNode.hasAttribute(attribute)) {\n formats[attribute] = domNode.getAttribute(attribute);\n }\n return formats;\n }, {});\n }\n\n format(name, value) {\n if (ATTRIBUTES.indexOf(name) > -1) {\n if (value) {\n if (name === 'style') {\n value = this.sanitize_style(value);\n }\n this.domNode.setAttribute(name, value);\n } else {\n this.domNode.removeAttribute(name);\n }\n } else {\n super.format(name, value);\n }\n }\n\n sanitize_style(style) {\n const style_arr = style.split(';');\n let allow_style = '';\n style_arr.forEach((v, i) => {\n if (WHITE_STYLE.indexOf(v.trim().split(':')[0]) !== -1) {\n allow_style += `${v};`;\n }\n });\n return allow_style;\n }\n}\n\nexport default Image;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsB;AACtB,MAAM,YAAY,yBAAM,OAAO,eAAe;AAE9C,MAAM,aAAa,CAAC,OAAO,UAAU,SAAS,OAAO;AAErD,MAAM,cAAc,CAAC,UAAU,WAAW,OAAO;AAEjD,MAAM,cAAc,UAAU;AAAA,EAC5B,OAAO,QAAQ,SAAS;AACtB,WAAO,WAAW,OAAO,SAAU,SAAS,WAAW;AACrD,UAAI,QAAQ,aAAa,SAAS,GAAG;AACnC,gBAAQ,SAAS,IAAI,QAAQ,aAAa,SAAS;AAAA,MACrD;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAAA,EACP;AAAA,EAEA,OAAO,MAAM,OAAO;AAClB,QAAI,WAAW,QAAQ,IAAI,IAAI,IAAI;AACjC,UAAI,OAAO;AACT,YAAI,SAAS,SAAS;AACpB,kBAAQ,KAAK,eAAe,KAAK;AAAA,QACnC;AACA,aAAK,QAAQ,aAAa,MAAM,KAAK;AAAA,MACvC,OAAO;AACL,aAAK,QAAQ,gBAAgB,IAAI;AAAA,MACnC;AAAA,IACF,OAAO;AACL,YAAM,OAAO,MAAM,KAAK;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,eAAe,OAAO;AACpB,UAAM,YAAY,MAAM,MAAM,GAAG;AACjC,QAAI,cAAc;AAClB,cAAU,QAAQ,CAAC,GAAG,MAAM;AAC1B,UAAI,YAAY,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI;AACtD,uBAAe,GAAG;AAAA,MACpB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACF;AAEA,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/quillOverrides/IndentStyle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Quill } from 'react-quill';\n\nconst Parchment = Quill.import('parchment');\nconst levels = [1, 2, 3, 4, 5];\nconst multiplier = 2;\n\nclass IndentAttributor extends Parchment.Attributor.Style {\n add(node, value) {\n return super.add(node, `${value * multiplier}em`);\n }\n\n value(node) {\n return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN\n }\n}\n\n/**\n * Meant to override quill's indent format's style and add the indentation inline instead of applying a class\n */\nconst IndentStyle = new IndentAttributor('indent', 'margin-left', {\n scope: Parchment.Scope.BLOCK,\n whitelist: levels.map(value => `${value * multiplier}em`),\n});\n\nexport default IndentStyle;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Quill } from 'react-quill';\n\nconst Parchment = Quill.import('parchment');\nconst levels = [1, 2, 3, 4, 5];\nconst multiplier = 2;\n\nclass IndentAttributor extends Parchment.Attributor.Style {\n add(node, value) {\n return super.add(node, `${value * multiplier}em`);\n }\n\n value(node) {\n return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN\n }\n}\n\n/**\n * Meant to override quill's indent format's style and add the indentation inline instead of applying a class\n */\nconst IndentStyle = new IndentAttributor('indent', 'margin-left', {\n scope: Parchment.Scope.BLOCK,\n whitelist: levels.map((value) => `${value * multiplier}em`),\n});\n\nexport default IndentStyle;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsB;AAEtB,MAAM,YAAY,yBAAM,OAAO,WAAW;AAC1C,MAAM,SAAS,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAC7B,MAAM,aAAa;AAEnB,MAAM,yBAAyB,UAAU,WAAW,MAAM;AAAA,EACxD,IAAI,MAAM,OAAO;AACf,WAAO,MAAM,IAAI,MAAM,GAAG,QAAQ,cAAc;AAAA,EAClD;AAAA,EAEA,MAAM,MAAM;AACV,WAAO,WAAW,MAAM,MAAM,IAAI,CAAC,IAAI,cAAc;AAAA,EACvD;AACF;AAKA,MAAM,cAAc,IAAI,iBAAiB,UAAU,eAAe;AAAA,EAChE,OAAO,UAAU,MAAM;AAAA,EACvB,WAAW,OAAO,IAAI,CAAC,UAAU,GAAG,QAAQ,cAAc;AAC5D,CAAC;AAED,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/quillOverrides/LinkFormat.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { Quill } from 'react-quill';\n\nconst sanitizeProtocol = (value) => {\n if (typeof value === 'boolean' || value === null) return value;\n let newVal = value;\n if (\n !value.startsWith('http') &&\n !value.startsWith('ftp') &&\n !value.startsWith('mailto:') &&\n !value.startsWith('{{')\n ) {\n if (!value.startsWith('www')) {\n newVal = `https://www.${value}`;\n } else newVal = `https://${value}`;\n }\n return newVal;\n};\n\nfunction getIsValidProtocol(url, protocols) {\n const anchor = document.createElement('a');\n anchor.href = url;\n const protocol = anchor.href.slice(0, anchor.href.indexOf(':'));\n return protocols.indexOf(protocol) > -1;\n}\n\nconst Link = Quill.import('formats/link');\n\nclass LinkFormat extends Link {\n blotName = 'link';\n\n tagName = 'A';\n\n SANITIZED_URL = 'about:blank';\n\n PROTOCOL_WHITELIST = ['http', 'ftp', 'https', 'mailto', 'tel'];\n\n static create(value) {\n const newVal = sanitizeProtocol(value);\n const node = super.create(newVal);\n node.setAttribute('href', newVal);\n return node;\n }\n\n static formats(domNode) {\n return domNode?.getAttribute?.('href');\n }\n\n static sanitize(url) {\n return getIsValidProtocol(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;\n }\n\n format(name, value) {\n const newVal = sanitizeProtocol(value);\n // Remove link case\n if (name === 'link' && value === false) {\n this.domNode.removeAttribute('href');\n } else if (name !== this.statics.blotName || !newVal) {\n super.format(name, newVal);\n } else {\n this.domNode.setAttribute('href', this.constructor.sanitize(newVal));\n }\n }\n}\n\nexport default LinkFormat;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yBAAsB;AAEtB,MAAM,mBAAmB,CAAC,UAAU;AAClC,MAAI,OAAO,UAAU,aAAa,UAAU;AAAM,WAAO;AACzD,MAAI,SAAS;AACb,MACE,CAAC,MAAM,WAAW,MAAM,KACxB,CAAC,MAAM,WAAW,KAAK,KACvB,CAAC,MAAM,WAAW,SAAS,KAC3B,CAAC,MAAM,WAAW,IAAI,GACtB;AACA,QAAI,CAAC,MAAM,WAAW,KAAK,GAAG;AAC5B,eAAS,eAAe;AAAA,IAC1B;AAAO,eAAS,WAAW;AAAA,EAC7B;AACA,SAAO;AACT;AAEA,SAAS,mBAAmB,KAAK,WAAW;AAC1C,QAAM,SAAS,SAAS,cAAc,GAAG;AACzC,SAAO,OAAO;AACd,QAAM,WAAW,OAAO,KAAK,MAAM,GAAG,OAAO,KAAK,QAAQ,GAAG,CAAC;AAC9D,SAAO,UAAU,QAAQ,QAAQ,IAAI;AACvC;AAEA,MAAM,OAAO,yBAAM,OAAO,cAAc;AAExC,MAAM,mBAAmB,KAAK;AAAA,EAA9B;AAAA;AACE,oBAAW;AAEX,mBAAU;AAEV,yBAAgB;AAEhB,8BAAqB,CAAC,QAAQ,OAAO,SAAS,UAAU,KAAK;AAAA;AAAA,EAE7D,OAAO,OAAO,OAAO;AACnB,UAAM,SAAS,iBAAiB,KAAK;AACrC,UAAM,OAAO,MAAM,OAAO,MAAM;AAChC,SAAK,aAAa,QAAQ,MAAM;AAChC,WAAO;AAAA,EACT;AAAA,EAEA,OAAO,QAAQ,SAAS;AACtB,WAAO,SAAS,eAAe,MAAM;AAAA,EACvC;AAAA,EAEA,OAAO,SAAS,KAAK;AACnB,WAAO,mBAAmB,KAAK,KAAK,kBAAkB,IAAI,MAAM,KAAK;AAAA,EACvE;AAAA,EAEA,OAAO,MAAM,OAAO;AAClB,UAAM,SAAS,iBAAiB,KAAK;AAErC,QAAI,SAAS,UAAU,UAAU,OAAO;AACtC,WAAK,QAAQ,gBAAgB,MAAM;AAAA,IACrC,WAAW,SAAS,KAAK,QAAQ,YAAY,CAAC,QAAQ;AACpD,YAAM,OAAO,MAAM,MAAM;AAAA,IAC3B,OAAO;AACL,WAAK,QAAQ,aAAa,QAAQ,KAAK,YAAY,SAAS,MAAM,CAAC;AAAA,IACrE;AAAA,EACF;AACF;AAEA,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/quillOverrides/PlainClipboard.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { Quill } from 'react-quill';\n\nconst Clipboard = Quill.import('modules/clipboard');\nconst Delta = Quill.import('delta');\n\n/**\n * Just for the sake of an example. https://quilljs.com/docs/modules/\n */\nexport default class PlainClipboard extends Clipboard {\n convert(html = null) {\n if (typeof html === 'string') {\n this.container.innerHTML = html;\n }\n const text = this.container.innerText;\n this.container.innerHTML = '';\n return new Delta().insert(text);\n }\n}\n\n// Uncomment if adding custom clipboard, or add in the file you are importing this to\n// Quill.register('modules/clipboard', PlainClipboard)\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsB;AAEtB,MAAM,YAAY,yBAAM,OAAO,mBAAmB;AAClD,MAAM,QAAQ,yBAAM,OAAO,OAAO;AAKlC,MAAO,uBAAqC,UAAU;AAAA,EACpD,QAAQ,OAAO,MAAM;AACnB,QAAI,OAAO,SAAS,UAAU;AAC5B,WAAK,UAAU,YAAY;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK,UAAU;AAC5B,SAAK,UAAU,YAAY;AAC3B,WAAO,IAAI,MAAM,EAAE,OAAO,IAAI;AAAA,EAChC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const formatHTML = (html) => {\n const tab = '\\t';\n let result = '';\n let indent = '';\n\n html.split(/>\\s*</).forEach((element) => {\n if (element.match(/^\\/\\w/)) {\n indent = indent.substring(tab.length);\n }\n\n result += `${indent}<${element}>\\r\\n`;\n\n if (element.match(/^<?\\w[^>]*[^/]$/)) {\n indent += tab;\n }\n });\n\n return result.substring(1, result.length - 3);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa,CAAC,SAAS;AAClC,QAAM,MAAM;AACZ,MAAI,SAAS;AACb,MAAI,SAAS;AAEb,OAAK,MAAM,OAAO,EAAE,QAAQ,CAAC,YAAY;AACvC,QAAI,QAAQ,MAAM,OAAO,GAAG;AAC1B,eAAS,OAAO,UAAU,IAAI,MAAM;AAAA,IACtC;AAEA,cAAU,GAAG,UAAU;AAAA;AAEvB,QAAI,QAAQ,MAAM,iBAAiB,GAAG;AACpC,gBAAU;AAAA,IACZ;AAAA,EACF,CAAC;AAED,SAAO,OAAO,UAAU,GAAG,OAAO,SAAS,CAAC;AAC9C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect } from "react";
|
|
4
4
|
import { describe, PropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import DSWYSIWYGEditorImpl from "./components/DSWYSIWYGEditorImpl";
|
|
5
|
+
import DSWYSIWYGEditorImpl from "./components/DSWYSIWYGEditorImpl.js";
|
|
6
6
|
const DSWYSIWYGEditor = ({
|
|
7
7
|
value = "",
|
|
8
8
|
onChange = () => null,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSWYSIWYGEditor.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n value = '',\n onChange = () => null,\n getQuillRef = () => null,\n quillModules = {},\n customToolbar,\n toolbarHandlers,\n showRawHTML = false,\n height,\n hideItems,\n ...rest\n}) => {\n const emptyAction = () => {};\n const [showHTML, setShowHTML] = useState(showRawHTML);\n\n useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n return (\n <DSWYSIWYGEditorImpl\n forceHttpLink\n handleCustomFieldClick={emptyAction}\n handleImageClick={emptyAction}\n quillOverrides={[]}\n value={value}\n onChange={onChange}\n getQuillRef={getQuillRef}\n quillModules={quillModules}\n customToolbar={customToolbar}\n toolbarHandlers={toolbarHandlers}\n showRawHTML={showHTML}\n onShowHTML={() => setShowHTML(!showHTML)}\n height={height}\n hideItems={hideItems}\n {...rest}\n />\n );\n};\n\nconst wysiwygEditorProps = {\n value: PropTypes.string.description('editors value').isRequired,\n onChange: PropTypes.func.description(\n `(content, delta, source, editor) : Called back with the new contents of the editor after change. \n It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n Use editor.getContents() instead. See Using Deltas for details. \n Read more: https://github.com/zenoamaro/react-quill#props`,\n ).isRequired,\n getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n quillModules: PropTypes.object.description('object to override quill modules'),\n customToolbar: PropTypes.element.description('custom toolbar'),\n toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n height: PropTypes.string.description('heigth of the editors text area'),\n readOnly: PropTypes.string.description(\n \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n ),\n hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n zIndex: PropTypes.number.description(\n 'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsBnB;AAtBJ,SAAgB,UAAU,iBAAiB;AAC3C,SAAS,UAAU,iBAAiB;AACpC,OAAO,yBAAyB;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl.js';\n\nconst DSWYSIWYGEditor = ({\n value = '',\n onChange = () => null,\n getQuillRef = () => null,\n quillModules = {},\n customToolbar,\n toolbarHandlers,\n showRawHTML = false,\n height,\n hideItems,\n ...rest\n}) => {\n const emptyAction = () => {};\n const [showHTML, setShowHTML] = useState(showRawHTML);\n\n useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n return (\n <DSWYSIWYGEditorImpl\n forceHttpLink\n handleCustomFieldClick={emptyAction}\n handleImageClick={emptyAction}\n quillOverrides={[]}\n value={value}\n onChange={onChange}\n getQuillRef={getQuillRef}\n quillModules={quillModules}\n customToolbar={customToolbar}\n toolbarHandlers={toolbarHandlers}\n showRawHTML={showHTML}\n onShowHTML={() => setShowHTML(!showHTML)}\n height={height}\n hideItems={hideItems}\n {...rest}\n />\n );\n};\n\nconst wysiwygEditorProps = {\n value: PropTypes.string.description('editors value').isRequired,\n onChange: PropTypes.func.description(\n `(content, delta, source, editor) : Called back with the new contents of the editor after change. \n It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n Use editor.getContents() instead. See Using Deltas for details. \n Read more: https://github.com/zenoamaro/react-quill#props`,\n ).isRequired,\n getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n quillModules: PropTypes.object.description('object to override quill modules'),\n customToolbar: PropTypes.element.description('custom toolbar'),\n toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n height: PropTypes.string.description('heigth of the editors text area'),\n readOnly: PropTypes.string.description(\n \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n ),\n hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n zIndex: PropTypes.number.description(\n 'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsBnB;AAtBJ,SAAgB,UAAU,iBAAiB;AAC3C,SAAS,UAAU,iBAAiB;AACpC,OAAO,yBAAyB;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,WAAW;AAEpD,YAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,wBAAwB;AAAA,MACxB,kBAAkB;AAAA,MAClB,gBAAgB,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,UAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,UAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,UAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,mBAAmB,SAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import { useState } from "react";
|
|
|
4
4
|
import { Image } from "@elliemae/ds-icons";
|
|
5
5
|
import DSUploader from "@elliemae/ds-uploader";
|
|
6
6
|
import DSModal, { MODAL_TYPE_V2 } from "@elliemae/ds-modal";
|
|
7
|
-
import { TippedButton } from "./TippedButton";
|
|
7
|
+
import { TippedButton } from "./TippedButton.js";
|
|
8
8
|
const ALLOWED_TYPES_TEXT = "JPG, JPEG, PNG, GIF, BMP, TIFF";
|
|
9
9
|
const ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
|
|
10
10
|
const DEFAULT_MAX_SIZE = 1024 * 1024;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/CustomImageUploader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\nimport { Image } from '@elliemae/ds-icons';\nimport DSUploader from '@elliemae/ds-uploader';\nimport DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { TippedButton } from './TippedButton';\n\nconst ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';\nconst ALLOWED_TYPES = /image\\/(jpeg|jpg|png|gif|bmp|tiff)/;\nconst DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB\n\nexport const CustomImageUploader = ({\n quillRef,\n editorFieldName,\n allowedImageTypes = ALLOWED_TYPES_TEXT,\n uploadAsset = () => null,\n zIndex = 1,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [error, setError] = useState(null);\n const [inProgress, setInProgress] = useState(false);\n const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });\n\n const elementId = `uploadImage${editorFieldName}`;\n\n // eslint-disable-next-line consistent-return\n const handleFileChange = async (files) => {\n if (!inProgress) {\n setError(null);\n const selectedFile = files[0];\n if (!selectedFile) {\n setError('Please select a file.');\n return false;\n }\n if (!selectedFile.type.match(ALLOWED_TYPES)) {\n setError('File must be an image.');\n } else if (selectedFile.size > DEFAULT_MAX_SIZE) {\n setError('File is too large.');\n } else {\n const fr = new FileReader();\n fr.onload = async () => {\n setInProgress(true);\n try {\n const url = await uploadAsset({\n name: selectedFile.name,\n type: selectedFile.type,\n description: selectedFile.name,\n isSystemAsset: false,\n file: fr.result,\n });\n setIsOpen(false);\n quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, 'image', url);\n } catch (e) {\n setError('An error has occurred, try again');\n }\n setInProgress(false);\n };\n fr.readAsArrayBuffer(selectedFile);\n }\n }\n };\n return (\n <>\n <TippedButton\n zIndex={zIndex}\n tip=\"Insert Image\"\n onClick={() => {\n setLastSelection(quillRef?.getEditor().getSelection());\n setIsOpen(true);\n }}\n >\n <Image color={['neutral', 500]} size=\"s\" />\n </TippedButton>\n <DSModal\n isOpen={isOpen}\n title=\"\"\n onConfirm={() => {\n setIsOpen(false);\n }}\n onClose={() => {\n setIsOpen(false);\n }}\n showClose\n version={2}\n size=\"xsmall\"\n modalType={MODAL_TYPE_V2.DECISION}\n confirmLabel=\"Cancel\"\n message=\"\"\n >\n {!inProgress && (\n <DSUploader\n containerProps={{ id: elementId }}\n showAltAction={false}\n acceptedTypesText={allowedImageTypes}\n onDrop={handleFileChange}\n />\n )}\n {inProgress && 'Upload in progress...'}\n {error && <div style={{ color: 'red', marginTop: '10px' }}>{error}</div>}\n </DSModal>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiEnB,mBASI,KAEF,YAXF;AA7DJ,SAAgB,gBAAgB;AAChC,SAAS,aAAa;AACtB,OAAO,gBAAgB;AACvB,OAAO,WAAW,qBAAqB;AACvC,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAE1E,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS,IAAI;AACb,YAAM,eAAe,MAAM;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\nimport { Image } from '@elliemae/ds-icons';\nimport DSUploader from '@elliemae/ds-uploader';\nimport DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { TippedButton } from './TippedButton.js';\n\nconst ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';\nconst ALLOWED_TYPES = /image\\/(jpeg|jpg|png|gif|bmp|tiff)/;\nconst DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB\n\nexport const CustomImageUploader = ({\n quillRef,\n editorFieldName,\n allowedImageTypes = ALLOWED_TYPES_TEXT,\n uploadAsset = () => null,\n zIndex = 1,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [error, setError] = useState(null);\n const [inProgress, setInProgress] = useState(false);\n const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });\n\n const elementId = `uploadImage${editorFieldName}`;\n\n // eslint-disable-next-line consistent-return\n const handleFileChange = async (files) => {\n if (!inProgress) {\n setError(null);\n const selectedFile = files[0];\n if (!selectedFile) {\n setError('Please select a file.');\n return false;\n }\n if (!selectedFile.type.match(ALLOWED_TYPES)) {\n setError('File must be an image.');\n } else if (selectedFile.size > DEFAULT_MAX_SIZE) {\n setError('File is too large.');\n } else {\n const fr = new FileReader();\n fr.onload = async () => {\n setInProgress(true);\n try {\n const url = await uploadAsset({\n name: selectedFile.name,\n type: selectedFile.type,\n description: selectedFile.name,\n isSystemAsset: false,\n file: fr.result,\n });\n setIsOpen(false);\n quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, 'image', url);\n } catch (e) {\n setError('An error has occurred, try again');\n }\n setInProgress(false);\n };\n fr.readAsArrayBuffer(selectedFile);\n }\n }\n };\n return (\n <>\n <TippedButton\n zIndex={zIndex}\n tip=\"Insert Image\"\n onClick={() => {\n setLastSelection(quillRef?.getEditor().getSelection());\n setIsOpen(true);\n }}\n >\n <Image color={['neutral', 500]} size=\"s\" />\n </TippedButton>\n <DSModal\n isOpen={isOpen}\n title=\"\"\n onConfirm={() => {\n setIsOpen(false);\n }}\n onClose={() => {\n setIsOpen(false);\n }}\n showClose\n version={2}\n size=\"xsmall\"\n modalType={MODAL_TYPE_V2.DECISION}\n confirmLabel=\"Cancel\"\n message=\"\"\n >\n {!inProgress && (\n <DSUploader\n containerProps={{ id: elementId }}\n showAltAction={false}\n acceptedTypesText={allowedImageTypes}\n onDrop={handleFileChange}\n />\n )}\n {inProgress && 'Upload in progress...'}\n {error && <div style={{ color: 'red', marginTop: '10px' }}>{error}</div>}\n </DSModal>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiEnB,mBASI,KAEF,YAXF;AA7DJ,SAAgB,gBAAgB;AAChC,SAAS,aAAa;AACtB,OAAO,gBAAgB;AACvB,OAAO,WAAW,qBAAqB;AACvC,SAAS,oBAAoB;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAE1E,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS,IAAI;AACb,YAAM,eAAe,MAAM,CAAC;AAC5B,UAAI,CAAC,cAAc;AACjB,iBAAS,uBAAuB;AAChC,eAAO;AAAA,MACT;AACA,UAAI,CAAC,aAAa,KAAK,MAAM,aAAa,GAAG;AAC3C,iBAAS,wBAAwB;AAAA,MACnC,WAAW,aAAa,OAAO,kBAAkB;AAC/C,iBAAS,oBAAoB;AAAA,MAC/B,OAAO;AACL,cAAM,KAAK,IAAI,WAAW;AAC1B,WAAG,SAAS,YAAY;AACtB,wBAAc,IAAI;AAClB,cAAI;AACF,kBAAM,MAAM,MAAM,YAAY;AAAA,cAC5B,MAAM,aAAa;AAAA,cACnB,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,eAAe;AAAA,cACf,MAAM,GAAG;AAAA,YACX,CAAC;AACD,sBAAU,KAAK;AACf,sBAAU,UAAU,EAAE,YAAY,eAAe,SAAS,GAAG,SAAS,GAAG;AAAA,UAC3E,SAAS,GAAP;AACA,qBAAS,kCAAkC;AAAA,UAC7C;AACA,wBAAc,KAAK;AAAA,QACrB;AACA,WAAG,kBAAkB,YAAY;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAI;AAAA,QACJ,SAAS,MAAM;AACb,2BAAiB,UAAU,UAAU,EAAE,aAAa,CAAC;AACrD,oBAAU,IAAI;AAAA,QAChB;AAAA,QAEA,8BAAC,SAAM,OAAO,CAAC,WAAW,GAAG,GAAG,MAAK,KAAI;AAAA;AAAA,IAC3C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,WAAW,MAAM;AACf,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,SAAS,MAAM;AACb,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,WAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAK;AAAA,QACL,WAAW,cAAc;AAAA,QACzB,cAAa;AAAA,QACb,SAAQ;AAAA,QAEP;AAAA,WAAC,cACA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,EAAE,IAAI,UAAU;AAAA,cAChC,eAAe;AAAA,cACf,mBAAmB;AAAA,cACnB,QAAQ;AAAA;AAAA,UACV;AAAA,UAED,cAAc;AAAA,UACd,SAAS,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,WAAW,OAAO,GAAI,iBAAM;AAAA;AAAA;AAAA,IACpE;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,9 @@ import { useState } from "react";
|
|
|
4
4
|
import DSButton from "@elliemae/ds-button";
|
|
5
5
|
import { ArrowheadDown } from "@elliemae/ds-icons";
|
|
6
6
|
import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
|
|
7
|
-
import { colors, fonts, sizes, sizesReal } from "../constants";
|
|
8
|
-
import { TippedButton } from "./TippedButton";
|
|
9
|
-
import { TippedSelect } from "./TippedSelect";
|
|
7
|
+
import { colors, fonts, sizes, sizesReal } from "../constants.js";
|
|
8
|
+
import { TippedButton } from "./TippedButton.js";
|
|
9
|
+
import { TippedSelect } from "./TippedSelect.js";
|
|
10
10
|
const optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(" ", "-"));
|
|
11
11
|
const CustomFields = () => /* @__PURE__ */ jsx("span", { children: "\u1438\u1433" });
|
|
12
12
|
const Color = ({ color }) => /* @__PURE__ */ jsx("option", { value: color });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/CustomToolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/control-has-associated-label */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable react/button-has-type */\nimport React, { useState } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport { ArrowheadDown } from '@elliemae/ds-icons';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { colors, fonts, sizes, sizesReal } from '../constants';\nimport { TippedButton } from './TippedButton';\nimport { TippedSelect } from './TippedSelect';\n\n// Functions -----------------------------------------\nconst optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(' ', '-'));\n\n// Stateless Components -----------------------------------------\n\nconst CustomFields = () => <span>\u1438\u1433</span>; // eslint-disable-line react/jsx-one-expression-per-line\nconst Color = ({ color }) => <option value={color} />;\nconst Colors = ({ className, tip, zIndex }) => (\n <TippedSelect className={className} tip={tip} zIndex={zIndex}>\n {colors.map((color) => (\n <Color key={color} color={color} />\n ))}\n </TippedSelect>\n);\n\nexport const CustomDropdown = ({\n options,\n label,\n onSelectMenuItem = () => null,\n onClickOutsideMenu = () => null,\n onClose = () => null,\n closeMenuOnItemSelection,\n isOpen,\n minWidth,\n maxWidth,\n zIndex = 10,\n}) => (\n <DSDropdownMenu\n onClickOutsideMenu={onClickOutsideMenu}\n options={options}\n onSelectMenuItem={onSelectMenuItem}\n onClose={onClose}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n isOpen={isOpen}\n minWidth={minWidth}\n maxWidth={maxWidth}\n zIndex={zIndex}\n preventOverflow=\"scrollParent\"\n triggerComponent={<DSButton labelText={label} buttonType=\"text\" icon={<ArrowheadDown />} />}\n />\n);\n\nconst Divider = () => (\n <div\n style={{\n height: '21px',\n width: '1px',\n margin: '0 10px',\n padding: '0',\n borderLeft: '1px solid #bbb',\n display: 'inline-block',\n }}\n ></div>\n);\n\nexport const CustomToolbar = ({\n customFields,\n customItems = [],\n hideItems = {},\n onShowHTML = () => {},\n id = 'toolbar',\n userProps,\n}) => {\n const {\n HEADER,\n FONT,\n FONT_SIZE,\n BOLD,\n ITALIC,\n UNDERLINE,\n STRIKE,\n SUB,\n SUPER,\n ORDERED_LIST,\n BULLET_LIST,\n INDENT_MINUS_ONE,\n INDENT_PLUS_ONE,\n ALIGN,\n FONT_COLOR,\n FONT_BACKGROUND_COLOR,\n HYPERLINK,\n IMAGE,\n CLEAR_FORMAT,\n SHOW_HTML,\n } = hideItems;\n const [showHTML, setShowHTML] = useState(false);\n\n const handleShowHTML = (e) => {\n e.preventDefault();\n setShowHTML(!showHTML);\n onShowHTML();\n };\n\n return (\n <div id={id} className=\"ds-ql-custom-toolbar\">\n {(!HEADER || !FONT || !FONT_SIZE) && (\n <span className=\"ql-formats\">\n {!HEADER && (\n <>\n <TippedSelect\n className=\"ql-header\"\n tip=\"Header\"\n values={['', '1', '2', '3', '4', '5', '6']}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n {!FONT && (\n <>\n <TippedSelect\n className=\"ql-font\"\n defaultValue=\"sans-serif\"\n options={fonts}\n tip=\"Font\"\n values={optionsToValues(fonts)}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n {!FONT_SIZE && (\n <>\n <TippedSelect\n className=\"ql-size\"\n options={sizes}\n tip=\"Font Size\"\n values={optionsToValues(sizesReal)}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n </span>\n )}\n {(!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && (\n <span className=\"ql-formats\">\n {!BOLD && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-bold\" tip=\"Bold\" />}\n {!ITALIC && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-italic\" tip=\"Italic\" />}\n {!UNDERLINE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-underline\" tip=\"Underline\" />}\n {!STRIKE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-strike\" tip=\"Strike\" />}\n </span>\n )}\n {(!SUB || !SUPER) && (\n <span className=\"ql-formats\">\n {!SUB && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Sub\" value=\"sub\" />}\n {!SUPER && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Super\" value=\"super\" />}\n <Divider />\n </span>\n )}\n {(!ORDERED_LIST || !BULLET_LIST) && (\n <span className=\"ql-formats\">\n {!ORDERED_LIST && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Ordered List\" value=\"ordered\" />\n )}\n {!BULLET_LIST && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Bullet List\" value=\"bullet\" />\n )}\n </span>\n )}\n {(!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && (\n <span className=\"ql-formats\">\n {!INDENT_MINUS_ONE && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent -1\" value=\"-1\" />\n )}\n {!INDENT_PLUS_ONE && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent +1\" value=\"+1\" />\n )}\n </span>\n )}\n {!ALIGN && (\n <span className=\"ql-formats\">\n <TippedSelect zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Align\" />\n <Divider />\n </span>\n )}\n {(!FONT_COLOR || !FONT_BACKGROUND_COLOR) && (\n <span className=\"ql-formats\">\n {!FONT_COLOR && <Colors zIndex={userProps?.zIndex || 1} className=\"ql-color\" tip=\"Font Color\" />}\n {!FONT_BACKGROUND_COLOR && (\n <Colors zIndex={userProps?.zIndex || 1} className=\"ql-background\" tip=\"Font Background Color\" />\n )}\n <Divider />\n </span>\n )}\n {(!HYPERLINK || !IMAGE) && (\n <span className=\"ql-formats\">\n {!HYPERLINK && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-link\" tip=\"Hyperlink: Select Text First\" />\n )}\n {!IMAGE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-image\" tip=\"Insert Image\" />}\n <Divider />\n </span>\n )}\n {!CLEAR_FORMAT && (\n <span className=\"ql-formats\">\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-clean\" tip=\"Clear Format (Select Text)\" />\n </span>\n )}\n {!SHOW_HTML && (\n <span className=\"ql-formats\">\n <Divider />\n <TippedButton\n zIndex={userProps?.zIndex || 1}\n style={{\n width: 'fit-content',\n color: '#1e79c2',\n fontWeight: '500',\n }}\n onClick={handleShowHTML}\n tip={showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n className=\"ql-customFields-html\"\n >\n {showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n </TippedButton>\n </span>\n )}\n {customFields && (\n <span className=\"ql-formats\">\n <Divider />\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-customFields\" tip=\"Insert Custom Field\">\n <CustomFields />\n </TippedButton>\n </span>\n )}\n {customItems && (\n <span style={{ display: 'inline-flex' }}>\n {customItems.map((Item) => (\n <>\n <Divider />\n <Item />\n </>\n ))}\n </span>\n )}\n </div>\n );\n};\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/control-has-associated-label */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable react/button-has-type */\nimport React, { useState } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport { ArrowheadDown } from '@elliemae/ds-icons';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { colors, fonts, sizes, sizesReal } from '../constants.js';\nimport { TippedButton } from './TippedButton.js';\nimport { TippedSelect } from './TippedSelect.js';\n\n// Functions -----------------------------------------\nconst optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(' ', '-'));\n\n// Stateless Components -----------------------------------------\n\nconst CustomFields = () => <span>\u1438\u1433</span>; // eslint-disable-line react/jsx-one-expression-per-line\nconst Color = ({ color }) => <option value={color} />;\nconst Colors = ({ className, tip, zIndex }) => (\n <TippedSelect className={className} tip={tip} zIndex={zIndex}>\n {colors.map((color) => (\n <Color key={color} color={color} />\n ))}\n </TippedSelect>\n);\n\nexport const CustomDropdown = ({\n options,\n label,\n onSelectMenuItem = () => null,\n onClickOutsideMenu = () => null,\n onClose = () => null,\n closeMenuOnItemSelection,\n isOpen,\n minWidth,\n maxWidth,\n zIndex = 10,\n}) => (\n <DSDropdownMenu\n onClickOutsideMenu={onClickOutsideMenu}\n options={options}\n onSelectMenuItem={onSelectMenuItem}\n onClose={onClose}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n isOpen={isOpen}\n minWidth={minWidth}\n maxWidth={maxWidth}\n zIndex={zIndex}\n preventOverflow=\"scrollParent\"\n triggerComponent={<DSButton labelText={label} buttonType=\"text\" icon={<ArrowheadDown />} />}\n />\n);\n\nconst Divider = () => (\n <div\n style={{\n height: '21px',\n width: '1px',\n margin: '0 10px',\n padding: '0',\n borderLeft: '1px solid #bbb',\n display: 'inline-block',\n }}\n ></div>\n);\n\nexport const CustomToolbar = ({\n customFields,\n customItems = [],\n hideItems = {},\n onShowHTML = () => {},\n id = 'toolbar',\n userProps,\n}) => {\n const {\n HEADER,\n FONT,\n FONT_SIZE,\n BOLD,\n ITALIC,\n UNDERLINE,\n STRIKE,\n SUB,\n SUPER,\n ORDERED_LIST,\n BULLET_LIST,\n INDENT_MINUS_ONE,\n INDENT_PLUS_ONE,\n ALIGN,\n FONT_COLOR,\n FONT_BACKGROUND_COLOR,\n HYPERLINK,\n IMAGE,\n CLEAR_FORMAT,\n SHOW_HTML,\n } = hideItems;\n const [showHTML, setShowHTML] = useState(false);\n\n const handleShowHTML = (e) => {\n e.preventDefault();\n setShowHTML(!showHTML);\n onShowHTML();\n };\n\n return (\n <div id={id} className=\"ds-ql-custom-toolbar\">\n {(!HEADER || !FONT || !FONT_SIZE) && (\n <span className=\"ql-formats\">\n {!HEADER && (\n <>\n <TippedSelect\n className=\"ql-header\"\n tip=\"Header\"\n values={['', '1', '2', '3', '4', '5', '6']}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n {!FONT && (\n <>\n <TippedSelect\n className=\"ql-font\"\n defaultValue=\"sans-serif\"\n options={fonts}\n tip=\"Font\"\n values={optionsToValues(fonts)}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n {!FONT_SIZE && (\n <>\n <TippedSelect\n className=\"ql-size\"\n options={sizes}\n tip=\"Font Size\"\n values={optionsToValues(sizesReal)}\n zIndex={userProps?.zIndex || 1}\n />\n <Divider />\n </>\n )}\n </span>\n )}\n {(!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && (\n <span className=\"ql-formats\">\n {!BOLD && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-bold\" tip=\"Bold\" />}\n {!ITALIC && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-italic\" tip=\"Italic\" />}\n {!UNDERLINE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-underline\" tip=\"Underline\" />}\n {!STRIKE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-strike\" tip=\"Strike\" />}\n </span>\n )}\n {(!SUB || !SUPER) && (\n <span className=\"ql-formats\">\n {!SUB && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Sub\" value=\"sub\" />}\n {!SUPER && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Super\" value=\"super\" />}\n <Divider />\n </span>\n )}\n {(!ORDERED_LIST || !BULLET_LIST) && (\n <span className=\"ql-formats\">\n {!ORDERED_LIST && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Ordered List\" value=\"ordered\" />\n )}\n {!BULLET_LIST && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Bullet List\" value=\"bullet\" />\n )}\n </span>\n )}\n {(!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && (\n <span className=\"ql-formats\">\n {!INDENT_MINUS_ONE && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent -1\" value=\"-1\" />\n )}\n {!INDENT_PLUS_ONE && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent +1\" value=\"+1\" />\n )}\n </span>\n )}\n {!ALIGN && (\n <span className=\"ql-formats\">\n <TippedSelect zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Align\" />\n <Divider />\n </span>\n )}\n {(!FONT_COLOR || !FONT_BACKGROUND_COLOR) && (\n <span className=\"ql-formats\">\n {!FONT_COLOR && <Colors zIndex={userProps?.zIndex || 1} className=\"ql-color\" tip=\"Font Color\" />}\n {!FONT_BACKGROUND_COLOR && (\n <Colors zIndex={userProps?.zIndex || 1} className=\"ql-background\" tip=\"Font Background Color\" />\n )}\n <Divider />\n </span>\n )}\n {(!HYPERLINK || !IMAGE) && (\n <span className=\"ql-formats\">\n {!HYPERLINK && (\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-link\" tip=\"Hyperlink: Select Text First\" />\n )}\n {!IMAGE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-image\" tip=\"Insert Image\" />}\n <Divider />\n </span>\n )}\n {!CLEAR_FORMAT && (\n <span className=\"ql-formats\">\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-clean\" tip=\"Clear Format (Select Text)\" />\n </span>\n )}\n {!SHOW_HTML && (\n <span className=\"ql-formats\">\n <Divider />\n <TippedButton\n zIndex={userProps?.zIndex || 1}\n style={{\n width: 'fit-content',\n color: '#1e79c2',\n fontWeight: '500',\n }}\n onClick={handleShowHTML}\n tip={showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n className=\"ql-customFields-html\"\n >\n {showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n </TippedButton>\n </span>\n )}\n {customFields && (\n <span className=\"ql-formats\">\n <Divider />\n <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-customFields\" tip=\"Insert Custom Field\">\n <CustomFields />\n </TippedButton>\n </span>\n )}\n {customItems && (\n <span style={{ display: 'inline-flex' }}>\n {customItems.map((Item) => (\n <>\n <Divider />\n <Item />\n </>\n ))}\n </span>\n )}\n </div>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACmBI,SA6Ff,UA7Fe,KA6Ff,YA7Fe;AAb3B,SAAgB,gBAAgB;AAChC,OAAO,cAAc;AACrB,SAAS,qBAAqB;AAC9B,OAAO,oBAAoB;AAC3B,SAAS,QAAQ,OAAO,OAAO,iBAAiB;AAChD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,YAAY,QAAQ,IAAI,CAAC,QAAQ,IAAI,YAAY,EAAE,QAAQ,KAAK,GAAG,CAAC;AAI7F,MAAM,eAAe,MAAM,oBAAC,UAAK,0BAAE;AACnC,MAAM,QAAQ,CAAC,EAAE,MAAM,MAAM,oBAAC,YAAO,OAAO,OAAO;AACnD,MAAM,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,MACvC,oBAAC,gBAAa,WAAsB,KAAU,QAC3C,iBAAO,IAAI,CAAC,UACX,oBAAC,SAAkB,SAAP,KAAqB,CAClC,GACH;AAGK,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,mBAAmB,MAAM;AAAA,EACzB,qBAAqB,MAAM;AAAA,EAC3B,UAAU,MAAM;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAgB;AAAA,IAChB,kBAAkB,oBAAC,YAAS,WAAW,OAAO,YAAW,QAAO,MAAM,oBAAC,iBAAc,GAAI;AAAA;AAC3F;AAGF,MAAM,UAAU,MACd;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA;AACD;AAGI,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc,CAAC;AAAA,EACf,YAAY,CAAC;AAAA,EACb,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,KAAK;AAAA,EACL;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,iBAAiB,CAAC,MAAM;AAC5B,MAAE,eAAe;AACjB,gBAAY,CAAC,QAAQ;AACrB,eAAW;AAAA,EACb;AAEA,SACE,qBAAC,SAAI,IAAQ,WAAU,wBACnB;AAAA,MAAC,UAAU,CAAC,QAAQ,CAAC,cACrB,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,UACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAI;AAAA,YACJ,QAAQ,CAAC,IAAI,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAAA,YACzC,QAAQ,WAAW,UAAU;AAAA;AAAA,QAC/B;AAAA,QACA,oBAAC,WAAQ;AAAA,SACX;AAAA,MAED,CAAC,QACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAa;AAAA,YACb,SAAS;AAAA,YACT,KAAI;AAAA,YACJ,QAAQ,gBAAgB,KAAK;AAAA,YAC7B,QAAQ,WAAW,UAAU;AAAA;AAAA,QAC/B;AAAA,QACA,oBAAC,WAAQ;AAAA,SACX;AAAA,MAED,CAAC,aACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAI;AAAA,YACJ,QAAQ,gBAAgB,SAAS;AAAA,YACjC,QAAQ,WAAW,UAAU;AAAA;AAAA,QAC/B;AAAA,QACA,oBAAC,WAAQ;AAAA,SACX;AAAA,OAEJ;AAAA,KAEA,CAAC,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,WACnC,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,QAAQ,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,WAAU,KAAI,QAAO;AAAA,MACtF,CAAC,UAAU,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,UAAS;AAAA,MAC5F,CAAC,aAAa,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,gBAAe,KAAI,aAAY;AAAA,MACrG,CAAC,UAAU,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,UAAS;AAAA,OAC/F;AAAA,KAEA,CAAC,OAAO,CAAC,UACT,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,OAAO,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,OAAM,OAAM,OAAM;AAAA,MAClG,CAAC,SAAS,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,SAAQ,OAAM,SAAQ;AAAA,MACzG,oBAAC,WAAQ;AAAA,OACX;AAAA,KAEA,CAAC,gBAAgB,CAAC,gBAClB,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,gBACA,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,WAAU,KAAI,gBAAe,OAAM,WAAU;AAAA,MAEtG,CAAC,eACA,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,WAAU,KAAI,eAAc,OAAM,UAAS;AAAA,OAEvG;AAAA,KAEA,CAAC,oBAAoB,CAAC,oBACtB,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,oBACA,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,aAAY,OAAM,MAAK;AAAA,MAEhG,CAAC,mBACA,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,aAAY,KAAI,aAAY,OAAM,MAAK;AAAA,OAEnG;AAAA,IAED,CAAC,SACA,qBAAC,UAAK,WAAU,cACd;AAAA,0BAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,YAAW,KAAI,SAAQ;AAAA,MAC/E,oBAAC,WAAQ;AAAA,OACX;AAAA,KAEA,CAAC,cAAc,CAAC,0BAChB,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,cAAc,oBAAC,UAAO,QAAQ,WAAW,UAAU,GAAG,WAAU,YAAW,KAAI,cAAa;AAAA,MAC7F,CAAC,yBACA,oBAAC,UAAO,QAAQ,WAAW,UAAU,GAAG,WAAU,iBAAgB,KAAI,yBAAwB;AAAA,MAEhG,oBAAC,WAAQ;AAAA,OACX;AAAA,KAEA,CAAC,aAAa,CAAC,UACf,qBAAC,UAAK,WAAU,cACb;AAAA,OAAC,aACA,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,WAAU,KAAI,gCAA+B;AAAA,MAEtG,CAAC,SAAS,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,YAAW,KAAI,gBAAe;AAAA,MACjG,oBAAC,WAAQ;AAAA,OACX;AAAA,IAED,CAAC,gBACA,oBAAC,UAAK,WAAU,cACd,8BAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,YAAW,KAAI,8BAA6B,GACtG;AAAA,IAED,CAAC,aACA,qBAAC,UAAK,WAAU,cACd;AAAA,0BAAC,WAAQ;AAAA,MACT;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,WAAW,UAAU;AAAA,UAC7B,OAAO;AAAA,YACL,OAAO;AAAA,YACP,OAAO;AAAA,YACP,YAAY;AAAA,UACd;AAAA,UACA,SAAS;AAAA,UACT,KAAK,WAAW,cAAc;AAAA,UAC9B,WAAU;AAAA,UAET,qBAAW,cAAc;AAAA;AAAA,MAC5B;AAAA,OACF;AAAA,IAED,gBACC,qBAAC,UAAK,WAAU,cACd;AAAA,0BAAC,WAAQ;AAAA,MACT,oBAAC,gBAAa,QAAQ,WAAW,UAAU,GAAG,WAAU,mBAAkB,KAAI,uBAC5E,8BAAC,gBAAa,GAChB;AAAA,OACF;AAAA,IAED,eACC,oBAAC,UAAK,OAAO,EAAE,SAAS,cAAc,GACnC,sBAAY,IAAI,CAAC,SAChB,iCACE;AAAA,0BAAC,WAAQ;AAAA,MACT,oBAAC,QAAK;AAAA,OACR,CACD,GACH;AAAA,KAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,18 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
import ReactQuill, { Quill } from "react-quill";
|
|
5
5
|
import BlotFormatter from "quill-blot-formatter";
|
|
6
|
-
import ImageLibraryModal from "./ImageLibraryModal";
|
|
7
|
-
import InsertFieldModal from "./InsertFieldModal";
|
|
8
|
-
import { CustomToolbar } from "./CustomToolbar";
|
|
9
|
-
import IndentStyle from "../quillOverrides/IndentStyle";
|
|
10
|
-
import LinkFormat from "../quillOverrides/LinkFormat";
|
|
11
|
-
import Image from "../quillOverrides/Image";
|
|
12
|
-
import { formatHTML } from "../utils";
|
|
13
|
-
import { clipboardLinkWithTagMatcher } from "../quillMatchers/clipboardLinkWithTagMatcher";
|
|
6
|
+
import ImageLibraryModal from "./ImageLibraryModal.js";
|
|
7
|
+
import InsertFieldModal from "./InsertFieldModal.js";
|
|
8
|
+
import { CustomToolbar } from "./CustomToolbar.js";
|
|
9
|
+
import IndentStyle from "../quillOverrides/IndentStyle.js";
|
|
10
|
+
import LinkFormat from "../quillOverrides/LinkFormat.js";
|
|
11
|
+
import Image from "../quillOverrides/Image.js";
|
|
12
|
+
import { formatHTML } from "../utils.js";
|
|
13
|
+
import { clipboardLinkWithTagMatcher } from "../quillMatchers/clipboardLinkWithTagMatcher.js";
|
|
14
|
+
import { uid } from "uid";
|
|
14
15
|
Quill.register("modules/blotFormatter", BlotFormatter);
|
|
15
16
|
const AlignStyle = Quill.import("attributors/style/align");
|
|
16
17
|
const FontStyle = Quill.import("attributors/style/font");
|
|
17
18
|
FontStyle.whitelist = [
|
|
19
|
+
// allow ONLY these fonts and the default
|
|
18
20
|
"serif",
|
|
19
21
|
"monospace",
|
|
20
22
|
"arial",
|
|
@@ -26,6 +28,7 @@ FontStyle.whitelist = [
|
|
|
26
28
|
];
|
|
27
29
|
const SizeStyle = Quill.import("attributors/style/size");
|
|
28
30
|
SizeStyle.whitelist = [
|
|
31
|
+
// allow ONLY these sizes and the default
|
|
29
32
|
"x-small",
|
|
30
33
|
"large",
|
|
31
34
|
"x-large"
|
|
@@ -49,14 +52,18 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
|
49
52
|
}
|
|
50
53
|
},
|
|
51
54
|
clipboard: {
|
|
55
|
+
// toggle to add extra line breaks when pasting HTML:
|
|
52
56
|
matchVisual: false
|
|
53
57
|
},
|
|
54
|
-
|
|
58
|
+
// this next line breaks the component with the last version 2.0.0
|
|
59
|
+
// blotFormatter: {
|
|
60
|
+
// options... https://github.com/Fandom-OSS/quill-blot-formatter
|
|
61
|
+
// },
|
|
55
62
|
...this.props.quillModules
|
|
56
63
|
};
|
|
57
64
|
this.getEditor = () => this.quill?.getEditor();
|
|
65
|
+
// eslint-disable-next-line max-params
|
|
58
66
|
this.onChangeQuill = (html, delta, source, editor) => {
|
|
59
|
-
console.log("quill detected a change");
|
|
60
67
|
const { showRawHTML, onChange } = this.props;
|
|
61
68
|
if (!showRawHTML)
|
|
62
69
|
onChange(html, delta, source, editor);
|
|
@@ -92,9 +99,12 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
|
92
99
|
if (props.quillOverrides.length) {
|
|
93
100
|
props.quillOverrides.map((override) => Quill.register(override, true));
|
|
94
101
|
}
|
|
102
|
+
const instanceUid = uid(12);
|
|
95
103
|
this.state = {
|
|
96
104
|
isImageModalOpen: false,
|
|
97
|
-
isFieldModalOpen: false
|
|
105
|
+
isFieldModalOpen: false,
|
|
106
|
+
uid: instanceUid,
|
|
107
|
+
uniqueClassName: `ds-wysiwyg-editor-${instanceUid}`
|
|
98
108
|
};
|
|
99
109
|
const { toolbar } = this.quillModules;
|
|
100
110
|
if (props.imagesData) {
|
|
@@ -133,16 +143,32 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
|
133
143
|
customFields,
|
|
134
144
|
imagesData,
|
|
135
145
|
customToolbar,
|
|
136
|
-
handleImageClick,
|
|
137
|
-
handleCustomFieldClick,
|
|
138
146
|
height,
|
|
139
147
|
value,
|
|
140
148
|
showRawHTML,
|
|
141
149
|
onShowHTML,
|
|
142
|
-
onChange,
|
|
143
150
|
hideItems,
|
|
151
|
+
bounds,
|
|
152
|
+
// a bunch of props we don't want to pass to the editor
|
|
153
|
+
onChange,
|
|
154
|
+
handleImageClick,
|
|
155
|
+
handleCustomFieldClick,
|
|
144
156
|
...editorProps
|
|
145
157
|
} = this.props;
|
|
158
|
+
let finalBoundElement = document.body;
|
|
159
|
+
if (typeof bounds !== "undefined" && // there is no sure-fire way to check if something is a DOM element
|
|
160
|
+
// checking classList existance && that it's an instance of DOMTokenList is a close enough check for most cases
|
|
161
|
+
bounds?.classList && bounds?.classList instanceof DOMTokenList) {
|
|
162
|
+
finalBoundElement = bounds;
|
|
163
|
+
}
|
|
164
|
+
const elementsWithClass = document.querySelectorAll(`.${this.state.uniqueClassName}`);
|
|
165
|
+
elementsWithClass.forEach((element) => {
|
|
166
|
+
element.classList.remove(this.state.uniqueClassName);
|
|
167
|
+
});
|
|
168
|
+
if (!finalBoundElement.classList.contains(this.state.uniqueClassName)) {
|
|
169
|
+
finalBoundElement.classList.add(this.state.uniqueClassName);
|
|
170
|
+
}
|
|
171
|
+
const boundsWorkaround = `.${this.state.uniqueClassName}`;
|
|
146
172
|
return /* @__PURE__ */ jsxs(
|
|
147
173
|
"div",
|
|
148
174
|
{
|
|
@@ -169,6 +195,7 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
|
|
|
169
195
|
height,
|
|
170
196
|
borderBottom: "1px solid #ccc"
|
|
171
197
|
},
|
|
198
|
+
bounds: boundsWorkaround,
|
|
172
199
|
...editorProps,
|
|
173
200
|
id: "wysiwyg-text-container"
|
|
174
201
|
}
|