@flozy/editor 5.6.7 → 5.6.9

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 (41) hide show
  1. package/dist/Editor/CommonEditor.js +15 -10
  2. package/dist/Editor/Editor.css +22 -17
  3. package/dist/Editor/Elements/Button/EditorButton.js +3 -1
  4. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +12 -9
  5. package/dist/Editor/Elements/Form/Form.js +1 -0
  6. package/dist/Editor/Elements/FreeGrid/styles.js +1 -0
  7. package/dist/Editor/Elements/List/CheckList.js +2 -1
  8. package/dist/Editor/Elements/Search/SearchAttachment.js +1 -0
  9. package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -1
  10. package/dist/Editor/Elements/SimpleText/index.js +8 -1
  11. package/dist/Editor/Elements/SimpleText/style.js +5 -1
  12. package/dist/Editor/Elements/Table/DragButton.js +2 -1
  13. package/dist/Editor/Elements/Table/TableCell.js +4 -2
  14. package/dist/Editor/Elements/Title/title.js +13 -1
  15. package/dist/Editor/Elements/Variables/Style.js +20 -2
  16. package/dist/Editor/Elements/Variables/VariableButton.js +7 -3
  17. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +13 -3
  18. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +5 -0
  19. package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
  20. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +45 -0
  21. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  22. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +1 -0
  23. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +14 -2
  24. package/dist/Editor/common/RnD/Utils/gridDropItem.js +26 -7
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +10 -2
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +79 -0
  29. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +4 -0
  30. package/dist/Editor/common/Uploader.js +8 -0
  31. package/dist/Editor/commonStyle.js +9 -4
  32. package/dist/Editor/helper/index.js +2 -2
  33. package/dist/Editor/helper/theme.js +24 -1
  34. package/dist/Editor/hooks/useMouseMove.js +5 -2
  35. package/dist/Editor/plugins/withLayout.js +1 -1
  36. package/dist/Editor/utils/SlateUtilityFunctions.js +8 -1
  37. package/dist/Editor/utils/button.js +4 -4
  38. package/dist/Editor/utils/draftToSlate.js +3 -2
  39. package/dist/Editor/utils/helper.js +30 -24
  40. package/dist/Editor/utils/pageSettings.js +14 -2
  41. package/package.json +1 -1
