@flozy/editor 3.5.9 → 3.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/Embed/Image.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +24 -15
- package/dist/Editor/Elements/Form/FormElements/FormNumbers.js +19 -14
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/metaDataMapping.js +0 -1
- package/dist/Editor/utils/table.js +8 -4
- package/package.json +1 -1
@@ -6,7 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
|
|
6
6
|
import EmbedPopup from "./EmbedPopup";
|
7
7
|
import { IconButton, Tooltip, Box } from "@mui/material";
|
8
8
|
import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
|
9
|
-
import { useEditorContext
|
9
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
10
|
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
11
11
|
import Icon from "../../common/Icon";
|
12
12
|
import frames from "./Frames";
|
@@ -63,9 +63,11 @@ const Form = props => {
|
|
63
63
|
const [showOptions, setShowOptions] = useState(false);
|
64
64
|
const [submittedSuccessfully, setSubmittedSuccessfully] = useState(false);
|
65
65
|
const [formHeight, setFormHeight] = useState();
|
66
|
+
const [formWidth, setFormWidth] = useState();
|
66
67
|
const path = ReactEditor.findPath(editor, element);
|
67
68
|
useEffect(() => {
|
68
69
|
setFormHeight(formEle?.current?.clientHeight);
|
70
|
+
setFormWidth(formEle?.current?.clientWidth);
|
69
71
|
}, []);
|
70
72
|
const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
|
71
73
|
borderImageSource: buttonProps?.borderColor,
|
@@ -317,7 +319,7 @@ const Form = props => {
|
|
317
319
|
},
|
318
320
|
onMouseOver: onMouseOver,
|
319
321
|
onMouseLeave: onMouseLeave,
|
320
|
-
children: [
|
322
|
+
children: [/*#__PURE__*/_jsxs(Box, {
|
321
323
|
component: "form",
|
322
324
|
id: `${formName}`,
|
323
325
|
onSubmit: handleSubmit,
|
@@ -325,6 +327,7 @@ const Form = props => {
|
|
325
327
|
color: textColor || "#FFF",
|
326
328
|
borderColor: borderColor || "transparent",
|
327
329
|
borderWidth: borderWidth || "1px",
|
330
|
+
display: submittedSuccessfully ? 'none' : 'block',
|
328
331
|
borderRadius: {
|
329
332
|
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
330
333
|
},
|
@@ -412,17 +415,20 @@ const Form = props => {
|
|
412
415
|
}
|
413
416
|
})
|
414
417
|
})]
|
415
|
-
})
|
418
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
416
419
|
item: true,
|
420
|
+
sx: {
|
421
|
+
display: submittedSuccessfully ? 'flex' : 'none'
|
422
|
+
},
|
417
423
|
contentEditable: false,
|
418
|
-
children: /*#__PURE__*/
|
424
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
419
425
|
container: true,
|
420
426
|
alignItems: "center",
|
421
427
|
justifyContent: "center",
|
422
428
|
spacing: 2,
|
423
|
-
children:
|
429
|
+
children: /*#__PURE__*/_jsx(Grid, {
|
424
430
|
item: true,
|
425
|
-
children: /*#__PURE__*/
|
431
|
+
children: /*#__PURE__*/_jsxs(Typography, {
|
426
432
|
sx: {
|
427
433
|
color: textColor || "#A2A9B4",
|
428
434
|
borderColor: borderColor || "transparent",
|
@@ -436,23 +442,26 @@ const Form = props => {
|
|
436
442
|
...getTRBLBreakPoints(bannerSpacing)
|
437
443
|
},
|
438
444
|
minHeight: `${formHeight}px`,
|
445
|
+
minWidth: `${formWidth}px`,
|
439
446
|
display: "flex",
|
440
447
|
alignItems: "center",
|
441
448
|
justifyContent: "center",
|
442
449
|
textAlign: "center",
|
443
450
|
position: "relative"
|
444
451
|
},
|
445
|
-
children: "Form Submitted Successfully...!"
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
452
|
+
children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
|
453
|
+
style: {
|
454
|
+
paddingLeft: "10px"
|
455
|
+
},
|
456
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
457
|
+
onClick: handleCloseMessage,
|
458
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
459
|
+
icon: "closeIcon"
|
460
|
+
})
|
461
|
+
})
|
462
|
+
})]
|
454
463
|
})
|
455
|
-
})
|
464
|
+
})
|
456
465
|
})
|
457
466
|
}), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
|
458
467
|
element: element,
|
@@ -30,12 +30,25 @@ const FormNumbers = props => {
|
|
30
30
|
children: /*#__PURE__*/_jsx(Box, {
|
31
31
|
component: "input",
|
32
32
|
...rest,
|
33
|
-
type: "
|
34
|
-
|
35
|
-
|
33
|
+
type: "tel",
|
34
|
+
onChange: e => {
|
35
|
+
let value = e.target.value;
|
36
|
+
value = value.replace(/[^0-9+]/g, '');
|
37
|
+
if (value.startsWith('+')) {
|
38
|
+
value = value[0] + value.slice(1).replace(/\+/g, '');
|
39
|
+
}
|
40
|
+
if (value.startsWith('+')) {
|
41
|
+
if (value.length > 16) {
|
42
|
+
value = value.slice(0, 16);
|
43
|
+
}
|
44
|
+
} else {
|
45
|
+
if (value.length > 15) {
|
46
|
+
value = value.slice(0, 15);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
e.target.value = value;
|
50
|
+
onChange(e);
|
36
51
|
},
|
37
|
-
onChange: onChange,
|
38
|
-
onWheel: e => e.target.blur(),
|
39
52
|
sx: {
|
40
53
|
width: "100%",
|
41
54
|
border: `1px solid ${borderColor || "#FFF"}`,
|
@@ -50,17 +63,9 @@ const FormNumbers = props => {
|
|
50
63
|
},
|
51
64
|
borderStyle: borderStyle || "solid",
|
52
65
|
color: textColor || "#000",
|
53
|
-
background: bgColor || "transparent"
|
54
|
-
'&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
|
55
|
-
'-webkit-appearance': 'none',
|
56
|
-
margin: 0
|
57
|
-
},
|
58
|
-
'&[type=number]': {
|
59
|
-
'-moz-appearance': 'textfield' // Hide spin buttons for Firefox
|
60
|
-
}
|
66
|
+
background: bgColor || "transparent"
|
61
67
|
}
|
62
68
|
})
|
63
69
|
});
|
64
70
|
};
|
65
|
-
|
66
71
|
export default FormNumbers;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
2
|
import { useSlate } from "slate-react";
|
3
|
-
import { Box, Dialog, IconButton, Paper, Popper, Tooltip
|
3
|
+
import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
|
4
4
|
import MENU_OPTIONS from "./Options/Options";
|
5
5
|
import TextFormat from "../PopupTool/TextFormat";
|
6
6
|
import AddElements from "../PopupTool/AddElements";
|
@@ -8,7 +8,6 @@ import AddTemplates from "../PopupTool/AddTemplates";
|
|
8
8
|
import miniToolbarStyles from "./Styles";
|
9
9
|
import usePopupStyle from "../PopupTool/PopupToolStyle";
|
10
10
|
import PopperHeader from "../PopupTool/PopperHeader";
|
11
|
-
import { getSelectedText } from "../../utils/helper";
|
12
11
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
13
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -320,10 +320,14 @@ export class TableUtil {
|
|
320
320
|
const [tableNode] = Editor.nodes(this.editor, {
|
321
321
|
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
|
322
322
|
});
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
323
|
+
|
324
|
+
// const [, tableCellPath] = Editor.nodes(this.editor, {
|
325
|
+
// at: selection,
|
326
|
+
// match: (n) =>
|
327
|
+
// !Editor.isEditor(n) &&
|
328
|
+
// Element.isElement(n) &&
|
329
|
+
// n.type === "table-cell",
|
330
|
+
// });
|
327
331
|
const {
|
328
332
|
anchor,
|
329
333
|
focus
|