@flozy/editor 10.0.9 → 10.1.1

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 (144) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +20 -120
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -16
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  11. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  12. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  14. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
  15. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  16. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  17. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  18. package/dist/Editor/Elements/Embed/Video.js +1 -1
  19. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  20. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  21. package/dist/Editor/Elements/Form/Form.js +168 -179
  22. package/dist/Editor/Elements/Form/FormField.js +4 -10
  23. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  24. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  25. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  26. package/dist/Editor/Elements/FreeGrid/styles.js +7 -64
  27. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  28. package/dist/Editor/Elements/List/CheckList.js +1 -4
  29. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  30. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  31. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  32. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  33. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  34. package/dist/Editor/Elements/Table/Table.js +3 -3
  35. package/dist/Editor/Elements/Title/title.js +6 -6
  36. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  37. package/dist/Editor/MiniEditor.js +1 -2
  38. package/dist/Editor/Styles/EditorStyles.js +5 -5
  39. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  40. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  41. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  42. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  43. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  45. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  48. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  50. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  51. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  52. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  53. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  54. package/dist/Editor/common/ColorPickerButton.js +16 -38
  55. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  56. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  57. package/dist/Editor/common/Icon.js +1 -31
  58. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  59. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  60. package/dist/Editor/common/LinkSettings/index.js +68 -84
  61. package/dist/Editor/common/LinkSettings/style.js +30 -245
  62. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  63. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  64. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  65. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  66. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  77. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  78. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  79. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  80. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  81. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  82. package/dist/Editor/common/RnD/index.js +7 -6
  83. package/dist/Editor/common/Select/index.js +0 -2
  84. package/dist/Editor/common/Shorthands/elements.js +0 -54
  85. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  95. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  96. package/dist/Editor/common/Uploader.js +0 -8
  97. package/dist/Editor/common/iconListV2.js +6 -101
  98. package/dist/Editor/common/iconslist.js +0 -24
  99. package/dist/Editor/commonStyle.js +61 -174
  100. package/dist/Editor/helper/theme.js +2 -203
  101. package/dist/Editor/hooks/useMouseMove.js +5 -8
  102. package/dist/Editor/plugins/withEmbeds.js +1 -1
  103. package/dist/Editor/plugins/withHTML.js +1 -3
  104. package/dist/Editor/plugins/withTable.js +1 -1
  105. package/dist/Editor/theme/ThemeList.js +173 -50
  106. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  107. package/dist/Editor/utils/button.js +17 -1
  108. package/dist/Editor/utils/draftToSlate.js +2 -3
  109. package/dist/Editor/utils/font.js +37 -40
  110. package/dist/Editor/utils/helper.js +19 -90
  111. package/package.json +4 -4
  112. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  113. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  114. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  115. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  116. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  117. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  118. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  119. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  120. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  121. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  122. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  123. package/dist/Editor/common/CustomSelect.js +0 -43
  124. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  125. package/dist/Editor/common/SnackBar/index.js +0 -43
  126. package/dist/Editor/helper/textIndeces.js +0 -58
  127. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  128. package/dist/Editor/hooks/useThemeValues.js +0 -63
  129. package/dist/Editor/theme/index.js +0 -149
  130. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  131. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  132. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  133. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  134. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  135. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  136. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  137. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  138. package/dist/Editor/themeSettings/icons.js +0 -60
  139. package/dist/Editor/themeSettings/index.js +0 -361
  140. package/dist/Editor/themeSettings/style.js +0 -292
  141. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  142. package/dist/Editor/themeSettingsAI/index.js +0 -355
  143. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  144. package/dist/Editor/themeSettingsAI/style.js +0 -324
@@ -1,6 +1,4 @@
1
- import { ReactEditor } from "slate-react";
2
1
  import { sizeMap } from "../utils/font";
3
- import { Editor, Node } from "slate";
4
2
  export const breakpoints = {
5
3
  small: 0,
6
4
  mobile: 600,
@@ -35,7 +33,7 @@ const overrideValues = (value, ot) => {
35
33
  return Object.keys(value).reduce((a, b) => {
36
34
  return {
37
35
  ...a,
38
- [b]: overrides[ot] ? overrides[ot](value[b], value) : value
36
+ [b]: overrides[ot] ? overrides[ot](value[b]) : value
39
37
  };
40
38
  }, {});
41
39
  };
@@ -52,15 +50,7 @@ const overrides = {
52
50
  overrideReSizeH: val => {
53
51
  return val ? `${val?.height}px` : "auto";
54
52
  },
55
- overrideBorderRadius: (val, breakpointValues) => {
56
- if (!val?.topLeft) {
57
- Object.values(breakpointValues || {}).forEach(v => {
58
- if (v) {
59
- // Applying the values from breakpoints that exist to those that do not have
60
- val = v;
61
- }
62
- });
63
- }
53
+ overrideBorderRadius: val => {
64
54
  return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
65
55
  }
66
56
  };
@@ -128,197 +118,6 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
128
118
  console.log(err);
129
119
  }
130
120
  };
