@flozy/editor 6.0.4 → 6.0.5
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.
- package/dist/Editor/CommonEditor.js +17 -15
- package/dist/Editor/Editor.css +3 -4
- package/dist/Editor/Elements/AI/PopoverAIInput.js +12 -2
- package/dist/Editor/Elements/Button/EditorButton.js +0 -1
- package/dist/Editor/Elements/DataView/DataView.js +3 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +19 -23
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -1
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
- package/dist/Editor/Elements/Search/SearchList.js +1 -8
- package/dist/Editor/Elements/SimpleText/index.js +7 -19
- package/dist/Editor/Elements/SimpleText/style.js +1 -5
- package/dist/Editor/Elements/Table/Table.js +15 -15
- package/dist/Editor/Elements/Table/TableCell.js +9 -14
- package/dist/Editor/MiniEditor.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +28 -37
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +8 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +3 -9
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
- package/dist/Editor/Toolbar/PopupTool/index.js +29 -39
- package/dist/Editor/common/FontLoader/FontList.js +11 -11
- package/dist/Editor/common/FontLoader/FontLoader.js +75 -45
- package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -1
- package/dist/Editor/common/ImageSelector/UploadStyles.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -6
- package/dist/Editor/common/Section/index.js +60 -89
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
- package/dist/Editor/commonStyle.js +0 -5
- package/dist/Editor/helper/deserialize/index.js +1 -1
- package/dist/Editor/helper/theme.js +1 -24
- package/dist/Editor/hooks/useEditorScroll.js +1 -1
- package/dist/Editor/hooks/useMouseMove.js +4 -6
- package/dist/Editor/plugins/withHTML.js +1 -7
- package/dist/Editor/utils/SlateUtilityFunctions.js +10 -11
- package/dist/Editor/utils/customHooks/useTableResize.js +1 -2
- package/dist/Editor/utils/helper.js +0 -41
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/dist/Editor/utils/table.js +0 -21
- package/package.json +3 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
- package/dist/Editor/helper/ensureWrappedVariables.js +0 -28
@@ -58,7 +58,6 @@ const useElementSettingsStyle = theme => ({
|
|
58
58
|
maxHeight: "500px",
|
59
59
|
overflowX: "hidden",
|
60
60
|
overflowY: "auto",
|
61
|
-
paddingLeft: "4px",
|
62
61
|
background: theme?.palette?.editor?.background,
|
63
62
|
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
64
63
|
color: theme?.palette?.editor?.textColor
|
@@ -3,7 +3,6 @@ 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 => {
|
@@ -12,9 +11,6 @@ const SwitchViewport = props => {
|
|
12
11
|
onChange
|
13
12
|
} = props;
|
14
13
|
const classes = useSwitchViewport();
|
15
|
-
const {
|
16
|
-
setActiveBreakPoint
|
17
|
-
} = useEditorContext();
|
18
14
|
useEffect(() => {
|
19
15
|
console.log(breakpoint);
|
20
16
|
}, [breakpoint]);
|
@@ -25,7 +21,6 @@ const SwitchViewport = props => {
|
|
25
21
|
children: /*#__PURE__*/_jsx(IconButton, {
|
26
22
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
27
23
|
onClick: () => {
|
28
|
-
setActiveBreakPoint("");
|
29
24
|
onChange("");
|
30
25
|
},
|
31
26
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -35,7 +30,6 @@ const SwitchViewport = props => {
|
|
35
30
|
children: /*#__PURE__*/_jsx(IconButton, {
|
36
31
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
37
32
|
onClick: () => {
|
38
|
-
setActiveBreakPoint("xs");
|
39
33
|
onChange("xs");
|
40
34
|
},
|
41
35
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -2,36 +2,34 @@ import React, { useRef, useState } from "react";
|
|
2
2
|
import { useTheme } from "@mui/material";
|
3
3
|
import { Transforms } from "slate";
|
4
4
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
5
|
-
import { Box, IconButton,
|
5
|
+
import { Box, IconButton, Tooltip } from "@mui/material";
|
6
6
|
import SectionPopup from "../../Elements/Grid/SectionPopup";
|
7
7
|
import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
|
8
|
-
import DragHandle from "../DnD/DragHandleButton";
|
9
|
-
import { useEditorSelection } from "../../hooks/useMouseMove";
|
8
|
+
// import DragHandle from "../DnD/DragHandleButton";
|
9
|
+
// import { useEditorSelection } from "../../hooks/useMouseMove";
|
10
10
|
import SectionStyle from "./styles";
|
11
11
|
import useWindowResize from "../../hooks/useWindowResize";
|
12
12
|
import { SectionSettingIcon } from "../iconListV2";
|
13
|
+
|
14
|
+
// const list_types = ["orderedList", "unorderedList"];
|
13
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
16
17
|
const Toolbar = ({
|
17
|
-
fromPopper,
|
18
18
|
readOnly,
|
19
19
|
showTool,
|
20
|
-
onSettings
|
20
|
+
onSettings,
|
21
|
+
isSectionFullWidth
|
21
22
|
}) => {
|
22
23
|
return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
|
23
24
|
component: "div",
|
24
25
|
className: `element-toolbar no-border-button hr section-tw sectionIcon`,
|
25
26
|
contentEditable: false,
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
} : {
|
33
|
-
left: "-28px",
|
34
|
-
top: "1px"
|
27
|
+
sx: {
|
28
|
+
left: isSectionFullWidth ? "0px" : "-28px",
|
29
|
+
top: isSectionFullWidth ? "-28px" : "1px",
|
30
|
+
"&:hover": {
|
31
|
+
backgroundColor: "rgba(0,0,0,0.5)"
|
32
|
+
}
|
35
33
|
},
|
36
34
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
37
35
|
title: "Section Settings",
|
@@ -42,7 +40,6 @@ const Toolbar = ({
|
|
42
40
|
})
|
43
41
|
}) : null;
|
44
42
|
};
|
45
|
-
const list_types = ["orderedList", "unorderedList"];
|
46
43
|
const Section = props => {
|
47
44
|
const themeReact = useTheme();
|
48
45
|
const theme = props?.theme;
|
@@ -56,7 +53,8 @@ const Section = props => {
|
|
56
53
|
readOnly
|
57
54
|
} = customProps;
|
58
55
|
const editor = useSlateStatic();
|
59
|
-
const [
|
56
|
+
// const [isHovering, setIsHovering] = useState(false);
|
57
|
+
const [size] = useWindowResize();
|
60
58
|
const [openSetttings, setOpenSettings] = useState(false);
|
61
59
|
const {
|
62
60
|
sectionBgColor,
|
@@ -73,41 +71,11 @@ const Section = props => {
|
|
73
71
|
} = sectionAlignment || {};
|
74
72
|
const path = ReactEditor.findPath(editor, element);
|
75
73
|
const anchorEl = useRef(null);
|
76
|
-
const popperEl = useRef(null);
|
77
|
-
const [
|
74
|
+
// const popperEl = useRef(null);
|
75
|
+
// const [showTool] = useEditorSelection(editor);
|
78
76
|
const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
|
79
|
-
const [
|
80
|
-
const
|
81
|
-
setIsHovering(true);
|
82
|
-
};
|
83
|
-
const onMouseLeave = () => {
|
84
|
-
setIsHovering(false);
|
85
|
-
};
|
86
|
-
const onSettings = () => {
|
87
|
-
setOpenSettings(true);
|
88
|
-
};
|
89
|
-
const onSave = data => {
|
90
|
-
const updateData = {
|
91
|
-
...data
|
92
|
-
};
|
93
|
-
delete updateData.children;
|
94
|
-
Transforms.setNodes(editor, {
|
95
|
-
...updateData
|
96
|
-
}, {
|
97
|
-
at: path
|
98
|
-
});
|
99
|
-
onClose();
|
100
|
-
};
|
101
|
-
const onClose = () => {
|
102
|
-
setOpenSettings(false);
|
103
|
-
};
|
104
|
-
const onDelete = () => {
|
105
|
-
Transforms.removeNodes(editor, {
|
106
|
-
at: path
|
107
|
-
});
|
108
|
-
};
|
109
|
-
const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
|
110
|
-
const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
|
77
|
+
const isFreeGrid = element?.children[0]?.type === "freegrid";
|
78
|
+
const needHover = false;
|
111
79
|
let tempProps = {};
|
112
80
|
if (element?.type === "temp") {
|
113
81
|
tempProps = {
|
@@ -131,6 +99,38 @@ const Section = props => {
|
|
131
99
|
...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
|
132
100
|
}
|
133
101
|
}, themeReact);
|
102
|
+
|
103
|
+
// const onMouseEnter = () => {
|
104
|
+
// setIsHovering(true);
|
105
|
+
// };
|
106
|
+
|
107
|
+
// const onMouseLeave = () => {
|
108
|
+
// setIsHovering(false);
|
109
|
+
// };
|
110
|
+
|
111
|
+
const onSettings = () => {
|
112
|
+
setOpenSettings(true);
|
113
|
+
};
|
114
|
+
const onSave = data => {
|
115
|
+
const updateData = {
|
116
|
+
...data
|
117
|
+
};
|
118
|
+
delete updateData.children;
|
119
|
+
Transforms.setNodes(editor, {
|
120
|
+
...updateData
|
121
|
+
}, {
|
122
|
+
at: path
|
123
|
+
});
|
124
|
+
onClose();
|
125
|
+
};
|
126
|
+
const onClose = () => {
|
127
|
+
setOpenSettings(false);
|
128
|
+
};
|
129
|
+
const onDelete = () => {
|
130
|
+
Transforms.removeNodes(editor, {
|
131
|
+
at: path
|
132
|
+
});
|
133
|
+
};
|
134
134
|
return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
|
135
135
|
component: "div",
|
136
136
|
className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
|
@@ -145,9 +145,10 @@ const Section = props => {
|
|
145
145
|
flexDirection: flexDirection || "column",
|
146
146
|
alignItems: horizantal,
|
147
147
|
justifyContent: vertical
|
148
|
-
}
|
149
|
-
|
150
|
-
|
148
|
+
}
|
149
|
+
// onMouseEnter={onMouseEnter}
|
150
|
+
// onMouseLeave={onMouseLeave}
|
151
|
+
,
|
151
152
|
children: [/*#__PURE__*/_jsxs(Box, {
|
152
153
|
className: "ed-section-inner",
|
153
154
|
sx: {
|
@@ -155,41 +156,11 @@ const Section = props => {
|
|
155
156
|
...edInnerSp
|
156
157
|
},
|
157
158
|
ref: anchorEl,
|
158
|
-
children: [
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
zIndex: 9999
|
164
|
-
},
|
165
|
-
disablePortal: true,
|
166
|
-
ref: popperEl,
|
167
|
-
className: "sectionPopper",
|
168
|
-
children: /*#__PURE__*/_jsxs(Box, {
|
169
|
-
sx: {
|
170
|
-
bgcolor: "background.paper",
|
171
|
-
height: "30px",
|
172
|
-
position: "relative",
|
173
|
-
background: theme?.palette?.type === "dark" ? theme?.palette?.editor?.miniToolBarBackground : "#F6F6F6"
|
174
|
-
},
|
175
|
-
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
176
|
-
...props,
|
177
|
-
fromPopper: true
|
178
|
-
}) : null, /*#__PURE__*/_jsx(Toolbar, {
|
179
|
-
fromPopper: true,
|
180
|
-
readOnly: readOnly,
|
181
|
-
showTool: showTool,
|
182
|
-
onSettings: onSettings
|
183
|
-
})]
|
184
|
-
})
|
185
|
-
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
186
|
-
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
187
|
-
...props
|
188
|
-
}) : null, /*#__PURE__*/_jsx(Toolbar, {
|
189
|
-
readOnly: readOnly,
|
190
|
-
showTool: showTool,
|
191
|
-
onSettings: onSettings
|
192
|
-
})]
|
159
|
+
children: [/*#__PURE__*/_jsx(Toolbar, {
|
160
|
+
isSectionFullWidth: isSectionFullWidth,
|
161
|
+
readOnly: readOnly,
|
162
|
+
showTool: false,
|
163
|
+
onSettings: onSettings
|
193
164
|
}), children]
|
194
165
|
}), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
|
195
166
|
element: {
|
@@ -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;
|
@@ -49,11 +49,6 @@ 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
|
-
},
|
57
52
|
"& p": {
|
58
53
|
marginBottom: "7px",
|
59
54
|
marginTop: "4px"
|
@@ -175,7 +175,7 @@ const deserialize = el => {
|
|
175
175
|
if (el.nodeType === 3) {
|
176
176
|
// if there is any line-breaks
|
177
177
|
const match = /\r|\n/.exec(el.textContent);
|
178
|
-
const text = el.textContent.replace(/\r|\n/g, "").trim();
|
178
|
+
const text = el.textContent?.trim()?.length === 0 ? el.textContent.replace(/\r|\n/g, "").trim() : el.textContent;
|
179
179
|
return match && !text ? null : {
|
180
180
|
text,
|
181
181
|
...getInlineTextStyles(el.parentNode)
|
@@ -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);
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { useEffect, useState, createContext, useContext, useMemo } from "react";
|
2
2
|
import { getSelectedText } from "../utils/helper";
|
3
3
|
import { debounce } from "../helper";
|
4
|
+
import { defaultFontFamilies } from "../common/FontLoader/FontList";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
const EditorContext = /*#__PURE__*/createContext();
|
6
7
|
export const useEditorSelection = editor => {
|
@@ -34,8 +35,7 @@ export const EditorProvider = ({
|
|
34
35
|
const [contextMenu, setContextMenu] = useState({
|
35
36
|
path: null
|
36
37
|
});
|
37
|
-
const [fontFamilies, setFontFamilies] = useState(
|
38
|
-
const [activeBreakPoint, setActiveBreakPoint] = useState("");
|
38
|
+
const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
|
39
39
|
useEffect(() => {
|
40
40
|
window.updateSelectedItem = d => {
|
41
41
|
setSelectedElement(d);
|
@@ -98,10 +98,8 @@ export const EditorProvider = ({
|
|
98
98
|
setOpenAI,
|
99
99
|
updateDragging,
|
100
100
|
fontFamilies,
|
101
|
-
setFontFamilies
|
102
|
-
|
103
|
-
setActiveBreakPoint
|
104
|
-
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
|
101
|
+
setFontFamilies
|
102
|
+
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
|
105
103
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
106
104
|
value: otherValues,
|
107
105
|
children: children
|
@@ -253,13 +253,7 @@ const withHtml = editor => {
|
|
253
253
|
return;
|
254
254
|
}
|
255
255
|
const fragment = deserialize(parsed.body);
|
256
|
-
const
|
257
|
-
if (normalizeFragment && isNonText) {
|
258
|
-
// When a non-text node is pasted into a list item, insert it into the next node.
|
259
|
-
insertAtNextNode(editor, fragment);
|
260
|
-
return;
|
261
|
-
}
|
262
|
-
const formattedFragment = normalizeFragment ? normalizeFragment(fragment) : fragment;
|
256
|
+
const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
|
263
257
|
let is_img_table = false;
|
264
258
|
formattedFragment.map(f => {
|
265
259
|
if (f.type === "image" || f?.type?.includes("table")) {
|
@@ -155,7 +155,7 @@ export const activeMark = (editor, format) => {
|
|
155
155
|
const defaultMarkData = {
|
156
156
|
color: "#000000",
|
157
157
|
bgColor: "#FFFFFF",
|
158
|
-
fontSize: "
|
158
|
+
fontSize: "14px",
|
159
159
|
fontFamily: "PoppinsRegular",
|
160
160
|
fontWeight: "normal"
|
161
161
|
};
|
@@ -173,9 +173,10 @@ export const getMarked = (leaf, children, theme) => {
|
|
173
173
|
if (leaf.highlight) {
|
174
174
|
children = /*#__PURE__*/_jsx("span", {
|
175
175
|
style: {
|
176
|
-
color: "inherit"
|
177
|
-
background: "var(--slate-highlight-bg)"
|
176
|
+
color: "inherit"
|
178
177
|
},
|
178
|
+
className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
|
179
|
+
,
|
179
180
|
children: children
|
180
181
|
});
|
181
182
|
}
|
@@ -337,8 +338,7 @@ export const getBlock = props => {
|
|
337
338
|
borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
|
338
339
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
339
340
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
340
|
-
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
|
341
|
-
lineHeight: 1.43
|
341
|
+
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
|
342
342
|
},
|
343
343
|
children: children
|
344
344
|
});
|
@@ -398,9 +398,6 @@ export const getBlock = props => {
|
|
398
398
|
});
|
399
399
|
case "orderedList":
|
400
400
|
return /*#__PURE__*/_jsx("ol", {
|
401
|
-
style: {
|
402
|
-
lineHeight: 1.43
|
403
|
-
},
|
404
401
|
className: "listItemMargin",
|
405
402
|
type: "1",
|
406
403
|
...attributes,
|
@@ -408,9 +405,6 @@ export const getBlock = props => {
|
|
408
405
|
});
|
409
406
|
case "unorderedList":
|
410
407
|
return /*#__PURE__*/_jsx("ul", {
|
411
|
-
style: {
|
412
|
-
lineHeight: 1.43
|
413
|
-
},
|
414
408
|
className: "listItemMargin",
|
415
409
|
...attributes,
|
416
410
|
children: children
|
@@ -620,6 +614,11 @@ export const getBlock = props => {
|
|
620
614
|
children: children
|
621
615
|
});
|
622
616
|
default:
|
617
|
+
// return (
|
618
|
+
// <span {...attributes} {...element.attr}>
|
619
|
+
// {children}
|
620
|
+
// </span>
|
621
|
+
// );
|
623
622
|
return /*#__PURE__*/_jsx(SimpleText, {
|
624
623
|
...props,
|
625
624
|
isEmpty: isEmpty
|
@@ -43,8 +43,7 @@ const useTableResize = ({
|
|
43
43
|
minWidth
|
44
44
|
} = minMaxProps || {};
|
45
45
|
setSize(currentSize => {
|
46
|
-
const
|
47
|
-
const calcWidth = width + e.movementX;
|
46
|
+
const calcWidth = currentSize?.width + e.movementX;
|
48
47
|
return {
|
49
48
|
width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
|
50
49
|
height: currentSize.height + e.movementY,
|
@@ -713,47 +713,6 @@ export const getSlateDom = (editor, range) => {
|
|
713
713
|
console.log(err);
|
714
714
|
}
|
715
715
|
};
|
716
|
-
|
717
|
-
// The inputs inside the dynamic table lose focus after calling `setNodes` on the first `onChange` event.
|
718
|
-
// To replicate this issue, insert some paragraph nodes above the dynamic table, then type something in the title.
|
719
|
-
// After typing the first word, the input loses focus.
|
720
|
-
export const focusDynamicTableInput = e => {
|
721
|
-
setTimeout(() => {
|
722
|
-
const input = document.getElementById(e.target.id);
|
723
|
-
if (input) {
|
724
|
-
// Check if the input is not already focused
|
725
|
-
if (document.activeElement !== input) {
|
726
|
-
const length = input.value.length;
|
727
|
-
// Focus on the input
|
728
|
-
input.focus();
|
729
|
-
|
730
|
-
// number input not supports selection
|
731
|
-
if (e.target.type !== "number") {
|
732
|
-
// Set the cursor to the end
|
733
|
-
input.setSelectionRange(length, length);
|
734
|
-
}
|
735
|
-
}
|
736
|
-
}
|
737
|
-
}, 0);
|
738
|
-
};
|
739
|
-
export const clearWindowSelection = () => {
|
740
|
-
const selection = window.getSelection();
|
741
|
-
if (selection) {
|
742
|
-
selection.removeAllRanges(); // Clears the selection
|
743
|
-
}
|
744
|
-
};
|
745
|
-
|
746
|
-
export const viewSlateSelection = () => {
|
747
|
-
// if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
|
748
|
-
clearWindowSelection();
|
749
|
-
const selectionBg = "rgba(35, 131, 226, 0.35)";
|
750
|
-
const root = document.documentElement;
|
751
|
-
root.style.setProperty("--slate-highlight-bg", selectionBg);
|
752
|
-
};
|
753
|
-
export const hideSlateSelection = () => {
|
754
|
-
const root = document.documentElement;
|
755
|
-
root.style.setProperty("--slate-highlight-bg", "none");
|
756
|
-
};
|
757
716
|
export function handleNegativeInteger(val) {
|
758
717
|
return val < 0 ? 0 : val;
|
759
718
|
}
|
@@ -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
|
};
|
@@ -753,25 +753,4 @@ export const clearCellText = (editor, currentCellPath) => {
|
|
753
753
|
} catch (err) {
|
754
754
|
console.log(err);
|
755
755
|
}
|
756
|
-
};
|
757
|
-
export const getTableColumns = element => {
|
758
|
-
const {
|
759
|
-
columns,
|
760
|
-
children
|
761
|
-
} = element || {};
|
762
|
-
if (columns) {
|
763
|
-
return columns;
|
764
|
-
}
|
765
|
-
const firstRow = children?.length ? children[0] : {};
|
766
|
-
return firstRow?.children?.length || 0;
|
767
|
-
};
|
768
|
-
export const getTableRows = element => {
|
769
|
-
const {
|
770
|
-
rows,
|
771
|
-
children
|
772
|
-
} = element || {};
|
773
|
-
if (rows) {
|
774
|
-
return rows;
|
775
|
-
}
|
776
|
-
return children?.length || 0;
|
777
756
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "6.0.
|
3
|
+
"version": "6.0.5",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -61,7 +61,7 @@
|
|
61
61
|
"scripts": {
|
62
62
|
"prepare": "husky install .husky",
|
63
63
|
"analyze": "source-map-explorer build/static/js/*.js",
|
64
|
-
"lint": "./node_modules/.
|
64
|
+
"lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
|
65
65
|
"start": "craco start",
|
66
66
|
"build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
|
67
67
|
"test": "craco test --passWithNoTests",
|
@@ -69,7 +69,7 @@
|
|
69
69
|
"storybook": "storybook dev -p 6006",
|
70
70
|
"build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
|
71
71
|
"publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
|
72
|
-
"publish:local": "rm -rf /Users/
|
72
|
+
"publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
|
73
73
|
},
|
74
74
|
"eslintConfig": {
|
75
75
|
"extends": [
|
@@ -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;
|