@flozy/editor 3.8.3 → 3.8.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -245,6 +245,13 @@ blockquote {
245
245
  width: 17px !important;
246
246
  }
247
247
 
248
+ .react-datepicker__input-container input {
249
+ height: 40px !important;
250
+ border: 1px solid #ccc;
251
+ border-radius: 5px;
252
+ width: 100%;
253
+ }
254
+
248
255
  .close-popupbtn {
249
256
  border-radius: 4px !important;
250
257
  width: 24px;
@@ -13,7 +13,8 @@ const LinkPopup = props => {
13
13
  handleInsertLink,
14
14
  theme
15
15
  } = props;
16
- const classes = LinkPopupStyles(theme);
16
+ const themeType = localStorage.getItem("themeType");
17
+ const classes = LinkPopupStyles(themeType);
17
18
  return /*#__PURE__*/_jsxs(Dialog, {
18
19
  fullWidth: true,
19
20
  open: open,
@@ -55,8 +56,7 @@ const LinkPopup = props => {
55
56
  name: "name",
56
57
  placeholder: "Link Title",
57
58
  onChange: handleInputChange,
58
- sx: classes.addLinkField,
59
- className: classes.addLinkField
59
+ sx: classes.addLinkField
60
60
  })
61
61
  }), /*#__PURE__*/_jsx(Grid, {
62
62
  item: true,
@@ -71,8 +71,7 @@ const LinkPopup = props => {
71
71
  value: linkData?.url,
72
72
  placeholder: "https://google.com",
73
73
  onChange: handleInputChange,
74
- sx: classes.addLinkField,
75
- className: classes.addLinkField
74
+ sx: classes.addLinkField
76
75
  })
77
76
  }), /*#__PURE__*/_jsx(Grid, {
78
77
  item: true,
@@ -1,16 +1,16 @@
1
- const LinkPopupStyles = theme => ({
1
+ const LinkPopupStyles = themeType => ({
2
2
  addLinkField: {
3
3
  "& .MuiOutlinedInput-input": {
4
4
  fontSize: "12px",
5
5
  fontWeight: 500,
6
- color: `${theme?.palette?.editor?.textColor} !important`
6
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
7
7
  },
8
8
  "& .MuiFormHelperText-root": {
9
- color: `${theme?.palette?.editor?.textColor} !important`
9
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
10
10
  },
11
11
  "& .MuiOutlinedInput-root": {
12
12
  boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
13
- color: `${theme?.palette?.editor?.textColor} !important`,
13
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
14
14
  borderRadius: "7px",
15
15
  "& fieldset": {
16
16
  borderColor: "#D8DDE1"
@@ -1,9 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
3
  import PageSettingsPopup from "./PageSettingsPopup";
4
- import { PageSettings } from "../../common/iconslist";
5
4
  import ToolbarIcon from "../../common/ToolbarIcon";
6
5
  import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
6
+ import SettingsIcon from "../../assets/svg/SettingsIcon";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,13 +41,13 @@ const PageSettingsButton = props => {
41
41
  setOpenSettings(false);
42
42
  };
43
43
  return /*#__PURE__*/_jsxs(_Fragment, {
44
- children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
44
+ children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
45
45
  onClick: onSettings,
46
46
  className: "removeDefaultSvgCls"
47
47
  }) : /*#__PURE__*/_jsx(ToolbarIcon, {
48
48
  title: "Page Settings",
49
49
  onClick: onSettings,
50
- icon: /*#__PURE__*/_jsx(PageSettings, {}),
50
+ icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
51
51
  icoBtnType: icoBtnType
52
52
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
53
53
  element: openSetttings?.element || {},
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import RedoIcon from "../../assets/svg/RedoIcon";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const RedoButton = () => {
6
+ const editor = useSlateStatic();
7
+ const onRedo = () => {
8
+ editor?.redo();
9
+ };
10
+ return /*#__PURE__*/_jsx(RedoIcon, {
11
+ onClick: onRedo
12
+ });
13
+ };
14
+ export default RedoButton;
@@ -263,7 +263,12 @@ const SignaturePopup = props => {
263
263
  name: "signedBy",
264
264
  placeholder: "Enter Name",
265
265
  size: "small",
266
- onChange: onChange
266
+ onChange: onChange,
267
+ sx: {
268
+ '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
269
+ borderColor: '#ccc'
270
+ }
271
+ }
267
272
  })
268
273
  })]
269
274
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -311,7 +316,8 @@ const SignaturePopup = props => {
311
316
  },
312
317
  children: [/*#__PURE__*/_jsx(Grid, {
313
318
  style: {
314
- marginRight: "8px"
319
+ marginRight: "8px",
320
+ minWidth: '44px'
315
321
  },
316
322
  children: /*#__PURE__*/_jsx("label", {
317
323
  htmlFor: "signedByEmail",
@@ -326,7 +332,12 @@ const SignaturePopup = props => {
326
332
  name: "signedByEmail",
327
333
  placeholder: "Enter Email",
328
334
  size: "small",
329
- onChange: onChange
335
+ onChange: onChange,
336
+ sx: {
337
+ '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
338
+ borderColor: '#ccc'
339
+ }
340
+ }
330
341
  })
331
342
  })]
332
343
  })]
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import UndoIcon from "../../assets/svg/UndoIcon";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const UndoButton = () => {
6
+ const editor = useSlateStatic();
7
+ const onUndo = () => {
8
+ editor?.undo();
9
+ };
10
+ return /*#__PURE__*/_jsx(UndoIcon, {
11
+ onClick: onUndo
12
+ });
13
+ };
14
+ export default UndoButton;
@@ -47,6 +47,8 @@ const MiniToolbar = props => {
47
47
  const {
48
48
  popupType
49
49
  } = useEditorContext();
50
+ const canUndo = editor.history.undos.length > 0;
51
+ const canRedo = editor.history.redos.length > 0;
50
52
  useEffect(() => {
51
53
  if (popper) {
52
54
  setPopper(null);
@@ -76,13 +78,13 @@ const MiniToolbar = props => {
76
78
  label,
77
79
  icon: Icon
78
80
  }) => {
79
- const isDisabled = popupType === type; // for textFormat type
81
+ const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false; // for textFormat type
80
82
 
81
83
  return /*#__PURE__*/_jsx(Tooltip, {
82
84
  arrow: true,
83
85
  title: label,
84
86
  children: /*#__PURE__*/_jsx(IconButton, {
85
- className: type === popper ? "active" : "",
87
+ className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
86
88
  onClick: handleClick(type),
87
89
  disabled: isDisabled,
88
90
  children: /*#__PURE__*/_jsx(Icon, {
@@ -2,6 +2,8 @@ import TextIcon from "../../../assets/svg/TextIcon";
2
2
  import AddElementIcon from "../../../assets/svg/AddElementIcon";
3
3
  import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
4
4
  import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
5
+ import UndoButton from "../../../Elements/Undo/UndoButton";
6
+ import RedoButton from "../../../Elements/Redo/RedoButton";
5
7
  const MENU_OPTIONS = [{
6
8
  type: "textFormat",
7
9
  icon: TextIcon,
@@ -18,5 +20,13 @@ const MENU_OPTIONS = [{
18
20
  type: "page-settings",
19
21
  icon: PageSettingsButton,
20
22
  label: "Page Settings"
23
+ }, {
24
+ type: "undo",
25
+ icon: UndoButton,
26
+ label: "Undo"
27
+ }, {
28
+ type: "redo",
29
+ icon: RedoButton,
30
+ label: "Redo"
21
31
  }];
22
32
  export default MENU_OPTIONS;
@@ -41,6 +41,13 @@ const miniToolbarStyles = theme => ({
41
41
  "& svg": {
42
42
  stroke: theme?.palette?.editor?.activeColor
43
43
  }
44
+ },
45
+ "&.disabled": {
46
+ "& svg": {
47
+ '& path': {
48
+ stroke: theme?.palette?.editor?.svgStrokeDisabled
49
+ }
50
+ }
44
51
  }
45
52
  }
46
53
  }
@@ -1,29 +1,32 @@
1
1
  import React from "react";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
- const AddElementIcon = () => {
4
+ const AddTemplateIcon = () => {
5
5
  return /*#__PURE__*/_jsxs("svg", {
6
6
  width: "17",
7
- height: "16",
8
- viewBox: "0 0 17 16",
7
+ height: "18",
8
+ viewBox: "0 0 17 18",
9
9
  fill: "none",
10
10
  xmlns: "http://www.w3.org/2000/svg",
11
11
  children: [/*#__PURE__*/_jsx("path", {
12
- d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
13
- strokeWidth: "1.2",
12
+ d: "M9.21541 2.18999L13.3946 4.15499C14.5987 4.71749 14.5987 5.64749 13.3946 6.20999L9.21541 8.17499C8.74083 8.39999 7.96166 8.39999 7.48708 8.17499L3.30791 6.20999C2.10374 5.64749 2.10374 4.71749 3.30791 4.15499L7.48708 2.18999C7.96166 1.96499 8.74083 1.96499 9.21541 2.18999Z",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
14
15
  strokeLinecap: "round",
15
16
  strokeLinejoin: "round"
16
17
  }), /*#__PURE__*/_jsx("path", {
17
- d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
18
- strokeWidth: "1.2",
18
+ d: "M2.125 8.25C2.125 8.88 2.57125 9.6075 3.11667 9.8625L7.92625 12.1275C8.29458 12.3 8.7125 12.3 9.07375 12.1275L13.8833 9.8625C14.4287 9.6075 14.875 8.88 14.875 8.25",
19
+ stroke: "#64748B",
20
+ strokeWidth: "1.5",
19
21
  strokeLinecap: "round",
20
22
  strokeLinejoin: "round"
21
23
  }), /*#__PURE__*/_jsx("path", {
22
- d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
23
- strokeWidth: "1.2",
24
+ d: "M2.125 12C2.125 12.6975 2.51458 13.3275 3.11667 13.6125L7.92625 15.8775C8.29458 16.05 8.7125 16.05 9.07375 15.8775L13.8833 13.6125C14.4854 13.3275 14.875 12.6975 14.875 12",
25
+ stroke: "#64748B",
26
+ strokeWidth: "1.5",
24
27
  strokeLinecap: "round",
25
28
  strokeLinejoin: "round"
26
29
  })]
27
30
  });
28
31
  };
29
- export default AddElementIcon;
32
+ export default AddTemplateIcon;
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const RedoIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M12.25 14.5H6.25C4.18 14.5 2.5 12.484 2.5 10C2.5 7.516 4.18 5.5 6.25 5.5H14.5",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M12.5 7.5L14.5 5.5L12.5 3.5",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeLinecap: "round",
23
+ strokeLinejoin: "round"
24
+ })]
25
+ });
26
+ };
27
+ export default RedoIcon;
@@ -0,0 +1,28 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const SettingsIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M8.5 11.125C9.6736 11.125 10.625 10.1736 10.625 9C10.625 7.82639 9.6736 6.875 8.5 6.875C7.32639 6.875 6.375 7.82639 6.375 9C6.375 10.1736 7.32639 11.125 8.5 11.125Z",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M1.4165 9.62343V8.37676C1.4165 7.6401 2.01859 7.03093 2.76234 7.03093C4.04442 7.03093 4.56859 6.12426 3.924 5.01218C3.55567 4.37468 3.77525 3.54593 4.41984 3.1776L5.64525 2.47635C6.20484 2.14343 6.92734 2.34176 7.26025 2.90135L7.33817 3.03593C7.97567 4.14801 9.024 4.14801 9.66859 3.03593L9.7465 2.90135C10.0794 2.34176 10.8019 2.14343 11.3615 2.47635L12.5869 3.1776C13.2315 3.54593 13.4511 4.37468 13.0828 5.01218C12.4382 6.12426 12.9623 7.03093 14.2444 7.03093C14.9811 7.03093 15.5903 7.63301 15.5903 8.37676V9.62343C15.5903 10.3601 14.9882 10.9693 14.2444 10.9693C12.9623 10.9693 12.4382 11.8759 13.0828 12.988C13.4511 13.6326 13.2315 14.4543 12.5869 14.8226L11.3615 15.5238C10.8019 15.8568 10.0794 15.6584 9.7465 15.0988L9.66859 14.9643C9.03109 13.8522 7.98275 13.8522 7.33817 14.9643L7.26025 15.0988C6.92734 15.6584 6.20484 15.8568 5.64525 15.5238L4.41984 14.8226C3.77525 14.4543 3.55567 13.6255 3.924 12.988C4.56859 11.8759 4.04442 10.9693 2.76234 10.9693C2.01859 10.9693 1.4165 10.3601 1.4165 9.62343Z",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeMiterlimit: "10",
23
+ strokeLinecap: "round",
24
+ strokeLinejoin: "round"
25
+ })]
26
+ });
27
+ };
28
+ export default SettingsIcon;
@@ -4,22 +4,25 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
4
4
  const TextIcon = () => {
5
5
  return /*#__PURE__*/_jsxs("svg", {
6
6
  width: "15",
7
- height: "14",
8
- viewBox: "0 0 15 14",
7
+ height: "16",
8
+ viewBox: "0 0 15 16",
9
9
  fill: "none",
10
10
  xmlns: "http://www.w3.org/2000/svg",
11
11
  children: [/*#__PURE__*/_jsx("path", {
12
- d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
12
+ d: "M1.66895 4.9813V3.8438C1.66895 3.12505 2.2502 2.55005 2.9627 2.55005H12.0377C12.7564 2.55005 13.3314 3.1313 13.3314 3.8438V4.9813",
13
+ stroke: "#64748B",
13
14
  strokeWidth: "1.5",
14
15
  strokeLinecap: "round",
15
16
  strokeLinejoin: "round"
16
17
  }), /*#__PURE__*/_jsx("path", {
17
- d: "M7.5 12.0866V2.39746",
18
+ d: "M7.5 13.4501V3.06885",
19
+ stroke: "#64748B",
18
20
  strokeWidth: "1.5",
19
21
  strokeLinecap: "round",
20
22
  strokeLinejoin: "round"
21
23
  }), /*#__PURE__*/_jsx("path", {
22
- d: "M5.20166 12.0864H9.79833",
24
+ d: "M5.0376 13.45H9.9626",
25
+ stroke: "#64748B",
23
26
  strokeWidth: "1.5",
24
27
  strokeLinecap: "round",
25
28
  strokeLinejoin: "round"
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const UndoIcon = props => {
4
+ return /*#__PURE__*/_jsxs("svg", {
5
+ width: "17",
6
+ height: "18",
7
+ viewBox: "0 0 17 18",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ ...props,
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ d: "M4.75 14.5H10.75C12.82 14.5 14.5 12.484 14.5 10C14.5 7.516 12.82 5.5 10.75 5.5H2.5",
13
+ stroke: "#64748B",
14
+ strokeWidth: "1.5",
15
+ strokeMiterlimit: "10",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ d: "M4.5 7.5L2.5 5.5L4.5 3.5",
20
+ stroke: "#64748B",
21
+ strokeWidth: "1.5",
22
+ strokeLinecap: "round",
23
+ strokeLinejoin: "round"
24
+ })]
25
+ });
26
+ };
27
+ export default UndoIcon;
@@ -12,6 +12,12 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
12
12
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
13
13
  import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
14
14
  import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
15
+ import SettingsIcon from "../assets/svg/SettingsIcon";
16
+ import UndoIcon from "../assets/svg/UndoIcon";
17
+ import RedoIcon from "../assets/svg/RedoIcon";
18
+ import TextIcon from "../assets/svg/TextIcon";
19
+ import AddElementIcon from "../assets/svg/AddElementIcon";
20
+ import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
15
21
  import { jsx as _jsx } from "react/jsx-runtime";
16
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
23
  const HeadingIcon = ({
@@ -272,7 +278,13 @@ const iconList = {
272
278
  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
273
279
  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
274
280
  infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
275
- resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
281
+ resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
282
+ pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
283
+ undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
284
+ redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
285
+ textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
286
+ addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
287
+ addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
276
288
  };
277
289
  const Icon = props => {
278
290
  const {
@@ -36,11 +36,12 @@ export default function LinkSettings(props) {
36
36
  customProps,
37
37
  navType
38
38
  } = props;
39
+ const themeType = localStorage.getItem("themeType");
39
40
  const {
40
41
  isMobile
41
42
  } = customProps;
42
43
  const navOptions = getNavOptions(customProps.hideTools);
43
- const classes = LinkSettingsStyles();
44
+ const classes = LinkSettingsStyles(themeType);
44
45
  const [nav, setNav] = useState(getNav(navType, navOptions));
45
46
  const [navValue, setNavValue] = useState(props?.navValue || "");
46
47
  const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);
@@ -1,32 +1,35 @@
1
- const ButtonNavSettingsStyles = () => ({
1
+ const ButtonNavSettingsStyles = themeType => ({
2
2
  dialogContainer: {
3
- '& .MuiDialogContent-root': {
3
+ "& .MuiPaper-root": {
4
+ background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
5
+ },
6
+ "& .MuiDialogContent-root": {
4
7
  padding: "0px 20px"
5
8
  },
6
- '& .MuiDialogActions-root': {
9
+ "& .MuiDialogActions-root": {
7
10
  padding: "10px"
8
11
  },
9
- '& .MuiTypography-h6': {
12
+ "& .MuiTypography-h6": {
10
13
  fontWeight: 600,
11
14
  fontSize: "16px",
12
15
  paddingRight: "20px"
13
16
  },
14
17
  "& .MuiGrid-container": {
15
- marginTop: '0px'
18
+ marginTop: "0px"
16
19
  },
17
20
  "& .MuiGrid-item": {
18
21
  padding: "14px"
19
22
  }
20
23
  },
21
24
  saveBtn: {
22
- color: '#fff',
25
+ color: "#fff",
23
26
  background: "#2563EB",
24
27
  fontSize: "14px",
25
28
  fontWeight: 500,
26
29
  padding: "4px 24px",
27
30
  textTransform: "none",
28
31
  "&:hover": {
29
- color: '#fff',
32
+ color: "#fff",
30
33
  background: "#2563EB"
31
34
  }
32
35
  },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
43
46
  }
44
47
  },
45
48
  closeIcon: {
46
- position: 'absolute',
49
+ position: "absolute",
47
50
  right: 8,
48
51
  top: 8,
49
52
  color: theme => theme.palette.grey[500]
@@ -855,37 +855,6 @@ export const Carousal = props => /*#__PURE__*/_jsxs("svg", {
855
855
  fill: "#64748B"
856
856
  })]
857
857
  });
858
- export const PageSettings = (props = {}) => /*#__PURE__*/_jsxs("svg", {
859
- width: "16",
860
- height: "16",
861
- viewBox: "0 0 16 16",
862
- fill: "none",
863
- xmlns: "http://www.w3.org/2000/svg",
864
- ...props,
865
- children: [/*#__PURE__*/_jsx("path", {
866
- d: "M13.2386 0.535156H2.76091C2.30289 0.535814 1.86383 0.718051 1.53996 1.04192C1.2161 1.36578 1.03386 1.80485 1.0332 2.26286V11.7453C1.03386 12.2033 1.2161 12.6424 1.53996 12.9663C1.86383 13.2901 2.30289 13.4724 2.76091 13.473H4.29405C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473H13.2386C13.6966 13.4724 14.1357 13.2901 14.4595 12.9663C14.7834 12.6424 14.9657 12.2033 14.9663 11.7453V2.26286C14.9657 1.80485 14.7834 1.36578 14.4595 1.04192C14.1357 0.718051 13.6966 0.535814 13.2386 0.535156ZM2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656ZM11.7132 12.4001L11.7055 13.473C11.7493 13.3735 11.385 12.2838 11.4198 12.1832L12.0866 12.0399C12.1979 12.016 12.2975 11.9547 12.3691 11.8663C12.4406 11.7778 12.4797 11.6675 12.4797 11.5538V10.4162C12.4797 10.3025 12.4406 10.1921 12.3691 10.1037C12.2975 10.0152 12.1979 9.95394 12.0866 9.93005L11.4198 9.78674C11.3756 9.66004 11.3243 9.53593 11.2661 9.41502L11.6363 8.84227C11.6981 8.74666 11.7252 8.63276 11.7132 8.51957C11.7011 8.40637 11.6506 8.30073 11.5701 8.22026L10.766 7.41612C10.6855 7.33561 10.5799 7.28512 10.4667 7.27307C10.3535 7.26103 10.2396 7.28816 10.144 7.34994L9.57121 7.72016C9.4503 7.66194 9.3262 7.61061 9.1995 7.5664L9.05618 6.8996C9.03229 6.78837 8.97101 6.68869 8.88255 6.61716C8.79408 6.54563 8.68378 6.50657 8.57002 6.50649H7.43099C7.31722 6.50657 7.20692 6.54563 7.11846 6.61716C7.02999 6.68869 6.96871 6.78837 6.94482 6.8996L6.80151 7.5664C6.67481 7.61061 6.5507 7.66194 6.42979 7.72016L5.85704 7.35243C5.76143 7.29065 5.64753 7.26352 5.53434 7.27556C5.42114 7.28761 5.3155 7.3381 5.23503 7.41861L4.43089 8.22026C4.35038 8.30073 4.29989 8.40637 4.28784 8.51957C4.2758 8.63276 4.30293 8.74666 4.36471 8.84227L4.73493 9.41502C4.67671 9.53593 4.62538 9.66004 4.58117 9.78674L3.91437 9.93005C3.80314 9.95394 3.70346 10.0152 3.63193 10.1037C3.5604 10.1921 3.52134 10.3025 3.52126 10.4162V11.5538C3.52134 11.6675 3.5604 11.7778 3.63193 11.8663C3.70346 11.9547 3.80314 12.016 3.91437 12.0399L4.58117 12.1832C4.616 12.2828 4.25026 13.3775 4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001Z",
867
- fill: "#64748A"
868
- }), /*#__PURE__*/_jsx("path", {
869
- d: "M4.29405 13.473H2.76091C2.30289 13.4724 1.86383 13.2901 1.53996 12.9663C1.2161 12.6424 1.03386 12.2033 1.0332 11.7453V2.26286C1.03386 1.80485 1.2161 1.36578 1.53996 1.04192C1.86383 0.718051 2.30289 0.535814 2.76091 0.535156H13.2386C13.6966 0.535814 14.1357 0.718051 14.4595 1.04192C14.7834 1.36578 14.9657 1.80485 14.9663 2.26286V11.7453C14.9657 12.2033 14.7834 12.6424 14.4595 12.9663C14.1357 13.2901 13.6966 13.4724 13.2386 13.473H11.7055M4.29405 13.473C4.30918 13.5774 4.3571 13.6743 4.43089 13.7497L5.23503 14.5539C5.3155 14.6344 5.42114 14.6849 5.53434 14.6969C5.64753 14.7089 5.76143 14.6818 5.85704 14.62L6.42979 14.2498C6.5507 14.308 6.67481 14.3594 6.80151 14.4036L6.94482 15.0704C6.96871 15.1816 7.02999 15.2813 7.11846 15.3528C7.20692 15.4243 7.31722 15.4634 7.43099 15.4635H8.56852C8.68229 15.4634 8.79259 15.4243 8.88105 15.3528C8.96952 15.2813 9.0308 15.1816 9.05469 15.0704L9.198 14.4036C9.32471 14.3594 9.44881 14.308 9.56972 14.2498L10.1425 14.62C10.2381 14.6818 10.352 14.7089 10.4652 14.6969C10.5784 14.6849 10.684 14.6344 10.7645 14.5539L11.5686 13.7497C11.6424 13.6743 11.6903 13.5774 11.7055 13.473M4.29405 13.473C4.25026 13.3775 4.616 12.2828 4.58117 12.1832L3.91437 12.0399C3.80314 12.016 3.70346 11.9547 3.63193 11.8663C3.5604 11.7778 3.52134 11.6675 3.52126 11.5538V10.4162C3.52134 10.3025 3.5604 10.1921 3.63193 10.1037C3.70346 10.0152 3.80314 9.95394 3.91437 9.93005L4.58117 9.78674C4.62538 9.66004 4.67671 9.53593 4.73493 9.41502L4.36471 8.84227C4.30293 8.74666 4.2758 8.63276 4.28784 8.51957C4.29989 8.40637 4.35038 8.30073 4.43089 8.22026L5.23503 7.41861C5.3155 7.3381 5.42114 7.28761 5.53434 7.27556C5.64753 7.26352 5.76143 7.29065 5.85704 7.35243L6.42979 7.72016C6.5507 7.66194 6.67481 7.61061 6.80151 7.5664L6.94482 6.8996C6.96871 6.78837 7.02999 6.68869 7.11846 6.61716C7.20692 6.54563 7.31722 6.50657 7.43099 6.50649H8.57002C8.68378 6.50657 8.79408 6.54563 8.88255 6.61716C8.97101 6.68869 9.03229 6.78837 9.05618 6.8996L9.1995 7.5664C9.3262 7.61061 9.4503 7.66194 9.57121 7.72016L10.144 7.34994C10.2396 7.28816 10.3535 7.26103 10.4667 7.27307C10.5799 7.28512 10.6855 7.33561 10.766 7.41612L11.5701 8.22026C11.6506 8.30073 11.7011 8.40637 11.7132 8.51957C11.7252 8.63276 11.6981 8.74666 11.6363 8.84227L11.2661 9.41502C11.3243 9.53593 11.3756 9.66004 11.4198 9.78674L12.0866 9.93005C12.1979 9.95394 12.2975 10.0152 12.3691 10.1037C12.4406 10.1921 12.4797 10.3025 12.4797 10.4162V11.5538C12.4797 11.6675 12.4406 11.7778 12.3691 11.8663C12.2975 11.9547 12.1979 12.016 12.0866 12.0399L11.4198 12.1832C11.385 12.2838 11.7493 13.3735 11.7055 13.473M4.29405 13.473V12.5C4.19775 12.5001 2.57072 12.4591 2.48171 12.4224C2.3927 12.3856 2.3118 12.3317 2.24364 12.2637C2.17548 12.1956 2.12138 12.1148 2.08446 12.0259C2.04753 11.937 2.02849 11.8416 2.02842 11.7453V4.51604H13.9711V11.7453C13.971 11.9396 13.8937 12.1258 13.7564 12.2631C13.6191 12.4005 11.9074 12.4 11.7132 12.4001L11.7055 13.473M2.76091 1.53038H13.2386C13.4328 1.53051 13.6191 1.60772 13.7564 1.74506C13.8937 1.8824 13.971 2.06864 13.9711 2.26286V3.52082H2.02842V2.26286C2.02856 2.06864 2.10577 1.8824 2.24311 1.74506C2.38045 1.60772 2.56668 1.53051 2.76091 1.53038ZM10.345 13.5656L9.8643 13.2546C9.78643 13.2042 9.696 13.1765 9.60323 13.1747C9.51047 13.173 9.41906 13.1972 9.33932 13.2446C9.12471 13.3725 8.89275 13.4687 8.65063 13.5303C8.56076 13.553 8.47904 13.6005 8.41468 13.6672C8.35032 13.7339 8.30588 13.8173 8.28638 13.908L8.16596 14.4683H7.83355L7.71313 13.908C7.69363 13.8173 7.64919 13.7339 7.58483 13.6672C7.52047 13.6005 7.43875 13.553 7.34888 13.5303C7.10676 13.4687 6.8748 13.3725 6.66019 13.2446C6.58045 13.1972 6.48904 13.173 6.39628 13.1747C6.30351 13.1765 6.21308 13.2042 6.13521 13.2546L5.65452 13.5656L5.41915 13.3302L5.73015 12.8495C5.78059 12.7717 5.80825 12.6812 5.81001 12.5885C5.81177 12.4957 5.78755 12.4043 5.7401 12.3246C5.61223 12.1099 5.51603 11.878 5.45448 11.6359C5.4317 11.546 5.38428 11.4643 5.31754 11.3999C5.25081 11.3355 5.16743 11.2911 5.07679 11.2716L4.51648 11.1512V10.8188L5.07679 10.6984C5.16743 10.6789 5.25081 10.6344 5.31754 10.5701C5.38428 10.5057 5.4317 10.424 5.45448 10.3341C5.51603 10.092 5.61223 9.86003 5.7401 9.64542C5.78755 9.56568 5.81177 9.47427 5.81001 9.38151C5.80825 9.28874 5.78059 9.19831 5.73015 9.12044L5.41915 8.63975L5.65452 8.40438L6.13521 8.71538C6.21308 8.76582 6.30351 8.79348 6.39628 8.79524C6.48904 8.797 6.58045 8.77278 6.66019 8.72533C6.8748 8.59746 7.10676 8.50126 7.34888 8.43971C7.43875 8.41693 7.52047 8.36951 7.58483 8.30277C7.64919 8.23604 7.69363 8.15266 7.71313 8.06202L7.83355 7.50171H8.16596L8.28638 8.06202C8.30588 8.15266 8.35032 8.23604 8.41468 8.30277C8.47904 8.36951 8.56076 8.41693 8.65063 8.43971C8.89275 8.50126 9.12471 8.59746 9.33932 8.72533C9.41906 8.77278 9.51047 8.797 9.60323 8.79524C9.696 8.79348 9.78643 8.76582 9.8643 8.71538L10.345 8.40438L10.5804 8.63975L10.2694 9.12044C10.2189 9.19831 10.1913 9.28874 10.1895 9.38151C10.1877 9.47427 10.212 9.56568 10.2594 9.64542C10.3873 9.86003 10.4835 10.092 10.545 10.3341C10.5678 10.424 10.6152 10.5057 10.682 10.5701C10.7487 10.6344 10.8321 10.6789 10.9227 10.6984L11.483 10.8188V11.1512L10.9227 11.2716C10.8321 11.2911 10.7487 11.3355 10.682 11.3999C10.6152 11.4643 10.5678 11.546 10.545 11.6359C10.4835 11.878 10.3873 12.1099 10.2594 12.3246C10.212 12.4043 10.1877 12.4957 10.1895 12.5885C10.1913 12.6812 10.2189 12.7717 10.2694 12.8495L10.5804 13.3302L10.345 13.5656Z",
870
- stroke: "white",
871
- strokeWidth: "0.1"
872
- }), /*#__PURE__*/_jsx("path", {
873
- d: "M3.52105 3.02257C3.79587 3.02257 4.01866 2.79978 4.01866 2.52495C4.01866 2.25013 3.79587 2.02734 3.52105 2.02734C3.24623 2.02734 3.02344 2.25013 3.02344 2.52495C3.02344 2.79978 3.24623 3.02257 3.52105 3.02257Z",
874
- fill: "#64748A",
875
- stroke: "white",
876
- strokeWidth: "0.1"
877
- }), /*#__PURE__*/_jsx("path", {
878
- d: "M5.01421 3.02257C5.28904 3.02257 5.51182 2.79978 5.51182 2.52495C5.51182 2.25013 5.28904 2.02734 5.01421 2.02734C4.73939 2.02734 4.5166 2.25013 4.5166 2.52495C4.5166 2.79978 4.73939 3.02257 5.01421 3.02257Z",
879
- fill: "#64748A",
880
- stroke: "white",
881
- strokeWidth: "0.1"
882
- }), /*#__PURE__*/_jsx("path", {
883
- d: "M7.99972 8.99414C7.60605 8.99414 7.22122 9.11088 6.89389 9.32959C6.56656 9.5483 6.31144 9.85917 6.16079 10.2229C6.01014 10.5866 5.97072 10.9868 6.04752 11.3729C6.12433 11.759 6.3139 12.1137 6.59227 12.392C6.87063 12.6704 7.2253 12.86 7.61141 12.9368C7.99751 13.0136 8.39773 12.9742 8.76143 12.8235C9.12514 12.6729 9.436 12.4177 9.65472 12.0904C9.87343 11.7631 9.99017 11.3783 9.99017 10.9846C9.99017 10.4567 9.78046 9.95041 9.40718 9.57713C9.0339 9.20385 8.52762 8.99414 7.99972 8.99414ZM7.99972 11.9798C7.80289 11.9798 7.61047 11.9214 7.44681 11.8121C7.28314 11.7027 7.15558 11.5473 7.08026 11.3654C7.00493 11.1836 6.98522 10.9835 7.02362 10.7904C7.06202 10.5974 7.15681 10.42 7.29599 10.2809C7.43518 10.1417 7.61251 10.0469 7.80556 10.0085C7.99862 9.97008 8.19872 9.98979 8.38058 10.0651C8.56243 10.1404 8.71786 10.268 8.82722 10.4317C8.93658 10.5953 8.99494 10.7877 8.99494 10.9846C8.99494 11.2485 8.89009 11.5017 8.70345 11.6883C8.51681 11.875 8.26367 11.9798 7.99972 11.9798Z",
884
- fill: "#64748A",
885
- stroke: "white",
886
- strokeWidth: "0.1"
887
- })]
888
- });
889
858
  export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
890
859
  xmlns: "http://www.w3.org/2000/svg",
891
860
  width: "24",
@@ -1,4 +1,4 @@
1
- import { Editor, Transforms, Element, Node, Path } from "slate";
1
+ import { Editor, Transforms, Element, Node, Path, Range } from "slate";
2
2
  import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
@@ -179,7 +179,6 @@ const checkListEnterEvent = (editor, type) => {
179
179
  export const enterEvent = (e, editor, isMobile) => {
180
180
  try {
181
181
  const ele = isListItem(editor);
182
-
183
182
  // on shift enter break line in same node
184
183
  if (e.shiftKey && !isMobile) {
185
184
  e.preventDefault();
@@ -188,6 +187,7 @@ export const enterEvent = (e, editor, isMobile) => {
188
187
  const {
189
188
  type
190
189
  } = ele[0];
190
+ const path = ele[1];
191
191
  const text = Node.string(ele[0]);
192
192
  switch (type) {
193
193
  case "list-item":
@@ -219,6 +219,58 @@ export const enterEvent = (e, editor, isMobile) => {
219
219
  insertAccordion(editor, nextPath);
220
220
  }
221
221
  break;
222
+ case "headingOne":
223
+ case "headingTwo":
224
+ case "headingThree":
225
+ const {
226
+ selection
227
+ } = editor;
228
+ if (selection && Range.isCollapsed(selection)) {
229
+ const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
230
+ const isAtStart = Editor.isStart(editor, selection.anchor, path);
231
+ if (isAtEnd) {
232
+ e.preventDefault();
233
+ Transforms.insertNodes(editor, {
234
+ type: 'paragraph',
235
+ children: [{
236
+ text: ''
237
+ }]
238
+ });
239
+ const newLocation = Editor.after(editor, selection);
240
+ if (newLocation) {
241
+ Transforms.select(editor, newLocation);
242
+ }
243
+ } else if (!isAtStart) {
244
+ e.preventDefault();
245
+ Transforms.splitNodes(editor);
246
+ Transforms.setNodes(editor, {
247
+ type: 'paragraph'
248
+ }, {
249
+ at: Editor.after(editor, selection)
250
+ });
251
+ const newLocation = Editor.after(editor, selection);
252
+ if (newLocation) {
253
+ Transforms.select(editor, newLocation);
254
+ }
255
+ } else if (isAtStart) {
256
+ e.preventDefault();
257
+ Transforms.insertNodes(editor, {
258
+ type: 'paragraph',
259
+ children: [{
260
+ text: ''
261
+ }]
262
+ }, {
263
+ at: Editor.before(editor, selection)
264
+ });
265
+ Transforms.select(editor, Editor.before(editor, selection));
266
+ const newLocation = Editor.before(editor, selection);
267
+ if (newLocation) {
268
+ Transforms.select(editor, newLocation);
269
+ }
270
+ }
271
+ return;
272
+ }
273
+ break;
222
274
  default:
223
275
  }
224
276
  }
@@ -146,7 +146,7 @@ export const handleInsertLastElement = (event, editor) => {
146
146
  }
147
147
  };
148
148
  export const isListItem = editor => {
149
- const format = ["list-item", "check-list-item", "accordion-summary"];
149
+ const format = ["list-item", "check-list-item", "accordion-summary", "headingOne", "headingTwo", "headingThree"];
150
150
  const [node] = Editor.nodes(editor, {
151
151
  match: n => !Editor.isEditor(n) && Element.isElement(n) && format.indexOf(n.type) > -1
152
152
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.8.3",
3
+ "version": "3.8.5",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"