@flozy/editor 3.9.6 → 3.9.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. package/dist/Editor/ChatEditor.js +45 -55
  2. package/dist/Editor/CommonEditor.js +2 -3
  3. package/dist/Editor/Editor.css +3 -14
  4. package/dist/Editor/Elements/Accordion/Accordion.js +8 -76
  5. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +64 -24
  7. package/dist/Editor/Elements/Embed/Image.js +21 -29
  8. package/dist/Editor/Elements/Embed/Video.js +11 -15
  9. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  10. package/dist/Editor/Elements/Form/Form.js +1 -1
  11. package/dist/Editor/Elements/Grid/Grid.js +13 -6
  12. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -5
  13. package/dist/Editor/Elements/Table/Table.js +1 -1
  14. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  15. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -25
  16. package/dist/Editor/common/ColorPickerButton.js +4 -12
  17. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
  18. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  19. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +8 -9
  20. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -26
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -6
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
  25. package/dist/Editor/helper/deserialize/index.js +9 -14
  26. package/dist/Editor/helper/index.js +0 -22
  27. package/dist/Editor/helper/theme.js +1 -2
  28. package/dist/Editor/hooks/useMouseMove.js +1 -0
  29. package/dist/Editor/plugins/withHTML.js +4 -46
  30. package/dist/Editor/plugins/withLayout.js +10 -15
  31. package/dist/Editor/plugins/withTable.js +1 -1
  32. package/dist/Editor/utils/SlateUtilityFunctions.js +8 -2
  33. package/dist/Editor/utils/draftToSlate.js +1 -1
  34. package/dist/Editor/utils/events.js +4 -11
  35. package/dist/Editor/utils/helper.js +12 -43
  36. package/package.json +2 -2
  37. package/dist/Editor/common/EditorCmds.js +0 -35
@@ -1,6 +1,6 @@
1
1
  import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
2
2
  import { Editable, Slate, ReactEditor } from 'slate-react';
3
- import { createEditor, Transforms, Editor } from 'slate';
3
+ import { createEditor, Transforms } from 'slate';
4
4
  import { useDebounce } from "use-debounce";
5
5
  import withCommon from "./hooks/withCommon";
6
6
  import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,12 +31,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
31
31
  } = props;
32
32
  const classes = usePopupStyle(theme);
33
33
  const convertedContent = draftToSlate({
34
- data: content && content?.length > 0 ? content : [{
35
- type: 'paragraph',
36
- children: [{
37
- text: ''
38
- }]
39
- }]
34
+ data: content
40
35
  });
41
36
  const [isInteracted, setIsInteracted] = useState(false);
42
37
  const [value, setValue] = useState(convertedContent);
