@flozy/editor 1.8.2 → 1.8.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +13 -9
- package/dist/Editor/Editor.css +15 -12
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -11
- package/dist/Editor/Elements/Attachments/Attachments.js +3 -0
- package/dist/Editor/Elements/Button/EditorButton.js +4 -10
- package/dist/Editor/Elements/Carousel/Arrows.js +13 -6
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
- package/dist/Editor/Elements/Carousel/slick-theme.min.css +5 -22
- package/dist/Editor/Elements/ChipText/ChipText.js +8 -12
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +5 -3
- package/dist/Editor/Elements/Color Picker/Styles.js +3 -17
- package/dist/Editor/Elements/Color Picker/colorWheel.png +0 -0
- package/dist/Editor/Elements/Embed/Embed.css +48 -45
- package/dist/Editor/Elements/Embed/Image.js +8 -14
- package/dist/Editor/Elements/Embed/Video.js +1 -7
- package/dist/Editor/Elements/Form/Form.js +17 -23
- package/dist/Editor/Elements/Form/FormElements/FormText.js +8 -12
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +8 -12
- package/dist/Editor/Elements/Grid/Grid.js +8 -20
- package/dist/Editor/Elements/Grid/GridItem.js +13 -23
- package/dist/Editor/Elements/Grid/templates/carousel_item.js +9 -4
- package/dist/Editor/Elements/Grid/templates/default_grid.js +2 -2
- package/dist/Editor/Elements/List/CheckList.js +10 -4
- package/dist/Editor/Elements/List/CheckListStyles.js +12 -0
- package/dist/Editor/Elements/SimpleText.js +0 -1
- package/dist/Editor/Elements/Table/Table.js +3 -1
- package/dist/Editor/Elements/TopBanner/TopBanner.js +3 -1
- package/dist/Editor/Elements/Variables/Style.js +12 -0
- package/dist/Editor/Elements/Variables/Variable.js +27 -0
- package/dist/Editor/Elements/Variables/VariableButton.js +40 -0
- package/dist/Editor/IframeEditor.js +36 -0
- package/dist/Editor/MiniEditor.js +7 -10
- package/dist/Editor/Styles/EditorStyles.js +15 -7
- package/dist/Editor/Toolbar/Basic/index.js +18 -5
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +30 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +7 -1
- package/dist/Editor/common/Icon.js +10 -2
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/Section/index.js +13 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +10 -3
- package/dist/Editor/common/StyleBuilder/formStyle.js +3 -0
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +1 -1
- package/dist/Editor/common/iconslist.js +93 -1
- package/dist/Editor/helper/theme.js +83 -0
- package/dist/Editor/hooks/useWindowMessage.js +35 -0
- package/dist/Editor/hooks/useWindowResize.js +5 -2
- package/dist/Editor/plugins/withLayout.js +42 -27
- package/dist/Editor/plugins/withLinks.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +28 -5
- package/dist/Editor/utils/attachments.js +2 -1
- package/dist/Editor/utils/variables.js +45 -0
- package/dist/index.js +3 -1
- package/package.json +1 -1
- package/dist/Editor/Elements/Color Picker/LogoIcon.js +0 -25
@@ -1,4 +1,30 @@
|
|
1
|
-
import { Transforms, Node,
|
1
|
+
import { Transforms, Node, Editor } from "slate";
|
2
|
+
const ORDERS_LAYOUT = ["topbanner", "title", "paragraph"];
|
3
|
+
const ORDERS_LAYOUT_VALIDATIONS = {
|
4
|
+
topbanner: val => {
|
5
|
+
if (val.type !== ORDERS_LAYOUT[0]) {
|
6
|
+
return "title";
|
7
|
+
} else {
|
8
|
+
return val.type;
|
9
|
+
}
|
10
|
+
},
|
11
|
+
title: (val, prev) => {
|
12
|
+
if (prev?.type === "topbanner") {
|
13
|
+
return "title";
|
14
|
+
} else if (prev?.type === "title" && val?.type !== "title") {
|
15
|
+
return val.type;
|
16
|
+
} else {
|
17
|
+
return "paragraph";
|
18
|
+
}
|
19
|
+
},
|
20
|
+
paragraph: val => {
|
21
|
+
if (val.type === "title") {
|
22
|
+
return "paragraph";
|
23
|
+
} else {
|
24
|
+
return val.type;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
};
|
2
28
|
const withLayout = editor => {
|
3
29
|
const {
|
4
30
|
normalizeNode
|
@@ -17,7 +43,7 @@ const withLayout = editor => {
|
|
17
43
|
select: true
|
18
44
|
});
|
19
45
|
}
|
20
|
-
if (editor.children.length
|
46
|
+
if (editor.children.length === 0) {
|
21
47
|
const paragraph = {
|
22
48
|
type: "paragraph",
|
23
49
|
children: [{
|
@@ -28,34 +54,23 @@ const withLayout = editor => {
|
|
28
54
|
at: path.concat(1)
|
29
55
|
});
|
30
56
|
}
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
Transforms.setNodes(editor,
|
41
|
-
|
57
|
+
ORDERS_LAYOUT.forEach((enforce, index) => {
|
58
|
+
if (index < editor.children.length) {
|
59
|
+
const existsNode = Node.get(editor, [index]);
|
60
|
+
let prevNode = null;
|
61
|
+
if (index > 0) {
|
62
|
+
prevNode = Node.get(editor, [index - 1]);
|
63
|
+
}
|
64
|
+
const newType = ORDERS_LAYOUT_VALIDATIONS[enforce](existsNode, prevNode);
|
65
|
+
if (existsNode?.type !== newType) {
|
66
|
+
Transforms.setNodes(editor, {
|
67
|
+
type: newType
|
68
|
+
}, {
|
69
|
+
at: [index]
|
42
70
|
});
|
43
71
|
}
|
44
|
-
};
|
45
|
-
switch (slateIndex) {
|
46
|
-
case 0:
|
47
|
-
type = child.type === "topbanner" ? "topbanner" : "title";
|
48
|
-
prevType = type;
|
49
|
-
enforceType(type);
|
50
|
-
break;
|
51
|
-
case 1:
|
52
|
-
type = prevType === "topbanner" ? "title" : "paragraph";
|
53
|
-
enforceType(type);
|
54
|
-
break;
|
55
|
-
default:
|
56
|
-
break;
|
57
72
|
}
|
58
|
-
}
|
73
|
+
});
|
59
74
|
}
|
60
75
|
return normalizeNode([node, path]);
|
61
76
|
};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { Editor, Transforms, Element as SlateElement } from "slate";
|
2
|
+
import { Box } from "@mui/material";
|
2
3
|
import { fontFamilyMap, sizeMap } from "./font";
|
3
4
|
import Link from "../Elements/Link/Link";
|
4
5
|
import Image from "../Elements/Embed/Image";
|
@@ -34,6 +35,8 @@ import SimpleText from "../Elements/SimpleText";
|
|
34
35
|
import CheckList from "../Elements/List/CheckList";
|
35
36
|
import { isEmptyTextNode } from "../helper";
|
36
37
|
import Attachments from "../Elements/Attachments/Attachments";
|
38
|
+
import { getBreakPointsValue } from "../helper/theme";
|
39
|
+
import Variables from "../Elements/Variables/Variable";
|
37
40
|
import { jsx as _jsx } from "react/jsx-runtime";
|
38
41
|
const alignment = ["alignLeft", "alignRight", "alignCenter"];
|
39
42
|
const list_types = ["orderedList", "unorderedList"];
|
@@ -85,7 +88,11 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
85
88
|
}
|
86
89
|
};
|
87
90
|
export const addMarkData = (editor, data) => {
|
88
|
-
|
91
|
+
try {
|
92
|
+
Editor.addMark(editor, data.format, data.value);
|
93
|
+
} catch (err) {
|
94
|
+
console.log(err);
|
95
|
+
}
|
89
96
|
};
|
90
97
|
export const toggleMark = (editor, format) => {
|
91
98
|
const isActive = isMarkActive(editor, format);
|
@@ -209,10 +216,13 @@ export const getMarked = (leaf, children) => {
|
|
209
216
|
});
|
210
217
|
}
|
211
218
|
if (leaf.fontSize) {
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
fontSize:
|
219
|
+
children = /*#__PURE__*/_jsx(Box, {
|
220
|
+
component: "span",
|
221
|
+
sx: {
|
222
|
+
fontSize: {
|
223
|
+
lg: sizeMap[leaf.fontSize] || leaf.fontSize,
|
224
|
+
...getBreakPointsValue(leaf.fontSize, null, "overrideText")
|
225
|
+
}
|
216
226
|
},
|
217
227
|
children: children
|
218
228
|
});
|
@@ -475,9 +485,22 @@ export const getBlock = props => {
|
|
475
485
|
});
|
476
486
|
case "docs":
|
477
487
|
case "pdf":
|
488
|
+
case "xls":
|
478
489
|
return /*#__PURE__*/_jsx(Attachments, {
|
479
490
|
...props
|
480
491
|
});
|
492
|
+
case "variables":
|
493
|
+
return /*#__PURE__*/_jsx(Variables, {
|
494
|
+
...props
|
495
|
+
});
|
496
|
+
case "topbanner":
|
497
|
+
return /*#__PURE__*/_jsx("span", {
|
498
|
+
...props,
|
499
|
+
style: {
|
500
|
+
display: "none"
|
501
|
+
},
|
502
|
+
children: children
|
503
|
+
});
|
481
504
|
default:
|
482
505
|
return /*#__PURE__*/_jsx(SimpleText, {
|
483
506
|
...props,
|
@@ -20,10 +20,11 @@ export const insertAttachments = (editor, data) => {
|
|
20
20
|
const {
|
21
21
|
url
|
22
22
|
} = data;
|
23
|
+
const docType = url?.split(".").pop();
|
23
24
|
if (url) {
|
24
25
|
const attachmentsNode = createAttachmentsNode({
|
25
26
|
...data,
|
26
|
-
type:
|
27
|
+
type: docType?.includes("pdf") ? "pdf" : docType?.includes("doc") || docType?.includes("page") ? "docs" : docType?.includes("xls") || docType?.includes("numbers") ? "xls" : "docs"
|
27
28
|
});
|
28
29
|
Transforms.insertNodes(editor, [attachmentsNode]);
|
29
30
|
insertNewLine(editor);
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { Editor, Path, Range, Transforms } from "slate";
|
2
|
+
export const variablesTextNode = (data, text) => ({
|
3
|
+
type: "variables",
|
4
|
+
...(data || {
|
5
|
+
name: ""
|
6
|
+
}),
|
7
|
+
children: [{
|
8
|
+
text
|
9
|
+
}]
|
10
|
+
});
|
11
|
+
export const insertVariables = (editor, data) => {
|
12
|
+
try {
|
13
|
+
const {
|
14
|
+
selection
|
15
|
+
} = editor;
|
16
|
+
const variableText = variablesTextNode(data, " ");
|
17
|
+
if (!!selection) {
|
18
|
+
const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
|
19
|
+
if (editor.isVoid(parent)) {
|
20
|
+
Transforms.insertNodes(editor, {
|
21
|
+
type: "paragraph",
|
22
|
+
children: [variableText]
|
23
|
+
}, {
|
24
|
+
at: Path.next(parentPath),
|
25
|
+
select: true
|
26
|
+
});
|
27
|
+
} else if (Range.isCollapsed(selection)) {
|
28
|
+
Transforms.insertNodes(editor, variableText, {
|
29
|
+
select: true
|
30
|
+
});
|
31
|
+
} else {
|
32
|
+
Transforms.wrapNodes(editor, variableText, {
|
33
|
+
split: true
|
34
|
+
});
|
35
|
+
}
|
36
|
+
} else {
|
37
|
+
Transforms.insertNodes(editor, {
|
38
|
+
type: "paragraph",
|
39
|
+
children: [variableText]
|
40
|
+
});
|
41
|
+
}
|
42
|
+
} catch (err) {
|
43
|
+
console.log(err);
|
44
|
+
}
|
45
|
+
};
|
package/dist/index.js
CHANGED
@@ -1,6 +1,8 @@
|
|
1
1
|
import Collaborative from "./Editor/CollaborativeEditor";
|
2
2
|
import CommonEditor from "./Editor/CommonEditor";
|
3
3
|
import Mini from "./Editor/MiniEditor";
|
4
|
+
import EditorInFrame from "./Editor/IframeEditor";
|
4
5
|
export const Editor = CommonEditor;
|
5
6
|
export const MiniEditor = Mini;
|
6
|
-
export const CollaborativeEditor = Collaborative;
|
7
|
+
export const CollaborativeEditor = Collaborative;
|
8
|
+
export const IframeEditor = EditorInFrame;
|
package/package.json
CHANGED
@@ -1,25 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
export const logo = {
|
3
|
-
color: color => /*#__PURE__*/_jsx("svg", {
|
4
|
-
width: "14",
|
5
|
-
height: "14",
|
6
|
-
viewBox: "0 0 11 14",
|
7
|
-
fill: "none",
|
8
|
-
xmlns: "http://www.w3.org/2000/svg",
|
9
|
-
children: /*#__PURE__*/_jsx("path", {
|
10
|
-
d: "M5.16796 0C5.16796 0 0 5.92326 0 8.8319C0 12.0176 2.65524 14 5.16796 14C7.83258 14 10.3359 11.9129 10.3359 8.8319C10.3359 5.92326 5.16796 0 5.16796 0ZM8.7402 9.70788C8.45278 11.3396 7.03388 12.0548 5.89918 12.0548C5.80706 12.0543 9.14466 10.6134 7.85834 6.30322C8.53622 7.06776 8.96266 8.4448 8.7402 9.70788Z",
|
11
|
-
fill: "#778599"
|
12
|
-
})
|
13
|
-
}),
|
14
|
-
bgColor: color => /*#__PURE__*/_jsx("svg", {
|
15
|
-
width: "14",
|
16
|
-
height: "14",
|
17
|
-
viewBox: "0 0 14 14",
|
18
|
-
fill: "none",
|
19
|
-
xmlns: "http://www.w3.org/2000/svg",
|
20
|
-
children: /*#__PURE__*/_jsx("path", {
|
21
|
-
d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76687 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
|
22
|
-
fill: "#64748B"
|
23
|
-
})
|
24
|
-
})
|
25
|
-
};
|