@flozy/editor 2.1.4 → 2.1.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/Editor/CommonEditor.js +5 -8
  2. package/dist/Editor/Elements/AppHeader/AppHeader.js +0 -2
  3. package/dist/Editor/Elements/Carousel/Carousel.js +2 -2
  4. package/dist/Editor/Elements/Embed/Frames/DarkFrame.js +30 -9
  5. package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +141 -0
  6. package/dist/Editor/Elements/Embed/Frames/InstaFrame.js +35 -10
  7. package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js +34 -10
  8. package/dist/Editor/Elements/Embed/Frames/LiteFrame.js +33 -9
  9. package/dist/Editor/Elements/Embed/Frames/RoundedDark.js +33 -9
  10. package/dist/Editor/Elements/Embed/Frames/RoundedLight.js +33 -9
  11. package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js +33 -9
  12. package/dist/Editor/Elements/Embed/Frames/Slider.js +40 -0
  13. package/dist/Editor/Elements/Embed/Image.js +15 -6
  14. package/dist/Editor/Elements/EmbedScript/Code.js +41 -0
  15. package/dist/Editor/Elements/EmbedScript/EmbedScript.js +65 -0
  16. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -1
  17. package/dist/Editor/Elements/List/CheckList.js +43 -36
  18. package/dist/Editor/Styles/EditorStyles.js +4 -2
  19. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
  20. package/dist/Editor/Toolbar/PopupTool/AddElements.js +1 -1
  21. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +1 -0
  22. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +23 -10
  23. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +21 -6
  24. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +5 -3
  25. package/dist/Editor/Toolbar/PopupTool/index.js +14 -14
  26. package/dist/Editor/Toolbar/Toolbar.js +9 -0
  27. package/dist/Editor/Toolbar/toolbarGroups.js +9 -1
  28. package/dist/Editor/common/Icon.js +12 -3
  29. package/dist/Editor/common/Shorthands/elements.js +0 -1
  30. package/dist/Editor/common/iconslist.js +72 -0
  31. package/dist/Editor/hooks/useDragDom.js +66 -0
  32. package/dist/Editor/hooks/useMouseMove.js +4 -1
  33. package/dist/Editor/utils/SlateUtilityFunctions.js +5 -5
  34. package/dist/Editor/utils/customHooks/useResize.js +1 -1
  35. package/dist/Editor/utils/embedScript.js +20 -0
  36. package/dist/Editor/utils/events.js +67 -14
  37. package/dist/Editor/utils/helper.js +8 -1
  38. package/package.json +1 -1
@@ -1,22 +1,45 @@
1
+ import React, { forwardRef } from "react";
1
2
  import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
3
- const RoundedLightB2 = ({
4
- href,
5
- id
6
- }) => {
4
+ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
5
+ const {
6
+ href,
7
+ id,
8
+ imagePos,
9
+ handleClick,
10
+ imageRef
11
+ } = props;
12
+ const {
13
+ calX,
14
+ calY,
15
+ scale
16
+ } = imagePos || {
17
+ calX: 0,
18
+ calY: 0,
19
+ scale: 100
20
+ };
7
21
  return /*#__PURE__*/_jsxs("svg", {
8
22
  xmlns: "http://www.w3.org/2000/svg",
9
23
  width: "62",
10
24
  height: "62",
11
25
  viewBox: "0 0 62 62",
12
26
  fill: "none",
27
+ style: {
28
+ userSelect: "none"
29
+ },
30
+ onClick: handleClick,
31
+ ref: ref,
13
32
  children: [/*#__PURE__*/_jsx("circle", {
14
33
  cx: "31",
15
34
  cy: "31",
16
35
  r: "28.5",
17
36
  stroke: "#E0E0E0",
18
37
  strokeWidth: "5",
19
- fill: `url(#imageSource_${id})`
38
+ fill: `url(#imageSource_${id})`,
39
+ ref: imageRef,
40
+ style: {
41
+ cursor: "move"
42
+ }
20
43
  }), /*#__PURE__*/_jsx("defs", {
21
44
  children: /*#__PURE__*/_jsx("pattern", {
22
45
  id: `imageSource_${id}`,
@@ -24,13 +47,14 @@ const RoundedLightB2 = ({
24
47
  width: "124",
25
48
  height: "124",
26
49
  children: /*#__PURE__*/_jsx("image", {
27
- x: "0",
28
- y: "0",
29
- height: "100%",
50
+ x: calX,
51
+ y: calY,
52
+ height: `${scale || 100}%`,
30
53
  href: href
31
54
  })
32
55
  })
33
56
  })]
34
57
  });
35
- };
58
+ });
59
+ RoundedLightB2.displayName = "RoundedLightB2";
36
60
  export default RoundedLightB2;
