@flozy/editor 10.4.0 → 10.4.2

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 (190) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +27 -9
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +184 -171
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -81
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +30 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -0,0 +1,58 @@
1
+ export function extractTextWithPath(data, path = []) {
2
+ let result = [];
3
+ data.forEach((item, index) => {
4
+ const currentPath = [...path, index];
5
+ if (item.text) {
6
+ result.push({
7
+ path_id: currentPath.join(","),
8
+ text: item.text
9
+ });
10
+ }
11
+ if (item.children) {
12
+ result = result.concat(extractTextWithPath(item.children, currentPath));
13
+ }
14
+ });
15
+ return result;
16
+ }
17
+ export function replaceTextPath(nestedJson, pathIdJson) {
18
+ // Create a map from path_id JSON for quick lookup
19
+ const pathIdMap = new Map(pathIdJson.map(item => [item.path_id, item.text]));
20
+ console.log(pathIdMap);
21
+ function extractTextWithPath(data, path = []) {
22
+ data.forEach((item, index) => {
23
+ const currentPath = [...path, index];
24
+ if (item.text) {
25
+ if (pathIdMap.has(currentPath?.join(","))) {
26
+ item.text = pathIdMap.get(currentPath?.join(","));
27
+ }
28
+ }
29
+ if (item.children) {
30
+ extractTextWithPath(item.children, currentPath);
31
+ }
32
+ });
33
+ }
34
+ extractTextWithPath(nestedJson, []);
35
+ return nestedJson;
36
+ }
37
+
38
+ // export function replaceTextPath(nestedJson, pathIdJson) {
39
+ // // Create a map from path_id JSON for quick lookup
40
+ // const pathIdMap = new Map(
41
+ // pathIdJson.map((item) => [item.path_id, item.text])
42
+ // );
43
+
44
+ // function traverseAndReplace(node) {
45
+ // if (Array.isArray(node)) {
46
+ // node.forEach(traverseAndReplace);
47
+ // } else if (typeof node === "object" && node !== null) {
48
+ // console.log(node);
49
+ // if (node.text && pathIdMap.has(node.text)) {
50
+ // node.text = pathIdMap.get(node.path_id);
51
+ // }
52
+ // Object.values(node).forEach(traverseAndReplace);
53
+ // }
54
+ // }
55
+
56
+ // traverseAndReplace(nestedJson);
57
+ // return nestedJson;
58
+ // }
@@ -1,4 +1,6 @@
1
+ import { ReactEditor } from "slate-react";
1
2
  import { sizeMap } from "../utils/font";
3
+ import { Editor, Node } from "slate";
2
4
  export const breakpoints = {
3
5
  small: 0,
4
6
  mobile: 600,
@@ -33,7 +35,7 @@ const overrideValues = (value, ot) => {
33
35
  return Object.keys(value).reduce((a, b) => {
34
36
  return {
35
37
  ...a,
36
- [b]: overrides[ot] ? overrides[ot](value[b]) : value
38
+ [b]: overrides[ot] ? overrides[ot](value[b], value) : value
37
39
  };
38
40
  }, {});
39
41
  };
@@ -50,7 +52,15 @@ const overrides = {
50
52
  overrideReSizeH: val => {
51
53
  return val ? `${val?.height}px` : "auto";
52
54
  },
53
- overrideBorderRadius: val => {
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
+ }
54
64
  return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
55
65
  }
56
66
  };
@@ -118,6 +128,197 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
118
128
  console.log(err);
119
129
  }
