@flozy/editor 2.1.0 → 2.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. package/dist/Editor/CommonEditor.js +35 -5
  2. package/dist/Editor/Elements/Button/EditorButton.js +2 -1
  3. package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
  4. package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
  5. package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
  6. package/dist/Editor/Elements/Embed/Image.js +13 -2
  7. package/dist/Editor/Elements/Form/Form.js +1 -1
  8. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
  9. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
  10. package/dist/Editor/Elements/Form/Workflow/Styles.js +16 -10
  11. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
  12. package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
  13. package/dist/Editor/Elements/Grid/Grid.js +13 -6
  14. package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
  15. package/dist/Editor/Elements/SimpleText/style.js +40 -0
  16. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  17. package/dist/Editor/Elements/Variables/Style.js +29 -4
  18. package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
  19. package/dist/Editor/Styles/EditorStyles.js +18 -0
  20. package/dist/Editor/Toolbar/Basic/index.js +54 -25
  21. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
  22. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
  23. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
  24. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
  25. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
  26. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
  27. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
  28. package/dist/Editor/Toolbar/PopupTool/index.js +34 -33
  29. package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
  30. package/dist/Editor/assets/svg/PaintIcon.js +15 -0
  31. package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
  32. package/dist/Editor/common/Section/index.js +1 -43
  33. package/dist/Editor/common/Section/styles.js +44 -0
  34. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
  35. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
  36. package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
  37. package/dist/Editor/common/StyleBuilder/index.js +8 -0
  38. package/dist/Editor/helper/deserialize/index.js +10 -6
  39. package/dist/Editor/plugins/withEmbeds.js +0 -1
  40. package/dist/Editor/plugins/withHTML.js +36 -4
  41. package/dist/Editor/service/formSubmit.js +2 -1
  42. package/dist/Editor/utils/button.js +3 -1
  43. package/dist/Editor/utils/formfield.js +2 -0
  44. package/dist/Editor/utils/helper.js +40 -1
  45. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
- import { Box, Tooltip } from "@mui/material";
3
+ import { Box, Divider, Grid, Tooltip } from "@mui/material";
4
4
  import { toolbarGroups } from "../toolbarGroups";
5
5
  import { MarkButton } from "../FormatTools";
6
6
  import LinkButton from "../../Elements/Link/LinkButton";
@@ -17,13 +17,14 @@ const BasicToolbar = props => {
17
17
  // props
18
18
  const {
19
19
  otherProps: {
20
- variableOptions
20
+ variableOptions,
21
+ fontStyleOptions
21
22
  }
22
23
  } = props;
23
24
 
24
25
  // state
25
26
  const [activeColor, setActiveColor] = useState("#000000");
26
- const fontStyle = allTools.filter(f => f.basic);
27
+ const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
27
28
  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
28
29
  const handleTextColor = color => {
29
30
  setActiveColor(color);
@@ -35,32 +36,60 @@ const BasicToolbar = props => {
35
36
  return /*#__PURE__*/_jsxs(Box, {
36
37
  component: 'div',
37
38
  className: "basic-toolbar",
38
- children: [fontStyle?.map((m, i) => {
39
- return /*#__PURE__*/_jsx(MarkButton, {
40
- editor: editor,
41
- ...m
42
- }, `pptool_mark_${i}_${m.id}`);
43
- }), /*#__PURE__*/_jsx(LinkButton, {
44
- active: isBlockActive(editor, link.format),
45
- editor: editor
46
- }, link.id), /*#__PURE__*/_jsx(Tooltip, {
47
- title: "Font Color",
48
- children: /*#__PURE__*/_jsx(ColorPickerButton, {
49
- value: activeColor || "#0000",
50
- onSave: color => {
51
- handleTextColor(color);
52
- },
53
- defaultColors: colors
54
- })
55
- }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
56
- placeholder: "Variables",
57
- options: variableOptions
58
- })]
39
+ children: [/*#__PURE__*/_jsxs(Grid, {
40
+ container: true,
41
+ sx: {
42
+ padding: '10px'
43
+ },
44
+ alignItems: 'center',
45
+ justifyContent: 'space-between',
46
+ children: [/*#__PURE__*/_jsx(Grid, {
47
+ item: true,
48
+ children: /*#__PURE__*/_jsxs(Grid, {
49
+ container: true,
50
+ alignItems: 'center',
51
+ children: [/*#__PURE__*/_jsx(Grid, {
52
+ item: true,
53
+ children: fontStyle?.map((m, i) => {
54
+ return /*#__PURE__*/_jsx(MarkButton, {
55
+ editor: editor,
56
+ ...m
57
+ }, `pptool_mark_${i}_${m.id}`);
58
+ })
59
+ }), /*#__PURE__*/_jsx(Grid, {
60
+ item: true,
61
+ children: /*#__PURE__*/_jsx(LinkButton, {
62
+ active: isBlockActive(editor, link.format),
63
+ editor: editor
64
+ }, link.id)
65
+ }), /*#__PURE__*/_jsx(Grid, {
66
+ item: true,
67
+ children: /*#__PURE__*/_jsx(Tooltip, {
68
+ title: "Font Color",
69
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
70
+ value: activeColor || "#0000",
71
+ onSave: color => {
72
+ handleTextColor(color);
73
+ },
74
+ defaultColors: colors
75
+ })
76
+ })
77
+ })]
78
+ })
79
+ }), /*#__PURE__*/_jsx(Grid, {
80
+ item: true,
81
+ children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
82
+ placeholder: "Variables",
83
+ options: variableOptions
84
+ })
85
+ })]
86
+ }), /*#__PURE__*/_jsx(Divider, {})]
59
87
  });
