@flozy/editor 4.0.0 → 4.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +28 -17
- package/dist/Editor/CommonEditor.js +109 -177
- package/dist/Editor/Editor.css +13 -8
- package/dist/Editor/Elements/AI/AIInput.js +24 -18
- package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +89 -66
- package/dist/Editor/Elements/AI/Styles.js +1 -2
- package/dist/Editor/Elements/AI/helper.js +3 -5
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
- package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
- package/dist/Editor/Elements/Button/EditorButton.js +16 -28
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Grid/Grid.js +3 -27
- package/dist/Editor/Elements/Grid/GridItem.js +1 -3
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
- package/dist/Editor/Elements/List/CheckList.js +2 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Signature/SignaturePopup.js +5 -20
- package/dist/Editor/Elements/Table/Styles.js +1 -23
- package/dist/Editor/Elements/Table/Table.js +1 -2
- package/dist/Editor/Elements/Table/TableCell.js +7 -69
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
- package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
- package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +13 -12
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +13 -12
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +33 -40
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +6 -7
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/AIIcons.js +1 -153
- package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
- package/dist/Editor/assets/svg/TextIcon.js +5 -8
- package/dist/Editor/common/ColorPickerButton.js +18 -26
- package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
- package/dist/Editor/common/Icon.js +3 -43
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +2 -4
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/LinkSettings/style.js +8 -11
- package/dist/Editor/common/Section/index.js +7 -57
- package/dist/Editor/common/Section/styles.js +0 -11
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -29
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconslist.js +31 -0
- package/dist/Editor/helper/index.js +22 -0
- package/dist/Editor/helper/theme.js +4 -189
- package/dist/Editor/hooks/useMouseMove.js +1 -4
- package/dist/Editor/hooks/useWindowMessage.js +7 -10
- 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 +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +27 -169
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/events.js +2 -54
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +2 -31
- package/dist/Editor/utils/table.js +43 -51
- package/package.json +3 -4
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
- package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -184
- package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
- package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
- package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/RedoIcon.js +0 -27
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/assets/svg/UndoIcon.js +0 -27
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
@@ -1,6 +1,4 @@
|
|
1
|
-
import {
|
2
|
-
import { fontFamilyMap, sizeMap } from "../utils/font";
|
3
|
-
import { Editor, Node } from "slate";
|
1
|
+
import { sizeMap } from "../utils/font";
|
4
2
|
export const breakpoints = {
|
5
3
|
small: 0,
|
6
4
|
mobile: 600,
|
@@ -29,7 +27,7 @@ const overrideValues = (value, ot) => {
|
|
29
27
|
return Object.keys(value).reduce((a, b) => {
|
30
28
|
return {
|
31
29
|
...a,
|
32
|
-
[b]: overrides[ot] ? overrides[ot](value[b]
|
30
|
+
[b]: overrides[ot] ? overrides[ot](value[b]) : value
|
33
31
|
};
|
34
32
|
}, {});
|
35
33
|
};
|
@@ -46,15 +44,7 @@ const overrides = {
|
|
46
44
|
overrideReSizeH: val => {
|
47
45
|
return `${val?.height}px`;
|
48
46
|
},
|
49
|
-
overrideBorderRadius:
|
50
|
-
if (!val?.topLeft) {
|
51
|
-
Object.values(breakpointValues || {}).forEach(v => {
|
52
|
-
if (v) {
|
53
|
-
// Applying the values from breakpoints that exist to those that do not have
|
54
|
-
val = v;
|
55
|
-
}
|
56
|
-
});
|
57
|
-
}
|
47
|
+
overrideBorderRadius: val => {
|
58
48
|
return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
|
59
49
|
}
|
60
50
|
};
|
@@ -108,179 +98,4 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
|
|
108
98
|
console.log(err);
|
109
99
|
}
|
110
100
|
};
|
111
|
-
export
|
112
|
-
try {
|
113
|
-
const path = ReactEditor.findPath(editor, element);
|
114
|
-
if (path?.length) {
|
115
|
-
const currentEle = Node.get(editor, path);
|
116
|
-
const dom = ReactEditor.toDOMNode(editor, currentEle);
|
117
|
-
const editorBtn = dom?.querySelector("button.theme-element");
|
118
|
-
const elementStyle = window.getComputedStyle(editorBtn);
|
119
|
-
const style = elementStyle[stylePropertyName];
|
120
|
-
if (stylePropertyName === "fontFamily") {
|
121
|
-
const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
|
122
|
-
return val;
|
123
|
-
}
|
124
|
-
return style;
|
125
|
-
}
|
126
|
-
} catch (err) {
|
127
|
-
// console.log(err);
|
128
|
-
}
|
129
|
-
}
|
130
|
-
export function getTextSizeVal(editor) {
|
131
|
-
try {
|
132
|
-
const currentNode = Node.get(editor, editor.selection.anchor.path);
|
133
|
-
const currentElement = ReactEditor.toDOMNode(editor, currentNode);
|
134
|
-
if (currentElement) {
|
135
|
-
const element = document.querySelector('span[data-slate-string="true"]');
|
136
|
-
const computedStyle = window.getComputedStyle(element);
|
137
|
-
return computedStyle.getPropertyValue("font-size") || "";
|
138
|
-
}
|
139
|
-
} catch (err) {
|
140
|
-
// console.log(err);
|
141
|
-
}
|
142
|
-
}
|
143
|
-
export function getVariableValue(val) {
|
144
|
-
const bodyElement = document.body;
|
145
|
-
const computedStyle = getComputedStyle(bodyElement);
|
146
|
-
const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
|
147
|
-
const varValue = computedStyle.getPropertyValue(variableName).trim();
|
148
|
-
return varValue;
|
149
|
-
}
|
150
|
-
export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
|
151
|
-
// "underline",
|
152
|
-
// "strikethrough",
|
153
|
-
];
|
154
|
-
|
155
|
-
const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
156
|
-
export const isTextCustomized = editor => {
|
157
|
-
try {
|
158
|
-
if (editor.selection) {
|
159
|
-
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
160
|
-
if (!currentElement) {
|
161
|
-
return false;
|
162
|
-
}
|
163
|
-
const {
|
164
|
-
children,
|
165
|
-
type
|
166
|
-
} = currentElement;
|
167
|
-
if (!themeElements.includes(type)) {
|
168
|
-
return false;
|
169
|
-
}
|
170
|
-
if (children?.length > 1) {
|
171
|
-
return true;
|
172
|
-
}
|
173
|
-
const customized = textThemeFields.some(field => {
|
174
|
-
const element = children[0] || {};
|
175
|
-
const value = element[field];
|
176
|
-
if (field === "fontSize") {
|
177
|
-
return Object.keys(value || {}).length;
|
178
|
-
} else {
|
179
|
-
return value;
|
180
|
-
}
|
181
|
-
});
|
182
|
-
return customized;
|
183
|
-
} else {
|
184
|
-
return null;
|
185
|
-
}
|
186
|
-
} catch (err) {
|
187
|
-
return null;
|
188
|
-
}
|
189
|
-
};
|
190
|
-
const addToTheme = (field, value, element) => {
|
191
|
-
switch (field) {
|
192
|
-
case "fontFamily":
|
193
|
-
return {
|
194
|
-
fontFamily: fontFamilyMap[value]
|
195
|
-
};
|
196
|
-
case "fontSize":
|
197
|
-
return {
|
198
|
-
fontSize: value?.lg
|
199
|
-
};
|
200
|
-
case "color":
|
201
|
-
return {
|
202
|
-
color: value
|
203
|
-
};
|
204
|
-
case "bold":
|
205
|
-
return {
|
206
|
-
fontWeight: "bold"
|
207
|
-
};
|
208
|
-
case "italic":
|
209
|
-
return {
|
210
|
-
fontStyle: "italic"
|
211
|
-
};
|
212
|
-
// case "underline":
|
213
|
-
// case "strikethrough":
|
214
|
-
// let textDecoration = "";
|
215
|
-
|
216
|
-
// if (element.underline) {
|
217
|
-
// textDecoration = "underline";
|
218
|
-
// }
|
219
|
-
|
220
|
-
// if (element.strikethrough) {
|
221
|
-
// textDecoration += " strikethrough";
|
222
|
-
// }
|
223
|
-
|
224
|
-
// return { textDecoration };
|
225
|
-
default:
|
226
|
-
return {};
|
227
|
-
}
|
228
|
-
};
|
229
|
-
const MAP_TEXT_THEME_FIELD = {
|
230
|
-
headingOne: "h1",
|
231
|
-
headingTwo: "h2",
|
232
|
-
headingThree: "h3",
|
233
|
-
headingFour: "h4",
|
234
|
-
headingFive: "h5",
|
235
|
-
headingSix: "h6",
|
236
|
-
paragraphOne: "para1",
|
237
|
-
paragraphTwo: "para2",
|
238
|
-
paragraphThree: "para3"
|
239
|
-
};
|
240
|
-
export const saveToTheme = editor => {
|
241
|
-
try {
|
242
|
-
if (editor.selection) {
|
243
|
-
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
244
|
-
if (!currentElement) {
|
245
|
-
return false;
|
246
|
-
}
|
247
|
-
const {
|
248
|
-
children
|
249
|
-
} = currentElement;
|
250
|
-
if (children?.length > 1) {
|
251
|
-
return true;
|
252
|
-
}
|
253
|
-
let theme = {};
|
254
|
-
textThemeFields.forEach(field => {
|
255
|
-
const element = children[0] || {};
|
256
|
-
const value = element[field];
|
257
|
-
let style = {};
|
258
|
-
let isValueExist = false;
|
259
|
-
if (value) {
|
260
|
-
isValueExist = true;
|
261
|
-
if (field === "fontSize") {
|
262
|
-
isValueExist = !!Object.keys(value).length;
|
263
|
-
}
|
264
|
-
}
|
265
|
-
if (isValueExist) {
|
266
|
-
style = addToTheme(field, value, element);
|
267
|
-
}
|
268
|
-
theme = {
|
269
|
-
...theme,
|
270
|
-
...style
|
271
|
-
};
|
272
|
-
});
|
273
|
-
textThemeFields.forEach(field => {
|
274
|
-
Editor.removeMark(editor, field);
|
275
|
-
});
|
276
|
-
return {
|
277
|
-
field: MAP_TEXT_THEME_FIELD[currentElement?.type],
|
278
|
-
theme
|
279
|
-
};
|
280
|
-
}
|
281
|
-
} catch (err) {
|
282
|
-
return;
|
283
|
-
}
|
284
|
-
};
|
285
|
-
export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
286
|
-
export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
|
101
|
+
export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
|
@@ -29,7 +29,6 @@ export const EditorProvider = ({
|
|
29
29
|
const path = event?.target?.getAttribute("data-path");
|
30
30
|
const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
|
31
31
|
const [openAI, setOpenAI] = useState("");
|
32
|
-
const [selectedTheme, setSelectedTheme] = useState({});
|
33
32
|
const onDrop = () => {
|
34
33
|
setDrop(drop + 1);
|
35
34
|
};
|
@@ -56,9 +55,7 @@ export const EditorProvider = ({
|
|
56
55
|
popupType,
|
57
56
|
setPopupType,
|
58
57
|
openAI,
|
59
|
-
setOpenAI
|
60
|
-
selectedTheme,
|
61
|
-
setSelectedTheme
|
58
|
+
setOpenAI
|
62
59
|
},
|
63
60
|
children: children
|
64
61
|
});
|
@@ -4,19 +4,9 @@ const useWindowMessage = props => {
|
|
4
4
|
type
|
5
5
|
} = props;
|
6
6
|
const [message, setMessage] = useState(null);
|
7
|
-
const sendMessage = action => {
|
8
|
-
if (window.parent) {
|
9
|
-
window.parent.postMessage({
|
10
|
-
...action
|
11
|
-
}, "*");
|
12
|
-
}
|
13
|
-
};
|
14
7
|
useEffect(() => {
|
15
8
|
if (window.addEventListener) {
|
16
9
|
window.addEventListener("message", onMessage, false);
|
17
|
-
sendMessage({
|
18
|
-
isLoaded: true
|
19
|
-
});
|
20
10
|
} else {
|
21
11
|
window.attachEvent("onmessage", onMessage);
|
22
12
|
}
|
@@ -33,6 +23,13 @@ const useWindowMessage = props => {
|
|
33
23
|
setMessage(e?.data[type]);
|
34
24
|
}
|
35
25
|
};
|
26
|
+
const sendMessage = action => {
|
27
|
+
if (window.parent) {
|
28
|
+
window.parent.postMessage({
|
29
|
+
...action
|
30
|
+
}, "*");
|
31
|
+
}
|
32
|
+
};
|
36
33
|
return [message, sendMessage];
|
37
34
|
};
|
38
35
|
export default useWindowMessage;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Transforms, Path, Node } from "slate";
|
2
|
-
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "
|
2
|
+
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
|
3
3
|
const withEmbeds = editor => {
|
4
4
|
const {
|
5
5
|
isVoid,
|
@@ -15,7 +15,7 @@ const loopChildren = (children = [], defaultInsert) => {
|
|
15
15
|
}
|
16
16
|
return defaultInsert;
|
17
17
|
};
|
18
|
-
|
18
|
+
const getCurrentElement = editor => {
|
19
19
|
try {
|
20
20
|
if (editor.selection) {
|
21
21
|
return Node.parent(editor, editor?.selection?.anchor?.path);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Editor, Range, Point, Element, Transforms, Node } from "slate";
|
2
2
|
import { TableUtil, createTableCell } from "../utils/table";
|
3
|
-
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"
|
3
|
+
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
|
4
4
|
const withTable = editor => {
|
5
5
|
const {
|
6
6
|
deleteBackward,
|
@@ -1,58 +1,181 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { useEffect, useState } from "react";
|
1
|
+
import { MenuItem, Select, useTheme } from "@mui/material";
|
2
|
+
import { fontOptions } from "../utils/font";
|
3
|
+
import { toolbarGroups } from "../Toolbar/toolbarGroups";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
}
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
} catch (err) {
|
20
|
-
console.log(err);
|
21
|
-
}
|
22
|
-
setLoading(false);
|
23
|
-
};
|
6
|
+
const themes = [{
|
7
|
+
label: "Theme 1",
|
8
|
+
colors: ["#c90c1f", "#ff5d05"]
|
9
|
+
}, {
|
10
|
+
label: "Theme 2",
|
11
|
+
colors: ["#4c0be3", "#43f7ee"]
|
12
|
+
}, {
|
13
|
+
label: "Theme 3",
|
14
|
+
colors: ["#22f20f", "#fff705"]
|
15
|
+
}];
|
16
|
+
const allTools = toolbarGroups.flat();
|
17
|
+
function ThemeList(props) {
|
24
18
|
const {
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
19
|
+
selectedTheme,
|
20
|
+
setSelectedTheme
|
21
|
+
} = props;
|
22
|
+
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
23
|
+
const fontStyles = [{
|
24
|
+
text: "Bold",
|
25
|
+
value: "bold",
|
26
|
+
styleField: "fontWeight"
|
27
|
+
}, {
|
28
|
+
text: "Italic",
|
29
|
+
value: "italic",
|
30
|
+
styleField: "fontStyle"
|
31
|
+
}
|
32
|
+
// {
|
33
|
+
// text: "Underline",
|
34
|
+
// value: "underline",
|
35
|
+
// styleField: "textDecoration",
|
36
|
+
// },
|
37
|
+
// {
|
38
|
+
// text: "Line through",
|
39
|
+
// value: "line-through",
|
40
|
+
// styleField: "textDecoration",
|
41
|
+
// },
|
42
|
+
];
|
43
|
+
|
44
|
+
const theme = useTheme();
|
45
|
+
const colorVars = theme?.vars?.colors || {};
|
46
|
+
const handleTypographyTheme = (key, value, elementType) => {
|
47
|
+
setSelectedTheme(prev => {
|
48
|
+
const newValue = {
|
49
|
+
...prev,
|
50
|
+
typography: {
|
51
|
+
...(prev.typography || {}),
|
52
|
+
[elementType]: {
|
53
|
+
...(prev?.typography?.[elementType] || {}),
|
54
|
+
[key]: value
|
55
|
+
}
|
56
|
+
}
|
57
|
+
};
|
58
|
+
if (!value) {
|
59
|
+
delete newValue?.typography?.[elementType]?.[key];
|
60
|
+
}
|
61
|
+
return newValue;
|
62
|
+
});
|
36
63
|
};
|
37
|
-
return /*#__PURE__*/
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
64
|
+
return /*#__PURE__*/_jsxs("div", {
|
65
|
+
children: [themes.map((theme, i) => {
|
66
|
+
return /*#__PURE__*/_jsxs("button", {
|
67
|
+
style: {
|
68
|
+
margin: "10px"
|
69
|
+
},
|
70
|
+
onClick: () => setSelectedTheme(prev => ({
|
71
|
+
...prev,
|
72
|
+
colors: theme.colors
|
73
|
+
})),
|
74
|
+
children: [theme.label, /*#__PURE__*/_jsx("div", {
|
75
|
+
children: theme.colors.map((c, j) => {
|
76
|
+
return /*#__PURE__*/_jsx("div", {
|
77
|
+
style: {
|
78
|
+
width: "20px",
|
79
|
+
height: "20px",
|
80
|
+
background: c,
|
81
|
+
margin: "10px"
|
82
|
+
}
|
83
|
+
}, j);
|
84
|
+
})
|
85
|
+
})]
|
86
|
+
}, i);
|
87
|
+
}), /*#__PURE__*/_jsxs("div", {
|
88
|
+
children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
|
89
|
+
// value={""}
|
90
|
+
, {
|
91
|
+
label: "Font Family",
|
92
|
+
onChange: e => {
|
93
|
+
handleTypographyTheme("fontFamily", e.target.value, "h1");
|
94
|
+
},
|
95
|
+
children: fontOptions.map((font, i) => {
|
96
|
+
const {
|
97
|
+
text,
|
98
|
+
value
|
99
|
+
} = font;
|
100
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
101
|
+
value: value,
|
102
|
+
children: text
|
103
|
+
}, i);
|
104
|
+
})
|
105
|
+
}), "Font Weight", /*#__PURE__*/_jsx(Select
|
106
|
+
// value={""}
|
107
|
+
, {
|
108
|
+
label: "Font Weight",
|
109
|
+
onChange: e => {
|
110
|
+
handleTypographyTheme("fontWeight", e.target.value, "h1");
|
111
|
+
},
|
112
|
+
children: fontWeight.options.map((option, i) => {
|
113
|
+
const {
|
114
|
+
text,
|
115
|
+
value
|
116
|
+
} = option;
|
117
|
+
return /*#__PURE__*/_jsx(MenuItem, {
|
118
|
+
value: value,
|
119
|
+
children: text
|
120
|
+
}, i);
|
121
|
+
})
|
122
|
+
}), /*#__PURE__*/_jsx("input", {
|
123
|
+
type: "number",
|
124
|
+
placeholder: "font size",
|
125
|
+
onChange: e => {
|
126
|
+
handleTypographyTheme("fontSize", e.target.value, "h1");
|
127
|
+
}
|
128
|
+
}), /*#__PURE__*/_jsxs("div", {
|
129
|
+
children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
|
130
|
+
return /*#__PURE__*/_jsx("button", {
|
131
|
+
style: {
|
132
|
+
width: "20px",
|
133
|
+
height: "20px",
|
134
|
+
background: colorVar,
|
135
|
+
margin: "10px",
|
136
|
+
outline: "none"
|
137
|
+
},
|
138
|
+
onClick: () => handleTypographyTheme("color", colorVar, "h1")
|
139
|
+
}, i);
|
140
|
+
}), "normal color", /*#__PURE__*/_jsx("button", {
|
141
|
+
style: {
|
142
|
+
width: "20px",
|
143
|
+
height: "20px",
|
144
|
+
background: "#ff00e1",
|
145
|
+
margin: "10px",
|
146
|
+
outline: "none"
|
147
|
+
},
|
148
|
+
onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
|
149
|
+
})]
|
150
|
+
}), /*#__PURE__*/_jsxs("div", {
|
151
|
+
children: ["Font styles", fontStyles.map((option, i) => {
|
152
|
+
const styles = selectedTheme?.typography?.h1 || {};
|
153
|
+
const {
|
154
|
+
text,
|
155
|
+
value,
|
156
|
+
styleField
|
157
|
+
} = option;
|
158
|
+
return /*#__PURE__*/_jsxs("button", {
|
159
|
+
onClick: () => {
|
160
|
+
handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
|
161
|
+
},
|
162
|
+
children: [text, " ", styles[styleField] === value]
|
163
|
+
}, i);
|
164
|
+
})]
|
165
|
+
}), /*#__PURE__*/_jsx("input", {
|
166
|
+
type: "number",
|
167
|
+
placeholder: "Margin text Spacing",
|
168
|
+
onChange: e => {
|
169
|
+
handleTypographyTheme("letterSpacing", e.target.value, "h1");
|
170
|
+
}
|
171
|
+
}), /*#__PURE__*/_jsx("input", {
|
172
|
+
type: "number",
|
173
|
+
placeholder: "Line spacing",
|
174
|
+
onChange: e => {
|
175
|
+
handleTypographyTheme("lineHeight", e.target.value, "h1");
|
176
|
+
}
|
54
177
|
})]
|
55
|
-
})
|
178
|
+
})]
|
56
179
|
});
|
57
180
|
}
|
58
181
|
export default ThemeList;
|