@@ -0,0 +1,40 @@
1
+ import React, { useState } from "react";
2
+ import Stack from "@mui/material/Stack";
3
+ import Slider from "@mui/material/Slider";
4
+ import { Typography } from "@mui/material";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const ContinuousSlider = props => {
8
+ const {
9
+ val,
10
+ onChange
11
+ } = props;
12
+ const [value, setValue] = useState(val || 100);
13
+ const handleChange = (event, newValue) => {
14
+ setValue(newValue);
15
+ onChange(newValue);
16
+ };
17
+ return /*#__PURE__*/_jsxs(Stack, {
18
+ spacing: 2,
19
+ direction: "row",
20
+ sx: {
21
+ mb: 0
22
+ },
23
+ alignItems: "center",
24
+ children: [/*#__PURE__*/_jsx(Typography, {
25
+ variant: "div",
26
+ children: "-"
27
+ }), /*#__PURE__*/_jsx(Slider, {
28
+ "aria-label": "Volume",
29
+ value: value,
30
+ onChange: handleChange,
31
+ min: 100,
32
+ step: 1,
33
+ max: 400
34
+ }), /*#__PURE__*/_jsx(Typography, {
35
+ variant: "div",
36
+ children: "+"
37
+ })]
38
+ });
39
+ };
40
+ export default ContinuousSlider;
@@ -10,6 +10,7 @@ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
12
  import frames from "./Frames";
