@flozy/editor 1.7.7 → 1.7.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +1 -2
- package/dist/Editor/Editor.css +1 -0
- package/dist/Editor/Elements/Accordion/AccordionDetails.js +1 -2
- package/dist/Editor/Elements/Button/EditorButton.js +11 -12
- package/dist/Editor/Elements/Carousel/Carousel.js +1 -0
- package/dist/Editor/Elements/Carousel/CarouselItem.js +45 -3
- package/dist/Editor/Elements/Color Picker/Styles.js +2 -2
- package/dist/Editor/Elements/Link/Link.js +1 -1
- package/dist/Editor/Elements/List/CheckListButton.js +2 -2
- package/dist/Editor/Elements/SimpleText.js +1 -1
- package/dist/Editor/Styles/EditorStyles.js +16 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +0 -3
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +1 -1
- package/dist/Editor/common/DnD/DragHandle.js +10 -5
- package/dist/Editor/common/DnD/index.js +2 -2
- package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
- package/dist/Editor/common/MentionsPopup/index.js +1 -0
- package/dist/Editor/common/Section/index.js +10 -5
- package/dist/Editor/common/Shorthands/elements.js +1 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -9
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +3 -2
- package/dist/Editor/common/StyleBuilder/index.js +3 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +18 -7
- package/dist/Editor/utils/button.js +2 -0
- package/dist/Editor/utils/events.js +1 -1
- package/package.json +1 -1
@@ -25,10 +25,10 @@ import { EditorProvider } from "./hooks/useMouseMove";
|
|
25
25
|
import TopBanner from "./Elements/TopBanner/TopBanner";
|
26
26
|
import editorStyles from "./Styles/EditorStyles";
|
27
27
|
import DragAndDrop from "./common/DnD";
|
28
|
+
import DragHandle from "./common/DnD/DragHandle";
|
28
29
|
import Section from "./common/Section";
|
29
30
|
import "animate.css";
|
30
31
|
import decorators from "./utils/Decorators";
|
31
|
-
import useFormat from "./utils/customHooks/useFormat";
|
32
32
|
import useElement from "./utils/customHooks/useElement";
|
33
33
|
import { jsx as _jsx } from "react/jsx-runtime";
|
34
34
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -128,7 +128,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
128
128
|
placeHolderColor: invertColor(pageColor || "#FFF")
|
129
129
|
});
|
130
130
|
const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
|
131
|
-
console.log(editor.selection);
|
132
131
|
useEffect(() => {
|
133
132
|
setValue(draftToSlate({
|
134
133
|
data: content
|
package/dist/Editor/Editor.css
CHANGED
@@ -114,20 +114,20 @@ const EditorButton = props => {
|
|
114
114
|
onClick: onMenuClick("edit"),
|
115
115
|
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
116
116
|
})
|
117
|
-
}), /*#__PURE__*/
|
117
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
118
118
|
title: "Open Link",
|
119
119
|
arrow: true,
|
120
|
-
children:
|
120
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
121
121
|
onClick: onMenuClick("open"),
|
122
122
|
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
123
|
-
})
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
})
|
130
|
-
})
|
123
|
+
})
|
124
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
125
|
+
title: "Delete",
|
126
|
+
arrow: true,
|
127
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
128
|
+
onClick: onMenuClick("delete"),
|
129
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
130
|
+
})
|
131
131
|
})]
|
132
132
|
}) : null;
|
133
133
|
};
|
@@ -150,15 +150,14 @@ const EditorButton = props => {
|
|
150
150
|
className: "editor-btn-wrapper",
|
151
151
|
...attributes,
|
152
152
|
style: {
|
153
|
-
display: "inline",
|
154
153
|
textAlign: textAlign || "left"
|
155
154
|
},
|
155
|
+
contentEditable: false,
|
156
156
|
children: [/*#__PURE__*/_jsx("div", {
|
157
157
|
className: "editor-btn-wrapper-inner",
|
158
158
|
style: {
|
159
159
|
display: "inline"
|
160
160
|
},
|
161
|
-
contentEditable: false,
|
162
161
|
children: /*#__PURE__*/_jsxs(Box, {
|
163
162
|
component: "button",
|
164
163
|
sx: {
|
@@ -1,16 +1,58 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
|
+
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
|
+
import { Tooltip, IconButton } from "@mui/material";
|
5
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
2
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
8
|
const CarouselItem = props => {
|
4
9
|
const {
|
10
|
+
element,
|
5
11
|
attributes,
|
6
|
-
children
|
12
|
+
children,
|
13
|
+
customProps
|
7
14
|
} = props;
|
15
|
+
const {
|
16
|
+
readOnly
|
17
|
+
} = customProps;
|
18
|
+
const editor = useSlateStatic();
|
19
|
+
const path = ReactEditor.findPath(editor, element);
|
20
|
+
const onMenuClick = val => () => {
|
21
|
+
switch (val) {
|
22
|
+
case "delete":
|
23
|
+
Transforms.removeNodes(editor, {
|
24
|
+
at: [...path]
|
25
|
+
});
|
26
|
+
return;
|
27
|
+
default:
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
};
|
31
|
+
const Toolbar = () => {
|
32
|
+
return !readOnly ? /*#__PURE__*/_jsx("div", {
|
33
|
+
className: "element-toolbar hr",
|
34
|
+
style: {
|
35
|
+
top: "0px"
|
36
|
+
},
|
37
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
38
|
+
title: "Delete Slide",
|
39
|
+
arrow: true,
|
40
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
41
|
+
onClick: onMenuClick("delete"),
|
42
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
43
|
+
})
|
44
|
+
})
|
45
|
+
}) : null;
|
46
|
+
};
|
8
47
|
return /*#__PURE__*/_jsx("div", {
|
9
48
|
...attributes,
|
10
49
|
className: "carousel-item",
|
11
|
-
children: /*#__PURE__*/
|
50
|
+
children: /*#__PURE__*/_jsxs("div", {
|
12
51
|
className: "carousel-item-inner",
|
13
|
-
|
52
|
+
style: {
|
53
|
+
minHeight: "50px"
|
54
|
+
},
|
55
|
+
children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
|
14
56
|
})
|
15
57
|
});
|
16
58
|
};
|
@@ -19,8 +19,8 @@ const ColorPickerStyles = () => ({
|
|
19
19
|
position: "absolute",
|
20
20
|
top: "-4px",
|
21
21
|
left: "-4px",
|
22
|
-
width: "calc(100% +
|
23
|
-
height: "calc(100% +
|
22
|
+
width: "calc(100% + 4px)",
|
23
|
+
height: "calc(100% + 4px)",
|
24
24
|
border: "2px solid #2563EB",
|
25
25
|
borderRadius: "50%"
|
26
26
|
}
|
@@ -15,9 +15,9 @@ const CheckListButton = props => {
|
|
15
15
|
children: /*#__PURE__*/_jsx(ToolbarIcon, {
|
16
16
|
title: "Check List",
|
17
17
|
icon: /*#__PURE__*/_jsx(Icon, {
|
18
|
-
icon: "
|
18
|
+
icon: "check-list-item"
|
19
19
|
}),
|
20
|
-
onClick: handleClick("
|
20
|
+
onClick: handleClick("check-list-item")
|
21
21
|
})
|
22
22
|
});
|
23
23
|
};
|
@@ -99,7 +99,7 @@ const editorStyles = ({
|
|
99
99
|
width: "fit-content"
|
100
100
|
}
|
101
101
|
},
|
102
|
-
"
|
102
|
+
"&.hselect:before": {
|
103
103
|
display: "block"
|
104
104
|
}
|
105
105
|
},
|
@@ -116,7 +116,8 @@ const editorStyles = ({
|
|
116
116
|
height: "calc(100% - 2px)",
|
117
117
|
left: 0,
|
118
118
|
top: 0,
|
119
|
-
border: "1px solid
|
119
|
+
border: "1px solid transparent",
|
120
|
+
background: "rgba(0,0,0,0.05)",
|
120
121
|
pointerEvents: "none",
|
121
122
|
display: "none"
|
122
123
|
}
|
@@ -153,6 +154,19 @@ const editorStyles = ({
|
|
153
154
|
height: "20px"
|
154
155
|
}
|
155
156
|
}
|
157
|
+
},
|
158
|
+
"& .tools-drawer": {
|
159
|
+
zIndex: 1300
|
160
|
+
},
|
161
|
+
"& .section-tw": {
|
162
|
+
"& button": {
|
163
|
+
padding: "2px",
|
164
|
+
borderRadius: "0px",
|
165
|
+
"& svg": {
|
166
|
+
width: "16px",
|
167
|
+
height: "16px"
|
168
|
+
}
|
169
|
+
}
|
156
170
|
}
|
157
171
|
}
|
158
172
|
});
|
@@ -75,9 +75,6 @@ const MiniToolbar = props => {
|
|
75
75
|
sx: popupStyles.popupWrapper,
|
76
76
|
className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
|
77
77
|
fullScreen: fullScreen,
|
78
|
-
style: {
|
79
|
-
zIndex: 1002
|
80
|
-
},
|
81
78
|
children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
|
82
79
|
className: "papper-wrpr",
|
83
80
|
style: {
|
@@ -7,11 +7,10 @@ import { useEditorContext } from "../../hooks/useMouseMove";
|
|
7
7
|
import { Transforms } from "slate";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
-
const DRAGGABLE_TYPES = ["paragraph"];
|
10
|
+
const DRAGGABLE_TYPES = ["paragraph", "headingOne"];
|
11
11
|
const DragHandleStyle = () => ({
|
12
12
|
root: {
|
13
13
|
position: "relative",
|
14
|
-
paddingLeft: "20px",
|
15
14
|
"&:hover": {
|
16
15
|
"& > .dh-para:first-child": {
|
17
16
|
opacity: 1
|
@@ -73,9 +72,15 @@ const DragHandle = props => {
|
|
73
72
|
} = element;
|
74
73
|
useEffect(() => {
|
75
74
|
if (moved) {
|
76
|
-
|
77
|
-
|
78
|
-
|
75
|
+
const upPath = ReactEditor.findPath(editor, element);
|
76
|
+
try {
|
77
|
+
alert(upPath);
|
78
|
+
Transforms.removeNodes(editor, {
|
79
|
+
at: upPath
|
80
|
+
});
|
81
|
+
} catch (err) {
|
82
|
+
console.log(err, upPath);
|
83
|
+
}
|
79
84
|
}
|
80
85
|
}, [moved]);
|
81
86
|
const handleOnDrag = isDragging => {
|
@@ -21,8 +21,8 @@ const DragAndDrop = ({
|
|
21
21
|
active,
|
22
22
|
over
|
23
23
|
} = e;
|
24
|
-
const fromPath = active.id.split("_")[1].split("|");
|
25
|
-
const toPath = over.id.split("_")[1].split("|");
|
24
|
+
const fromPath = active.id.split("_")[1].split("|").map(m => parseInt(m));
|
25
|
+
const toPath = over.id.split("_")[1].split("|").map(m => parseInt(m));
|
26
26
|
const toCloneNode = JSON.stringify(Node.get(editor, fromPath));
|
27
27
|
// set moved node delete
|
28
28
|
Transforms.setNodes(editor, {
|
@@ -119,6 +119,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
119
119
|
disablePortal: false,
|
120
120
|
sx: classes.root,
|
121
121
|
placement: "bottom-start",
|
122
|
+
className: "cmd-wrapper",
|
122
123
|
children: /*#__PURE__*/_jsx(Paper, {
|
123
124
|
sx: classes.papper,
|
124
125
|
children: chars.map(renderList)
|
@@ -47,8 +47,13 @@ const Section = props => {
|
|
47
47
|
setOpenSettings(true);
|
48
48
|
};
|
49
49
|
const Toolbar = () => {
|
50
|
-
return !readOnly ? /*#__PURE__*/_jsx(
|
51
|
-
|
50
|
+
return !readOnly ? /*#__PURE__*/_jsx(Box, {
|
51
|
+
component: "div",
|
52
|
+
className: "element-toolbar ss hr section-tw",
|
53
|
+
style: {
|
54
|
+
left: "20px",
|
55
|
+
top: "0px"
|
56
|
+
},
|
52
57
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
53
58
|
title: "Section Settings",
|
54
59
|
children: /*#__PURE__*/_jsx(IconButton, {
|
@@ -83,15 +88,15 @@ const Section = props => {
|
|
83
88
|
} : {};
|
84
89
|
return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
|
85
90
|
component: "section",
|
86
|
-
className:
|
91
|
+
className: `ed-section-wrapper ${readOnly ? "" : "hselect"}`,
|
87
92
|
style: {
|
88
93
|
position: "relative",
|
89
94
|
background: sectionBgColor,
|
90
95
|
...sectionBgImage,
|
91
96
|
paddingLeft: `${ssleft}px`,
|
92
97
|
paddingRight: `${ssright}px`,
|
93
|
-
paddingTop: `${sstop}px`,
|
94
|
-
paddingBottom: `${ssbottom}px`,
|
98
|
+
paddingTop: `${sstop || 2}px`,
|
99
|
+
paddingBottom: `${ssbottom || 2}px`,
|
95
100
|
borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
|
96
101
|
flexDirection: flexDirection || "column",
|
97
102
|
alignItems: horizantal,
|
@@ -28,7 +28,7 @@ const buttonStyle = [{
|
|
28
28
|
width: 5,
|
29
29
|
placeholder: "16px or 1em"
|
30
30
|
}, {
|
31
|
-
label: "
|
31
|
+
label: "Alignment",
|
32
32
|
key: "textAlign",
|
33
33
|
type: "textAlign",
|
34
34
|
placeholder: "16px or 1em"
|
@@ -58,14 +58,6 @@ const buttonStyle = [{
|
|
58
58
|
key: "buttonLink",
|
59
59
|
type: "buttonLink"
|
60
60
|
}]
|
61
|
-
}, {
|
62
|
-
tab: "Position",
|
63
|
-
value: "position",
|
64
|
-
fields: [{
|
65
|
-
label: "Alignment",
|
66
|
-
key: "alignment",
|
67
|
-
type: "alignment"
|
68
|
-
}]
|
69
61
|
}, {
|
70
62
|
tab: "Banner Spacing",
|
71
63
|
value: "bannerSpacing",
|
@@ -10,7 +10,8 @@ const TextAlign = props => {
|
|
10
10
|
onChange
|
11
11
|
} = props;
|
12
12
|
const {
|
13
|
-
key
|
13
|
+
key,
|
14
|
+
label
|
14
15
|
} = data;
|
15
16
|
const handleChange = e => {
|
16
17
|
onChange({
|
@@ -30,7 +31,7 @@ const TextAlign = props => {
|
|
30
31
|
fontWeight: 500,
|
31
32
|
fontSize: "14px"
|
32
33
|
},
|
33
|
-
children: "Text Alignment"
|
34
|
+
children: label || "Text Alignment"
|
34
35
|
})
|
35
36
|
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
36
37
|
row: true,
|
@@ -287,7 +287,8 @@ export const getBlock = props => {
|
|
287
287
|
background: element?.bgColor || "none",
|
288
288
|
padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
|
289
289
|
borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
|
290
|
-
margin: `${element?.bgColor ? "16px" : "0px"} 0px
|
290
|
+
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
291
|
+
width: element?.bgColor ? "calc(100% - 16px)" : "100%"
|
291
292
|
},
|
292
293
|
children: children
|
293
294
|
});
|
@@ -319,7 +320,8 @@ export const getBlock = props => {
|
|
319
320
|
display: "flex",
|
320
321
|
alignItems: "flex-end",
|
321
322
|
listStylePosition: "inside",
|
322
|
-
flexDirection: "column"
|
323
|
+
flexDirection: "column",
|
324
|
+
textAlign: "right"
|
323
325
|
},
|
324
326
|
...attributes,
|
325
327
|
...element.attr,
|
@@ -478,10 +480,19 @@ export const getBlock = props => {
|
|
478
480
|
}
|
479
481
|
};
|
480
482
|
export const getQueryStrings = urlString => {
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
483
|
+
try {
|
484
|
+
if (urlString) {
|
485
|
+
const newUrl = new URL(urlString);
|
486
|
+
var youCode = newUrl.searchParams.get("v");
|
487
|
+
if (!youCode) {
|
488
|
+
youCode = newUrl.pathname.replace("/", "");
|
489
|
+
}
|
490
|
+
return `https://www.youtube.com/embed/${youCode}`;
|
491
|
+
} else {
|
492
|
+
return urlString;
|
493
|
+
}
|
494
|
+
} catch (err) {
|
495
|
+
console.log(err);
|
496
|
+
return urlString;
|
485
497
|
}
|
486
|
-
return `https://www.youtube.com/embed/${youCode}`;
|
487
498
|
};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
|
+
import insertNewLine from "./insertNewLine";
|
2
3
|
export const insertButton = editor => {
|
3
4
|
const button = {
|
4
5
|
type: "button",
|
@@ -26,4 +27,5 @@ export const insertButton = editor => {
|
|
26
27
|
};
|
27
28
|
Transforms.insertNodes(editor, button);
|
28
29
|
Transforms.move(editor);
|
30
|
+
insertNewLine(editor);
|
29
31
|
};
|
@@ -110,7 +110,7 @@ export const escapeEvent = props => {
|
|
110
110
|
const {
|
111
111
|
editor
|
112
112
|
} = props;
|
113
|
-
const list_types = ["orderedList", "unorderedList", "
|
113
|
+
const list_types = ["orderedList", "unorderedList", "check-list-item"];
|
114
114
|
const parentPath = Path.ancestors(editor.selection.anchor.path);
|
115
115
|
const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
|
116
116
|
if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {
|