l-min-components 1.0.1055 → 1.0.1059
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/package.json +6 -2
- package/src/components/TextEditor2/colorModal.jsx +58 -0
- package/src/components/TextEditor2/emojiModal.jsx +38 -0
- package/src/components/TextEditor2/icon/alignCenterIcon.jsx +44 -0
- package/src/components/TextEditor2/icon/alignLeftIcon.jsx +44 -0
- package/src/components/TextEditor2/icon/alignRightIcon.jsx +44 -0
- package/src/components/TextEditor2/icon/arrowDown.jsx +24 -0
- package/src/components/TextEditor2/icon/boldIcon.jsx +30 -0
- package/src/components/TextEditor2/icon/emojiIcon.jsx +44 -0
- package/src/components/TextEditor2/icon/italicIcon.jsx +37 -0
- package/src/components/TextEditor2/icon/listIcon.jsx +58 -0
- package/src/components/TextEditor2/icon/underlineIcon.jsx +30 -0
- package/src/components/TextEditor2/index.jsx +48 -0
- package/src/components/TextEditor2/styled.jsx +121 -0
- package/src/components/TextEditor2/toalbarOptions.jsx +30 -0
- package/src/components/TextEditor2/tools.jsx +175 -0
- package/src/components/index.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "l-min-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1059",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"src/assets",
|
|
@@ -20,7 +20,10 @@
|
|
|
20
20
|
"classnames": "^2.3.2",
|
|
21
21
|
"dexie": "^4.0.8",
|
|
22
22
|
"dexie-react-hooks": "^1.1.7",
|
|
23
|
-
"
|
|
23
|
+
"draft-js": "^0.11.7",
|
|
24
|
+
"draftjs-to-html": "^0.9.1",
|
|
25
|
+
"emoji-picker-react": "^4.12.0",
|
|
26
|
+
"html-to-draftjs": "^1.5.0",
|
|
24
27
|
"i": "^0.3.7",
|
|
25
28
|
"iso-639-1": "^3.1.2",
|
|
26
29
|
"js-cookie": "^3.0.5",
|
|
@@ -40,6 +43,7 @@
|
|
|
40
43
|
"react-datepicker": "^4.10.0",
|
|
41
44
|
"react-debounce-input": "^3.3.0",
|
|
42
45
|
"react-dom": "^18.2.0",
|
|
46
|
+
"react-draft-wysiwyg": "^1.15.0",
|
|
43
47
|
"react-flags-select": "^2.2.3",
|
|
44
48
|
"react-google-charts": "^4.0.1",
|
|
45
49
|
"react-icons": "^4.8.0",
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CirclePicker } from "react-color";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
|
|
5
|
+
const ColorModal = ({ onChange, color }) => {
|
|
6
|
+
const editorColors = [
|
|
7
|
+
"#000000", // Black
|
|
8
|
+
"#FFFFFF", // White
|
|
9
|
+
"#F44336", // Red
|
|
10
|
+
"#E91E63", // Pink
|
|
11
|
+
"#9C27B0", // Purple
|
|
12
|
+
"#3F51B5", // Indigo
|
|
13
|
+
"#2196F3", // Blue
|
|
14
|
+
"#03A9F4", // Light Blue
|
|
15
|
+
"#00BCD4", // Cyan
|
|
16
|
+
"#009688", // Teal
|
|
17
|
+
"#4CAF50", // Green
|
|
18
|
+
"#8BC34A", // Light Green
|
|
19
|
+
"#CDDC39", // Lime
|
|
20
|
+
"#FFEB3B", // Yellow
|
|
21
|
+
"#FFC107", // Amber
|
|
22
|
+
"#FF9800", // Orange
|
|
23
|
+
"#FF5722", // Deep Orange
|
|
24
|
+
"#795548", // Brown
|
|
25
|
+
"#808080", // Grey
|
|
26
|
+
"#FFB6C1", // Light Pink
|
|
27
|
+
"#ADD8E6", // Light Blue
|
|
28
|
+
"#90EE90", // Light Green
|
|
29
|
+
"#FFD700", // Gold
|
|
30
|
+
"#FF4500", // Orange Red
|
|
31
|
+
];
|
|
32
|
+
return (
|
|
33
|
+
<Container>
|
|
34
|
+
<CirclePicker colors={editorColors} onChange={onChange} color={color} />
|
|
35
|
+
</Container>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const Container = styled.div`
|
|
40
|
+
position: absolute;
|
|
41
|
+
z-index: 3;
|
|
42
|
+
border-radius: 12px;
|
|
43
|
+
border: 1px solid var(--Neutral-20, #dfe5e5);
|
|
44
|
+
background: #fff;
|
|
45
|
+
padding: 16px;
|
|
46
|
+
width: fit-content;
|
|
47
|
+
bottom: 40px;
|
|
48
|
+
left: 0;
|
|
49
|
+
span {
|
|
50
|
+
span {
|
|
51
|
+
div {
|
|
52
|
+
border: 2px solid var(--Neutral-20, #dfe5e5);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
57
|
+
|
|
58
|
+
export default ColorModal;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import EmojiPicker from "emoji-picker-react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
|
|
5
|
+
const EmojiModal = ({ onChange }) => {
|
|
6
|
+
return (
|
|
7
|
+
<Container>
|
|
8
|
+
<EmojiPicker
|
|
9
|
+
theme="light"
|
|
10
|
+
searchDisabled
|
|
11
|
+
skinTonesDisabled
|
|
12
|
+
emojiStyle="apple"
|
|
13
|
+
width={270}
|
|
14
|
+
height={300}
|
|
15
|
+
onEmojiClick={onChange}
|
|
16
|
+
/>
|
|
17
|
+
</Container>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const Container = styled.div`
|
|
22
|
+
background-color: #fff;
|
|
23
|
+
width: fit-content;
|
|
24
|
+
position: absolute;
|
|
25
|
+
z-index: 3;
|
|
26
|
+
left: 0;
|
|
27
|
+
bottom: 40px;
|
|
28
|
+
.epr-main {
|
|
29
|
+
background-color: #fff;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.epr-header,
|
|
33
|
+
.epr-emoji-category-label {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
|
|
38
|
+
export default EmojiModal;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const AlignCenterIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
width="25"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 25 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M3.5 4.5H21.5"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M7.75781 9.5H17.2378"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M3.5 14.5H21.5"
|
|
28
|
+
stroke="#949999"
|
|
29
|
+
strokeWidth="1.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M7.75781 19.5H17.2378"
|
|
35
|
+
stroke="#949999"
|
|
36
|
+
strokeWidth="1.5"
|
|
37
|
+
strokeLinecap="round"
|
|
38
|
+
strokeLinejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default AlignCenterIcon;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const AlignLeftIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="25"
|
|
8
|
+
height="24"
|
|
9
|
+
viewBox="0 0 25 24"
|
|
10
|
+
fill="none"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M3.5 4.5H21.5"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M3.5 9.5H12.97"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M3.5 14.5H21.5"
|
|
28
|
+
stroke="#949999"
|
|
29
|
+
strokeWidth="1.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M3.5 19.5H12.97"
|
|
35
|
+
stroke="#949999"
|
|
36
|
+
strokeWidth="1.5"
|
|
37
|
+
strokeLinecap="round"
|
|
38
|
+
strokeLinejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default AlignLeftIcon;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const AlignRightIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="25"
|
|
8
|
+
height="24"
|
|
9
|
+
viewBox="0 0 25 24"
|
|
10
|
+
fill="none"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M3.5 4.5H21.5"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M12.0312 9.5H21.5013"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M3.5 14.5H21.5"
|
|
28
|
+
stroke="#949999"
|
|
29
|
+
strokeWidth="1.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M12.0312 19.5H21.5013"
|
|
35
|
+
stroke="#949999"
|
|
36
|
+
strokeWidth="1.5"
|
|
37
|
+
strokeLinecap="round"
|
|
38
|
+
strokeLinejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default AlignRightIcon;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const ArrowDown = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="15"
|
|
8
|
+
height="14"
|
|
9
|
+
viewBox="0 0 15 14"
|
|
10
|
+
fill="none"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M12.1228 5.22266L8.31948 9.02599C7.87031 9.47516 7.13531 9.47516 6.68615 9.02599L2.88281 5.22266"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeMiterlimit="10"
|
|
17
|
+
strokeLinecap="round"
|
|
18
|
+
strokeLinejoin="round"
|
|
19
|
+
/>
|
|
20
|
+
</svg>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export default ArrowDown;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const BoldIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width="25"
|
|
8
|
+
height="24"
|
|
9
|
+
viewBox="0 0 25 24"
|
|
10
|
+
fill="none"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M5.38281 4.5C5.38281 3.4 6.28281 2.5 7.38281 2.5H12.5028C15.1228 2.5 17.2528 4.63 17.2528 7.25C17.2528 9.87 15.1228 12 12.5028 12H5.38281V4.5Z"
|
|
14
|
+
stroke="#313333"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M5.38281 12H14.8828C17.5028 12 19.6328 14.13 19.6328 16.75C19.6328 19.37 17.5028 21.5 14.8828 21.5H7.38281C6.28281 21.5 5.38281 20.6 5.38281 19.5V12V12Z"
|
|
21
|
+
stroke="#313333"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default BoldIcon;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const EmojiIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
width="25"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 25 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M19.5668 4.95008C23.5368 8.92008 23.4668 15.4 19.3668 19.29C15.5768 22.88 9.42679 22.88 5.62679 19.29C1.51679 15.4 1.44678 8.92008 5.42678 4.95008C9.32678 1.04008 15.6668 1.04008 19.5668 4.95008Z"
|
|
14
|
+
stroke="#ADB3B3"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M16.334 16.0703C14.214 18.0703 10.7741 18.0703 8.66406 16.0703"
|
|
21
|
+
stroke="#ADB3B3"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M9.16638 8.98633H9.17536"
|
|
28
|
+
stroke="#ADB3B3"
|
|
29
|
+
strokeWidth="2.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M16.3383 8.98633H16.3472"
|
|
35
|
+
stroke="#ADB3B3"
|
|
36
|
+
strokeWidth="2.5"
|
|
37
|
+
strokeLinecap="round"
|
|
38
|
+
strokeLinejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default EmojiIcon;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const ItalicIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
width="25"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 25 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M10.1172 3H19.3672"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M5.61719 21H14.8672"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M14.75 3L10.25 21"
|
|
28
|
+
stroke="#949999"
|
|
29
|
+
strokeWidth="1.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default ItalicIcon;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const ListIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
width="25"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 25 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M11.5 19.5H21.5"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M11.5 12.5H21.5"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M11.5 5.5H21.5"
|
|
28
|
+
stroke="#949999"
|
|
29
|
+
strokeWidth="1.5"
|
|
30
|
+
strokeLinecap="round"
|
|
31
|
+
strokeLinejoin="round"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M3.5 5.5L4.5 6.5L7.5 3.5"
|
|
35
|
+
stroke="#949999"
|
|
36
|
+
strokeWidth="1.5"
|
|
37
|
+
strokeLinecap="round"
|
|
38
|
+
strokeLinejoin="round"
|
|
39
|
+
/>
|
|
40
|
+
<path
|
|
41
|
+
d="M3.5 12.5L4.5 13.5L7.5 10.5"
|
|
42
|
+
stroke="#949999"
|
|
43
|
+
strokeWidth="1.5"
|
|
44
|
+
strokeLinecap="round"
|
|
45
|
+
strokeLinejoin="round"
|
|
46
|
+
/>
|
|
47
|
+
<path
|
|
48
|
+
d="M3.5 19.5L4.5 20.5L7.5 17.5"
|
|
49
|
+
stroke="#949999"
|
|
50
|
+
strokeWidth="1.5"
|
|
51
|
+
strokeLinecap="round"
|
|
52
|
+
strokeLinejoin="round"
|
|
53
|
+
/>
|
|
54
|
+
</svg>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default ListIcon;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
const UnderlineIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
width="25"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 25 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
d="M5.5 21H19.5"
|
|
14
|
+
stroke="#949999"
|
|
15
|
+
strokeWidth="1.5"
|
|
16
|
+
strokeLinecap="round"
|
|
17
|
+
strokeLinejoin="round"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M5.5 3V10C5.5 13.87 8.63 17 12.5 17C16.37 17 19.5 13.87 19.5 10V3"
|
|
21
|
+
stroke="#949999"
|
|
22
|
+
strokeWidth="1.5"
|
|
23
|
+
strokeLinecap="round"
|
|
24
|
+
strokeLinejoin="round"
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default UnderlineIcon;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { Editor } from "react-draft-wysiwyg";
|
|
3
|
+
import { EditorState, convertToRaw, ContentState } from "draft-js";
|
|
4
|
+
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
|
|
5
|
+
import toalbarOptions from "./toalbarOptions";
|
|
6
|
+
import { Container } from "./styled";
|
|
7
|
+
import draftToHtml from "draftjs-to-html";
|
|
8
|
+
import htmlToDraft from "html-to-draftjs";
|
|
9
|
+
|
|
10
|
+
function TextEditor({ obChabge, defaultValue }) {
|
|
11
|
+
const [editorState, setEditorState] = useState(EditorState.createEmpty());
|
|
12
|
+
|
|
13
|
+
const onEditorStateChange = (newState) => {
|
|
14
|
+
setEditorState(newState);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const htnl = draftToHtml(convertToRaw(editorState?.getCurrentContent()));
|
|
19
|
+
obChabge && obChabge(htnl);
|
|
20
|
+
}, [editorState]);
|
|
21
|
+
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (defaultValue) {
|
|
24
|
+
const contentBlock = htmlToDraft(defaultValue);
|
|
25
|
+
if (contentBlock) {
|
|
26
|
+
const contentState = ContentState.createFromBlockArray(
|
|
27
|
+
contentBlock.contentBlocks
|
|
28
|
+
);
|
|
29
|
+
const defualtState = EditorState.createWithContent(contentState);
|
|
30
|
+
onEditorStateChange(defualtState);
|
|
31
|
+
}
|
|
32
|
+
} else {
|
|
33
|
+
onEditorStateChange(EditorState.createEmpty());
|
|
34
|
+
}
|
|
35
|
+
}, []);
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<Container>
|
|
39
|
+
<Editor
|
|
40
|
+
toolbar={toalbarOptions}
|
|
41
|
+
editorState={editorState}
|
|
42
|
+
onEditorStateChange={onEditorStateChange}
|
|
43
|
+
/>
|
|
44
|
+
</Container>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default TextEditor;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const Container = styled.div`
|
|
4
|
+
.rdw-colorpicker-wrapper,
|
|
5
|
+
.rdw-emoji-wrapper,
|
|
6
|
+
.rdw-fontsize-wrapper {
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
|
+
.rdw-fontsize-wrapper {
|
|
10
|
+
ul {
|
|
11
|
+
list-style: none;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
.rdw-dropdown-wrapper {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
border: 0;
|
|
18
|
+
outline: 0;
|
|
19
|
+
&:hover {
|
|
20
|
+
border: 0;
|
|
21
|
+
outline: 0;
|
|
22
|
+
box-shadow: none;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
.rdw-inline-wrapper,
|
|
26
|
+
.rdw-colorpicker-wrapper,
|
|
27
|
+
.rdw-text-align-wrapper,
|
|
28
|
+
.rdw-emoji-wrapper,
|
|
29
|
+
.rdw-list-wrapper,
|
|
30
|
+
.rdw-fontsize-wrapper {
|
|
31
|
+
.rdw-option-wrapper {
|
|
32
|
+
border: 0;
|
|
33
|
+
outline: 0;
|
|
34
|
+
&:hover {
|
|
35
|
+
border: 0;
|
|
36
|
+
outline: 0;
|
|
37
|
+
box-shadow: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
.rdw-option-wrapper[aria-selected="true"] {
|
|
41
|
+
svg {
|
|
42
|
+
path {
|
|
43
|
+
stroke: #00c2c2;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rdw-dropdown {
|
|
50
|
+
position: absolute;
|
|
51
|
+
z-index: 3;
|
|
52
|
+
border-radius: 12px;
|
|
53
|
+
border: 1px solid var(--Neutral-20, #dfe5e5);
|
|
54
|
+
background: #fff;
|
|
55
|
+
padding: 6px 0;
|
|
56
|
+
width: fit-content;
|
|
57
|
+
bottom: 40px;
|
|
58
|
+
left: 0;
|
|
59
|
+
width: 70px;
|
|
60
|
+
.rdw-dropdown-optionwrapper {
|
|
61
|
+
height: 180px;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: 4px;
|
|
65
|
+
border: 0;
|
|
66
|
+
li {
|
|
67
|
+
background: #fff;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
padding: 6px 16px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.rdw-editor-wrapper {
|
|
75
|
+
display: flex;
|
|
76
|
+
width: 100%;
|
|
77
|
+
flex-direction: column-reverse;
|
|
78
|
+
}
|
|
79
|
+
.rdw-editor-toolbar {
|
|
80
|
+
width: fit-content;
|
|
81
|
+
margin: 0 auto;
|
|
82
|
+
border-radius: 12px;
|
|
83
|
+
border-radius: 12px;
|
|
84
|
+
border: 1px solid #dfe5e5;
|
|
85
|
+
background: #fff;
|
|
86
|
+
}
|
|
87
|
+
.rdw-editor-main {
|
|
88
|
+
border-radius: 25px;
|
|
89
|
+
width: 100%;
|
|
90
|
+
border: 1px solid #dfe5e5;
|
|
91
|
+
background: #f5f7f7;
|
|
92
|
+
height: 193px;
|
|
93
|
+
padding: 20px;
|
|
94
|
+
margin-bottom: 16px;
|
|
95
|
+
}
|
|
96
|
+
`;
|
|
97
|
+
|
|
98
|
+
export const ColorsWrapper = styled.div``;
|
|
99
|
+
|
|
100
|
+
export const ColorAction = styled.div`
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 5px;
|
|
104
|
+
.label {
|
|
105
|
+
width: 24px;
|
|
106
|
+
height: 24px;
|
|
107
|
+
flex-shrink: 0;
|
|
108
|
+
background-color: #000;
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
border: 1px solid #dfe5e5;
|
|
111
|
+
}
|
|
112
|
+
`;
|
|
113
|
+
|
|
114
|
+
export const FontAction = styled(ColorAction)`
|
|
115
|
+
span {
|
|
116
|
+
color: #000;
|
|
117
|
+
display: inline-flex;
|
|
118
|
+
font-size: 16px;
|
|
119
|
+
font-weight: 700;
|
|
120
|
+
}
|
|
121
|
+
`;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Inline, List, TextAlign, Colors, Emoji, Fontsize } from "./tools";
|
|
2
|
+
|
|
3
|
+
export const fontSizes = [
|
|
4
|
+
8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96,
|
|
5
|
+
];
|
|
6
|
+
export default {
|
|
7
|
+
options: ["emoji", "colorPicker", "fontSize", "inline", "textAlign", "list"],
|
|
8
|
+
inline: {
|
|
9
|
+
inDropdown: false,
|
|
10
|
+
component: Inline,
|
|
11
|
+
},
|
|
12
|
+
emoji: {
|
|
13
|
+
inDropdown: false,
|
|
14
|
+
component: Emoji,
|
|
15
|
+
},
|
|
16
|
+
list: {
|
|
17
|
+
inDropdown: false,
|
|
18
|
+
component: List,
|
|
19
|
+
},
|
|
20
|
+
textAlign: {
|
|
21
|
+
inDropdown: false,
|
|
22
|
+
component: TextAlign,
|
|
23
|
+
},
|
|
24
|
+
colorPicker: {
|
|
25
|
+
component: Colors,
|
|
26
|
+
},
|
|
27
|
+
fontSize: {
|
|
28
|
+
component: Fontsize,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import BoldIcon from "./icon/boldIcon";
|
|
3
|
+
import ItalicIcon from "./icon/italicIcon";
|
|
4
|
+
import UnderlineIcon from "./icon/underlineIcon";
|
|
5
|
+
import AlignLeftIcon from "./icon/alignLeftIcon";
|
|
6
|
+
import AlignCenterIcon from "./icon/alignCenterIcon";
|
|
7
|
+
import AlignRightIcon from "./icon/alignRightIcon";
|
|
8
|
+
import ListIcon from "./icon/listIcon";
|
|
9
|
+
import { ColorAction, ColorsWrapper, FontAction } from "./styled";
|
|
10
|
+
import ArrowDown from "./icon/arrowDown";
|
|
11
|
+
import ColorModal from "./colorModal";
|
|
12
|
+
import EmojiIcon from "./icon/emojiIcon";
|
|
13
|
+
import EmojiModal from "./emojiModal";
|
|
14
|
+
import { fontSizes } from "./toalbarOptions";
|
|
15
|
+
|
|
16
|
+
const Inline = ({ currentState, onChange }) => {
|
|
17
|
+
const options = [
|
|
18
|
+
{ value: "Bold", icon: BoldIcon },
|
|
19
|
+
{ value: "Italic", icon: ItalicIcon },
|
|
20
|
+
{ value: "Underline", icon: UnderlineIcon },
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div className="rdw-inline-wrapper" aria-label="rdw-inline-control">
|
|
25
|
+
{options?.map((opt) => (
|
|
26
|
+
<div
|
|
27
|
+
key={opt?.value}
|
|
28
|
+
className="rdw-option-wrapper"
|
|
29
|
+
aria-selected={currentState[opt?.value?.toLocaleLowerCase()]}
|
|
30
|
+
title={opt?.value}
|
|
31
|
+
onClick={() => {
|
|
32
|
+
onChange(opt?.value);
|
|
33
|
+
}}
|
|
34
|
+
>
|
|
35
|
+
<opt.icon />
|
|
36
|
+
</div>
|
|
37
|
+
))}
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const TextAlign = ({ currentState, onChange }) => {
|
|
43
|
+
const options = [
|
|
44
|
+
{ value: "left", label: "Left", icon: AlignLeftIcon },
|
|
45
|
+
{ value: "center", label: "Center", icon: AlignCenterIcon },
|
|
46
|
+
{ value: "right", label: "Right", icon: AlignRightIcon },
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div className="rdw-text-align-wrapper" aria-label="rdw-textalign-control">
|
|
51
|
+
{options?.map((opt) => (
|
|
52
|
+
<div
|
|
53
|
+
key={opt?.value}
|
|
54
|
+
className={`rdw-option-wrapper`}
|
|
55
|
+
aria-selected={currentState?.textAlignment === opt?.value}
|
|
56
|
+
title={opt?.value}
|
|
57
|
+
onClick={() => {
|
|
58
|
+
onChange(opt?.value);
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
<opt.icon />
|
|
62
|
+
</div>
|
|
63
|
+
))}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const List = ({ currentState, onChange }) => {
|
|
69
|
+
return (
|
|
70
|
+
<div className="rdw-list-wrapper" aria-label="rdw-list-control">
|
|
71
|
+
<div
|
|
72
|
+
className="rdw-option-wrapper"
|
|
73
|
+
aria-selected={currentState?.listType === "unordered"}
|
|
74
|
+
title="Unordered"
|
|
75
|
+
onClick={() => {
|
|
76
|
+
onChange("unordered");
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<ListIcon />
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const Colors = ({ onChange, expanded, onExpandEvent, currentState }) => {
|
|
86
|
+
return (
|
|
87
|
+
<div
|
|
88
|
+
className="rdw-colorpicker-wrapper"
|
|
89
|
+
aria-haspopup="true"
|
|
90
|
+
aria-label="rdw-color-picker"
|
|
91
|
+
title="Color Picker"
|
|
92
|
+
aria-expanded={expanded}
|
|
93
|
+
>
|
|
94
|
+
{expanded && (
|
|
95
|
+
<ColorModal
|
|
96
|
+
color={currentState?.color || "#000000"}
|
|
97
|
+
onChange={(v) => {
|
|
98
|
+
onChange("color", v?.hex);
|
|
99
|
+
}}
|
|
100
|
+
/>
|
|
101
|
+
)}
|
|
102
|
+
<div className="rdw-option-wrapper">
|
|
103
|
+
<ColorsWrapper onClick={onExpandEvent}>
|
|
104
|
+
<ColorAction>
|
|
105
|
+
<div
|
|
106
|
+
className="label"
|
|
107
|
+
style={{ background: currentState?.color }}
|
|
108
|
+
></div>
|
|
109
|
+
<ArrowDown />
|
|
110
|
+
</ColorAction>
|
|
111
|
+
</ColorsWrapper>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const Emoji = ({ onExpandEvent, expanded, onChange }) => {
|
|
118
|
+
return (
|
|
119
|
+
<div
|
|
120
|
+
className="rdw-emoji-wrapper"
|
|
121
|
+
aria-haspopup="true"
|
|
122
|
+
aria-label="rdw-emoji-control"
|
|
123
|
+
aria-expanded="false"
|
|
124
|
+
title="Emoji"
|
|
125
|
+
>
|
|
126
|
+
{expanded && (
|
|
127
|
+
<EmojiModal
|
|
128
|
+
onChange={(v) => {
|
|
129
|
+
onChange(v?.emoji);
|
|
130
|
+
}}
|
|
131
|
+
/>
|
|
132
|
+
)}
|
|
133
|
+
<div className="rdw-option-wrapper" onClick={onExpandEvent}>
|
|
134
|
+
<EmojiIcon />
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
const Fontsize = ({ onExpandEvent, expanded, onChange, currentState }) => {
|
|
141
|
+
return (
|
|
142
|
+
<div className="rdw-fontsize-wrapper" aria-label="rdw-font-size-control">
|
|
143
|
+
<div
|
|
144
|
+
className="rdw-dropdown-wrapper"
|
|
145
|
+
aria-label="rdw-dropdown"
|
|
146
|
+
aria-expanded="true"
|
|
147
|
+
onClick={onExpandEvent}
|
|
148
|
+
>
|
|
149
|
+
<FontAction>
|
|
150
|
+
<span>{currentState?.fontSize || 16}</span>
|
|
151
|
+
<ArrowDown />
|
|
152
|
+
</FontAction>
|
|
153
|
+
</div>
|
|
154
|
+
{expanded && (
|
|
155
|
+
<div className="rdw-dropdown">
|
|
156
|
+
<ul className="rdw-dropdown-optionwrapper">
|
|
157
|
+
{fontSizes?.map((i) => (
|
|
158
|
+
<li
|
|
159
|
+
className="rdw-dropdownoption-default rdw-fontsize-option "
|
|
160
|
+
key={i}
|
|
161
|
+
onClick={() => {
|
|
162
|
+
onChange(i);
|
|
163
|
+
}}
|
|
164
|
+
>
|
|
165
|
+
{i}{" "}
|
|
166
|
+
</li>
|
|
167
|
+
))}
|
|
168
|
+
</ul>
|
|
169
|
+
</div>
|
|
170
|
+
)}
|
|
171
|
+
</div>
|
|
172
|
+
);
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
export { Inline, TextAlign, List, Colors, Emoji, Fontsize };
|
package/src/components/index.js
CHANGED
|
@@ -30,6 +30,7 @@ export { default as AppMainLayout } from "./AppMainLayout";
|
|
|
30
30
|
export { OutletContext as OutletContext } from "./AppMainLayout";
|
|
31
31
|
export { default as DatePickerCalender } from "./datePicker";
|
|
32
32
|
export { default as TextEditor } from "./textEditor";
|
|
33
|
+
export { default as TextEditorNew } from "./TextEditor2";
|
|
33
34
|
export { default as MessageAddon } from "./messageAddon/messages";
|
|
34
35
|
export { default as InstructorAccountSwitcher } from "./instructorAccountSwitcher";
|
|
35
36
|
export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
|
|
@@ -53,4 +54,3 @@ export { default as MobileLayout } from "./mobileLayout";
|
|
|
53
54
|
export { default as useTranslation } from "../hooks/useTranslation";
|
|
54
55
|
export { default as ImageComponent } from "./ImageComponent";
|
|
55
56
|
export { default as DeveloperBanner } from "./banner/developerBanner";
|
|
56
|
-
|