@flozy/editor 3.9.7 → 3.9.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/dist/Editor/ChatEditor.js +45 -55
  2. package/dist/Editor/CommonEditor.js +2 -3
  3. package/dist/Editor/Editor.css +2 -2
  4. package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
  5. package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
  6. package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
  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/FormatTools/TextSize.js +7 -24
  16. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -25
  17. package/dist/Editor/Toolbar/PopupTool/index.js +3 -2
  18. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
  19. package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
  20. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
  21. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
  23. package/dist/Editor/helper/deserialize/index.js +9 -14
  24. package/dist/Editor/hooks/useMouseMove.js +1 -0
  25. package/dist/Editor/plugins/withHTML.js +4 -46
  26. package/dist/Editor/plugins/withLayout.js +10 -15
  27. package/dist/Editor/plugins/withTable.js +1 -1
  28. package/dist/Editor/utils/draftToSlate.js +1 -1
  29. package/dist/Editor/utils/events.js +4 -11
  30. package/dist/Editor/utils/helper.js +12 -43
  31. package/package.json +1 -1
  32. 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,
@@ -9,55 +9,6 @@ import Icon from "../../common/Icon";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
- const accordionBtnStyleKeys = {
13
- accordionTextColor: "textColor",
14
- accordionBgColor: "bgColor",
15
- accordionBorderColor: "borderColor"
16
- };
17
- const getAccordionData = updateData => {
18
- const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
19
- const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
20
-
21
- Object.entries(updateData).forEach(([key, value]) => {
22
- const accordionBtnStyleKey = accordionBtnStyleKeys[key];
23
- if (accordionBtnStyleKey) {
24
- // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
25
- accordionBtnStyle[accordionBtnStyleKey] = value;
26
- return;
27
- }
28
- accordionTitleStyle[key] = value;
29
- });
30
- return {
31
- accordionBtnStyle,
32
- accordionTitleStyle
33
- };
34
- };
35
- const convertAccordionBtnStyleKeys = (data = {}) => {
36
- const style = {
37
- ...data
38
- };
39
- Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
40
- const val = data[value];
41
- if (val) {
42
- // deleting the existing style key in node e.g: textColor
43
- delete style[value];
44
-
45
- // convertint into new key in element props e.g: accordionTextColor
46
- style[key] = val;
47
- }
48
- });
49
- return style;
50
- };
51
- const getElementProps = element => {
52
- const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
53
-
54
- // joining accordion title and button styles
55
- const elementProps = {
56
- ...accordionSummary,
57
- ...convertAccordionBtnStyleKeys(element)
58
- };
59
- return elementProps;
60
- };
61
12
  const Accordion = props => {
62
13
  const {
63
14
  attributes,
@@ -118,34 +69,16 @@ const Accordion = props => {
118
69
  at: path
119
70
  });
120
71
  };
121
- const setNodes = (data, path) => {
122
- Transforms.setNodes(editor, data, {
123
- at: path
124
- });
125
- };
126
72
  const onSave = data => {
127
73
  const updateData = {
128
74
  ...data
129
75
  };
130
- const {
131
- accordionBtnStyle,
132
- accordionTitleStyle
133
- } = getAccordionData(updateData);
134
-
135
- // applying accordion title style
136
- const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
137
- const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
138
- setNodes({
139
- ...accordionTitleStyle,
140
- type: "accordion-summary",
141
- children: accordionSummary.children
142
- }, accordionSummaryPath);
143
-
144
- // applying accordion button style
145
- delete accordionBtnStyle.children;
146
- setNodes({
147
- ...accordionBtnStyle
148
- }, path);
76
+ delete updateData.children;
77
+ Transforms.setNodes(editor, {
78
+ ...updateData
79
+ }, {
80
+ at: path
81
+ });
149
82
  onClose();
150
83
  };
151
84
  const onClose = () => {
@@ -190,7 +123,7 @@ const Accordion = props => {
190
123
  },
191
124
  children: children[1]
192
125
  }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
193
- element: getElementProps(element),
126
+ element: element,
194
127
  onSave: onSave,
195
128
  onClose: onClose,