60
88
  };
61
89
  BasicToolbar.defaultProps = {
62
90
  otherProps: {
63
- variableOptions: []
91
+ variableOptions: [],
92
+ fontStyleOptions: []
64
93
  }
65
94
  };
66
95
  export default BasicToolbar;
@@ -0,0 +1,46 @@
1
+ import { useState } from "react";
2
+ import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
3
+ import { Button, Popover } from "@mui/material";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const CustomSelectTool = ({
7
+ classes,
8
+ value,
9
+ options = [],
10
+ onChange
11
+ }) => {
12
+ const [anchorEl, setAnchorEl] = useState(null);
13
+ const open = Boolean(anchorEl);
14
+ const selected = options?.find(o => o.value === value);
15
+ return /*#__PURE__*/_jsxs("div", {
16
+ children: [/*#__PURE__*/_jsxs(Button, {
17
+ className: `customSelectTool`,
18
+ onClick: e => {
19
+ e.preventDefault();
20
+ setAnchorEl(e.currentTarget);
21
+ },
22
+ children: [selected?.label || selected?.title, " ", /*#__PURE__*/_jsx(DownArrowIcon, {})]
23
+ }), /*#__PURE__*/_jsx(Popover, {
24
+ open: open,
25
+ anchorEl: anchorEl,
26
+ onClose: () => setAnchorEl(null),
27
+ anchorOrigin: {
28
+ vertical: 'bottom',
29
+ horizontal: 'left'
30
+ },
31
+ sx: classes.customSelectPopoverWrapper,
32
+ children: options.map((option, i) => {
33
+ return /*#__PURE__*/_jsx("div", {
34
+ children: /*#__PURE__*/_jsx(Button, {
35
+ className: `customSelectOptionLabel ${value === option.value ? "selected" : ""}`,
36
+ onClick: () => {
37
+ onChange(option.value, option);
38
+ },
39
+ children: option.title
40
+ })
41
+ }, i);
42
+ })
43
+ })]
44
+ });
45
+ };
46
+ export default CustomSelectTool;
@@ -0,0 +1,41 @@
1
+ import { useState } from "react";
2
+ import { Button } from "@mui/material";
3
+ import PaintIcon from "../../../assets/svg/PaintIcon";
4
+ import ColorPicker from "../../../Elements/Color Picker/ColorPicker";
5
+ import { activeMark } from "../../../utils/SlateUtilityFunctions";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ function MiniColorPicker(props) {
9
+ const {
10
+ activeColor,
11
+ format,
12
+ classes,
13
+ id,
14
+ editor
15
+ } = props;
16
+ const [openColorTool, setOpenColorTool] = useState(null);
17
+ return /*#__PURE__*/_jsxs("div", {
18
+ children: [/*#__PURE__*/_jsxs(Button, {
19
+ className: "fontColorBtn",
20
+ onClick: e => setOpenColorTool(e.currentTarget),
21
+ children: [format === "color" ? "A" : /*#__PURE__*/_jsx(PaintIcon, {}), /*#__PURE__*/_jsx("div", {
22
+ className: "selectedColor",
23
+ style: {
24
+ background: activeColor
25
+ }
26
+ })]
27
+ }), /*#__PURE__*/_jsx(ColorPicker, {
28
+ format: format,
29
+ activeMark: activeMark,
30
+ editor: editor,
31
+ showHex: false,
32
+ title: "Text Color",
33
+ id: id,
34
+ classes: classes,
35
+ forMiniTool: true,
36
+ openColorTool: openColorTool,
37
+ closeColorTool: () => setOpenColorTool(null)
38
+ }, id)]
39
+ });
40
+ }
41
+ export default MiniColorPicker;
@@ -0,0 +1,72 @@
1
+ import { useMemo } from "react";
2
+ import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
+ import CustomSelectTool from "./CustomSelectTool";
4
+ import Icon from "../../../common/Icon";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ function Label({
8
+ icon,
9
+ label
10
+ }) {
11
+ return /*#__PURE__*/_jsxs("span", {
12
+ className: "menuOptions",
13
+ children: [/*#__PURE__*/_jsx(Icon, {
14
+ icon: icon
15
+ }), " ", label]
16
+ });
17
+ }
18
+ const alignmentOptions = [{
19
+ id: 17,
20
+ value: "alignLeft",
21
+ type: "block",
22
+ title: /*#__PURE__*/_jsx(Label, {
23
+ icon: "alignLeft",
24
+ label: "Left Align"
25
+ }),
26
+ label: /*#__PURE__*/_jsx(Icon, {
27
+ icon: "alignLeft"
28
+ })
29
+ }, {
30
+ id: 18,
31
+ value: "alignCenter",
32
+ type: "block",
33
+ title: /*#__PURE__*/_jsx(Label, {
34
+ icon: "alignCenter",
35
+ label: "Center Align"
36
+ }),
37
+ label: /*#__PURE__*/_jsx(Icon, {
38
+ icon: "alignCenter"
39
+ })
40
+ }, {
41
+ id: 19,
42
+ value: "alignRight",
43
+ type: "block",
44
+ title: /*#__PURE__*/_jsx(Label, {
45
+ icon: "alignRight",
46
+ label: "Right Align"
47
+ }),
48
+ label: /*#__PURE__*/_jsx(Icon, {
49
+ icon: "alignRight"
50
+ })
51
+ }];
52
+ function SelectAlignment({
53
+ editor,
54
+ classes
55
+ }) {
56
+ const selected = useMemo(() => {
57
+ return alignmentOptions.find(t => isBlockActive(editor, t.value));
58
+ }, [alignmentOptions, isBlockActive, editor]);
59
+ const onChange = (format, option) => {
60
+ if (option.type === "block") {
61
+ toggleBlock(editor, format);
62
+ }
63
+ };
64
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
65
+ options: alignmentOptions,
66
+ editor: editor,
67
+ onChange: onChange,
68
+ value: selected?.value || "alignLeft",
69
+ classes: classes
70
+ });
71
+ }
72
+ export default SelectAlignment;
@@ -0,0 +1,92 @@
1
+ import { useMemo } from "react";
2
+ import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
+ import CustomSelectTool from "./CustomSelectTool";
4
+ import Icon from "../../../common/Icon";
5
+ import { insertAccordion } from "../../../utils/accordion";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ function Label({
9
+ icon,
10
+ label
11
+ }) {
12
+ return /*#__PURE__*/_jsxs("span", {
13
+ className: "menuOptions",
14
+ children: [/*#__PURE__*/_jsx(Icon, {
15
+ icon: icon
16
+ }), " ", label]
17
+ });
18
+ }
19
+ const listOptions = [{
20
+ id: 15,
21
+ value: "orderedList",
22
+ type: "block",
23
+ title: /*#__PURE__*/_jsx(Label, {
24
+ icon: "orderedList",
25
+ label: "Ordered List"
26
+ }),
27
+ label: /*#__PURE__*/_jsx(Icon, {
28
+ icon: "orderedList"
29
+ }),
30
+ group: "list"
31
+ }, {
32
+ id: 16,
33
+ value: "unorderedList",
34
+ type: "block",
35
+ title: /*#__PURE__*/_jsx(Label, {
36
+ icon: "unorderedList",
37
+ label: "Bulleted List"
38
+ }),
39
+ label: /*#__PURE__*/_jsx(Icon, {
40
+ icon: "unorderedList"
41
+ }),
42
+ group: "list"
43
+ }, {
44
+ id: 43,
45
+ value: "check-list-item",
46
+ type: "block",
47
+ title: /*#__PURE__*/_jsx(Label, {
48
+ icon: "check-list-item",
49
+ label: "Check List"
50
+ }),
51
+ label: /*#__PURE__*/_jsx(Icon, {
52
+ icon: "check-list-item"
53
+ }),
54
+ group: "list"
55
+ }, {
56
+ id: 30,
57
+ value: "accordion",
58
+ type: "accordion",
59
+ group: "list",
60
+ component: "AccordionButton",
61
+ title: /*#__PURE__*/_jsx(Label, {
62
+ icon: "accordion",
63
+ label: "Accordion"
64
+ }),
65
+ label: /*#__PURE__*/_jsx(Icon, {
66
+ icon: "accordion"
67
+ })
68
+ }];
69
+ function SelectList({
70
+ editor,
71
+ classes
72
+ }) {
73
+ const selectedList = useMemo(() => {
74
+ return listOptions.find(t => isBlockActive(editor, t.value));
75
+ }, [listOptions, isBlockActive, editor]);
76
+ const onChange = (format, option) => {
77
+ if (option.type === "block") {
78
+ toggleBlock(editor, format);
79
+ } else if (option.type === "accordion") {
80
+ toggleBlock(editor, format);
81
+ insertAccordion(editor);
82
+ }
83
+ };
84
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
85
+ options: listOptions,
86
+ editor: editor,
87
+ onChange: onChange,
88
+ value: selectedList?.value || "orderedList",
89
+ classes: classes
90
+ });
91
+ }
92
+ export default SelectList;
@@ -0,0 +1,172 @@
1
+ import { useMemo } from "react";
2
+ import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
3
+ import CustomSelectTool from "./CustomSelectTool";
4
+ import useWindowResize from "../../../hooks/useWindowResize";
5
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
6
+ import { sizeMap } from "../../../utils/font";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ function Label({
10
+ label,
11
+ type
12
+ }) {
13
+ return /*#__PURE__*/_jsxs("span", {
14
+ children: [/*#__PURE__*/_jsx("strong", {
15
+ children: label
16
+ }), " ", type]
17
+ });
18
+ }
19
+ function DisplayHeaderLabel({
20
+ type
21
+ }) {
22
+ return /*#__PURE__*/_jsxs("div", {
23
+ children: ["H", /*#__PURE__*/_jsx("sub", {
24
+ children: type
25
+ })]
26
+ });
27
+ }
28
+ const typographyOptions = [{
29
+ id: 11,
30
+ format: "headingOne",
31
+ type: "block",
32
+ title: /*#__PURE__*/_jsx(Label, {
33
+ label: "H1",
34
+ type: "Header"
35
+ }),
36
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
37
+ type: 1
38
+ }),
39
+ group: "typography",
40
+ value: "headingOne"
41
+ }, {
42
+ id: 12,
43
+ format: "headingTwo",
44
+ type: "block",
45
+ title: /*#__PURE__*/_jsx(Label, {
46
+ label: "H2",
47
+ type: "Header"
48
+ }),
49
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
50
+ type: 2
51
+ }),
52
+ group: "typography",
53
+ value: "headingTwo"
54
+ }, {
55
+ id: 13,
56
+ format: "headingThree",
57
+ type: "block",
58
+ title: /*#__PURE__*/_jsx(Label, {
59
+ label: "H3",
60
+ type: "Header"
61
+ }),
62
+ label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
63
+ type: 3
64
+ }),
65
+ group: "typography",
66
+ value: "headingThree"
67
+ }, {
68
+ id: 14,
69
+ format: "fontSize",
70
+ type: "mark",
71
+ title: /*#__PURE__*/_jsx(Label, {
72
+ label: "L",
73
+ type: "Large"
74
+ }),
75
+ label: "L",
76
+ group: "typography",
77
+ value: "huge"
78
+ }, {
79
+ id: 15,
80
+ format: "fontSize",
81
+ type: "mark",
82
+ title: /*#__PURE__*/_jsx(Label, {
83
+ label: "M",
84
+ type: "Medium"
85
+ }),
86
+ label: "M",
87
+ group: "typography",
88
+ value: "medium"
89
+ }, {
90
+ id: 16,
91
+ format: "fontSize",
92
+ type: "mark",
93
+ title: /*#__PURE__*/_jsx(Label, {
94
+ label: "S",
95
+ type: "Small"
96
+ }),
97
+ label: "S",
98
+ group: "typography",
99
+ value: "small"
100
+ }];
101
+ function SelectTypography({
102
+ editor,
103
+ classes,
104
+ closeMainPopup
105
+ }) {
106
+ const [size] = useWindowResize();
107
+ const updateMarkData = newVal => {
108
+ const val = activeMark(editor, "fontSize");
109
+ let upData = {
110
+ ...getBreakPointsValue(val),
111
+ [size?.device]: `${newVal}px`
112
+ };
113
+
114
+ // if desktop update to all other devices
115
+ // to avoid default normal size
116
+ if (size?.device === "lg") {
117
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
118
+ a[b] = `${newVal}px`;
119
+ return a;
120
+ }, {});
121
+ }
122
+ addMarkData(editor, {
123
+ format: "fontSize",
124
+ value: {
125
+ ...upData
126
+ }
127
+ });
128
+ closeMainPopup();
129
+ };
130
+ const selectedBlock = useMemo(() => {
131
+ return typographyOptions.find(t => {
132
+ if (t.type === "block") {
133
+ return isBlockActive(editor, t.format);
134
+ } else if (t.type === "mark") {
135
+ const val = activeMark(editor, t.format);
136
+ if (val) {
137
+ const value = getBreakPointsValue(val, size?.device);
138
+ let selected;
139
+ Object.entries(sizeMap).forEach(([key, v]) => {
140
+ if (v === value) {
141
+ selected = key;
142
+ }
143
+ });
144
+ return selected === t.value;
145
+ }
146
+ }
147
+ });
148
+ }, [typographyOptions, activeMark, isBlockActive, editor]);
149
+ const onChange = (format, option) => {
150
+ // add/reset block elements
151
+ toggleBlock(editor, format);
152
+ if (option.type === "block") {
153
+ // reset old font size
154
+ addMarkData(editor, {
155
+ format: "fontSize",
156
+ value: {}
157
+ });
158
+ } else if (option.type === "mark") {
159
+ const size = sizeMap[option.value] || "";
160
+ const [sizeInNumber] = size.split("px");
161
+ updateMarkData(Number(sizeInNumber));
162
+ }
163
+ };
164
+ return /*#__PURE__*/_jsx(CustomSelectTool, {
165
+ options: typographyOptions,
166
+ editor: editor,
167
+ onChange: onChange,
168
+ value: selectedBlock?.value || "headingOne",
169
+ classes: classes
170
+ });
171
+ }
172
+ export default SelectTypography;
@@ -0,0 +1,124 @@
1
+ import { Button, Fade, Grid, Paper, Popper } from "@mui/material";
2
+ import SelectTypography from "./SelectTypography";
3
+ import SelectList from "./SelectList";
4
+ import { toolbarGroups } from "../../toolbarGroups";
5
+ import { MarkButton } from "../../FormatTools";
6
+ import { activeMark, isBlockActive } from "../../../utils/SlateUtilityFunctions";
7
+ import LinkButton from "../../../Elements/Link/LinkButton";
8
+ import TextToolIcon from "../../../assets/svg/TextToolIcon";
9
+ import TextFormat from "../TextFormat";
10
+ import { useState } from "react";
11
+ import useWindowResize from "../../../hooks/useWindowResize";
12
+ import PopperHeader from "../PopperHeader";
13
+ import MiniColorPicker from "./MiniColorPicker";
14
+ import SelectAlignment from "./SelectAlignment";
15
+ import { jsx as _jsx } from "react/jsx-runtime";
16
+ import { jsxs as _jsxs } from "react/jsx-runtime";
17
+ const DEFAULT_COLOR = {
18
+ color: "#000000",
19
+ bgcolor: "#FFFFFF"
20
+ };
21
+ const textColorFormat = "color";
22
+ const textBgFormat = "bgColor";
23
+ const allTools = toolbarGroups.flat();
24
+ const MiniTextFormat = props => {
25
+ const {
26
+ classes,
27
+ editor,
28
+ closeMainPopup
29
+ } = props;
30
+ const [anchorEl, setAnchorEl] = useState(null);
31
+ const open = Boolean(anchorEl);
32
+ const id = open ? "popup-edit-tool" : "";
33
+ const [size] = useWindowResize();
34
+ const removeFontStyles = ["superscript", "subscript"];
35
+ const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
36
+ const link = allTools.find(f => f.format?.indexOf("link") >= 0);
37
+ const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
38
+ const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
39
+ const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
40
+ return /*#__PURE__*/_jsx(Grid, {
41
+ container: true,
42
+ sx: classes.miniTextFormatWrapper,
43
+ alignItems: "center",
44
+ children: /*#__PURE__*/_jsx(Grid, {
45
+ item: true,
46
+ xs: 12,
47
+ children: /*#__PURE__*/_jsxs("div", {
48
+ className: "toolWrapper",
49
+ children: [/*#__PURE__*/_jsx(SelectTypography, {
50
+ classes: classes,
51
+ editor: editor,
52
+ closeMainPopup: closeMainPopup
53
+ }), /*#__PURE__*/_jsx("div", {
54
+ className: "verticalLine"
55
+ }), /*#__PURE__*/_jsx(SelectList, {
56
+ classes: classes,
57
+ editor: editor
58
+ }), /*#__PURE__*/_jsx("div", {
59
+ className: "verticalLine mr-1"
60
+ }), /*#__PURE__*/_jsx(SelectAlignment, {
61
+ fontAlign: fontAlign,
62
+ classes: classes,
63
+ editor: editor
64
+ }), /*#__PURE__*/_jsx("div", {
65
+ className: "verticalLine mr-1"
66
+ }), fontStyle?.map((m, i) => {
67
+ return /*#__PURE__*/_jsx(MarkButton, {
68
+ editor: editor,
69
+ ...m
70
+ }, `pptool_mark_${i}_${m.id}`);
71
+ }), /*#__PURE__*/_jsx(MiniColorPicker, {
72
+ format: textColorFormat,
73
+ classes: classes,
74
+ activeColor: activeColor,
75
+ id: "11_cc",
76
+ editor: editor
77
+ }), /*#__PURE__*/_jsx(MiniColorPicker, {
78
+ format: textBgFormat,
79
+ classes: classes,
80
+ activeColor: activeBg,
81
+ id: "12_cc",
82
+ editor: editor
83
+ }), /*#__PURE__*/_jsx("div", {
84
+ className: "verticalLine ml-1 mr-1"
85
+ }), /*#__PURE__*/_jsx(LinkButton, {
86
+ active: isBlockActive(editor, link.format),
87
+ editor: editor
88
+ }, link.id), /*#__PURE__*/_jsx(Button, {
89
+ onClick: e => setAnchorEl(e.currentTarget),
90
+ className: "textSettingsIcon",
91
+ children: /*#__PURE__*/_jsx(TextToolIcon, {})
92
+ }), /*#__PURE__*/_jsx(Popper, {
93
+ id: id,
94
+ open: open,
95
+ anchorEl: anchorEl,
96
+ transition: true,
97
+ placement: "auto-end",
98
+ sx: classes.popupWrapper,
99
+ className: `tools-drawer ${size?.device}`,
100
+ children: ({
101
+ TransitionProps
102
+ }) => /*#__PURE__*/_jsx(Fade, {
103
+ ...TransitionProps,
104
+ timeout: 350,
105
+ children: /*#__PURE__*/_jsxs(Paper, {
106
+ style: {
107
+ borderRadius: "10px"
108
+ },
109
+ children: [/*#__PURE__*/_jsx(PopperHeader, {
110
+ title: "Text Settings",
111
+ classes: classes,
112
+ onClose: () => setAnchorEl(null)
113
+ }), /*#__PURE__*/_jsx(TextFormat, {
114
+ editor: editor,
115
+ classes: classes
116
+ })]
117
+ })
118
+ })
119
+ })]
120
+ })
121
+ })
122
+ });
123
+ };
124
+ export default MiniTextFormat;