@flozy/editor 10.1.4 → 10.1.6

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 (172) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -16
  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 +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  35. package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
  36. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  37. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  38. package/dist/Editor/Elements/List/CheckList.js +4 -1
  39. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  40. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  41. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  42. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  43. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  44. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  45. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  46. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  47. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  48. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  49. package/dist/Editor/Elements/Table/Styles.js +7 -0
  50. package/dist/Editor/Elements/Table/Table.js +3 -3
  51. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  52. package/dist/Editor/Elements/Title/title.js +6 -6
  53. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  54. package/dist/Editor/MiniEditor.js +2 -1
  55. package/dist/Editor/Styles/EditorStyles.js +5 -5
  56. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  57. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  58. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  59. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  60. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  65. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  66. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  67. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  68. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  69. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  70. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  71. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  72. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  73. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  74. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  75. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  76. package/dist/Editor/common/ColorPickerButton.js +39 -17
  77. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  78. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  79. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  80. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  81. package/dist/Editor/common/CustomSelect.js +43 -0
  82. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  83. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  84. package/dist/Editor/common/Icon.js +31 -1
  85. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  86. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  87. package/dist/Editor/common/LinkSettings/index.js +84 -68
  88. package/dist/Editor/common/LinkSettings/style.js +245 -30
  89. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  90. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  91. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  92. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  94. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  105. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  106. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  107. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  108. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  109. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  110. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  111. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  112. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -57
  113. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  114. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  115. package/dist/Editor/common/RnD/index.js +5 -10
  116. package/dist/Editor/common/Select/index.js +2 -0
  117. package/dist/Editor/common/Shorthands/elements.js +54 -0
  118. package/dist/Editor/common/SnackBar/index.js +43 -0
  119. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  126. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  127. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  128. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  129. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  130. package/dist/Editor/common/Uploader.js +8 -0
  131. package/dist/Editor/common/iconListV2.js +156 -6
  132. package/dist/Editor/common/iconslist.js +24 -0
  133. package/dist/Editor/commonStyle.js +168 -62
  134. package/dist/Editor/helper/index.js +4 -0
  135. package/dist/Editor/helper/textIndeces.js +58 -0
  136. package/dist/Editor/helper/theme.js +203 -2
  137. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  138. package/dist/Editor/hooks/useMouseMove.js +8 -5
  139. package/dist/Editor/hooks/useTable.js +5 -4
  140. package/dist/Editor/hooks/useThemeValues.js +63 -0
  141. package/dist/Editor/plugins/withEmbeds.js +1 -1
  142. package/dist/Editor/plugins/withHTML.js +3 -1
  143. package/dist/Editor/plugins/withTable.js +1 -1
  144. package/dist/Editor/theme/ThemeList.js +50 -173
  145. package/dist/Editor/theme/index.js +149 -0
  146. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  147. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  148. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  149. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  150. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  151. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  152. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  153. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  154. package/dist/Editor/themeSettings/icons.js +60 -0
  155. package/dist/Editor/themeSettings/index.js +361 -0
  156. package/dist/Editor/themeSettings/style.js +299 -0
  157. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  158. package/dist/Editor/themeSettingsAI/index.js +355 -0
  159. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  160. package/dist/Editor/themeSettingsAI/style.js +332 -0
  161. package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
  162. package/dist/Editor/utils/accordion.js +14 -4
  163. package/dist/Editor/utils/button.js +1 -17
  164. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  165. package/dist/Editor/utils/draftToSlate.js +3 -2
  166. package/dist/Editor/utils/events.js +50 -6
  167. package/dist/Editor/utils/font.js +40 -37
  168. package/dist/Editor/utils/form.js +4 -4
  169. package/dist/Editor/utils/formfield.js +8 -2
  170. package/dist/Editor/utils/helper.js +109 -19
  171. package/dist/Editor/utils/signature.js +2 -9
  172. package/package.json +4 -4
@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
35
  import { getTextColor, isEmptyTextNode } from "../helper";
36
36
  import Attachments from "../Elements/Attachments/Attachments";