196
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,17 +1,68 @@
1
- import React from "react";
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";
2
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
10
  const AccordionSummary = props => {
4
11
  const {
5
12
  attributes,
6
13
  children,
7
- element
14
+ element,
15
+ customProps
8
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);
9
25
  const {
10
26
  textColor,
11
27
  bgColor,
12
28
  borderColor
13
29
  } = element;
14
- return /*#__PURE__*/_jsx("div", {
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", {
15
66
  className: `accordion-summary-container`,
16
67
  ...attributes,
17
68
  style: {
@@ -21,7 +72,12 @@ const AccordionSummary = props => {
21
72
  border: `1px solid ${borderColor}`,
22
73
  color: textColor
23
74
  },
24
- 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]
25
81
  });
26
82
  };
27
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
  },
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef, useState } from "react";
1
+ import React from "react";
2
2
  import { TextField, IconButton } from "@mui/material";
3
3
  import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
4
4
  import { headingMap, sizeMap } from "../../utils/font.js";
@@ -18,11 +18,6 @@ const TextSize = ({
18
18
  const [size] = useWindowResize();
19
19
  const val = activeMark(editor, format);
20
20
  const value = getBreakPointsValue(val, size?.device);
21
- const [fontSize, setFontSize] = useState();
22
- const timerRef = useRef();
23
- useEffect(() => {
24
- setFontSize(getSizeVal());
25
- }, [value]);
26
21
  const updateMarkData = newVal => {
27
22
  let upData = {
28
23
  ...getBreakPointsValue(val),
@@ -44,14 +39,10 @@ const TextSize = ({
44
39
  }
45
40
  });
46
41
  };
47
- const onChangeSize = value => {
48
- if (value) {
49
- let inc = parseInt(value);
50
- inc = inc > 200 ? 200 : inc;
51
- updateMarkData(inc);
52
- } else {
53
- setFontSize(null);
54
- }
42
+ const onChangeSize = e => {
43
+ let inc = parseInt(e.target.value) || 8;
44
+ inc = inc > 200 ? 200 : inc;
45
+ updateMarkData(inc || 8);
55
46
  };
56
47
  const getSizeVal = () => {
57
48
  try {
@@ -76,19 +67,11 @@ const TextSize = ({
76
67
  const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
77
68
  updateMarkData(newVal);
78
69
  };
79
- const onChange = e => {
80
- clearTimeout(timerRef.current);
81
- const value = e.target.value;
82
- setFontSize(value);
83
- timerRef.current = setTimeout(() => {
84
- onChangeSize(value);
85
- }, 500);
86
- };
87
70
  return /*#__PURE__*/_jsx(_Fragment, {
88
71
  children: /*#__PURE__*/_jsx(TextField, {
89
72
  sx: classes?.textSize,
90
- value: fontSize,
91
- onChange: onChange,
73
+ value: combinedOldVal,
74
+ onChange: onChangeSize,
92
75
  size: "small",
93
76
  inputProps: {
94
77
  style: {
@@ -9,7 +9,6 @@ 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";
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
14
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
14
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -48,23 +47,12 @@ const MiniToolbar = props => {
48
47
  const {
49
48
  popupType
50
49
  } = 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]);
59
50
  useEffect(() => {
60
51
  if (popper) {
61
52
  setPopper(null);
62
53
  }
63
54
  }, [editor.selection]);
64
55
  const handleClick = type => e => {
65
- if (type === "page-settings") {
66
- setToolTip(true);
67
- }
68
56
  setPopper(type);
69
57
  setAnchorEl(e.currentTarget);
70
58
  };
@@ -78,10 +66,6 @@ const MiniToolbar = props => {
78
66
  const onSearch = e => {
79
67
  setSearch(e?.target?.value || "");
80
68
  };
81
- const closePopper = data => {
82
- setData(data);
83
- setToolTip("false");
84
- };
85
69
  return /*#__PURE__*/_jsxs(_Fragment, {
86
70
  children: [/*#__PURE__*/_jsx(Box, {
87
71
  component: "div",
@@ -97,19 +81,11 @@ const MiniToolbar = props => {
97
81
  return /*#__PURE__*/_jsx(Tooltip, {
98
82
  arrow: true,
99
83
  title: label,
100
- disableHoverListener: toolTip,
101
84
  children: /*#__PURE__*/_jsx(IconButton, {
102
85
  className: type === popper ? "active" : "",
103
86
  onClick: handleClick(type),
104
87
  disabled: isDisabled,
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, {
88
+ children: /*#__PURE__*/_jsx(Icon, {
113
89
  from: "miniToolBar",
114
90
  icoBtnType: "mini",
115
91
  customProps: customProps,
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
3
3
  import { Editor, Range } from "slate";
4
- import { useSlate } from "slate-react";
4
+ import { useSlate, useFocused } from "slate-react";
5
5
  import useDrag from "../../hooks/useDrag";
6
6
  import { TableUtil } from "../../utils/table";
7
7
  import useWindowResize from "../../hooks/useWindowResize";
@@ -23,6 +23,7 @@ const PopupTool = props => {
23
23
  const [anchorEl, setAnchorEl] = useState(null);
24
24
  const [open, setOpen] = useState(false);
25
25
  const editor = useSlate();
26
+ const inFocus = useFocused();
26
27
  const {
27
28
  selection
28
29
  } = editor;
@@ -46,7 +47,7 @@ const PopupTool = props => {
46
47
  }
47
48
  }, [event, anchorEl]);
48
49
  useEffect(() => {
49
- if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
50
+ if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
50
51
  setAnchorEl(null);
51
52
  } else {
52
53
  updateAnchorEl();
@@ -39,12 +39,7 @@ const MentionsListCard = props => {
39
39
  },
40
40
  alt: name,
41
41
  children: /*#__PURE__*/_jsx(Avatar, {
42
- sx: {
43
- background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
44
- },
45
- alt: name,
46
- src: avatar_filename,
47
- children: !avatar_filename && name && name.charAt(0).toUpperCase()
42
+ src: avatar_filename
48
43
  })
49
44
  }), /*#__PURE__*/_jsx(Box, {
50
45
  sx: {
@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
39
39
  color: theme?.palette?.editor?.textColor
40
40
  },
41
41
  "&.active": {
42
- background: `#2563EB2B`,
43
- "& .MuiTypography-root": {
44
- color: `${theme?.palette?.editor?.activeColor} !important`
45
- }
42
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
46
43
  },
47
44
  "&:hover": {
48
- background: theme?.palette?.action?.hover || `#F4F4F4`
45
+ background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
49
46
  },
50
47
  "&.renderComp": {
51
48
  padding: "0px",
@@ -1,18 +1,18 @@
1
1
  const accordionTitleBtnStyle = [{
2
2
  tab: "Colors",
3
- value: "accordionColor",
3
+ value: "colors",
4
4
  fields: [{
5
- label: "Accordion Color",
6
- key: "accordionTextColor",
5
+ label: "Text Color",
6
+ key: "textColor",
7
7
  type: "color",
8
8
  needPreview: true
9
9
  }, {
10
- label: "Accordion Background Color",
11
- key: "accordionBgColor",
10
+ label: "Background Color",
11
+ key: "bgColor",
12
12
  type: "color"
13
13
  }, {
14
- label: "Accordion Border Color",
15
- key: "accordionBorderColor",
14
+ label: "Border Color",
15
+ key: "borderColor",
16
16
  type: "color"
17
17
  }]
18
18
  }];
@@ -1,4 +1,20 @@
1
1
  const accordionTitleStyle = [{
2
+ tab: "Banner Spacing",
3
+ value: "bannerSpacing",
4
+ fields: [{
5
+ label: "Banner Spacing",
6
+ key: "bannerSpacing",
7
+ type: "bannerSpacing"
8
+ }]
9
+ }, {
10
+ tab: "Border Radius",
11
+ value: "borderRadius",
12
+ fields: [{
13
+ label: "Border Radius",
14
+ key: "borderRadius",
15
+ type: "borderRadius"
16
+ }]
17
+ }, {
2
18
  tab: "Colors",
3
19
  value: "colors",
4
20
  fields: [{
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
15
31
  key: "borderColor",
16
32
  type: "color"
17
33
  }]
18
- }, {
19
- tab: "Banner Spacing",
20
- value: "bannerSpacing",
21
- fields: [{
22
- label: "Banner Spacing",
23
- key: "bannerSpacing",
24
- type: "bannerSpacing"
25
- }]
26
- }, {
27
- tab: "Border Radius",
28
- value: "borderRadius",
29
- fields: [{
30
- label: "Border Radius",
31
- key: "borderRadius",
32
- type: "borderRadius"
33
- }]
34
34
  }];
35
35
  export default accordionTitleStyle;
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState, useRef } from "react";
1
+ import React from "react";
2
2
  import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,23 +6,12 @@ const SelectBox = props => {
6
6
  const {
7
7
  value,
8
8
  data,
9
- onChange,
10
- elementProps
9
+ onChange
11
10
  } = props;
12
11
  const {
13
12
  key,
14
13
  placeholder
15
14
  } = data;
16
- const [checkedValue, setCheckedValue] = useState(false);
17
- const isFirstRender = useRef(true);
18
- useEffect(() => {
19
- if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
20
- setCheckedValue(true);
21
- isFirstRender.current = false;
22
- } else {
23
- setCheckedValue(value);
24
- }
25
- }, [elementProps.element, value]);
26
15
  const handleChange = e => {
27
16
  onChange({
28
17
  [key]: e.target.checked
@@ -37,7 +26,7 @@ const SelectBox = props => {
37
26
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
38
27
  control: /*#__PURE__*/_jsx(Checkbox, {
39
28
  value: value,
40
- checked: checkedValue,
29
+ checked: value,
41
30
  onChange: handleChange
42
31
  }),
43
32
  label: placeholder
@@ -72,20 +72,15 @@ const ELEMENT_TAGS = {
72
72
  type: "paragraph"
73
73
  }),
74
74
  TABLE: (el, children = []) => {
75
- try {
76
- const tableBody = (children || [])?.find(f => f?.type === "table-body");
77
- const bodyChild = tableBody?.children || [];
78
- const firstRowChildren = tableBody[0]?.children || [];
79
- return {
80
- type: "table",
81
- overwriteChild: bodyChild,
82
- // we are not having table-body in our json format, just we are wrapping table-row's inside the table
83
- rows: bodyChild?.length,
84
- columns: firstRowChildren?.length
85
- };
86
- } catch (err) {
87
- console.log(err);
88
- }
75
+ const bodyChild = children[0]?.children || [];
76
+ const firstRowChildren = bodyChild[0]?.children || [];
77
+ return {
78
+ type: "table",
79
+ overwriteChild: bodyChild,
80
+ // we are not having table-body in our json format, just we are wrapping table-row's inside the table
81
+ rows: bodyChild?.length,
82
+ columns: firstRowChildren?.length
83
+ };
89
84
  },
90
85
  THEAD: () => ({
91
86
  type: "table-head"
@@ -75,6 +75,7 @@ const useMouseMove = () => {
75
75
  }, []);
76
76
  const onMouseMove = e => {
77
77
  const dpath = e?.target?.closest(".dpath");
78
+ console.log(dpath);
78
79
  if (dpath) {
79
80
  console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
80
81
  setEvent({
@@ -1,4 +1,4 @@
1
- import { Transforms, Editor, Element, Node, Path } from "slate";
1
+ import { Transforms, Editor, Element, Node } from "slate";
2
2
  import deserialize from "../helper/deserialize";
3
3
  import { decodeAndParseBase64 } from "../utils/helper";
4
4
  const avoidDefaultInsert = ["table", "grid"];
@@ -26,48 +26,6 @@ const getCurrentElement = editor => {
26
26
  return null;
27
27
  }
28
28
  };
29
- const getCurrentElementText = editor => {
30
- try {
31
- if (editor.selection) {
32
- return Editor.string(editor, editor?.selection?.anchor?.path);
33
- } else {
34
- return null;
35
- }
36
- } catch (err) {
37
- return null;
38
- }
39
- };
40
- const insertAtNextNode = (editor, formattedFragment) => {
41
- try {
42
- const {
43
- selection
44
- } = editor;
45
- if (selection) {
46
- const parentPath = Path.parent(editor?.selection?.anchor?.path);
47
- const nextPath = Path.next(parentPath);
48
- Transforms.insertNodes(editor, {
49
- type: "paragraph",
50
- children: [{
51
- text: ""
52
- }]
53
- }, {
54
- at: nextPath
55
- });
56
- Transforms.insertFragment(editor, formattedFragment, {
57
- at: nextPath
58
- });
59
- }
60
- } catch (err) {
61
- console.log(err);
62
- }
63
- };
64
- const handleInsert = (editor, defaultInsert, fragment = []) => {
65
- if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
66
- insertAtNextNode(editor, fragment);
67
- } else {
68
- defaultInsert();
69
- }
70
- };
71
29
  const formatFragment = {
72
30
  "list-item": fragment => {
73
31
  let refactorFragment = [];
@@ -106,11 +64,11 @@ const withHtml = editor => {
106
64
  const currentEl = getCurrentElement(editor);
107
65
  const eltype = currentEl?.type;
108
66
  if (slateHTML && !formatFragment[eltype]) {
109
- const decoded = decodeAndParseBase64(slateHTML);
110
67
  const [tableNode] = Editor.nodes(editor, {
111
68
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
112
69
  });
113
70
  if (tableNode && tableNode[0]) {
71
+ const decoded = decodeAndParseBase64(slateHTML);
114
72
  const defaultInsert = loopChildren(decoded, true);
115
73
  if (defaultInsert) {
116
74
  insertData(data);
@@ -121,7 +79,7 @@ const withHtml = editor => {
121
79
  Transforms.insertText(editor, text);
122
80
  }
123
81
  } else {
124
- handleInsert(editor, () => insertData(data), decoded);
82
+ insertData(data);
125
83
  }
126
84
  } else if (html) {
127
85
  const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -138,7 +96,7 @@ const withHtml = editor => {
138
96
  }
139
97
  const fragment = deserialize(parsed.body);
140
98
  const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
141
- handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
99
+ Transforms.insertFragment(editor, formattedFragment);
142
100
  return;
143
101
  } else {
144
102
  insertData(data);
@@ -32,21 +32,16 @@ const withLayout = editor => {
32
32
  editor.normalizeNode = ([node, path]) => {
33
33
  if (path.length === 0) {
34
34
  if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
35
- const {
36
- anchor
37
- } = editor?.selection || {};
38
- if (anchor?.offset !== 0) {
39
- const title = {
40
- type: "title",
41
- children: [{
42
- text: "Untitled"
43
- }]
44
- };
45
- Transforms.insertNodes(editor, title, {
46
- at: path.concat(0),
47
- select: true
48
- });
49
- }
35
+ const title = {
36
+ type: "title",
37
+ children: [{
38
+ text: "Untitled"
39
+ }]
40
+ };
41
+ Transforms.insertNodes(editor, title, {
42
+ at: path.concat(0),
43
+ select: true
44
+ });
50
45
  }
51
46
  if (editor.children.length === 0) {
52
47
  const paragraph = {
@@ -8,7 +8,7 @@ const withTable = editor => {
8
8
  delete: slateDelete
9
9
  } = editor;
10
10
  editor.delete = arg => {
11
- if (arg?.reverse) {
11
+ if (arg.reverse) {
12
12
  const table = new TableUtil(editor);
13
13
  const cellsSelected = table.isCellSelected(editor.selection);
14
14
  if (cellsSelected && cellsSelected.length > 1) {
@@ -100,7 +100,7 @@ export const draftToSlate = props => {
100
100
  return a;
101
101
  }, []);
102
102
  return converted;
103
- } else if (data?.length > 0) {
103
+ } else if (data?.length) {
104
104
  return data;
105
105
  } else {
106
106
  return [{
@@ -3,7 +3,6 @@ import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
5
  import { isListItem } from "./helper";
6
- import EDITORCMDS from "../common/EditorCmds";
7
6
  const HOTKEYS = {
8
7
  b: "bold",
9
8
  i: "italic",
@@ -64,8 +63,7 @@ export const commands = props => {
64
63
  try {
65
64
  const {
66
65
  event,
67
- editor,
68
- needLayout
66
+ editor
69
67
  } = props;
70
68
  if (HOTKEYS[event.key]) {
71
69
  event.preventDefault();
@@ -75,11 +73,6 @@ export const commands = props => {
75
73
  } else {
76
74
  Editor.addMark(editor, HOTKEYS[event.key], true);
77
75
  }
78
- } else if (EDITORCMDS[event.key]) {
79
- EDITORCMDS[event.key](event, {
80
- editor,
81
- needLayout
82
- });
83
76
  }
84
77
  } catch (err) {
85
78
  console.log(err);
@@ -103,7 +96,7 @@ export const indentation = props => {
103
96
  Transforms.wrapNodes(editor, {
104
97
  type: listItem.type,
105
98
  children: [{
106
- text: ""
99
+ text: ''
107
100
  }]
108
101
  });
109
102
  } else {
@@ -160,7 +153,7 @@ const checkListEnterEvent = (editor, type) => {
160
153
  Transforms.insertNodes(editor, {
161
154
  type: "check-list-item",
162
155
  children: [{
163
- text: ""
156
+ text: ''
164
157
  }]
165
158
  }, {
166
159
  at: newPath
@@ -169,7 +162,7 @@ const checkListEnterEvent = (editor, type) => {
169
162
  // focus on the end of the line
170
163
  Transforms.move(editor, {
171
164
  distance: 1,
172
- unit: "line"
165
+ unit: 'line'
173
166
  });
174
167
  } else {
175
168
  toggleBlock(editor, type);
@@ -216,17 +216,6 @@ const getScrollElement = () => {
216
216
  const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
217
217
  return scrollFrom;
218
218
  };
219
- const handleLinkBtnClick = (e, props) => {
220
- if (e) {
221
- e.preventDefault();
222
- e.stopPropagation();
223
- }
224
- if (props.target) {
225
- window.open(props.href);
226
- } else {
227
- window.location.href = props.href;
228
- }
229
- };
230
219
  export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
231
220
  const props = {};
232
221
  if (!readOnly) {
@@ -317,22 +306,23 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
317
306
 
318
307
  // for iphone fix
319
308
  if (props.component === "a" && props.href) {
320
- const isMobile = getDevice(window.innerWidth) === "xs";
321
- if (isMobile) {
309
+ if (getDevice(window.innerWidth) === "xs") {
322
310
  props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
323
311
  }
324
312
 
325
- let touchEndClicked = false;
326
313
  props.onTouchEnd = e => {
327
- touchEndClicked = true;
328
- handleLinkBtnClick(e, props);
329
- };
330
- props.onClick = e => {
331
- // This condition is used for mobile preview in the page editor.
332
- // 'touchEnd' will not work in the mobile page preview.
333
- if (!touchEndClicked && isMobile) {
334
- handleLinkBtnClick(e, props);
314
+ if (e) {
315
+ // onTouchEnd will get triggered on web, only for image element, for that case event is getting undefined.
316
+ e.preventDefault();
317
+ e.stopPropagation();
335
318
  }
319
+ if (props.target) {
320
+ window.open(props.href);
321
+ } else {
322
+ window.location.href = props.href;
323
+ }
324
+ };
325
+ props.onClick = () => {
336
326
  return false;
337
327
  };
338
328
  }
@@ -377,25 +367,4 @@ export const decodeString = str => {
377
367
  } catch (err) {
378
368
  console.log(err);
379
369
  }
380
- };
381
- export const onDeleteKey = (event, {
382
- editor
383
- }) => {
384
- try {
385
- const {
386
- selection
387
- } = editor;
388
- if (selection) {
389
- // If text is selected, delete the selection
390
- Transforms.delete(editor);
391
- } else {
392
- // If no text is selected, handle deleting the next character/element
393
- Transforms.delete(editor, {
394
- unit: "character",
395
- reverse: false
396
- });
397
- }
398
- } catch (err) {
399
- console.log(err);
400
- }
401
370
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.9.7",
3
+ "version": "3.9.8",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -1,35 +0,0 @@
1
- import { Editor, Transforms } from "slate";
2
- const selectAll = (event, {
3
- editor,
4
- needLayout
5
- }) => {
6
- try {
7
- if (needLayout) {
8
- event.preventDefault();
9
- // Select the entire document
10
- const {
11
- selection
12
- } = editor;
13
- const [firstNode] = Editor.nodes(editor, {
14
- at: [0]
15
- }); // First node
16
- const [lastNode] = Editor.nodes(editor, {
17
- at: [editor.children.length - 1]
18
- }); // Last node
19
-
20
- if (firstNode && lastNode) {
21
- Transforms.select(editor, {
22
- anchor: Editor.start(editor, [0]),
23
- // Start at the first node
24
- focus: Editor.end(editor, [editor.children.length - 1]) // End at the last node
25
- });
26
- }
27
- }
28
- } catch (err) {
29
- console.log(err);
30
- }
31
- };
32
- const EDITORCMDS = {
33
- a: selectAll
34
- };
35
- export default EDITORCMDS;