@flozy/editor 10.1.3 → 10.1.4

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 (150) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +15 -115
  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/Image.js +2 -3
  19. package/dist/Editor/Elements/Embed/Video.js +1 -1
  20. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  21. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  22. package/dist/Editor/Elements/Form/Form.js +168 -181
  23. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  24. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
  25. package/dist/Editor/Elements/Form/FormField.js +6 -13
  26. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  27. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  28. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  29. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  30. package/dist/Editor/Elements/FreeGrid/styles.js +7 -67
  31. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  32. package/dist/Editor/Elements/List/CheckList.js +1 -4
  33. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  34. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  35. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  36. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  37. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Title/title.js +6 -6
  40. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  41. package/dist/Editor/MiniEditor.js +1 -2
  42. package/dist/Editor/Styles/EditorStyles.js +5 -5
  43. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  44. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  45. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  52. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  55. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  56. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  57. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  58. package/dist/Editor/common/ColorPickerButton.js +17 -39
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +1 -31
  62. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  63. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  64. package/dist/Editor/common/LinkSettings/index.js +68 -84
  65. package/dist/Editor/common/LinkSettings/style.js +30 -245
  66. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  67. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  68. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  69. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  81. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  82. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  83. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  84. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  85. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  86. package/dist/Editor/common/RnD/index.js +6 -5
  87. package/dist/Editor/common/Select/index.js +0 -2
  88. package/dist/Editor/common/Shorthands/elements.js +0 -54
  89. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  99. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  100. package/dist/Editor/common/Uploader.js +0 -8
  101. package/dist/Editor/common/iconListV2.js +6 -101
  102. package/dist/Editor/common/iconslist.js +0 -24
  103. package/dist/Editor/commonStyle.js +61 -165
  104. package/dist/Editor/helper/theme.js +2 -203
  105. package/dist/Editor/hooks/useMouseMove.js +5 -8
  106. package/dist/Editor/plugins/withEmbeds.js +1 -1
  107. package/dist/Editor/plugins/withHTML.js +1 -3
  108. package/dist/Editor/plugins/withTable.js +1 -1
  109. package/dist/Editor/theme/ThemeList.js +173 -50
  110. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  111. package/dist/Editor/utils/button.js +17 -1
  112. package/dist/Editor/utils/draftToSlate.js +2 -3
  113. package/dist/Editor/utils/font.js +37 -40
  114. package/dist/Editor/utils/form.js +4 -4
  115. package/dist/Editor/utils/formfield.js +2 -8
  116. package/dist/Editor/utils/helper.js +19 -90
  117. package/package.json +4 -4
  118. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  119. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  120. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  121. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  122. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  123. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  124. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  125. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  126. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  127. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  128. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  129. package/dist/Editor/common/CustomSelect.js +0 -43
  130. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  131. package/dist/Editor/common/SnackBar/index.js +0 -43
  132. package/dist/Editor/helper/textIndeces.js +0 -58
  133. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  134. package/dist/Editor/hooks/useThemeValues.js +0 -63
  135. package/dist/Editor/theme/index.js +0 -149
  136. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  137. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  138. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  139. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  140. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  141. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  142. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  143. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  144. package/dist/Editor/themeSettings/icons.js +0 -60
  145. package/dist/Editor/themeSettings/index.js +0 -361
  146. package/dist/Editor/themeSettings/style.js +0 -292
  147. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  148. package/dist/Editor/themeSettingsAI/index.js +0 -355
  149. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  150. 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;