37
- import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
37
+ import { getBreakPointsValue, textThemeFields, getElementProperty } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
39
- import insertNewLine from "./insertNewLine";
40
39
  import Divider from "../Elements/Divider/Divider";
41
40
  import { getBorderColor, getSlateDom } from "./helper";
42
41
  import Code from "../Elements/EmbedScript/Code";
42
+ import { ReactEditor } from "slate-react";
43
43
  import FreeGrid from "../Elements/FreeGrid/FreeGrid";
44
44
  import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
45
45
  import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
@@ -47,7 +47,7 @@ import DataView from "../Elements/DataView/DataView";
47
47
  import ViewData from "../Elements/DataView/Layouts/ViewData";
48
48
  import ColumnView from "../Elements/DataView/Layouts/ColumnView";
49
49
  import SearchAttachment from "../Elements/Search/SearchAttachment";
50
- // import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
50
+ import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
51
51
  import { jsx as _jsx } from "react/jsx-runtime";
52
52
  import { jsxs as _jsxs } from "react/jsx-runtime";
53
53
  const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
@@ -56,7 +56,17 @@ const LIST_FORMAT_TYPE = {
56
56
  orderedList: "list-item",
57
57
  unorderedList: "list-item"
58
58
  };
59
- const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
59
+
60
+ // const NEWLINESAFTER = [
61
+ // "headingOne",
62
+ // "headingTwo",
63
+ // "headingThree",
64
+ // "headingFour",
65
+ // "headingFive",
66
+ // "headingSix",
67
+ // ];
68
+
69
+ const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
60
70
  export const toggleBlock = (editor, format, selection = true, attr = {}) => {
61
71
  const isActive = isBlockActive(editor, format);
62
72
  const isList = list_types.includes(format);
@@ -89,8 +99,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
89
99
  if (!selection) {
90
100
  Transforms.insertText(editor, "");
91
101
  }
102
+ const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
92
103
  Transforms.setNodes(editor, {
93
- type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
104
+ type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
94
105
  ...attr
95
106
  });
96
107
  if (isList && !isActive) {
@@ -99,10 +110,12 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
99
110
  children: []
100
111
  });
101
112
  }
102
- if (NEWLINESAFTER.indexOf(format) > -1) {
103
- insertNewLine(editor);
104
- }
113
+
114
+ // if (NEWLINESAFTER.indexOf(format) > -1) {
115
+ // insertNewLine(editor);
116
+ // }
105
117
  };
118
+
106
119
  export const addMarkData = (editor, data) => {
107
120
  try {
108
121
  Editor.addMark(editor, data.format, data.value);
@@ -111,9 +124,14 @@ export const addMarkData = (editor, data) => {
111
124
  }
112
125
  };
113
126
  export const toggleMark = (editor, format) => {
114
- const isActive = isMarkActive(editor, format);
127
+ const isActive = isMarkBtnActive(editor, format);
115
128
  if (isActive) {
116
- Editor.removeMark(editor, format);
129
+ const isThemeSupportedMark = textThemeFields.some(f => f === format);
130
+ if (isThemeSupportedMark) {
131
+ Editor.addMark(editor, format, false);
132
+ } else {
133
+ Editor.removeMark(editor, format);
134
+ }
117
135
  } else {
118
136
  Editor.addMark(editor, format, true);
119
137
  }
@@ -127,6 +145,58 @@ export const isMarkActive = (editor, format) => {
127
145
  return null;
128
146
  }
129
147
  };
148
+ export const isMarkBtnActive = (editor, format) => {
149
+ switch (format) {
150
+ case "bold":
151
+ {
152
+ const style = getSelectedElementStyle("font-weight", editor);
153
+ return style === "700";
154
+ }
155
+ case "italic":
156
+ {
157
+ const style = getSelectedElementStyle("font-style", editor);
158
+ return style === format;
159
+ }
160
+ // case "underline": {
161
+ // const style = getSelectedElementStyle("text-decoration");
162
+
163
+ // return style?.includes(format);
164
+ // }
165
+ // case "strikethrough": {
166
+ // const style = getSelectedElementStyle("text-decoration");
167
+
168
+ // return style?.includes("line-through");
169
+ // }
170
+ default:
171
+ return isMarkActive(editor, format);
172
+ }
173
+ };
174
+ export const getSelectedElementStyle = (styleProperty, editor, format) => {
175
+ try {
176
+ if (!editor.selection) {
177
+ return "";
178
+ }
179
+ if (Range.isCollapsed(editor.selection)) {
180
+ return "";
181
+ }
182
+ if (format) {
183
+ const value = activeMark(editor, format, true);
184
+ if (value) {
185
+ return value;
186
+ }
187
+ }
188
+ const domRange = ReactEditor.toDOMRange(editor, editor.selection);
189
+ const selectedDomNode = domRange.commonAncestorContainer;
190
+
191
+ // If it's a text node, get its parent element
192
+ const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
193
+ if (selectedElement) {
194
+ return getElementProperty(selectedElement, styleProperty);
195
+ }
196
+ } catch (err) {
197
+ console.log(err);
198
+ }
199
+ };
130
200
  export const isBlockActive = (editor, format) => {
131
201
  const [match] = Editor.nodes(editor, {
132
202
  match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -152,7 +222,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
152
222
  });
153
223
  }
154
224
  };
