@flozy/editor 2.1.1 → 2.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. package/dist/Editor/CommonEditor.js +16 -3
  2. package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
  3. package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
  4. package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
  5. package/dist/Editor/Elements/Embed/Image.js +13 -2
  6. package/dist/Editor/Elements/Form/Form.js +1 -1
  7. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +1 -0
  8. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +1 -1
  9. package/dist/Editor/Elements/Form/Workflow/Styles.js +7 -2
  10. package/dist/Editor/Elements/Form/Workflow/index.js +3 -3
  11. package/dist/Editor/Elements/Grid/Grid.js +4 -3
  12. package/dist/Editor/Styles/EditorStyles.js +7 -0
  13. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
  14. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
  15. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
  16. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
  17. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
  18. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
  19. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
  20. package/dist/Editor/Toolbar/PopupTool/index.js +34 -34
  21. package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
  22. package/dist/Editor/assets/svg/PaintIcon.js +15 -0
  23. package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
  24. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
  25. package/dist/Editor/plugins/withHTML.js +2 -2
  26. package/dist/Editor/service/formSubmit.js +2 -1
  27. package/package.json +1 -1
  28. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat.js +0 -419
@@ -31,6 +31,7 @@ import decorators from "./utils/Decorators";
31
31
  import useElement from "./utils/customHooks/useElement";
32
32
  import { getTRBLBreakPoints } from "./helper/theme";
33
33
  import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
34
+ import useWindowResize from "./hooks/useWindowResize";
34
35
  import { jsx as _jsx } from "react/jsx-runtime";
35
36
  import { jsxs as _jsxs } from "react/jsx-runtime";
36
37
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -95,6 +96,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
95
96
  h: null
96
97
  });
97
98
  const [isScrolling, setIsScrolling] = useState(false);
99
+ const [isTextSelected, setIsTextSelected] = useState(false);
100
+ const [size] = useWindowResize();
98
101
  const {
99
102
  needDotsBG,
100
103
  footer,
@@ -362,6 +365,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
362
365
  customProps: customProps
363
366
  }) : null;
364
367
  };
368
+ const hideMiniToolBar = useMemo(() => {
369
+ if (readOnly) {
370
+ return true;
371
+ }
372
+
373
+ // if (size?.device === "xs" && isTextSelected) {
374
+ // return true;
375
+ // }
376
+ }, [readOnly, isTextSelected]);
365
377
  return /*#__PURE__*/_jsx(EditorProvider, {
366
378
  theme: theme,
367
379
  editor: editor,
@@ -422,7 +434,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
422
434
  "data-info": outsideEditorClickLabel,
423
435
  children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
424
436
  onDrawerOpen: onDrawerOpen,
425
- theme: theme
437
+ theme: theme,
438
+ setIsTextSelected: setIsTextSelected
426
439
  }) : null, /*#__PURE__*/_jsx(Editable, {
427
440
  className: "innert-editor-textbox",
428
441
  readOnly: isReadOnly,
@@ -442,7 +455,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
442
455
  theme: theme
443
456
  }) : null]
444
457
  })
445
- }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
458
+ }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
446
459
  customProps: customProps,
447
460
  toolbarOptions: toolbarOptions,
448
461
  theme: theme
@@ -450,7 +463,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
450
463
  sx: {
451
464
  color: "rgb(100, 116, 139)",
452
465
  fontSize: "13px",
453
- paddingBottom: "12px"
466
+ paddingBottom: hideMiniToolBar ? "0px" : "12px"
454
467
  },
455
468
  align: "center",
456
469
  "data-info": outsideEditorClickLabel,
@@ -3,6 +3,7 @@ import { Box, IconButton, Popover } from "@mui/material";
3
3
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
4
4
  import Button from "../../common/Button";
5
5
  import { colors } from "./defaultColors";
6
+ import ColorPicker from "./colorPicker.svg";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  let c = [];
@@ -104,7 +105,11 @@ const ColorButtons = props => {
104
105
  id,
105
106
  onSelect,
106
107
  classes,
107
- activeColor
108
+ activeColor,
109
+ forMiniTool,
110
+ openColorTool,
111
+ onClose,
112
+ onColorPickerClick
108
113
  } = props;
109
114
  const [row1, ...restRows] = ColorChunks([]);
110
115
  const [anchorEl, setAnchorEl] = useState(null);
@@ -114,6 +119,9 @@ const ColorButtons = props => {
114
119
  };
115
120
  const handleClose = () => {
116
121
  setAnchorEl(null);
122
+ if (onClose) {
123
+ onClose();
124
+ }
117
125
  };
