@flozy/editor 1.7.5 → 1.7.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. package/dist/Editor/CommonEditor.js +30 -12
  2. package/dist/Editor/DialogWrapper.js +2 -10
  3. package/dist/Editor/Editor.css +105 -0
  4. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -4
  5. package/dist/Editor/Elements/Color Picker/ColorPicker.js +9 -6
  6. package/dist/Editor/Elements/Color Picker/LogoIcon.js +15 -49
  7. package/dist/Editor/Elements/Color Picker/Styles.js +25 -4
  8. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  9. package/dist/Editor/Elements/Embed/Image.js +25 -31
  10. package/dist/Editor/Elements/Embed/Video.js +49 -40
  11. package/dist/Editor/Elements/Form/Workflow/Styles.js +3 -2
  12. package/dist/Editor/Elements/Grid/Grid.js +67 -114
  13. package/dist/Editor/Elements/Grid/GridItem.js +9 -23
  14. package/dist/Editor/Elements/Grid/templates/default_grid.js +0 -23
  15. package/dist/Editor/Elements/Link/Link.js +58 -20
  16. package/dist/Editor/Elements/Link/LinkButton.js +37 -97
  17. package/dist/Editor/Elements/Link/LinkPopup.js +106 -0
  18. package/dist/Editor/Elements/List/CheckList.js +28 -22
  19. package/dist/Editor/Elements/Signature/SignatureOptions/TypeSignature.js +11 -5
  20. package/dist/Editor/Elements/Signature/SignaturePopup.js +15 -4
  21. package/dist/Editor/Elements/SimpleText.js +30 -26
  22. package/dist/Editor/MiniEditor.js +4 -6
  23. package/dist/Editor/Styles/EditorStyles.js +72 -1
  24. package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -1
  25. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -1
  26. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +3 -1
  27. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +4 -0
  28. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +96 -19
  29. package/dist/Editor/Toolbar/toolbarGroups.js +1 -1
  30. package/dist/Editor/common/Section/index.js +118 -0
  31. package/dist/Editor/common/Shorthands/elements.js +1 -1
  32. package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -1
  33. package/dist/Editor/common/StyleBuilder/buttonStyle.js +44 -51
  34. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +2 -24
  35. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -3
  36. package/dist/Editor/common/StyleBuilder/fieldStyle.js +0 -3
  37. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +52 -62
  38. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +2 -1
  39. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +100 -74
  40. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +41 -10
  41. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -3
  42. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +27 -77
  43. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -5
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/gridSize.js +19 -15
  45. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +2 -2
  46. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +2 -2
  47. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +67 -8
  48. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +2 -3
  49. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +21 -32
  50. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +37 -41
  51. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +26 -24
  52. package/dist/Editor/common/StyleBuilder/formStyle.js +0 -6
  53. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +38 -54
  54. package/dist/Editor/common/StyleBuilder/gridStyle.js +20 -26
  55. package/dist/Editor/common/StyleBuilder/index.js +14 -58
  56. package/dist/Editor/common/StyleBuilder/sectionStyle.js +16 -0
  57. package/dist/Editor/helper/index.js +63 -1
  58. package/dist/Editor/utils/Decorators/index.js +5 -0
  59. package/dist/Editor/utils/Decorators/link.js +26 -0
  60. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -8
  61. package/dist/Editor/utils/accordion.js +17 -4
  62. package/dist/Editor/utils/button.js +15 -1
  63. package/dist/Editor/utils/customHooks/useElement.js +28 -0
  64. package/dist/Editor/utils/embed.js +1 -7
  65. package/dist/Editor/utils/events.js +92 -43
  66. package/dist/Editor/utils/gridItem.js +1 -1
  67. package/dist/Editor/utils/link.js +10 -9
  68. package/package.json +1 -1
@@ -1,14 +1,10 @@
1
1
  import { useRef, useState } from "react";