13
+ import ImageFrame from "./Frames/ImageFrame";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  const Image = ({
@@ -32,7 +33,8 @@ const Image = ({
32
33
  objectFit,
33
34
  frame = null,
34
35
  webAddress,
35
- isNewTab
36
+ isNewTab,
37
+ framePos
36
38
  } = element;
37
39
  const {
38
40
  readOnly
@@ -72,10 +74,10 @@ const Image = ({
72
74
  const arr = Array.from(Node.elements(editor));
73
75
  const ele = arr.find(([elem]) => element === elem);
74
76
  const {
75
- hoverPath
77
+ hoverPath,
78
+ selectedPath
76
79
  } = useEditorContext();
77
- const selected = hoverPath === path.join(",");
78
- const ImageFrame = frame ? frames[frame] : null;
80
+ const selected = hoverPath === path.join(",") || selectedPath === path?.join(",");
79
81
  useEffect(() => {
80
82
  if (editor && ele && ele[1] !== undefined) {
81
83
  const dom = ReactEditor.toDOMNode(editor, element);
@@ -120,6 +122,9 @@ const Image = ({
120
122
  at: path
121
123
  });
122
124
  };
125
+ const onPosChange = data => {
126
+ onSave(data);
127
+ };
123
128
  const ToolBar = () => {
124
129
  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
125
130
  className: "element-toolbar visible-on-hover",
@@ -223,12 +228,16 @@ const Image = ({
223
228
  position: "relative",
224
229
  ...getWidth()
225
230
  },
226
- children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && ImageFrame ? /*#__PURE__*/_jsx(Box, {
231
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
227
232
  component: "div",
228
233
  className: "image-frame",
234
+ "data-path": path.join(","),
229
235
  children: /*#__PURE__*/_jsx(ImageFrame, {
236
+ frame: frame,
237
+ framePos: framePos,
230
238
  href: url,
231
- id: path.join(",")
239
+ id: path.join(","),
240
+ onChange: onPosChange
232
241
  })
233
242
  }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
234
243
  onPointerDown: onMouseDown,
@@ -0,0 +1,41 @@
1
+ import React, { useEffect, useRef } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+ const sanitize = input => {
5
+ const doc = new DOMParser().parseFromString(input, "text/html");
6
+ for (const elm of doc.querySelectorAll("*")) {
7
+ for (const attrib of elm.attributes) {
8
+ if (attrib.name.startsWith("on")) {
9
+ elm.removeAttribute(attrib.name);
10
+ }
11
+ }
12
+ }
13
+ return doc.body.innerHTML;
14
+ };
15
+ const Code = props => {
16
+ const codeRef = useRef();
17
+ const {
18
+ element,
19
+ attributes,
20
+ children
21
+ } = props;
22
+ const {
23
+ embedData
24
+ } = element;
25
+ useEffect(() => {
26
+ if (codeRef?.current) {
27
+ const slotHtml = document.createRange().createContextualFragment(embedData); // Create a 'tiny' document and parse the html string
28
+ codeRef.current.innerHTML = ""; // Clear the container
29
+ codeRef.current.appendChild(slotHtml);
30
+ }
31
+ }, []);
32
+ return /*#__PURE__*/_jsxs("div", {
33
+ contentEditable: false,
34
+ className: `embed-code`,
35
+ ...attributes,
36
+ children: [/*#__PURE__*/_jsx("div", {
37
+ ref: codeRef
38
+ }), children]
39
+ });
40
+ };
41
+ export default Code;
@@ -0,0 +1,65 @@
1
+ import React, { useState } from "react";
2
+ import ToolbarIcon from "../../common/ToolbarIcon";
3
+ import Icon from "../../common/Icon";
4
+ import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
5
+ import { insertEmbedScript } from "../../utils/embedScript";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
+ const EmbedScript = props => {
10
+ const {
11
+ editor,
12
+ icoBtnType
13
+ } = props;
14
+ const [open, setOpen] = useState(false);
15
+ const [code, setCode] = useState("");
16
+ const handleChange = e => {
17
+ setCode(e.target.value);
18
+ };
19
+ const handleClick = () => {
20
+ setOpen(true);
21
+ };
22
+ const onSubmit = () => {
23
+ insertEmbedScript(editor, code);
24
+ };
25
+ const onCancel = () => {
26
+ setOpen(false);
27
+ };
28
+ return /*#__PURE__*/_jsxs(_Fragment, {
29
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
30
+ title: "Code",
31
+ onClick: handleClick,
32
+ icon: /*#__PURE__*/_jsx(Icon, {
33
+ icon: "embedScript"
34
+ }),
35
+ icoBtnType: icoBtnType
36
+ }), /*#__PURE__*/_jsxs(Dialog, {
37
+ open: open,
38
+ fullWidth: true,
39
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
40
+ children: "Embed Code"
41
+ }), /*#__PURE__*/_jsx(DialogContent, {
42
+ children: /*#__PURE__*/_jsx("textarea", {
43
+ value: code,
44
+ onChange: handleChange,
45
+ style: {
46
+ minHeight: "200px",
47
+ width: "100%",
48
+ resize: "none",
49
+ padding: "4px",
50
+ boxSizing: "border-box"
51
+ }
52
+ })
53
+ }), /*#__PURE__*/_jsxs(DialogActions, {
54
+ children: [/*#__PURE__*/_jsx(Button, {
55
+ onClick: onSubmit,
56
+ children: "Save"
57
+ }), /*#__PURE__*/_jsx(Button, {
58
+ onClick: onCancel,
59
+ children: "Cancel"
60
+ })]
61
+ })]
62
+ })]
63
+ });
64
+ };
65
+ export default EmbedScript;
@@ -44,7 +44,8 @@ const FormTextArea = props => {
44
44
  },
45
45
  borderStyle: borderStyle || "solid",
46
46
  color: textColor || "#000",
47
- background: bgColor || "transparent"
47
+ background: bgColor || "transparent",
48
+ fontSize: '14px'
48
49
  }
49
50
  })
50
51
  });
