@flozy/editor 10.4.0 → 10.4.2
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/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -81
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -1,6 +1,7 @@
|
|
1
1
|
const useFreeGridStyles = ({
|
2
2
|
theme,
|
3
|
-
MAX_DEVICE_WIDTH
|
3
|
+
MAX_DEVICE_WIDTH,
|
4
|
+
appTheme
|
4
5
|
}) => ({
|
5
6
|
root: {
|
6
7
|
"&.freegrid-container": {
|
@@ -47,6 +48,9 @@ const useFreeGridStyles = ({
|
|
47
48
|
"&.type_text": {
|
48
49
|
// minHeight: "fit-content !important",
|
49
50
|
// wordBreak: "break-all",
|
51
|
+
"& .placeholder-simple-text": {
|
52
|
+
display: "none"
|
53
|
+
}
|
50
54
|
},
|
51
55
|
"&.enable-1, &.enable-2": {
|
52
56
|
"&.type_text": {
|
@@ -243,6 +247,9 @@ const useFreeGridStyles = ({
|
|
243
247
|
},
|
244
248
|
"& > .simple-text": {
|
245
249
|
display: "none"
|
250
|
+
},
|
251
|
+
"& > .edt-paragraphs": {
|
252
|
+
display: "none"
|
246
253
|
}
|
247
254
|
},
|
248
255
|
"& .fgi_type_form": {
|
@@ -313,9 +320,50 @@ const useFreeGridStyles = ({
|
|
313
320
|
backgroundColor: "#FFF",
|
314
321
|
overflow: "hidden"
|
315
322
|
},
|
323
|
+
"& .fgi_type_embedScript:not(:has(.has-code))": {
|
324
|
+
background: appTheme?.palette?.editor?.sectionSettingIconHover,
|
325
|
+
color: appTheme?.palette?.editor?.textColor,
|
326
|
+
fontSize: "14px",
|
327
|
+
borderRadius: "12px",
|
328
|
+
display: "flex",
|
329
|
+
flexDirection: "column",
|
330
|
+
justifyContent: "center",
|
331
|
+
alignItems: "center",
|
332
|
+
height: "100%",
|
333
|
+
textAlign: "center",
|
334
|
+
"& svg": {
|
335
|
+
width: "20px",
|
336
|
+
height: "20px",
|
337
|
+
"& path": {
|
338
|
+
stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
|
339
|
+
}
|
340
|
+
},
|
341
|
+
"& .code-icon": {
|
342
|
+
display: "flex",
|
343
|
+
marginRight: "5px"
|
344
|
+
},
|
345
|
+
"& .empty-code": {
|
346
|
+
display: "flex"
|
347
|
+
},
|
348
|
+
"& .code-name": {
|
349
|
+
display: "flex",
|
350
|
+
alignItems: "anchor-center"
|
351
|
+
}
|
352
|
+
},
|
316
353
|
"& .fgi_type_text": {
|
317
354
|
"& .edt-headings": {
|
318
355
|
margin: "0px"
|
356
|
+
},
|
357
|
+
"& .edt-paragraphs": {
|
358
|
+
margin: "0px"
|
359
|
+
}
|
360
|
+
},
|
361
|
+
"& .fgi_type_table": {
|
362
|
+
"& .edt-headings": {
|
363
|
+
margin: "0px"
|
364
|
+
},
|
365
|
+
"& .edt-paragraphs": {
|
366
|
+
margin: "0px"
|
319
367
|
}
|
320
368
|
},
|
321
369
|
/** element toolbar hide */
|
@@ -356,21 +404,41 @@ const useFreeGridStyles = ({
|
|
356
404
|
sectionPopper: {
|
357
405
|
zIndex: 1200,
|
358
406
|
width: "40px",
|
359
|
-
left: "-
|
407
|
+
left: "-63px !important",
|
360
408
|
borderRadius: "8px",
|
409
|
+
marginRight: "5px !important",
|
361
410
|
"& .papper-root": {
|
362
411
|
fontFamily: "sans-serif",
|
363
412
|
boxShadow: "-4px -3px 12px 4px rgba(0, 0, 0, 0.12)",
|
364
|
-
background:
|
413
|
+
background: `${appTheme?.palette?.editor?.miniToolBarBackground} !important`,
|
414
|
+
border: `1px solid ${appTheme?.palette?.editor?.miniToolBarBorder}`,
|
415
|
+
borderRadius: "10px",
|
365
416
|
"& .MuiIconButton-root": {
|
366
|
-
padding: "
|
417
|
+
padding: "9px",
|
367
418
|
color: "#000",
|
368
|
-
background:
|
419
|
+
background: `${appTheme?.palette?.editor?.miniToolBarBackground} !important`,
|
369
420
|
"& svg": {
|
370
421
|
width: "20px",
|
371
|
-
height: "20px"
|
422
|
+
height: "20px",
|
423
|
+
color: appTheme?.palette?.editor?.closeButtonSvgStroke
|
424
|
+
},
|
425
|
+
"& .settingsIcon": {
|
426
|
+
"& path": {
|
427
|
+
stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
|
428
|
+
}
|
372
429
|
},
|
373
|
-
"&.active
|
430
|
+
"&.active": {
|
431
|
+
"& svg": {
|
432
|
+
width: "20px",
|
433
|
+
height: "20px",
|
434
|
+
color: "#2563EB"
|
435
|
+
},
|
436
|
+
"& .settingsIcon": {
|
437
|
+
"& path": {
|
438
|
+
stroke: "#2563EB"
|
439
|
+
}
|
440
|
+
}
|
441
|
+
}
|
374
442
|
}
|
375
443
|
}
|
376
444
|
},
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
2
2
|
import React, { useState } from "react";
|
3
|
-
import { Transforms, Path, Node } from "slate";
|
3
|
+
import { Transforms, Path, Node, Editor, Element } from "slate";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
|
6
6
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
@@ -206,7 +206,19 @@ const Grid = props => {
|
|
206
206
|
};
|
207
207
|
const onAddSection = () => () => {
|
208
208
|
try {
|
209
|
-
|
209
|
+
let duplicateGrid = JSON.parse(JSON.stringify(element));
|
210
|
+
const carousel = Editor.above(editor, {
|
211
|
+
at: path,
|
212
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
|
213
|
+
});
|
214
|
+
if (carousel) {
|
215
|
+
const [carouselNode, carouselItemPath] = carousel || [];
|
216
|
+
const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
|
217
|
+
Transforms.insertNodes(editor, duplicatecCarousel, {
|
218
|
+
at: Path.next(carouselItemPath)
|
219
|
+
});
|
220
|
+
return;
|
221
|
+
}
|
210
222
|
insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
|
211
223
|
} catch (err) {
|
212
224
|
console.log(err);
|
@@ -292,7 +292,7 @@ const GridItem = props => {
|
|
292
292
|
...getBRProps,
|
293
293
|
display: "flex",
|
294
294
|
flexDirection: flexDirection || "column",
|
295
|
-
background: bgColor
|
295
|
+
background: bgColor,
|
296
296
|
borderColor: getBorderColor(),
|
297
297
|
borderWidth: borderWidth || "1px",
|
298
298
|
borderStyle: borderStyle || "solid",
|
@@ -15,7 +15,8 @@ const CheckList = props => {
|
|
15
15
|
isEmpty,
|
16
16
|
className,
|
17
17
|
style,
|
18
|
-
customProps
|
18
|
+
customProps,
|
19
|
+
selectedLineHeight
|
19
20
|
} = props;
|
20
21
|
const {
|
21
22
|
translation
|
@@ -45,7 +46,7 @@ const CheckList = props => {
|
|
45
46
|
justifyContent: "center",
|
46
47
|
alignItems: "center",
|
47
48
|
...(style || {}),
|
48
|
-
lineHeight:
|
49
|
+
lineHeight: `${selectedLineHeight}`
|
49
50
|
},
|
50
51
|
children: [/*#__PURE__*/_jsxs("div", {
|
51
52
|
contentEditable: false,
|
@@ -1,5 +1,10 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardMedia from "@mui/material/CardMedia";
|
5
|
+
import CardContent from "@mui/material/CardContent";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import Skeleton from "@mui/material/Skeleton";
|
3
8
|
import Icon from "../../common/Icon";
|
4
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
5
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -15,13 +20,26 @@ const SearchAttachment = props => {
|
|
15
20
|
metadata
|
16
21
|
} = customProps;
|
17
22
|
const {
|
18
|
-
|
19
|
-
|
23
|
+
type,
|
24
|
+
id
|
20
25
|
} = element;
|
21
26
|
const {
|
22
27
|
theme
|
23
28
|
} = useEditorContext();
|
29
|
+
const [title, setTitle] = useState("");
|
30
|
+
const [showSkeleton, setShowSkeleton] = useState(false);
|
24
31
|
const label = Boolean(title?.trim()) ? title : 'Untitled';
|
32
|
+
useEffect(() => {
|
33
|
+
const fetchTitle = async id => {
|
34
|
+
setShowSkeleton(true);
|
35
|
+
const title = await customProps?.services('getDocTitle', id);
|
36
|
+
setTitle(title?.data);
|
37
|
+
setShowSkeleton(false);
|
38
|
+
};
|
39
|
+
if (id) {
|
40
|
+
fetchTitle(id);
|
41
|
+
}
|
42
|
+
}, []);
|
25
43
|
const handleClick = () => {
|
26
44
|
if (metadata && metadata?.actionHandler) {
|
27
45
|
metadata?.actionHandler(type, element);
|
@@ -38,15 +56,15 @@ const SearchAttachment = props => {
|
|
38
56
|
children: /*#__PURE__*/_jsxs(Card, {
|
39
57
|
sx: {
|
40
58
|
display: "flex",
|
41
|
-
justifyContent: "flex-start",
|
42
|
-
alignItems: "flex-end",
|
59
|
+
justifyContent: showSkeleton ? "center" : "flex-start",
|
60
|
+
alignItems: showSkeleton ? "center" : "flex-end",
|
43
61
|
width: "fit-content",
|
44
62
|
maxWidth: '250px',
|
45
63
|
padding: "0px 10px",
|
46
64
|
boxShadow: "none",
|
47
65
|
border: `1px solid ${theme?.palette?.primary?.slashBrainBorder} !important`,
|
48
66
|
borderRadius: "7px !important",
|
49
|
-
background: `${theme?.palette?.containers?.slashBrainCardBg} !important`,
|
67
|
+
background: showSkeleton ? `${theme?.palette?.editor?.menuOptionHoverBackground} !important` : `${theme?.palette?.containers?.slashBrainCardBg} !important`,
|
50
68
|
cursor: 'pointer',
|
51
69
|
margin: '4px 0px',
|
52
70
|
lineHeight: 1.43,
|
@@ -76,7 +94,12 @@ const SearchAttachment = props => {
|
|
76
94
|
width: "unset !important"
|
77
95
|
}
|
78
96
|
},
|
79
|
-
children: /*#__PURE__*/_jsx(
|
97
|
+
children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
|
98
|
+
variant: "circular",
|
99
|
+
width: 14,
|
100
|
+
height: 14,
|
101
|
+
animation: "wave"
|
102
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
80
103
|
icon: "docsIcon"
|
81
104
|
})
|
82
105
|
}), /*#__PURE__*/_jsx(CardContent, {
|
@@ -94,7 +117,15 @@ const SearchAttachment = props => {
|
|
94
117
|
width: "unset !important"
|
95
118
|
}
|
96
119
|
},
|
97
|
-
children: /*#__PURE__*/
|
120
|
+
children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
|
121
|
+
variant: "text",
|
122
|
+
width: 140,
|
123
|
+
height: 20,
|
124
|
+
animation: "wave",
|
125
|
+
sx: {
|
126
|
+
borderRadius: "4px"
|
127
|
+
}
|
128
|
+
}) : /*#__PURE__*/_jsxs(Typography, {
|
98
129
|
sx: {
|
99
130
|
fontWeight: "500",
|
100
131
|
background: theme?.palette?.text?.slashBrainText,
|
@@ -30,6 +30,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
30
30
|
const [skip, setSkip] = useState(0);
|
31
31
|
const [search, setSearch] = useState("");
|
32
32
|
const [isLoading, setIsLoading] = useState(false);
|
33
|
+
const [total, setTotal] = useState(0);
|
33
34
|
const [debouncedSearch] = useDebounce(search, 300);
|
34
35
|
const limit = 20;
|
35
36
|
const observer = useRef();
|
@@ -63,24 +64,24 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
63
64
|
}
|
64
65
|
};
|
65
66
|
useEffect(() => {
|
66
|
-
getDocs(
|
67
|
-
debouncedSearch,
|
68
|
-
skip,
|
69
|
-
limit,
|
70
|
-
current_doc_id: currentId
|
71
|
-
});
|
67
|
+
getDocs();
|
72
68
|
}, [skip, debouncedSearch]);
|
73
69
|
const getDocs = async () => {
|
70
|
+
if (isLoading) return;
|
71
|
+
if (total > 0 && mapData?.length >= total) return;
|
74
72
|
setIsLoading(true);
|
75
73
|
try {
|
76
74
|
if (otherProps?.services) {
|
77
75
|
const result = await otherProps?.services("getDocs", {
|
78
76
|
skip,
|
79
77
|
limit,
|
80
|
-
search,
|
78
|
+
search: debouncedSearch,
|
81
79
|
current_doc_id: currentId
|
82
80
|
});
|
83
|
-
|
81
|
+
const docs = result?.data?.docs || [];
|
82
|
+
const totalCount = result?.data?.total || 0;
|
83
|
+
setMapData(prev => skip === 0 ? docs : [...prev, ...docs]);
|
84
|
+
setTotal(totalCount);
|
84
85
|
}
|
85
86
|
} catch (error) {
|
86
87
|
console.error("Error fetching documents:", error);
|
@@ -259,7 +259,7 @@ const SearchAndDocList = ({
|
|
259
259
|
xs: 12,
|
260
260
|
children: /*#__PURE__*/_jsx(Typography, {
|
261
261
|
sx: {
|
262
|
-
display: mapData?.length === 0 ? 'flex' : 'none',
|
262
|
+
display: mapData?.length === 0 && !isLoading ? 'flex' : 'none',
|
263
263
|
alignItems: "center",
|
264
264
|
justifyContent: "center",
|
265
265
|
color: theme?.palette?.text?.secondary,
|
@@ -269,15 +269,17 @@ const SearchAndDocList = ({
|
|
269
269
|
},
|
270
270
|
children: "No docs"
|
271
271
|
})
|
272
|
-
}),
|
272
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
273
273
|
item: true,
|
274
|
+
xs: 12,
|
274
275
|
sx: {
|
275
|
-
display:
|
276
|
+
display: isLoading ? 'flex' : 'none',
|
277
|
+
alignItems: "center",
|
276
278
|
justifyContent: "center",
|
277
|
-
|
278
|
-
|
279
|
-
padding: '
|
280
|
-
|
279
|
+
color: theme?.palette?.text?.secondary,
|
280
|
+
fontSize: '12px',
|
281
|
+
padding: '20px',
|
282
|
+
fontWeight: 700
|
281
283
|
},
|
282
284
|
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
283
285
|
})]
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useRef, useState } from "react";
|
2
2
|
import SignatureCanvas from "react-signature-canvas";
|
3
|
-
import { Grid, useMediaQuery } from "@mui/material";
|
3
|
+
import { Grid, IconButton, useMediaQuery } from "@mui/material";
|
4
|
+
import { ResetIcon } from "../../../common/iconListV2";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
7
|
const DrawSignature = props => {
|
@@ -24,6 +25,13 @@ const DrawSignature = props => {
|
|
24
25
|
signature: result?.imageURL || strImage
|
25
26
|
});
|
26
27
|
};
|
28
|
+
const onClear = () => {
|
29
|
+
canvasRef.clear();
|
30
|
+
setUploading(false);
|
31
|
+
onDataChange({
|
32
|
+
signature: ""
|
33
|
+
});
|
34
|
+
};
|
27
35
|
const isMobile = useMediaQuery("(max-width:599px)");
|
28
36
|
const signatureCanvasStyle = isMobile ? {
|
29
37
|
width: "260px",
|
@@ -31,14 +39,15 @@ const DrawSignature = props => {
|
|
31
39
|
} : {};
|
32
40
|
return /*#__PURE__*/_jsxs(Grid, {
|
33
41
|
container: true,
|
34
|
-
children: [uploading ? "Uploading..." : "", /*#__PURE__*/
|
42
|
+
children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsxs(Grid, {
|
35
43
|
item: true,
|
36
44
|
xs: 12,
|
37
45
|
style: {
|
38
46
|
width: "100%",
|
39
|
-
height: "209px"
|
47
|
+
height: "209px",
|
48
|
+
position: "relative"
|
40
49
|
},
|
41
|
-
children: /*#__PURE__*/_jsx(SignatureCanvas, {
|
50
|
+
children: [/*#__PURE__*/_jsx(SignatureCanvas, {
|
42
51
|
canvasProps: {
|
43
52
|
className: "signature-canvas",
|
44
53
|
...signatureCanvasStyle
|
@@ -47,7 +56,11 @@ const DrawSignature = props => {
|
|
47
56
|
ref: ref => canvasRef = ref,
|
48
57
|
maxWidth: brush.size || 2,
|
49
58
|
penColor: brush?.color || "#000"
|
50
|
-
})
|
59
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
60
|
+
className: "clear-canvas",
|
61
|
+
onClick: onClear,
|
62
|
+
children: /*#__PURE__*/_jsx(ResetIcon, {})
|
63
|
+
})]
|
51
64
|
})]
|
52
65
|
});
|
53
66
|
};
|
@@ -30,15 +30,28 @@ const UploadSignature = props => {
|
|
30
30
|
signature: result?.imageURL || strImage
|
31
31
|
});
|
32
32
|
};
|
33
|
+
const onRemove = () => {
|
34
|
+
setBase64(null);
|
35
|
+
setUploading(false);
|
36
|
+
onUploadDone({
|
37
|
+
signature: ""
|
38
|
+
});
|
39
|
+
};
|
33
40
|
return /*#__PURE__*/_jsxs("div", {
|
34
41
|
className: "signature-tab2",
|
35
|
-
children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/
|
42
|
+
children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsxs("div", {
|
36
43
|
className: "upload-sign-img-wrapper",
|
37
|
-
children: /*#__PURE__*/_jsx("img", {
|
44
|
+
children: [/*#__PURE__*/_jsx("img", {
|
38
45
|
className: "upload-sign-img",
|
39
46
|
src: base64,
|
40
47
|
alt: "Signature"
|
41
|
-
})
|
48
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
49
|
+
variant: "body2",
|
50
|
+
gutterBottom: true,
|
51
|
+
className: "remove-sign-img-btn",
|
52
|
+
onClick: onRemove,
|
53
|
+
children: "Remove"
|
54
|
+
})]
|
42
55
|
}) : /*#__PURE__*/_jsxs("div", {
|
43
56
|
className: "upload-input-wrapper",
|
44
57
|
children: [/*#__PURE__*/_jsx("input", {
|
@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
|
|
5
5
|
import { isTextSelected } from "../../utils/helper";
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
|
+
import { getBreakpointLineSpacing, getDevice } from "../../helper/theme";
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -29,8 +30,12 @@ const SimpleText = props => {
|
|
29
30
|
} = customProps;
|
30
31
|
// const { element: pageSt } = getPageSettings(editor) || {};
|
31
32
|
// const { pageColor } = pageSt?.pageProps || {};
|
33
|
+
const breakpoint = getDevice(window.innerWidth);
|
34
|
+
const lineH = element?.children[0]?.lineHeight;
|
35
|
+
const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
32
36
|
const classes = SimpleTextStyle({
|
33
|
-
pageColor: "#FFFFFF"
|
37
|
+
pageColor: "#FFFFFF",
|
38
|
+
lineHeight
|
34
39
|
});
|
35
40
|
const selected = useSelected();
|
36
41
|
const path = ReactEditor.findPath(editor, element);
|
@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
|
|
35
35
|
height: "24px",
|
36
36
|
overflow: "hidden",
|
37
37
|
fontSize: "14px",
|
38
|
-
display:
|
39
|
-
alignItems:
|
38
|
+
display: "inline-flex",
|
39
|
+
alignItems: "center",
|
40
40
|
"& .bg-pad-sl": {
|
41
41
|
padding: "2px 4px 2px 4px",
|
42
42
|
background: "transparent",
|
@@ -13,9 +13,13 @@ function Draggable(props) {
|
|
13
13
|
} = props?.data || {};
|
14
14
|
const style = transform ? {
|
15
15
|
transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
|
16
|
-
} :
|
16
|
+
} : {};
|
17
17
|
return /*#__PURE__*/_jsx(Box, {
|
18
|
-
style:
|
18
|
+
style: {
|
19
|
+
...style,
|
20
|
+
touchAction: "none" // Disables scrolling while dragging. Necessary for proper mobile drag functionality.
|
21
|
+
},
|
22
|
+
|
19
23
|
ref: setNodeRef,
|
20
24
|
...listeners,
|
21
25
|
...attributes,
|
@@ -86,6 +86,13 @@ const TableStyles = theme => {
|
|
86
86
|
background: "#2563EB"
|
87
87
|
}
|
88
88
|
},
|
89
|
+
mobileCellResizer: {
|
90
|
+
position: "absolute",
|
91
|
+
right: "-10px",
|
92
|
+
top: "-10px",
|
93
|
+
zIndex: 4000,
|
94
|
+
padding: "2px"
|
95
|
+
},
|
89
96
|
mobileToolDrawer: {
|
90
97
|
"& .customSelectContainer": {
|
91
98
|
border: "none !important",
|
@@ -307,7 +307,7 @@ const Table = props => {
|
|
307
307
|
onScroll: handleScroll,
|
308
308
|
onMouseOver: onMouseOver,
|
309
309
|
onMouseLeave: onMouseLeave,
|
310
|
-
className:
|
310
|
+
className: "custom-scroll",
|
311
311
|
children: [/*#__PURE__*/_jsx(TableComp, {
|
312
312
|
className: readOnly ? "readOnly" : "",
|
313
313
|
sx: {
|
@@ -345,8 +345,8 @@ const Table = props => {
|
|
345
345
|
handleAction: handleAction,
|
346
346
|
exandTools: exandTools,
|
347
347
|
openSetttings: openSetttings,
|
348
|
-
|
349
|
-
|
348
|
+
hideTools: hideTools,
|
349
|
+
translation: translation
|
350
350
|
}), /*#__PURE__*/_jsx(MoreTableSettings, {
|
351
351
|
exandTools: exandTools,
|
352
352
|
handleAction: handleAction,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useState, useEffect, useMemo } from "react";
|
2
|
-
import { Editor, Path, Transforms } from "slate";
|
3
|
-
import { Box } from "@mui/material";
|
2
|
+
import { Editor, Path, Range, Transforms } from "slate";
|
3
|
+
import { Box, IconButton } from "@mui/material";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import useTableResize from "../../utils/customHooks/useTableResize";
|
6
6
|
import { TableUtil } from "../../utils/table";
|
@@ -12,6 +12,7 @@ import TablePopup from "./TablePopup";
|
|
12
12
|
import { Droppable } from "./Droppable";
|
13
13
|
import { useDndContext } from "@dnd-kit/core";
|
14
14
|
import { getNodeWithType } from "../../utils/helper";
|
15
|
+
import { ResizeIcon } from "../../common/iconListV2";
|
15
16
|
import { isEmptyTextNode } from "../../helper";
|
16
17
|
import SimpleText from "../SimpleText";
|
17
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -41,16 +42,32 @@ const Resizer = ({
|
|
41
42
|
onMouseDown,
|
42
43
|
height
|
43
44
|
}) => {
|
45
|
+
const eventProps = {
|
46
|
+
onPointerDown: onMouseDown
|
47
|
+
};
|
44
48
|
return /*#__PURE__*/_jsx(_Fragment, {
|
45
49
|
children: /*#__PURE__*/_jsx(Box, {
|
46
50
|
component: "div",
|
47
51
|
className: "cell-resizer",
|
48
52
|
contentEditable: false,
|
49
|
-
onPointerDown: onMouseDown,
|
50
53
|
sx: classes.cellResizer,
|
51
54
|
style: {
|
52
55
|
height: `${height}px`
|
53
|
-
}
|
56
|
+
},
|
57
|
+
...eventProps
|
58
|
+
})
|
59
|
+
});
|
60
|
+
};
|
61
|
+
const MobileResizer = ({
|
62
|
+
classes,
|
63
|
+
onMouseDown
|
64
|
+
}) => {
|
65
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
66
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
67
|
+
contentEditable: false,
|
68
|
+
sx: classes.mobileCellResizer,
|
69
|
+
onTouchStart: onMouseDown,
|
70
|
+
children: /*#__PURE__*/_jsx(ResizeIcon, {})
|
54
71
|
})
|
55
72
|
});
|
56
73
|
};
|
@@ -115,7 +132,8 @@ const TableCell = props => {
|
|
115
132
|
size: element?.size,
|
116
133
|
minMaxProps: {
|
117
134
|
minWidth: 30
|
118
|
-
}
|
135
|
+
},
|
136
|
+
isMobile
|
119
137
|
});
|
120
138
|
const [tableSize, setTableSize] = useState({});
|
121
139
|
const [openSettings, setOpenSettings] = useState(false);
|
@@ -132,8 +150,12 @@ const TableCell = props => {
|
|
132
150
|
const isFirstRow = row === 0;
|
133
151
|
const isFirstColumn = column === 0;
|
134
152
|
const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
|
135
|
-
const
|
136
|
-
|
153
|
+
const {
|
154
|
+
selection
|
155
|
+
} = editor;
|
156
|
+
const isHavingSelection = selection && !Range.isCollapsed(selection);
|
157
|
+
const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
|
158
|
+
const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
|
137
159
|
const [parentProps] = tableNode || [{}];
|
138
160
|
const [rowProps] = rowNode || [{}];
|
139
161
|
const tableDOM = table.getDOMNode(path, true);
|
@@ -420,6 +442,7 @@ const TableCell = props => {
|
|
420
442
|
resetSelection
|
421
443
|
};
|
422
444
|
const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
|
445
|
+
const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
|
423
446
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
424
447
|
children: [/*#__PURE__*/_jsxs("td", {
|
425
448
|
...element.attr,
|
@@ -454,7 +477,7 @@ const TableCell = props => {
|
|
454
477
|
padding: "8px"
|
455
478
|
},
|
456
479
|
children: children
|
457
|
-
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(
|
480
|
+
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(TableResizer, {
|
458
481
|
classes: classes,
|
459
482
|
onMouseDown: onMouseDown,
|
460
483
|
height: tableDOM?.getBoundingClientRect()?.height
|
@@ -4,6 +4,12 @@ import { useSlate } from "slate-react";
|
|
4
4
|
import { getNodeText } from "../../utils/helper";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const isEmptyTextNode = node => {
|
8
|
+
if (Text.isText(node)) {
|
9
|
+
return !node.text.trim();
|
10
|
+
}
|
11
|
+
return false;
|
12
|
+
};
|
7
13
|
const Title = props => {
|
8
14
|
const {
|
9
15
|
attributes,
|
@@ -50,10 +56,4 @@ const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
|
|
50
56
|
}
|
51
57
|
}, [editor.selection]);
|
52
58
|
return null;
|
53
|
-
};
|
54
|
-
const isEmptyTextNode = node => {
|
55
|
-
if (Text.isText(node)) {
|
56
|
-
return !node.text.trim();
|
57
|
-
}
|
58
|
-
return false;
|
59
59
|
};
|