2
- import { Transforms } from "slate";
3
- import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
4
- // styled,
5
- } from "@mui/material";
6
- // import { styled } from "@mui/material/styles";
7
- import CloseIcon from "@mui/icons-material/Close";
2
+ import { Editor, Transforms } from "slate";
3
+ import { IconButton, Tooltip } from "@mui/material";
8
4
  import { insertLink } from "../../utils/link";
9
5
  import Icon from "../../common/Icon";
10
- import { isBlockActive } from "../../utils/SlateUtilityFunctions";
11
- // import styled from "@emotion/styled";
6
+ import { getBlockActive } from "../../utils/SlateUtilityFunctions";
7
+ import LinkPopup from "./LinkPopup";
12
8
  import { jsx as _jsx } from "react/jsx-runtime";
13
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
10
  const LinkButton = props => {
@@ -17,31 +13,45 @@ const LinkButton = props => {
17
13
  } = props;
18
14
  const linkInputRef = useRef(null);
19
15
  const [showInput, setShowInput] = useState(false);
20
- const [url, setUrl] = useState("");
21
- const [showInNewTab, setShowInNewTab] = useState(false);
16
+ const [linkData, setLinkData] = useState({
17
+ name: "",
18
+ url: "",
19
+ showInNewTab: true
20
+ });
22
21
  const [selection, setSelection] = useState();
22
+ const {
23
+ isActive,
24
+ props: blockProps
25
+ } = getBlockActive(editor, "link");
23
26
  const handleInsertLink = () => {
24
27
  Transforms.select(editor, selection);
25
28
  insertLink(editor, {
26
- url,
27
- showInNewTab
29
+ ...linkData
30
+ });
31
+ setLinkData({
32
+ name: "",
33
+ url: "",
34
+ showInNewTab: true
28
35
  });
29
- setUrl("");
30
36
  setShowInput(false);
31
- setShowInNewTab(false);
32
37
  };
33
38
  const toggleLink = () => {
34
39
  setSelection(editor.selection);
40
+ setLinkData({
41
+ name: Editor.string(editor, editor.selection),
42
+ url: blockProps?.href || "",
43
+ showInNewTab: true
44
+ });
35
45
  setShowInput(true);
36
46
  };
37
47
  const handleInputChange = ({
38
48
  target
39
49
  }) => {
40
- if (target.type === "checkbox") {
41
- setShowInNewTab(target.checked);
42
- } else {
43
- setUrl(target.value);
44
- }
50
+ let val = target.type === "checkbox" ? target.checked : target.value;
51
+ setLinkData({
52
+ ...linkData,
53
+ [target.name]: val
54
+ });
45
55
  };
46
56
  const handleClose = () => {
47
57
  setShowInput(false);
@@ -53,90 +63,20 @@ const LinkButton = props => {
53
63
  title: "Link",
54
64
  arrow: true,
55
65
  children: /*#__PURE__*/_jsx(IconButton, {
56
- className: showInput ? "clicked" : "",
57
- active: isBlockActive(editor, "link") ? "active" : "",
66
+ className: `${showInput ? "clicked" : ""} ${isActive ? "btnActive" : ""}`,
58
67
  format: "link",
59
68
  onClick: toggleLink,
60
69
  children: /*#__PURE__*/_jsx(Icon, {
61
70
  icon: "link"
62
71
  })
63
72
  })
64
- }), showInput && /*#__PURE__*/_jsxs(Dialog, {
65
- fullWidth: true,
66
- open: true,
67
- className: `dialogComp`,
68
- children: [/*#__PURE__*/_jsx(DialogTitle, {
69
- children: /*#__PURE__*/_jsxs("div", {
70
- style: {
71
- display: "flex",
72
- justifyContent: "space-between"
73
- },
74
- children: [/*#__PURE__*/_jsx(Typography, {
75
- variant: "h6",
76
- className: "popupTitle",
77
- color: "primary",
78
- children: "LINK"
79
- }), /*#__PURE__*/_jsx("div", {
80
- style: {
81
- display: "flex"
82
- },
83
- children: /*#__PURE__*/_jsx(IconButton, {
84
- onClick: handleClose,
85
- className: "close-popupbtn",
86
- children: /*#__PURE__*/_jsx(CloseIcon, {})
87
- })
88
- })]
89
- })
90
- }), /*#__PURE__*/_jsxs(DialogContent, {
91
- children: [/*#__PURE__*/_jsx(Grid, {
92
- item: true,
93
- xs: 12,
94
- style: {
95
- paddingTop: "12px"
96
- },
97
- children: /*#__PURE__*/_jsx(TextField, {
98
- size: "small",
99
- fullWidth: true,
100
- value: url,
101
- placeholder: "https://google.com",
102
- onChange: handleInputChange
103
- })
104
- }), /*#__PURE__*/_jsx(Grid, {
105
- item: true,
106
- xs: 12,
107
- sx: {
108
- ml: 1
109
- },
110
- children: /*#__PURE__*/_jsx(FormControl, {
111
- children: /*#__PURE__*/_jsx(FormControlLabel, {
112
- control: /*#__PURE__*/_jsx(Checkbox, {
113
- checked: showInNewTab,
114
- onChange: handleInputChange
115
- }),
116
- label: /*#__PURE__*/_jsx(Typography, {
117
- variant: "body1",
118
- color: "primary",
119
- sx: {
120
- pl: 1
121
- },
122
- children: "Open in new tab"
123
- })
124
- })
125
- })
126
- })]
127
- }), /*#__PURE__*/_jsxs(DialogActions, {
128
- children: [/*#__PURE__*/_jsx(Button, {
129
- onClick: handleClose,
130
- className: "secondaryBtn",
131
- children: "Cancel"
132
- }), /*#__PURE__*/_jsx(Button, {
133
- onClick: handleInsertLink,
134
- className: "primaryBtn",
135
- children: "Add"
136
- })]
137
- })]
73
+ }), /*#__PURE__*/_jsx(LinkPopup, {
74
+ open: showInput,
75
+ linkData: linkData,
76
+ handleClose: handleClose,
77
+ handleInputChange: handleInputChange,
78
+ handleInsertLink: handleInsertLink
138
79
  })]
