@flozy/editor 10.3.8 → 10.4.0

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.
Files changed (189) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +18 -134
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +8 -23
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  21. package/dist/Editor/Elements/Embed/Image.js +2 -3
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  25. package/dist/Editor/Elements/Form/Form.js +171 -184
  26. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  27. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  28. package/dist/Editor/Elements/Form/FormField.js +6 -13
  29. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  30. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +32 -40
  31. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  32. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  35. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +2 -3
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  39. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  40. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  41. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  44. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  47. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  48. package/dist/Editor/Elements/Table/Styles.js +0 -7
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +8 -31
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  53. package/dist/Editor/MiniEditor.js +1 -2
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  67. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  68. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  69. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  70. package/dist/Editor/common/ColorPickerButton.js +16 -41
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  73. package/dist/Editor/common/Icon.js +1 -31
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +56 -61
  77. package/dist/Editor/common/LinkSettings/index.js +81 -82
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +74 -209
  80. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -13
  81. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  82. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  83. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -146
  96. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  97. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -120
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  101. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  105. package/dist/Editor/common/RnD/index.js +39 -68
  106. package/dist/Editor/common/Select/index.js +5 -44
  107. package/dist/Editor/common/Select/styles.js +2 -30
  108. package/dist/Editor/common/Shorthands/elements.js +11 -65
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  123. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  124. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  125. package/dist/Editor/common/Uploader.js +0 -16
  126. package/dist/Editor/common/iconListV2.js +6 -177
  127. package/dist/Editor/common/iconslist.js +0 -24
  128. package/dist/Editor/commonStyle.js +62 -186
  129. package/dist/Editor/helper/index.js +1 -5
  130. package/dist/Editor/helper/theme.js +2 -203
  131. package/dist/Editor/hooks/useMouseMove.js +5 -8
  132. package/dist/Editor/hooks/useTable.js +4 -5
  133. package/dist/Editor/plugins/withEmbeds.js +1 -1
  134. package/dist/Editor/plugins/withHTML.js +1 -3
  135. package/dist/Editor/plugins/withTable.js +1 -1
  136. package/dist/Editor/theme/ThemeList.js +173 -50
  137. package/dist/Editor/utils/SlateUtilityFunctions.js +46 -172
  138. package/dist/Editor/utils/accordion.js +4 -14
  139. package/dist/Editor/utils/button.js +17 -1
  140. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  141. package/dist/Editor/utils/draftToSlate.js +2 -3
  142. package/dist/Editor/utils/events.js +6 -50
  143. package/dist/Editor/utils/font.js +37 -40
  144. package/dist/Editor/utils/form.js +4 -4
  145. package/dist/Editor/utils/formfield.js +2 -9
  146. package/dist/Editor/utils/helper.js +26 -188
  147. package/dist/Editor/utils/insertAppHeader.js +1 -1
  148. package/dist/Editor/utils/signature.js +9 -2
  149. package/package.json +4 -4
  150. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  151. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  152. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  153. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  154. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  155. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  156. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  157. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  158. package/dist/Editor/common/Checkbox/index.js +0 -46
  159. package/dist/Editor/common/Checkbox/styles.js +0 -45
  160. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  161. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  162. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  163. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  164. package/dist/Editor/common/CustomSelect.js +0 -43
  165. package/dist/Editor/common/RadioGroup/index.js +0 -48
  166. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  167. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  168. package/dist/Editor/common/SnackBar/index.js +0 -43
  169. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  170. package/dist/Editor/helper/textIndeces.js +0 -58
  171. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  172. package/dist/Editor/hooks/useThemeValues.js +0 -63
  173. package/dist/Editor/theme/index.js +0 -149
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -380
  184. package/dist/Editor/themeSettings/style.js +0 -299
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -355
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  188. package/dist/Editor/themeSettingsAI/style.js +0 -332
  189. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -21,10 +21,7 @@ export const useEditorSelection = editor => {
21
21
  export const EditorProvider = ({
22
22
  editor,
23
23
  theme,
24
- children,
25
- openTheme = false,
26
- setOpenTheme = () => {},
27
- triggerRender
24
+ children
28
25
  }) => {
29
26
  const [previous, setPrevious] = useState("");
30
27
  const [drop, setDrop] = useState(0);
@@ -39,6 +36,7 @@ export const EditorProvider = ({
39
36
  path: null
40
37
  });
41
38
  const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
39
+ const [activeBreakPoint, setActiveBreakPoint] = useState("");
42
40
  useEffect(() => {
43
41
  window.updateSelectedItem = d => {
44
42
  setSelectedElement(d);
@@ -102,10 +100,9 @@ export const EditorProvider = ({
102
100
  updateDragging,
103
101
  fontFamilies,
104
102
  setFontFamilies,
105
- openTheme,
106
- setOpenTheme,
107
- triggerRender
108
- }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme]);
103
+ activeBreakPoint,
104
+ setActiveBreakPoint
105
+ }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
109
106
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
110
107
  value: otherValues,
111
108
  children: children
@@ -190,17 +190,16 @@ export const TableProvider = ({
190
190
  // selectFirstCell(tablePath, editor, updateTableSelection);
191
191
  // }, []);
192
192
 
193
- const onClickAway = () => {
194
- setTableSelection(getDefaultTableSelection());
195
- setHoverPath(null);
196
- };
197
193
  return /*#__PURE__*/_jsx(TableContext.Provider, {
198
194
  value: values,
199
195
  children: /*#__PURE__*/_jsxs(DndContext, {
200
196
  sensors: sensors,
201
197
  onDragEnd: data => handleDragEnd(data, editor, resetAll),
202
198
  children: [/*#__PURE__*/_jsx(ClickAwayListener, {
203
- onClickAway: onClickAway,
199
+ onClickAway: () => {
200
+ setTableSelection(getDefaultTableSelection());
201
+ setHoverPath(null);
202
+ },
204
203
  children: /*#__PURE__*/_jsx("div", {
205
204
  children: children
206
205
  })
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
- const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
3
3
  const BlockTypes = ["grid"];
4
4
  const withEmbeds = editor => {
5
5
  const {
@@ -30,8 +30,6 @@ const parseCopiedHTML = html => {
30
30
 
31
31
  // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
32
32
  parsed.querySelectorAll("li").forEach(li => {
33
- li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
34
-
35
33
  // Check if the parent of <li> is not a <ul> or <ol>
36
34
  if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
37
35
  // Create a <ul> element
@@ -57,7 +55,7 @@ const loopChildren = (children = [], defaultInsert) => {
57
55
  }
58
56
  return defaultInsert;
59
57
  };
60
- export const getCurrentElement = editor => {
58
+ const getCurrentElement = editor => {
61
59
  try {
62
60
  if (editor.selection) {
63
61
  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", "page-settings"];
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 { Box, MenuItem, Select } from "@mui/material";
2
- import { defaultTheme } from ".";
3
- import { useEditorTheme } from "../hooks/useEditorTheme";
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
- function ThemeList({
8
- editor,
9
- services = () => {}
10
- }) {
11
- const [themes, setThemes] = useState([]);
12
- const [loading, setLoading] = useState(false);
13
- console.log("loading", loading);
14
- const getThemesList = async () => {
15
- setLoading(true);
16
- try {
17
- const result = await services("getThemes", {});
18
- setThemes(result?.data || []);
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
- updateTheme
26
- } = useEditorTheme();
27
- useEffect(() => {
28
- getThemesList();
29
- }, []);
30
- const handleThemeChange = e => {
31
- const {
32
- value
33
- } = e.target;
34
- const selectedTheme = themes.find(t => t.id === value) || defaultTheme;
35
- updateTheme(selectedTheme, "THEME_CHANGE");
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__*/_jsx(Box, {
38
- sx: {
39
- padding: "10px",
40
- background: "#efefef",
41
- borderRadius: "6px"
42
- },
43
- children: /*#__PURE__*/_jsxs(Select, {
44
- onChange: handleThemeChange,
45
- defaultValue: 0,
46
- children: [/*#__PURE__*/_jsx(MenuItem, {
47
- value: 0,
48
- children: "Default Theme"
49
- }), themes.map((theme, i) => {
50
- return /*#__PURE__*/_jsx(MenuItem, {
51
- value: theme?.id,
52
- children: theme?.name
53
- }, i);
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;