@@ -3,24 +3,35 @@ 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";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
9
  const SwitchViewport = props => {
9
10
  const {
10
11
  breakpoint,
11
- onChange
12
+ onChange,
13
+ show
12
14
  } = props;
13
15
  const classes = useSwitchViewport();
16
+ const {
17
+ setSelectedElement,
18
+ setActiveBreakPoint
19
+ } = useEditorContext();
14
20
  useEffect(() => {
15
- console.log(breakpoint);
21
+ // to reset selection on viewport changes - FS-6589
22
+ setSelectedElement({});
16
23
  }, [breakpoint]);
17
24
  return /*#__PURE__*/_jsxs(Box, {
18
25
  sx: classes.root,
26
+ style: {
27
+ display: show ? "block" : "none"
28
+ },
19
29
  children: [/*#__PURE__*/_jsx(Tooltip, {
20
30
  title: "Desktop View",
21
31
  children: /*#__PURE__*/_jsx(IconButton, {
22
32
  className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
23
33
  onClick: () => {
34
+ setActiveBreakPoint("");
24
35
  onChange("");
25
36
  },
26
37
  children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
30
41
  children: /*#__PURE__*/_jsx(IconButton, {
31
42
  className: `${breakpoint === "xs" ? "active" : ""}`,
32
43
  onClick: () => {
44
+ setActiveBreakPoint("xs");
33
45
  onChange("xs");
34
46
  },
35
47
  children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
@@ -1,5 +1,6 @@
1
1
  import { Transforms, Node, Path } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
+ import { handleNegativeInteger } from "../../../utils/helper";
3
4
  export const ROW_HEIGHT = 50;
4
5
  const MARGIN_OF = {
5
6
  xs: 160,
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
75
76
  console.log(err);
76
77
  }
77
78
  };
78
- function isContainerElement(editor, moveTopath, props) {
79
+ function isContainerElement(editor, moveTopath, props, appenBp) {
79
80
  try {
80
81
  const {
81
82
  path,
@@ -91,21 +92,32 @@ function isContainerElement(editor, moveTopath, props) {
91
92
  parentNode = Node.get(editor, Path.parent(dragItemPath));
92
93
  }
93
94
  const moveToNode = Node.get(editor, moveTopath);
95
+ const leftOfMoveToNode = moveToNode[`left${appenBp}`];
94
96
  if (moveToNode.type === "freegridBox") {
95
97
  if (parentNode.type === "freegridBox") {
96
98
  // same box
97
99
  if (parentPath === dragOver) {
98
100
  return props.calX;
99
101
  } else {
102
+ const moveToDom = ReactEditor.toDOMNode(editor, moveToNode);
103
+ const {
104
+ left
105
+ } = moveToDom?.getBoundingClientRect() || {};
106
+ const borderLeftWidth = getBorderWidth(moveToDom, "borderLeftWidth");
107
+
100
108
  // for different box
101
- return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
109
+ return parseInt(props.x - props.diffX - left - borderLeftWidth);
102
110
  }
103
111
  } else {
104
- return props.calX - moveToNode?.left;
112
+ return props.calX - leftOfMoveToNode;
105
113
  }
106
114
  } else if (moveToNode.type === "freegrid") {
107
115
  if (parentNode.type === "freegridBox") {
108
- return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
116
+ const boundaryLineEle = document.querySelector(".rnd-guideline-lv");
117
+ const {
118
+ left
119
+ } = boundaryLineEle?.getBoundingClientRect() || {};
120
+ return parseInt(props.x - props.diffX - left);
109
121
  } else {
110
122
  return props.calX;
111
123
  }
@@ -133,14 +145,17 @@ export function onDropItem(props, parentClass) {
133
145
  const from = parentPath.split("|").map(m => parseInt(m));
134
146
  let newPath = [];
135
147
  newPath = moveTo;
136
- const cCalx = isContainerElement(editor, moveTo, props);
148
+ const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
149
+ const cCalx = isContainerElement(editor, moveTo, props, appenBp);
150
+
137
151
  // const posX = parseInt(
138
152
  // cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
139
153
  // );
140
154
  const toSectionNode = Node.get(editor, newPath);
141
155
  const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
156
+ const borderTopWidth = getBorderWidth(addToSectionDOM, "borderTopWidth");
142
157
  const rect = addToSectionDOM.getBoundingClientRect();
143
- const y = endPosition.y - startPosition.diffY - rect.top;
158
+ const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top - borderTopWidth);
144
159
 
145
160
  // Calculate grid position
146
161
  const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -150,7 +165,6 @@ export function onDropItem(props, parentClass) {
150
165
 
151
166
  // Update grid area
152
167
  const gridArea = `${row} / 1 / ${row + 1} / 2`;
153
- const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
154
168
  Transforms.setNodes(editor, {
155
169
  [`gridArea${appenBp}`]: gridArea,
156
170
  [`left${appenBp}`]: cCalx,
@@ -188,4 +202,9 @@ export function onDropItem(props, parentClass) {
188
202
  export function calculateGridArea(y) {
189
203
  const row = Math.floor(y / ROW_HEIGHT) + 1;
190
204
  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;
191
210
  }
@@ -73,6 +73,11 @@ 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
+ },
76
81
  children: /*#__PURE__*/_jsxs(Button, {
77
82
  component: "label",
78
83
  variant: "text",
@@ -1,6 +1,7 @@
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";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,7 +16,10 @@ const RenderCard = ({
15
16
  return /*#__PURE__*/_jsx(Card, {
16
17
  sx: {
17
18
  position: 'relative',
18
- padding: "10px"
19
+ padding: "10px",
20
+ '& .MuiCheckbox-root svg': {
21
+ fill: 'unset !important'
22
+ }
19
23
  },
20
24
  children: /*#__PURE__*/_jsx(FormControlLabel, {
21
25
  control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
81
85
  selectedCard,
82
86
  infoIcon
83
87
  } = data;
88
+ const {
89
+ theme
90
+ } = useEditorContext();
84
91
  const activeCard = value === selectedCard;
85
92
  const handleChange = e => {
86
93
  if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
99
106
  sx: {
100
107
  marginBottom: "12px",
101
108
  "& .MuiPaper-root": {
102
- border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
109
+ background: theme?.palette?.editor?.miniToolBarBackground,
110
+ border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
103
111
  borderRadius: "8px",
104
112
  boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
105
113
  }
@@ -18,6 +18,7 @@ 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";
21
22
  const FieldMap = {
22
23
  text: Text,
23
24
  bannerSpacing: BannerSpacing,
@@ -38,6 +39,7 @@ const FieldMap = {
38
39
  fontSize: FontSize,
39
40
  selectSwitch: SelectSwitch,
40
41
  card: CardsMapping,
41
- metadatamapping: MetaDataMapping
42
+ metadatamapping: MetaDataMapping,
43
+ lineSpacing: LineSpacing
42
44
  };
43
45
  export default FieldMap;
@@ -0,0 +1,79 @@
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;
@@ -25,6 +25,10 @@ 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"
28
32
  }]
29
33
  }, {
30
34
  tab: "Max Width",
@@ -4,6 +4,7 @@ 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";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,6 +19,9 @@ const Uploader = props => {
18
19
  const [base64, setBase64] = useState(value?.url);
19
20
  const [fileName, setFileName] = useState("");
20
21
  const [uploading, setUploading] = useState(false);
22
+ const {
23
+ theme
24
+ } = useEditorContext();
21
25
  const handleChange = async e => {
22
26
  const uFile = e.target.files[0];
23
27
  const strImage = await convertBase64(uFile);
@@ -99,6 +103,10 @@ const Uploader = props => {
99
103
  className: "uploadImageSection",
100
104
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
101
105
  className: "uploadImageText",
106
+ sx: {
107
+ background: `${theme?.palette?.editor?.inputFieldBgColor}`,
108
+ border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
109
+ },
102
110
  children: /*#__PURE__*/_jsxs(Button, {
103
111
  component: "label",
104
112
  variant: "text",
@@ -49,6 +49,11 @@ const useCommonStyle = theme => ({
49
49
  fontWeight: "500",
50
50
  fontFamily: "Inter, sans-serif"
51
51
  },
52
+ "& .MuiPaper-root": {
53
+ border: `unset !important`,
54
+ borderRadius: '0px',
55
+ height: 'fit-content'
56
+ },
52
57
  "& p": {
53
58
  marginBottom: "7px",
54
59
  marginTop: "4px"
@@ -464,10 +469,6 @@ const useCommonStyle = theme => ({
464
469
  }
465
470
  }
466
471
  },
467
- pageSettingPopUpRoot: {
468
- padding: "16px 8px 16px 10px!important",
469
- height: "100%"
470
- },
471
472
  buttonMoreOption: {
472
473
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
473
474
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -480,6 +481,10 @@ const useCommonStyle = theme => ({
480
481
  }
481
482
  }
482
483
  },
484
+ pageSettingPopUpRoot: {
485
+ padding: "16px 8px 16px 10px!important",
486
+ height: "100%"
487
+ },
483
488
  buttonMoreOption2: {
484
489
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
485
490
  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,4 +161,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
161
161
  }
162
162
  };
163
163
  };
164
- export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
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
+ };
@@ -35,6 +35,7 @@ export const EditorProvider = ({
35
35
  path: null
36
36
  });
37
37
  const [fontFamilies, setFontFamilies] = useState({});
38
+ const [activeBreakPoint, setActiveBreakPoint] = useState("");
38
39
  useEffect(() => {
39
40
  window.updateSelectedItem = d => {
40
41
  setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
97
98
  setOpenAI,
98
99
  updateDragging,
99
100
  fontFamilies,
100
- setFontFamilies
101
- }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
101
+ setFontFamilies,
102
+ activeBreakPoint,
103
+ setActiveBreakPoint
104
+ }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
102
105
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
103
106
  value: otherValues,
104
107
  children: children
@@ -39,7 +39,7 @@ const withLayout = editor => {
39
39
  const title = {
40
40
  type: "title",
41
41
  children: [{
42
- text: "Untitled"
42
+ text: ""
43
43
  }]
44
44
  };
45
45
  Transforms.insertNodes(editor, title, {
@@ -314,7 +314,8 @@ 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"
317
+ borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
318
+ lineHeight: 1.43
318
319
  },
319
320
  children: children
320
321
  });
@@ -374,6 +375,9 @@ export const getBlock = props => {
374
375
  });
375
376
  case "orderedList":
376
377
  return /*#__PURE__*/_jsx("ol", {
378
+ style: {
379
+ lineHeight: 1.43
380
+ },
377
381
  className: "listItemMargin",
378
382
  type: "1",
379
383
  ...attributes,
@@ -381,6 +385,9 @@ export const getBlock = props => {
381
385
  });
382
386
  case "unorderedList":
383
387
  return /*#__PURE__*/_jsx("ul", {
388
+ style: {
389
+ lineHeight: 1.43
390
+ },
384
391
  className: "listItemMargin",
385
392
  ...attributes,
386
393
  children: children
@@ -20,10 +20,10 @@ export const insertButton = editor => {
20
20
  bottomRight: 30
21
21
  },
22
22
  bannerSpacing: {
23
- left: 16,
24
- top: 8,
25
- right: 16,
26
- bottom: 8
23
+ left: 24,
24
+ top: 10,
25
+ right: 24,
26
+ bottom: 10
27
27
  },
28
28
  ...(windowVar.lastButtonProps || {})
29
29
  };
@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
82
82
  };
83
83
  export const draftToSlate = props => {
84
84
  const {
85
- data
85
+ data,
86
+ needLayout
86
87
  } = props;
87
88
  if (data?.blocks && data?.blocks?.length > 0) {
88
89
  const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
104
105
  return data;
105
106
  } else {
106
107
  return [{
107
- type: "paragraph",
108
+ type: needLayout ? "title" : "paragraph",
108
109
  children: [{
109
110
  text: ""
110
111
  }]
@@ -593,8 +593,9 @@ export const getPreviousNode = editor => {
593
593
  return;
594
594
  }
595
595
  };
596
- export const isPageSettings = (event, editor) => {
597
- let isPageSettingsNode = false;
596
+ const isRestricted = node => node?.type === "page-settings" || node?.type === "site-settings" || node?.children?.some(child => child.type === "dataView");
597
+ export const isRestrictedNode = (event, editor) => {
598
+ let isNodeRestricted = false;
598
599
  try {
599
600
  const {
600
601
  selection
@@ -607,23 +608,27 @@ export const isPageSettings = (event, editor) => {
607
608
  previousNode,
608
609
  previousPath
609
610
  } = getPreviousNode(editor) || {};
610
- if (previousNode?.type === "page-settings") {
611
+ if (isRestricted(previousNode)) {
611
612
  event.preventDefault(); // stops deleting backward
612
613
 
613
614
  // move the cursor to node which is before page-settings node
614
615
  const pathBeforePageSettings = Path.previous(previousPath);
615
616
  const endPath = Editor.end(editor, pathBeforePageSettings);
616
617
  Transforms.select(editor, endPath);
617
- isPageSettingsNode = true;
618
+ isNodeRestricted = true;
618
619
  }
619
620
  }
620
- return isPageSettingsNode;
621
+ return isNodeRestricted;
621
622
  } catch (err) {
622
623
  // if there is no previous node error throws, user reached the starting node and startting position
623
- isPageSettingsNode = true;
624
- return isPageSettingsNode;
624
+ isNodeRestricted = true;
625
+ return isNodeRestricted;
625
626
  }
626
627
  };
628
+ export function capitalizeFirstLetter(str) {
629
+ if (!str) return str;
630
+ return str.charAt(0).toUpperCase() + str.slice(1);
631
+ }
627
632
  export const insertLineBreakAtEndOfPath = (editor, path) => {
628
633
  try {
629
634
  const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -642,12 +647,20 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
642
647
  console.log(err);
643
648
  }
644
649
  };
650
+ export function isHavingSelection(editor) {
651
+ try {
652
+ return editor?.selection && !Range.isCollapsed(editor.selection);
653
+ } catch (err) {
654
+ console.log(err);
655
+ }
656
+ }
645
657
  const omitNodes = ["site-settings", "page-settings"];
646
658
  export function getInitialValue(value = [], readOnly) {
647
659
  if (readOnly === "readonly" && value?.length) {
648
660
  // remove last empty nodes on readonly mode, to remove empty spaces
649
661
 
650
662
  let lastNonEmptyElementIndex;
663
+ const omittedNodes = [];
651
664
  for (let i = value?.length; i > 0; i--) {
652
665
  const elementIndex = i - 1;
653
666
  const node = value[elementIndex];
@@ -660,30 +673,28 @@ export function getInitialValue(value = [], readOnly) {
660
673
  const text = node.children[node.children.length - 1]?.text;
661
674
  lastNonEmptyElementIndex = hasOnlyTextChildren ? text ? elementIndex : null : elementIndex;
662
675
  } else if (omitNodes.includes(node?.type)) {
676
+ omittedNodes.push(node);
663
677
  continue;
664
678
  } else {
665
679
  lastNonEmptyElementIndex = elementIndex;
666
680
  }
667
681
  }
668
682
  const newValue = [...value].slice(0, lastNonEmptyElementIndex + 1);
669
- return newValue;
683
+ return [...newValue, ...omittedNodes];
670
684
  }
671
685
  return value;
672
686
  }
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
687
  export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
685
688
  return `${defaultCls} ${selected ? selectedClsName : ""}`;
686
689
  }
690
+ export function handleNegativeInteger(val) {
691
+ return val < 0 ? 0 : val;
692
+ }
693
+ export const containsSurrogatePair = text => {
694
+ // Match surrogate pairs (high and low surrogate)
695
+ const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
696
+ return surrogatePairRegex.test(text);
697
+ };
687
698
  export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
688
699
  try {
689
700
  const options = {
@@ -697,11 +708,6 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
697
708
  return [];
698
709
  }
699
710
  };
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
- };
705
711
  export const getSlateDom = (editor, range) => {
706
712
  try {
707
713
  const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -9,7 +9,13 @@ export const findPageSettings = editor => {
9
9
  path: null,
10
10
  element: {
11
11
  pageProps: {
12
- pageWidth: "fixed"
12
+ pageWidth: "fixed",
13
+ "lineHeight": {
14
+ "xs": 1.43,
15
+ "sm": 1.43,
16
+ "md": 1.43,
17
+ "lg": 1.43
18
+ }
13
19
  }
14
20
  }
15
21
  };
@@ -34,7 +40,13 @@ export const getPageSettings = editor => {
34
40
  path: null,
35
41
  element: {
36
42
  pageProps: {
37
- pageWidth: "fixed"
43
+ pageWidth: "fixed",
44
+ "lineHeight": {
45
+ "xs": 1.43,
46
+ "sm": 1.43,
47
+ "md": 1.43,
48
+ "lg": 1.43
49
+ }
38
50
  }
39
51
  }
40
52
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "5.6.7",
3
+ "version": "5.6.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"