118
126
  const handleSelect = color => () => {
119
127
  onSelect(color);
@@ -121,7 +129,7 @@ const ColorButtons = props => {
121
129
  return /*#__PURE__*/_jsxs(Box, {
122
130
  component: "span",
123
131
  sx: classes.colorButtons,
124
- children: [/*#__PURE__*/_jsx(Box, {
132
+ children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
125
133
  className: "buttonsWrpr first",
126
134
  children: [row1].map((m, i) => {
127
135
  return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -134,9 +142,9 @@ const ColorButtons = props => {
134
142
  activeColor: activeColor
135
143
  }, `si_btn_row1_${m}_${i}`);
136
144
  })
137
- }), /*#__PURE__*/_jsx(Popover, {
138
- open: open,
139
- anchorEl: anchorEl,
145
+ }), /*#__PURE__*/_jsxs(Popover, {
146
+ open: open || openColorTool,
147
+ anchorEl: anchorEl || openColorTool,
140
148
  onClose: handleClose,
141
149
  anchorOrigin: {
142
150
  vertical: "bottom",
@@ -148,7 +156,7 @@ const ColorButtons = props => {
148
156
  },
149
157
  sx: classes.colorPopper,
150
158
  className: "colorPopper",
151
- children: /*#__PURE__*/_jsx(Box, {
159
+ children: [/*#__PURE__*/_jsx(Box, {
152
160
  sx: classes.colorButtonsInner,
153
161
  children: restRows.map((m, i) => {
154
162
  return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -160,7 +168,13 @@ const ColorButtons = props => {
160
168
  activeColor: activeColor
161
169
  }, `si_btn_${m}_${i}`);
162
170
  })
163
- })
171
+ }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
172
+ onClick: onColorPickerClick,
173
+ children: /*#__PURE__*/_jsx("img", {
174
+ src: ColorPicker,
175
+ alt: "color wheel"
176
+ })
177
+ }) : null]
164
178
  })]
165
179
  });
166
180
  };
@@ -16,14 +16,18 @@ const DEFAULT_COLOR = {
16
16
  color: "#000000",
17
17
  bgcolor: "#FFFFFF"
18
18
  };
