@flozy/editor 5.6.1 → 5.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/Editor/CommonEditor.js +8 -14
  2. package/dist/Editor/Editor.css +14 -13
  3. package/dist/Editor/Elements/Button/EditorButton.js +1 -3
  4. package/dist/Editor/Elements/Form/Form.js +0 -1
  5. package/dist/Editor/Elements/FreeGrid/styles.js +0 -1
  6. package/dist/Editor/Elements/List/CheckList.js +1 -2
  7. package/dist/Editor/Elements/Search/SearchAttachment.js +2 -3
  8. package/dist/Editor/Elements/SimpleText/index.js +1 -8
  9. package/dist/Editor/Elements/SimpleText/style.js +1 -5
  10. package/dist/Editor/Styles/EditorStyles.js +3 -0
  11. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +3 -13
  12. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +0 -10
  13. package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
  14. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
  15. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  16. package/dist/Editor/common/MentionsPopup/Styles.js +0 -1
  17. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
  18. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
  19. package/dist/Editor/common/RnD/Utils/gridDropItem.js +7 -26
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  23. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
  24. package/dist/Editor/common/Uploader.js +0 -8
  25. package/dist/Editor/commonStyle.js +4 -4
  26. package/dist/Editor/helper/index.js +2 -2
  27. package/dist/Editor/helper/theme.js +1 -24
  28. package/dist/Editor/hooks/useMouseMove.js +2 -5
  29. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -8
  30. package/dist/Editor/utils/button.js +4 -4
  31. package/dist/Editor/utils/helper.js +16 -19
  32. package/dist/Editor/utils/pageSettings.js +2 -14
  33. package/package.json +1 -1
  34. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
26
26
  import DragAndDrop from "./common/DnD";
27
27
  import Section from "./common/Section";
28
28
  import decorators from "./utils/Decorators";
29
- import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
29
+ import { getTRBLBreakPoints } from "./helper/theme";
30
30
  import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
31
31
  import useWindowResize from "./hooks/useWindowResize";
32
32
  import PopoverAIInput from "./Elements/AI/PopoverAIInput";
@@ -139,8 +139,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
139
139
  pageColor,
140
140
  color: pageTextColor,
141
141
  pageWidth,
142
- maxWidth: pageMaxWidth,
143
- lineHeight
142
+ maxWidth: pageMaxWidth
144
143
  } = pageSt?.pageProps || {
145
144
  bannerSpacing: {
146
145
  left: 0,
@@ -308,13 +307,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
308
307
  hideTools: updatedHideTools || []
309
308
  }) : [];
310
309
  const handleEditorChange = newValue => {
311
- if (!readOnly) {
312
- if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
313
- updateTopBanner(newValue, setTopBanner);
314
- debounced(newValue);
315
- if (!isInteracted) {
316
- setIsInteracted(true);
317
- }
310
+ if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
311
+ updateTopBanner(newValue, setTopBanner);
312
+ debounced(newValue);
313
+ if (!isInteracted) {
314
+ setIsInteracted(true);
318
315
  }
319
316
  }
320
317
  };
@@ -333,7 +330,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
333
330
  onDrawerOpen: onDrawerOpen,
334
331
  ICON_API: "https://assets.agenciflow.com"
335
332
  };
336
- const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
337
333
  const renderElement = useCallback(props => {
338
334
  return /*#__PURE__*/_jsx(Element, {
339
335
  ...props,
@@ -536,7 +532,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
536
532
  padding: {
537
533
  ...getTRBLBreakPoints(bannerSpacing)
538
534
  },
539
- lineHeight: lineH,
540
535
  width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
541
536
  height: viewport.h ? `${viewport.h}px` : `100%`,
542
537
  alignSelf: "center",
@@ -597,9 +592,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
597
592
  setIsTextSelected: setIsTextSelected,
598
593
  customProps: customProps,
599
594
  editorWrapper: editorWrapper
600
- }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
595
+ }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
601
596
  breakpoint: breakpoint,
602
- show: showViewport,
603
597
  onChange: b => onSwitchBreakpoint(b)
604
598
  }) : null]
605
599
  })
@@ -1257,19 +1257,6 @@ blockquote {
1257
1257
  pointer-events: auto;
1258
1258
  }
1259
1259
 
1260
- @media (max-width: 899px) {
1261
- .MuiPopover-root {
1262
- z-index: 1302 !important;
1263
- }
1264
- canvas {
1265
- max-width: 100% !important;
1266
- }
1267
- }
1268
-
1269
- .settingsHeader {
1270
- font-size: 14px !important;
1271
- font-weight: 500 !important;
1272
- }
1273
1260
  .hideScroll {
1274
1261
  overflow-anchor: none;
1275
1262
  }
