@flozy/editor 2.1.8 → 2.1.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -371,6 +371,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
371
371
  return true;
372
372
  }
373
373
  }, [readOnly, isTextSelected]);
374
+ const handleFooterClick = () => {
375
+ window.open('https://www.flozy.com', '_blank');
376
+ };
374
377
  return /*#__PURE__*/_jsx(EditorProvider, {
375
378
  theme: theme,
376
379
  editor: editor,
@@ -460,10 +463,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
460
463
  sx: {
461
464
  color: "rgb(100, 116, 139)",
462
465
  fontSize: "13px",
463
- paddingBottom: hideMiniToolBar ? "0px" : "12px"
466
+ paddingBottom: hideMiniToolBar ? "0px" : "12px",
467
+ cursor: 'pointer'
464
468
  },
465
469
  align: "center",
466
470
  "data-info": outsideEditorClickLabel,
471
+ onClick: handleFooterClick,
467
472
  children: footer
468
473
  })]
469
474
  })
@@ -299,6 +299,7 @@ function AppHeader(props) {
299
299
  })
300
300
  }), /*#__PURE__*/_jsx("nav", {
301
301
  children: /*#__PURE__*/_jsx(Drawer, {
302
+ anchor: isLogoRight ? "right" : "left",
302
303
  container: container,
303
304
  variant: "temporary",
304
305
  open: mobileOpen,
@@ -6,6 +6,7 @@ import ContinuousSlider from "./Slider";
6
6
  import frames from ".";
7
7
  import { useEditorContext } from "../../../hooks/useMouseMove";
8
8
  import { CloseIcon } from "../../../common/iconslist";
9
+ import FramesStyles from "./Styles";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -49,6 +50,10 @@ const ImageFrame = props => {
49
50
  setSelectedPath
50
51
  } = useEditorContext();
51
52
  const open = selectedPath === id && Boolean(anchorEl);
53
+ const {
54
+ theme
55
+ } = useEditorContext();
56
+ const classes = FramesStyles(theme);
52
57
  useEffect(() => {
53
58
  if (imageRef?.current && !readOnly) {
54
59
  setDOM(dom);
@@ -112,18 +117,9 @@ const ImageFrame = props => {
112
117
  },
113
118
  placement: "top",
114
119
  children: /*#__PURE__*/_jsxs(Box, {
115
- sx: {
116
- width: 200,
117
- padding: "0px 16px",
118
- boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
119
- border: "1px solid rgba(0,0,0,0.07)",
120
- borderRadius: "12px",
121
- backgroundColor: "#FFF",
122
- marginBottom: "8px",
123
- position: "relative",
124
- paddingRight: "48px"
125
- },
120
+ sx: classes?.sliderContainer,
126
121
  children: [/*#__PURE__*/_jsx(ContinuousSlider, {
122
+ classes: classes,
127
123
  val: scale,
128
124
  onChange: onScaleChange,
129
125
  min: 50,
@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
7
  const ContinuousSlider = props => {
8
8
  const {
9
+ classes,
9
10
  val,
10
11
  min,
11
12
  max,
@@ -20,22 +21,45 @@ const ContinuousSlider = props => {
20
21
  spacing: 2,
21
22
  direction: "row",
22
23
  sx: {
23
- mb: 0
24
+ mb: 0,
25
+ ml: '8px'
24
26
  },
25
27
  alignItems: "center",
26
- children: [/*#__PURE__*/_jsx(Typography, {
27
- variant: "div",
28
- children: "-"
29
- }), /*#__PURE__*/_jsx(Slider, {
28
+ children: [/*#__PURE__*/_jsx(Slider, {
30
29
  "aria-label": "Volume",
31
30
  value: value,
32
31
  onChange: handleChange,
33
32
  min: min,
34
33
  step: 1,
35
- max: max
36
- }), /*#__PURE__*/_jsx(Typography, {
34
+ max: max,
35
+ sx: {
36
+ height: 6,
37
+ '& .MuiSlider-thumb': {
38
+ width: 16,
39
+ height: 16,
40
+ background: 'linear-gradient(180deg, #4D61FF 0%, #2C92FF 100%)'
41
+ },
42
+ '& .MuiSlider-thumb::after': {
43
+ position: 'absolute',
44
+ content: '""',
45
+ borderRadius: '50%',
46
+ width: 18,
47
+ height: 18,
48
+ top: '50%',
49
+ left: '50%',
50
+ transform: 'translate(-50%, -50%)',
51
+ border: '2px solid #fff',
52
+ boxShadow: '0px 4px 4px 0px #0000001A'
53
+ },
54
+ '& .MuiSlider-track': {
55
+ border: '1px solid #2563EB',
56
+ background: '#2563EB'
57
+ }
58
+ }
59
+ }), /*#__PURE__*/_jsxs(Typography, {
60
+ sx: classes?.sliderText,
37
61
  variant: "div",
38
- children: "+"
62
+ children: [value, "%"]
39
63
  })]
40
64
  });
41
65
  };
@@ -0,0 +1,26 @@
1
+ const FramesStyles = theme => ({
2
+ sliderContainer: {
3
+ width: 200,
4
+ padding: "0px 16px",
5
+ boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
6
+ border: "1px solid rgba(0,0,0,0.07)",
7
+ borderRadius: "23px",
8
+ backgroundColor: theme?.palette?.editor?.background,
9
+ marginBottom: "8px",
10
+ position: "relative",
11
+ paddingRight: "30px"
12
+ },
13
+ sliderText: {
14
+ fontSize: "12px",
15
+ fontWeight: 600,
16
+ padding: "0px 4px",
17
+ color: theme?.palette?.editor?.textColor,
18
+ borderRadius: "22px",
19
+ minWidth: "50px",
20
+ display: "block",
21
+ textAlign: "center",
22
+ border: `1px solid ${theme?.palette?.primary?.border13}`,
23
+ boxShadow: '0px 4px 16px 0px #0000000D'
24
+ }
25
+ });
26
+ export default FramesStyles;
@@ -1,17 +1,18 @@
1
1
  import React, { useEffect, useRef } from "react";
2
+
3
+ // const sanitize = (input) => {
4
+ // const doc = new DOMParser().parseFromString(input, "text/html");
5
+ // for (const elm of doc.querySelectorAll("*")) {
6
+ // for (const attrib of elm.attributes) {
7
+ // if (attrib.name.startsWith("on")) {
8
+ // elm.removeAttribute(attrib.name);
9
+ // }
10
+ // }
11
+ // }
12
+ // return doc.body.innerHTML;
13
+ // };
2
14
  import { jsx as _jsx } from "react/jsx-runtime";
3
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
4
- const sanitize = input => {
5
- const doc = new DOMParser().parseFromString(input, "text/html");
6
- for (const elm of doc.querySelectorAll("*")) {
7
- for (const attrib of elm.attributes) {
8
- if (attrib.name.startsWith("on")) {
9
- elm.removeAttribute(attrib.name);
10
- }
11
- }
12
- }
13
- return doc.body.innerHTML;
14
- };
15
16
  const Code = props => {
16
17
  const codeRef = useRef();
17
18
  const {
@@ -1,7 +1,6 @@
1
- import { bool } from "prop-types";
2
1
  export const validationMethods = {
3
2
  isEmail: value => {
4
- const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
3
+ const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //eslint-disable-line
5
4
  const result = regex.test(String(value).toLowerCase());
6
5
  if (result) {
7
6
  let domain = String(value).toLowerCase().split('@')[1];
@@ -10,7 +10,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const PageSettingsButton = props => {
11
11
  const {
12
12
  customProps,
13
- icoBtnType
13
+ icoBtnType,
14
+ from
14
15
  } = props;
15
16
  const [openSetttings, setOpenSettings] = useState(false);
16
17
  const editor = useSlateStatic();
@@ -40,7 +41,10 @@ const PageSettingsButton = props => {
40
41
  setOpenSettings(false);
41
42
  };
42
43
  return /*#__PURE__*/_jsxs(_Fragment, {
43
- children: [/*#__PURE__*/_jsx(ToolbarIcon, {
44
+ children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
45
+ onClick: onSettings,
46
+ className: "removeDefaultSvgCls"
47
+ }) : /*#__PURE__*/_jsx(ToolbarIcon, {
44
48
  title: "Page Settings",
45
49
  onClick: onSettings,
46
50
  icon: /*#__PURE__*/_jsx(PageSettings, {}),
@@ -206,8 +206,9 @@ const editorStyles = ({
206
206
  padding: "2px",
207
207
  borderRadius: "0px",
208
208
  "& svg": {
209
- width: "16px",
210
- height: "16px"
209
+ width: "17px",
210
+ height: "18px",
211
+ marginTop: '-1px'
211
212
  }
212
213
  }
213
214
  },
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { TextField, IconButton } from "@mui/material";
3
- import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
- import { sizeMap } from "../../utils/font.js";
3
+ import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
4
+ import { headingMap, sizeMap } from "../../utils/font.js";
5
5
  import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
6
6
  import { getBreakPointsValue } from "../../helper/theme.js";
7
7
  import useWindowResize from "../../hooks/useWindowResize.js";
@@ -46,7 +46,12 @@ const TextSize = ({
46
46
  };
47
47
  const getSizeVal = () => {
48
48
  try {
49
- const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
49
+ let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
50
+ Object.entries(headingMap).forEach(([format, value]) => {
51
+ if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
52
+ size = value;
53
+ }
54
+ });
50
55
  return parseInt(size);
51
56
  } catch (err) {
52
57
  return "";
@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
9
9
  import usePopupStyle from "../PopupTool/PopupToolStyle";
10
10
  import PopperHeader from "../PopupTool/PopperHeader";
11
11
  import { getSelectedText } from "../../utils/helper";
12
+ import { useEditorContext } from "../../hooks/useMouseMove";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -44,6 +45,9 @@ const MiniToolbar = props => {
44
45
  hideTools
45
46
  } = customProps;
46
47
  const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
48
+ const {
49
+ popupType
50
+ } = useEditorContext();
47
51
  useEffect(() => {
48
52
  if (popper) {
49
53
  setPopper(null);
@@ -73,13 +77,18 @@ const MiniToolbar = props => {
73
77
  label,
74
78
  icon: Icon
75
79
  }) => {
80
+ const isDisabled = popupType === type; // for textFormat type
81
+
76
82
  return /*#__PURE__*/_jsx(Tooltip, {
77
83
  arrow: true,
78
84
  title: label,
79
85
  children: /*#__PURE__*/_jsx(IconButton, {
80
86
  className: type === popper ? "active" : "",
81
87
  onClick: handleClick(type),
82
- children: /*#__PURE__*/_jsx(Icon, {})
88
+ disabled: isDisabled,
89
+ children: /*#__PURE__*/_jsx(Icon, {
90
+ from: "miniToolBar"
91
+ })
83
92
  })
84
93
  }, `mini_tool_btn_${type}`);
85
94
  })
@@ -1,6 +1,7 @@
1
1
  import TextIcon from "../../../assets/svg/TextIcon";
2
2
  import AddElementIcon from "../../../assets/svg/AddElementIcon";
3
3
  import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
4
+ import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
4
5
  const MENU_OPTIONS = [{
5
6
  type: "textFormat",
6
7
  icon: TextIcon,
@@ -13,5 +14,9 @@ const MENU_OPTIONS = [{
13
14
  type: "addTemplate",
14
15
  icon: AddTemplateIcon,
15
16
  label: "Add Template"
17
+ }, {
18
+ type: "pageSettings",
19
+ icon: PageSettingsButton,
20
+ label: "Page Settings"
16
21
  }];
17
22
  export default MENU_OPTIONS;
@@ -34,6 +34,9 @@ const miniToolbarStyles = theme => ({
34
34
  "& svg": {
35
35
  stroke: theme?.palette?.editor?.svgStroke
36
36
  },
37
+ "& .removeDefaultSvgCls": {
38
+ stroke: "none !important"
39
+ },
37
40
  "&.active": {
38
41
  "& svg": {
39
42
  stroke: theme?.palette?.editor?.activeColor
@@ -0,0 +1,116 @@
1
+ import { useEffect, useRef, useState } from "react";
2
+ import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
3
+ import { Button, IconButton, Popover, TextField } from "@mui/material";
4
+ import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
5
+ import useWindowResize from "../../../hooks/useWindowResize";
6
+ import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
7
+ import { headingMap, sizeMap } from "../../../utils/font";
8
+ import { useDebounce } from "use-debounce";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const fontSizeOptions = [16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
12
+ function SelectFontSize({
13
+ editor,
14
+ classes
15
+ }) {
16
+ const format = "fontSize";
17
+ const [fontSize, setFontSize] = useState();
18
+ const [anchorEl, setAnchorEl] = useState(null);
19
+ const open = Boolean(anchorEl);
20
+ const containerRef = useRef();
21
+ const [size] = useWindowResize();
22
+ const val = activeMark(editor, format);
23
+ const value = getBreakPointsValue(val, size?.device);
24
+ const [deboundedValue] = useDebounce(fontSize, 500);
25
+ const updateMarkData = newVal => {
26
+ let upData = {
27
+ ...getBreakPointsValue(val),
28
+ [size?.device]: `${newVal}px`
29
+ };
30
+
31
+ // if desktop update to all other devices
32
+ // to avoid default normal size
33
+ if (size?.device === "lg") {
34
+ upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
35
+ a[b] = `${newVal}px`;
36
+ return a;
37
+ }, {});
38
+ }
39
+ addMarkData(editor, {
40
+ format,
41
+ value: {
42
+ ...upData
43
+ }
44
+ });
45
+ };
46
+ const onChangeSize = value => {
47
+ if (value) {
48
+ let inc = parseInt(value);
49
+ inc = inc > 200 ? 200 : inc;
50
+ updateMarkData(inc);
51
+ } else {
52
+ setFontSize(null);
53
+ }
54
+ };
55
+ useEffect(() => {
56
+ if (deboundedValue) {
57
+ onChangeSize(deboundedValue);
58
+ }
59
+ }, [deboundedValue]);
60
+ const getSizeVal = () => {
61
+ try {
62
+ let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
63
+ Object.entries(headingMap).forEach(([format, value]) => {
64
+ if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
65
+ size = value;
66
+ }
67
+ });
68
+ return parseInt(size);
69
+ } catch (err) {
70
+ return "";
71
+ }
72
+ };
73
+ useEffect(() => {
74
+ setFontSize(getSizeVal());
75
+ }, [value]);
76
+ return /*#__PURE__*/_jsxs("div", {
77
+ ref: containerRef,
78
+ style: {
79
+ display: "flex",
80
+ alignItems: "center"
81
+ },
82
+ children: [/*#__PURE__*/_jsx(TextField, {
83
+ sx: classes?.miniFontSizeInput,
84
+ value: fontSize,
85
+ onChange: e => setFontSize(e.target.value),
86
+ size: "small"
87
+ }), /*#__PURE__*/_jsx(IconButton, {
88
+ onClick: e => {
89
+ e.preventDefault();
90
+ setAnchorEl(containerRef.current);
91
+ },
92
+ children: /*#__PURE__*/_jsx(DownArrowIcon, {})
93
+ }), /*#__PURE__*/_jsx(Popover, {
94
+ open: open,
95
+ anchorEl: anchorEl,
96
+ onClose: () => setAnchorEl(null),
97
+ anchorOrigin: {
98
+ vertical: 'bottom',
99
+ horizontal: 'left'
100
+ },
101
+ sx: classes.customSelectPopoverWrapper,
102
+ children: fontSizeOptions.map((s, i) => {
103
+ return /*#__PURE__*/_jsx("div", {
104
+ children: /*#__PURE__*/_jsx(Button, {
105
+ className: `customSelectOptionLabel ${fontSize === s ? "selected" : ""}`,
106
+ onClick: () => {
107
+ setFontSize(s);
108
+ },
109
+ children: s
110
+ })
111
+ }, i);
112
+ })
113
+ })]
114
+ });
115
+ }
116
+ export default SelectFontSize;
@@ -12,6 +12,7 @@ import useWindowResize from "../../../hooks/useWindowResize";
12
12
  import PopperHeader from "../PopperHeader";
13
13
  import MiniColorPicker from "./MiniColorPicker";
14
14
  import SelectAlignment from "./SelectAlignment";
15
+ import SelectFontSize from "./SelectFontSize";
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
18
  const DEFAULT_COLOR = {
@@ -64,6 +65,11 @@ const MiniTextFormat = props => {
64
65
  editor: editor
65
66
  }), /*#__PURE__*/_jsx("div", {
66
67
  className: "verticalLine mr-1"
68
+ }), /*#__PURE__*/_jsx(SelectFontSize, {
69
+ classes: classes,
70
+ editor: editor
71
+ }), /*#__PURE__*/_jsx("div", {
72
+ className: "verticalLine mr-1"
67
73
  }), fontStyle?.map((m, i) => {
68
74
  return /*#__PURE__*/_jsx(MarkButton, {
69
75
  editor: editor,
@@ -102,7 +108,6 @@ const MiniTextFormat = props => {
102
108
  TransitionProps
103
109
  }) => /*#__PURE__*/_jsx(Fade, {
104
110
  ...TransitionProps,
105
- timeout: 350,
106
111
  children: /*#__PURE__*/_jsxs(Paper, {
107
112
  style: {
108
113
  borderRadius: "10px"
@@ -499,6 +499,9 @@ const usePopupStyle = theme => ({
499
499
  }
500
500
  },
501
501
  customSelectPopoverWrapper: {
502
+ "& .MuiPopover-paper": {
503
+ maxHeight: '140px'
504
+ },
502
505
  "& .customSelectOptionLabel": {
503
506
  color: "black",
504
507
  margin: "0px",
@@ -529,6 +532,16 @@ const usePopupStyle = theme => ({
529
532
  bottom: "env(safe-area-inset-bottom)",
530
533
  left: 0,
531
534
  width: "100%"
535
+ },
536
+ miniFontSizeInput: {
537
+ "& input": {
538
+ fontSize: "14px",
539
+ width: "16px",
540
+ padding: "8px 4px"
541
+ },
542
+ "& fieldset": {
543
+ border: "none !important"
544
+ }
532
545
  }
533
546
  });
534
547
  export default usePopupStyle;
@@ -7,6 +7,7 @@ import useDrag from "../../hooks/useDrag";
7
7
  import { TableUtil } from "../../utils/table";
8
8
  import useWindowResize from "../../hooks/useWindowResize";
9
9
  import MiniTextFormat from "./MiniTextFormat";
10
+ import { useEditorContext } from "../../hooks/useMouseMove";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { Fragment as _Fragment } from "react/jsx-runtime";
12
13
  const PopupTool = props => {
@@ -15,6 +16,9 @@ const PopupTool = props => {
15
16
  setIsTextSelected
16
17
  } = props;
17
18
  const classes = usePopupStyle(theme);
19
+ const {
20
+ setPopupType
21
+ } = useEditorContext();
18
22
  const [anchorEl, setAnchorEl] = useState(null);
19
23
  const [open, setOpen] = useState(false);
20
24
  const editor = useSlate();
@@ -32,10 +36,12 @@ const PopupTool = props => {
32
36
  const isCellsSelected = table.isCellSelected(editor.selection);
33
37
  if (!isCellsSelected) {
34
38
  setOpen(true);
39
+ setPopupType("textFormat");
35
40
  setIsTextSelected(true);
36
41
  }
37
42
  } else if (!anchorEl) {
38
43
  setOpen(false);
44
+ setPopupType("");
39
45
  setIsTextSelected(false);
40
46
  }
41
47
  }, [event, anchorEl]);
@@ -65,6 +71,7 @@ const PopupTool = props => {
65
71
  const handleClose = () => {
66
72
  setAnchorEl(null);
67
73
  setOpen(false);
74
+ setPopupType("");
68
75
  };
69
76
  return open ? /*#__PURE__*/_jsx(_Fragment, {
70
77
  children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
@@ -86,7 +93,6 @@ const PopupTool = props => {
86
93
  TransitionProps
87
94
  }) => /*#__PURE__*/_jsx(Fade, {
88
95
  ...TransitionProps,
89
- timeout: 350,
90
96
  children: /*#__PURE__*/_jsx(Paper, {
91
97
  style: {
92
98
  borderRadius: "10px"
@@ -30,7 +30,7 @@ const tableStyle = [{
30
30
  key: "col.entireBgColor",
31
31
  type: "color"
32
32
  }, {
33
- label: "Selected Column Background",
33
+ label: "Selected Cell Background",
34
34
  key: "col.bgColor",
35
35
  type: "color"
36
36
  }, {
@@ -855,12 +855,13 @@ export const Carousal = props => /*#__PURE__*/_jsxs("svg", {
855
855
  fill: "#64748B"
856
856
  })]
857
857
  });
858
- export const PageSettings = props => /*#__PURE__*/_jsxs("svg", {
858
+ export const PageSettings = (props = {}) => /*#__PURE__*/_jsxs("svg", {
859
859
  xmlns: "http://www.w3.org/2000/svg",
860
860
  width: "17",
861
861
  height: "17",
862
862
  viewBox: "0 0 17 17",
863
863
  fill: "none",
864
+ ...props,
864
865
  children: [/*#__PURE__*/_jsx("path", {
865
866
  d: "M11.4648 3.24464C11.7617 3.24464 12.0024 2.9352 12.0024 2.55347C12.0024 2.17175 11.7617 1.8623 11.4648 1.8623C11.1679 1.8623 10.9272 2.17175 10.9272 2.55347C10.9272 2.9352 11.1679 3.24464 11.4648 3.24464Z",
866
867
  fill: "#64748B"
@@ -26,6 +26,8 @@ export const EditorProvider = ({
26
26
  const [drop, setDrop] = useState(0);
27
27
  const [selectedPath, setSelectedPath] = useState(null);
28
28
  const path = event?.target?.getAttribute("data-path");
29
+ const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
30
+
29
31
  const onDrop = () => {
30
32
  setDrop(drop + 1);
31
33
  };
@@ -48,7 +50,9 @@ export const EditorProvider = ({
48
50
  drop,
49
51
  theme: theme,
50
52
  selectedPath: selectedPath,
51
- setSelectedPath: setSelectedPath
53
+ setSelectedPath: setSelectedPath,
54
+ popupType,
55
+ setPopupType
52
56
  },
53
57
  children: children
54
58
  });
@@ -319,11 +319,15 @@ export const getBlock = props => {
319
319
  children: children
320
320
  });
321
321
  case "list-item":
322
+ const firstChildren = element.children[0] || {};
322
323
  return /*#__PURE__*/_jsx("li", {
323
324
  ...attributes,
324
325
  ...element.attr,
325
326
  className: `content-editable ${isEmpty ? "empty" : ""}`,
326
327
  placeholder: "List",
328
+ style: {
329
+ color: firstChildren?.color
330
+ },
327
331
  children: children
328
332
  });
329
333
  case "orderedList":
@@ -58,4 +58,9 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
58
58
  text: fontFamilyMap[m],
59
59
  value: m
60
60
  };
61
- });
61
+ });
62
+ export const headingMap = {
63
+ "headingOne": "32px",
64
+ "headingTwo": "24px",
65
+ "headingThree": "19px"
66
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "2.1.8",
3
+ "version": "2.1.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"