@flozy/editor 3.9.4 → 3.9.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/Editor/ChatEditor.js +55 -45
  2. package/dist/Editor/CommonEditor.js +3 -2
  3. package/dist/Editor/Editor.css +12 -1
  4. package/dist/Editor/Elements/Accordion/Accordion.js +76 -8
  5. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +3 -2
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +24 -64
  7. package/dist/Editor/Elements/Embed/Image.js +27 -19
  8. package/dist/Editor/Elements/Embed/Video.js +14 -10
  9. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  10. package/dist/Editor/Elements/Form/Form.js +1 -1
  11. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
  12. package/dist/Editor/Elements/Table/Table.js +1 -1
  13. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  14. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +25 -1
  15. package/dist/Editor/common/ColorPickerButton.js +12 -4
  16. package/dist/Editor/common/EditorCmds.js +35 -0
  17. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
  18. package/dist/Editor/common/MentionsPopup/Styles.js +5 -2
  19. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +9 -8
  20. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +26 -20
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +6 -4
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
  25. package/dist/Editor/helper/deserialize/index.js +14 -9
  26. package/dist/Editor/helper/index.js +22 -0
  27. package/dist/Editor/helper/theme.js +2 -1
  28. package/dist/Editor/hooks/useMouseMove.js +0 -1
  29. package/dist/Editor/plugins/withHTML.js +46 -4
  30. package/dist/Editor/plugins/withLayout.js +15 -10
  31. package/dist/Editor/plugins/withTable.js +1 -1
  32. package/dist/Editor/utils/SlateUtilityFunctions.js +2 -8
  33. package/dist/Editor/utils/draftToSlate.js +1 -1
  34. package/dist/Editor/utils/events.js +11 -4
  35. package/dist/Editor/utils/helper.js +43 -12
  36. package/package.json +1 -1
@@ -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 } from 'slate';
3
+ import { createEditor, Transforms, Editor } 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,7 +31,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
31
31
  } = props;
32
32
  const classes = usePopupStyle(theme);
33
33
  const convertedContent = draftToSlate({
34
- data: content
34
+ data: content && content?.length > 0 ? content : [{
35
+ type: 'paragraph',
36
+ children: [{
37
+ text: ''
38
+ }]
39
+ }]
35
40
  });
36
41
  const [isInteracted, setIsInteracted] = useState(false);
37
42
  const [value, setValue] = useState(convertedContent);
@@ -47,57 +52,62 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
47
52
  useImperativeHandle(ref, () => ({
48
53
  emojiClick: emoji => {
49
54
  if (editor) {
55
+ ReactEditor.focus(editor);
50
56
  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
- }
67
57
  ReactEditor.focus(editor);
68
58
  }
69
59
  },
70
- setContent: newContent => {
71
- setIsExternalUpdate(true);
72
- setValue(newContent);
73
- ReactEditor.focus(editor);
60
+ submitChat: () => {
61
+ const {
62
+ value: strVal,
63
+ ...restVal
64
+ } = getOnSaveData(value);
65
+ onsubmit(false, {
66
+ strVal,
67
+ restVal
68
+ });
74
69
  },
75
70
  // Focus enable
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: () => {
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) => {
88
88
  if (!editor) return;
89
- while (editor.children.length > 0) {
90
- Transforms.removeNodes(editor, {
91
- at: [0]
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
92
99
  });
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:");
93
110
  }
94
- Transforms.insertNodes(editor, {
95
- type: 'paragraph',
96
- children: [{
97
- text: ''
98
- }]
99
- });
100
- ReactEditor.focus(editor);
101
111
  }
102
112
  }));