@@ -6,6 +6,7 @@ import Icon from "../../common/Icon";
6
6
  import CheckListStyle from "./CheckListStyles";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  const CheckList = ({
10
11
  attributes,
11
12
  children,
@@ -26,44 +27,50 @@ const CheckList = ({
26
27
  at: path
27
28
  });
28
29
  };
29
- return /*#__PURE__*/_jsxs("div", {
30
- ...attributes,
31
- style: {
32
- textAlign: element.alignment || "left",
33
- display: "flex",
34
- justifyContent: "center",
35
- alignItems: "center"
36
- },
37
- children: [/*#__PURE__*/_jsxs("div", {
38
- contentEditable: false,
39
- className: "checkbox-edit",
40
- children: [/*#__PURE__*/_jsx(FormControlLabel, {
41
- control: /*#__PURE__*/_jsx(Checkbox, {
42
- icon: /*#__PURE__*/_jsx(Icon, {
43
- icon: "checkListButton"
44
- }),
45
- checkedIcon: /*#__PURE__*/_jsx(Icon, {
46
- icon: "checkListButtonActive"
47
- }),
48
- sx: classes.checkBoxHover,
49
- checked: checked,
50
- onChange: handleCheck
51
- })
52
- }), /*#__PURE__*/_jsx("span", {
53
- className: "checkbox-inner"
54
- })]
55
- }), /*#__PURE__*/_jsx("div", {
56
- contentEditable: !readOnly,
57
- suppressContentEditableWarning: true,
30
+ const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
31
+ return /*#__PURE__*/_jsx(_Fragment, {
32
+ children: /*#__PURE__*/_jsxs("div", {
33
+ ...attributes,
58
34
  style: {
59
- flex: 1,
60
- opacity: checked ? 1 : 1,
61
- textDecoration: !checked ? "none" : "none"
35
+ textAlign: element.alignment || "left",
36
+ display: "flex",
37
+ justifyContent: "center",
38
+ alignItems: "center"
62
39
  },
63
- className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
64
- placeholder: "Todo List",
65
- children: children
66
- })]
40
+ children: [/*#__PURE__*/_jsxs("div", {
41
+ contentEditable: false,
42
+ className: "checkbox-edit",
43
+ style: nestedCheckList ? {
44
+ visibility: "hidden"
45
+ } : {},
46
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
47
+ control: /*#__PURE__*/_jsx(Checkbox, {
48
+ icon: /*#__PURE__*/_jsx(Icon, {
49
+ icon: "checkListButton"
50
+ }),
51
+ checkedIcon: /*#__PURE__*/_jsx(Icon, {
52
+ icon: "checkListButtonActive"
53
+ }),
54
+ sx: classes.checkBoxHover,
55
+ checked: checked,
56
+ onChange: handleCheck
57
+ })
58
+ }), /*#__PURE__*/_jsx("span", {
59
+ className: "checkbox-inner"
60
+ })]
61
+ }), /*#__PURE__*/_jsx("div", {
62
+ contentEditable: !readOnly,
63
+ suppressContentEditableWarning: true,
64
+ style: {
65
+ flex: 1,
66
+ opacity: checked ? 1 : 1,
67
+ textDecoration: !checked ? "none" : "none"
68
+ },
69
+ className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
70
+ placeholder: nestedCheckList ? "" : "Todo List",
71
+ children: children
72
+ })]
73
+ })
67
74
  });
68
75
  };
69
76
  export default CheckList;