139
80
  });
140
81
  };
141
- export default LinkButton;
142
- // export default styled(commonStyle)(LinkButton);
82
+ export default LinkButton;
@@ -0,0 +1,106 @@
1
+ import React from "react";
2
+ import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
3
+ import CloseIcon from "@mui/icons-material/Close";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const LinkPopup = props => {
7
+ const {
8
+ open,
9
+ handleClose,
10
+ linkData,
11
+ handleInputChange,
12
+ handleInsertLink
13
+ } = props;
14
+ return /*#__PURE__*/_jsxs(Dialog, {
15
+ fullWidth: true,
16
+ open: open,
17
+ className: `dialogComp`,
18
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
19
+ children: /*#__PURE__*/_jsxs("div", {
20
+ style: {
21
+ display: "flex",
22
+ justifyContent: "space-between"
23
+ },
24
+ children: [/*#__PURE__*/_jsx(Typography, {
25
+ variant: "h6",
26
+ className: "popupTitle",
27
+ color: "primary",
28
+ children: "LINK"
29
+ }), /*#__PURE__*/_jsx("div", {
30
+ style: {
31
+ display: "flex"
32
+ },
33
+ children: /*#__PURE__*/_jsx(IconButton, {
34
+ onClick: handleClose,
35
+ className: "close-popupbtn",
36
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
37
+ })
38
+ })]
39
+ })
40
+ }), /*#__PURE__*/_jsxs(DialogContent, {
41
+ children: [/*#__PURE__*/_jsx(Grid, {
42
+ item: true,
43
+ xs: 12,
44
+ style: {
45
+ paddingTop: "12px"
46
+ },
47
+ children: /*#__PURE__*/_jsx(TextField, {
48
+ size: "small",
49
+ fullWidth: true,
50
+ value: linkData?.name,
51
+ name: "name",
52
+ placeholder: "Link Title",
53
+ onChange: handleInputChange
54
+ })
55
+ }), /*#__PURE__*/_jsx(Grid, {
56
+ item: true,
57
+ xs: 12,
58
+ style: {
59
+ paddingTop: "12px"
60
+ },
61
+ children: /*#__PURE__*/_jsx(TextField, {
62
+ size: "small",
63
+ fullWidth: true,
64
+ name: "url",
65
+ value: linkData?.url,
66
+ placeholder: "https://google.com",
67
+ onChange: handleInputChange
68
+ })
69
+ }), /*#__PURE__*/_jsx(Grid, {
70
+ item: true,
71
+ xs: 12,
72
+ sx: {
73
+ ml: 1
74
+ },
75
+ children: /*#__PURE__*/_jsx(FormControl, {
76
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
77
+ control: /*#__PURE__*/_jsx(Checkbox, {
78
+ name: "showInNewTab",
79
+ checked: linkData?.showInNewTab,
80
+ onChange: handleInputChange
81
+ }),
82
+ label: /*#__PURE__*/_jsx(Typography, {
83
+ variant: "body1",
84
+ color: "primary",
85
+ sx: {
86
+ pl: 1
87
+ },
88
+ children: "Open in new tab"
89
+ })
90
+ })
91
+ })
92
+ })]
93
+ }), /*#__PURE__*/_jsxs(DialogActions, {
94
+ children: [/*#__PURE__*/_jsx(Button, {
95
+ onClick: handleClose,
96
+ className: "secondaryBtn",
97
+ children: "Cancel"
98
+ }), /*#__PURE__*/_jsx(Button, {
99
+ onClick: handleInsertLink,
100
+ className: "primaryBtn",
101
+ children: "Add"
102
+ })]
103
+ })]
104
+ });
105
+ };
106
+ export default LinkPopup;
@@ -1,55 +1,61 @@
1
1
  import React from "react";
