@elliemae/ds-wysiwygeditor 2.2.0 → 2.3.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSWYSIWYGEditor.js +83 -72
- package/cjs/DSWYSIWYGEditor.js.map +7 -0
- package/cjs/components/CustomImageUploader.js +92 -94
- package/cjs/components/CustomImageUploader.js.map +7 -0
- package/cjs/components/CustomToolbar.js +172 -193
- package/cjs/components/CustomToolbar.js.map +7 -0
- package/cjs/components/DSWYSIWYGEditorImpl.js +147 -185
- package/cjs/components/DSWYSIWYGEditorImpl.js.map +7 -0
- package/cjs/components/ImageLibraryModal.js +75 -55
- package/cjs/components/ImageLibraryModal.js.map +7 -0
- package/cjs/components/InsertFieldModal.js +109 -142
- package/cjs/components/InsertFieldModal.js.map +7 -0
- package/cjs/components/TippedButton.js +56 -54
- package/cjs/components/TippedButton.js.map +7 -0
- package/cjs/components/TippedSelect.js +50 -39
- package/cjs/components/TippedSelect.js.map +7 -0
- package/cjs/components/colors.js +41 -21
- package/cjs/components/colors.js.map +7 -0
- package/cjs/components/customFields.js +66 -47
- package/cjs/components/customFields.js.map +7 -0
- package/cjs/constants.js +112 -38
- package/cjs/constants.js.map +7 -0
- package/cjs/index.js +39 -21
- package/cjs/index.js.map +7 -0
- package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js +37 -22
- package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
- package/cjs/quillOverrides/IndentStyle.js +41 -19
- package/cjs/quillOverrides/IndentStyle.js.map +7 -0
- package/cjs/quillOverrides/LinkFormat.js +57 -39
- package/cjs/quillOverrides/LinkFormat.js.map +7 -0
- package/cjs/quillOverrides/PlainClipboard.js +41 -21
- package/cjs/quillOverrides/PlainClipboard.js.map +7 -0
- package/cjs/utils.js +41 -18
- package/cjs/utils.js.map +7 -0
- package/esm/DSWYSIWYGEditor.js +50 -58
- package/esm/DSWYSIWYGEditor.js.map +7 -0
- package/esm/components/CustomImageUploader.js +60 -81
- package/esm/components/CustomImageUploader.js.map +7 -0
- package/esm/components/CustomToolbar.js +145 -184
- package/esm/components/CustomToolbar.js.map +7 -0
- package/esm/components/DSWYSIWYGEditorImpl.js +113 -169
- package/esm/components/DSWYSIWYGEditorImpl.js.map +7 -0
- package/esm/components/ImageLibraryModal.js +46 -47
- package/esm/components/ImageLibraryModal.js.map +7 -0
- package/esm/components/InsertFieldModal.js +72 -124
- package/esm/components/InsertFieldModal.js.map +7 -0
- package/esm/components/TippedButton.js +27 -44
- package/esm/components/TippedButton.js.map +7 -0
- package/esm/components/TippedSelect.js +21 -31
- package/esm/components/TippedSelect.js.map +7 -0
- package/esm/components/colors.js +12 -17
- package/esm/components/colors.js.map +7 -0
- package/esm/components/customFields.js +38 -40
- package/esm/components/customFields.js.map +7 -0
- package/esm/constants.js +83 -30
- package/esm/constants.js.map +7 -0
- package/esm/index.js +10 -4
- package/esm/index.js.map +7 -0
- package/esm/quillMatchers/clipboardLinkWithTagMatcher.js +8 -18
- package/esm/quillMatchers/clipboardLinkWithTagMatcher.js.map +7 -0
- package/esm/quillOverrides/IndentStyle.js +12 -17
- package/esm/quillOverrides/IndentStyle.js.map +7 -0
- package/esm/quillOverrides/LinkFormat.js +28 -37
- package/esm/quillOverrides/LinkFormat.js.map +7 -0
- package/esm/quillOverrides/PlainClipboard.js +12 -19
- package/esm/quillOverrides/PlainClipboard.js.map +7 -0
- package/esm/utils.js +12 -14
- package/esm/utils.js.map +7 -0
- package/package.json +9 -9
package/esm/constants.js
CHANGED
|
@@ -1,32 +1,85 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getRainbowColors } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { getRainbowColors } from "./components/colors";
|
|
3
|
+
const colors = [
|
|
4
|
+
"#000000",
|
|
5
|
+
"#e60000",
|
|
6
|
+
"#ff9900",
|
|
7
|
+
"#ffff00",
|
|
8
|
+
"#008A00",
|
|
9
|
+
"#0066cc",
|
|
10
|
+
"#9933ff",
|
|
11
|
+
"#ffffff",
|
|
12
|
+
"#facccc",
|
|
13
|
+
"#ffebcc",
|
|
14
|
+
"#ffffcc",
|
|
15
|
+
"#cce8cc",
|
|
16
|
+
"#cce0f5",
|
|
17
|
+
"#ebd6ff",
|
|
18
|
+
"#bbbbbb",
|
|
19
|
+
"#f06666",
|
|
20
|
+
"#ffc266",
|
|
21
|
+
"#ffff66",
|
|
22
|
+
"#66b966",
|
|
23
|
+
"#66a3e0",
|
|
24
|
+
"#c285ff",
|
|
25
|
+
"#888888",
|
|
26
|
+
"#a10000",
|
|
27
|
+
"#b26b00",
|
|
28
|
+
"#b2b200",
|
|
29
|
+
"#006100",
|
|
30
|
+
"#0047b2",
|
|
31
|
+
"#6b24b2",
|
|
32
|
+
"#444444",
|
|
33
|
+
"#5c0000",
|
|
34
|
+
"#663d00",
|
|
35
|
+
"#666600",
|
|
36
|
+
"#003700",
|
|
37
|
+
"#002966",
|
|
38
|
+
"#3d1466",
|
|
39
|
+
...getRainbowColors(28)
|
|
40
|
+
];
|
|
41
|
+
const fonts = [
|
|
42
|
+
"Sans Serif",
|
|
43
|
+
"Serif",
|
|
44
|
+
"Monospace",
|
|
45
|
+
"Arial",
|
|
46
|
+
"Georgia",
|
|
47
|
+
"Helvetica"
|
|
48
|
+
];
|
|
49
|
+
const sizes = ["Small", "Normal", "Large", "Huge"];
|
|
50
|
+
const sizesReal = [
|
|
51
|
+
"X-Small",
|
|
52
|
+
"Normal",
|
|
53
|
+
"Large",
|
|
54
|
+
"X-Large"
|
|
55
|
+
];
|
|
9
56
|
const defaultItems = {
|
|
10
|
-
HEADER:
|
|
11
|
-
FONT:
|
|
12
|
-
FONT_SIZE:
|
|
13
|
-
BOLD:
|
|
14
|
-
ITALIC:
|
|
15
|
-
UNDERLINE:
|
|
16
|
-
STRIKE:
|
|
17
|
-
SUB:
|
|
18
|
-
SUPER:
|
|
19
|
-
ORDERED_LIST:
|
|
20
|
-
BULLET_LIST:
|
|
21
|
-
INDENT_MINUS_ONE:
|
|
22
|
-
INDENT_PLUS_ONE:
|
|
23
|
-
ALIGN:
|
|
24
|
-
FONT_COLOR:
|
|
25
|
-
FONT_BACKGROUND_COLOR:
|
|
26
|
-
HYPERLINK:
|
|
27
|
-
IMAGE:
|
|
28
|
-
CLEAR_FORMAT:
|
|
29
|
-
SHOW_HTML:
|
|
57
|
+
HEADER: "header",
|
|
58
|
+
FONT: "font",
|
|
59
|
+
FONT_SIZE: "size",
|
|
60
|
+
BOLD: "bold",
|
|
61
|
+
ITALIC: "italic",
|
|
62
|
+
UNDERLINE: "underline",
|
|
63
|
+
STRIKE: "strike",
|
|
64
|
+
SUB: "sub",
|
|
65
|
+
SUPER: "super",
|
|
66
|
+
ORDERED_LIST: "ordered list",
|
|
67
|
+
BULLET_LIST: "bullet list",
|
|
68
|
+
INDENT_MINUS_ONE: "indent -1",
|
|
69
|
+
INDENT_PLUS_ONE: "indent +1",
|
|
70
|
+
ALIGN: "align",
|
|
71
|
+
FONT_COLOR: "font color",
|
|
72
|
+
FONT_BACKGROUND_COLOR: "font background color",
|
|
73
|
+
HYPERLINK: "hyperlink",
|
|
74
|
+
IMAGE: "image",
|
|
75
|
+
CLEAR_FORMAT: "clear format",
|
|
76
|
+
SHOW_HTML: "show html"
|
|
30
77
|
};
|
|
31
|
-
|
|
32
|
-
|
|
78
|
+
export {
|
|
79
|
+
colors,
|
|
80
|
+
defaultItems,
|
|
81
|
+
fonts,
|
|
82
|
+
sizes,
|
|
83
|
+
sizesReal
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAEO,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,GAAG,iBAAiB;AAAA;AAEf,MAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEK,MAAM,QAAQ,CAAC,SAAS,UAAU,SAAS;AAC3C,MAAM,YAAY;AAAA,EAEvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAGK,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;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { default as default2, WYSIWYWithSchema } from "./DSWYSIWYGEditor";
|
|
3
|
+
export * from "./components/CustomToolbar";
|
|
4
|
+
export * from "./components/CustomImageUploader";
|
|
5
|
+
export * from "./constants";
|
|
6
|
+
export {
|
|
7
|
+
WYSIWYWithSchema,
|
|
8
|
+
default2 as default
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, WYSIWYWithSchema } from './DSWYSIWYGEditor';\nexport * from './components/CustomToolbar';\nexport * from './components/CustomImageUploader';\nexport * from './constants';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,29 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
3
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
|
-
import 'core-js/modules/esnext.iterator.find.js';
|
|
5
|
-
import 'core-js/modules/es.string.replace.js';
|
|
6
|
-
|
|
1
|
+
import * as React from "react";
|
|
7
2
|
const hrefTagRegexp = /%7B%7B.+%7D%7D/gm;
|
|
8
3
|
const clipboardLinkWithTagMatcher = (node, delta) => {
|
|
9
4
|
if (node.origin === window.location.origin) {
|
|
10
5
|
const nodeHref = node.href;
|
|
11
6
|
const tagMatch = nodeHref.match(hrefTagRegexp);
|
|
12
|
-
|
|
13
7
|
if (tagMatch) {
|
|
14
|
-
var _delta$ops;
|
|
15
|
-
|
|
16
8
|
const [overWrittenHrefValue] = tagMatch;
|
|
17
|
-
const insertLinkOperation = delta
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return operation === null || operation === void 0 ? void 0 : (_operation$attributes = operation.attributes) === null || _operation$attributes === void 0 ? void 0 : (_operation$attributes2 = _operation$attributes.link) === null || _operation$attributes2 === void 0 ? void 0 : (_operation$attributes3 = _operation$attributes2.match) === null || _operation$attributes3 === void 0 ? void 0 : _operation$attributes3.call(_operation$attributes2, hrefTagRegexp);
|
|
21
|
-
});
|
|
22
|
-
if (insertLinkOperation) insertLinkOperation.attributes.link = overWrittenHrefValue.replace(/%7B%7B/gm, '{{').replace(/%7D%7D/gm, '}}');
|
|
9
|
+
const insertLinkOperation = delta?.ops?.find((operation) => operation?.attributes?.link?.match?.(hrefTagRegexp));
|
|
10
|
+
if (insertLinkOperation)
|
|
11
|
+
insertLinkOperation.attributes.link = overWrittenHrefValue.replace(/%7B%7B/gm, "{{").replace(/%7D%7D/gm, "}}");
|
|
23
12
|
}
|
|
24
13
|
}
|
|
25
|
-
|
|
26
14
|
return delta;
|
|
27
15
|
};
|
|
28
|
-
|
|
29
|
-
|
|
16
|
+
export {
|
|
17
|
+
clipboardLinkWithTagMatcher
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=clipboardLinkWithTagMatcher.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/quillMatchers/clipboardLinkWithTagMatcher.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import 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"],
|
|
5
|
+
"mappings": "AAAA;ACEA,MAAM,gBAAgB;AACf,MAAM,8BAA8B,CAAC,MAAyB,UAAwB;AAC3F,MAAI,KAAK,WAAW,OAAO,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,SAAS,MAAM;AAChC,QAAI,UAAU;AACZ,YAAM,CAAC,wBAAwB;AAC/B,YAAM,sBAAsB,OAAO,KAAK,KAAK,CAAC,cAAc,WAAW,YAAY,MAAM,QAAQ;AACjG,UAAI;AACF,4BAAoB,WAAW,OAAO,qBAAqB,QAAQ,YAAY,MAAM,QAAQ,YAAY;AAAA;AAAA;AAG/G,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,27 +1,22 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const Parchment = Quill.import(
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Quill } from "react-quill";
|
|
3
|
+
const Parchment = Quill.import("parchment");
|
|
4
4
|
const levels = [1, 2, 3, 4, 5];
|
|
5
5
|
const multiplier = 2;
|
|
6
|
-
|
|
7
6
|
class IndentAttributor extends Parchment.Attributor.Style {
|
|
8
7
|
add(node, value) {
|
|
9
|
-
return super.add(node,
|
|
8
|
+
return super.add(node, `${value * multiplier}em`);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
value(node) {
|
|
13
|
-
return parseFloat(super.value(node)) / multiplier ||
|
|
11
|
+
return parseFloat(super.value(node)) / multiplier || void 0;
|
|
14
12
|
}
|
|
15
|
-
|
|
16
13
|
}
|
|
17
|
-
|
|
18
|
-
* Meant to override quill's indent format's style and add the indentation inline instead of applying a class
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const IndentStyle = new IndentAttributor('indent', 'margin-left', {
|
|
14
|
+
const IndentStyle = new IndentAttributor("indent", "margin-left", {
|
|
23
15
|
scope: Parchment.Scope.BLOCK,
|
|
24
|
-
whitelist: levels.map(value =>
|
|
16
|
+
whitelist: levels.map((value) => `${value * multiplier}em`)
|
|
25
17
|
});
|
|
26
|
-
|
|
27
|
-
export {
|
|
18
|
+
var IndentStyle_default = IndentStyle;
|
|
19
|
+
export {
|
|
20
|
+
IndentStyle_default as default
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=IndentStyle.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/quillOverrides/IndentStyle.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA,MAAM,YAAY,MAAM,OAAO;AAC/B,MAAM,SAAS,CAAC,GAAG,GAAG,GAAG,GAAG;AAC5B,MAAM,aAAa;AAEnB,+BAA+B,UAAU,WAAW,MAAM;AAAA,EACxD,IAAI,MAAM,OAAO;AACf,WAAO,MAAM,IAAI,MAAM,GAAG,QAAQ;AAAA;AAAA,EAGpC,MAAM,MAAM;AACV,WAAO,WAAW,MAAM,MAAM,SAAS,cAAc;AAAA;AAAA;AAOzD,MAAM,cAAc,IAAI,iBAAiB,UAAU,eAAe;AAAA,EAChE,OAAO,UAAU,MAAM;AAAA,EACvB,WAAW,OAAO,IAAI,WAAS,GAAG,QAAQ;AAAA;AAG5C,IAAO,sBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,66 +1,57 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Quill } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Quill } from "react-quill";
|
|
3
|
+
const sanitizeProtocol = (value) => {
|
|
4
|
+
if (typeof value === "boolean")
|
|
5
|
+
return value;
|
|
6
6
|
let newVal = value;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
if (!value.startsWith("http") && !value.startsWith("ftp") && !value.startsWith("mailto:") && !value.startsWith("{{")) {
|
|
8
|
+
if (!value.startsWith("www")) {
|
|
9
|
+
newVal = `https://www.${value}`;
|
|
10
|
+
} else
|
|
11
|
+
newVal = `https://${value}`;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
13
|
return newVal;
|
|
15
14
|
};
|
|
16
|
-
|
|
17
15
|
function getIsValidProtocol(url, protocols) {
|
|
18
|
-
const anchor = document.createElement(
|
|
16
|
+
const anchor = document.createElement("a");
|
|
19
17
|
anchor.href = url;
|
|
20
|
-
const protocol = anchor.href.slice(0, anchor.href.indexOf(
|
|
18
|
+
const protocol = anchor.href.slice(0, anchor.href.indexOf(":"));
|
|
21
19
|
return protocols.indexOf(protocol) > -1;
|
|
22
20
|
}
|
|
23
|
-
|
|
24
|
-
const Link = Quill.import('formats/link');
|
|
25
|
-
|
|
21
|
+
const Link = Quill.import("formats/link");
|
|
26
22
|
class LinkFormat extends Link {
|
|
27
23
|
constructor() {
|
|
28
24
|
super(...arguments);
|
|
29
|
-
this.blotName =
|
|
30
|
-
this.tagName =
|
|
31
|
-
this.SANITIZED_URL =
|
|
32
|
-
this.PROTOCOL_WHITELIST = [
|
|
25
|
+
this.blotName = "link";
|
|
26
|
+
this.tagName = "A";
|
|
27
|
+
this.SANITIZED_URL = "about:blank";
|
|
28
|
+
this.PROTOCOL_WHITELIST = ["http", "ftp", "https", "mailto", "tel"];
|
|
33
29
|
}
|
|
34
|
-
|
|
35
30
|
static create(value) {
|
|
36
31
|
const newVal = sanitizeProtocol(value);
|
|
37
32
|
const node = super.create(newVal);
|
|
38
|
-
node.setAttribute(
|
|
33
|
+
node.setAttribute("href", newVal);
|
|
39
34
|
return node;
|
|
40
35
|
}
|
|
41
|
-
|
|
42
36
|
static formats(domNode) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return domNode === null || domNode === void 0 ? void 0 : (_domNode$getAttribute = domNode.getAttribute) === null || _domNode$getAttribute === void 0 ? void 0 : _domNode$getAttribute.call(domNode, 'href');
|
|
37
|
+
return domNode?.getAttribute?.("href");
|
|
46
38
|
}
|
|
47
|
-
|
|
48
39
|
static sanitize(url) {
|
|
49
40
|
return getIsValidProtocol(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
|
|
50
41
|
}
|
|
51
|
-
|
|
52
42
|
format(name, value) {
|
|
53
|
-
const newVal = sanitizeProtocol(value);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
this.domNode.removeAttribute('href');
|
|
43
|
+
const newVal = sanitizeProtocol(value);
|
|
44
|
+
if (name === "link" && value === false) {
|
|
45
|
+
this.domNode.removeAttribute("href");
|
|
57
46
|
} else if (name !== this.statics.blotName || !newVal) {
|
|
58
47
|
super.format(name, newVal);
|
|
59
48
|
} else {
|
|
60
|
-
this.domNode.setAttribute(
|
|
49
|
+
this.domNode.setAttribute("href", this.constructor.sanitize(newVal));
|
|
61
50
|
}
|
|
62
51
|
}
|
|
63
|
-
|
|
64
52
|
}
|
|
65
|
-
|
|
66
|
-
export {
|
|
53
|
+
var LinkFormat_default = LinkFormat;
|
|
54
|
+
export {
|
|
55
|
+
LinkFormat_default as default
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=LinkFormat.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/quillOverrides/LinkFormat.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { Quill } from 'react-quill';\n\nconst sanitizeProtocol = (value) => {\n if (typeof value === 'boolean') 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"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAEA,MAAM,mBAAmB,CAAC,UAAU;AAClC,MAAI,OAAO,UAAU;AAAW,WAAO;AACvC,MAAI,SAAS;AACb,MACE,CAAC,MAAM,WAAW,WAClB,CAAC,MAAM,WAAW,UAClB,CAAC,MAAM,WAAW,cAClB,CAAC,MAAM,WAAW,OAClB;AACA,QAAI,CAAC,MAAM,WAAW,QAAQ;AAC5B,eAAS,eAAe;AAAA;AACnB,eAAS,WAAW;AAAA;AAE7B,SAAO;AAAA;AAGT,4BAA4B,KAAK,WAAW;AAC1C,QAAM,SAAS,SAAS,cAAc;AACtC,SAAO,OAAO;AACd,QAAM,WAAW,OAAO,KAAK,MAAM,GAAG,OAAO,KAAK,QAAQ;AAC1D,SAAO,UAAU,QAAQ,YAAY;AAAA;AAGvC,MAAM,OAAO,MAAM,OAAO;AAE1B,yBAAyB,KAAK;AAAA,EAA9B,cA5BA;AA4BA;AACE,oBAAW;AAEX,mBAAU;AAEV,yBAAgB;AAEhB,8BAAqB,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA;AAAA,SAEjD,OAAO,OAAO;AACnB,UAAM,SAAS,iBAAiB;AAChC,UAAM,OAAO,MAAM,OAAO;AAC1B,SAAK,aAAa,QAAQ;AAC1B,WAAO;AAAA;AAAA,SAGF,QAAQ,SAAS;AACtB,WAAO,SAAS,eAAe;AAAA;AAAA,SAG1B,SAAS,KAAK;AACnB,WAAO,mBAAmB,KAAK,KAAK,sBAAsB,MAAM,KAAK;AAAA;AAAA,EAGvE,OAAO,MAAM,OAAO;AAClB,UAAM,SAAS,iBAAiB;AAEhC,QAAI,SAAS,UAAU,UAAU,OAAO;AACtC,WAAK,QAAQ,gBAAgB;AAAA,eACpB,SAAS,KAAK,QAAQ,YAAY,CAAC,QAAQ;AACpD,YAAM,OAAO,MAAM;AAAA,WACd;AACL,WAAK,QAAQ,aAAa,QAAQ,KAAK,YAAY,SAAS;AAAA;AAAA;AAAA;AAKlE,IAAO,qBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,25 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const Clipboard = Quill.import(
|
|
4
|
-
const Delta = Quill.import(
|
|
5
|
-
/**
|
|
6
|
-
* Just for the sake of an example. https://quilljs.com/docs/modules/
|
|
7
|
-
*/
|
|
8
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Quill } from "react-quill";
|
|
3
|
+
const Clipboard = Quill.import("modules/clipboard");
|
|
4
|
+
const Delta = Quill.import("delta");
|
|
9
5
|
class PlainClipboard extends Clipboard {
|
|
10
|
-
convert() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (typeof html === 'string') {
|
|
6
|
+
convert(html = null) {
|
|
7
|
+
if (typeof html === "string") {
|
|
14
8
|
this.container.innerHTML = html;
|
|
15
9
|
}
|
|
16
|
-
|
|
17
10
|
const text = this.container.innerText;
|
|
18
|
-
this.container.innerHTML =
|
|
11
|
+
this.container.innerHTML = "";
|
|
19
12
|
return new Delta().insert(text);
|
|
20
13
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
PlainClipboard as default
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=PlainClipboard.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/quillOverrides/PlainClipboard.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA,MAAM,YAAY,MAAM,OAAO;AAC/B,MAAM,QAAQ,MAAM,OAAO;AAK3B,6BAA4C,UAAU;AAAA,EACpD,QAAQ,OAAO,MAAM;AACnB,QAAI,OAAO,SAAS,UAAU;AAC5B,WAAK,UAAU,YAAY;AAAA;AAE7B,UAAM,OAAO,KAAK,UAAU;AAC5B,SAAK,UAAU,YAAY;AAC3B,WAAO,IAAI,QAAQ,OAAO;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/utils.js
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
let result = '';
|
|
8
|
-
let indent = '';
|
|
9
|
-
html.split(/>\s*</).forEach(element => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const formatHTML = (html) => {
|
|
3
|
+
const tab = " ";
|
|
4
|
+
let result = "";
|
|
5
|
+
let indent = "";
|
|
6
|
+
html.split(/>\s*</).forEach((element) => {
|
|
10
7
|
if (element.match(/^\/\w/)) {
|
|
11
8
|
indent = indent.substring(tab.length);
|
|
12
9
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
result += `${indent}<${element}>\r
|
|
11
|
+
`;
|
|
16
12
|
if (element.match(/^<?\w[^>]*[^/]$/)) {
|
|
17
13
|
indent += tab;
|
|
18
14
|
}
|
|
19
15
|
});
|
|
20
16
|
return result.substring(1, result.length - 3);
|
|
21
17
|
};
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
export {
|
|
19
|
+
formatHTML
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=utils.js.map
|
package/esm/utils.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,aAAa,CAAC,SAAS;AAClC,QAAM,MAAM;AACZ,MAAI,SAAS;AACb,MAAI,SAAS;AAEb,OAAK,MAAM,SAAS,QAAQ,CAAC,YAAY;AACvC,QAAI,QAAQ,MAAM,UAAU;AAC1B,eAAS,OAAO,UAAU,IAAI;AAAA;AAGhC,cAAU,GAAG,UAAU;AAAA;AAEvB,QAAI,QAAQ,MAAM,oBAAoB;AACpC,gBAAU;AAAA;AAAA;AAId,SAAO,OAAO,UAAU,GAAG,OAAO,SAAS;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-wysiwygeditor",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0-alpha.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - WYSIWYG Editor",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -96,14 +96,14 @@
|
|
|
96
96
|
"build": "node ../../scripts/build/build.js"
|
|
97
97
|
},
|
|
98
98
|
"dependencies": {
|
|
99
|
-
"@elliemae/ds-button": "2.
|
|
100
|
-
"@elliemae/ds-dropdownmenu": "2.
|
|
101
|
-
"@elliemae/ds-icons": "2.
|
|
102
|
-
"@elliemae/ds-imagelibrarymodal": "2.
|
|
103
|
-
"@elliemae/ds-modal": "2.
|
|
104
|
-
"@elliemae/ds-shared": "2.
|
|
105
|
-
"@elliemae/ds-tooltip": "2.
|
|
106
|
-
"@elliemae/ds-uploader": "2.
|
|
99
|
+
"@elliemae/ds-button": "2.3.0-alpha.3",
|
|
100
|
+
"@elliemae/ds-dropdownmenu": "2.3.0-alpha.3",
|
|
101
|
+
"@elliemae/ds-icons": "2.3.0-alpha.3",
|
|
102
|
+
"@elliemae/ds-imagelibrarymodal": "2.3.0-alpha.3",
|
|
103
|
+
"@elliemae/ds-modal": "2.3.0-alpha.3",
|
|
104
|
+
"@elliemae/ds-shared": "2.3.0-alpha.3",
|
|
105
|
+
"@elliemae/ds-tooltip": "2.3.0-alpha.3",
|
|
106
|
+
"@elliemae/ds-uploader": "2.3.0-alpha.3",
|
|
107
107
|
"prop-types": "~15.7.2",
|
|
108
108
|
"quill-blot-formatter": "~1.0.5",
|
|
109
109
|
"quill-delta": "4.2.2",
|