19
- const ColorPicker = ({
20
- id,
21
- format,
22
- editor,
23
- showHex,
24
- title,
25
- classes
26
- }) => {
19
+ const ColorPicker = props => {
20
+ const {
21
+ id,
22
+ format,
23
+ editor,
24
+ showHex,
25
+ title,
26
+ classes,
27
+ forMiniTool,
28
+ openColorTool,
29
+ closeColorTool
30
+ } = props;
27
31
  const {
28
32
  theme
29
33
  } = useEditorContext();
@@ -55,7 +59,7 @@ const ColorPicker = ({
55
59
  };
56
60
  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
57
61
  return /*#__PURE__*/_jsxs(_Fragment, {
58
- children: [/*#__PURE__*/_jsx(Tooltip, {
62
+ children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
59
63
  title: title,
60
64
  arrow: true,
61
65
  children: /*#__PURE__*/_jsx(IconButton, {
@@ -73,7 +77,11 @@ const ColorPicker = ({
73
77
  classes: pickerStyles,
74
78
  onSelect: onSelect,
75
79
  activeColor: activeColor,
76
- id: id
80
+ id: id,
81
+ forMiniTool: forMiniTool,
82
+ openColorTool: openColorTool,
83
+ onClose: closeColorTool,
84
+ onColorPickerClick: onOpen
77
85
  }, id), /*#__PURE__*/_jsx(Popover, {
78
86
  open: open,
79
87
  anchorEl: anchorEl,
@@ -0,0 +1,14 @@
1
+ <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="13" cy="13" r="11.5" fill="#E9F3FE" stroke="url(#paint0_linear_15513_22074)" stroke-width="3"/>
3
+ <path d="M13.168 6C13.168 6 8 11.9233 8 14.8319C8 18.0176 10.6552 20 13.168 20C15.8326 20 18.3359 17.9129 18.3359 14.8319C18.3359 11.9233 13.168 6 13.168 6ZM16.7402 15.7079C16.4528 17.3396 15.0339 18.0548 13.8992 18.0548C13.8071 18.0543 17.1447 16.6134 15.8583 12.3032C16.5362 13.0678 16.9627 14.4448 16.7402 15.7079Z" fill="#778599"/>
4
+ <defs>
5
+ <linearGradient id="paint0_linear_15513_22074" x1="20.9965" y1="23.8333" x2="5.28819" y2="2.16667" gradientUnits="userSpaceOnUse">
6
+ <stop stop-color="#7025EB"/>
7
+ <stop offset="0.170377" stop-color="#30C8E9"/>
8
+ <stop offset="0.351324" stop-color="#2967F0"/>
9
+ <stop offset="0.537615" stop-color="#DE1E1E"/>
10
+ <stop offset="0.754249" stop-color="#EECE28"/>
11
+ <stop offset="1" stop-color="#64EA61"/>
12
+ </linearGradient>
13
+ </defs>
14
+ </svg>
@@ -30,7 +30,9 @@ const Image = ({
30
30
  width: oldWidth,
31
31
  xsHidden,
32
32
  objectFit,
33
- frame = null
33
+ frame = null,
34
+ webAddress,
35
+ isNewTab
34
36
  } = element;
35
37
  const {
36
38
  readOnly
@@ -86,6 +88,14 @@ const Image = ({
86
88
  anchor: Editor.start(editor, path),
87
89
  focus: Editor.end(editor, path)
88
90
  });
91
+ if (webAddress) {
92
+ const refUrl = webAddress ? webAddress.includes("http") ? webAddress : `//${webAddress}` : "Link";
93
+ if (isNewTab) {
94
+ window.open(refUrl, "_blank").focus();
95
+ } else {
96
+ window.location.href = refUrl;
97
+ }
98
+ }
89
99
  };
90
100
  const onSettings = () => {
91
101
  setOpenSettings(true);
@@ -149,7 +159,8 @@ const Image = ({
149
159
  objectFit: "cover",
150
160
  boxShadow: boxShadow || "none",
151
161
  height: objectFit ? "100%" : "auto",
152
- opacity: frame ? 0 : 1
162
+ opacity: frame ? 0 : 1,
163
+ cursor: webAddress ? "pointer" : ""
153
164
  },
154
165
  alt: alt,
155
166
  src: url,
@@ -71,10 +71,10 @@ const Form = props => {
71
71
  const formData = new FormData(formEle?.current);
72
72
  setLoading(true);
73
73
  let response = {};
74
- const emailObject = getFieldProps("field_type", "email");
75
74
  let user_email = "";
76
75
  const validations = [];
77
76
  for (let pair of formData.entries()) {
77
+ const emailObject = getFieldProps("element", "email");
78
78
  if (emailObject?.name === pair[0]) {
79
79
  user_email = pair[1];
80
80
  }
@@ -158,6 +158,7 @@ const FormWorkflow = props => {
158
158
  }), /*#__PURE__*/_jsx(TextField, {
159
159
  multiline: true,
160
160
  margin: "none",
161
+ id: "email_subject",
161
162
  value: subject,
162
163
  onChange: onSubjectChange,
163
164
  fullWidth: true,
@@ -95,7 +95,7 @@ const ListWorkflow = props => {
95
95
  style: {
96
96
  paddingLeft: '40px'
97
97
  },
98
- children: bodyData[0]?.children[0]?.text
98
+ children: typeof bodyData === 'string' ? bodyData : bodyData[0]?.children[0]?.text
99
99
  })
100
100
  })]
101
101
  })
@@ -10,14 +10,19 @@ const FormStyles = theme => ({
10
10
  },
11
11
  bodyTextArea: {
12
12
  '& .mini-editor-cls': {
13
- padding: '10px',
13
+ padding: '12px',
14
14
  '&:focus-visible': {
15
15
  outline: 'none',
16
16
  border: 'none'
17
17
  }
18
18
  },
19
19
  "& .editorWorkflow": {
20
- minHeight: '130px'
20
+ minHeight: '130px',
21
+ padding: '12px',
22
+ '&:focus-visible': {
23
+ outline: 'none',
24
+ border: 'none'
25
+ }
21
26
  }
22
27
  },
23
28
  formHeadings: {
@@ -64,15 +64,15 @@ const Workflow = props => {
64
64
  };
65
65
  const saveFormWorkflow = () => {
66
66
  let workflowData = [...workflowList];
67
- let subjectHtml = document.getElementsByTagName('textarea')[0].innerHTML;
68
- let bodyHtml = document.getElementsByClassName('editorWorkflow')[0].innerHTML;
67
+ let subjectText = document?.getElementById('email_subject')?.value;
68
+ let bodyHtml = document?.getElementsByClassName('editorWorkflow')[0]?.innerHTML;
69
69
  let data = {
70
70
  schedule_type: schedule,
71
71
  schedule_every: schedule === "after" ? scheduleEvery : 0,
72
72
  schedule_on: schedule === "after" ? scheduleOn : 0,
73
73
  subject_data: subject,
74
74
  body_data: bodyData,
75
- subject_html: subjectHtml,
75
+ subject_text: subjectText,
76
76
  body_html: bodyHtml
77
77
  };
78
78
  if (flowEdited.isEdited) {
@@ -6,8 +6,9 @@ import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
7
7
  import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
8
8
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
9
+ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
9
10
  import { insertGrid } from "../../utils/grid";
10
- import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
11
+ import { GridAddGridIcon, GridSettingsIcon } from "../../common/iconslist";
11
12
  import GridPopup from "./GridPopup";
12
13
  import SectionPopup from "./SectionPopup";
13
14
  import { gridItem } from "../../utils/gridItem";
@@ -225,11 +226,11 @@ const Grid = props => {
225
226
  children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
226
227
  })
227
228
  }), /*#__PURE__*/_jsx(Tooltip, {
228
- title: "Add Section",
229
+ title: "Duplicate",
229
230
  arrow: true,
230
231
  children: /*#__PURE__*/_jsx(IconButton, {
231
232
  onClick: onAddSection(),
232
- children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
233
+ children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
233
234
  })
234
235
  }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
235
236
  children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -16,6 +16,13 @@ const editorStyles = ({
16
16
  "& .mini-tool-wrpr-ei": {
17
17
  display: "none"
18
18
  }
19
+ },
20
+ "& .mobileMiniTextWrapper": {
21
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
22
+ position: "fixed",
23
+ bottom: 0,
24
+ left: 0,
25
+ width: "100%"
19
26
  }
20
27
  },
21
28
  slateWrapper: {
@@ -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;