@flozy/editor 10.4.0 → 10.4.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 (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 -80
  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 +31 -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
@@ -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 { getBreakpointLineSpacing, getBreakPointsValue, getDevice, getElementProperty, textThemeFields } 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,8 +249,36 @@ 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" : "";
279
+ const lineH = leaf?.lineHeight;
280
+ const breakpoint = getDevice(window.innerWidth);
281
+ const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
184
282
  if (leaf.highlight) {
185
283
  children = /*#__PURE__*/_jsx("span", {
186
284
  style: {
@@ -205,6 +303,7 @@ export const getMarked = (leaf, children, theme) => {
205
303
  children: children
206
304
  });
207
305
  }
306
+ children = getThemeMarkedLeaf(leaf, children);
208
307
  if (leaf.strikethrough) {
209
308
  children = /*#__PURE__*/_jsx("span", {
210
309
  style: {
@@ -229,9 +328,18 @@ export const getMarked = (leaf, children, theme) => {
229
328
  });
230
329
  }
231
330
  // cover under single span
232
- if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
331
+ if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
233
332
  const family = leaf?.fontFamily;
234
333
  const textStyles = getTextColor(leaf?.color);
334
+ const fontSize = {
335
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
336
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
337
+ };
338
+ const fontSizesImportant = {};
339
+ Object.entries(fontSize).forEach(([key, value]) => {
340
+ fontSizesImportant[key] = `${value} !important`;
341
+ });
342
+ const fontSizeWithBreakpoints = wrapThemeBreakpoints(fontSizesImportant, "fontSize", theme);
235
343
  children = /*#__PURE__*/_jsx("span", {
236
344
  style: {
237
345
  background: leaf.bgColor
@@ -240,12 +348,13 @@ export const getMarked = (leaf, children, theme) => {
240
348
  className: `${className} leaf-item`,
241
349
  component: "span",
242
350
  sx: {
243
- ...groupByBreakpoint({
244
- fontSize: {
245
- lg: sizeMap[leaf.fontSize] || leaf.fontSize,
246
- ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
247
- }
248
- }, theme),
351
+ "& span": {
352
+ // fontSize: fontSizesImportant,
353
+ // ...groupByBreakpoint(fontSizesImportant, theme),
354
+ background: leaf.bgColor,
355
+ ...fontSizeWithBreakpoints
356
+ },
357
+ ...fontSizeWithBreakpoints,
249
358
  // ...wrapThemeBreakpoints(
250
359
  // {
251
360
  // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
@@ -297,12 +406,23 @@ export const getBlock = props => {
297
406
  const {
298
407
  translation
299
408
  } = customProps;
409
+ const commonHeadingProps = () => ({
410
+ ...attributes,
411
+ ...element.attr,
412
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""} theme-element`
413
+ });
414
+ const commonParaProps = paraType => ({
415
+ ...attributes,
416
+ ...element.attr,
417
+ className: `edt-paragraphs content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
418
+ });
419
+ const breakpoint = getDevice(window.innerWidth);
420
+ const lineH = element?.children[0]?.lineHeight;
421
+ const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
300
422
  switch (element.type) {
301
423
  case "headingOne":
302
424
  return /*#__PURE__*/_jsxs("h1", {
303
- ...attributes,
304
- ...element.attr,
305
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
425
+ ...commonHeadingProps(),
306
426
  placeholder: translation("Heading 1"),
307
427
  children: [children, /*#__PURE__*/_jsx("span", {
308
428
  contentEditable: false
@@ -310,9 +430,7 @@ export const getBlock = props => {
310
430
  });
311
431
  case "headingTwo":
312
432
  return /*#__PURE__*/_jsxs("h2", {
313
- ...attributes,
314
- ...element.attr,
315
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
433
+ ...commonHeadingProps(),
316
434
  placeholder: translation("Heading 2"),
317
435
  children: [children, /*#__PURE__*/_jsx("span", {
318
436
  contentEditable: false
@@ -320,9 +438,7 @@ export const getBlock = props => {
320
438
  });
321
439
  case "headingThree":
322
440
  return /*#__PURE__*/_jsxs("h3", {
323
- ...attributes,
324
- ...element.attr,
325
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
441
+ ...commonHeadingProps(),
326
442
  placeholder: translation("Heading 3"),
327
443
  children: [children, /*#__PURE__*/_jsx("span", {
328
444
  contentEditable: false
@@ -330,9 +446,7 @@ export const getBlock = props => {
330
446
  });
331
447
  case "headingFour":
332
448
  return /*#__PURE__*/_jsxs("h4", {
333
- ...attributes,
334
- ...element.attr,
335
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
449
+ ...commonHeadingProps(),
336
450
  placeholder: translation("Heading 4"),
337
451
  children: [children, /*#__PURE__*/_jsx("span", {
338
452
  contentEditable: false
@@ -340,9 +454,7 @@ export const getBlock = props => {
340
454
  });
341
455
  case "headingFive":
342
456
  return /*#__PURE__*/_jsxs("h5", {
343
- ...attributes,
344
- ...element.attr,
345
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
457
+ ...commonHeadingProps(),
346
458
  placeholder: translation("Heading 5"),
347
459
  children: [children, /*#__PURE__*/_jsx("span", {
348
460
  contentEditable: false
@@ -350,14 +462,30 @@ export const getBlock = props => {
350
462
  });
351
463
  case "headingSix":
352
464
  return /*#__PURE__*/_jsxs("h6", {
353
- ...attributes,
354
- ...element.attr,
355
- className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
465
+ ...commonHeadingProps(),
356
466
  placeholder: translation("Heading 6"),
357
467
  children: [children, /*#__PURE__*/_jsx("span", {
358
468
  contentEditable: false
359
469
  })]
360
470
  });
471
+ case "paragraphOne":
472
+ return /*#__PURE__*/_jsx("p", {
473
+ ...commonParaProps("para1"),
474
+ placeholder: "Paragraph 1",
475
+ children: children
476
+ });
477
+ case "paragraphTwo":
478
+ return /*#__PURE__*/_jsx("p", {
479
+ ...commonParaProps("para2"),
480
+ placeholder: "Paragraph 2",
481
+ children: children
482
+ });
483
+ case "paragraphThree":
484
+ return /*#__PURE__*/_jsx("p", {
485
+ ...commonParaProps("para3"),
486
+ placeholder: "Paragraph 3",
487
+ children: children
488
+ });
361
489
  case "blockquote":
362
490
  return /*#__PURE__*/_jsx("blockquote", {
363
491
  ...attributes,
@@ -371,7 +499,7 @@ export const getBlock = props => {
371
499
  margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
372
500
  width: element?.bgColor ? "calc(100% - 16px)" : "100%",
373
501
  borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
374
- lineHeight: 1.43
502
+ lineHeight: `${selectedLineHeight} !important`
375
503
  },
376
504
  children: children
377
505
  });
@@ -425,15 +553,13 @@ export const getBlock = props => {
425
553
  className: `content-editable ${isEmpty ? "empty" : ""}`,
426
554
  placeholder: translation("List"),
427
555
  style: {
428
- color: firstChildren?.color
556
+ color: firstChildren?.color,
557
+ lineHeight: `${selectedLineHeight}`
429
558
  },
430
559
  children: children
431
560
  });
432
561
  case "orderedList":
433
562
  return /*#__PURE__*/_jsx("ol", {
434
- style: {
435
- lineHeight: 1.43
436
- },
437
563
  className: "listItemMargin",
438
564
  type: "1",
439
565
  ...attributes,
@@ -441,9 +567,6 @@ export const getBlock = props => {
441
567
  });
442
568
  case "unorderedList":
443
569
  return /*#__PURE__*/_jsx("ul", {
444
- style: {
445
- lineHeight: 1.43
446
- },
447
570
  className: "listItemMargin",
448
571
  ...attributes,
449
572
  children: children
@@ -451,6 +574,7 @@ export const getBlock = props => {
451
574
  case "check-list-item":
452
575
  return /*#__PURE__*/_jsx(CheckList, {
453
576
  ...props,
577
+ selectedLineHeight: selectedLineHeight,
454
578
  isEmpty: isEmpty
455
579
  });
456
580
  case "link":
@@ -670,8 +794,10 @@ export const getQueryStrings = urlString => {
670
794
  const newUrl = new URL(urlString);
671
795
  var youCode = newUrl.searchParams.get("v");
672
796
  if (!youCode) {
673
- youCode = newUrl.pathname.replace("/", "");
797
+ const parts = newUrl.pathname.split("/");
798
+ youCode = parts[parts.length - 1]; // video ID
674
799
  }
800
+
675
801
  return `https://www.youtube.com/embed/${youCode}`;
676
802
  } else {
677
803
  return urlString;
@@ -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, {