@flozy/editor 5.5.5 → 5.5.7

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 +3 -7
  2. package/dist/Editor/Editor.css +15 -17
  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 +0 -1
  8. package/dist/Editor/Elements/SimpleText/index.js +3 -11
  9. package/dist/Editor/Elements/SimpleText/style.js +1 -5
  10. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +0 -10
  11. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
  12. package/dist/Editor/common/FontLoader/FontList.js +3 -1
  13. package/dist/Editor/common/FontLoader/FontLoader.js +4 -10
  14. package/dist/Editor/common/MentionsPopup/Styles.js +0 -1
  15. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
  16. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
  17. package/dist/Editor/common/RnD/Utils/gridDropItem.js +6 -9
  18. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  19. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  21. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
  22. package/dist/Editor/common/Uploader.js +0 -8
  23. package/dist/Editor/commonStyle.js +4 -4
  24. package/dist/Editor/helper/index.js +2 -2
  25. package/dist/Editor/helper/theme.js +16 -25
  26. package/dist/Editor/hooks/useMouseMove.js +2 -5
  27. package/dist/Editor/plugins/withCustomDeleteBackward.js +104 -100
  28. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -8
  29. package/dist/Editor/utils/button.js +4 -4
  30. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +7 -51
  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
@@ -54,6 +54,20 @@ const overrides = {
54
54
  return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
55
55
  }
56
56
  };
57
+ export const checkXS = (val = {}) => {
58
+ try {
59
+ if (typeof val === "object") {
60
+ if (val?.xs === undefined && val?.lg !== undefined) {
61
+ val.xs = val.lg;
62
+ }
63
+ return val;
64
+ }
65
+ return val;
66
+ } catch (err) {
67
+ console.log(err);
68
+ return val;
69
+ }
70
+ };
57
71
  export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
58
72
  try {
59
73
  if (breakpoint) {
@@ -67,7 +81,7 @@ export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) =>
67
81
  return value ? value[breakpoint] || value["lg"] : value;
68
82
  }
69
83
  } else if (typeof value === "object") {
70
- return !breakpoint && value["lg"] ? !ov ? value : overrideValues(value, ot) : value[breakpoint] || copyAllLg(value, ot);
84
+ return !breakpoint && value["lg"] ? !ov ? value : checkXS(overrideValues(value, ot)) : value[breakpoint] || copyAllLg(value, ot);
71
85
  } else {
72
86
  // consider without breakpoints
73
87
  return copyAllLg(value, ot);
@@ -147,27 +161,4 @@ export const groupByBreakpoint = (styleProps, theme) => {
147
161
  }
148
162
  };
149
163
  };
150
- export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
151
- export const getBreakpointLineSpacing = (value, breakpoint) => {
152
- try {
153
- const values = getBreakPointsValue(value, breakpoint);
154
- const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
155
- if (values[b] || values["lg"]) {
156
- const value = values[b] || values["lg"];
157
- return {
158
- ...a,
159
- [b]: value
160
- };
161
- } else {
162
- return a;
163
- }
164
- }, {});
165
- if (breakpoint) {
166
- return value[breakpoint] || value["lg"] || value;
167
- } else {
168
- return cssVal["lg"];
169
- }
170
- } catch (err) {
171
- // console.log(err);
172
- }
173
- };
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
@@ -6,124 +6,128 @@ const isNodeTextEmpty = node => {
6
6
  return nodeText.trim() === "";
7
7
  };