155
- export const activeMark = (editor, format) => {
225
+ export const activeMark = (editor, format, noDefaultValue) => {
156
226
  const defaultMarkData = {
157
227
  color: "#000000",
158
228
  bgColor: "#FFFFFF",
@@ -162,7 +232,7 @@ export const activeMark = (editor, format) => {
162
232
  };
163
233
  try {
164
234
  const marks = Editor.marks(editor);
165
- let defaultValue = defaultMarkData[format];
235
+ let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
166
236
  const {
167
237
  selection
168
238
  } = editor || {};
@@ -179,6 +249,31 @@ export const activeMark = (editor, format) => {
179
249
  return null;
180
250
  }
181
251
  };
252
+
253
+ // to avoid the styles, that automatically assign from themes
254
+ const getThemeMarkedLeaf = (leaf, children) => {
255
+ const {
256
+ italic,
257
+ bold
258
+ } = leaf || {};
259
+ const style = {};
260
+ if (italic === false) {
261
+ style.fontStyle = "normal";
262
+ }
263
+ if (bold === false) {
264
+ style.fontWeight = "normal";
265
+ }
266
+ if (Object.keys(style).length) {
267
+ children = /*#__PURE__*/_jsx(Box, {
268
+ component: "span",
269
+ sx: {
270
+ "& span": style
271
+ },
272
+ children: children
273
+ });
274
+ }
275
+ return children;
276
+ };
182
277
  export const getMarked = (leaf, children, theme) => {
183
278
  const className = leaf?.doublequote ? "doublequote" : "";
184
279
  if (leaf.highlight) {
@@ -205,6 +300,7 @@ export const getMarked = (leaf, children, theme) => {
205
300
  children: children
206
301
  });
207
302
  }
303
+ children = getThemeMarkedLeaf(leaf, children);
208
304
  if (leaf.strikethrough) {
209
305
  children = /*#__PURE__*/_jsx("span", {
210
306
  style: {
@@ -232,20 +328,27 @@ export const getMarked = (leaf, children, theme) => {
232
328
  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
233
329
  const family = leaf?.fontFamily;
234
330
  const textStyles = getTextColor(leaf?.color);
331
+ const fontSize = {
332
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
333
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
334
+ };
335
+ const fontSizesImportant = {};
336
+ Object.entries(fontSize).forEach(([key, value]) => {
337
+ fontSizesImportant[key] = `${value} !important`;
338
+ });
339
+ const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
235
340
  children = /*#__PURE__*/_jsx("span", {
236
- style: {
237
- background: leaf.bgColor
238
- },
239
341
  children: /*#__PURE__*/_jsx(Box, {
240
342
  className: `${className} leaf-item`,
241
343
  component: "span",
242
344
  sx: {
243
- ...groupByBreakpoint({
244
- fontSize: {
245
- lg: sizeMap[leaf.fontSize] || leaf.fontSize,
246
- ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
247
- }
248
- }, theme),
345
+ "& span": {
346
+ // fontSize: fontSizesImportant,
347
+ // ...groupByBreakpoint(fontSizesImportant, theme),
348
+ background: leaf.bgColor,
349
+ ...fontSizeWithBreakpoints
350
+ },
351
+ ...fontSizeWithBreakpoints,
249
352
  // ...wrapThemeBreakpoints(
250
353
  // {
251
354
  // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
@@ -292,17 +395,28 @@ export const getBlock = props => {
292
395
  children,
293
396
  customProps
294
397
  } = props;
398
+ const {
399
+ customLineHeight
400
+ } = customProps || {};
295
401
  const attributes = props.attributes ?? {};
296
402
  const isEmpty = isEmptyTextNode(element);
297
403
  const {
298
404
  translation
299
405
  } = customProps;
406
+ const commonHeadingProps = () => ({
407
+ ...attributes,
408
+ ...element.attr,
409
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
410
+ });
411
+ const commonParaProps = paraType => ({
412
+ ...attributes,
413
+ ...element.attr,
414
+ className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
415
+ });
300
416
  switch (element.type) {
301
417
  case "headingOne":
302
418
  return /*#__PURE__*/_jsxs("h1", {
303
- ...attributes,
304
- ...element.attr,
305
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
419
+ ...commonHeadingProps(),
306
420
  placeholder: translation("Heading 1"),
307
421
  children: [children, /*#__PURE__*/_jsx("span", {
308
422
  contentEditable: false
@@ -310,9 +424,7 @@ export const getBlock = props => {
310
424
  });
311
425
  case "headingTwo":
312
426
  return /*#__PURE__*/_jsxs("h2", {
313
- ...attributes,
314
- ...element.attr,
315
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
427
+ ...commonHeadingProps(),
316
428
  placeholder: translation("Heading 2"),
317
429
  children: [children, /*#__PURE__*/_jsx("span", {
318
430
  contentEditable: false
@@ -320,9 +432,7 @@ export const getBlock = props => {
320
432
  });
321
433
  case "headingThree":
322
434
  return /*#__PURE__*/_jsxs("h3", {
323
- ...attributes,
324
- ...element.attr,
325
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
435
+ ...commonHeadingProps(),
326
436
  placeholder: translation("Heading 3"),
327
437
  children: [children, /*#__PURE__*/_jsx("span", {
328
438
  contentEditable: false
@@ -330,9 +440,7 @@ export const getBlock = props => {
330
440
  });
331
441
  case "headingFour":
332
442
  return /*#__PURE__*/_jsxs("h4", {
333
- ...attributes,
334
- ...element.attr,
335
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
443
+ ...commonHeadingProps(),
336
444
  placeholder: translation("Heading 4"),
337
445
  children: [children, /*#__PURE__*/_jsx("span", {
338
446
  contentEditable: false
@@ -340,9 +448,7 @@ export const getBlock = props => {
340
448
  });
341
449
  case "headingFive":
342
450
  return /*#__PURE__*/_jsxs("h5", {
343
- ...attributes,
344
- ...element.attr,
345
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
451
+ ...commonHeadingProps(),
346
452
  placeholder: translation("Heading 5"),
347
453
  children: [children, /*#__PURE__*/_jsx("span", {
348
454
  contentEditable: false
@@ -350,14 +456,30 @@ export const getBlock = props => {
350
456
  });
351
457
  case "headingSix":
352
458
  return /*#__PURE__*/_jsxs("h6", {
353
- ...attributes,
354
- ...element.attr,
355
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
459
+ ...commonHeadingProps(),
356
460
  placeholder: translation("Heading 6"),
357
461
  children: [children, /*#__PURE__*/_jsx("span", {
358
462
  contentEditable: false
359
463
  })]
360
464
  });
465
+ case "paragraphOne":
466
+ return /*#__PURE__*/_jsx("p", {
467
+ ...commonParaProps("para1"),
468
+ placeholder: "Paragraph 1",
469
+ children: children
470
+ });
471
+ case "paragraphTwo":
472
+ return /*#__PURE__*/_jsx("p", {
473
+ ...commonParaProps("para2"),
474
+ placeholder: "Paragraph 2",
475
+ children: children
476
+ });
477
+ case "paragraphThree":
478
+ return /*#__PURE__*/_jsx("p", {
479
+ ...commonParaProps("para3"),
480
+ placeholder: "Paragraph 3",
481
+ children: children
482
+ });
361
483
  case "blockquote":
362
484
  return /*#__PURE__*/_jsx("blockquote", {
363
485
  ...attributes,
@@ -371,7 +493,7 @@ export const getBlock = props => {
371
493
  margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
372
494
  width: element?.bgColor ? "calc(100% - 16px)" : "100%",
373
495
  borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
374
- lineHeight: 1.43
496
+ lineHeight: `${customLineHeight} !important`
375
497
  },
376
498
  children: children
377
499
  });
@@ -425,14 +547,15 @@ export const getBlock = props => {
425
547
  className: `content-editable ${isEmpty ? "empty" : ""}`,
426
548
  placeholder: translation("List"),
427
549
  style: {
428
- color: firstChildren?.color
550
+ color: firstChildren?.color,
551
+ lineHeight: `${customLineHeight} !important`
429
552
  },
430
553
  children: children
431
554
  });
432
555
  case "orderedList":
433
556
  return /*#__PURE__*/_jsx("ol", {
434
557
  style: {
435
- lineHeight: 1.43
558
+ lineHeight: `${customLineHeight} !important`
436
559
  },
437
560
  className: "listItemMargin",
438
561
  type: "1",
@@ -442,7 +565,7 @@ export const getBlock = props => {
442
565
  case "unorderedList":
443
566
  return /*#__PURE__*/_jsx("ul", {
444
567
  style: {
445
- lineHeight: 1.43
568
+ lineHeight: `${customLineHeight} !important`
446
569
  },
447
570
  className: "listItemMargin",
448
571
  ...attributes,
@@ -1,6 +1,13 @@
1
1
  import { Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
3
  import { getSelectedText } from "./helper";
4
+ import { isMobileWindow } from "../helper";
5
+ const focusAccordion = (editor, upPath) => {
6
+ Transforms.select(editor, {
7
+ path: upPath,
8
+ offset: 0
9
+ });
10
+ };
4
11
  export const insertAccordion = (editor, path) => {
5
12
  try {
6
13
  const selectedText = getSelectedText(editor);
@@ -36,11 +43,14 @@ export const insertAccordion = (editor, path) => {
36
43
  // get title index
37
44
  const summaryIndex = upPath.length - 3;
38
45
  upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
46
+
39
47
  // select accordion title by default
40
- Transforms.select(editor, {
41
- path: upPath,
42
- offset: 0
43
- });
48
+ if (isMobileWindow()) {
49
+ // timeout to resolve focus issue in mobile
50
+ setTimeout(() => focusAccordion(editor, upPath), 0);
51
+ } else {
52
+ focusAccordion(editor, upPath);
53
+ }
44
54
  insertNewLine(editor);
45
55
  } catch (err) {
46
56
  console.log(err);
@@ -1,6 +1,5 @@
1
1
  import { Path, Transforms } from "slate";
2
2
  import insertNewLine from "./insertNewLine";
3
- import { windowVar } from "./helper";
4
3
  import { getCurrentElementText } from "../plugins/withHTML";
5
4
  export const insertButton = editor => {
6
5
  const button = {
@@ -11,22 +10,7 @@ export const insertButton = editor => {
11
10
  buttonLink: {
12
11
  linkType: "webAddress"
13
12
  },
14
- iconPosition: "start",
15
- bgColor: "#2563EB",
16
- textColor: "#FFF",
17
- borderRadius: {
18
- topLeft: 30,
19
- topRight: 30,
20
- bottomLeft: 30,
21
- bottomRight: 30
22
- },
23
- bannerSpacing: {
24
- left: 16,
25
- top: 8,
26
- right: 16,
27
- bottom: 8
28
- },
29
- ...(windowVar.lastButtonProps || {})
13
+ iconPosition: "start"
30
14
  };
31
15
  const hasText = getCurrentElementText(editor);
32
16
  const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;
@@ -1,9 +1,10 @@
1
- import { useState } from "react";
1
+ import { useRef, useState } from "react";
2
2
  const useTableResize = ({
3
3
  parentDOM,
4
4
  size: defaultSize,
5
5
  onDone,
6
- minMaxProps = {}
6
+ minMaxProps = {},
7
+ isMobile
7
8
  }) => {
8
9
  const {
9
10
  width
@@ -18,6 +19,10 @@ const useTableResize = ({
18
19
  });
19
20
  const [resizing, setResizing] = useState(false);
20
21
  const [isDone, setIsDone] = useState(0);
22
+ const lastTouch = useRef({
23
+ x: 0,
24
+ y: 0
25
+ });
21
26
  const onLoad = defaultSize => {
22
27
  setSize({
23
28
  widthInPercent: 100,
@@ -25,29 +30,64 @@ const useTableResize = ({
25
30
  ...defaultSize
26
31
  });
27
32
  };
33
+ const handleEventListeners = type => {
34
+ const listener = type === "add" ? document.addEventListener : document.removeEventListener;
35
+ const onMoveListener = isMobile ? "touchmove" : "pointermove";
36
+ const onEndListener = isMobile ? "touchend" : "pointerup";
37
+ listener(onMoveListener, onMouseMove);
38
+ listener(onEndListener, onMouseUp);
39
+ };
40
+ const updateLastTouch = ({
41
+ clientX,
42
+ clientY
43
+ }) => {
44
+ lastTouch.current.x = clientX;
45
+ lastTouch.current.y = clientY;
46
+ };
28
47
  const onMouseDown = e => {
29
- e.preventDefault();
30
- document.addEventListener("pointermove", onMouseMove);
31
- document.addEventListener("pointerup", onMouseUp);
48
+ if (isMobile) {
49
+ updateLastTouch(e.touches[0]);
50
+ } else {
51
+ e.preventDefault();
52
+ }
53
+ handleEventListeners("add");
32
54
  setResizing(true);
33
55
  setIsDone(0);
34
56
  };
35
57
  const onMouseUp = () => {
36
- document.removeEventListener("pointermove", onMouseMove);
37
- document.removeEventListener("pointerup", onMouseUp);
58
+ handleEventListeners("remove");
38
59
  setResizing(false);
39
60
  setIsDone(1);
40
61
  };
41
62
  const onMouseMove = e => {
63
+ let {
64
+ movementX,
65
+ movementY
66
+ } = e || {};
67
+ if (e.type === "touchmove") {
68
+ // for mobile
69
+ const {
70
+ x,
71
+ y
72
+ } = lastTouch.current || {};
73
+ const touches = e.touches[0];
74
+ const {
75
+ clientX,
76
+ clientY
77
+ } = touches;
78
+ movementX = clientX - x;
79
+ movementY = clientY - y;
80
+ updateLastTouch(touches);
81
+ }
42
82
  const {
43
83
  minWidth
44
84
  } = minMaxProps || {};
45
85
  setSize(currentSize => {
46
86
  const width = currentSize?.width || parentDOM?.clientWidth;
47
- const calcWidth = width + e.movementX;
87
+ const calcWidth = width + movementX;
48
88
  return {
49
89
  width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
50
- height: currentSize.height + e.movementY,
90
+ height: currentSize.height + movementY,
51
91
  widthInPercent: calcWidth / width * 100
52
92
  };
53
93
  });
@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
82
82
  };
83
83
  export const draftToSlate = props => {
84
84
  const {
85
- data
85
+ data,
86
+ needLayout
86
87
  } = props;
87
88
  if (data?.blocks && data?.blocks?.length > 0) {
88
89
  const converted = data?.blocks?.reduce((a, b) => {
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
104
105
  return data;
105
106
  } else {
106
107
  return [{
107
- type: "paragraph",
108
+ type: needLayout ? "title" : "paragraph",
108
109
  children: [{
109
110
  text: ""
110
111
  }]
@@ -1,10 +1,11 @@
1
- import { Editor, Transforms, Element, Node, Path, Range } from "slate";
1
+ import { Editor, Transforms, Element, Node, Path, Range, Point } from "slate";
2
2
  import { toggleBlock } from "./SlateUtilityFunctions";
3
3
  import insertNewLine from "./insertNewLine";
4
4
  import { insertAccordion } from "./accordion";
5
- import { isListItem } from "./helper";
5
+ import { getNodeWithType, isListItem } from "./helper";
6
6
  import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
7
7
  import EDITORCMDS from "../common/EditorCmds";
8
+ import { ReactEditor } from "slate-react";
8
9
  const HOTKEYS = {
9
10
  b: "bold",
10
11
  i: "italic",
@@ -183,6 +184,20 @@ const checkListEnterEvent = (editor, type) => {
183
184
  insertNewLine(editor);
184
185
  }
185
186
  };
187
+ const removeAccordion = (editor, accordionPath) => {
188
+ Transforms.removeNodes(editor, {
189
+ at: accordionPath
190
+ });
191
+ Transforms.insertNodes(editor, {
192
+ type: "paragraph",
193
+ children: [{
194
+ text: ""
195
+ }]
196
+ }, {
197
+ at: accordionPath,
198
+ select: true
199
+ });
200
+ };
186
201
  export const enterEvent = (e, editor, isMobile) => {
187
202
  try {
188
203
  const ele = isListItem(editor);
@@ -225,9 +240,7 @@ export const enterEvent = (e, editor, isMobile) => {
225
240
  e.preventDefault();
226
241
  if (!text) {
227
242
  const accordionIndex = ele[1].slice(0, Math.max(ele[1].length - 1));
228
- Transforms.removeNodes(editor, {
229
- at: accordionIndex
230
- });
243
+ removeAccordion(editor, accordionIndex);
231
244
  } else {
232
245
  const nextPath = Path.next(Path.parent(ele[1]));
233
246
  insertAccordion(editor, nextPath);
@@ -329,6 +342,37 @@ export const enterEvent = (e, editor, isMobile) => {
329
342
  console.log(err);
330
343
  }
331
344
  };
345
+ export const handleAccordionOnBackspace = (e, editor) => {
346
+ try {
347
+ let isAccordion = false;
348
+ const [accordionDetails] = getNodeWithType(editor, "accordion-details");
349
+ const [accordionDetailsNode] = accordionDetails || [];
350
+ if (accordionDetailsNode) {
351
+ const dom = ReactEditor.toDOMNode(editor, accordionDetailsNode);
352
+ if (dom?.parentElement) {
353
+ dom.parentElement.style.display = "block";
354
+ }
355
+ }
356
+ const [accordionSummary] = getNodeWithType(editor, "accordion-summary");
357
+ const [accordionTitle, accordionTitlePath] = accordionSummary || [];
358
+ if (accordionTitle) {
359
+ // no selection
360
+ if (Range.isCollapsed(editor.selection)) {
361
+ const start = Editor.start(editor, accordionTitlePath);
362
+ const isCursorAtStart = Point.equals(editor.selection.focus, start);
363
+ if (isCursorAtStart) {
364
+ e.preventDefault();
365
+ const parentPath = Path.parent(accordionTitlePath);
366
+ removeAccordion(editor, parentPath);
367
+ isAccordion = true;
368
+ }
369
+ }
370
+ }
371
+ return isAccordion;
372
+ } catch (err) {
373
+ console.log(err);
374
+ }
375
+ };
332
376
  export const upDownArrowKeyEvents = (e, editor) => {
333
377
  try {
334
378
  const {
@@ -348,7 +392,7 @@ export const upDownArrowKeyEvents = (e, editor) => {
348
392
  }
349
393
  Transforms.move(editor, {
350
394
  distance: 0,
351
- unit: 'offset',
395
+ unit: "offset",
352
396
  reverse: false
353
397
  });
354
398
  Transforms.select(editor, {