@flozy/editor 1.6.0 → 1.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +131 -104
- package/dist/Editor/DialogWrapper.js +3 -0
- package/dist/Editor/Editor.css +27 -36
- package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
- package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
- package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
- package/dist/Editor/Elements/Button/EditorButton.js +4 -20
- package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
- package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
- package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
- package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
- package/dist/Editor/Elements/Embed/Embed.js +33 -126
- package/dist/Editor/Elements/Embed/Image.js +15 -7
- package/dist/Editor/Elements/Embed/Video.js +12 -5
- package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
- package/dist/Editor/Elements/Form/Form.js +24 -12
- package/dist/Editor/Elements/Form/FormButton.js +11 -9
- package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +7 -1
- package/dist/Editor/Elements/Grid/Grid.js +15 -4
- package/dist/Editor/Elements/Grid/GridButton.js +52 -29
- package/dist/Editor/Elements/Grid/GridItem.js +30 -19
- package/dist/Editor/Elements/Grid/Styles.js +11 -0
- package/dist/Editor/Elements/List/CheckList.js +57 -0
- package/dist/Editor/Elements/List/CheckListButton.js +24 -0
- package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
- package/dist/Editor/Elements/Signature/Signature.js +9 -3
- package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
- package/dist/Editor/Elements/Signature/SignaturePopup.js +50 -7
- package/dist/Editor/Elements/SimpleText.js +62 -0
- package/dist/Editor/Elements/Table/Styles.js +66 -0
- package/dist/Editor/Elements/Table/Table.js +33 -16
- package/dist/Editor/Elements/Table/TableCell.js +54 -24
- package/dist/Editor/Elements/Table/TableSelector.js +13 -15
- package/dist/Editor/Elements/Table/table.css +0 -10
- package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
- package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
- package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
- package/dist/Editor/Styles/EditorStyles.js +50 -0
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
- package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
- package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
- package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
- package/dist/Editor/Toolbar/Toolbar.js +178 -134
- package/dist/Editor/Toolbar/styles.css +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
- package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
- package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
- package/dist/Editor/assets/svg/TextIcon.js +29 -0
- package/dist/Editor/common/Icon.js +48 -5
- package/dist/Editor/common/ImageList.js +10 -4
- package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
- package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
- package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
- package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
- package/dist/Editor/common/ImageSelector/Styles.js +41 -0
- package/dist/Editor/common/ImageUploader.js +19 -8
- package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
- package/dist/Editor/common/MentionsPopup/index.js +129 -0
- package/dist/Editor/common/Shorthands/elements.js +191 -0
- package/dist/Editor/common/Shorthands/index.js +7 -0
- package/dist/Editor/common/Shorthands/mentions.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
- package/dist/Editor/common/StyleBuilder/index.js +0 -1
- package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
- package/dist/Editor/common/ToolbarIcon.js +43 -0
- package/dist/Editor/common/Uploader.js +10 -7
- package/dist/Editor/common/iconslist.js +46 -1
- package/dist/Editor/hooks/useMentions.js +104 -17
- package/dist/Editor/hooks/useMouseMove.js +53 -0
- package/dist/Editor/hooks/useScroll.js +26 -0
- package/dist/Editor/plugins/withEmbeds.js +12 -0
- package/dist/Editor/service/fileupload.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
- package/dist/Editor/utils/carousel.js +5 -2
- package/dist/Editor/utils/carouselItem.js +2 -2
- package/dist/Editor/utils/customHooks/useResize.js +2 -3
- package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
- package/dist/Editor/utils/embed.js +19 -5
- package/dist/Editor/utils/emoji.js +8 -0
- package/dist/Editor/utils/events.js +49 -12
- package/dist/Editor/utils/form.js +3 -9
- package/dist/Editor/utils/formfield.js +2 -1
- package/dist/Editor/utils/grid.js +44 -8
- package/dist/Editor/utils/gridItem.js +4 -3
- package/dist/Editor/utils/insertNewLine.js +12 -0
- package/dist/Editor/utils/mentions.js +14 -10
- package/dist/Editor/utils/pageSettings.js +67 -0
- package/dist/Editor/utils/signature.js +6 -8
- package/dist/Editor/utils/table.js +79 -18
- package/dist/Editor/utils/topBanner.js +58 -0
- package/package.json +4 -1
- package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -0,0 +1,57 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
|
3
|
+
import { Transforms } from "slate";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
|
+
const CheckList = ({
|
7
|
+
attributes,
|
8
|
+
children,
|
9
|
+
element
|
10
|
+
}) => {
|
11
|
+
const editor = useSlateStatic();
|
12
|
+
const readOnly = useReadOnly();
|
13
|
+
const {
|
14
|
+
checked
|
15
|
+
} = element;
|
16
|
+
return /*#__PURE__*/_jsxs("div", {
|
17
|
+
...attributes,
|
18
|
+
className: "checkbox-list",
|
19
|
+
style: {
|
20
|
+
textAlign: element.alignment || "left"
|
21
|
+
},
|
22
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
23
|
+
contentEditable: false,
|
24
|
+
className: "checkbox-edit",
|
25
|
+
children: [/*#__PURE__*/_jsx("input", {
|
26
|
+
type: "checkbox",
|
27
|
+
className: "styled-checkbox",
|
28
|
+
checked: checked,
|
29
|
+
style: {
|
30
|
+
marginRight: "8px"
|
31
|
+
},
|
32
|
+
onChange: event => {
|
33
|
+
const path = ReactEditor.findPath(editor, element);
|
34
|
+
const newProperties = {
|
35
|
+
checked: event.target.checked
|
36
|
+
};
|
37
|
+
Transforms.setNodes(editor, newProperties, {
|
38
|
+
at: path
|
39
|
+
});
|
40
|
+
}
|
41
|
+
}), /*#__PURE__*/_jsx("span", {
|
42
|
+
className: "checkbox-inner"
|
43
|
+
})]
|
44
|
+
}), /*#__PURE__*/_jsx("span", {
|
45
|
+
contentEditable: !readOnly,
|
46
|
+
suppressContentEditableWarning: true,
|
47
|
+
className: "",
|
48
|
+
style: {
|
49
|
+
flex: 1,
|
50
|
+
opacity: checked ? 1 : 1,
|
51
|
+
textDecoration: !checked ? "none" : "none"
|
52
|
+
},
|
53
|
+
children: children
|
54
|
+
})]
|
55
|
+
});
|
56
|
+
};
|
57
|
+
export default CheckList;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Icon from "../../common/Icon";
|
3
|
+
import { toggleBlock } from "../../utils/SlateUtilityFunctions";
|
4
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
|
+
const CheckListButton = props => {
|
8
|
+
const {
|
9
|
+
editor
|
10
|
+
} = props;
|
11
|
+
const handleClick = type => () => {
|
12
|
+
toggleBlock(editor, type);
|
13
|
+
};
|
14
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
15
|
+
children: /*#__PURE__*/_jsx(ToolbarIcon, {
|
16
|
+
title: "Check List",
|
17
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
18
|
+
icon: "checkList"
|
19
|
+
}),
|
20
|
+
onClick: handleClick("checkList")
|
21
|
+
})
|
22
|
+
});
|
23
|
+
};
|
24
|
+
export default CheckListButton;
|
@@ -1,10 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton, Tooltip } from "@mui/material";
|
3
2
|
import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
|
4
3
|
import { Transforms } from "slate";
|
5
4
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
5
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
-
const NewLineButton = (
|
7
|
+
const NewLineButton = ({
|
8
|
+
icoBtnType
|
9
|
+
}) => {
|
8
10
|
const editor = useSlateStatic();
|
9
11
|
const onAddNewLine = () => {
|
10
12
|
Transforms.insertNodes(editor, [{
|
@@ -18,19 +20,17 @@ const NewLineButton = () => {
|
|
18
20
|
});
|
19
21
|
ReactEditor.focus(editor);
|
20
22
|
};
|
21
|
-
return /*#__PURE__*/_jsx(
|
23
|
+
return /*#__PURE__*/_jsx(ToolbarIcon, {
|
22
24
|
title: "New Line",
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
})
|
33
|
-
})
|
25
|
+
onClick: onAddNewLine,
|
26
|
+
icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
|
27
|
+
sx: {
|
28
|
+
fill: "#64748B",
|
29
|
+
width: "18px",
|
30
|
+
height: "18px"
|
31
|
+
}
|
32
|
+
}),
|
33
|
+
icoBtnType: icoBtnType
|
34
34
|
});
|
35
35
|
};
|
36
36
|
export default NewLineButton;
|
@@ -1,15 +1,16 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import {
|
3
|
-
import { IconButton, Tooltip } from "@mui/material";
|
4
|
-
import { useSlateStatic, ReactEditor } from "slate-react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
5
3
|
import PageSettingsPopup from "./PageSettingsPopup";
|
6
4
|
import { PageSettings } from "../../common/iconslist";
|
5
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
6
|
+
import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
10
|
const PageSettingsButton = props => {
|
11
11
|
const {
|
12
|
-
customProps
|
12
|
+
customProps,
|
13
|
+
icoBtnType
|
13
14
|
} = props;
|
14
15
|
const [openSetttings, setOpenSettings] = useState(false);
|
15
16
|
const editor = useSlateStatic();
|
@@ -17,77 +18,33 @@ const PageSettingsButton = props => {
|
|
17
18
|
const {
|
18
19
|
element,
|
19
20
|
path
|
20
|
-
} =
|
21
|
+
} = getPageSettings(editor);
|
21
22
|
setOpenSettings({
|
22
23
|
element: element?.pageProps || {},
|
23
24
|
path
|
24
25
|
});
|
25
26
|
};
|
26
|
-
const
|
27
|
+
const onSave = data => {
|
27
28
|
try {
|
28
|
-
const
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
if (pageSettingsNode && pageSettingsNode[0]) {
|
35
|
-
const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
|
36
|
-
return {
|
37
|
-
path,
|
38
|
-
element: pageSettingsNode[0]
|
39
|
-
};
|
40
|
-
} else {
|
41
|
-
return {
|
42
|
-
path: null
|
43
|
-
};
|
44
|
-
}
|
29
|
+
const updateData = {
|
30
|
+
...data
|
31
|
+
};
|
32
|
+
delete updateData.children;
|
33
|
+
updatePageSettings(editor, updateData);
|
34
|
+
onClose();
|
45
35
|
} catch (err) {
|
46
36
|
console.log(err);
|
47
|
-
return {
|
48
|
-
path: null
|
49
|
-
};
|
50
|
-
}
|
51
|
-
};
|
52
|
-
const onSave = data => {
|
53
|
-
const updateData = {
|
54
|
-
...data
|
55
|
-
};
|
56
|
-
delete updateData.children;
|
57
|
-
if (openSetttings?.path) {
|
58
|
-
Transforms.setNodes(editor, {
|
59
|
-
pageProps: {
|
60
|
-
...updateData
|
61
|
-
}
|
62
|
-
}, {
|
63
|
-
at: openSetttings?.path
|
64
|
-
});
|
65
|
-
} else {
|
66
|
-
Transforms.insertNodes(editor, [{
|
67
|
-
type: "page-settings",
|
68
|
-
pageProps: {
|
69
|
-
...updateData
|
70
|
-
},
|
71
|
-
children: [{
|
72
|
-
text: ""
|
73
|
-
}]
|
74
|
-
}], {
|
75
|
-
at: [editor.children.length]
|
76
|
-
});
|
77
37
|
}
|
78
|
-
onClose();
|
79
38
|
};
|
80
39
|
const onClose = () => {
|
81
40
|
setOpenSettings(false);
|
82
41
|
};
|
83
42
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
84
|
-
children: [/*#__PURE__*/_jsx(
|
43
|
+
children: [/*#__PURE__*/_jsx(ToolbarIcon, {
|
85
44
|
title: "Page Settings",
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
children: /*#__PURE__*/_jsx(PageSettings, {})
|
90
|
-
})
|
45
|
+
onClick: onSettings,
|
46
|
+
icon: /*#__PURE__*/_jsx(PageSettings, {}),
|
47
|
+
icoBtnType: icoBtnType
|
91
48
|
}), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
|
92
49
|
element: openSetttings?.element || {},
|
93
50
|
onSave: onSave,
|
@@ -29,22 +29,28 @@ const Signature = props => {
|
|
29
29
|
}],
|
30
30
|
...data
|
31
31
|
}], {
|
32
|
-
at:
|
32
|
+
at: path
|
33
33
|
});
|
34
34
|
};
|
35
35
|
const onClear = () => {
|
36
36
|
Transforms.removeNodes(editor, {
|
37
|
-
at:
|
37
|
+
at: path
|
38
38
|
});
|
39
39
|
};
|
40
40
|
return /*#__PURE__*/_jsxs("div", {
|
41
41
|
className: `signature-container`,
|
42
42
|
...attributes,
|
43
|
+
contentEditable: false,
|
43
44
|
children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
|
44
45
|
customProps: customProps,
|
45
46
|
onSave: onSave,
|
46
47
|
onClear: onClear
|
47
|
-
}) : null,
|
48
|
+
}) : null, /*#__PURE__*/_jsx("span", {
|
49
|
+
style: {
|
50
|
+
display: "none"
|
51
|
+
},
|
52
|
+
children: children
|
53
|
+
})]
|
48
54
|
});
|
49
55
|
};
|
50
56
|
export default Signature;
|
@@ -1,22 +1,23 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { IconButton, Tooltip } from "@mui/material";
|
3
2
|
import { insertSignature } from "../../utils/signature";
|
4
|
-
import
|
3
|
+
import ToolbarIcon from "../../common/ToolbarIcon";
|
4
|
+
import Icon from "../../common/Icon";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
const SignatureButton = props => {
|
7
7
|
const {
|
8
|
-
editor
|
8
|
+
editor,
|
9
|
+
icoBtnType
|
9
10
|
} = props;
|
10
11
|
const handleInsertSignature = () => {
|
11
12
|
insertSignature(editor);
|
12
13
|
};
|
13
|
-
return /*#__PURE__*/_jsx(
|
14
|
+
return /*#__PURE__*/_jsx(ToolbarIcon, {
|
14
15
|
title: "Signature",
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
16
|
+
onClick: handleInsertSignature,
|
17
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
18
|
+
icon: "signature"
|
19
|
+
}),
|
20
|
+
icoBtnType: icoBtnType
|
20
21
|
});
|
21
22
|
};
|
22
23
|
export default SignatureButton;
|
@@ -19,6 +19,10 @@ const SignaturePopup = props => {
|
|
19
19
|
customProps,
|
20
20
|
className
|
21
21
|
} = props;
|
22
|
+
const {
|
23
|
+
readOnly,
|
24
|
+
metadata
|
25
|
+
} = customProps;
|
22
26
|
const [open, setOpen] = useState(false);
|
23
27
|
const [tab, setTab] = useState(0);
|
24
28
|
const SeletectedTab = SignatureOptions[tab];
|
@@ -38,7 +42,13 @@ const SignaturePopup = props => {
|
|
38
42
|
resource_id: customProps?.page_id
|
39
43
|
});
|
40
44
|
onSave(signedData);
|
41
|
-
|
45
|
+
// manual delay
|
46
|
+
setTimeout(() => {
|
47
|
+
if (metadata && metadata?.actionHandler) {
|
48
|
+
metadata?.actionHandler("signed", signedData);
|
49
|
+
}
|
50
|
+
handleClose();
|
51
|
+
}, 0);
|
42
52
|
};
|
43
53
|
const handleClear = () => {
|
44
54
|
onClear();
|
@@ -77,7 +87,7 @@ const SignaturePopup = props => {
|
|
77
87
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
78
88
|
children: [/*#__PURE__*/_jsx("div", {
|
79
89
|
className: `signature-btn-container`,
|
80
|
-
children: /*#__PURE__*/_jsx(
|
90
|
+
children: /*#__PURE__*/_jsx(Button, {
|
81
91
|
contentEditable: false,
|
82
92
|
onClick: handleOpen,
|
83
93
|
children: "Sign Here"
|
@@ -187,13 +197,14 @@ const SignaturePopup = props => {
|
|
187
197
|
sx: {
|
188
198
|
pt: 2
|
189
199
|
},
|
200
|
+
spacing: 1,
|
190
201
|
style: {
|
191
202
|
display: "flex",
|
192
203
|
justifyContent: "space-between"
|
193
204
|
},
|
194
205
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
195
206
|
item: true,
|
196
|
-
xs:
|
207
|
+
xs: 6,
|
197
208
|
style: {
|
198
209
|
display: "flex",
|
199
210
|
alignItems: "center"
|
@@ -207,7 +218,10 @@ const SignaturePopup = props => {
|
|
207
218
|
children: "Name:"
|
208
219
|
})
|
209
220
|
}), /*#__PURE__*/_jsx(Grid, {
|
221
|
+
item: true,
|
222
|
+
xs: 12,
|
210
223
|
children: /*#__PURE__*/_jsx(TextField, {
|
224
|
+
fullWidth: true,
|
211
225
|
id: "signedBy",
|
212
226
|
name: "signedBy",
|
213
227
|
placeholder: "Enter Name",
|
@@ -217,7 +231,7 @@ const SignaturePopup = props => {
|
|
217
231
|
})]
|
218
232
|
}), /*#__PURE__*/_jsxs(Grid, {
|
219
233
|
item: true,
|
220
|
-
xs:
|
234
|
+
xs: 6,
|
221
235
|
style: {
|
222
236
|
display: "flex",
|
223
237
|
alignItems: "center"
|
@@ -231,6 +245,8 @@ const SignaturePopup = props => {
|
|
231
245
|
children: "Date:"
|
232
246
|
})
|
233
247
|
}), /*#__PURE__*/_jsx(Grid, {
|
248
|
+
item: true,
|
249
|
+
xs: 12,
|
234
250
|
children: /*#__PURE__*/_jsx(DatePicker, {
|
235
251
|
showIcon: true,
|
236
252
|
id: "signedOn",
|
@@ -244,6 +260,33 @@ const SignaturePopup = props => {
|
|
244
260
|
}
|
245
261
|
})
|
246
262
|
})]
|
263
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
264
|
+
item: true,
|
265
|
+
xs: 6,
|
266
|
+
style: {
|
267
|
+
display: "flex",
|
268
|
+
alignItems: "center"
|
269
|
+
},
|
270
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
271
|
+
style: {
|
272
|
+
marginRight: "8px"
|
273
|
+
},
|
274
|
+
children: /*#__PURE__*/_jsx("label", {
|
275
|
+
htmlFor: "signedByEmail",
|
276
|
+
children: "Email:"
|
277
|
+
})
|
278
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
279
|
+
item: true,
|
280
|
+
xs: 12,
|
281
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
282
|
+
fullWidth: true,
|
283
|
+
id: "signedByEmail",
|
284
|
+
name: "signedByEmail",
|
285
|
+
placeholder: "Enter Email",
|
286
|
+
size: "small",
|
287
|
+
onChange: onChange
|
288
|
+
})
|
289
|
+
})]
|
247
290
|
})]
|
248
291
|
})]
|
249
292
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
@@ -293,11 +336,11 @@ const SignaturePopup = props => {
|
|
293
336
|
})
|
294
337
|
})]
|
295
338
|
}) : null, /*#__PURE__*/_jsxs(_Fragment, {
|
296
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
339
|
+
children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
|
297
340
|
onClick: handleClear,
|
298
341
|
className: "secondaryBtn",
|
299
|
-
children: "
|
300
|
-
}), /*#__PURE__*/_jsx(Button, {
|
342
|
+
children: "Delete"
|
343
|
+
}) : null, /*#__PURE__*/_jsx(Button, {
|
301
344
|
onClick: handleSave,
|
302
345
|
className: "primaryBtn",
|
303
346
|
children: "Save"
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
|
3
|
+
import { Node } from "slate";
|
4
|
+
import { Box } from "@mui/material";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const SimpleTextStyle = () => ({
|
8
|
+
root: {
|
9
|
+
position: "relative",
|
10
|
+
padding: "0px",
|
11
|
+
"& .placeholder-simple-text": {
|
12
|
+
color: "#B8C5D7",
|
13
|
+
background: "#FFF",
|
14
|
+
position: "absolute",
|
15
|
+
zIndex: -1,
|
16
|
+
left: "4px",
|
17
|
+
top: 0,
|
18
|
+
bottom: 0,
|
19
|
+
margin: "auto",
|
20
|
+
pointerEvents: "none",
|
21
|
+
height: "18px",
|
22
|
+
padding: "0px",
|
23
|
+
"& .bg-pad-sl": {
|
24
|
+
padding: "2px 4px 2px 4px",
|
25
|
+
background: "#F2F6FA",
|
26
|
+
fontSize: "12px"
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
});
|
31
|
+
const SimpleText = props => {
|
32
|
+
const {
|
33
|
+
element,
|
34
|
+
attributes,
|
35
|
+
children
|
36
|
+
} = props;
|
37
|
+
const classes = SimpleTextStyle();
|
38
|
+
const editor = useSlateStatic();
|
39
|
+
const selected = useSelected();
|
40
|
+
const path = ReactEditor.findPath(editor, element);
|
41
|
+
// const parentPath = Path.parent(path);
|
42
|
+
// const parentNode = Node.get(editor, parentPath);
|
43
|
+
const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
|
44
|
+
const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
|
45
|
+
return /*#__PURE__*/_jsxs(Box, {
|
46
|
+
...element.attr,
|
47
|
+
...attributes,
|
48
|
+
className: `simple-text`,
|
49
|
+
sx: classes.root,
|
50
|
+
children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
|
51
|
+
className: "placeholder-simple-text",
|
52
|
+
children: ["Type ", /*#__PURE__*/_jsx("span", {
|
53
|
+
className: "bg-pad-sl",
|
54
|
+
children: "/"
|
55
|
+
}), " for browse elements"]
|
56
|
+
}) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
|
57
|
+
className: "placeholder-simple-text",
|
58
|
+
children: "Write Something..."
|
59
|
+
}) : null]
|
60
|
+
});
|
61
|
+
};
|
62
|
+
export default SimpleText;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
const TableStyles = () => ({
|
2
|
+
tableToolBar: {
|
3
|
+
position: "absolute",
|
4
|
+
top: "-34px",
|
5
|
+
left: 0,
|
6
|
+
backgroundColor: "#FFF",
|
7
|
+
border: "1px solid rgba(37, 99, 235, 0.32)",
|
8
|
+
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
|
9
|
+
borderRadius: "0px",
|
10
|
+
width: "32px",
|
11
|
+
height: "32px",
|
12
|
+
overflow: "hidden",
|
13
|
+
transition: "all 0.3s",
|
14
|
+
"& button": {
|
15
|
+
"& svg": {
|
16
|
+
width: "16px",
|
17
|
+
height: "16px"
|
18
|
+
}
|
19
|
+
},
|
20
|
+
"&.active": {
|
21
|
+
width: "auto",
|
22
|
+
"& .toggle": {
|
23
|
+
rotate: "180deg"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
"& .toolbtn": {
|
27
|
+
"& svg": {
|
28
|
+
stroke: "rgb(100, 116, 139)"
|
29
|
+
}
|
30
|
+
}
|
31
|
+
},
|
32
|
+
table: {
|
33
|
+
"& td": {
|
34
|
+
padding: "8px 8px",
|
35
|
+
border: "1px solid #E0E0E0",
|
36
|
+
"&.selection": {
|
37
|
+
"& *::selection": {
|
38
|
+
background: "transparent"
|
39
|
+
}
|
40
|
+
}
|
41
|
+
},
|
42
|
+
"& .selection-area-tc": {
|
43
|
+
position: "absolute",
|
44
|
+
width: "100%",
|
45
|
+
height: "100%",
|
46
|
+
top: 0,
|
47
|
+
left: 0,
|
48
|
+
background: "rgba(149, 218, 255, .3)",
|
49
|
+
pointerEvents: "none"
|
50
|
+
}
|
51
|
+
},
|
52
|
+
cellResizer: {
|
53
|
+
position: "absolute",
|
54
|
+
cursor: "col-resize",
|
55
|
+
right: "-2px",
|
56
|
+
top: 0,
|
57
|
+
background: "transparent",
|
58
|
+
width: "4px",
|
59
|
+
borderRadius: "0px",
|
60
|
+
zIndex: 1,
|
61
|
+
"&:hover": {
|
62
|
+
background: "#ccc"
|
63
|
+
}
|
64
|
+
}
|
65
|
+
});
|
66
|
+
export default TableStyles;
|
@@ -1,18 +1,21 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic } from "slate-react";
|
4
|
-
import { IconButton } from "@mui/material";
|
4
|
+
import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
|
5
5
|
import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
|
6
6
|
import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
|
7
7
|
import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
|
8
8
|
import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
|
9
9
|
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
|
10
|
+
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
11
|
+
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
10
12
|
import SettingsIcon from "@mui/icons-material/Settings";
|
11
13
|
import DeleteCellIcon from "./DeleteCellIcon";
|
12
14
|
import DeleteRowIcon from "./DeleteRowIcon";
|
13
15
|
import { TableUtil } from "../../utils/table";
|
14
16
|
import TablePopup from "./TablePopup";
|
15
17
|
import "./table.css";
|
18
|
+
import TableStyles from "./Styles";
|
16
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
18
21
|
const TABLE_MENUS = [{
|
@@ -75,10 +78,12 @@ const Table = props => {
|
|
75
78
|
children,
|
76
79
|
customProps
|
77
80
|
} = props;
|
81
|
+
const classes = TableStyles();
|
78
82
|
const {
|
79
83
|
readOnly
|
80
84
|
} = customProps;
|
81
85
|
const [openSetttings, setOpenSettings] = useState(false);
|
86
|
+
const [exandTools, setExpandTools] = useState(false);
|
82
87
|
const {
|
83
88
|
bgColor,
|
84
89
|
borderColor
|
@@ -117,27 +122,38 @@ const Table = props => {
|
|
117
122
|
return;
|
118
123
|
}
|
119
124
|
};
|
125
|
+
const handleExpand = () => {
|
126
|
+
setExpandTools(!exandTools);
|
127
|
+
};
|
120
128
|
const ToolBar = () => {
|
121
|
-
return selected ? /*#__PURE__*/
|
129
|
+
return selected ? /*#__PURE__*/_jsxs(Box, {
|
130
|
+
component: "div",
|
122
131
|
contentEditable: false,
|
123
|
-
className:
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
132
|
+
className: `tableToolBar ${exandTools ? "active" : ""}`,
|
133
|
+
sx: classes.tableToolBar,
|
134
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
135
|
+
title: "Show Tools",
|
136
|
+
arrow: true,
|
137
|
+
onClick: handleExpand,
|
138
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
139
|
+
className: "toolbtn toggle",
|
140
|
+
children: /*#__PURE__*/_jsx(MoreVertIcon, {})
|
141
|
+
})
|
142
|
+
}), TABLE_MENUS.map(({
|
131
143
|
Icon,
|
132
144
|
text,
|
133
145
|
action
|
134
146
|
}) => {
|
135
|
-
return /*#__PURE__*/_jsx(
|
147
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
136
148
|
title: text,
|
137
|
-
|
138
|
-
children: /*#__PURE__*/_jsx(
|
149
|
+
arrow: true,
|
150
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
151
|
+
className: "toolbtn",
|
152
|
+
onClick: handleAction(action),
|
153
|
+
children: /*#__PURE__*/_jsx(Icon, {})
|
154
|
+
})
|
139
155
|
}, text);
|
140
|
-
})
|
156
|
+
})]
|
141
157
|
}) : null;
|
142
158
|
};
|
143
159
|
const onSettings = () => {
|
@@ -163,13 +179,14 @@ const Table = props => {
|
|
163
179
|
maxWidth: "100%",
|
164
180
|
position: "relative"
|
165
181
|
},
|
166
|
-
children: [/*#__PURE__*/_jsx(
|
182
|
+
children: [/*#__PURE__*/_jsx(TableComp, {
|
183
|
+
sx: classes.table,
|
167
184
|
style: {
|
168
185
|
backgroundColor: bgColor,
|
169
186
|
border: `1px solid ${borderColor}`,
|
170
187
|
width: "auto"
|
171
188
|
},
|
172
|
-
children: /*#__PURE__*/_jsx(
|
189
|
+
children: /*#__PURE__*/_jsx(TableBody, {
|
173
190
|
...attributes,
|
174
191
|
children: children
|
175
192
|
})
|