@flozy/editor 4.5.0 → 4.5.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Editor.css +12 -0
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +5 -2
- package/dist/Editor/Elements/FreeGrid/styles.js +10 -2
- package/dist/Editor/Elements/Signature/Signature.css +2 -5
- package/dist/Editor/Elements/Signature/SignaturePopup.js +26 -17
- package/dist/Editor/Elements/Signature/Signed.js +1 -1
- package/dist/Editor/common/RnD/ElementOptions/styles.js +5 -0
- package/dist/Editor/common/RnD/RnDCopy.js +2 -0
- package/dist/Editor/common/iconslist.js +23 -0
- package/dist/Editor/commonStyle.js +20 -5
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +12 -9
- package/package.json +1 -1
package/dist/Editor/Editor.css
CHANGED
@@ -234,6 +234,18 @@ blockquote {
|
|
234
234
|
background-color: #0052cc;
|
235
235
|
}
|
236
236
|
|
237
|
+
.signature-btn-container .sign-placeholder {
|
238
|
+
display: none; /* will changed to flex on DnD */
|
239
|
+
flex-direction: column;
|
240
|
+
justify-content: center;
|
241
|
+
align-items: center;
|
242
|
+
border: 1px solid #E4E6E9;
|
243
|
+
border-radius: 10px;
|
244
|
+
background: white;
|
245
|
+
box-shadow: 0px 4px 16px 0px #0000000D;
|
246
|
+
gap: 10px;
|
247
|
+
}
|
248
|
+
|
237
249
|
.signature-btn-grps {
|
238
250
|
display: flex;
|
239
251
|
justify-content: space-around;
|
@@ -225,8 +225,10 @@ const FreeGrid = props => {
|
|
225
225
|
left: 50,
|
226
226
|
marginTop: 0,
|
227
227
|
top: 0,
|
228
|
-
width:
|
229
|
-
height:
|
228
|
+
width: 217,
|
229
|
+
height: 173,
|
230
|
+
width_xs: 217,
|
231
|
+
height_xs: 173
|
230
232
|
}], {
|
231
233
|
at: [...insertAt]
|
232
234
|
});
|
@@ -382,6 +384,7 @@ const FreeGrid = props => {
|
|
382
384
|
Transforms.removeNodes(editor, {
|
383
385
|
at: Path.parent(path)
|
384
386
|
});
|
387
|
+
setSelectedElement({});
|
385
388
|
} catch (err) {
|
386
389
|
console.log(err);
|
387
390
|
}
|
@@ -169,9 +169,17 @@ const useFreeGridStyles = ({
|
|
169
169
|
height: "100%",
|
170
170
|
"& .signature-btn-container": {
|
171
171
|
height: "100%",
|
172
|
-
|
172
|
+
display: "flex",
|
173
|
+
flexDirection: "column",
|
174
|
+
"& .sign-placeholder": {
|
175
|
+
display: "flex",
|
176
|
+
// remove hidden sign placeholder
|
173
177
|
width: "100%",
|
174
|
-
|
178
|
+
background: theme?.palette?.editor?.background,
|
179
|
+
flexGrow: 1
|
180
|
+
},
|
181
|
+
"& button": {
|
182
|
+
margin: "6px 0px"
|
175
183
|
}
|
176
184
|
}
|
177
185
|
}
|
@@ -1,5 +1,4 @@
|
|
1
1
|
.af-signature-popup .MuiTab-root {
|
2
|
-
background: #ffffff;
|
3
2
|
border: 1px solid #D3D3D3 !important;
|
4
3
|
border-radius: 7px;
|
5
4
|
height: 37px;
|
@@ -10,15 +9,13 @@
|
|
10
9
|
color: #64748b;
|
11
10
|
margin-right: 13px;
|
12
11
|
padding: 6px 10px !important;
|
13
|
-
color: #0f172a !important;
|
14
12
|
opacity: 0.7;
|
15
13
|
}
|
16
14
|
.af-signature-popup .MuiTab-root.Mui-selected {
|
17
|
-
background: #ffffff;
|
18
15
|
border: 1.5px solid #2563EB !important;
|
19
16
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
|
20
17
|
border-radius: 7px;
|
21
|
-
color: #
|
18
|
+
color: #2563EB !important;
|
22
19
|
}
|
23
20
|
.af-signature-popup .MuiTabs-indicator {
|
24
21
|
display: none;
|
@@ -72,7 +69,7 @@
|
|
72
69
|
top: 0px;
|
73
70
|
left: 0px;
|
74
71
|
cursor: pointer;
|
75
|
-
background-color: #F8F9FF;
|
72
|
+
/* background-color: #F8F9FF; */
|
76
73
|
}
|
77
74
|
|
78
75
|
.upload-wrapper-ui-text {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
|
2
|
+
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
|
3
3
|
import CloseIcon from "@mui/icons-material/Close";
|
4
4
|
import DatePicker from "react-datepicker";
|
5
5
|
import "react-datepicker/dist/react-datepicker.css";
|
@@ -11,6 +11,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
|
|
11
11
|
import { validationMethods } from "../Form/FormElements/validations";
|
12
12
|
import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
|
13
13
|
import ColorPickerButton from "../../common/ColorPickerButton";
|
14
|
+
import { SignaturePlaceholderIcon } from "../../common/iconslist";
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
17
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -129,13 +130,25 @@ const SignaturePopup = props => {
|
|
129
130
|
isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
|
130
131
|
}
|
131
132
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
132
|
-
children: [onlyPopup ? null : /*#__PURE__*/
|
133
|
+
children: [onlyPopup ? null : /*#__PURE__*/_jsxs("div", {
|
133
134
|
className: `signature-btn-container`,
|
134
|
-
|
135
|
-
|
135
|
+
contentEditable: false,
|
136
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
137
|
+
className: "sign-placeholder",
|
138
|
+
children: [/*#__PURE__*/_jsx(SignaturePlaceholderIcon, {}), /*#__PURE__*/_jsx(Typography, {
|
139
|
+
variant: "body2",
|
140
|
+
style: {
|
141
|
+
color: "#A2B0B9"
|
142
|
+
},
|
143
|
+
children: "Your sign will be placed here"
|
144
|
+
})]
|
145
|
+
}), /*#__PURE__*/_jsx(Button, {
|
136
146
|
onClick: handleOpen,
|
147
|
+
style: {
|
148
|
+
width: "fit-content"
|
149
|
+
},
|
137
150
|
children: "Sign Here"
|
138
|
-
})
|
151
|
+
})]
|
139
152
|
}), /*#__PURE__*/_jsx(Dialog, {
|
140
153
|
className: `${className} dialogComp`,
|
141
154
|
open: onlyPopup || open,
|
@@ -145,10 +158,10 @@ const SignaturePopup = props => {
|
|
145
158
|
sx: {
|
146
159
|
borderRadius: "8px",
|
147
160
|
boxShadow: "0px 4px 10px 0px #00000029",
|
148
|
-
maxWidth: "560px"
|
149
|
-
...classes.signaturePopup
|
161
|
+
maxWidth: "560px"
|
150
162
|
}
|
151
163
|
},
|
164
|
+
sx: classes.signaturePopup,
|
152
165
|
children: /*#__PURE__*/_jsx(Grid, {
|
153
166
|
container: true,
|
154
167
|
children: /*#__PURE__*/_jsxs(Grid, {
|
@@ -169,12 +182,8 @@ const SignaturePopup = props => {
|
|
169
182
|
item: true,
|
170
183
|
children: /*#__PURE__*/_jsx(Typography, {
|
171
184
|
variant: "h6",
|
172
|
-
className: `${classes.popupTitle2}`,
|
173
185
|
color: "primary",
|
174
|
-
sx:
|
175
|
-
fontWeight: 600,
|
176
|
-
color: "#000000"
|
177
|
-
},
|
186
|
+
sx: classes.popupTitle2,
|
178
187
|
children: "Signature"
|
179
188
|
})
|
180
189
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -311,7 +320,7 @@ const SignaturePopup = props => {
|
|
311
320
|
"& .MuiOutlinedInput-root": {
|
312
321
|
borderRadius: "10px",
|
313
322
|
"& fieldset": {
|
314
|
-
|
323
|
+
border: "1px solid #D8DDE1"
|
315
324
|
}
|
316
325
|
// '&:hover fieldset': {
|
317
326
|
// borderColor: 'yourHoverColor',
|
@@ -455,7 +464,7 @@ const SignaturePopup = props => {
|
|
455
464
|
"& .MuiOutlinedInput-root": {
|
456
465
|
borderRadius: "10px",
|
457
466
|
"& fieldset": {
|
458
|
-
|
467
|
+
border: "1px solid #D8DDE1"
|
459
468
|
}
|
460
469
|
// '&:hover fieldset': {
|
461
470
|
// borderColor: 'yourHoverColor',
|
@@ -505,9 +514,9 @@ const SignaturePopup = props => {
|
|
505
514
|
marginLeft: "10px",
|
506
515
|
fontFamily: '"Inter", sans-serif',
|
507
516
|
fontSize: "14px",
|
508
|
-
fontWeight: 500
|
509
|
-
color: "#333"
|
517
|
+
fontWeight: 500
|
510
518
|
},
|
519
|
+
className: "brush-color",
|
511
520
|
children: brush.color
|
512
521
|
})]
|
513
522
|
})
|
@@ -539,7 +548,7 @@ const SignaturePopup = props => {
|
|
539
548
|
}) : null, /*#__PURE__*/_jsxs(_Fragment, {
|
540
549
|
children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
|
541
550
|
onClick: handleClear,
|
542
|
-
className: "secondaryBtn actionBtn",
|
551
|
+
className: "secondaryBtn actionBtn deleteBtn",
|
543
552
|
children: "Delete"
|
544
553
|
}) : null, /*#__PURE__*/_jsx(Button, {
|
545
554
|
onClick: handleSave,
|
@@ -12,6 +12,8 @@ const RnDCopy = props => {
|
|
12
12
|
useEffect(() => {
|
13
13
|
if (selectedElement?.path) {
|
14
14
|
window.selectedRnDElement = selectedElement;
|
15
|
+
} else {
|
16
|
+
window.selectedRnDElement = {};
|
15
17
|
}
|
16
18
|
}, [selectedElement?.path, selectedElement?.enable]);
|
17
19
|
return !readOnly ? /*#__PURE__*/_jsx(Box, {
|
@@ -2337,4 +2337,27 @@ export const ResetIcon = () => /*#__PURE__*/_jsxs("svg", {
|
|
2337
2337
|
strokeLinecap: "round",
|
2338
2338
|
strokeLinejoin: "round"
|
2339
2339
|
})]
|
2340
|
+
});
|
2341
|
+
export const SignaturePlaceholderIcon = () => /*#__PURE__*/_jsxs("svg", {
|
2342
|
+
width: "39",
|
2343
|
+
height: "29",
|
2344
|
+
viewBox: "0 0 39 29",
|
2345
|
+
fill: "none",
|
2346
|
+
xmlns: "http://www.w3.org/2000/svg",
|
2347
|
+
children: [/*#__PURE__*/_jsx("path", {
|
2348
|
+
d: "M32.9361 2.30469L18.7107 16.5287C17.8881 17.3501 17.8881 18.6836 18.7107 19.5061L19.4967 20.2922C20.3182 21.1137 21.6528 21.1137 22.4742 20.2922L36.701 6.06677L32.9361 2.30469Z",
|
2349
|
+
fill: "#64748B"
|
2350
|
+
}), /*#__PURE__*/_jsx("path", {
|
2351
|
+
d: "M18.0898 20.1246C17.7023 19.7372 17.4549 19.2631 17.3415 18.7656L17.277 18.9424C17.1454 19.3043 16.9272 19.899 16.7945 20.2609L15.9122 22.6728C15.9074 22.6848 15.906 22.6972 15.9023 22.7056L16.9701 21.6392C17.0787 21.532 17.254 21.532 17.3626 21.6392C17.4711 21.7489 17.4711 21.9245 17.3626 22.0317L16.2962 23.1006C16.3083 23.0958 16.3181 23.0933 16.3304 23.0885L18.7423 22.2073C19.1042 22.0743 19.6978 21.8575 20.0608 21.7248L20.2376 21.6602C19.739 21.5458 19.2649 21.2983 18.8774 20.9132L18.0898 20.1246Z",
|
2352
|
+
fill: "#64748B"
|
2353
|
+
}), /*#__PURE__*/_jsx("path", {
|
2354
|
+
d: "M38.3842 1.40407L37.5982 0.617994C36.7756 -0.205998 35.4421 -0.205998 34.6207 0.617994L33.5664 1.67231L37.3299 5.43583L38.3842 4.38151C39.2057 3.55896 39.2057 2.22547 38.3842 1.40407Z",
|
2355
|
+
fill: "#64748B"
|
2356
|
+
}), /*#__PURE__*/_jsx("path", {
|
2357
|
+
d: "M36.7307 7.02477L30.3199 13.4356C30.0626 13.6928 30.0626 14.1095 30.3199 14.3667C30.5772 14.624 30.9938 14.624 31.251 14.3667L37.6604 7.95591C37.9177 7.69865 37.9177 7.28204 37.6604 7.02477C37.4034 6.76779 36.9865 6.76779 36.7307 7.02477Z",
|
2358
|
+
fill: "#64748B"
|
2359
|
+
}), /*#__PURE__*/_jsx("path", {
|
2360
|
+
d: "M19.034 24.3978H14.2468C12.5175 24.3978 11.4972 24.7574 10.8208 24.9951C10.0347 25.2742 9.97013 25.295 9.23397 24.6259C9.00841 24.4185 8.79632 24.1408 8.57216 23.8445C8.02117 23.1207 7.33161 22.2115 6.14206 22.2833C4.44193 22.3784 4.29183 24.1467 4.20291 25.2035C4.18833 25.3814 4.17121 25.58 4.14821 25.775C4.03234 25.4131 3.9204 25.0181 3.83511 24.7159C3.69624 24.221 3.55232 23.7116 3.39746 23.2826C3.07567 22.3966 2.51371 22.276 2.17738 22.2833C1.84465 22.2906 0.959808 22.3088 0.0410129 25.2229C-0.105155 25.6847 0.151831 26.1773 0.613894 26.3246C1.0782 26.4697 1.57054 26.2124 1.71698 25.7506C1.81208 25.4485 1.92907 25.134 2.04719 24.8512C2.07889 24.9634 2.11171 25.0779 2.14341 25.1912C2.59566 26.7976 2.95282 28.0638 3.9229 28.2955C3.99725 28.3126 4.08982 28.3261 4.19699 28.3261C4.47474 28.3261 4.84534 28.2285 5.20499 27.8337C5.79863 27.1843 5.88139 26.2102 5.95321 25.3534C5.98744 24.9438 6.05196 24.1796 6.23853 24.0371C6.49214 24.0273 6.76625 24.3724 7.17334 24.9085C7.42331 25.2376 7.70723 25.6104 8.05091 25.9224C9.46232 27.2081 10.2594 27.0558 11.4048 26.6512C12.0338 26.4293 12.8174 26.1541 14.2457 26.1541H19.0329C19.518 26.1541 19.9116 25.7591 19.9116 25.2754C19.9127 24.7915 19.5205 24.3979 19.034 24.3979L19.034 24.3978Z",
|
2361
|
+
fill: "#64748B"
|
2362
|
+
})]
|
2340
2363
|
});
|
@@ -79,15 +79,22 @@ const useCommonStyle = theme => ({
|
|
79
79
|
color: theme?.palette?.editor?.textColor,
|
80
80
|
backgroundColor: theme?.palette?.editor?.background
|
81
81
|
},
|
82
|
+
"& .MuiInputBase-root": {
|
83
|
+
backgroundColor: theme?.palette?.editor?.background
|
84
|
+
},
|
85
|
+
"& .brush-color": {
|
86
|
+
color: theme?.palette?.editor?.textColor
|
87
|
+
},
|
82
88
|
"& .react-datepicker__input-container": {
|
83
89
|
"& svg": {
|
84
|
-
fill:
|
90
|
+
fill: "transparent"
|
85
91
|
}
|
86
92
|
},
|
87
93
|
"& fieldset": {
|
88
94
|
borderColor: theme?.palette?.editor?.textColor
|
89
95
|
},
|
90
96
|
"& .upload-wrapper-ui": {
|
97
|
+
backgroundColor: theme?.palette?.type === "dark" ? "transparent" : "#F8F9FF",
|
91
98
|
"& .MuiTypography-root": {
|
92
99
|
color: theme?.palette?.editor?.textColor
|
93
100
|
}
|
@@ -96,14 +103,22 @@ const useCommonStyle = theme => ({
|
|
96
103
|
"& button": {
|
97
104
|
color: theme?.palette?.editor?.textColor
|
98
105
|
}
|
106
|
+
},
|
107
|
+
"& .MuiTab-root": {
|
108
|
+
color: theme?.palette?.editor?.textColor,
|
109
|
+
backgroundColor: theme?.palette?.editor?.background
|
110
|
+
},
|
111
|
+
"& .close-popupbtn": {
|
112
|
+
color: theme?.palette?.editor?.textColor
|
113
|
+
},
|
114
|
+
"& .deleteBtn": {
|
115
|
+
background: "transparent"
|
99
116
|
}
|
100
117
|
}
|
101
118
|
},
|
102
119
|
popupTitle2: {
|
103
|
-
fontWeight:
|
104
|
-
|
105
|
-
display: "flex",
|
106
|
-
alignItems: "center"
|
120
|
+
fontWeight: 600,
|
121
|
+
color: theme?.palette?.editor?.textColor
|
107
122
|
},
|
108
123
|
textOptions: {
|
109
124
|
"& .MuiPopover-root": {
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Editor, Transforms, Node, Path } from "slate";
|
2
2
|
import { isSelectionInNodeType, getCaretPosition, onPasteRnDNode, bringItemToFB } from "../../helper";
|
3
3
|
import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
|
4
|
+
import { ReactEditor } from "slate-react";
|
4
5
|
const RND_ITEM_TYPES = ["freegrid", "freegridItem", "freegridBox"];
|
5
6
|
const parsePath = path => path?.split("|").map(m => parseInt(m));
|
6
7
|
const selectAll = (event, {
|
@@ -182,17 +183,19 @@ export const onInsertFragment = ({
|
|
182
183
|
});
|
183
184
|
}
|
184
185
|
} else {
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
if (np && window.updateSelectedItem) {
|
192
|
-
focusOnNewItem(editor, np, {
|
193
|
-
setSelectedElement: window.updateSelectedItem
|
186
|
+
ReactEditor.focus(editor);
|
187
|
+
if (editor.children.length === 0) {
|
188
|
+
Transforms.insertNodes(editor, {
|
189
|
+
text: ""
|
190
|
+
}, {
|
191
|
+
at: [0]
|
194
192
|
});
|
195
193
|
}
|
194
|
+
Transforms.insertNodes(editor, [{
|
195
|
+
...slateNodes
|
196
|
+
}], {
|
197
|
+
at: [editor.children.length - 1]
|
198
|
+
});
|
196
199
|
}
|
197
200
|
} catch (err) {
|
198
201
|
console.log(err);
|