@flozy/editor 4.0.2 → 4.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +14 -9
- package/dist/Editor/CommonEditor.js +185 -170
- package/dist/Editor/DialogWrapper.js +4 -3
- package/dist/Editor/Editor.css +5 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +52 -41
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
- package/dist/Editor/Elements/AppHeader/AppHeader.js +39 -26
- package/dist/Editor/Elements/Button/EditorButton.js +33 -38
- package/dist/Editor/Elements/Carousel/CarouselButton.js +0 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -59
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Embed/Image.js +15 -14
- package/dist/Editor/Elements/Embed/Video.js +12 -8
- package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
- package/dist/Editor/Elements/Form/Form.js +43 -27
- package/dist/Editor/Elements/Form/FormField.js +21 -10
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Form/Workflow/index.js +5 -2
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +437 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +206 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +236 -0
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +44 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
- package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +19 -0
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +214 -0
- package/dist/Editor/Elements/Grid/Grid.js +11 -9
- package/dist/Editor/Elements/Grid/GridItem.js +31 -23
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +15 -18
- package/dist/Editor/Elements/NewLine/NewLineButton.js +0 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
- package/dist/Editor/Elements/SimpleText/index.js +18 -16
- package/dist/Editor/Elements/SimpleText/style.js +43 -0
- package/dist/Editor/ErrorBoundary.js +30 -0
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +28 -0
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +14 -26
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -68
- package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
- package/dist/Editor/Toolbar/Toolbar.js +7 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +16 -48
- package/dist/Editor/common/ColorPickerButton.js +9 -25
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/EditorCmds.js +0 -3
- package/dist/Editor/common/Icon.js +16 -34
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +1 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/MentionsPopup/index.js +12 -8
- package/dist/Editor/common/RnD/ContextMenu/CMenus.js +142 -0
- package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
- package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
- package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
- package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
- package/dist/Editor/common/RnD/DragOver/index.js +55 -0
- package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +102 -0
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +95 -0
- package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +36 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +60 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +9 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +48 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +47 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +17 -0
- package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +18 -0
- package/dist/Editor/common/RnD/ElementSettings/styles.js +94 -0
- package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
- package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
- package/dist/Editor/common/RnD/GuideLines/styles.js +62 -0
- package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
- package/dist/Editor/common/RnD/RnDCopy.js +23 -0
- package/dist/Editor/common/RnD/ShadowElement.js +34 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
- package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
- package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
- package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
- package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +20 -0
- package/dist/Editor/common/RnD/TransformHandles/index.js +67 -0
- package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
- package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
- package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +181 -0
- package/dist/Editor/common/RnD/Utils/index.js +251 -0
- package/dist/Editor/common/RnD/VirtualElement/index.js +77 -0
- package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
- package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
- package/dist/Editor/common/RnD/index.js +567 -0
- package/dist/Editor/common/RnD/styles.js +4 -0
- package/dist/Editor/common/Section/index.js +21 -12
- package/dist/Editor/common/Section/styles.js +7 -4
- package/dist/Editor/common/Shorthands/elements.js +12 -54
- package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +36 -44
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +23 -33
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +18 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +5 -3
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
- package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
- package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
- package/dist/Editor/helper/breakpoint.js +5 -0
- package/dist/Editor/helper/index.js +139 -0
- package/dist/Editor/helper/theme.js +48 -186
- package/dist/Editor/hooks/useBreakpoints.js +34 -0
- package/dist/Editor/hooks/useMouseMove.js +37 -12
- package/dist/Editor/hooks/withCommon.js +2 -1
- package/dist/Editor/hooks/withErrorHandling.js +14 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +197 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +60 -164
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/events.js +5 -0
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/form.js +7 -2
- package/dist/Editor/utils/formfield.js +1 -1
- package/dist/Editor/utils/freegrid.js +91 -0
- package/dist/Editor/utils/helper.js +44 -30
- package/dist/Editor/utils/insertAppHeader.js +47 -40
- package/package.json +5 -2
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -0,0 +1,236 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Transforms, Node, Path } from "slate";
|
3
|
+
import { useSlateStatic } from "slate-react";
|
4
|
+
import { ReactEditor } from "slate-react";
|
5
|
+
import { Box, useTheme } from "@mui/material";
|
6
|
+
import RnD from "../../common/RnD";
|
7
|
+
import { onDropItem } from "../../common/RnD/Utils/gridDropItem";
|
8
|
+
import useBreakpoints from "../../hooks/useBreakpoints";
|
9
|
+
import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
|
10
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
11
|
+
import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
|
12
|
+
import { bringItemToFB } from "../../helper";
|
13
|
+
import itemOptions from "./Options/sectionItemOptions";
|
14
|
+
import { formField } from "../../utils/formfield";
|
15
|
+
import Workflow from "../Form/Workflow";
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
17
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
18
|
+
const FreeGridItem = props => {
|
19
|
+
const theme = useTheme();
|
20
|
+
const breakpoint = useBreakpoints(theme);
|
21
|
+
const {
|
22
|
+
element,
|
23
|
+
attributes,
|
24
|
+
children,
|
25
|
+
customProps
|
26
|
+
} = props;
|
27
|
+
const editor = useSlateStatic();
|
28
|
+
const path = ReactEditor.findPath(editor, element);
|
29
|
+
const {
|
30
|
+
readOnly
|
31
|
+
} = customProps;
|
32
|
+
const {
|
33
|
+
updated_at,
|
34
|
+
childType,
|
35
|
+
zIndex
|
36
|
+
} = element;
|
37
|
+
// get values based on breakpoint size
|
38
|
+
const {
|
39
|
+
gridArea,
|
40
|
+
width,
|
41
|
+
height,
|
42
|
+
left,
|
43
|
+
top,
|
44
|
+
marginTop
|
45
|
+
} = breakpointValues(element.type, breakpoint, element);
|
46
|
+
const {
|
47
|
+
setSelectedElement,
|
48
|
+
selectedElement
|
49
|
+
} = useEditorContext();
|
50
|
+
const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
|
51
|
+
const [openWorkflow, setOpenWorkflow] = useState(false);
|
52
|
+
const onChangeSettings = () => {};
|
53
|
+
const onChange = data => {
|
54
|
+
let updateData = {
|
55
|
+
...data
|
56
|
+
};
|
57
|
+
delete updateData.children;
|
58
|
+
updateData = formatBreakpointValues(element.type, breakpoint, updateData);
|
59
|
+
Transforms.setNodes(editor, {
|
60
|
+
...updateData
|
61
|
+
}, {
|
62
|
+
at: path
|
63
|
+
});
|
64
|
+
};
|
65
|
+
const handleDragEvent = (type, data, cb) => {
|
66
|
+
const toPosition = {
|
67
|
+
left: left + data.lastX,
|
68
|
+
top: top + data.lastY
|
69
|
+
};
|
70
|
+
const {
|
71
|
+
node,
|
72
|
+
...rest
|
73
|
+
} = data;
|
74
|
+
switch (type) {
|
75
|
+
case "stop":
|
76
|
+
const updated_data = onDropItem({
|
77
|
+
editor,
|
78
|
+
fromPosition: {
|
79
|
+
left,
|
80
|
+
top
|
81
|
+
},
|
82
|
+
toPosition,
|
83
|
+
path,
|
84
|
+
ref: node,
|
85
|
+
breakpoint,
|
86
|
+
...rest
|
87
|
+
}, ".freegrid-container");
|
88
|
+
if (cb) {
|
89
|
+
cb(updated_data);
|
90
|
+
}
|
91
|
+
break;
|
92
|
+
default:
|
93
|
+
}
|
94
|
+
};
|
95
|
+
const handleResizeEvent = (type, data, cb) => {
|
96
|
+
switch (type) {
|
97
|
+
case "stop":
|
98
|
+
return;
|
99
|
+
default:
|
100
|
+
}
|
101
|
+
};
|
102
|
+
const onDelete = () => {
|
103
|
+
try {
|
104
|
+
Transforms.removeNodes(editor, {
|
105
|
+
at: path
|
106
|
+
});
|
107
|
+
} catch (err) {
|
108
|
+
console.log(err);
|
109
|
+
}
|
110
|
+
};
|
111
|
+
const handleContextMenuClick = d => {
|
112
|
+
switch (d?.name) {
|
113
|
+
case "bringForward":
|
114
|
+
bringItemToFB(editor, {
|
115
|
+
path,
|
116
|
+
moveFront: true
|
117
|
+
});
|
118
|
+
break;
|
119
|
+
case "bringBackward":
|
120
|
+
bringItemToFB(editor, {
|
121
|
+
path,
|
122
|
+
moveFront: false
|
123
|
+
});
|
124
|
+
break;
|
125
|
+
case "cut":
|
126
|
+
window.copiedNode = JSON.stringify(Node.get(editor, path));
|
127
|
+
onDelete();
|
128
|
+
focusOnNewItem(editor, Path.parent(path), {
|
129
|
+
setSelectedElement
|
130
|
+
});
|
131
|
+
break;
|
132
|
+
case "copy":
|
133
|
+
window.copiedNode = JSON.stringify(Node.get(editor, path));
|
134
|
+
break;
|
135
|
+
case "delete":
|
136
|
+
onDelete();
|
137
|
+
setSelectedElement({});
|
138
|
+
break;
|
139
|
+
default:
|
140
|
+
return;
|
141
|
+
}
|
142
|
+
};
|
143
|
+
const onAddFormField = () => {
|
144
|
+
try {
|
145
|
+
Transforms.insertNodes(editor, {
|
146
|
+
...formField()
|
147
|
+
}, {
|
148
|
+
at: [...path, 0, 0]
|
149
|
+
});
|
150
|
+
} catch (err) {
|
151
|
+
console.log(err, "Add Field Error in Form Builder");
|
152
|
+
}
|
153
|
+
};
|
154
|
+
const closeWorkflow = () => {
|
155
|
+
setOpenWorkflow(false);
|
156
|
+
};
|
157
|
+
const onWorkflowSave = data => {
|
158
|
+
const updateData = {
|
159
|
+
...data
|
160
|
+
};
|
161
|
+
delete updateData.children;
|
162
|
+
Transforms.setNodes(editor, {
|
163
|
+
...updateData
|
164
|
+
}, {
|
165
|
+
at: [...path, 0]
|
166
|
+
});
|
167
|
+
};
|
168
|
+
const handleActionClick = type => {
|
169
|
+
switch (type) {
|
170
|
+
case "workFlow":
|
171
|
+
setSelectedElement({
|
172
|
+
...selectedElement,
|
173
|
+
enable: 2
|
174
|
+
});
|
175
|
+
setOpenWorkflow(true);
|
176
|
+
break;
|
177
|
+
case "addFormField":
|
178
|
+
onAddFormField();
|
179
|
+
break;
|
180
|
+
default:
|
181
|
+
break;
|
182
|
+
}
|
183
|
+
};
|
184
|
+
return /*#__PURE__*/_jsx(RnD, {
|
185
|
+
id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
|
186
|
+
className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
|
187
|
+
editor: editor,
|
188
|
+
path: path,
|
189
|
+
actions: itemOptions[childType] || itemOptions?.default,
|
190
|
+
settingsProps: {
|
191
|
+
settings: "freegridItem",
|
192
|
+
onChange: onChangeSettings,
|
193
|
+
customProps
|
194
|
+
},
|
195
|
+
style: {
|
196
|
+
"--left": `${left || 0}px`,
|
197
|
+
"--marginTop": `${marginTop || 0}px`,
|
198
|
+
"--gridArea": `${gridArea}`,
|
199
|
+
"--width": `${width}px`,
|
200
|
+
"--height": `${height}px`,
|
201
|
+
"--zIndex": 100 + arrangeIndex
|
202
|
+
},
|
203
|
+
defaultStyle: {
|
204
|
+
height: `${height}px`,
|
205
|
+
width: `${width}px`
|
206
|
+
},
|
207
|
+
gridArea: gridArea,
|
208
|
+
onChange: onChange,
|
209
|
+
delta: {
|
210
|
+
width,
|
211
|
+
height
|
212
|
+
},
|
213
|
+
handleDragEvent: handleDragEvent,
|
214
|
+
handleResizeEvent: handleResizeEvent,
|
215
|
+
readOnly: readOnly,
|
216
|
+
childType: childType || "",
|
217
|
+
handleContextMenuClick: handleContextMenuClick,
|
218
|
+
handleActionClick: handleActionClick,
|
219
|
+
itemData: {
|
220
|
+
left: left || 0
|
221
|
+
},
|
222
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
223
|
+
component: "div",
|
224
|
+
...attributes,
|
225
|
+
className: `fgi_type_${childType}`,
|
226
|
+
children: [children, /*#__PURE__*/_jsx(Workflow, {
|
227
|
+
openWorkflow: openWorkflow,
|
228
|
+
element: element,
|
229
|
+
customWorkflowElement: element?.children?.[0] || null,
|
230
|
+
closeWorkflow: closeWorkflow,
|
231
|
+
onSave: onWorkflowSave
|
232
|
+
})]
|
233
|
+
})
|
234
|
+
});
|
235
|
+
};
|
236
|
+
export default FreeGridItem;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box, List, ListItemButton } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const AddElement = props => {
|
6
|
+
const {
|
7
|
+
handleClick
|
8
|
+
} = props;
|
9
|
+
return /*#__PURE__*/_jsx(Box, {
|
10
|
+
children: /*#__PURE__*/_jsxs(List, {
|
11
|
+
className: "item-list-wrpr",
|
12
|
+
children: [/*#__PURE__*/_jsx(ListItemButton, {
|
13
|
+
className: "item-wrapper",
|
14
|
+
onClick: handleClick("addText"),
|
15
|
+
children: "Text"
|
16
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
17
|
+
className: "item-wrapper",
|
18
|
+
onClick: handleClick("addButton"),
|
19
|
+
children: "Button"
|
20
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
21
|
+
className: "item-wrapper",
|
22
|
+
onClick: handleClick("addImage"),
|
23
|
+
children: "Image"
|
24
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
25
|
+
className: "item-wrapper",
|
26
|
+
onClick: handleClick("addVideo"),
|
27
|
+
children: "Video"
|
28
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
29
|
+
className: "item-wrapper",
|
30
|
+
onClick: handleClick("addBox"),
|
31
|
+
children: "Box"
|
32
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
33
|
+
className: "item-wrapper",
|
34
|
+
onClick: handleClick("addForm"),
|
35
|
+
children: "Form"
|
36
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
37
|
+
className: "item-wrapper",
|
38
|
+
onClick: handleClick("addAppHeader"),
|
39
|
+
children: "App Header"
|
40
|
+
})]
|
41
|
+
})
|
42
|
+
});
|
43
|
+
};
|
44
|
+
export default AddElement;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box, List, ListItemButton } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const More = props => {
|
6
|
+
const {
|
7
|
+
handleClick
|
8
|
+
} = props;
|
9
|
+
return /*#__PURE__*/_jsx(Box, {
|
10
|
+
children: /*#__PURE__*/_jsxs(List, {
|
11
|
+
className: "item-list-wrpr",
|
12
|
+
children: [/*#__PURE__*/_jsx(ListItemButton, {
|
13
|
+
className: "item-wrapper",
|
14
|
+
onClick: handleClick("addSection"),
|
15
|
+
children: "Add Section"
|
16
|
+
}), /*#__PURE__*/_jsx(ListItemButton, {
|
17
|
+
className: "item-wrapper",
|
18
|
+
onClick: handleClick("duplicateSection"),
|
19
|
+
children: "Duplicate Section"
|
20
|
+
})]
|
21
|
+
})
|
22
|
+
});
|
23
|
+
};
|
24
|
+
export default More;
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Transforms, Node } from "slate";
|
3
|
+
import { Box } from "@mui/material";
|
4
|
+
import { StyleContent } from "../../../common/StyleBuilder";
|
5
|
+
import sectionStyle from "../../../common/StyleBuilder/sectionStyle";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
const SectionSettings = props => {
|
8
|
+
const {
|
9
|
+
editor,
|
10
|
+
path,
|
11
|
+
classes
|
12
|
+
} = props;
|
13
|
+
const element = Node.get(editor, path);
|
14
|
+
const styleMaps = sectionStyle?.filter(f => !f?.hideOnFGS);
|
15
|
+
const onChange = data => {
|
16
|
+
const updated_props = {
|
17
|
+
...element,
|
18
|
+
...data,
|
19
|
+
field_type: data?.element
|
20
|
+
};
|
21
|
+
delete updated_props.children;
|
22
|
+
Transforms.setNodes(editor, {
|
23
|
+
...updated_props
|
24
|
+
}, {
|
25
|
+
at: path
|
26
|
+
});
|
27
|
+
};
|
28
|
+
const handleClose = () => {
|
29
|
+
console.log("close");
|
30
|
+
};
|
31
|
+
return /*#__PURE__*/_jsx(Box, {
|
32
|
+
component: "div",
|
33
|
+
className: "style-settings-wrpr",
|
34
|
+
sx: classes.sectionSettingsPopper,
|
35
|
+
children: styleMaps?.map((m, i) => {
|
36
|
+
return /*#__PURE__*/_jsx(StyleContent, {
|
37
|
+
renderTabs: sectionStyle,
|
38
|
+
value: m.value,
|
39
|
+
element: element,
|
40
|
+
onChange: onChange,
|
41
|
+
customProps: {},
|
42
|
+
handleClose: handleClose
|
43
|
+
}, `tab_${m.value}_$${i}`);
|
44
|
+
})
|
45
|
+
});
|
46
|
+
};
|
47
|
+
export default SectionSettings;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
const commonOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
|
2
|
+
const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
|
3
|
+
const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
|
4
|
+
const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
|
5
|
+
const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
|
6
|
+
const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
|
7
|
+
const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
|
8
|
+
const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "close"];
|
9
|
+
const itemOptions = {
|
10
|
+
default: commonOptions,
|
11
|
+
text: textOptions,
|
12
|
+
button: buttonOptions,
|
13
|
+
image: imageOptions,
|
14
|
+
box: boxOptions,
|
15
|
+
appHeader: appHeaderOptions,
|
16
|
+
form: formOptions,
|
17
|
+
section: sectionOptions
|
18
|
+
};
|
19
|
+
export default itemOptions;
|
@@ -0,0 +1,75 @@
|
|
1
|
+
const breakpointConstants = {
|
2
|
+
freegrid: ["height"],
|
3
|
+
freegridItem: ["left", "top", "marginTop", "width", "height", "gridArea"],
|
4
|
+
freegridBox: ["left", "top", "marginTop", "width", "height", "gridArea"]
|
5
|
+
};
|
6
|
+
export function CssVar(device = "lg", key, props) {
|
7
|
+
const keyTo = `${key}_${device}`;
|
8
|
+
const value = props[keyTo] === undefined ? props[key] : props[keyTo];
|
9
|
+
return value;
|
10
|
+
}
|
11
|
+
export function breakpointValues(type, breakpoint = "lg", props) {
|
12
|
+
try {
|
13
|
+
const breakpointDatas = breakpointConstants[type]?.reduce((a, b) => {
|
14
|
+
const bpKey = `${b}_${breakpoint}`;
|
15
|
+
a[b] = props[bpKey] === undefined ? props[b] : props[bpKey];
|
16
|
+
return a;
|
17
|
+
}, {});
|
18
|
+
return breakpointDatas;
|
19
|
+
} catch (err) {
|
20
|
+
console.log(err);
|
21
|
+
return {};
|
22
|
+
}
|
23
|
+
}
|
24
|
+
export function formatBreakpointValues(type, breakpoint = "lg", data) {
|
25
|
+
try {
|
26
|
+
const bpValues = breakpointConstants[type];
|
27
|
+
if (breakpoint === "lg") {
|
28
|
+
return data;
|
29
|
+
} else {
|
30
|
+
let rtData = {};
|
31
|
+
Object.keys(data).forEach(key => {
|
32
|
+
if (bpValues.indexOf(key) > -1) {
|
33
|
+
rtData[`${key}_${breakpoint}`] = data[key];
|
34
|
+
} else {
|
35
|
+
rtData[key] = data[key];
|
36
|
+
}
|
37
|
+
});
|
38
|
+
return rtData;
|
39
|
+
}
|
40
|
+
} catch (err) {
|
41
|
+
console.log(err);
|
42
|
+
return {};
|
43
|
+
}
|
44
|
+
}
|
45
|
+
export function wrapThemeBreakpoints(sxProp, prop, theme) {
|
46
|
+
try {
|
47
|
+
const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
|
48
|
+
switch (b) {
|
49
|
+
case "md":
|
50
|
+
a[theme.breakpoints.up("lg")] = {
|
51
|
+
[prop]: sxProp["md"] || sxProp["lg"]
|
52
|
+
};
|
53
|
+
break;
|
54
|
+
case "sm":
|
55
|
+
a[theme.breakpoints.up("lg")] = {
|
56
|
+
[prop]: sxProp["sm"] || sxProp["lg"]
|
57
|
+
};
|
58
|
+
break;
|
59
|
+
case "xs":
|
60
|
+
a[theme.breakpoints.between("xs", "md")] = {
|
61
|
+
[prop]: sxProp["xs"] || sxProp["lg"]
|
62
|
+
};
|
63
|
+
break;
|
64
|
+
default:
|
65
|
+
a[theme.breakpoints.up("lg")] = {
|
66
|
+
[prop]: sxProp["lg"]
|
67
|
+
};
|
68
|
+
}
|
69
|
+
return a;
|
70
|
+
}, {});
|
71
|
+
return formatedSxProp;
|
72
|
+
} catch (err) {
|
73
|
+
console.log(err);
|
74
|
+
}
|
75
|
+
}
|
@@ -0,0 +1,214 @@
|
|
1
|
+
const useFreeGridStyles = ({
|
2
|
+
theme,
|
3
|
+
MAX_DEVICE_WIDTH
|
4
|
+
}) => ({
|
5
|
+
root: {
|
6
|
+
"&.freegrid-container": {
|
7
|
+
display: "grid",
|
8
|
+
gridTemplateColumns: "var(--cols)",
|
9
|
+
gridTemplateRows: "var(--rows)",
|
10
|
+
gridGap: "0px",
|
11
|
+
backgroundColor: "#FFF",
|
12
|
+
padding: "0px",
|
13
|
+
height: "100%",
|
14
|
+
position: "static",
|
15
|
+
overflow: "hidden",
|
16
|
+
"& .freegrid-item, & .freegrid-box-item": {
|
17
|
+
gridArea: "var(--gridArea)",
|
18
|
+
left: "var(--left)",
|
19
|
+
marginTop: "var(--marginTop)",
|
20
|
+
marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
|
21
|
+
zIndex: "var(--zIndex) !important",
|
22
|
+
"&.active-drag": {},
|
23
|
+
"&.inactive-drag": {},
|
24
|
+
"& .editor-blocker": {
|
25
|
+
position: "absolute",
|
26
|
+
left: 0,
|
27
|
+
top: 0,
|
28
|
+
width: "100%",
|
29
|
+
height: "100%",
|
30
|
+
background: "rgba(0,0,0,0)",
|
31
|
+
border: 0,
|
32
|
+
outline: 0,
|
33
|
+
zIndex: 1000
|
34
|
+
},
|
35
|
+
"&.type_box": {
|
36
|
+
"& .editor-blocker": {
|
37
|
+
zIndex: 100
|
38
|
+
}
|
39
|
+
},
|
40
|
+
"&.enable-1, &.enable-2": {
|
41
|
+
"&.type_text": {
|
42
|
+
// height: "fit-content !important",
|
43
|
+
}
|
44
|
+
},
|
45
|
+
"&.enable-1:before, &.enable-2:before": {
|
46
|
+
position: "absolute",
|
47
|
+
content: "attr(placeholder)",
|
48
|
+
top: "-22px",
|
49
|
+
left: "-2px",
|
50
|
+
padding: "2px 4px",
|
51
|
+
backgroundColor: "#2563EB",
|
52
|
+
color: "#FFF",
|
53
|
+
fontSize: "12px",
|
54
|
+
borderTopLeftRadius: "2px",
|
55
|
+
borderTopRightRadius: "2px",
|
56
|
+
width: "auto"
|
57
|
+
},
|
58
|
+
"&:hover": {
|
59
|
+
"& .debug-info": {
|
60
|
+
opacity: 1
|
61
|
+
}
|
62
|
+
},
|
63
|
+
"& .debug-info": {
|
64
|
+
position: "absolute",
|
65
|
+
top: "calc(100% + 8px)",
|
66
|
+
pointerEvents: "none",
|
67
|
+
left: 0,
|
68
|
+
background: "rgba(0,0,0,0.2)",
|
69
|
+
color: "red",
|
70
|
+
width: "100%",
|
71
|
+
padding: "6px",
|
72
|
+
opacity: 0
|
73
|
+
},
|
74
|
+
"&.enable-1": {
|
75
|
+
"&.type_text": {
|
76
|
+
"*": {
|
77
|
+
"::selection": {
|
78
|
+
backgroundColor: "transparent !important",
|
79
|
+
color: "inherit !important"
|
80
|
+
}
|
81
|
+
}
|
82
|
+
},
|
83
|
+
"& .fgi_type_box": {
|
84
|
+
"& .freegrid-item": {
|
85
|
+
// pointerEvents: "none",
|
86
|
+
}
|
87
|
+
}
|
88
|
+
},
|
89
|
+
"&.enable-2": {
|
90
|
+
"& .fgi_type_box": {
|
91
|
+
"& .freegrid-item": {
|
92
|
+
// pointerEvents: "auto",
|
93
|
+
}
|
94
|
+
},
|
95
|
+
"& .fgi_type_form": {
|
96
|
+
"& .default-toolbar": {
|
97
|
+
display: "block"
|
98
|
+
}
|
99
|
+
}
|
100
|
+
},
|
101
|
+
/** for element items */
|
102
|
+
"& .fgi_type_image, & .fgi_type_video": {
|
103
|
+
height: "100%",
|
104
|
+
overflow: "hidden",
|
105
|
+
"& .embed": {
|
106
|
+
width: "100%",
|
107
|
+
height: "100%",
|
108
|
+
"& .embed-image-wrpr, & .embed-video-wrpr-in, & .element-empty-btn": {
|
109
|
+
height: "100%"
|
110
|
+
}
|
111
|
+
}
|
112
|
+
},
|
113
|
+
"& .fgi_type_button": {
|
114
|
+
height: "100%",
|
115
|
+
"& .editor-btn-wrapper": {
|
116
|
+
height: "100%",
|
117
|
+
"& .editor-btn-wrapper-inner": {
|
118
|
+
width: "100%",
|
119
|
+
height: "100%",
|
120
|
+
"& span": {
|
121
|
+
width: "100%",
|
122
|
+
height: "100%"
|
123
|
+
},
|
124
|
+
"& .btn": {
|
125
|
+
width: "100%",
|
126
|
+
height: "100%",
|
127
|
+
"&.textAlign-left": {
|
128
|
+
justifyContent: "start"
|
129
|
+
},
|
130
|
+
"&.textAlign-right": {
|
131
|
+
justifyContent: "end"
|
132
|
+
},
|
133
|
+
"&.textAlign-center": {
|
134
|
+
justifyContent: "center"
|
135
|
+
}
|
136
|
+
}
|
137
|
+
}
|
138
|
+
}
|
139
|
+
},
|
140
|
+
"& .fgi_type_box": {
|
141
|
+
display: "grid",
|
142
|
+
width: "100%",
|
143
|
+
height: "var(--height)",
|
144
|
+
gridTemplateColumns: "var(--cols)",
|
145
|
+
gridTemplateRows: "var(--rows)",
|
146
|
+
"& .freegrid-item": {
|
147
|
+
marginLeft: "0px"
|
148
|
+
// pointerEvents: "none",
|
149
|
+
}
|
150
|
+
},
|
151
|
+
|
152
|
+
"& .fgi_type_form": {
|
153
|
+
"& legend": {
|
154
|
+
paddingLeft: "16px",
|
155
|
+
paddingTop: "16px",
|
156
|
+
width: "calc(100% -16px) !important"
|
157
|
+
}
|
158
|
+
},
|
159
|
+
"& .fgi_type_appHeader": {
|
160
|
+
"& .MuiToolbar-root": {
|
161
|
+
paddingLeft: "0px !important",
|
162
|
+
paddingRight: "0px !important",
|
163
|
+
"& .app-drawer-btn": {
|
164
|
+
marginRight: "0px",
|
165
|
+
width: "100%",
|
166
|
+
"& svg": {
|
167
|
+
width: "100%",
|
168
|
+
height: "100%"
|
169
|
+
}
|
170
|
+
}
|
171
|
+
}
|
172
|
+
},
|
173
|
+
/** element toolbar hide */
|
174
|
+
"& .element-toolbar": {
|
175
|
+
display: "none"
|
176
|
+
},
|
177
|
+
[theme.breakpoints.between("xs", "md")]: {
|
178
|
+
marginLeft: `calc((100% - 320px) * 0.5)`
|
179
|
+
}
|
180
|
+
}
|
181
|
+
}
|
182
|
+
},
|
183
|
+
sectionPopper: {
|
184
|
+
zIndex: 1200,
|
185
|
+
width: "40px",
|
186
|
+
left: "-58px !important",
|
187
|
+
borderRadius: "8px",
|
188
|
+
"& .papper-root": {
|
189
|
+
fontFamily: "sans-serif",
|
190
|
+
boxShadow: "-4px -3px 12px 4px rgba(0, 0, 0, 0.12)",
|
191
|
+
background: "#FFF",
|
192
|
+
"& .MuiIconButton-root": {
|
193
|
+
padding: "10px",
|
194
|
+
color: "#000",
|
195
|
+
background: "#FFF",
|
196
|
+
"& svg": {
|
197
|
+
width: "20px",
|
198
|
+
height: "20px"
|
199
|
+
},
|
200
|
+
"&.active,&:hover ": {}
|
201
|
+
}
|
202
|
+
}
|
203
|
+
},
|
204
|
+
sectionSettingsPopper: {
|
205
|
+
"&.style-settings-wrpr": {
|
206
|
+
height: "300px",
|
207
|
+
overflowY: "auto",
|
208
|
+
overflowX: "hidden",
|
209
|
+
padding: "8px 8px 12px 12px",
|
210
|
+
marginBotton: "12px"
|
211
|
+
}
|
212
|
+
}
|
213
|
+
});
|
214
|
+
export default useFreeGridStyles;
|