131
- export function getElementStyle(editor, element, stylePropertyName) {
132
- try {
133
- const path = ReactEditor.findPath(editor, element);
134
- if (path?.length) {
135
- const currentEle = Node.get(editor, path);
136
- const dom = ReactEditor.toDOMNode(editor, currentEle);
137
- const editorBtn = dom?.querySelector(".button.theme-element");
138
- return getElementProperty(editorBtn, stylePropertyName);
139
- }
140
- } catch (err) {
141
- // console.log(err);
142
- }
143
- }
144
- export function getTextSizeVal(editor) {
145
- try {
146
- const currentNode = Node.get(editor, editor.selection.anchor.path);
147
- const currentElement = ReactEditor.toDOMNode(editor, currentNode);
148
- if (currentElement) {
149
- const element = currentElement.querySelector('span[data-slate-string="true"]');
150
- const fontSize = getElementProperty(element, "font-size");
151
- return fontSize || 16;
152
- }
153
- } catch (err) {
154
- // console.log(err);
155
- }
156
- }
157
- export function getVariableValue(val) {
158
- const bodyElement = document.body;
159
- const computedStyle = getComputedStyle(bodyElement);
160
- const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
161
- const varValue = computedStyle.getPropertyValue(variableName).trim();
162
- return varValue;
163
- }
164
- const MAP_PROPERTY_KEYS = {
165
- fontFamily: "font-family",
166
- fontSize: "font-size",
167
- textSize: "font-size",
168
- fontWeight: "font-weight",
169
- color: "color",
170
- bgColor: "background-color"
171
- };
172
- export function getElementProperty(element, styleProperty) {
173
- if (!element) {
174
- return "";
175
- }
176
- const computedStyle = window.getComputedStyle(element);
177
- const property = MAP_PROPERTY_KEYS[styleProperty] || styleProperty;
178
- let style = computedStyle.getPropertyValue(property);
179
- if (property === "font-family") {
180
- style = style.replace(/"/g, ""); // remove double quotes if exists e.g: '"Courier New"'
181
- }
182
-
183
- return style || "";
184
- }
185
- export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
186
- // "underline",
187
- // "strikethrough",
188
- ];
189
-
190
- const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
191
- export const isTextCustomized = editor => {
192
- try {
193
- if (editor.selection) {
194
- const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
195
- if (!currentElement) {
196
- return false;
197
- }
198
- const {
199
- children,
200
- type
201
- } = currentElement;
202
- if (!themeElements.includes(type)) {
203
- return false;
204
- }
205
- if (!children?.length) {
206
- return true;
207
- }
208
- const customized = textThemeFields.some(field => {
209
- const element = children.find(child => child.text.trim() !== "") || {};
210
- const value = element[field];
211
- if (field === "fontSize") {
212
- return Object.keys(value || {}).length;
213
- } else {
214
- return value;
215
- }
216
- });
217
- return customized;
218
- } else {
219
- return null;
220
- }
221
- } catch (err) {
222
- return null;
223
- }
224
- };
225
- const addToTheme = (field, value, element) => {
226
- switch (field) {
227
- case "fontFamily":
228
- return {
229
- fontFamily: value
230
- };
231
- case "fontSize":
232
- return {
233
- fontSize: value?.lg
234
- };
235
- case "color":
236
- return {
237
- color: value
238
- };
239
- case "bold":
240
- return {
241
- fontWeight: "bold"
242
- };
243
- case "italic":
244
- return {
245
- fontStyle: "italic"
246
- };
247
- // case "underline":
248
- // case "strikethrough":
249
- // let textDecoration = "";
250
-
251
- // if (element.underline) {
252
- // textDecoration = "underline";
253
- // }
254
-
255
- // if (element.strikethrough) {
256
- // textDecoration += " strikethrough";
257
- // }
258
-
259
- // return { textDecoration };
260
- default:
261
- return {};
262
- }
263
- };
264
- const MAP_TEXT_THEME_FIELD = {
265
- headingOne: "h1",
266
- headingTwo: "h2",
267
- headingThree: "h3",
268
- headingFour: "h4",
269
- headingFive: "h5",
270
- headingSix: "h6",
271
- paragraphOne: "para1",
272
- paragraphTwo: "para2",
273
- paragraphThree: "para3"
274
- };
275
- export const saveToTheme = editor => {
276
- try {
277
- if (editor.selection) {
278
- const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
279
- if (!currentElement) {
280
- return false;
281
- }
282
- const {
283
- children
284
- } = currentElement;
285
- if (!children?.length) {
286
- return true;
287
- }
288
- let theme = {};
289
- textThemeFields.forEach(field => {
290
- const element = children.find(child => child.text.trim() !== "") || {};
291
- const value = element[field];
292
- let style = {};
293
- let isValueExist = false;
294
- if (value) {
295
- isValueExist = true;
296
- if (field === "fontSize") {
297
- isValueExist = !!Object.keys(value).length;
298
- }
299
- }
300
- if (isValueExist) {
301
- style = addToTheme(field, value, element);
302
- }
303
- theme = {
304
- ...theme,
305
- ...style
306
- };
307
- });
308
- textThemeFields.forEach(field => {
309
- Editor.removeMark(editor, field);
310
- });
311
- return {
312
- field: MAP_TEXT_THEME_FIELD[currentElement?.type],
313
- theme
314
- };
315
- }
316
- } catch (err) {
317
- return;
318
- }
319
- };
320
- export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
321
- export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
322
121
  export const getBRValue = (props, rbr = "lg") => {
323
122
  const {
324
123
  value,
@@ -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
@@ -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;