@flozy/editor 1.6.0 → 1.6.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +50 -7
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -1,18 +1,18 @@
1
- import React, { useState } from "react";
2
- import { Transforms, Path } from "slate";
1
+ import React, { useEffect, useState } from "react";
2
+ import { Transforms, Editor } from "slate";
3
3
  import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
4
4
  import Slider from "react-slick";
5
5
  import "./slick-theme.min.css";
6
6
  import "./slick.min.css";
7
7
  import { PrevArrow, NextArrow } from "./Arrows";
8
8
  import { carouselItem } from "../../utils/carouselItem";
9
- import { IconButton, Tooltip } from "@mui/material";
9
+ import { IconButton, Tooltip, Box } from "@mui/material";
10
10
  import EditIcon from "@mui/icons-material/Edit";
11
- import AddIcon from "@mui/icons-material/Add";
11
+ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
12
12
  import DeleteIcon from "@mui/icons-material/Delete";
13
+ import { GridAddSectionIcon } from "../../common/iconslist";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
- import { createElement as _createElement } from "react";
16
16
  const Empty = ({
17
17
  children
18
18
  }) => {
@@ -32,8 +32,9 @@ const Carousel = props => {
32
32
  readOnly
33
33
  } = customProps;
34
34
  const editor = useSlateStatic();
35
- const selected = useSelected();
35
+ const [showOptions, setShowOptions] = useState(false);
36
36
  const [edit, setEdit] = useState(false);
37
+ const path = ReactEditor.findPath(editor, element);
37
38
  const settings = {
38
39
  dots: true,
39
40
  infinite: true,
@@ -43,13 +44,15 @@ const Carousel = props => {
43
44
  nextArrow: /*#__PURE__*/_jsx(NextArrow, {}),
44
45
  prevArrow: /*#__PURE__*/_jsx(PrevArrow, {})
45
46
  };
47
+ useEffect(() => {
48
+ if (!edit) {
49
+ ReactEditor.focus(editor);
50
+ Transforms.select(editor, Editor.end(editor, []));
51
+ }
52
+ }, [edit]);
46
53
  const onAddSlide = () => {
47
- const currentPath = editor.selection?.anchor?.path;
48
- const ancestorsPath = Path.ancestors(currentPath, {
49
- reverse: true
50
- });
51
- const insertPath = ancestorsPath[1];
52
- if (insertPath) {
54
+ const insertPath = [path[0], children.length];
55
+ if (insertPath[0] !== undefined) {
53
56
  insertPath[insertPath.length - 1] = element.children.length;
54
57
  Transforms.insertNodes(editor, [{
55
58
  ...carouselItem()
@@ -67,29 +70,36 @@ const Carousel = props => {
67
70
  at: [...path]
68
71
  });
69
72
  };
73
+ const onMouseOver = () => {
74
+ setShowOptions(true);
75
+ };
76
+ const onMouseLeave = () => {
77
+ setShowOptions(false);
78
+ };
70
79
  const ToolBar = () => {
71
- return selected ? /*#__PURE__*/_jsxs("div", {
80
+ return !readOnly && showOptions ? /*#__PURE__*/_jsxs("div", {
72
81
  className: "element-toolbar hr",
73
82
  contentEditable: false,
74
83
  style: {
75
- top: "-42px"
84
+ top: "-32px",
85
+ left: "0px"
76
86
  },
77
87
  children: [/*#__PURE__*/_jsx(Tooltip, {
78
- title: edit ? "Save" : "Edit",
88
+ title: edit ? "Save Carousel" : "Edit Carousel",
79
89
  arrow: true,
80
90
  children: /*#__PURE__*/_jsx(IconButton, {
81
91
  onClick: onEdit,
82
- children: /*#__PURE__*/_jsx(EditIcon, {})
92
+ children: !edit ? /*#__PURE__*/_jsx(EditIcon, {}) : /*#__PURE__*/_jsx(CheckCircleIcon, {})
83
93
  })
84
94
  }), /*#__PURE__*/_jsx(Tooltip, {
85
95
  title: "Add Slide",
86
96
  arrow: true,
87
97
  children: /*#__PURE__*/_jsx(IconButton, {
88
98
  onClick: onAddSlide,
89
- children: /*#__PURE__*/_jsx(AddIcon, {})
99
+ children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
90
100
  })
91
101
  }), /*#__PURE__*/_jsx(Tooltip, {
92
- title: "Delete",
102
+ title: "Delete Carousel",
93
103
  arrow: true,
94
104
  children: /*#__PURE__*/_jsx(IconButton, {
95
105
  onClick: onDelete,
@@ -102,20 +112,29 @@ const Carousel = props => {
102
112
  ...attributes,
103
113
  className: "sliderBg",
104
114
  style: {
105
- padding: "32px",
106
115
  backgroundColor: "transparent",
107
- position: "relative"
116
+ position: "relative",
117
+ minHeight: "300px"
108
118
  },
119
+ contentEditable: edit,
120
+ onMouseOver: onMouseOver,
121
+ onMouseLeave: onMouseLeave,
109
122
  children: [edit ? /*#__PURE__*/_jsx(Empty, {
110
123
  children: children
111
- }) : /*#__PURE__*/_createElement(Slider, {
112
- ...settings,
113
- key: children.length
114
- }, children.map((m, i) => {
115
- return /*#__PURE__*/_jsx("div", {
116
- children: m
117
- }, i);
118
- })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
124
+ }) : /*#__PURE__*/_jsx(Box, {
125
+ component: "div",
126
+ style: {
127
+ padding: "12px"
128
+ },
129
+ children: /*#__PURE__*/_jsx(Slider, {
130
+ ...settings,
131
+ children: children.map((m, i) => {
132
+ return /*#__PURE__*/_jsx("div", {
133
+ children: m
134
+ }, i);
135
+ })
136
+ })
137
+ }, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
119
138
  });
120
139
  };
121
140
  export default Carousel;
@@ -1,22 +1,21 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import { insertCarousel } from "../../utils/carousel";
4
3
  import { Carousal } from "../../common/iconslist";
4
+ import ToolbarIcon from "../../common/ToolbarIcon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const CarouselButton = props => {
7
7
  const {
8
- editor
8
+ editor,
9
+ icoBtnType
9
10
  } = props;
10
11
  const handleClick = () => {
11
12
  insertCarousel(editor);
12
13
  };
13
- return /*#__PURE__*/_jsx(Tooltip, {
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
14
15
  title: "Carousel",
15
- arrow: true,
16
- children: /*#__PURE__*/_jsx(IconButton, {
17
- onClick: handleClick,
18
- children: /*#__PURE__*/_jsx(Carousal, {})
19
- })
16
+ onClick: handleClick,
17
+ icon: /*#__PURE__*/_jsx(Carousal, {}),
18
+ icoBtnType: icoBtnType
20
19
  });
21
20
  };
22
21
  export default CarouselButton;
@@ -0,0 +1,133 @@
1
+ import React, { useState } from "react";
2
+ import { Box, IconButton, Popover } from "@mui/material";
3
+ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
+ import Button from "../../common/Button";
5
+ import { colors } from "./defaultColors";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ let c = [];
9
+ const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
10
+ if (i % 7 === 0) {
11
+ a.push(c);
12
+ c = [];
13
+ }
14
+ c.push(b);
15
+ return a;
16
+ }, []).reverse();
17
+ const SingleColorButton = ({
18
+ crs,
19
+ index,
20
+ handleSelect,
21
+ classes,
22
+ handleMore,
23
+ activeColor
24
+ }) => {
25
+ return /*#__PURE__*/_jsxs(Box, {
26
+ style: {
27
+ width: "100%",
28
+ display: "flex",
29
+ alignItems: "center",
30
+ padding: "8px"
31
+ },
32
+ children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
33
+ onClick: handleSelect(m),
34
+ style: {
35
+ background: m
36
+ },
37
+ sx: classes.colorButtonSingle,
38
+ className: `${activeColor === m ? "active" : ""}`
39
+ }, `color_bs_${m}`)), index === 0 && handleMore ? /*#__PURE__*/_jsx(IconButton, {
40
+ onClick: handleMore,
41
+ className: "more-btn-cbs",
42
+ children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
43
+ }) : null]
44
+ }, `ci_bs_row_${index}}`);
45
+ };
46
+ export const AllColors = props => {
47
+ const {
48
+ classes,
49
+ onSelect,
50
+ activeColor
51
+ } = props;
52
+ const all = ColorChunks([]);
53
+ return /*#__PURE__*/_jsx(Box, {
54
+ component: "div",
55
+ sx: classes.allColor,
56
+ children: /*#__PURE__*/_jsx(Box, {
57
+ sx: classes.allColorInner,
58
+ children: /*#__PURE__*/_jsx(Box, {
59
+ className: "buttonsWrpr",
60
+ children: all.map((m, i) => {
61
+ return /*#__PURE__*/_jsx(SingleColorButton, {
62
+ crs: m,
63
+ index: i,
64
+ handleSelect: onSelect,
65
+ classes: classes,
66
+ activeColor: activeColor
67
+ }, `si_btn_row1_${m}_${i}`);
68
+ })
69
+ })
70
+ })
71
+ });
72
+ };
73
+ const ColorButtons = props => {
74
+ const {
75
+ onSelect,
76
+ classes,
77
+ activeColor
78
+ } = props;
79
+ const [row1, ...restRows] = ColorChunks([]);
80
+ const [anchorEl, setAnchorEl] = useState(null);
81
+ const open = Boolean(anchorEl);
82
+ const handleMore = e => {
83
+ setAnchorEl(e.currentTarget);
84
+ };
85
+ const handleClose = () => {
86
+ setAnchorEl(null);
87
+ };
88
+ const handleSelect = color => () => {
89
+ onSelect(color);
90
+ };
91
+ return /*#__PURE__*/_jsxs(Box, {
92
+ component: "span",
93
+ sx: classes.colorButtons,
94
+ children: [/*#__PURE__*/_jsx(Box, {
95
+ className: "buttonsWrpr first",
96
+ children: [row1].map((m, i) => {
97
+ return /*#__PURE__*/_jsx(SingleColorButton, {
98
+ crs: m,
99
+ index: i,
100
+ handleSelect: handleSelect,
101
+ classes: classes,
102
+ handleMore: handleMore,
103
+ activeColor: activeColor
104
+ }, `si_btn_row1_${m}_${i}`);
105
+ })
106
+ }), /*#__PURE__*/_jsx(Popover, {
107
+ open: open,
108
+ anchorEl: anchorEl,
109
+ onClose: handleClose,
110
+ anchorOrigin: {
111
+ vertical: "bottom",
112
+ horizontal: "right"
113
+ },
114
+ transformOrigin: {
115
+ vertical: "top",
116
+ horizontal: "right"
117
+ },
118
+ children: /*#__PURE__*/_jsx(Box, {
119
+ sx: classes.colorButtonsInner,
120
+ children: restRows.map((m, i) => {
121
+ return /*#__PURE__*/_jsx(SingleColorButton, {
122
+ crs: m,
123
+ index: i,
124
+ handleSelect: handleSelect,
125
+ classes: classes,
126
+ activeColor: activeColor
127
+ }, `si_btn_${m}_${i}`);
128
+ })
129
+ })
130
+ })]
131
+ });
132
+ };
133
+ export default ColorButtons;
@@ -1,14 +1,16 @@
1
1
  import React, { useState } from "react";
2
2
  import { ReactEditor } from "slate-react";
3
- import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
4
3
  import { Transforms } from "slate";
4
+ import ColorPickerTool from "react-gcolor-picker";
5
+ import { IconButton, Tooltip, Box, Popover } from "@mui/material";
6
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
5
7
  import { logo } from "./LogoIcon";
6
8
  import "./ColorPicker.css";
7
- import ColorPickerTool from "react-gcolor-picker";
8
- import { Dialog, IconButton, Tooltip } from "@mui/material";
9
+ import ColorButtons from "./ColorButtons";
10
+ import ColorPickerStyles from "./Styles";
9
11
  import { jsx as _jsx } from "react/jsx-runtime";
10
- import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
12
14
  const DEFAULT_COLOR = {
13
15
  color: "#000000",
14
16
  bgcolor: "#FFFFFF"
@@ -17,15 +19,18 @@ const ColorPicker = ({
17
19
  format,
18
20
  editor,
19
21
  showHex,
20
- title
22
+ title,
23
+ classes
21
24
  }) => {
22
25
  const [selection, setSelection] = useState();
23
- const [popup, setPopup] = useState(false);
26
+ const [anchorEl, setAnchorEl] = useState(null);
27
+ const open = Boolean(anchorEl);
28
+ const pickerStyles = ColorPickerStyles();
24
29
  const onOpen = e => {
25
30
  e.preventDefault();
31
+ setAnchorEl(e.currentTarget);
26
32
  setSelection(editor.selection);
27
33
  selection && ReactEditor.focus(editor);
28
- setPopup(true);
29
34
  };
30
35
  const handleFormSubmit = color => {
31
36
  if (!color) return;
@@ -37,27 +42,41 @@ const ColorPicker = ({
37
42
  selection && ReactEditor.focus(editor);
38
43
  handleClose();
39
44
  };
45
+ const onSelect = color => {
46
+ handleFormSubmit(color);
47
+ };
40
48
  const handleClose = () => {
41
- setPopup(false);
49
+ setAnchorEl(null);
42
50
  };
43
51
  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
44
52
  const Logo = logo[format](activeColor);
45
53
  return /*#__PURE__*/_jsxs(_Fragment, {
46
- children: [/*#__PURE__*/_jsxs(Tooltip, {
54
+ children: [/*#__PURE__*/_jsx(Tooltip, {
47
55
  title: title,
48
56
  arrow: true,
49
- children: [/*#__PURE__*/_jsx(IconButton, {
57
+ children: /*#__PURE__*/_jsx(IconButton, {
50
58
  onClick: onOpen,
51
59
  children: Logo
52
- }), showHex ? /*#__PURE__*/_jsx("div", {
53
- style: {
54
- display: "inline-flex"
55
- },
56
- children: activeColor
57
- }) : null]
58
- }), /*#__PURE__*/_jsx(Dialog, {
59
- open: popup,
60
+ })
61
+ }), showHex ? /*#__PURE__*/_jsx(Box, {
62
+ sx: classes.hexStyle,
63
+ children: activeColor
64
+ }) : null, /*#__PURE__*/_jsx(ColorButtons, {
65
+ classes: pickerStyles,
66
+ onSelect: onSelect,
67
+ activeColor: activeColor
68
+ }), /*#__PURE__*/_jsx(Popover, {
69
+ open: open,
70
+ anchorEl: anchorEl,
60
71
  onClose: handleClose,
72
+ anchorOrigin: {
73
+ vertical: "bottom",
74
+ horizontal: "center"
75
+ },
76
+ transformOrigin: {
77
+ vertical: "top",
78
+ horizontal: "center"
79
+ },
61
80
  children: /*#__PURE__*/_jsx(ColorPickerTool, {
62
81
  gradient: true,
63
82
  value: activeColor,
@@ -67,6 +86,7 @@ const ColorPicker = ({
67
86
  });
68
87
  };
69
88
  ColorPicker.defaultProps = {
70
- rounded: false
89
+ rounded: false,
90
+ classes: {}
71
91
  };
72
92
  export default ColorPicker;
@@ -0,0 +1,51 @@
1
+ const ColorPickerStyles = () => ({
2
+ colorButtons: {
3
+ "& .buttonsWrpr": {
4
+ display: "flex",
5
+ justifyCotnent: "center"
6
+ },
7
+ "& button": {
8
+ width: "24px",
9
+ height: "24px",
10
+ marginRight: "8px",
11
+ border: "1px solid #ccc"
12
+ }
13
+ },
14
+ colorButtonSingle: {
15
+ "&.active": {
16
+ "&:before": {
17
+ content: '" "',
18
+ position: "absolute",
19
+ top: "-5px",
20
+ left: "-5px",
21
+ width: "calc(100% + 4px)",
22
+ height: "calc(100% + 4px)",
23
+ border: "3px solid blue",
24
+ borderRadius: "50%"
25
+ }
26
+ }
27
+ },
28
+ colorButtonsInner: {
29
+ width: "100%",
30
+ padding: "4px",
31
+ display: "flex",
32
+ justifyCotnent: "center",
33
+ alignItems: "center",
34
+ flexDirection: "column",
35
+ "& .buttonsWrpr": {
36
+ display: "flex",
37
+ justifyCotnent: "center",
38
+ alignItems: "center"
39
+ },
40
+ ".more-btn-cbs": {
41
+ display: "none"
42
+ },
43
+ "& button": {
44
+ width: "24px",
45
+ height: "24px",
46
+ margin: "0px 4px",
47
+ border: "1px solid #ccc"
48
+ }
49
+ }
50
+ });
51
+ export default ColorPickerStyles;
@@ -1 +1 @@
1
- export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"];
1
+ export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)"];
@@ -1,49 +1,47 @@
1
- import React, { useRef, useState } from "react";
1
+ import React, { 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, Tooltip } from "@mui/material";
5
- import CloseIcon from "@mui/icons-material/Close";
6
4
  import Icon from "../../common/Icon";
7
5
  import { isBlockActive } from "../../utils/SlateUtilityFunctions";
8
- import usePopup from "../../utils/customHooks/usePopup";
9
6
  import { insertEmbed } from "../../utils/embed";
10
7
  import "./Embed.css";
11
- import ImageUploader from "../../common/ImageUploader";
8
+ import ToolbarIcon from "../../common/ToolbarIcon";
9
+ import ImageSelector from "../../common/ImageSelector/ImageSelector";
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";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
13
  const EMBED_LABEL = {
16
14
  image: "Image",
17
- video: "Video or Embed"
15
+ video: "Video",
16
+ embed: "Embed"
18
17
  };
19
18
  const Embed = ({
20
19
  editor,
21
20
  format,
21
+ lbT,
22
22
  customProps,
23
- className
23
+ icoBtnType
24
24
  }) => {
25
- const urlInputRef = useRef();
26
25
  const [open, setOpen] = useState(false);
27
- const [showInput, setShowInput] = usePopup(urlInputRef);
28
26
  const [formData, setFormData] = useState({
29
27
  url: "",
30
28
  alt: "",
31
29
  images: []
32
30
  });
33
31
  const [selection, setSelection] = useState();
34
- const handleFormSubmit = () => {
35
- if (formData?.url || formData?.images.length > 0) {
32
+ const handleFormSubmit = fd => {
33
+ if (fd?.url || fd?.images.length > 0) {
36
34
  selection && Transforms.select(editor, selection);
37
35
  selection && ReactEditor.focus(editor);
38
36
  insertEmbed(editor, {
39
- ...formData
37
+ ...fd
40
38
  }, format);
41
- setShowInput(false);
42
39
  setFormData({
43
40
  url: "",
44
41
  alt: ""
45
42
  });
46
43
  }
44
+ handleClose();
47
45
  };
48
46
  const onToggle = e => {
49
47
  e.preventDefault();
@@ -51,125 +49,34 @@ const Embed = ({
51
49
  selection && ReactEditor.focus(editor);
52
50
  setOpen(true);
53
51
  };
54
- const onSave = () => {
55
- handleFormSubmit();
56
- setOpen(false);
57
- };
58
- const onClose = () => {
52
+ const handleClose = () => {
59
53
  setOpen(false);
60
54
  };
61
- const onUploaded = uploadedData => {
62
- setFormData({
63
- ...formData,
64
- ...uploadedData
65
- });
66
- };
67
- const handleChange = e => {
68
- setFormData({
55
+ const onSelectImage = img => {
56
+ const fd = {
69
57
  ...formData,
70
- [e.target.name]: e.target.value
58
+ url: img
59
+ };
60
+ setFormData(fd);
61
+ handleFormSubmit({
62
+ ...fd
71
63
  });
72
64
  };
73
- const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
74
65
  return /*#__PURE__*/_jsxs(_Fragment, {
75
- children: [/*#__PURE__*/_jsx(Tooltip, {
76
- title: EMBED_LABEL[format],
77
- arrow: true,
78
- children: /*#__PURE__*/_jsx(IconButton, {
79
- className: isBlockActive(editor, format) ? "active" : "",
80
- style: {
81
- border: showInput ? "1px solid lightgray" : "",
82
- borderBottom: "none"
83
- },
84
- format: format,
85
- onClick: onToggle,
86
- children: /*#__PURE__*/_jsx(Icon, {
87
- icon: format
88
- })
89
- })
90
- }), /*#__PURE__*/_jsx(Dialog, {
66
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
67
+ className: isBlockActive(editor, format) ? "active" : "",
68
+ title: EMBED_LABEL[lbT || format],
69
+ onClick: onToggle,
70
+ icon: /*#__PURE__*/_jsx(Icon, {
71
+ icon: lbT || format
72
+ }),
73
+ icoBtnType: icoBtnType
74
+ }), /*#__PURE__*/_jsx(ImageSelector, {
91
75
  open: open,
92
- fullWidth: true,
93
- className: `dialogComp`,
94
- style: {
95
- minWidth: `${window.innerWidth - 100}px`
96
- },
97
- children: /*#__PURE__*/_jsxs(Grid, {
98
- item: true,
99
- xs: 12,
100
- sx: {
101
- p: 3
102
- },
103
- children: [/*#__PURE__*/_jsx(DialogTitle, {
104
- sx: {
105
- p: 0,
106
- pb: 2
107
- },
108
- children: /*#__PURE__*/_jsxs(Grid, {
109
- container: true,
110
- justifyContent: "space-between",
111
- children: [/*#__PURE__*/_jsx(Typography, {
112
- variant: "h6",
113
- className: "popupTitle",
114
- color: "primary",
115
- children: EMBED_LABEL[format] || "Embed"
116
- }), /*#__PURE__*/_jsx(Grid, {
117
- style: {
118
- display: "flex"
119
- },
120
- children: /*#__PURE__*/_jsx(IconButton, {
121
- onClick: onClose,
122
- className: "close-popupbtn",
123
- children: /*#__PURE__*/_jsx(CloseIcon, {})
124
- })
125
- })]
126
- })
127
- }), /*#__PURE__*/_jsx(DialogContent, {
128
- sx: {
129
- p: 0
130
- },
131
- children: /*#__PURE__*/_jsxs(Grid, {
132
- container: true,
133
- children: [/*#__PURE__*/_jsx(Grid, {
134
- item: true,
135
- xs: 12,
136
- style: {
137
- paddingTop: "12px"
138
- },
139
- children: /*#__PURE__*/_jsx(TextField, {
140
- name: "url",
141
- placeholder: `Add ${format} url here`,
142
- size: "small",
143
- fullWidth: true,
144
- onChange: handleChange,
145
- value: imageURL || ""
146
- })
147
- }), format === "image" ? /*#__PURE__*/_jsx(ImageUploader, {
148
- value: formData,
149
- data: {
150
- key: "url"
151
- },
152
- customProps: customProps,
153
- onUploaded: onUploaded,
154
- disableUpload: format === "video"
155
- }) : null]
156
- })
157
- }), /*#__PURE__*/_jsxs(DialogActions, {
158
- sx: {
159
- p: 0,
160
- pt: 2
161
- },
162
- children: [/*#__PURE__*/_jsx(Button, {
163
- onClick: onClose,
164
- className: "secondaryBtn",
165
- children: "Cancel"
166
- }), /*#__PURE__*/_jsx(Button, {
167
- onClick: onSave,
168
- className: "primaryBtn",
169
- children: "Save"
170
- })]
171
- })]
172
- })
76
+ onClose: handleClose,
77
+ customProps: customProps,
78
+ onSelectImage: onSelectImage,
79
+ title: EMBED_LABEL[lbT || format]
173
80
  })]
174
81
  });
175
82
  };