@flozy/editor 3.9.0 → 3.9.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +177 -109
- package/dist/Editor/Editor.css +8 -12
- package/dist/Editor/Elements/AI/AIInput.js +17 -18
- package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
- package/dist/Editor/Elements/AI/PopoverAIInput.js +23 -28
- package/dist/Editor/Elements/AI/Styles.js +2 -1
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
- package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
- package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +4 -15
- package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
- package/dist/Editor/Elements/Button/EditorButton.js +28 -16
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +27 -3
- package/dist/Editor/Elements/Grid/GridItem.js +3 -1
- package/dist/Editor/Elements/Link/Link.js +6 -1
- package/dist/Editor/Elements/Link/LinkButton.js +4 -2
- package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
- package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
- package/dist/Editor/Elements/Table/Styles.js +23 -1
- package/dist/Editor/Elements/Table/Table.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +69 -7
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
- package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
- package/dist/Editor/MiniEditor.js +3 -1
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +4 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +4 -2
- package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -7
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +7 -17
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/AIIcons.js +153 -1
- package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
- package/dist/Editor/assets/svg/RedoIcon.js +27 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
- package/dist/Editor/assets/svg/TextIcon.js +8 -5
- package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
- package/dist/Editor/assets/svg/UndoIcon.js +27 -0
- package/dist/Editor/common/ColorPickerButton.js +25 -9
- package/dist/Editor/common/CustomColorPicker/index.js +106 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog/index.js +94 -0
- package/dist/Editor/common/CustomDialog/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +33 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
- package/dist/Editor/common/Icon.js +43 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
- package/dist/Editor/common/LinkSettings/index.js +4 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
- package/dist/Editor/common/LinkSettings/style.js +11 -8
- package/dist/Editor/common/Section/index.js +57 -7
- package/dist/Editor/common/Section/styles.js +11 -0
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +33 -29
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +31 -25
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconslist.js +0 -31
- package/dist/Editor/helper/theme.js +189 -4
- package/dist/Editor/hooks/useEditorTheme.js +139 -0
- package/dist/Editor/hooks/useMouseMove.js +4 -1
- package/dist/Editor/hooks/useWindowMessage.js +10 -7
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +144 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
- package/dist/Editor/themeSettings/buttons/index.js +290 -0
- package/dist/Editor/themeSettings/buttons/style.js +21 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
- package/dist/Editor/themeSettings/fonts/index.js +213 -0
- package/dist/Editor/themeSettings/fonts/style.js +44 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +320 -0
- package/dist/Editor/themeSettings/style.js +152 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +356 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
- package/dist/Editor/themeSettingsAI/style.js +247 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +161 -25
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/events.js +54 -2
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +31 -2
- package/dist/Editor/utils/table.js +51 -43
- package/package.json +4 -3
@@ -1,8 +1,32 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Select, MenuItem } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
3
|
+
import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import { fontFamilyMap } from "../../utils/font";
|
5
|
+
import { toolbarGroups } from "../toolbarGroups.js";
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
const allTools = toolbarGroups.flat();
|
8
|
+
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
9
|
+
const getValue = (editor, format) => {
|
10
|
+
switch (format) {
|
11
|
+
case "fontFamily":
|
12
|
+
{
|
13
|
+
const style = getSelectedElementStyle("font-family", editor);
|
14
|
+
const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
|
15
|
+
return val || fontFamilyMap.PoppinsRegular;
|
16
|
+
}
|
17
|
+
case "fontWeight":
|
18
|
+
{
|
19
|
+
const {
|
20
|
+
options
|
21
|
+
} = fontWeight || {};
|
22
|
+
const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
|
23
|
+
const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
|
24
|
+
return selected?.value;
|
25
|
+
}
|
26
|
+
default:
|
27
|
+
return activeMark(editor, format);
|
28
|
+
}
|
29
|
+
};
|
6
30
|
const Dropdown = ({
|
7
31
|
classes,
|
8
32
|
editor,
|
@@ -10,7 +34,7 @@ const Dropdown = ({
|
|
10
34
|
options,
|
11
35
|
width
|
12
36
|
}) => {
|
13
|
-
const value =
|
37
|
+
const value = getValue(editor, format);
|
14
38
|
const changeMarkData = (event, format) => {
|
15
39
|
event.preventDefault();
|
16
40
|
const value = event.target.value;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import Icon from "../../common/Icon";
|
3
3
|
import Button from "../../common/Button";
|
4
|
-
import { toggleMark,
|
4
|
+
import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
const MarkButton = ({
|
7
7
|
editor,
|
@@ -9,7 +9,7 @@ const MarkButton = ({
|
|
9
9
|
title
|
10
10
|
}) => {
|
11
11
|
return /*#__PURE__*/_jsx(Button, {
|
12
|
-
active:
|
12
|
+
active: isMarkBtnActive(editor, format),
|
13
13
|
format: format,
|
14
14
|
onMouseDown: e => {
|
15
15
|
e.preventDefault();
|
@@ -1,9 +1,8 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark
|
4
|
-
import { headingMap, sizeMap } from "../../utils/font.js";
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
5
4
|
import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
|
6
|
-
import { getBreakPointsValue } from "../../helper/theme.js";
|
5
|
+
import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
|
7
6
|
import useWindowResize from "../../hooks/useWindowResize.js";
|
8
7
|
import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -17,7 +16,13 @@ const TextSize = ({
|
|
17
16
|
}) => {
|
18
17
|
const [size] = useWindowResize();
|
19
18
|
const val = activeMark(editor, format);
|
20
|
-
const
|
19
|
+
const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
|
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,20 +44,18 @@ 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 {
|
49
|
-
|
50
|
-
Object.entries(headingMap).forEach(([format, value]) => {
|
51
|
-
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
52
|
-
size = value;
|
53
|
-
}
|
54
|
-
});
|
55
|
-
return parseInt(size);
|
58
|
+
return parseInt(value);
|
56
59
|
} catch (err) {
|
57
60
|
return "";
|
58
61
|
}
|
@@ -67,11 +70,19 @@ const TextSize = ({
|
|
67
70
|
const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
|
68
71
|
updateMarkData(newVal);
|
69
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
|
+
};
|
70
81
|
return /*#__PURE__*/_jsx(_Fragment, {
|
71
82
|
children: /*#__PURE__*/_jsx(TextField, {
|
72
83
|
sx: classes?.textSize,
|
73
|
-
value:
|
74
|
-
onChange:
|
84
|
+
value: fontSize,
|
85
|
+
onChange: onChange,
|
75
86
|
size: "small",
|
76
87
|
inputProps: {
|
77
88
|
style: {
|
@@ -48,6 +48,8 @@ const MiniToolbar = props => {
|
|
48
48
|
const {
|
49
49
|
popupType
|
50
50
|
} = useEditorContext();
|
51
|
+
const canUndo = editor.history.undos.length > 0;
|
52
|
+
const canRedo = editor.history.redos.length > 0;
|
51
53
|
const [toolTip, setToolTip] = useState(false);
|
52
54
|
const [data, setData] = useState(null);
|
53
55
|
useEffect(() => {
|
@@ -92,14 +94,14 @@ const MiniToolbar = props => {
|
|
92
94
|
label,
|
93
95
|
icon: Icon
|
94
96
|
}) => {
|
95
|
-
const isDisabled = popupType === type; // for textFormat type
|
97
|
+
const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
|
96
98
|
|
97
99
|
return /*#__PURE__*/_jsx(Tooltip, {
|
98
100
|
arrow: true,
|
99
101
|
title: label,
|
100
102
|
disableHoverListener: toolTip,
|
101
103
|
children: /*#__PURE__*/_jsx(IconButton, {
|
102
|
-
className: type === popper ? "active" : ""
|
104
|
+
className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
|
103
105
|
onClick: handleClick(type),
|
104
106
|
disabled: isDisabled,
|
105
107
|
children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
|
@@ -2,6 +2,8 @@ import TextIcon from "../../../assets/svg/TextIcon";
|
|
2
2
|
import AddElementIcon from "../../../assets/svg/AddElementIcon";
|
3
3
|
import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
|
4
4
|
import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
|
5
|
+
import UndoButton from "../../../Elements/Undo/UndoButton";
|
6
|
+
import RedoButton from "../../../Elements/Redo/RedoButton";
|
5
7
|
const MENU_OPTIONS = [{
|
6
8
|
type: "textFormat",
|
7
9
|
icon: TextIcon,
|
@@ -18,5 +20,13 @@ const MENU_OPTIONS = [{
|
|
18
20
|
type: "page-settings",
|
19
21
|
icon: PageSettingsButton,
|
20
22
|
label: "Page Settings"
|
23
|
+
}, {
|
24
|
+
type: "undo",
|
25
|
+
icon: UndoButton,
|
26
|
+
label: "Undo"
|
27
|
+
}, {
|
28
|
+
type: "redo",
|
29
|
+
icon: RedoButton,
|
30
|
+
label: "Redo"
|
21
31
|
}];
|
22
32
|
export default MENU_OPTIONS;
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import { useEffect, useRef, useState } from "react";
|
2
|
-
import { activeMark, addMarkData
|
2
|
+
import { activeMark, addMarkData } from "../../../utils/SlateUtilityFunctions";
|
3
3
|
import { Button, IconButton, Popover, TextField } from "@mui/material";
|
4
4
|
import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
|
-
import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
|
7
|
-
import { headingMap, sizeMap } from "../../../utils/font";
|
6
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../../helper/theme";
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
9
|
const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
|
@@ -19,7 +18,7 @@ function SelectFontSize({
|
|
19
18
|
const containerRef = useRef();
|
20
19
|
const [size] = useWindowResize();
|
21
20
|
const val = activeMark(editor, format);
|
22
|
-
const value =
|
21
|
+
const value = getTextSizeVal(editor);
|
23
22
|
const timerRef = useRef();
|
24
23
|
const updateMarkData = newVal => {
|
25
24
|
let upData = {
|
@@ -53,13 +52,7 @@ function SelectFontSize({
|
|
53
52
|
};
|
54
53
|
const getSizeVal = () => {
|
55
54
|
try {
|
56
|
-
|
57
|
-
Object.entries(headingMap).forEach(([format, value]) => {
|
58
|
-
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
59
|
-
size = value;
|
60
|
-
}
|
61
|
-
});
|
62
|
-
return parseInt(size);
|
55
|
+
return parseInt(value);
|
63
56
|
} catch (err) {
|
64
57
|
return "";
|
65
58
|
}
|
@@ -2,8 +2,11 @@ import { useMemo } from "react";
|
|
2
2
|
import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
|
3
3
|
import CustomSelectTool from "./CustomSelectTool";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
-
import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
|
5
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
|
6
6
|
import { sizeMap } from "../../../utils/font";
|
7
|
+
import { Editor } from "slate";
|
8
|
+
import { MenuItem, Select } from "@mui/material";
|
9
|
+
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
12
|
function Label({
|
@@ -17,93 +20,194 @@ function Label({
|
|
17
20
|
});
|
18
21
|
}
|
19
22
|
function DisplayHeaderLabel({
|
20
|
-
type
|
23
|
+
type,
|
24
|
+
isCustomized,
|
25
|
+
isPara = false
|
21
26
|
}) {
|
22
27
|
return /*#__PURE__*/_jsxs("div", {
|
23
|
-
children: ["H", /*#__PURE__*/_jsx("sub", {
|
28
|
+
children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
|
24
29
|
children: type
|
25
30
|
})]
|
26
31
|
});
|
27
32
|
}
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
},
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
type: "
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
33
|
+
function getTypographyOptions(isCustomized) {
|
34
|
+
const typographyOptions = [{
|
35
|
+
id: 11,
|
36
|
+
format: "headingOne",
|
37
|
+
type: "block",
|
38
|
+
title: /*#__PURE__*/_jsx(Label, {
|
39
|
+
label: "H1",
|
40
|
+
type: "Heading"
|
41
|
+
}),
|
42
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
43
|
+
type: 1,
|
44
|
+
isCustomized: isCustomized
|
45
|
+
}),
|
46
|
+
group: "typography",
|
47
|
+
value: "headingOne"
|
48
|
+
}, {
|
49
|
+
id: 12,
|
50
|
+
format: "headingTwo",
|
51
|
+
type: "block",
|
52
|
+
title: /*#__PURE__*/_jsx(Label, {
|
53
|
+
label: "H2",
|
54
|
+
type: "Heading"
|
55
|
+
}),
|
56
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
57
|
+
type: 2,
|
58
|
+
isCustomized: isCustomized
|
59
|
+
}),
|
60
|
+
group: "typography",
|
61
|
+
value: "headingTwo"
|
62
|
+
}, {
|
63
|
+
id: 13,
|
64
|
+
format: "headingThree",
|
65
|
+
type: "block",
|
66
|
+
title: /*#__PURE__*/_jsx(Label, {
|
67
|
+
label: "H3",
|
68
|
+
type: "Heading"
|
69
|
+
}),
|
70
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
71
|
+
type: 3,
|
72
|
+
isCustomized: isCustomized
|
73
|
+
}),
|
74
|
+
group: "typography",
|
75
|
+
value: "headingThree"
|
76
|
+
}, {
|
77
|
+
id: 17,
|
78
|
+
format: "headingFour",
|
79
|
+
type: "block",
|
80
|
+
title: /*#__PURE__*/_jsx(Label, {
|
81
|
+
label: "H4",
|
82
|
+
type: "Heading"
|
83
|
+
}),
|
84
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
85
|
+
type: 4,
|
86
|
+
isCustomized: isCustomized
|
87
|
+
}),
|
88
|
+
group: "typography",
|
89
|
+
value: "headingFour"
|
90
|
+
}, {
|
91
|
+
id: 18,
|
92
|
+
format: "headingFive",
|
93
|
+
type: "block",
|
94
|
+
title: /*#__PURE__*/_jsx(Label, {
|
95
|
+
label: "H5",
|
96
|
+
type: "Heading"
|
97
|
+
}),
|
98
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
99
|
+
type: 5,
|
100
|
+
isCustomized: isCustomized
|
101
|
+
}),
|
102
|
+
group: "typography",
|
103
|
+
value: "headingFive"
|
104
|
+
}, {
|
105
|
+
id: 19,
|
106
|
+
format: "headingSix",
|
107
|
+
type: "block",
|
108
|
+
title: /*#__PURE__*/_jsx(Label, {
|
109
|
+
label: "H6",
|
110
|
+
type: "Heading"
|
111
|
+
}),
|
112
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
113
|
+
type: 6,
|
114
|
+
isCustomized: isCustomized
|
115
|
+
}),
|
116
|
+
group: "typography",
|
117
|
+
value: "headingSix"
|
118
|
+
}, {
|
119
|
+
id: 20,
|
120
|
+
format: "paragraphOne",
|
121
|
+
type: "block",
|
122
|
+
title: /*#__PURE__*/_jsx(Label, {
|
123
|
+
label: "P1",
|
124
|
+
type: "Paragraph"
|
125
|
+
}),
|
126
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
127
|
+
type: 1,
|
128
|
+
isCustomized: isCustomized,
|
129
|
+
isPara: true
|
130
|
+
}),
|
131
|
+
group: "typography",
|
132
|
+
value: "paragraphOne"
|
133
|
+
}, {
|
134
|
+
id: 21,
|
135
|
+
format: "paragraphTwo",
|
136
|
+
type: "block",
|
137
|
+
title: /*#__PURE__*/_jsx(Label, {
|
138
|
+
label: "P2",
|
139
|
+
type: "Paragraph"
|
140
|
+
}),
|
141
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
142
|
+
type: 2,
|
143
|
+
isCustomized: isCustomized,
|
144
|
+
isPara: true
|
145
|
+
}),
|
146
|
+
group: "typography",
|
147
|
+
value: "paragraphTwo"
|
148
|
+
}, {
|
149
|
+
id: 22,
|
150
|
+
format: "paragraphThree",
|
151
|
+
type: "block",
|
152
|
+
title: /*#__PURE__*/_jsx(Label, {
|
153
|
+
label: "P3",
|
154
|
+
type: "Paragraph"
|
155
|
+
}),
|
156
|
+
label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
|
157
|
+
type: 3,
|
158
|
+
isCustomized: isCustomized,
|
159
|
+
isPara: true
|
160
|
+
}),
|
161
|
+
group: "typography",
|
162
|
+
value: "paragraphThree"
|
163
|
+
}, {
|
164
|
+
id: 14,
|
165
|
+
format: "fontSize",
|
166
|
+
type: "mark",
|
167
|
+
title: /*#__PURE__*/_jsx(Label, {
|
168
|
+
label: "L",
|
169
|
+
type: "Large"
|
170
|
+
}),
|
72
171
|
label: "L",
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
172
|
+
group: "typography",
|
173
|
+
value: "huge"
|
174
|
+
}, {
|
175
|
+
id: 15,
|
176
|
+
format: "fontSize",
|
177
|
+
type: "mark",
|
178
|
+
title: /*#__PURE__*/_jsx(Label, {
|
179
|
+
label: "M",
|
180
|
+
type: "Medium"
|
181
|
+
}),
|
83
182
|
label: "M",
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
183
|
+
group: "typography",
|
184
|
+
value: "medium"
|
185
|
+
}, {
|
186
|
+
id: 16,
|
187
|
+
format: "fontSize",
|
188
|
+
type: "mark",
|
189
|
+
title: /*#__PURE__*/_jsx(Label, {
|
190
|
+
label: "S",
|
191
|
+
type: "Small"
|
192
|
+
}),
|
94
193
|
label: "S",
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
}];
|
194
|
+
group: "typography",
|
195
|
+
value: "small"
|
196
|
+
}];
|
197
|
+
return typographyOptions;
|
198
|
+
}
|
101
199
|
function SelectTypography({
|
102
200
|
editor,
|
103
201
|
classes,
|
104
|
-
closeMainPopup
|
202
|
+
closeMainPopup,
|
203
|
+
type
|
105
204
|
}) {
|
106
205
|
const [size] = useWindowResize();
|
206
|
+
const {
|
207
|
+
theme
|
208
|
+
} = useEditorTheme();
|
209
|
+
const isTextCustomized = theme?.id ? isCustomized(editor) : false;
|
210
|
+
const typographyOptions = getTypographyOptions(isTextCustomized);
|
107
211
|
const updateMarkData = newVal => {
|
108
212
|
const val = activeMark(editor, "fontSize");
|
109
213
|
let upData = {
|
@@ -148,26 +252,49 @@ function SelectTypography({
|
|
148
252
|
});
|
149
253
|
}, [typographyOptions, activeMark, isBlockActive, editor]);
|
150
254
|
const onChange = (format, option) => {
|
151
|
-
// add/reset block elements
|
152
|
-
toggleBlock(editor, format);
|
153
255
|
if (option.type === "block") {
|
154
|
-
|
155
|
-
|
156
|
-
format: "fontSize",
|
157
|
-
value: {}
|
256
|
+
themeFields.forEach(field => {
|
257
|
+
Editor.removeMark(editor, field);
|
158
258
|
});
|
259
|
+
|
260
|
+
// add/reset block elements
|
261
|
+
toggleBlock(editor, format);
|
159
262
|
} else if (option.type === "mark") {
|
160
263
|
const size = sizeMap[option.value] || "";
|
161
264
|
const [sizeInNumber] = size.split("px");
|
162
265
|
updateMarkData(Number(sizeInNumber));
|
163
266
|
}
|
164
267
|
};
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
268
|
+
const typographyValue = selectedBlock?.value || "headingOne";
|
269
|
+
if (type === "miniToolBar") {
|
270
|
+
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
271
|
+
options: typographyOptions,
|
272
|
+
editor: editor,
|
273
|
+
onChange: onChange,
|
274
|
+
value: typographyValue,
|
275
|
+
classes: classes
|
276
|
+
});
|
277
|
+
}
|
278
|
+
return /*#__PURE__*/_jsx(Select, {
|
279
|
+
value: typographyValue,
|
280
|
+
className: "editor-dd",
|
281
|
+
onChange: e => {
|
282
|
+
const {
|
283
|
+
value
|
284
|
+
} = e.target;
|
285
|
+
const option = typographyOptions?.find(o => o.value === value);
|
286
|
+
onChange(value, option);
|
287
|
+
},
|
288
|
+
style: {
|
289
|
+
width: "100%",
|
290
|
+
height: "36px",
|
291
|
+
borderRadius: "10px",
|
292
|
+
fontSize: "14px"
|
293
|
+
},
|
294
|
+
children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
|
295
|
+
value: item.value,
|
296
|
+
children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
|
297
|
+
}, index))
|
171
298
|
});
|
172
299
|
}
|
173
300
|
export default SelectTypography;
|
@@ -53,7 +53,8 @@ const MiniTextFormat = props => {
|
|
53
53
|
children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
|
54
54
|
classes: classes,
|
55
55
|
editor: editor,
|
56
|
-
closeMainPopup: closeMainPopup
|
56
|
+
closeMainPopup: closeMainPopup,
|
57
|
+
type: "miniToolBar"
|
57
58
|
}), /*#__PURE__*/_jsx("div", {
|
58
59
|
className: "verticalLine"
|
59
60
|
}), /*#__PURE__*/_jsx(SelectList, {
|