@@ -22,7 +22,9 @@ const editorStyles = ({
22
22
  position: "fixed",
23
23
  bottom: 0,
24
24
  left: 0,
25
- width: "100%"
25
+ width: "100%",
26
+ zIndex: 99999,
27
+ background: "white"
26
28
  }
27
29
  },
28
30
  slateWrapper: {
@@ -225,7 +227,7 @@ const editorStyles = ({
225
227
  width: "100%",
226
228
  height: "100%",
227
229
  padding: "0px",
228
- pointerEvents: "none",
230
+ // pointerEvents: "none",
229
231
  "& svg": {
230
232
  width: "100%",
231
233
  height: "100%",
@@ -50,10 +50,8 @@ const MiniToolbar = props => {
50
50
  }
51
51
  }, [editor.selection]);
52
52
  const handleClick = type => e => {
53
- if (getSelectedText(editor)?.length === 0) {
54
- setPopper(type);
55
- setAnchorEl(e.currentTarget);
56
- }
53
+ setPopper(type);
54
+ setAnchorEl(e.currentTarget);
57
55
  };
58
56
  const onClose = () => {
59
57
  setPopper(null);
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Grid, Box } from "@mui/material";
2
+ import { Grid } from "@mui/material";
3
3
  import { toolbarGroups } from "../toolbarGroups";
4
4
  import { RenderToolbarIcon } from "../Toolbar";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -144,6 +144,7 @@ function SelectTypography({
144
144
  return selected === t.value;
145
145
  }
146
146
  }
147
+ return false;
147
148
  });
148
149
  }, [typographyOptions, activeMark, isBlockActive, editor]);
