@flozy/editor 1.3.1 → 1.3.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +17 -9
- package/dist/Editor/DialogWrapper.js +5 -0
- package/dist/Editor/Editor.css +25 -3
- package/dist/Editor/Elements/Accordion/AccordionButton.js +10 -7
- package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +7 -4
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +7 -4
- package/dist/Editor/Elements/Button/EditorButton.js +9 -1
- package/dist/Editor/Elements/Carousel/Carousel.js +6 -2
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -4
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +3 -1
- package/dist/Editor/Elements/Embed/Embed.css +2 -2
- package/dist/Editor/Elements/Embed/Embed.js +17 -12
- package/dist/Editor/Elements/Embed/EmbedPopup.js +4 -3
- package/dist/Editor/Elements/Embed/Image.js +55 -21
- package/dist/Editor/Elements/Embed/Video.js +76 -14
- package/dist/Editor/Elements/Grid/Grid.js +50 -15
- package/dist/Editor/Elements/Grid/GridButton.js +73 -9
- package/dist/Editor/Elements/Grid/GridItem.js +40 -34
- package/dist/Editor/Elements/Grid/full_grid.png +0 -0
- package/dist/Editor/Elements/Grid/templates/full_grid.png +0 -0
- package/dist/Editor/Elements/Grid/templates/image_banner_text.js +56 -0
- package/dist/Editor/Elements/Grid/templates/index.js +17 -0
- package/dist/Editor/Elements/Grid/templates/right_image_left_text.js +81 -0
- package/dist/Editor/Elements/Grid/templates/white_LTRI.js +116 -0
- package/dist/Editor/Elements/Link/LinkButton.js +12 -8
- package/dist/Editor/Elements/Mentions/Mentions.js +2 -2
- package/dist/Editor/Elements/NewLine/NewLineButton.js +12 -9
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +7 -4
- package/dist/Editor/Elements/Signature/SignatureButton.js +7 -4
- package/dist/Editor/Elements/Signature/SignaturePopup.js +2 -4
- package/dist/Editor/Elements/Table/Table.js +4 -1
- package/dist/Editor/Elements/Table/TableCell.js +17 -9
- package/dist/Editor/Elements/Table/TableSelector.js +12 -9
- package/dist/Editor/Toolbar/FormatTools/BlockButton.js +3 -1
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +3 -1
- package/dist/Editor/Toolbar/Toolbar.js +20 -14
- package/dist/Editor/Toolbar/toolbarGroups.js +34 -17
- package/dist/Editor/common/Button.js +10 -6
- package/dist/Editor/common/ColorPickerButton.js +6 -1
- package/dist/Editor/common/Icon.js +1 -1
- package/dist/Editor/common/MentionsPopup.js +1 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +9 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +10 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +19 -19
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +163 -0
- package/dist/Editor/common/StyleBuilder/gridStyle.js +13 -0
- package/dist/Editor/common/StyleBuilder/index.js +17 -5
- package/dist/Editor/common/Uploader.js +4 -3
- package/dist/Editor/hooks/withCommon.js +2 -2
- package/dist/Editor/plugins/withEmbeds.js +0 -1
- package/dist/Editor/utils/grid.js +10 -4
- package/dist/Editor/utils/gridItem.js +3 -2
- package/dist/Editor/utils/insertAppHeader.js +28 -23
- package/package.json +1 -1
@@ -16,7 +16,6 @@ import "./Editor.css";
|
|
16
16
|
import { serialize } from "./utils/serializer";
|
17
17
|
import { getThumbnailImage } from "./helper";
|
18
18
|
import PopupTool from "./Toolbar/PopupTool";
|
19
|
-
import { Button } from "@mui/material";
|
20
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
21
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
22
21
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
|
@@ -57,11 +56,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
57
56
|
h: null
|
58
57
|
});
|
59
58
|
const {
|
60
|
-
defaultBG
|
59
|
+
defaultBG,
|
60
|
+
needDotsBG,
|
61
|
+
footer,
|
62
|
+
needLayout = true,
|
63
|
+
CHARACTERS = []
|
61
64
|
} = otherProps || {};
|
62
65
|
const editor = useMemo(() => {
|
63
66
|
if (collaborativeEditor) return collaborativeEditor;
|
64
|
-
return withCommon(createEditor()
|
67
|
+
return withCommon(createEditor(), {
|
68
|
+
needLayout
|
69
|
+
});
|
65
70
|
}, [collaborativeEditor]);
|
66
71
|
const pageSettings = editor?.children?.find(f => f.type === "page-settings");
|
67
72
|
const {
|
@@ -168,7 +173,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
168
173
|
target,
|
169
174
|
index
|
170
175
|
} = mentions;
|
171
|
-
const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
|
176
|
+
const chars = CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
|
172
177
|
const handleEditorChange = newValue => {
|
173
178
|
setValue(newValue);
|
174
179
|
if (!isInteracted) {
|
@@ -218,19 +223,23 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
218
223
|
}
|
219
224
|
}, [chars, editor, target, mentions, setMentions]);
|
220
225
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
226
|
+
const dotBg = needDotsBG ? {
|
227
|
+
background: "white",
|
228
|
+
backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
|
229
|
+
backgroundSize: "40px 40px",
|
230
|
+
backgroundPosition: "-19px -19px"
|
231
|
+
} : {};
|
221
232
|
return /*#__PURE__*/_jsx(DialogWrapper, {
|
222
233
|
...props,
|
223
234
|
fullScreen: fullScreen,
|
235
|
+
footer: footer || "",
|
224
236
|
children: /*#__PURE__*/_jsx("div", {
|
225
237
|
className: "editor-t-wrapper",
|
226
238
|
style: {
|
227
239
|
display: "flex",
|
228
240
|
flexDirection: "column",
|
229
241
|
padding: "0 8px",
|
230
|
-
|
231
|
-
backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
|
232
|
-
backgroundSize: "40px 40px",
|
233
|
-
backgroundPosition: "-19px -19px"
|
242
|
+
...dotBg
|
234
243
|
},
|
235
244
|
children: /*#__PURE__*/_jsxs(Slate, {
|
236
245
|
editor: editor,
|
@@ -280,5 +289,4 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
280
289
|
});
|
281
290
|
});
|
282
291
|
CommonEditor.displayName = "CommonEditor";
|
283
|
-
const CHARACTERS = ["Aayla Secura", "Adi Gallia"];
|
284
292
|
export default CommonEditor;
|
@@ -33,6 +33,11 @@ const DialogWrapper = props => {
|
|
33
33
|
}), /*#__PURE__*/_jsx(DialogContent, {
|
34
34
|
children: children
|
35
35
|
}), /*#__PURE__*/_jsx(DialogActions, {
|
36
|
+
style: {
|
37
|
+
justifyContent: "center",
|
38
|
+
color: "#64748B",
|
39
|
+
fontSize: "13px"
|
40
|
+
},
|
36
41
|
children: footer
|
37
42
|
})]
|
38
43
|
}) : children;
|
package/dist/Editor/Editor.css
CHANGED
@@ -86,9 +86,9 @@ blockquote{
|
|
86
86
|
|
87
87
|
.grid-container {
|
88
88
|
display: flex;
|
89
|
-
border-radius:
|
90
|
-
background-color:
|
91
|
-
border:
|
89
|
+
border-radius: 0px;
|
90
|
+
background-color: transparent;
|
91
|
+
border: 0px solid #E5EAF2;
|
92
92
|
padding: 16px;
|
93
93
|
position: relative;
|
94
94
|
flex-wrap: wrap;
|
@@ -438,4 +438,26 @@ blockquote{
|
|
438
438
|
|
439
439
|
.MuiIconButton-root.btnActive {
|
440
440
|
background-color: #ccc;
|
441
|
+
}
|
442
|
+
|
443
|
+
.embed .element-toolbar {
|
444
|
+
left: 0;
|
445
|
+
right: 0;
|
446
|
+
bottom: 0;
|
447
|
+
top: auto;
|
448
|
+
width: fit-content;
|
449
|
+
height: fit-content;
|
450
|
+
margin: auto;
|
451
|
+
}
|
452
|
+
|
453
|
+
.resize-br {
|
454
|
+
position: absolute !important;
|
455
|
+
bottom: 2px;
|
456
|
+
right: 2px;
|
457
|
+
}
|
458
|
+
.visible-on-hover {
|
459
|
+
display: none !important;
|
460
|
+
}
|
461
|
+
.has-hover:hover .visible-on-hover {
|
462
|
+
display: flex !important;
|
441
463
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
2
|
+
import { IconButton, Tooltip } from "@mui/material";
|
3
3
|
import { insertAccordion } from "../../utils/accordion";
|
4
4
|
import { AccordionIcon } from "../../common/iconslist";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -10,13 +10,16 @@ const AccordionButton = props => {
|
|
10
10
|
const handleInsertAccordion = () => {
|
11
11
|
insertAccordion(editor);
|
12
12
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
14
|
-
onClick: handleInsertAccordion,
|
13
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
15
14
|
title: "Accordion",
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
15
|
+
arrow: true,
|
16
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
17
|
+
onClick: handleInsertAccordion,
|
18
|
+
style: {
|
19
|
+
marginLeft: "0px"
|
20
|
+
},
|
21
|
+
children: /*#__PURE__*/_jsx(AccordionIcon, {})
|
22
|
+
})
|
20
23
|
});
|
21
24
|
};
|
22
25
|
export default AccordionButton;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
2
|
+
import { IconButton, Tooltip } from "@mui/material";
|
3
3
|
import { insertAppHeader } from "../../utils/insertAppHeader";
|
4
4
|
import { AppHeader } from "../../common/iconslist";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -10,10 +10,13 @@ const AppHeaderButton = props => {
|
|
10
10
|
const handleClick = () => {
|
11
11
|
insertAppHeader(editor, {});
|
12
12
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
13
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
14
14
|
title: "App Header",
|
15
|
-
|
16
|
-
children: /*#__PURE__*/_jsx(
|
15
|
+
arrow: true,
|
16
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
17
|
+
onClick: handleClick,
|
18
|
+
children: /*#__PURE__*/_jsx(AppHeader, {})
|
19
|
+
})
|
17
20
|
});
|
18
21
|
};
|
19
22
|
export default AppHeaderButton;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
2
|
+
import { IconButton, Tooltip } from "@mui/material";
|
3
3
|
import { insertButton } from "../../utils/button";
|
4
4
|
import { ButtonIcon } from "../../common/iconslist";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -10,10 +10,13 @@ const ButtonToolIcon = props => {
|
|
10
10
|
const handleInsertButton = () => {
|
11
11
|
insertButton(editor);
|
12
12
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
14
|
-
onClick: handleInsertButton,
|
13
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
15
14
|
title: "Button",
|
16
|
-
|
15
|
+
arrow: true,
|
16
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
17
|
+
onClick: handleInsertButton,
|
18
|
+
children: /*#__PURE__*/_jsx(ButtonIcon, {})
|
19
|
+
})
|
17
20
|
});
|
18
21
|
};
|
19
22
|
export default ButtonToolIcon;
|
@@ -106,6 +106,12 @@ const EditorButton = props => {
|
|
106
106
|
const onClose = () => {
|
107
107
|
setEdit(false);
|
108
108
|
};
|
109
|
+
const borderStyle = borderColor?.indexOf("linear") >= 0 ? {
|
110
|
+
borderImageSource: borderColor,
|
111
|
+
borderImageSlice: 1
|
112
|
+
} : {
|
113
|
+
borderColor: borderColor || "none"
|
114
|
+
};
|
109
115
|
return /*#__PURE__*/_jsxs("div", {
|
110
116
|
className: "editor-btn-wrapper",
|
111
117
|
...attributes,
|
@@ -116,7 +122,9 @@ const EditorButton = props => {
|
|
116
122
|
className: "editor-btn",
|
117
123
|
style: {
|
118
124
|
background: bgColor || "rgb(30, 75, 122)",
|
119
|
-
|
125
|
+
borderWidth: "1px",
|
126
|
+
borderBlockStyle: "solid",
|
127
|
+
...borderStyle,
|
120
128
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
121
129
|
paddingLeft: `${left || 8}px`,
|
122
130
|
paddingRight: `${right || 8}px`,
|
@@ -20,8 +20,12 @@ const Carousel = props => {
|
|
20
20
|
const {
|
21
21
|
attributes,
|
22
22
|
children,
|
23
|
-
element
|
23
|
+
element,
|
24
|
+
customProps
|
24
25
|
} = props;
|
26
|
+
const {
|
27
|
+
readOnly
|
28
|
+
} = customProps;
|
25
29
|
const editor = useSlateStatic();
|
26
30
|
const selected = useSelected();
|
27
31
|
const [edit, setEdit] = useState(false);
|
@@ -91,7 +95,7 @@ const Carousel = props => {
|
|
91
95
|
}) : /*#__PURE__*/_jsx(Slider, {
|
92
96
|
...settings,
|
93
97
|
children: children
|
94
|
-
}, reload), /*#__PURE__*/_jsx(ToolBar, {})]
|
98
|
+
}, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
|
95
99
|
});
|
96
100
|
};
|
97
101
|
export default Carousel;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton } from "@mui/material";
|
2
|
+
import { IconButton, Tooltip } from "@mui/material";
|
3
3
|
import { insertCarousel } from "../../utils/carousel";
|
4
4
|
import { Carousal } from "../../common/iconslist";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -10,10 +10,13 @@ const CarouselButton = props => {
|
|
10
10
|
const handleClick = () => {
|
11
11
|
insertCarousel(editor);
|
12
12
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
13
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
14
14
|
title: "Carousel",
|
15
|
-
|
16
|
-
children: /*#__PURE__*/_jsx(
|
15
|
+
arrow: true,
|
16
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
17
|
+
onClick: handleClick,
|
18
|
+
children: /*#__PURE__*/_jsx(Carousal, {})
|
19
|
+
})
|
17
20
|
});
|
18
21
|
};
|
19
22
|
export default CarouselButton;
|
@@ -18,7 +18,8 @@ const DEFAULT_COLOR = {
|
|
18
18
|
const ColorPicker = ({
|
19
19
|
format,
|
20
20
|
editor,
|
21
|
-
showHex
|
21
|
+
showHex,
|
22
|
+
title
|
22
23
|
}) => {
|
23
24
|
const [selection, setSelection] = useState();
|
24
25
|
const [hexValue, setHexValue] = useState("");
|
@@ -81,6 +82,7 @@ const ColorPicker = ({
|
|
81
82
|
},
|
82
83
|
className: showOptions ? "clicked" : "",
|
83
84
|
onClick: toggleOption,
|
85
|
+
title: title,
|
84
86
|
children: logo[format](activeColor)
|
85
87
|
}), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
|
86
88
|
children: [/*#__PURE__*/_jsx("div", {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useRef, useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { ReactEditor } from "slate-react";
|
4
|
-
import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography } from "@mui/material";
|
4
|
+
import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography, Tooltip } from "@mui/material";
|
5
5
|
import CloseIcon from "@mui/icons-material/Close";
|
6
6
|
import Icon from "../../common/Icon";
|
7
7
|
import { isBlockActive } from "../../utils/SlateUtilityFunctions";
|
@@ -73,16 +73,20 @@ const Embed = ({
|
|
73
73
|
};
|
74
74
|
const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
|
75
75
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
76
|
-
children: [/*#__PURE__*/_jsx(
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
76
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
77
|
+
title: EMBED_LABEL[format],
|
78
|
+
arrow: true,
|
79
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
80
|
+
className: isBlockActive(editor, format) ? "active" : "",
|
81
|
+
style: {
|
82
|
+
border: showInput ? "1px solid lightgray" : "",
|
83
|
+
borderBottom: "none"
|
84
|
+
},
|
85
|
+
format: format,
|
86
|
+
onClick: onToggle,
|
87
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
88
|
+
icon: format
|
89
|
+
})
|
86
90
|
})
|
87
91
|
}), /*#__PURE__*/_jsx(Dialog, {
|
88
92
|
open: open,
|
@@ -141,7 +145,8 @@ const Embed = ({
|
|
141
145
|
key: "url"
|
142
146
|
},
|
143
147
|
customProps: customProps,
|
144
|
-
onUploaded: onUploaded
|
148
|
+
onUploaded: onUploaded,
|
149
|
+
disableUpload: format === "video"
|
145
150
|
})]
|
146
151
|
})
|
147
152
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import StyleBuilder from "../../common/StyleBuilder";
|
3
3
|
import embedImageStyle from "../../common/StyleBuilder/embedImageStyle";
|
4
|
+
import embedVideoStyle from "../../common/StyleBuilder/embedVideoStyle";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const EmbedPopup = props => {
|
6
7
|
const {
|
@@ -11,12 +12,12 @@ const EmbedPopup = props => {
|
|
11
12
|
format
|
12
13
|
} = props;
|
13
14
|
return /*#__PURE__*/_jsx(StyleBuilder, {
|
14
|
-
title: "Image",
|
15
|
-
type: format === "image" ? "embedImageStyle" : "
|
15
|
+
title: format === "image" ? "Image" : "Video",
|
16
|
+
type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
|
16
17
|
element: element,
|
17
18
|
onSave: onSave,
|
18
19
|
onClose: onClose,
|
19
|
-
renderTabs: format === "image" ? embedImageStyle :
|
20
|
+
renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
|
20
21
|
customProps: customProps
|
21
22
|
});
|
22
23
|
};
|
@@ -1,10 +1,14 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
2
|
import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
|
3
|
-
import { Node, Transforms, Editor
|
4
|
-
import
|
3
|
+
import { Node, Transforms, Editor } from "slate";
|
4
|
+
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
5
5
|
import useResize from "../../utils/customHooks/useResize";
|
6
6
|
import { insertImageText } from "../../utils/imageText";
|
7
7
|
import EmbedPopup from "./EmbedPopup";
|
8
|
+
import { IconButton, Tooltip } from "@mui/material";
|
9
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
10
|
+
import SettingsIcon from "@mui/icons-material/Settings";
|
11
|
+
import AddIcon from "@mui/icons-material/Add";
|
8
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
14
|
const Image = ({
|
@@ -19,14 +23,24 @@ const Image = ({
|
|
19
23
|
bannerSpacing,
|
20
24
|
alignment,
|
21
25
|
bgColor,
|
22
|
-
borderColor
|
26
|
+
borderColor,
|
27
|
+
borderRadius
|
23
28
|
} = element;
|
29
|
+
const {
|
30
|
+
readOnly
|
31
|
+
} = customProps;
|
24
32
|
const {
|
25
33
|
left,
|
26
34
|
top,
|
27
35
|
right,
|
28
36
|
bottom
|
29
37
|
} = bannerSpacing || {};
|
38
|
+
const {
|
39
|
+
topLeft,
|
40
|
+
topRight,
|
41
|
+
bottomLeft,
|
42
|
+
bottomRight
|
43
|
+
} = borderRadius || {};
|
30
44
|
const {
|
31
45
|
vertical,
|
32
46
|
horizantal
|
@@ -85,6 +99,11 @@ const Image = ({
|
|
85
99
|
const onClose = () => {
|
86
100
|
setOpenSettings(false);
|
87
101
|
};
|
102
|
+
const onDelete = () => {
|
103
|
+
Transforms.removeNodes(editor, {
|
104
|
+
at: path
|
105
|
+
});
|
106
|
+
};
|
88
107
|
const onAddText = () => {
|
89
108
|
Transforms.wrapNodes(editor, {
|
90
109
|
type: "image-text-wrapper",
|
@@ -96,19 +115,34 @@ const Image = ({
|
|
96
115
|
return selected ? /*#__PURE__*/_jsxs("div", {
|
97
116
|
className: "element-toolbar",
|
98
117
|
contentEditable: false,
|
99
|
-
children: [/*#__PURE__*/_jsx(
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
118
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
119
|
+
title: "Add Text",
|
120
|
+
arrow: true,
|
121
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
122
|
+
onClick: onAddText,
|
123
|
+
children: /*#__PURE__*/_jsx(AddIcon, {})
|
124
|
+
})
|
125
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
126
|
+
title: "Settings",
|
127
|
+
arrow: true,
|
128
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
129
|
+
onClick: onSettings,
|
130
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
131
|
+
})
|
132
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
133
|
+
title: "Delete",
|
134
|
+
arrow: true,
|
135
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
136
|
+
onClick: onDelete,
|
137
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
138
|
+
})
|
105
139
|
})]
|
106
140
|
}) : null;
|
107
141
|
};
|
108
142
|
const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
|
109
143
|
return /*#__PURE__*/_jsxs("div", {
|
110
144
|
...attributes,
|
111
|
-
className: "embed",
|
145
|
+
className: "embed has-hover",
|
112
146
|
style: {
|
113
147
|
display: "flex",
|
114
148
|
width: `calc(100% - ${totalMinus}px)`,
|
@@ -123,11 +157,12 @@ const Image = ({
|
|
123
157
|
border: `1px solid ${borderColor}`
|
124
158
|
},
|
125
159
|
...element.attr,
|
126
|
-
children: [
|
160
|
+
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
127
161
|
element: element,
|
128
162
|
onSave: onSave,
|
129
163
|
onClose: onClose,
|
130
|
-
customProps: customProps
|
164
|
+
customProps: customProps,
|
165
|
+
format: "image"
|
131
166
|
}) : null, /*#__PURE__*/_jsxs("div", {
|
132
167
|
contentEditable: false,
|
133
168
|
style: {
|
@@ -135,22 +170,21 @@ const Image = ({
|
|
135
170
|
width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
|
136
171
|
height: `${size.height}px`
|
137
172
|
},
|
138
|
-
children: [/*#__PURE__*/_jsx("img", {
|
173
|
+
children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
|
174
|
+
style: {
|
175
|
+
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
|
176
|
+
},
|
139
177
|
alt: alt,
|
140
178
|
src: url,
|
141
179
|
onClick: handleImageClick
|
142
|
-
}), selected && /*#__PURE__*/_jsx(
|
180
|
+
}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
|
143
181
|
onPointerDown: onMouseDown,
|
144
182
|
style: {
|
145
|
-
width: "15px",
|
146
|
-
height: "15px",
|
147
183
|
opacity: 1,
|
148
|
-
background: "
|
184
|
+
background: "#FFF"
|
149
185
|
},
|
150
|
-
className: "resize",
|
151
|
-
children: /*#__PURE__*/_jsx(
|
152
|
-
icon: "resize"
|
153
|
-
})
|
186
|
+
className: "resize-br visible-on-hover",
|
187
|
+
children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
|
154
188
|
})]
|
155
189
|
}), children]
|
156
190
|
});
|
@@ -1,14 +1,21 @@
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
2
2
|
import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Node, Transforms } from "slate";
|
4
|
+
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
4
5
|
import Icon from "../../common/Icon";
|
5
6
|
import useResize from "../../utils/customHooks/useResize";
|
7
|
+
import { IconButton, Tooltip } from "@mui/material";
|
8
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
9
|
+
import SettingsIcon from "@mui/icons-material/Settings";
|
10
|
+
import AddIcon from "@mui/icons-material/Add";
|
11
|
+
import EmbedPopup from "./EmbedPopup";
|
6
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
14
|
const Video = ({
|
9
15
|
attributes,
|
10
16
|
element,
|
11
|
-
children
|
17
|
+
children,
|
18
|
+
customProps
|
12
19
|
}) => {
|
13
20
|
const {
|
14
21
|
url,
|
@@ -17,13 +24,18 @@ const Video = ({
|
|
17
24
|
const editor = useSlateStatic();
|
18
25
|
const selected = useSelected();
|
19
26
|
const focused = useFocused();
|
27
|
+
const [openSetttings, setOpenSettings] = useState(false);
|
20
28
|
const [parentDOM, setParentDOM] = useState(null);
|
29
|
+
const {
|
30
|
+
readOnly
|
31
|
+
} = customProps;
|
21
32
|
const [size, onMouseDown, resizing, onLoad] = useResize({
|
22
33
|
parentDOM,
|
23
34
|
size: element?.size
|
24
35
|
});
|
25
36
|
const arr = Array.from(Node.elements(editor));
|
26
37
|
const ele = arr.find(([elem]) => element === elem);
|
38
|
+
const path = ReactEditor.findPath(editor, element);
|
27
39
|
useEffect(() => {
|
28
40
|
if (editor && ele[1] !== undefined) {
|
29
41
|
const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
|
@@ -38,9 +50,53 @@ const Video = ({
|
|
38
50
|
});
|
39
51
|
}
|
40
52
|
}, [resizing]);
|
53
|
+
const ToolBar = () => {
|
54
|
+
return /*#__PURE__*/_jsxs("div", {
|
55
|
+
className: "element-toolbar visible-on-hover",
|
56
|
+
contentEditable: false,
|
57
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
58
|
+
title: "Settings",
|
59
|
+
arrow: true,
|
60
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
61
|
+
onClick: onSettings,
|
62
|
+
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
63
|
+
})
|
64
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
65
|
+
title: "Delete",
|
66
|
+
arrow: true,
|
67
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
68
|
+
onClick: onDelete,
|
69
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
70
|
+
})
|
71
|
+
})]
|
72
|
+
});
|
73
|
+
};
|
74
|
+
const onSettings = () => {
|
75
|
+
setOpenSettings(true);
|
76
|
+
};
|
77
|
+
const onSave = data => {
|
78
|
+
const updateData = {
|
79
|
+
...data
|
80
|
+
};
|
81
|
+
delete updateData.children;
|
82
|
+
Transforms.setNodes(editor, {
|
83
|
+
...updateData
|
84
|
+
}, {
|
85
|
+
at: path
|
86
|
+
});
|
87
|
+
onClose();
|
88
|
+
};
|
89
|
+
const onClose = () => {
|
90
|
+
setOpenSettings(false);
|
91
|
+
};
|
92
|
+
const onDelete = () => {
|
93
|
+
Transforms.removeNodes(editor, {
|
94
|
+
at: path
|
95
|
+
});
|
96
|
+
};
|
41
97
|
return /*#__PURE__*/_jsxs("div", {
|
42
98
|
...attributes,
|
43
|
-
className: "embed",
|
99
|
+
className: "embed has-hover",
|
44
100
|
style: {
|
45
101
|
display: "flex",
|
46
102
|
width: "100%",
|
@@ -48,14 +104,20 @@ const Video = ({
|
|
48
104
|
boxShadow: selected && focused && "0 0 3px 3px lightgray"
|
49
105
|
},
|
50
106
|
...element.attr,
|
51
|
-
children: [/*#__PURE__*/
|
107
|
+
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
108
|
+
element: element,
|
109
|
+
onSave: onSave,
|
110
|
+
onClose: onClose,
|
111
|
+
customProps: customProps,
|
112
|
+
format: "video"
|
113
|
+
}) : null, /*#__PURE__*/_jsxs("div", {
|
52
114
|
contentEditable: false,
|
53
115
|
style: {
|
54
116
|
position: "relative",
|
55
117
|
width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
|
56
118
|
height: `${size.height}px`
|
57
119
|
},
|
58
|
-
children: [
|
120
|
+
children: [/*#__PURE__*/_jsx(ToolBar, {}),
|
59
121
|
// The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
|
60
122
|
// So during resize replace the iframe with a simple div
|
61
123
|
resizing ? /*#__PURE__*/_jsx("div", {
|
@@ -71,21 +133,21 @@ const Video = ({
|
|
71
133
|
icon: "videoPlayer"
|
72
134
|
})
|
73
135
|
}) : /*#__PURE__*/_jsx("iframe", {
|
136
|
+
className: "embedd-iframe",
|
137
|
+
style: {
|
138
|
+
border: "none",
|
139
|
+
width: "100%",
|
140
|
+
height: "100%"
|
141
|
+
},
|
74
142
|
src: url,
|
75
|
-
frameBorder: "0",
|
76
143
|
title: alt
|
77
|
-
}),
|
144
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
78
145
|
onPointerDown: onMouseDown,
|
79
146
|
style: {
|
80
|
-
|
81
|
-
height: "15px",
|
82
|
-
opacity: 1,
|
83
|
-
background: "transparent"
|
147
|
+
background: "#FFF"
|
84
148
|
},
|
85
|
-
className: "resize",
|
86
|
-
children: /*#__PURE__*/_jsx(
|
87
|
-
icon: "resize"
|
88
|
-
})
|
149
|
+
className: "resize-br visible-on-hover",
|
150
|
+
children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
|
89
151
|
})]
|
90
152
|
}), children]
|
91
153
|
});
|