103
113
  useEffect(() => {
@@ -105,7 +115,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
105
115
  setValue(draftToSlate({
106
116
  data: content
107
117
  }));
108
- }, [id, content]);
118
+ }, [content]);
109
119
  useEffect(() => {
110
120
  if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
111
121
  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, outsideEditorClickLabel } from "./utils/helper";
32
+ import { handleInsertLastElement, onDeleteKey, 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,7 +319,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
319
319
  } else if (isCtrlKey) {
320
320
  commands({
321
321
  event,
322
- editor
322
+ editor,
323
+ needLayout
323
324
  });
324
325
  } else if (event.key === "Tab") {
325
326
  event.preventDefault();
@@ -830,6 +830,17 @@ 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
+
833
844
  .borderInput:focus-visible {
834
845
  outline: none !important;
835
846
  }
@@ -879,7 +890,7 @@ blockquote {
879
890
  }
880
891
 
881
892
  .sliderInput {
882
- width: 66px;
893
+ width: 30px;
883
894
  padding: 2px 10px;
884
895
  margin-left: 18px;
885
896
  box-shadow: 0px 4px 16px 0px #0000000d;
@@ -7,8 +7,58 @@ 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";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  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
+ };
12
62
  const Accordion = props => {
13
63
  const {
14
64
  attributes,
@@ -69,16 +119,34 @@ const Accordion = props => {
69
119
  at: path
70
120
  });
71
121
  };
122
+ const setNodes = (data, path) => {
123
+ Transforms.setNodes(editor, data, {
124
+ at: path
125
+ });
126
+ };
72
127
  const onSave = data => {
73
128
  const updateData = {
74
129
  ...data
75
130
  };
76
- delete updateData.children;
77
- Transforms.setNodes(editor, {
78
- ...updateData
79
- }, {
80
- at: path
81
- });
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);
82
150
  onClose();
83
151
  };
84
152
  const onClose = () => {
@@ -93,7 +161,7 @@ const Accordion = props => {
93
161
  children: [/*#__PURE__*/_jsxs("div", {
94
162
  className: "accordion-title",
95
163
  style: {
96
- backgroundColor: bgColor
164
+ background: bgColor
97
165
  },
98
166
  onClick: onToggle,
99
167
  children: [/*#__PURE__*/_jsx(Box, {
@@ -123,7 +191,7 @@ const Accordion = props => {
123
191
  },
124
192
  children: children[1]
125
193
  }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
126
- element: element,
194
+ element: getElementProps(element),
127
195
  onSave: onSave,
128
196
  onClose: onClose,
129
197
  customProps: customProps
@@ -1,6 +1,7 @@
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";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const AccordionBtnPopup = props => {
6
7
  const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
10
11
  customProps
11
12
  } = props;
12
13
  return /*#__PURE__*/_jsx(StyleBuilder, {
13
- title: "Accordion Collapse Button",
14
+ title: "Accordion Settings",
14
15
  type: "accordionTitleBtnStyle",
15
16
  element: element,
16
17
  onSave: onSave,
17
18
  onClose: onClose,
18
- renderTabs: accordionTitleBtnStyle,
19
+ renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
19
20
  customProps: customProps
20
21
  });
21
22
  };
@@ -1,83 +1,43 @@
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";
1
+ import React from "react";
2
+ import { getBorderColor, getTextColor } from "../../helper";
3
+ import { Box } from "@mui/material";
4
+ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
8
5
  import { jsx as _jsx } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
6
  const AccordionSummary = props => {
11
7
  const {
12
8
  attributes,
13
9
  children,
14
- element,
15
- customProps
10
+ element
16
11
  } = 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);
25
12
  const {
26
13
  textColor,
27
14
  bgColor,
28
- borderColor
15
+ borderColor,
16
+ borderRadius,
17
+ bannerSpacing
29
18
  } = element;
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", {
19
+ const textStyles = getTextColor(textColor);
20
+ const borderStyle = getBorderColor(borderColor);
21
+ return /*#__PURE__*/_jsx(Box, {
66
22
  className: `accordion-summary-container`,
67
23
  ...attributes,
68
24
  style: {
69
25
  width: "100%",
70
26
  position: "relative",
71
- backgroundColor: bgColor,
72
- border: `1px solid ${borderColor}`,
73
- color: textColor
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
74
38
  },
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]
39
+ component: "div",
40
+ children: children
81
41
  });
82
42
  };
83
43
  export default AccordionSummary;
@@ -167,15 +167,19 @@ const Image = ({
167
167
  onTouchEnd
168
168
  } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
169
169
  const handleImageClick = () => {
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();
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);
179
183
  }
180
184
  };
181
185
  useEffect(() => {
@@ -189,16 +193,20 @@ const Image = ({
189
193
  setOpenSettings(true);
190
194
  };
191
195
  const onSave = data => {
192
- const updateData = {
193
- ...data
194
- };
195
- delete updateData.children;
196
- Transforms.setNodes(editor, {
197
- ...updateData
198
- }, {
199
- at: path
200
- });
201
- onClose();
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
+ }
202
210
  };
203
211
  const onClose = () => {
204
212
  setOpenSettings(false);
@@ -95,16 +95,20 @@ const Video = ({
95
95
  setOpenSettings(true);
96
96
  };
97
97
  const onSave = data => {
98
- const updateData = {
99
- ...data
100
- };
101
- delete updateData.children;
102
- Transforms.setNodes(editor, {
103
- ...updateData
104
- }, {
105
- at: path
106
- });
107
- onClose();
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
+ }
108
112
  };
109
113
  const onClose = () => {
110
114
  setOpenSettings(false);
@@ -4,12 +4,14 @@ 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
7
+ onEmojiSelect,
8
+ onClose
8
9
  } = props;
9
10
  return /*#__PURE__*/_jsx(_Fragment, {
10
11
  children: /*#__PURE__*/_jsx(Picker, {
11
12
  data: data,
12
- onEmojiSelect: onEmojiSelect
13
+ onEmojiSelect: onEmojiSelect,
14
+ onClickOutside: onClose
13
15
  })
14
16
  });
15
17
  };
@@ -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],
@@ -11,7 +11,9 @@ const PageSettingsButton = props => {
11
11
  const {
12
12
  customProps,
13
13
  icoBtnType,
14
- from
14
+ from,
15
+ closePopper,
16
+ setToolTip
15
17
  } = props;
16
18
  const [openSetttings, setOpenSettings] = useState(false);
17
19
  const editor = useSlateStatic();
@@ -38,6 +40,8 @@ const PageSettingsButton = props => {
38
40
  }
39
41
  };
40
42
  const onClose = () => {
43
+ closePopper(true);
44
+ setToolTip(false);
41
45
  setOpenSettings(false);
42
46
  };
43
47
  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
- backgroundColor: bgColor,
186
+ background: 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
- backgroundColor: bgColor || entireBgColor,
120
+ background: bgColor || entireBgColor,
121
121
  border: `3px solid ${cellBorderColor}`,
122
122
  ...(sizeProps || {})
123
123
  },
@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
9
9
  import usePopupStyle from "../PopupTool/PopupToolStyle";
10
10
  import PopperHeader from "../PopupTool/PopperHeader";
11
11
  import { useEditorContext } from "../../hooks/useMouseMove";
12
+ import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,12 +48,23 @@ const MiniToolbar = props => {
47
48
  const {
48
49
  popupType
49
50
  } = useEditorContext();
51
+ const [toolTip, setToolTip] = useState(false);
52
+ const [data, setData] = useState(null);
53
+ useEffect(() => {
54
+ if (data) {
55
+ setToolTip(false);
56
+ setData(null);
57
+ }
58
+ }, [data]);
50
59
  useEffect(() => {
51
60
  if (popper) {
52
61
  setPopper(null);
53
62
  }
54
63
  }, [editor.selection]);
55
64
  const handleClick = type => e => {
65
+ if (type === "page-settings") {
66
+ setToolTip(true);
67
+ }
56
68
  setPopper(type);
57
69
  setAnchorEl(e.currentTarget);
58
70
  };
@@ -66,6 +78,10 @@ const MiniToolbar = props => {
66
78
  const onSearch = e => {
67
79
  setSearch(e?.target?.value || "");
68
80
  };
81
+ const closePopper = data => {
82
+ setData(data);
83
+ setToolTip("false");
84
+ };
69
85
  return /*#__PURE__*/_jsxs(_Fragment, {
70
86
  children: [/*#__PURE__*/_jsx(Box, {
71
87
  component: "div",
@@ -81,11 +97,19 @@ const MiniToolbar = props => {
81
97
  return /*#__PURE__*/_jsx(Tooltip, {
82
98
  arrow: true,
83
99
  title: label,
100
+ disableHoverListener: toolTip,
84
101
  children: /*#__PURE__*/_jsx(IconButton, {
85
102
  className: type === popper ? "active" : "",
86
103
  onClick: handleClick(type),
87
104
  disabled: isDisabled,
88
- children: /*#__PURE__*/_jsx(Icon, {
105
+ children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
106
+ from: "miniToolBar",
107
+ icoBtnType: "mini",
108
+ customProps: customProps,
109
+ editor: editor,
110
+ closePopper: closePopper,
111
+ setToolTip: setToolTip
112
+ }) : /*#__PURE__*/_jsx(Icon, {
89
113
  from: "miniToolBar",
90
114
  icoBtnType: "mini",
91
115
  customProps: customProps,