149
150
  const onChange = (format, option) => {
@@ -1,9 +1,9 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
4
  import OpenInFullIcon from "@mui/icons-material/OpenInFull";
5
5
  import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
6
- import { Search } from "@mui/icons-material";
6
+ import Icon from "../../common/Icon";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  const SearchBox = props => {
@@ -15,9 +15,6 @@ const SearchBox = props => {
15
15
  return /*#__PURE__*/_jsx(TextField, {
16
16
  sx: classes.searchBox,
17
17
  size: "small",
18
- InputProps: {
19
- startAdornment: /*#__PURE__*/_jsx(Search, {})
20
- },
21
18
  value: search,
22
19
  onChange: handleChange
23
20
  });
@@ -33,6 +30,10 @@ const PopperHeader = props => {
33
30
  search,
34
31
  onSearch
35
32
  } = props;
33
+ const [openSearch, setOpenSearch] = useState(false);
34
+ const handleSearchButton = () => {
35
+ setOpenSearch(!openSearch);
36
+ };
36
37
  return /*#__PURE__*/_jsx(Grid, {
37
38
  container: true,
38
39
  padding: 2,
@@ -61,16 +62,28 @@ const PopperHeader = props => {
61
62
  }), /*#__PURE__*/_jsxs(Grid, {
62
63
  sx: classes.textFormatLabel,
63
64
  justifyContent: "end",
64
- children: [needFullscreen ? /*#__PURE__*/_jsx(SearchBox, {
65
- classes: classes,
66
- search: search,
67
- handleChange: onSearch
65
+ children: [needFullscreen ? /*#__PURE__*/_jsxs(Grid, {
66
+ sx: {
67
+ position: 'relative'
68
+ },
69
+ children: [/*#__PURE__*/_jsx(IconButton, {
70
+ className: openSearch ? 'searchContainer' : '',
71
+ onClick: handleSearchButton,
72
+ children: /*#__PURE__*/_jsx(Icon, {
73
+ icon: openSearch ? 'closeIcon' : 'SearchIcon'
74
+ })
75
+ }), openSearch && /*#__PURE__*/_jsx(SearchBox, {
76
+ classes: classes,
77
+ search: search,
78
+ handleChange: onSearch
79
+ })]
68
80
  }) : null, needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
69
81
  title: "Toggle Fullscreen",
70
82
  arrow: true,
71
83
  children: /*#__PURE__*/_jsx(IconButton, {
72
84
  style: {
73
- marginRight: "8px"
85
+ marginRight: "8px",
86
+ marginLeft: "8px"
74
87
  },
75
88
  className: "close-popupbtn",
76
89
  onClick: toggleFullscreen,
@@ -133,7 +133,15 @@ const usePopupStyle = theme => ({
133
133
  fontSize: "16px",
134
134
  lineHeight: "25px",
135
135
  marginTop: "12px",
136
- marginBottom: "8px"
136
+ marginBottom: "8px",
137
+ '& .searchContainer': {
138
+ position: "absolute",
139
+ right: 0,
140
+ zIndex: 3
141
+ },
142
+ '& .MuiFormControl-root.MuiTextField-root input': {
143
+ padding: '8px 35px 6px 12px'
144
+ }
137
145
  },
138
146
  textFormatField: {
139
147
  marginBottom: "16px"
@@ -331,7 +339,6 @@ const usePopupStyle = theme => ({
331
339
  }
332
340
  },
333
341
  searchBox: {
334
- marginRight: "12px",
335
342
  "& input": {
336
343
  padding: "6px 12px"
337
344
  },
@@ -447,13 +454,13 @@ const usePopupStyle = theme => ({
447
454
  padding: "4px 8px",
448
455
  overflowX: "auto",
449
456
  "& .customSelectTool": {
450
- padding: "8px",
451
- color: theme.palette.secondary.main,
457
+ padding: "0px 8px",
458
+ color: theme?.palette?.secondary?.main,
452
459
  gap: "4px"
453
460
  },
454
461
  "& .verticalLine": {
455
462
  borderLeft: "1px solid #E0E0E0",
456
- minHeight: "35px",
463
+ minHeight: "20px",
457
464
  height: "100%"
458
465
  },
459
466
  "& .toolWrapper": {
@@ -471,7 +478,7 @@ const usePopupStyle = theme => ({
471
478
  textTransform: "none"
472
479
  },
473
480
  "& .fontColorBtn": {
474
- color: theme.palette.secondary.main,
481
+ color: theme?.palette?.secondary?.main,
475
482
  borderRadius: "unset",
476
483
  fontSize: "17px",
477
484
  padding: "0px",
@@ -498,6 +505,7 @@ const usePopupStyle = theme => ({
498
505
  width: "100%",
499
506
  justifyContent: "start",
500
507
  paddingRight: "20px",
508
+ fontSize: "14px",
501
509
  "& :hover": {
502
510
  background: "#F0F5FA !important"
503
511
  },
@@ -514,6 +522,13 @@ const usePopupStyle = theme => ({
514
522
  minWidth: "0px !important",
515
523
  textTransform: "none"
516
524
  }
525
+ },
526
+ mobileMiniTextWrapper: {
527
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
528
+ position: "fixed",
529
+ bottom: "env(safe-area-inset-bottom)",
530
+ left: 0,
531
+ width: "100%"
517
532
  }
518
533
  });
519
534
  export default usePopupStyle;
@@ -13,6 +13,7 @@ import LinkButton from "../../Elements/Link/LinkButton";
13
13
  import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
14
14
  import { AllColors } from "../../Elements/Color Picker/ColorButtons";
15
15
  import { fontFamilyMap } from "../../utils/font";
16
+ import { getBorderColor } from "../../utils/helper";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
19
  const allTools = toolbarGroups.flat();
@@ -376,10 +377,11 @@ const TextFormat = props => {
376
377
  onClick: handleQuote({
377
378
  color: !bqColor ? "rgb(47, 94, 188)" : null
378
379
  }),
379
- children: /*#__PURE__*/_jsx("span", {
380
+ children: /*#__PURE__*/_jsx("blockquote", {
380
381
  style: {
381
- borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
382
- paddingLeft: "12px"
382
+ paddingLeft: "12px",
383
+ ...getBorderColor(bqColor || "transparent", 3),
384
+ borderWidth: bqColor ? "0px 0px 0px 3px" : "0px"
383
385
  },
384
386
  children: "Quote"
385
387
  })
@@ -2,15 +2,12 @@ import React, { useEffect, useState } from "react";
2
2
  import { Popper, Fade, Paper } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
4
  import { useSlate, useFocused } from "slate-react";
5
- import TextFormat from "./TextFormat";
6
5
  import usePopupStyle from "./PopupToolStyle";
7
6
  import useDrag from "../../hooks/useDrag";
8
- import PopperHeader from "./PopperHeader";
9
7
  import { TableUtil } from "../../utils/table";
10
8
  import useWindowResize from "../../hooks/useWindowResize";
11
- // import MiniTextFormat from "./MiniTextFormat";
9
+ import MiniTextFormat from "./MiniTextFormat";
12
10
  import { jsx as _jsx } from "react/jsx-runtime";
13
- import { jsxs as _jsxs } from "react/jsx-runtime";
14
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
15
12
  const PopupTool = props => {
16
13
  const {
@@ -70,7 +67,14 @@ const PopupTool = props => {
70
67
  setOpen(false);
71
68
  };
72
69
  return open ? /*#__PURE__*/_jsx(_Fragment, {
73
- children: /*#__PURE__*/_jsx(Popper, {
70
+ children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
71
+ className: "mobileMiniTextWrapper",
72
+ children: /*#__PURE__*/_jsx(MiniTextFormat, {
73
+ editor: editor,
74
+ classes: classes,
75
+ closeMainPopup: handleClose
76
+ })
77
+ }) : /*#__PURE__*/_jsx(Popper, {
74
78
  id: id,
75
79
  open: open,
76
80
  anchorEl: anchorEl,
@@ -83,19 +87,15 @@ const PopupTool = props => {
83
87
  }) => /*#__PURE__*/_jsx(Fade, {
84
88
  ...TransitionProps,
85
89
  timeout: 350,
86
- children: /*#__PURE__*/_jsxs(Paper, {
90
+ children: /*#__PURE__*/_jsx(Paper, {
87
91
  style: {
88
92
  borderRadius: "10px"
89
93
  },
90
- className: size.device === "xs" ? "mobileMiniTextWrapper" : "",
91
- children: [/*#__PURE__*/_jsx(PopperHeader, {
92
- title: "Text Settings",
93
- classes: classes,
94
- onClose: handleClose
95
- }), /*#__PURE__*/_jsx(TextFormat, {
94
+ children: /*#__PURE__*/_jsx(MiniTextFormat, {
96
95
  editor: editor,
97
- classes: classes
98
- })]
96
+ classes: classes,
97
+ closeMainPopup: handleClose
98
+ })
99
99
  })
100
100
  })
101
101
  })
@@ -30,6 +30,7 @@ import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
30
30
  import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
31
31
  import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
32
32
  import DividerButton from "../Elements/Divider/DividerButton.js";
33
+ import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
33
34
  import { jsx as _jsx } from "react/jsx-runtime";
34
35
  import { jsxs as _jsxs } from "react/jsx-runtime";
35
36
  export const RenderToolbarIcon = props => {
@@ -94,6 +95,14 @@ export const RenderToolbarIcon = props => {
94
95
  icoBtnType: icoBtnType,
95
96
  lbT: element.lbT
96
97
  }, element.id);
98
+ case "embedScript":
99
+ return /*#__PURE__*/_jsx(EmbedScript, {
100
+ format: element.format,
101
+ editor: editor,
102
+ customProps: customProps,
103
+ icoBtnType: icoBtnType,
104
+ lbT: element.lbT
105
+ }, element.id);
97
106
  case "color-picker":
98
107
  return /*#__PURE__*/_jsx(ColorPicker, {
99
108
  activeMark: activeMark,