@@ -52,62 +47,57 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
52
47
  useImperativeHandle(ref, () => ({
53
48
  emojiClick: emoji => {
54
49
  if (editor) {
55
- ReactEditor.focus(editor);
56
50
  insertEmoji(editor, emoji?.native, editor.selection);
51
+ if (editor.selection) {
52
+ const path = editor.selection.anchor.path;
53
+ const offset = editor.selection.anchor.offset + emoji?.native.length;
54
+ const position = {
55
+ anchor: {
56
+ path: [0],
57
+ offset: 0
58
+ },
59
+ focus: {
60
+ path: [0],
61
+ offset: 0
62
+ }
63
+ };
64
+ // Create a new selection
65
+ Transforms.select(editor, position);
66
+ }
57
67
  ReactEditor.focus(editor);
58
68
  }
59
69
  },
60
- submitChat: () => {
61
- const {
62
- value: strVal,
63
- ...restVal
64
- } = getOnSaveData(value);
65
- onsubmit(false, {
66
- strVal,
67
- restVal
68
- });
70
+ setContent: newContent => {
71
+ setIsExternalUpdate(true);
72
+ setValue(newContent);
73
+ ReactEditor.focus(editor);
69
74
  },
70
75
  // Focus enable
71
- enableFocus: () => {
72
- if (editor) {
73
- const position = {
74
- anchor: {
75
- path: [0],
76
- offset: 0
77
- },
78
- focus: {
79
- path: [0],
80
- offset: 0
81
- }
82
- };
83
- Transforms.select(editor, position);
84
- ReactEditor.focus(editor);
85
- }
86
- },
87
- clearAll: (content = null, clear = true) => {
76
+ // enableFocus: () => {
77
+ // if (editor) {
78
+ // const position = {
79
+ // anchor: { path: [0], offset: 0 },
80
+ // focus: { path: [0], offset: 0 },
81
+ // };
82
+ // Transforms.select(editor, position);
83
+ // ReactEditor.focus(editor);
84
+ // }
85
+ // },
86
+
87
+ clearAll: () => {
88
88
  if (!editor) return;
89
- try {
90
- if (clear) {
91
- while (editor.children.length > 0) {
92
- Transforms.removeNodes(editor, {
93
- at: [0]
94
- });
95
- }
96
- }
97
- const newValue = draftToSlate({
98
- data: content
89
+ while (editor.children.length > 0) {
90
+ Transforms.removeNodes(editor, {
91
+ at: [0]
99
92
  });
100
- setValue(newValue);
101
- setTimeout(() => {
102
- if (editor.children.length === 0) {
103
- Transforms.insertNodes(editor, newValue);
104
- }
105
- Transforms.select(editor, Editor.end(editor, []));
106
- ReactEditor.focus(editor);
107
- }, 300);
108
- } catch {
109
- console.log("error:");
110
93
  }
94
+ Transforms.insertNodes(editor, {
95
+ type: 'paragraph',
96
+ children: [{
97
+ text: ''
98
+ }]
99
+ });
100
+ ReactEditor.focus(editor);
111
101
  }
112
102
  }));
113
103
  useEffect(() => {
@@ -115,7 +105,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
115
105
  setValue(draftToSlate({
116
106
  data: content
117
107
  }));
118
- }, [content]);
108
+ }, [id, content]);
119
109
  useEffect(() => {
120
110
  if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
121
111
  const {
@@ -29,7 +29,7 @@ import Section from "./common/Section";
29
29
  import "animate.css";
30
30
  import decorators from "./utils/Decorators";
31
31
  import { getTRBLBreakPoints } from "./helper/theme";
32
- import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
32
+ import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
33
33
  import useWindowResize from "./hooks/useWindowResize";
34
34
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
35
35
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -319,8 +319,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
319
319
  } else if (isCtrlKey) {
320
320
  commands({
321
321
  event,
322
- editor,
323
- needLayout
322
+ editor
324
323
  });
325
324
  } else if (event.key === "Tab") {
326
325
  event.preventDefault();
@@ -106,7 +106,7 @@ blockquote {
106
106
  }
107
107
 
108
108
  .grid-container {
109
- display: flex;
109
+ /* display: flex;
110
110
  border-radius: 0px;
111
111
  background-color: transparent;
112
112
  border: 0px solid #e5eaf2;
@@ -114,7 +114,7 @@ blockquote {
114
114
  position: relative;
115
115
  flex-wrap: wrap;
116
116
  background-repeat: no-repeat;
117
- background-size: cover;
117
+ background-size: cover; */
118
118
  }
119
119
 
120
120
  .grid-container-toolbar,
@@ -830,17 +830,6 @@ blockquote {
830
830
  text-align: center;
831
831
  }
832
832
 
833
- .removeScroll::-webkit-outer-spin-button,
834
- .removeScroll::-webkit-inner-spin-button {
835
- -webkit-appearance: none;
836
- margin: 0;
837
- }
838
-
839
- /* For Firefox */
840
- .removeScroll {
841
- -moz-appearance: textfield;
842
- }
843
-
844
833
  .borderInput:focus-visible {
845
834
  outline: none !important;
846
835
  }
@@ -890,7 +879,7 @@ blockquote {
890
879
  }
891
880
 
892
881
  .sliderInput {
893
- width: 30px;
882
+ width: 66px;
894
883
  padding: 2px 10px;
895
884
  margin-left: 18px;
896
885
  box-shadow: 0px 4px 16px 0px #0000000d;
@@ -7,58 +7,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
7
7
  import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import Icon from "../../common/Icon";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
- import ArrowRightIcon from "@mui/icons-material/ArrowRight";
11
10
  import { jsx as _jsx } from "react/jsx-runtime";
12
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
- const accordionBtnStyleKeys = {
14
- accordionTextColor: "textColor",
15
- accordionBgColor: "bgColor",
16
- accordionBorderColor: "borderColor"
17
- };
18
- const getAccordionData = updateData => {
19
- const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
20
- const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
21
-
22
- Object.entries(updateData).forEach(([key, value]) => {
23
- const accordionBtnStyleKey = accordionBtnStyleKeys[key];
24
- if (accordionBtnStyleKey) {
25
- // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
26
- accordionBtnStyle[accordionBtnStyleKey] = value;
27
- return;
28
- }
29
- accordionTitleStyle[key] = value;
30
- });
31
- return {
32
- accordionBtnStyle,
33
- accordionTitleStyle
34
- };
35
- };
36
- const convertAccordionBtnStyleKeys = (data = {}) => {
37
- const style = {
38
- ...data
39
- };
40
- Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
41
- const val = data[value];
42
- if (val) {
43
- // deleting the existing style key in node e.g: textColor
44
- delete style[value];
45
-
46
- // convertint into new key in element props e.g: accordionTextColor
47
- style[key] = val;
48
- }
49
- });
50
- return style;
51
- };
52
- const getElementProps = element => {
53
- const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
54
-
55
- // joining accordion title and button styles
56
- const elementProps = {
57
- ...accordionSummary,
58
- ...convertAccordionBtnStyleKeys(element)
59
- };
60
- return elementProps;
61
- };
62
12
  const Accordion = props => {
63
13
  const {
64
14
  attributes,
@@ -119,34 +69,16 @@ const Accordion = props => {
119
69
  at: path
120
70
  });
121
71
  };
122
- const setNodes = (data, path) => {
123
- Transforms.setNodes(editor, data, {
124
- at: path
125
- });
126
- };
127
72
  const onSave = data => {
128
73
  const updateData = {
129
74
  ...data
130
75
  };
131
- const {
132
- accordionBtnStyle,
133
- accordionTitleStyle
134
- } = getAccordionData(updateData);
135
-
136
- // applying accordion title style
137
- const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
138
- const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
139
- setNodes({
140
- ...accordionTitleStyle,
141
- type: "accordion-summary",
142
- children: accordionSummary.children
143
- }, accordionSummaryPath);
144
-
145
- // applying accordion button style
146
- delete accordionBtnStyle.children;
147
- setNodes({
148
- ...accordionBtnStyle
149
- }, path);
76
+ delete updateData.children;
77
+ Transforms.setNodes(editor, {
78
+ ...updateData
79
+ }, {
80
+ at: path
81
+ });
150
82
  onClose();
151
83
  };
152
84
  const onClose = () => {
@@ -161,7 +93,7 @@ const Accordion = props => {
161
93
  children: [/*#__PURE__*/_jsxs("div", {
162
94
  className: "accordion-title",
163
95
  style: {
164
- background: bgColor
96
+ backgroundColor: bgColor
165
97
  },
166
98
  onClick: onToggle,
167
99
  children: [/*#__PURE__*/_jsx(Box, {
@@ -191,7 +123,7 @@ const Accordion = props => {
191
123
  },
192
124
  children: children[1]
193
125
  }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
194
- element: getElementProps(element),
126
+ element: element,
195
127
  onSave: onSave,
196
128
  onClose: onClose,
197
129
  customProps: customProps
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
2
  import StyleBuilder from "../../common/StyleBuilder";
3
3
  import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
4
- import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  const AccordionBtnPopup = props => {
7
6
  const {
@@ -11,12 +10,12 @@ const AccordionBtnPopup = props => {
11
10
  customProps
12
11
  } = props;
13
12
  return /*#__PURE__*/_jsx(StyleBuilder, {
14
- title: "Accordion Settings",
13
+ title: "Accordion Collapse Button",
15
14
  type: "accordionTitleBtnStyle",
16
15
  element: element,
17
16
  onSave: onSave,
18
17
  onClose: onClose,
19
- renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
18
+ renderTabs: accordionTitleBtnStyle,
20
19
  customProps: customProps
21
20
  });
22
21
  };
@@ -1,43 +1,83 @@
1
- import React from "react";
2
- import { getBorderColor, getTextColor } from "../../helper";
3
- import { Box } from "@mui/material";
4
- import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
1
+ import React, { useState } from "react";
2
+ import { Transforms } from "slate";
3
+ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
+ import AccordionTitlePopup from "./AccordionTitlePopup";
5
+ import { IconButton, Tooltip } from "@mui/material";
6
+ import { GridSettingsIcon } from "../../common/iconslist";
7
+ import { useEditorSelection } from "../../hooks/useMouseMove";
5
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
10
  const AccordionSummary = props => {
7
11
  const {
8
12
  attributes,
9
13
  children,
10
- element
14
+ element,
15
+ customProps
11
16
  } = props;
17
+ const {
18
+ readOnly
19
+ } = customProps;
20
+ const [openSetttings, setOpenSettings] = useState(false);
21
+ const editor = useSlateStatic();
22
+ const [showTool] = useEditorSelection(editor);
23
+ const selected = useSelected();
24
+ const path = ReactEditor.findPath(editor, element);
12
25
  const {
13
26
  textColor,
14
27
  bgColor,
15
- borderColor,
16
- borderRadius,
17
- bannerSpacing
28
+ borderColor
18
29
  } = element;
19
- const textStyles = getTextColor(textColor);
20
- const borderStyle = getBorderColor(borderColor);
21
- return /*#__PURE__*/_jsx(Box, {
30
+ const ToolBar = () => {
31
+ return selected && !showTool ? /*#__PURE__*/_jsx("div", {
32
+ className: "element-toolbar hr",
33
+ contentEditable: false,
34
+ style: {
35
+ top: "-42px"
36
+ },
37
+ children: /*#__PURE__*/_jsx(Tooltip, {
38
+ title: "Settings",
39
+ arrow: true,
40
+ children: /*#__PURE__*/_jsx(IconButton, {
41
+ onClick: onSettings,
42
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
43
+ })
44
+ })
45
+ }) : null;
46
+ };
47
+ const onSettings = () => {
48
+ setOpenSettings(true);
49
+ };
50
+ const onSave = data => {
51
+ const updateData = {
52
+ ...data
53
+ };
54
+ delete updateData.children;
55
+ Transforms.setNodes(editor, {
56
+ ...updateData
57
+ }, {
58
+ at: path
59
+ });
60
+ onClose();
61
+ };
62
+ const onClose = () => {
63
+ setOpenSettings(false);
64
+ };
65
+ return /*#__PURE__*/_jsxs("div", {
22
66
  className: `accordion-summary-container`,
23
67
  ...attributes,
24
68
  style: {
25
69
  width: "100%",
26
70
  position: "relative",
27
- background: bgColor,
28
- ...borderStyle
29
- },
30
- sx: {
31
- borderRadius: {
32
- ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
33
- },
34
- padding: {
35
- ...getTRBLBreakPoints(bannerSpacing)
36
- },
37
- '& span[data-slate-string="true"]': textStyles
71
+ backgroundColor: bgColor,
72
+ border: `1px solid ${borderColor}`,
73
+ color: textColor
38
74
  },
39
- component: "div",
40
- children: children
75
+ children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
76
+ element: element,
77
+ onSave: onSave,
78
+ onClose: onClose,
79
+ customProps: customProps
80
+ }) : null]
41
81
  });
42
82
  };
43
83
  export default AccordionSummary;
@@ -167,19 +167,15 @@ const Image = ({
167
167
  onTouchEnd
168
168
  } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
169
169
  const handleImageClick = () => {
170
- try {
171
- Transforms.select(editor, {
172
- anchor: Editor.start(editor, path),
173
- focus: Editor.end(editor, path)
174
- });
175
- if (onClick) {
176
- onClick();
177
- }
178
- if (onTouchEnd) {
179
- onTouchEnd();
180
- }
181
- } catch (err) {
182
- console.log(err);
170
+ Transforms.select(editor, {
171
+ anchor: Editor.start(editor, path),
172
+ focus: Editor.end(editor, path)
173
+ });
174
+ if (onClick) {
175
+ onClick();
176
+ }
177
+ if (onTouchEnd) {
178
+ onTouchEnd();
183
179
  }
184
180
  };
185
181
  useEffect(() => {
@@ -193,20 +189,16 @@ const Image = ({
193
189
  setOpenSettings(true);
194
190
  };
195
191
  const onSave = data => {
196
- try {
197
- const updateData = {
198
- ...data
199
- };
200
- delete updateData.children;
201
- Transforms.setNodes(editor, {
202
- ...updateData
203
- }, {
204
- at: path
205
- });
206
- onClose();
207
- } catch (err) {
208
- console.log(err);
209
- }
192
+ const updateData = {
193
+ ...data
194
+ };
195
+ delete updateData.children;
196
+ Transforms.setNodes(editor, {
197
+ ...updateData
198
+ }, {
199
+ at: path
200
+ });
201
+ onClose();
210
202
  };
211
203
  const onClose = () => {
212
204
  setOpenSettings(false);
@@ -245,7 +237,7 @@ const Image = ({
245
237
  lg: "flex",
246
238
  xs: xsHidden ? "none" : "flex"
247
239
  },
248
- width: `100%`,
240
+ width: `100% !important`,
249
241
  maxWidth: "100%",
250
242
  padding: {
251
243
  ...getTRBLBreakPoints(bannerSpacing)
@@ -296,7 +288,7 @@ const Image = ({
296
288
  readOnly: readOnly,
297
289
  handleImageClick: handleImageClick
298
290
  })
299
- }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
291
+ }) : null, url && !readOnly && /*#__PURE__*/_jsx(IconButton, {
300
292
  onPointerDown: onMouseDown,
301
293
  style: {
302
294
  opacity: 1,
@@ -95,20 +95,16 @@ const Video = ({
95
95
  setOpenSettings(true);
96
96
  };
97
97
  const onSave = data => {
98
- try {
99
- const updateData = {
100
- ...data
101
- };
102
- delete updateData.children;
103
- Transforms.setNodes(editor, {
104
- ...updateData
105
- }, {
106
- at: path
107
- });
108
- onClose();
109
- } catch (err) {
110
- console.log(err);
111
- }
98
+ const updateData = {
99
+ ...data
100
+ };
101
+ delete updateData.children;
102
+ Transforms.setNodes(editor, {
103
+ ...updateData
104
+ }, {
105
+ at: path
106
+ });
107
+ onClose();
112
108
  };
113
109
  const onClose = () => {
114
110
  setOpenSettings(false);
@@ -191,7 +187,7 @@ const Video = ({
191
187
  flexDirection: "row",
192
188
  flexWrap: "wrap",
193
189
  // to support oldWidth with link
194
- width: `100%`,
190
+ width: `100% !important`,
195
191
  justifyContent: horizantal,
196
192
  alignContent: vertical
197
193
  },
@@ -4,14 +4,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { Fragment as _Fragment } from "react/jsx-runtime";
5
5
  const EmojiPicker = props => {
6
6
  const {
7
- onEmojiSelect,
8
- onClose
7
+ onEmojiSelect
9
8
  } = props;
10
9
  return /*#__PURE__*/_jsx(_Fragment, {
11
10
  children: /*#__PURE__*/_jsx(Picker, {
12
11
  data: data,
13
- onEmojiSelect: onEmojiSelect,
14
- onClickOutside: onClose
12
+ onEmojiSelect: onEmojiSelect
15
13
  })
16
14
  });
17
15
  };
@@ -119,7 +119,7 @@ const Form = props => {
119
119
  if (fieldData?.element === "email") {
120
120
  rule.push(`isEmail`);
121
121
  }
122
- if (fieldData?.required && fieldData?.element === "email") {
122
+ if (fieldData?.required || fieldData?.element === "email") {
123
123
  validations.push({
124
124
  name: pair[0],
125
125
  value: pair[1],
@@ -270,10 +270,10 @@ const Grid = props => {
270
270
  backgroundImage: `url(${backgroundImage})`
271
271
  } : {};
272
272
  const {
273
- topLeft,
274
- topRight,
275
- bottomLeft,
276
- bottomRight
273
+ topLeft = 0,
274
+ topRight = 0,
275
+ bottomLeft = 0,
276
+ bottomRight = 0
277
277
  } = getBreakPointsValue(borderRadius, size?.device) || {};
278
278
  return /*#__PURE__*/_jsxs(GridContainer, {
279
279
  container: true,
@@ -285,15 +285,22 @@ const Grid = props => {
285
285
  lg: "flex",
286
286
  xs: xsHidden ? "none" : "flex"
287
287
  },
288
- background: bgColor,
288
+ background: bgColor || "transparent",
289
289
  alignContent: vertical,
290
290
  ...bgImage,
291
291
  borderColor: borderColor || "transparent",
292
292
  borderWidth: borderWidth || "1px",
293
293
  borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
294
294
  borderStyle: borderStyle || "solid",
295
- height: "auto"
295
+ height: "auto",
296
+ backgroundRepeat: 'no-repeat',
297
+ backgroundSize: 'cover',
298
+ position: 'relative',
299
+ flexWrap: 'wrap',
300
+ padding: '0px'
301
+ // border: 0px solid #e5eaf2;
296
302
  },
303
+
297
304
  "data-path": path.join(","),
298
305
  children: [fgColor && /*#__PURE__*/_jsx("div", {
299
306
  style: {
@@ -11,9 +11,7 @@ const PageSettingsButton = props => {
11
11
  const {
12
12
  customProps,
13
13
  icoBtnType,
14
- from,
15
- closePopper,
16
- setToolTip
14
+ from
17
15
  } = props;
18
16
  const [openSetttings, setOpenSettings] = useState(false);
19
17
  const editor = useSlateStatic();
@@ -40,8 +38,6 @@ const PageSettingsButton = props => {
40
38
  }
41
39
  };
42
40
  const onClose = () => {
43
- closePopper(true);
44
- setToolTip(false);
45
41
  setOpenSettings(false);
46
42
  };
47
43
  return /*#__PURE__*/_jsxs(_Fragment, {
@@ -183,7 +183,7 @@ const Table = props => {
183
183
  children: [/*#__PURE__*/_jsx(TableComp, {
184
184
  sx: classes.table,
185
185
  style: {
186
- background: bgColor,
186
+ backgroundColor: bgColor,
187
187
  border: `1px solid ${borderColor}`,
188
188
  width: "auto"
189
189
  },
@@ -117,7 +117,7 @@ const TableCell = props => {
117
117
  className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
118
118
  style: {
119
119
  position: "relative",
120
- background: bgColor || entireBgColor,
120
+ backgroundColor: bgColor || entireBgColor,
121
121
  border: `3px solid ${cellBorderColor}`,
122
122
  ...(sizeProps || {})
123
123
  },