@@ -1285,6 +1272,20 @@ blockquote {
1285
1272
  .hideScroll::-webkit-scrollbar-thumb:hover {
1286
1273
  background: none !important;
1287
1274
  }
1275
+ @media (max-width: 899px) {
1276
+ .MuiPopover-root {
1277
+ z-index: 1302 !important;
1278
+ }
1279
+
1280
+ canvas {
1281
+ max-width: 100% !important;
1282
+ }
1283
+ }
1284
+
1285
+ .settingsHeader {
1286
+ font-size: 14px !important;
1287
+ font-weight: 500 !important;
1288
+ }
1288
1289
 
1289
1290
  .custom-scroll::-webkit-scrollbar {
1290
1291
  height: .6rem;
@@ -162,7 +162,6 @@ const EditorButton = props => {
162
162
  display: "inline-flex",
163
163
  color: "rgba(0, 0, 0, 0.54)",
164
164
  marginBottom: "0px !important",
165
- ...classes.buttonMoreOption,
166
165
  ...classes.buttonMoreOption3
167
166
  },
168
167
  ...btnProps,
@@ -265,12 +264,11 @@ const EditorButton = props => {
265
264
  ...btnSp,
266
265
  borderStyle: borderStyle || "solid",
267
266
  color: `${textColor || "#FFFFFF"}`,
268
- fontSize: textSize || "12px",
267
+ fontSize: textSize || "inherit",
269
268
  fontFamily: fontFamily || "PoppinsRegular",
270
269
  display: "inline-flex",
271
270
  alignItems: "center",
272
271
  position: "relative",
273
- lineHeight: 1.43,
274
272
  "& .element-toolbar": {
275
273
  display: "none"
276
274
  },
@@ -402,7 +402,6 @@ const Form = props => {
402
402
  borderStyle: borderStyle || "solid",
403
403
  background: bgColor || "transparent",
404
404
  position: "relative",
405
- lineHeight: 1.43,
406
405
  ...formSX
407
406
  },
408
407
  ref: formEle,
@@ -171,7 +171,6 @@ const useFreeGridStyles = ({
171
171
  height: "100%",
172
172
  "& .signature-container": {
173
173
  height: "100%",
174
- LineHeight: 1.43,
175
174
  "& .signature-btn-container": {
176
175
  height: "100%",
177
176
  display: "flex",
@@ -39,8 +39,7 @@ const CheckList = ({
39
39
  display: "flex",
40
40
  justifyContent: "center",
41
41
  alignItems: "center",
42
- ...(style || {}),
43
- lineHeight: 1.43
42
+ ...(style || {})
44
43
  },
45
44
  children: [/*#__PURE__*/_jsxs("div", {
46
45
  contentEditable: false,
@@ -44,12 +44,11 @@ const SearchAttachment = props => {
44
44
  maxWidth: '250px',
45
45
  padding: "0px 10px",
46
46
  boxShadow: "none",
47
- border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
47
+ border: `1px solid ${theme?.palette?.primary?.slashBrainBorder} !important`,
48
48
  borderRadius: "7px !important",
49
- background: theme?.palette?.containers?.slashBrainCardBg,
49
+ background: `${theme?.palette?.containers?.slashBrainCardBg} !important`,
50
50
  cursor: 'pointer',
51
51
  margin: '4px 0px',
52
- lineHeight: 1.43,
53
52
  "&.MuiPaper-root.MuiPaper-rounded": {
54
53
  borderRadius: "7px !important",
55
54
  paddingTop: '0px !important'
@@ -5,7 +5,6 @@ import { getPageSettings } from "../../utils/pageSettings";
5
5
  import { isTextSelected } from "../../utils/helper";
6
6
  import { useEditorContext } from "../../hooks/useMouseMove";
7
7
  import SimpleTextStyle from "./style";
8
- import { getBreakpointLineSpacing } from "../../helper/theme";
9
8
  import { jsx as _jsx } from "react/jsx-runtime";
10
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
11
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,14 +33,8 @@ const SimpleText = props => {
34
33
  const {
35
34
  pageColor
36
35
  } = pageSt?.pageProps || {};
37
- const {
38
- activeBreakPoint
39
- } = useEditorContext();
40
- const lineHeight = element?.children[0]?.lineHeight;
41
- const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
42
36
  const classes = SimpleTextStyle({
43
- pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
44
- lineHeight: lineH
37
+ pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
45
38
  });
46
39
  const selected = useSelected();
47
40
  const path = ReactEditor.findPath(editor, element);
@@ -1,12 +1,10 @@
1
1
  import { invertColor } from "../../helper";
2
2
  const SimpleTextStyle = ({
3
- pageColor,
4
- lineHeight
3
+ pageColor
5
4
  }) => ({
6
5
  root: {
7
6
  position: "relative",
8
7
  padding: "0px",
9
- lineHeight: lineHeight,
10
8
  "&.dataView": {
11
9
  "& .placeholder-simple-text": {
12
10
  opacity: 0
@@ -35,8 +33,6 @@ const SimpleTextStyle = ({
35
33
  height: "24px",
36
34
  overflow: "hidden",
37
35
  fontSize: "14px",
38
- display: "inline-flex",
39
- alignItems: "center",
40
36
  "& .bg-pad-sl": {
41
37
  padding: "2px 4px 2px 4px",
42
38
  background: "transparent",
@@ -301,6 +301,9 @@ const editorStyles = ({
301
301
  "& .editor-wrapper": {
302
302
  paddingTop: '20px'
303
303
  },
304
+ "& .MuiDialog-paper, & .MuiPopover-paper": {
305
+ background: `${theme?.palette?.editor?.background} !important`
306
+ },
304
307
  "& .MuiPaper-root": {
305
308
  borderRadius: "0px !important",
306
309
  "& .MuiDialogTitle-root": {
@@ -98,22 +98,12 @@ const AddTemplates = props => {
98
98
  setCategory(newValue);
99
99
  setFilteredTemplates(templates.filter(f => f.category === newValue));
100
100
  };
101
- const onSelectTemplate = card => async () => {
101
+ const onSelectTemplate = card => () => {
102
102
  try {
103
- const {
104
- data
105
- } = await services("templateContent", {
106
- id: card?.id
107
- });
108
- const content = data?.content;
109
- if (content) {
110
- editor.insertNode(JSON.parse(content));
111
- } else {
112
- console.log("No data found");
113
- }
103
+ editor.insertNode(JSON.parse(card.content));
114
104
  onClose();
115
105
  } catch (err) {
116
- console.log("Error inserting template content into editor:", err);
106
+ console.log(err);
117
107
  }
118
108
  };
119
109
  const filterByTitle = f => {
@@ -185,11 +185,6 @@ const usePopupStyle = theme => ({
185
185
  justifyContent: "start",
186
186
  borderRadius: "10px !important",
187
187
  transition: "background-color 0.3s ease",
188
- // "& .colorBoxElementIcon": {
189
- // "& path": {
190
- // fill: theme?.palette?.type === "dark" ? "none" : "",
191
- // },
192
- // },
193
188
  "& .signatureElementIcon": {
194
189
  "& path": {
195
190
  fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
@@ -416,11 +411,6 @@ const usePopupStyle = theme => ({
416
411
  "& .MuiOutlinedInput-notchedOutline": {
417
412
  border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
418
413
  },
419
- '& .MuiInputBase-root': {
420
- '& input': {
421
- border: "none !important"
422
- }
423
- },
424
414
  "& svg": {
425
415
  width: "20px",
426
416
  height: "24px"
@@ -47,7 +47,7 @@ const TemplateCard = props => {
47
47
  }), /*#__PURE__*/_jsx(CardMedia, {
48
48
  className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
49
49
  component: "div",
50
- image: m?.compressedThum || m?.thumbnail,
50
+ image: m?.thumbnail,
51
51
  alt: m?.title,
52
52
  sx: classes.templateCardMedia
53
53
  }), /*#__PURE__*/_jsx(PreviewAndSelect, {
@@ -14,8 +14,6 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
14
14
  import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
15
15
  import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
16
16
  import { useEditorContext } from "../../hooks/useMouseMove";
17
- import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
18
- import { getPageSettings } from "../../utils/pageSettings";
19
17
  import { jsx as _jsx } from "react/jsx-runtime";
20
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
19
  const allTools = toolbarGroups.flat();
@@ -33,18 +31,10 @@ const TextFormat = props => {
33
31
  const [anchorEl, setAnchorEl] = useState(null);
34
32
  const [type, setType] = useState(null);
35
33
  const open = Boolean(anchorEl);
36
- const {
37
- element: pageSt
38
- } = getPageSettings(editor) || {};
39
- const pageSettingLine = pageSt?.pageProps?.lineHeight;
40
34
  const {
41
35
  fontFamilies,
42
36
  theme
43
37
  } = useEditorContext();
44
- const {
45
- activeBreakPoint
46
- } = useEditorContext();
47
- const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
48
38
  const fontWeight = allTools.find(f => f.format === "fontWeight");
49
39
  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
50
40
  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -61,8 +51,6 @@ const TextFormat = props => {
61
51
  color: "",
62
52
  bgColor: ""
63
53
  };
64
- let lineSpacingValue = activeMark(editor, 'lineHeight');
65
- lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
66
54
  const handleColorPicker = type => e => {
67
55
  setType(type);
68
56
  setAnchorEl(e.currentTarget);
@@ -103,13 +91,6 @@ const TextFormat = props => {
103
91
  value
104
92
  });
105
93
  };
106
- const handleLineSpacing = data => {
107
- const [[format, value]] = Object.entries(data);
108
- addMarkData(editor, {
109
- format,
110
- value
111
- });
112
- };
113
94
  return /*#__PURE__*/_jsxs(Grid, {
114
95
  container: true,
115
96
  sx: classes.textFormatWrapper,
@@ -379,32 +360,6 @@ const TextFormat = props => {
379
360
  xs: 12,
380
361
  sx: classes.dividerGrid,
381
362
  children: /*#__PURE__*/_jsx(Divider, {})
382
- }), /*#__PURE__*/_jsxs(Grid, {
383
- item: true,
384
- xs: 12,
385
- children: [/*#__PURE__*/_jsx(Typography, {
386
- variant: "body1",
387
- color: "primary",
388
- sx: classes.typoLabel,
389
- children: "Line Spacing"
390
- }), /*#__PURE__*/_jsx(Grid, {
391
- item: true,
392
- xs: 12,
393
- className: "typo-icons",
394
- sx: classes.evenSpace,
395
- children: /*#__PURE__*/_jsx(LineSpacing, {
396
- value: lineSpacingValue,
397
- onChange: handleLineSpacing,
398
- data: {
399
- key: 'lineHeight'
400
- }
401
- })
402
- })]
403
- }), /*#__PURE__*/_jsx(Grid, {
404
- item: true,
405
- xs: 12,
406
- sx: classes.dividerGrid,
407
- children: /*#__PURE__*/_jsx(Divider, {})
408
363
  }), /*#__PURE__*/_jsx(Grid, {
409
364
  item: true,
410
365
  xs: 12,
@@ -41,9 +41,9 @@ const FontLoader = props => {
41
41
  // Retry loading the same batch
42
42
  loadNextBatch();
43
43
  } else {
44
- // console.log(
45
- // `Max retries reached for batch: ${batch}. Moving to the next batch.`
46
- // );
44
+ console.log(
45
+ // `Max retries reached for batch: ${batch}. Moving to the next batch.`
46
+ );
47
47
  currentIndex += batchSize;
48
48
  retryCount = 0; // Reset retry count for the next batch
49
49
  loadNextBatch();
@@ -67,7 +67,7 @@ const FontLoader = props => {
67
67
  });
68
68
  loadFontsInBatches(families);
69
69
  }).catch(err => {
70
- // console.log(err);
70
+ console.log(err);
71
71
  });
72
72
  } else {
73
73
  function correctFontArray(fontString) {
@@ -3,7 +3,6 @@ const usePopupStyles = theme => ({
3
3
  position: "absolute",
4
4
  zIndex: 1300,
5
5
  borderRadius: "10px",
6
- // padding: "0px",
7
6
  boxShadow: "0px 4px 10px 0px #00000029",
8
7
  overflow: "hidden",
9
8
  // padding: "8px 0px !important",
@@ -62,7 +62,6 @@ const FormSettings = props => {
62
62
  MuiAccordion: {
63
63
  styleOverrides: {
64
64
  root: {
65
- background: theme?.palette?.editor?.miniToolBarBackground,
66
65
  "& .MuiAccordionSummary-root": {
67
66
  flexDirection: "row-reverse",
68
67
  "& .MuiSvgIcon-root": {
@@ -3,35 +3,24 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
3
3
  import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
4
4
  import useSwitchViewport from "./styles";
5
5
  import { useEffect } from "react";
6
- import { useEditorContext } from "../../../hooks/useMouseMove";
7
6
  import { jsx as _jsx } from "react/jsx-runtime";
8
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
8
  const SwitchViewport = props => {
10
9
  const {
11
10
  breakpoint,
12
- onChange,
13
- show
11
+ onChange
14
12
  } = props;
15
13
  const classes = useSwitchViewport();
16
- const {
17
- setSelectedElement,
18
- setActiveBreakPoint
19
- } = useEditorContext();
20
14
  useEffect(() => {
21
- // to reset selection on viewport changes - FS-6589
22
- setSelectedElement({});
15
+ console.log(breakpoint);
23
16
  }, [breakpoint]);
24
17
  return /*#__PURE__*/_jsxs(Box, {
25
18
  sx: classes.root,
26
- style: {
27
- display: show ? "block" : "none"
28
- },
29
19
  children: [/*#__PURE__*/_jsx(Tooltip, {
30
20
  title: "Desktop View",
31
21
  children: /*#__PURE__*/_jsx(IconButton, {
32
22
  className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
33
23
  onClick: () => {
34
- setActiveBreakPoint("");
35
24
  onChange("");
36
25
  },
37
26
  children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -41,7 +30,6 @@ const SwitchViewport = props => {
41
30
  children: /*#__PURE__*/_jsx(IconButton, {
42
31
  className: `${breakpoint === "xs" ? "active" : ""}`,
43
32
  onClick: () => {
44
- setActiveBreakPoint("xs");
45
33
  onChange("xs");
46
34
  },
47
35
  children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
@@ -1,6 +1,5 @@
1
1
  import { Transforms, Node, Path } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
- import { handleNegativeInteger } from "../../../utils/helper";
4
3
  export const ROW_HEIGHT = 50;
5
4
  const MARGIN_OF = {
6
5
  xs: 160,
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
76
75
  console.log(err);
77
76
  }
78
77
  };
79
- function isContainerElement(editor, moveTopath, props, appenBp) {
78
+ function isContainerElement(editor, moveTopath, props) {
80
79
  try {
81
80
  const {
82
81
  path,
@@ -92,32 +91,21 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
92
91
  parentNode = Node.get(editor, Path.parent(dragItemPath));
93
92
  }
94
93
  const moveToNode = Node.get(editor, moveTopath);
95
- const leftOfMoveToNode = moveToNode[`left${appenBp}`];
96
94
  if (moveToNode.type === "freegridBox") {
97
95
  if (parentNode.type === "freegridBox") {
98
96
  // same box
99
97
  if (parentPath === dragOver) {
100
98
  return props.calX;
101
99
  } else {
102
- const moveToDom = ReactEditor.toDOMNode(editor, moveToNode);
103
- const {
104
- left
105
- } = moveToDom?.getBoundingClientRect() || {};
106
- const borderLeftWidth = getBorderWidth(moveToDom, "borderLeftWidth");
107
-
108
100
  // for different box
109
- return parseInt(props.x - props.diffX - left - borderLeftWidth);
101
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
110
102
  }
111
103
  } else {
112
- return props.calX - leftOfMoveToNode;
104
+ return props.calX - moveToNode?.left;
113
105
  }
114
106
  } else if (moveToNode.type === "freegrid") {
115
107
  if (parentNode.type === "freegridBox") {
116
- const boundaryLineEle = document.querySelector(".rnd-guideline-lv");
117
- const {
118
- left
119
- } = boundaryLineEle?.getBoundingClientRect() || {};
120
- return parseInt(props.x - props.diffX - left);
108
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
121
109
  } else {
122
110
  return props.calX;
123
111
  }
@@ -145,17 +133,14 @@ export function onDropItem(props, parentClass) {
145
133
  const from = parentPath.split("|").map(m => parseInt(m));
146
134
  let newPath = [];
147
135
  newPath = moveTo;
148
- const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
149
- const cCalx = isContainerElement(editor, moveTo, props, appenBp);
150
-
136
+ const cCalx = isContainerElement(editor, moveTo, props);
151
137
  // const posX = parseInt(
152
138
  // cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
153
139
  // );
154
140
  const toSectionNode = Node.get(editor, newPath);
155
141
  const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
156
- const borderTopWidth = getBorderWidth(addToSectionDOM, "borderTopWidth");
157
142
  const rect = addToSectionDOM.getBoundingClientRect();
158
- const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top - borderTopWidth);
143
+ const y = endPosition.y - startPosition.diffY - rect.top;
159
144
 
160
145
  // Calculate grid position
161
146
  const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -165,6 +150,7 @@ export function onDropItem(props, parentClass) {
165
150
 
166
151
  // Update grid area
167
152
  const gridArea = `${row} / 1 / ${row + 1} / 2`;
153
+ const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
168
154
  Transforms.setNodes(editor, {
169
155
  [`gridArea${appenBp}`]: gridArea,
170
156
  [`left${appenBp}`]: cCalx,
@@ -202,9 +188,4 @@ export function onDropItem(props, parentClass) {
202
188
  export function calculateGridArea(y) {
203
189
  const row = Math.floor(y / ROW_HEIGHT) + 1;
204
190
  return `${row} / 1 / ${row + 1} / 2`;
205
- }
206
- export function getBorderWidth(dom, property) {
207
- const styles = getComputedStyle(dom);
208
- const borderWidth = parseFloat(styles[property]);
209
- return borderWidth;
210
191
  }
@@ -73,11 +73,6 @@ const BackgroundImage = props => {
73
73
  children: "REMOVE"
74
74
  }) : /*#__PURE__*/_jsx(Grid, {
75
75
  className: "uploadImageText",
76
- sx: {
77
- padding: 0,
78
- background: `${theme?.palette?.editor?.inputFieldBgColor}`,
79
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
80
- },
81
76
  children: /*#__PURE__*/_jsxs(Button, {
82
77
  component: "label",
83
78
  variant: "text",
@@ -1,7 +1,6 @@
1
1
  import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
2
2
  import React from "react";
3
3
  import Icon from "../../Icon";
4
- import { useEditorContext } from "../../../hooks/useMouseMove";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { Fragment as _Fragment } from "react/jsx-runtime";
7
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
16
15
  return /*#__PURE__*/_jsx(Card, {
17
16
  sx: {
18
17
  position: 'relative',
19
- padding: "10px",
20
- '& .MuiCheckbox-root svg': {
21
- fill: 'unset !important'
22
- }
18
+ padding: "10px"
23
19
  },
24
20
  children: /*#__PURE__*/_jsx(FormControlLabel, {
25
21
  control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
85
81
  selectedCard,
86
82
  infoIcon
87
83
  } = data;
88
- const {
89
- theme
90
- } = useEditorContext();
91
84
  const activeCard = value === selectedCard;
92
85
  const handleChange = e => {
93
86
  if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
106
99
  sx: {
107
100
  marginBottom: "12px",
108
101
  "& .MuiPaper-root": {
109
- background: theme?.palette?.editor?.miniToolBarBackground,
110
- border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
102
+ border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
111
103
  borderRadius: "8px",
112
104
  boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
113
105
  }
@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
18
18
  import SelectSwitch from "./selectSwitch";
19
19
  import CardsMapping from "./card";
20
20
  import MetaDataMapping from "./metaDataMapping";
21
- import LineSpacing from "./lineSpacing";
22
21
  const FieldMap = {
23
22
  text: Text,
24
23
  bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
39
38
  fontSize: FontSize,
40
39
  selectSwitch: SelectSwitch,
41
40
  card: CardsMapping,
42
- metadatamapping: MetaDataMapping,
43
- lineSpacing: LineSpacing
41
+ metadatamapping: MetaDataMapping
44
42
  };
45
43
  export default FieldMap;
@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
25
25
  label: "Padding",
26
26
  key: "bannerSpacing",
27
27
  type: "bannerSpacing"
28
- }, {
29
- label: "Line Spacing",
30
- key: "lineHeight",
31
- type: "lineSpacing"
32
28
  }]
33
29
  }, {
34
30
  tab: "Max Width",
@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
- import { useEditorContext } from "../hooks/useMouseMove";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,9 +18,6 @@ const Uploader = props => {
19
18
  const [base64, setBase64] = useState(value?.url);
20
19
  const [fileName, setFileName] = useState("");
21
20
  const [uploading, setUploading] = useState(false);
22
- const {
23
- theme
24
- } = useEditorContext();
25
21
  const handleChange = async e => {
26
22
  const uFile = e.target.files[0];
27
23
  const strImage = await convertBase64(uFile);
@@ -103,10 +99,6 @@ const Uploader = props => {
103
99
  className: "uploadImageSection",
104
100
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
105
101
  className: "uploadImageText",
106
- sx: {
107
- background: `${theme?.palette?.editor?.inputFieldBgColor}`,
108
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
109
- },
110
102
  children: /*#__PURE__*/_jsxs(Button, {
111
103
  component: "label",
112
104
  variant: "text",
@@ -464,6 +464,10 @@ const useCommonStyle = theme => ({
464
464
  }
465
465
  }
466
466
  },
467
+ pageSettingPopUpRoot: {
468
+ padding: "16px 8px 16px 10px!important",
469
+ height: "100%"
470
+ },
467
471
  buttonMoreOption: {
468
472
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
469
473
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -476,10 +480,6 @@ const useCommonStyle = theme => ({
476
480
  }
477
481
  }
478
482
  },
479
- pageSettingPopUpRoot: {
480
- padding: "16px 8px 16px 10px!important",
481
- height: "100%"
482
- },
483
483
  buttonMoreOption2: {
484
484
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
485
485
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
337
337
  return false;
338
338
  }
339
339
  const [nodeEntry] = Editor.nodes(editor, {
340
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
340
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
341
341
  });
342
342
  if (!nodeEntry) {
343
343
  return false;
344
344
  }
345
345
  const [node] = nodeEntry;
346
346
  const carouselDom = ReactEditor.toDOMNode(editor, node);
347
- const isEdit = carouselDom.classList.contains("carousel_slider_edit");
347
+ const isEdit = carouselDom.classList.contains('carousel_slider_edit');
348
348
  return !isEdit;
349
349
  } catch (err) {
350
350
  console.log(err);
@@ -161,27 +161,4 @@ export const groupByBreakpoint = (styleProps, theme) => {
161
161
  }
162
162
  };
163
163
  };
164
- export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
165
- export const getBreakpointLineSpacing = (value, breakpoint) => {
166
- try {
167
- const values = getBreakPointsValue(value, breakpoint);
168
- const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
169
- if (values[b] || values["lg"]) {
170
- const value = values[b] || values["lg"];
171
- return {
172
- ...a,
173
- [b]: value
174
- };
175
- } else {
176
- return a;
177
- }
178
- }, {});
179
- if (breakpoint) {
180
- return value[breakpoint] || value["lg"] || value;
181
- } else {
182
- return cssVal["lg"];
183
- }
184
- } catch (err) {
185
- // console.log(err);
186
- }
187
- };
164
+ export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
@@ -35,7 +35,6 @@ export const EditorProvider = ({
35
35
  path: null
36
36
  });
37
37
  const [fontFamilies, setFontFamilies] = useState({});
38
- const [activeBreakPoint, setActiveBreakPoint] = useState("");
39
38
  useEffect(() => {
40
39
  window.updateSelectedItem = d => {
41
40
  setSelectedElement(d);
@@ -98,10 +97,8 @@ export const EditorProvider = ({
98
97
  setOpenAI,
99
98
  updateDragging,
100
99
  fontFamilies,
101
- setFontFamilies,
102
- activeBreakPoint,
103
- setActiveBreakPoint
104
- }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
100
+ setFontFamilies
101
+ }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
105
102
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
106
103
  value: otherValues,
107
104
  children: children
@@ -314,8 +314,7 @@ export const getBlock = props => {
314
314
  borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
315
315
  margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
316
316
  width: element?.bgColor ? "calc(100% - 16px)" : "100%",
317
- borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
318
- lineHeight: 1.43
317
+ borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
319
318
  },
320
319
  children: children
321
320
  });
@@ -375,9 +374,6 @@ export const getBlock = props => {
375
374
  });
376
375
  case "orderedList":
377
376
  return /*#__PURE__*/_jsx("ol", {
378
- style: {
379
- lineHeight: 1.43
380
- },
381
377
  className: "listItemMargin",
382
378
  type: "1",
383
379
  ...attributes,
@@ -385,9 +381,6 @@ export const getBlock = props => {
385
381
  });
386
382
  case "unorderedList":
387
383
  return /*#__PURE__*/_jsx("ul", {
388
- style: {
389
- lineHeight: 1.43
390
- },
391
384
  className: "listItemMargin",
392
385
  ...attributes,
393
386
  children: children
@@ -20,10 +20,10 @@ export const insertButton = editor => {
20
20
  bottomRight: 30
21
21
  },
22
22
  bannerSpacing: {
23
- left: 24,
24
- top: 10,
25
- right: 24,
26
- bottom: 10
23
+ left: 16,
24
+ top: 8,
25
+ right: 16,
26
+ bottom: 8
27
27
  },
28
28
  ...(windowVar.lastButtonProps || {})
29
29
  };
@@ -624,10 +624,6 @@ export const isPageSettings = (event, editor) => {
624
624
  return isPageSettingsNode;
625
625
  }
626
626
  };
627
- export function capitalizeFirstLetter(str) {
628
- if (!str) return str;
629
- return str.charAt(0).toUpperCase() + str.slice(1);
630
- }
631
627
  export const insertLineBreakAtEndOfPath = (editor, path) => {
632
628
  try {
633
629
  const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -646,13 +642,6 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
646
642
  console.log(err);
647
643
  }
648
644
  };
649
- export function isHavingSelection(editor) {
650
- try {
651
- return editor?.selection && !Range.isCollapsed(editor.selection);
652
- } catch (err) {
653
- console.log(err);
654
- }
655
- }
656
645
  const omitNodes = ["site-settings", "page-settings"];
657
646
  export function getInitialValue(value = [], readOnly) {
658
647
  if (readOnly === "readonly" && value?.length) {
@@ -681,17 +670,20 @@ export function getInitialValue(value = [], readOnly) {
681
670
  }
682
671
  return value;
683
672
  }
673
+ export function capitalizeFirstLetter(str) {
674
+ if (!str) return str;
675
+ return str.charAt(0).toUpperCase() + str.slice(1);
676
+ }
677
+ export function isHavingSelection(editor) {
678
+ try {
679
+ return editor?.selection && !Range.isCollapsed(editor.selection);
680
+ } catch (err) {
681
+ console.log(err);
682
+ }
683
+ }
684
684
  export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
685
685
  return `${defaultCls} ${selected ? selectedClsName : ""}`;
686
686
  }
687
- export function handleNegativeInteger(val) {
688
- return val < 0 ? 0 : val;
689
- }
690
- export const containsSurrogatePair = text => {
691
- // Match surrogate pairs (high and low surrogate)
692
- const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
693
- return surrogatePairRegex.test(text);
694
- };
695
687
  export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
696
688
  try {
697
689
  const options = {
@@ -705,6 +697,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
705
697
  return [];
706
698
  }
707
699
  };
700
+ export const containsSurrogatePair = text => {
701
+ // Match surrogate pairs (high and low surrogate)
702
+ const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
703
+ return surrogatePairRegex.test(text);
704
+ };
708
705
  export const getSlateDom = (editor, range) => {
709
706
  try {
710
707
  const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -9,13 +9,7 @@ export const findPageSettings = editor => {
9
9
  path: null,
10
10
  element: {
11
11
  pageProps: {
12
- pageWidth: "fixed",
13
- "lineHeight": {
14
- "xs": 1.43,
15
- "sm": 1.43,
16
- "md": 1.43,
17
- "lg": 1.43
18
- }
12
+ pageWidth: "fixed"
19
13
  }
20
14
  }
21
15
  };
@@ -40,13 +34,7 @@ export const getPageSettings = editor => {
40
34
  path: null,
41
35
  element: {
42
36
  pageProps: {
43
- pageWidth: "fixed",
44
- "lineHeight": {
45
- "xs": 1.43,
46
- "sm": 1.43,
47
- "md": 1.43,
48
- "lg": 1.43
49
- }
37
+ pageWidth: "fixed"
50
38
  }
51
39
  }
52
40
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "5.6.1",
3
+ "version": "5.6.3",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -1,79 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Grid, Slider, Typography, Box } from "@mui/material";
3
- import { getBreakPointsValue } from "../../../helper/theme";
4
- import useWindowResize from "../../../hooks/useWindowResize";
5
- import { useEditorContext } from "../../../hooks/useMouseMove";
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- import { jsxs as _jsxs } from "react/jsx-runtime";
8
- const LineSpacing = props => {
9
- const {
10
- value: val,
11
- data,
12
- onChange
13
- } = props;
14
- const {
15
- theme
16
- } = useEditorContext();
17
- const {
18
- key
19
- } = data;
20
- const [size] = useWindowResize();
21
- const pro_value = getBreakPointsValue(val, size?.device);
22
- const [value, setValue] = useState(pro_value);
23
- let breakpointValue = getBreakPointsValue(val, null);
24
- breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
25
- useState(() => {
26
- setValue(pro_value);
27
- }, [pro_value]);
28
- const handleChange = e => {
29
- onChange({
30
- [key]: {
31
- ...breakpointValue,
32
- [size?.device]: e.target.value
33
- }
34
- });
35
- };
36
- return /*#__PURE__*/_jsxs(Grid, {
37
- item: true,
38
- xs: 12,
39
- children: [/*#__PURE__*/_jsx(Typography, {
40
- variant: "body1",
41
- color: "primary",
42
- style: {
43
- fontSize: "14px",
44
- fontWeight: 500
45
- },
46
- children: data?.label
47
- }), /*#__PURE__*/_jsxs(Grid, {
48
- container: true,
49
- wrap: "nowrap",
50
- className: "sld-wrpr",
51
- children: [/*#__PURE__*/_jsx(Slider, {
52
- className: "spacingSlider",
53
- defaultValue: value || 1.43,
54
- "aria-label": "Default",
55
- valueLabelDisplay: "auto",
56
- min: 0.5,
57
- max: 3.0,
58
- step: 0.1,
59
- name: "lineHeight",
60
- onChange: handleChange
61
- }), /*#__PURE__*/_jsx(Box, {
62
- component: "input",
63
- sx: {
64
- background: theme?.palette?.editor?.background,
65
- color: theme?.palette?.editor?.textColor
66
- },
67
- name: "lineHeight",
68
- value: pro_value,
69
- className: "sliderInput",
70
- onChange: handleChange,
71
- type: "number",
72
- placeholder: "0",
73
- disabled: true,
74
- defaultValue: pro_value || 1.43
75
- })]
76
- })]
77
- });
78
- };
79
- export default LineSpacing;