8
8
  const withCustomDeleteBackward = editor => {
9
- const {
10
- deleteBackward,
11
- deleteForward
12
- } = editor;
13
-
14
- // Override deleteBackward
15
- editor.deleteBackward = (...args) => {
9
+ try {
16
10
  const {
17
- selection
11
+ deleteBackward,
12
+ deleteForward
18
13
  } = editor;
19
- if (selection) {
20
- // get the current node
21
- const [freeGridItemNode] = Editor.nodes(editor, {
22
- match: n => n.type === "freegridItem" // Adjust based on your list item type
23
- });
24
14
 
25
- // if it is freegrid
26
- if (freeGridItemNode && freeGridItemNode[0]) {
27
- const hasText = Node.string(freeGridItemNode[0]);
28
- if (!hasText) {
29
- return;
15
+ // Override deleteBackward
16
+ editor.deleteBackward = (...args) => {
17
+ const {
18
+ selection
19
+ } = editor;
20
+ if (selection) {
21
+ // get the current node
22
+ const [freeGridItemNode] = Editor.nodes(editor, {
23
+ match: n => n.type === "freegridItem" // Adjust based on your list item type
24
+ });
25
+
26
+ // if it is freegrid
27
+ if (freeGridItemNode && freeGridItemNode[0]) {
28
+ const hasText = Node.string(freeGridItemNode[0]);
29
+ if (!hasText) {
30
+ return;
31
+ }
30
32
  }
31
- }
32
- if (selection && Range.isCollapsed(selection)) {
33
- const [currentNode, path] = Editor.node(editor, selection);
34
- if (currentNode && typeof currentNode.text === 'string') {
35
- const text = currentNode.text;
36
- if (containsSurrogatePair(text)) {
37
- // Check if the cursor is at the end of a surrogate pair
38
- const {
39
- offset
40
- } = selection.anchor;
41
- const beforeCursor = text.slice(0, offset);
42
- const afterCursor = text.slice(offset);
43
- if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
44
- // Delete the entire surrogate pair
45
- Transforms.delete(editor, {
46
- at: {
47
- anchor: {
48
- path,
49
- offset: offset - 2
50
- },
51
- // Move back 2 for surrogate pair
52
- focus: {
53
- path,
54
- offset
33
+ if (selection && Range.isCollapsed(selection)) {
34
+ const [currentNode, path] = Editor.node(editor, selection);
35
+ if (currentNode && typeof currentNode.text === 'string') {
36
+ const text = currentNode.text;
37
+ if (containsSurrogatePair(text)) {
38
+ // Check if the cursor is at the end of a surrogate pair
39
+ const {
40
+ offset
41
+ } = selection.anchor;
42
+ const beforeCursor = text.slice(0, offset);
43
+ const afterCursor = text.slice(offset);
44
+ if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
45
+ // Delete the entire surrogate pair
46
+ Transforms.delete(editor, {
47
+ at: {
48
+ anchor: {
49
+ path,
50
+ offset: offset - 2
51
+ },
52
+ // Move back 2 for surrogate pair
53
+ focus: {
54
+ path,
55
+ offset
56
+ }
55
57
  }
56
- }
57
- });
58
- return;
58
+ });
59
+ return;
60
+ }
59
61
  }
60
62
  }
61
63
  }
62
- }
63
64
 
64
- // Check if current node is a list item and is the last one, signature node
65
- const [node] = Editor.nodes(editor, {
66
- match: n => BACKWARD_BLOCKS.includes(n.type) // Adjust based on your list item type
67
- });
65
+ // Check if current node is a list item and is the last one, signature node
66
+ const [node] = Editor.nodes(editor, {
67
+ match: n => BACKWARD_BLOCKS.includes(n.type) // Adjust based on your list item type
68
+ });
68
69
 
69
- if (node) {
70
- // Check if it is the last list item is empty text
71
- const parentNodePath = Path.parent(node[1]);
72
- const isLastChildren = Node.get(editor, parentNodePath);
73
- const isEmpty = isNodeTextEmpty(node[0]) && isLastChildren?.children?.length === 1;
74
- if (isEmpty) {
75
- Transforms.setNodes(editor, {
76
- type: "paragraph"
77
- }, {
78
- at: parentNodePath
79
- });
80
- Transforms.removeNodes(editor, {
81
- at: node[1]
82
- });
83
- return;
70
+ if (node) {
71
+ // Check if it is the last list item is empty text
72
+ const parentNodePath = Path.parent(node[1]);
73
+ const isLastChildren = Node.get(editor, parentNodePath);
74
+ const isEmpty = isNodeTextEmpty(node[0]) && isLastChildren?.children?.length === 1;
75
+ if (isEmpty) {
76
+ Transforms.setNodes(editor, {
77
+ type: "paragraph"
78
+ }, {
79
+ at: parentNodePath
80
+ });
81
+ Transforms.removeNodes(editor, {
82
+ at: node[1]
83
+ });
84
+ return;
85
+ }
84
86
  }
85
87
  }
86
- }
87
88
 
88
- // Fall back to default delete behavior if conditions are not met
89
- deleteBackward(...args);
90
- };
91
- editor.deleteForward = (...args) => {
92
- const {
93
- selection
94
- } = editor;
95
- if (selection) {
89
+ // Fall back to default delete behavior if conditions are not met
90
+ deleteBackward(...args);
91
+ };
92
+ editor.deleteForward = (...args) => {
96
93
  const {
97
- nextPath,
98
- nextNode
99
- } = getNextNode(editor) || {};
94
+ selection
95
+ } = editor;
96
+ if (selection) {
97
+ const {
98
+ nextPath,
99
+ nextNode
100
+ } = getNextNode(editor) || {};
100
101
 
101
- // Restrict deletion of page-settings
102
- if (nextNode?.type === "page-settings") {
103
- const isEndLine = Point.equals(selection.focus, Editor.end(editor, selection.focus.path));
104
- if (isEndLine) {
105
- const lastEditorChild = editor?.children?.length;
106
- const isLastNode = lastEditorChild - 1 === nextPath[0];
107
- if (isLastNode) {
108
- return;
109
- }
102
+ // Restrict deletion of page-settings
103
+ if (nextNode?.type === "page-settings") {
104
+ const isEndLine = Point.equals(selection.focus, Editor.end(editor, selection.focus.path));
105
+ if (isEndLine) {
106
+ const lastEditorChild = editor?.children?.length;
107
+ const isLastNode = lastEditorChild - 1 === nextPath[0];
108
+ if (isLastNode) {
109
+ return;
110
+ }
110
111
 
111
- // move the page-settings node to last
112
- Transforms.moveNodes(editor, {
113
- at: nextPath,
114
- to: [lastEditorChild]
115
- });
112
+ // move the page-settings node to last
113
+ Transforms.moveNodes(editor, {
114
+ at: nextPath,
115
+ to: [lastEditorChild]
116
+ });
116
117
 
117
- // Node present after page-settings, will now merged to current node
118
- Transforms.mergeNodes(editor, {
119
- at: nextPath
120
- });
121
- return;
118
+ // Node present after page-settings, will now merged to current node
119
+ Transforms.mergeNodes(editor, {
120
+ at: nextPath
121
+ });
122
+ return;
123
+ }
122
124
  }
123
125
  }
124
- }
125
- deleteForward(...args);
126
- };
127
- return editor;
126
+ deleteForward(...args);
127
+ };
128
+ return editor;
129
+ } catch (err) {
130
+ console.log(err);
131
+ }
128
132
  };
129
133
  export default withCustomDeleteBackward;
@@ -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
  };
@@ -237,30 +237,24 @@ export const getBlock = props => {
237
237
  return /*#__PURE__*/_jsx("p", {
238
238
  ...attributes,
239
239
  ...element.attr,
240
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`
240
+ className: `content-editable ${isEmpty ? "empty" : ""}`
241
241
  // placeholder="paragraph"
242
242
  ,
243
243
  children: children
244
244
  });
245
245
  case "headingOne":
246
- return /*#__PURE__*/_jsx("h3", {
246
+ return /*#__PURE__*/_jsx("h1", {
247
247
  ...attributes,
248
248
  ...element.attr,
249
- style: {
250
- margin: "10px 0px"
251
- },
252
249
  className: `content-editable ${isEmpty ? "empty" : ""}`
253
250
  // placeholder="Heading 1"
254
251
  ,
255
252
  children: children
256
253
  });
257
254
  case "headingTwo":
258
- return /*#__PURE__*/_jsx("h3", {
255
+ return /*#__PURE__*/_jsx("h2", {
259
256
  ...attributes,
260
257
  ...element.attr,
261
- style: {
262
- margin: "10px 0px"
263
- },
264
258
  className: `content-editable ${isEmpty ? "empty" : ""}`
265
259
  // placeholder="Heading 2"
266
260
  ,
@@ -270,55 +264,18 @@ export const getBlock = props => {
270
264
  return /*#__PURE__*/_jsx("h3", {
271
265
  ...attributes,
272
266
  ...element.attr,
273
- style: {
274
- margin: "10px 0px"
275
- },
276
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
267
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
277
268
  children: children
278
269
  });
279
270
  case "headingThree":
280
271
  return /*#__PURE__*/_jsx("h3", {
281
272
  ...attributes,
282
273
  ...element.attr,
283
- style: {
284
- margin: "10px 0px"
285
- },
286
274
  className: `content-editable ${isEmpty ? "empty" : ""}`
287
275
  // placeholder="Heading 3"
288
276
  ,
289
277
  children: children
290
278
  });
291
- case "headingFour":
292
- return /*#__PURE__*/_jsx("h4", {
293
- ...attributes,
294
- ...element.attr,
295
- style: {
296
- margin: "10px 0px"
297
- },
298
- className: `content-editable ${isEmpty ? "empty" : ""}`,
299
- children: children
300
- });
301
- case "headingFive":
302
- return /*#__PURE__*/_jsx("h5", {
303
- ...attributes,
304
- ...element.attr,
305
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
306
- children: children
307
- });
308
- case "headingSix":
309
- return /*#__PURE__*/_jsx("h6", {
310
- ...attributes,
311
- ...element.attr,
312
- className: `content-editable ${isEmpty ? "empty" : ""}`,
313
- children: children
314
- });
315
- case "headingSeven":
316
- return /*#__PURE__*/_jsx("h7", {
317
- ...attributes,
318
- ...element.attr,
319
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
320
- children: children
321
- });
322
279
  case "blockquote":
323
280
  return /*#__PURE__*/_jsx("blockquote", {
324
281
  ...attributes,
@@ -370,7 +327,7 @@ export const getBlock = props => {
370
327
  return /*#__PURE__*/_jsx("li", {
371
328
  ...attributes,
372
329
  ...element.attr,
373
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
330
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
374
331
  placeholder: "List",
375
332
  style: {
376
333
  color: firstChildren?.color
@@ -387,7 +344,7 @@ export const getBlock = props => {
387
344
  return /*#__PURE__*/_jsx("p", {
388
345
  ...attributes,
389
346
  ...element.attr,
390
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`
347
+ className: `content-editable ${isEmpty ? "empty" : ""}`
391
348
  // placeholder="paragraph"
392
349
  ,
393
350
  children: children
@@ -409,8 +366,7 @@ export const getBlock = props => {
409
366
  default:
410
367
  return /*#__PURE__*/_jsx(SimpleText, {
411
368
  ...props,
412
- isEmpty: isEmpty,
413
- isChatEditor: true
369
+ isEmpty: isEmpty
414
370
  });
415
371
  }
416
372
  };
@@ -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.5.5",
3
+ "version": "5.5.7",
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;