@flozy/editor 3.8.1 → 3.8.3
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
3
|
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
|
@@ -18,6 +18,11 @@ const TextSize = ({
|
|
18
18
|
const val = activeMark(editor, format);
|
19
19
|
const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
|
20
20
|
const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
|
21
|
+
const [fontSize, setFontSize] = useState();
|
22
|
+
const timerRef = useRef();
|
23
|
+
useEffect(() => {
|
24
|
+
setFontSize(getSizeVal());
|
25
|
+
}, [value]);
|
21
26
|
const updateMarkData = newVal => {
|
22
27
|
let upData = {
|
23
28
|
...getBreakPointsValue(val),
|
@@ -39,10 +44,14 @@ const TextSize = ({
|
|
39
44
|
}
|
40
45
|
});
|
41
46
|
};
|
42
|
-
const onChangeSize =
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
const onChangeSize = value => {
|
48
|
+
if (value) {
|
49
|
+
let inc = parseInt(value);
|
50
|
+
inc = inc > 200 ? 200 : inc;
|
51
|
+
updateMarkData(inc);
|
52
|
+
} else {
|
53
|
+
setFontSize(null);
|
54
|
+
}
|
46
55
|
};
|
47
56
|
const getSizeVal = () => {
|
48
57
|
try {
|
@@ -61,11 +70,19 @@ const TextSize = ({
|
|
61
70
|
const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
|
62
71
|
updateMarkData(newVal);
|
63
72
|
};
|
73
|
+
const onChange = e => {
|
74
|
+
clearTimeout(timerRef.current);
|
75
|
+
const value = e.target.value;
|
76
|
+
setFontSize(value);
|
77
|
+
timerRef.current = setTimeout(() => {
|
78
|
+
onChangeSize(value);
|
79
|
+
}, 500);
|
80
|
+
};
|
64
81
|
return /*#__PURE__*/_jsx(_Fragment, {
|
65
82
|
children: /*#__PURE__*/_jsx(TextField, {
|
66
83
|
sx: classes?.textSize,
|
67
|
-
value:
|
68
|
-
onChange:
|
84
|
+
value: fontSize,
|
85
|
+
onChange: onChange,
|
69
86
|
size: "small",
|
70
87
|
inputProps: {
|
71
88
|
style: {
|
@@ -72,15 +72,20 @@ const ELEMENT_TAGS = {
|
|
72
72
|
type: "paragraph"
|
73
73
|
}),
|
74
74
|
TABLE: (el, children = []) => {
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
75
|
+
try {
|
76
|
+
const tableBody = (children || [])?.find(f => f?.type === "table-body");
|
77
|
+
const bodyChild = tableBody?.children || [];
|
78
|
+
const firstRowChildren = tableBody[0]?.children || [];
|
79
|
+
return {
|
80
|
+
type: "table",
|
81
|
+
overwriteChild: bodyChild,
|
82
|
+
// we are not having table-body in our json format, just we are wrapping table-row's inside the table
|
83
|
+
rows: bodyChild?.length,
|
84
|
+
columns: firstRowChildren?.length
|
85
|
+
};
|
86
|
+
} catch (err) {
|
87
|
+
console.log(err);
|
88
|
+
}
|
84
89
|
},
|
85
90
|
THEAD: () => ({
|
86
91
|
type: "table-head"
|