2
2
  import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
3
3
  import { Transforms } from "slate";
4
+ import { Checkbox, FormControlLabel } from "@mui/material";
5
+ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
6
+ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
4
7
  import { jsx as _jsx } from "react/jsx-runtime";
5
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
9
  const CheckList = ({
7
10
  attributes,
8
11
  children,
9
- element
12
+ element,
13
+ isEmpty
10
14
  }) => {
11
15
  const editor = useSlateStatic();
12
16
  const readOnly = useReadOnly();
13
17
  const {
14
18
  checked
15
19
  } = element;
20
+ const path = ReactEditor.findPath(editor, element);
21
+ const handleCheck = e => {
22
+ Transforms.setNodes(editor, {
23
+ checked: e.target.checked
24
+ }, {
25
+ at: path
26
+ });
27
+ };
16
28
  return /*#__PURE__*/_jsxs("div", {
17
29
  ...attributes,
18
- className: "checkbox-list",
19
30
  style: {
20
- textAlign: element.alignment || "left"
31
+ textAlign: element.alignment || "left",
32
+ display: "flex",
33
+ justifyContent: "center",
34
+ alignItems: "center"
21
35
  },
22
- children: [/*#__PURE__*/_jsxs("span", {
36
+ children: [/*#__PURE__*/_jsxs("div", {
23
37
  contentEditable: false,
24
38
  className: "checkbox-edit",
25
- children: [/*#__PURE__*/_jsx("input", {
26
- type: "checkbox",
27
- className: "styled-checkbox",
28
- checked: checked,
29
- style: {
30
- marginRight: "8px"
31
- },
32
- onChange: event => {
33
- const path = ReactEditor.findPath(editor, element);
34
- const newProperties = {
35
- checked: event.target.checked
36
- };
37
- Transforms.setNodes(editor, newProperties, {
38
- at: path
39
- });
40
- }
39
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
40
+ control: /*#__PURE__*/_jsx(Checkbox, {
41
+ icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
42
+ checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
43
+ checked: checked,
44
+ onChange: handleCheck
45
+ })
41
46
  }), /*#__PURE__*/_jsx("span", {
42
47
  className: "checkbox-inner"
43
48
  })]
44
- }), /*#__PURE__*/_jsx("span", {
49
+ }), /*#__PURE__*/_jsx("div", {
45
50
  contentEditable: !readOnly,
46
51
  suppressContentEditableWarning: true,
47
- className: "",
48
52
  style: {
49
53
  flex: 1,
50
54
  opacity: checked ? 1 : 1,
51
55
  textDecoration: !checked ? "none" : "none"
52
56
  },
57
+ className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
58
+ placeholder: "Todo List",
53
59
  children: children
54
60
  })]
55
61
  });
@@ -1,6 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import { signedTextFonts } from "../../../utils/font";
3
- import { Grid, Button, TextField, InputAdornment, IconButton } from "@mui/material";
3
+ import { Grid, Button, TextField, InputAdornment, IconButton, Typography } from "@mui/material";
4
4
  import ClearIcon from "@mui/icons-material/Clear";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,13 +33,19 @@ const TypeSignature = props => {
33
33
  textAlign: "center"
34
34
  },
35
35
  children: /*#__PURE__*/_jsx(Button, {
36
- style: {
37
- fontFamily: m.text
38
- },
39
36
  fullWidth: true,
40
37
  onClick: onFontFamilyChange(m.value),
41
38
  className: m.value === fontFamily ? "active" : "",
42
- children: name || "Signature"
39
+ children: /*#__PURE__*/_jsx(Typography, {
40
+ style: {
41
+ fontFamily: m.text,
42
+ overflow: "hidden",
43
+ textOverflow: "ellipsis",
44
+ warp: "noWarp",
45
+ maxWidth: "120px"
46
+ },
47
+ children: name || "Signature"
48
+ })
43
49
  })
44
50
  }, `typesign-ff-${m.value}`);
45
51
  });