120
130
  };
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", "fontWeight"
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"];
121
322
  export const getBRValue = (props, rbr = "lg") => {
122
323
  const {
123
324
  value,
@@ -0,0 +1,153 @@
1
+ import { useSlate } from "slate-react";
2
+ import { defaultTheme } from "../theme";
3
+ import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
4
+ import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
5
+ import { useEditorContext } from "./useMouseMove";
6
+ const MAP_FIELDS = {
7
+ HEADING: HEADING_THEME_FIELDS,
8
+ PARAGRAPH: PARAGRAPH_THEME_FIELDS
9
+ };
10
+ const MAP_FONT_FIELD_KEYS = {
11
+ HEADING: "headingFontFamily",
12
+ PARAGRAPH: "paragraphFontFamily"
13
+ };
14
+ function getUpdatePayload(prevTheme = {}, update, actionData) {
15
+ const {
16
+ action,
17
+ fieldName
18
+ } = actionData || {};
19
+ const {
20
+ theme: prev
21
+ } = prevTheme;
22
+ let theme = {};
23
+ let themeProps = {};
24
+ switch (action) {
25
+ case "THEME_CHANGE":
26
+ theme = update;
27
+ break;
28
+ case "CSS_VAR_CHANGE":
29
+ const prevCssVars = prev?.cssVars || {};
30
+ const prevValue = prevCssVars[fieldName] || {};
31
+ themeProps = {
32
+ ...(prev || {}),
33
+ cssVars: {
34
+ ...prevCssVars,
35
+ [fieldName]: {
36
+ ...prevValue,
37
+ ...update
38
+ }
39
+ }
40
+ };
41
+ theme = {
42
+ ...prevTheme,
43
+ theme: themeProps
44
+ };
45
+ break;
46
+ case "ELEMENT_PROPS_CHANGE":
47
+ const prevEleProps = prev?.elementProps || {};
48
+ const prevEleValue = prevEleProps[fieldName] || {};
49
+ themeProps = {
50
+ ...(prev || {}),
51
+ elementProps: {
52
+ ...prevEleProps,
53
+ [fieldName]: {
54
+ ...prevEleValue,
55
+ ...update
56
+ }
57
+ }
58
+ };
59
+ theme = {
60
+ ...prevTheme,
61
+ theme: themeProps
62
+ };
63
+ break;
64
+ case "OTHER_PROPS_CHANGE":
65
+ themeProps = {
66
+ ...(prev || {}),
67
+ otherProps: {
68
+ ...(prev.otherProps || {}),
69
+ ...update
70
+ }
71
+ };
72
+ theme = {
73
+ ...prevTheme,
74
+ theme: themeProps
75
+ };
76
+ break;
77
+ case "FONT_CHANGE":
78
+ const {
79
+ elementProps = {},
80
+ otherProps = {}
81
+ } = prev;
82
+ const {
83
+ fieldType
84
+ } = actionData || {};
85
+ const fields = MAP_FIELDS[fieldType];
86
+ const fontFieldsUpdate = {};
87
+ fields?.forEach(field => {
88
+ const prevFieldData = elementProps[field];
89
+ fontFieldsUpdate[field] = {
90
+ ...prevFieldData,
91
+ ...update
92
+ };
93
+ });
94
+ const FONT_KEY_FOR_FIELD = MAP_FONT_FIELD_KEYS[fieldType];
95
+ themeProps = {
96
+ ...(prev || {}),
97
+ elementProps: {
98
+ ...elementProps,
99
+ ...fontFieldsUpdate
100
+ },
101
+ otherProps: {
102
+ ...otherProps,
103
+ [FONT_KEY_FOR_FIELD]: update?.fontFamily
104
+ }
105
+ };
106
+ theme = {
107
+ ...prevTheme,
108
+ theme: themeProps
109
+ };
110
+ break;
111
+ default:
112
+ theme = {
113
+ ...prevTheme,
114
+ ...(update || {})
115
+ };
116
+ break;
117
+ }
118
+ return theme;
119
+ }
120
+ const updateTheme = (editor, pageSt, update, actionData, triggerRender) => {
121
+ const {
122
+ pageProps
123
+ } = pageSt || {};
124
+ const {
125
+ theme
126
+ } = pageProps || {};
127
+ const updatedTheme = getUpdatePayload(theme, update, actionData);
128
+ updatePageSettings(editor, {
129
+ ...(pageProps || {}),
130
+ theme: updatedTheme
131
+ });
132
+ triggerRender();
133
+ };
134
+ export const useEditorTheme = () => {
135
+ const editor = useSlate();
136
+ const {
137
+ triggerRender
138
+ } = useEditorContext();
139
+ const {
140
+ element: pageSt
141
+ } = getPageSettings(editor) || {};
142
+ const {
143
+ pageProps
144
+ } = pageSt || {};
145
+ const {
146
+ theme
147
+ } = pageProps || {};
148
+ return {
149
+ selectedTheme: theme?.theme || defaultTheme?.theme,
150
+ updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData, triggerRender),
151
+ theme
152
+ };
153
+ };
@@ -21,7 +21,10 @@ export const useEditorSelection = editor => {
21
21
  export const EditorProvider = ({
22
22
  editor,
23
23
  theme,
24
- children
24
+ children,
25
+ openTheme = false,
26
+ setOpenTheme = () => {},
27
+ triggerRender
25
28
  }) => {
26
29
  const [previous, setPrevious] = useState("");
27
30
  const [drop, setDrop] = useState(0);
@@ -36,7 +39,6 @@ export const EditorProvider = ({
36
39
  path: null
37
40
  });
38
41
  const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
39
- const [activeBreakPoint, setActiveBreakPoint] = useState("");
40
42
  useEffect(() => {
41
43
  window.updateSelectedItem = d => {
42
44
  setSelectedElement(d);
@@ -100,9 +102,10 @@ export const EditorProvider = ({
100
102
  updateDragging,
101
103
  fontFamilies,
102
104
  setFontFamilies,
103
- activeBreakPoint,
104
- setActiveBreakPoint
105
- }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
105
+ openTheme,
106
+ setOpenTheme,
107
+ triggerRender
108
+ }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme]);
106
109
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
107
110
  value: otherValues,
108
111
  children: children
@@ -190,16 +190,17 @@ export const TableProvider = ({
190
190
  // selectFirstCell(tablePath, editor, updateTableSelection);
191
191
  // }, []);
192
192
 
193
+ const onClickAway = () => {
194
+ setTableSelection(getDefaultTableSelection());
195
+ setHoverPath(null);
196
+ };
193
197
  return /*#__PURE__*/_jsx(TableContext.Provider, {
194
198
  value: values,
195
199
  children: /*#__PURE__*/_jsxs(DndContext, {
196
200
  sensors: sensors,
197
201
  onDragEnd: data => handleDragEnd(data, editor, resetAll),
198
202
  children: [/*#__PURE__*/_jsx(ClickAwayListener, {
199
- onClickAway: () => {
200
- setTableSelection(getDefaultTableSelection());
201
- setHoverPath(null);
202
- },
203
+ onClickAway: onClickAway,
203
204
  children: /*#__PURE__*/_jsx("div", {
204
205
  children: children
205
206
  })
@@ -0,0 +1,63 @@
1
+ import { useEffect, useState } from "react";
2
+ import { getElementProperty } from "../helper/theme";
3
+ import { ReactEditor } from "slate-react";
4
+ import { Node } from "slate";
5
+ import { useEditorTheme } from "./useEditorTheme";
6
+ function useThemeValues() {
7
+ return {};
8
+ }
9
+ export default useThemeValues;
10
+ export function useButtonStyle(value, key, element) {
11
+ const [buttonStyle, setButtonStyle] = useState(value);
12
+ const {
13
+ selectedTheme
14
+ } = useEditorTheme();
15
+ const themeBtnProps = selectedTheme?.elementProps?.button || {};
16
+ useEffect(() => {
17
+ const color = getColorValue(value, key, element, themeBtnProps);
18
+ setButtonStyle({
19
+ color
20
+ });
21
+ }, [value, key, element]);
22
+ return {
23
+ buttonStyle
24
+ };
25
+ }
26
+ const DEFAULT_MAP_THEMES = {
27
+ textColor: "color",
28
+ bgColor: "backgroundColor"
29
+ };
30
+ const hoverMap = (theme, format) => {
31
+ const hover = theme?.hover || {};
32
+ const key = DEFAULT_MAP_THEMES[format];
33
+ return hover[key];
34
+ };
35
+ const MAP_THEME_KEYS = {
36
+ ...DEFAULT_MAP_THEMES,
37
+ textColorHover: hoverMap,
38
+ bgColorHover: hoverMap
39
+ };
40
+ const getColorValue = (val, key, elementProps, themeBtnProps) => {
41
+ const themeKey = MAP_THEME_KEYS[key];
42
+ if (elementProps?.type === "button" && !val && themeKey) {
43
+ if (typeof themeKey === "string") {
44
+ return themeBtnProps[themeKey];
45
+ } else {
46
+ return themeKey(themeBtnProps, key);
47
+ }
48
+ }
49
+ return val;
50
+ };
51
+ export function getButtonElementStyle(editor, element, stylePropertyName) {
52
+ try {
53
+ const path = ReactEditor.findPath(editor, element);
54
+ if (path?.length) {
55
+ const currentEle = Node.get(editor, path);
56
+ const dom = ReactEditor.toDOMNode(editor, currentEle);
57
+ const editorBtn = dom?.querySelector(".button.theme-element");
58
+ return getElementProperty(editorBtn, stylePropertyName);
59
+ }
60
+ } catch (err) {
61
+ // console.log(err);
62
+ }
63
+ }
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
- const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
3
3
  const BlockTypes = ["grid"];
4
4
  const withEmbeds = editor => {
5
5
  const {
@@ -30,6 +30,8 @@ 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
+
33
35
  // Check if the parent of <li> is not a <ul> or <ol>
34
36
  if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
35
37
  // Create a <ul> element
@@ -55,7 +57,7 @@ const loopChildren = (children = [], defaultInsert) => {
55
57
  }
56
58
  return defaultInsert;
57
59
  };
58
- const getCurrentElement = editor => {
60
+ export const getCurrentElement = editor => {
59
61
  try {
60
62
  if (editor.selection) {
61
63
  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", "page-settings"];
4
4
  const withTable = editor => {
5
5
  const {
6
6
  deleteBackward,