@@ -27,7 +27,9 @@ const SignaturePopup = props => {
27
27
  const [tab, setTab] = useState(0);
28
28
  const SeletectedTab = SignatureOptions[tab];
29
29
  const [signedData, setSignedData] = useState({
30
- signedOn: new Date()
30
+ signedOn: new Date(),
31
+ signature: "",
32
+ signedText: ""
31
33
  });
32
34
  const [brush, setBrush] = useState({
33
35
  size: 1,
@@ -86,6 +88,15 @@ const SignaturePopup = props => {
86
88
  ...data
87
89
  });
88
90
  };
91
+ const onTabChange = newValue => {
92
+ setTab(newValue);
93
+ setSignedData({
94
+ signedOn: new Date(),
95
+ signature: "",
96
+ signedText: ""
97
+ });
98
+ };
99
+ const isEmpty = signedData?.signature === "" && signedData?.signedText === "";
89
100
  return /*#__PURE__*/_jsxs(_Fragment, {
90
101
  children: [/*#__PURE__*/_jsx("div", {
91
102
  className: `signature-btn-container`,
@@ -155,7 +166,7 @@ const SignaturePopup = props => {
155
166
  variant: "scrollable",
156
167
  value: tab,
157
168
  onChange: (e, newValue) => {
158
- setTab(newValue);
169
+ onTabChange(newValue);
159
170
  },
160
171
  "aria-label": "Element Tabs",
161
172
  children: [/*#__PURE__*/_jsx(Tab, {
@@ -346,8 +357,8 @@ const SignaturePopup = props => {
346
357
  children: "Delete"
347
358
  }) : null, /*#__PURE__*/_jsx(Button, {
348
359
  onClick: handleSave,
349
- className: `primaryBtn ${!signedData?.signature ? "disabled" : ""}`,
350
- disabled: !signedData?.signature,
360
+ className: `primaryBtn ${isEmpty ? "disabled" : ""}`,
361
+ disabled: isEmpty,
351
362
  children: "Save"
352
363
  })]
353
364
  })]
@@ -1,29 +1,34 @@
1
1
  import React from "react";
2
2
  import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
3
- import { Node, Editor } from "slate";
4
3
  import { Box } from "@mui/material";
4
+ import { getPageSettings } from "../utils/pageSettings";
5
+ import { invertColor } from "../helper";
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
- const SimpleTextStyle = () => ({
8
+ const SimpleTextStyle = ({
9
+ pageColor
10
+ }) => ({
8
11
  root: {
9
12
  position: "relative",
10
13
  padding: "0px",
11
14
  "& .placeholder-simple-text": {
12
- color: "#B8C5D7",
13
- background: "#FFF",
15
+ color: invertColor(pageColor),
16
+ background: "transparent",
14
17
  position: "absolute",
15
18
  zIndex: -1,
16
- left: "4px",
19
+ left: "0px",
20
+ paddingLeft: "4px",
17
21
  top: 0,
18
22
  bottom: 0,
19
23
  margin: "auto",
20
24
  pointerEvents: "none",
21
25
  height: "18px",
22
- padding: "0px",
26
+ overflow: "hidden",
27
+ fontSize: "14px",
23
28
  "& .bg-pad-sl": {
24
29
  padding: "2px 4px 2px 4px",
25
- background: "#F2F6FA",
26
- fontSize: "12px"
30
+ background: "transparent",
31
+ color: invertColor(pageColor)
27
32
  }
28
33
  }
29
34
  },
@@ -40,41 +45,40 @@ const SimpleTextStyle = () => ({
40
45
  }
41
46
  });
42
47
  const SimpleText = props => {
48
+ const editor = useSlateStatic();
43
49
  const {
44
50
  element,
45
51
  attributes,
46
52
  children,
47
- customProps
53
+ customProps,
54
+ isEmpty
48
55
  } = props;
49
56
  const {
50
57
  readOnly,
51
58
  editorPlaceholder
52
59
  } = customProps;
53
- const classes = SimpleTextStyle();
54
- const editor = useSlateStatic();
60
+ const {
61
+ element: pageSt
62
+ } = getPageSettings(editor) || {};
63
+ const {
64
+ pageColor
65
+ } = pageSt?.pageProps || {};
66
+ const classes = SimpleTextStyle({
67
+ pageColor: pageColor || "rgba(255,255,255,1)"
68
+ });
55
69
  const selected = useSelected();
56
70
  const path = ReactEditor.findPath(editor, element);
57
- const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
58
- const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
59
- const isMoreText = (editor.selection ? Editor.string(editor, editor.selection) : "")?.trim()?.length === 0;
71
+ const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && selected;
72
+ const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
60
73
  return /*#__PURE__*/_jsxs(Box, {
61
74
  ...element.attr,
62
75
  ...attributes,
63
76
  className: `simple-text`,
64
77
  sx: classes.root,
65
- children: [children, isMoreText && selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
66
- className: "placeholder-simple-text",
67
- children: ["Type ", /*#__PURE__*/_jsx("span", {
68
- className: "bg-pad-sl",
69
- children: "/"
70
- }), " for browse elements"]
71
- }) : null, isMoreText && emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
72
- className: "placeholder-simple-text",
73
- children: "Write Something..."
74
- }) : null, editorPlaceholder && !selected ? /*#__PURE__*/_jsx("span", {
78
+ children: [children, /*#__PURE__*/_jsx("span", {
75
79
  className: "placeholder-simple-text",
76
- children: editorPlaceholder
77
- }) : null]
80
+ children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? "Type / to browse elements" : ""
81
+ })]
78
82
  });
79
83
  };
80
84
  export default SimpleText;
@@ -1,5 +1,5 @@
1
- import React, { useCallback, useMemo, useRef, useState } from "react";
2
- import { createEditor } from 'slate';
1
+ import React, { useCallback, useRef, useState } from "react";
2
+ import { createEditor } from "slate";
3
3
  import { Slate, Editable, withReact } from "slate-react";
4
4
  import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
5
5
  import { commands, mentionsEvent } from "./utils/events";
@@ -8,9 +8,9 @@ import Shorthands from "./common/Shorthands";
8
8
  // import withCommon from "./hooks/withCommon";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  const initialValue = [{
11
- type: 'paragraph',
11
+ type: "paragraph",
12
12
  children: [{
13
- text: ''
13
+ text: ""
14
14
  }]
15
15
  }];
16
16
  const MiniEditor = props => {
@@ -49,10 +49,8 @@ const MiniEditor = props => {
49
49
  const {
50
50
  search,
51
51
  target,
52
- index,
53
52
  type
54
53
  } = mentions;
55
- console.log("🚀 ~ MiniEditor ~ mentions:", mentions);
56
54
  const chars = type ? Shorthands[type]({
57
55
  ...mentions,
58
56
  CHARACTERS
@@ -1,5 +1,6 @@
1
1
  const editorStyles = ({
2
- padHeight
2
+ padHeight,
3
+ placeHolderColor
3
4
  }) => ({
4
5
  root: {
5
6
  display: "flex",
@@ -82,6 +83,76 @@ const editorStyles = ({
82
83
  width: "24px !important",
83
84
  height: "24px !important"
84
85
  }
86
+ },
87
+ "& .ed-section-wrapper": {
88
+ display: "flex",
89
+ width: "100%",
90
+ justifyContent: "center",
91
+ alignItems: "center",
92
+ position: "relative",
93
+ "&:hover": {
94
+ "& .ed-section-inner": {
95
+ "& .element-toolbar.ss": {
96
+ display: "block",
97
+ left: "8px",
98
+ top: "8px",
99
+ width: "fit-content"
100
+ }
101
+ },
102
+ "&:before": {
103
+ display: "block"
104
+ }
105
+ },
106
+ "& .ed-section-inner": {
107
+ maxWidth: "1440px",
108
+ "& .element-toolbar.ss": {
109
+ display: "none"
110
+ }
111
+ },
112
+ "&:before": {
113
+ content: '" "',
114
+ position: "absolute",
115
+ width: "calc(100% - 2px)",
116
+ height: "calc(100% - 2px)",
117
+ left: 0,
118
+ top: 0,
119
+ border: "1px solid #2563eb",
120
+ pointerEvents: "none",
121
+ display: "none"
122
+ }
123
+ },
124
+ "& .element-empty-btn": {
125
+ backgroundColor: "rgb(242, 241, 238)",
126
+ color: "rgba(55, 53, 47, 0.65)",
127
+ outline: 0,
128
+ border: 0,
129
+ padding: "16px 12px",
130
+ width: "100%",
131
+ cursor: "pointer",
132
+ display: "flex",
133
+ alignItems: "center",
134
+ justifyContent: "center",
135
+ borderRadius: "12px",
136
+ "& svg": {
137
+ marginRight: "8px"
138
+ }
139
+ },
140
+ "& .content-editable.empty": {
141
+ "&:after": {
142
+ color: placeHolderColor
143
+ }
144
+ },
145
+ "& .checkbox-edit": {
146
+ "& .MuiFormControlLabel-root": {
147
+ marginRight: "0px"
148
+ },
149
+ "& .MuiCheckbox-root": {
150
+ padding: "5px",
151
+ "& svg": {
152
+ width: "20px",
153
+ height: "20px"
154
+ }
155
+ }
85
156
  }
86
157
  }
87
158
  });
@@ -38,9 +38,10 @@ const TextSize = ({
38
38
  });
39
39
  };
40
40
  const onDecreaseSize = () => {
41
+ const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
41
42
  addMarkData(editor, {
42
43
  format,
43
- value: `${combinedOldVal - 1 || 0}px`
44
+ value: `${newVal}px`
44
45
  });
45
46
  };
46
47
  return /*#__PURE__*/_jsx(_Fragment, {