@flozy/editor 10.3.0 → 10.3.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 (162) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +14 -128
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +7 -30
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +28 -30
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +7 -9
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Video.js +1 -1
  21. package/dist/Editor/Elements/Form/Form.js +3 -1
  22. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
  23. package/dist/Editor/Elements/Form/FormField.js +2 -3
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +30 -31
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
  28. package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
  29. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  30. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  31. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  32. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  33. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  34. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  35. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  36. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  37. package/dist/Editor/Elements/Table/Styles.js +0 -7
  38. package/dist/Editor/Elements/Table/Table.js +3 -3
  39. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  40. package/dist/Editor/Elements/Title/title.js +6 -6
  41. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  42. package/dist/Editor/MiniEditor.js +1 -2
  43. package/dist/Editor/Styles/EditorStyles.js +5 -5
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  46. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  48. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  53. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  54. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  55. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
  56. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  57. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  58. package/dist/Editor/common/ColorPickerButton.js +16 -41
  59. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  60. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  61. package/dist/Editor/common/Icon.js +0 -28
  62. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  63. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  64. package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
  65. package/dist/Editor/common/LinkSettings/index.js +26 -13
  66. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  67. package/dist/Editor/common/LinkSettings/style.js +244 -164
  68. package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
  69. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
  70. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  79. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  80. package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
  81. package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
  82. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
  83. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  84. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  85. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  86. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  87. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -321
  88. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  89. package/dist/Editor/common/RnD/index.js +11 -25
  90. package/dist/Editor/common/Select/index.js +7 -44
  91. package/dist/Editor/common/Select/styles.js +2 -30
  92. package/dist/Editor/common/Shorthands/elements.js +0 -54
  93. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  94. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  95. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  96. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  100. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  101. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  102. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  103. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  104. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  105. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  106. package/dist/Editor/common/Uploader.js +0 -16
  107. package/dist/Editor/common/iconListV2.js +0 -76
  108. package/dist/Editor/common/iconslist.js +0 -21
  109. package/dist/Editor/commonStyle.js +61 -116
  110. package/dist/Editor/helper/index.js +0 -4
  111. package/dist/Editor/helper/theme.js +2 -203
  112. package/dist/Editor/hooks/useMouseMove.js +3 -9
  113. package/dist/Editor/hooks/useTable.js +4 -5
  114. package/dist/Editor/plugins/withEmbeds.js +1 -1
  115. package/dist/Editor/plugins/withHTML.js +1 -3
  116. package/dist/Editor/plugins/withTable.js +1 -1
  117. package/dist/Editor/theme/ThemeList.js +173 -50
  118. package/dist/Editor/utils/SlateUtilityFunctions.js +36 -158
  119. package/dist/Editor/utils/accordion.js +4 -14
  120. package/dist/Editor/utils/button.js +17 -1
  121. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  122. package/dist/Editor/utils/draftToSlate.js +2 -3
  123. package/dist/Editor/utils/events.js +6 -50
  124. package/dist/Editor/utils/font.js +37 -40
  125. package/dist/Editor/utils/helper.js +30 -143
  126. package/dist/Editor/utils/insertAppHeader.js +1 -1
  127. package/dist/Editor/utils/signature.js +9 -2
  128. package/package.json +4 -4
  129. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  130. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  131. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  132. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  133. package/dist/Editor/common/Checkbox/index.js +0 -46
  134. package/dist/Editor/common/Checkbox/styles.js +0 -45
  135. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  136. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  137. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  138. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  139. package/dist/Editor/common/CustomSelect.js +0 -43
  140. package/dist/Editor/common/RadioGroup/index.js +0 -48
  141. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  142. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  144. package/dist/Editor/helper/textIndeces.js +0 -58
  145. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  146. package/dist/Editor/hooks/useThemeValues.js +0 -63
  147. package/dist/Editor/theme/index.js +0 -149
  148. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  149. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  150. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  151. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  152. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  153. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  154. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  155. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  156. package/dist/Editor/themeSettings/icons.js +0 -60
  157. package/dist/Editor/themeSettings/index.js +0 -380
  158. package/dist/Editor/themeSettings/style.js +0 -299
  159. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  160. package/dist/Editor/themeSettingsAI/index.js +0 -355
  161. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  162. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -190,17 +190,16 @@ export const TableProvider = ({
190
190
  // selectFirstCell(tablePath, editor, updateTableSelection);
191
191
  // }, []);
192
192
 
193
- const onClickAway = () => {
194
- setTableSelection(getDefaultTableSelection());
195
- setHoverPath(null);
196
- };
197
193
  return /*#__PURE__*/_jsx(TableContext.Provider, {
198
194
  value: values,
199
195
  children: /*#__PURE__*/_jsxs(DndContext, {
200
196
  sensors: sensors,
201
197
  onDragEnd: data => handleDragEnd(data, editor, resetAll),
202
198
  children: [/*#__PURE__*/_jsx(ClickAwayListener, {
203
- onClickAway: onClickAway,
199
+ onClickAway: () => {
200
+ setTableSelection(getDefaultTableSelection());
201
+ setHoverPath(null);
202
+ },
204
203
  children: /*#__PURE__*/_jsx("div", {
205
204
  children: children
206
205
  })
@@ -1,5 +1,5 @@
1
1
  import { Transforms, Path, Node } from "slate";
2
- const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
2
+ const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
3
3
  const BlockTypes = ["grid"];
4
4
  const withEmbeds = editor => {
5
5
  const {
@@ -30,8 +30,6 @@ const parseCopiedHTML = html => {
30
30
 
31
31
  // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
32
32
  parsed.querySelectorAll("li").forEach(li => {
33
- li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
34
-
35
33
  // Check if the parent of <li> is not a <ul> or <ol>
36
34
  if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
37
35
  // Create a <ul> element
@@ -57,7 +55,7 @@ const loopChildren = (children = [], defaultInsert) => {
57
55
  }
58
56
  return defaultInsert;
59
57
  };
60
- export const getCurrentElement = editor => {
58
+ const getCurrentElement = editor => {
61
59
  try {
62
60
  if (editor.selection) {
63
61
  return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -1,6 +1,6 @@
1
1
  import { Editor, Range, Point, Element, Transforms, Node } from "slate";
2
2
  import { TableUtil, createTableCell } from "../utils/table";
3
- const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
3
+ const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
4
4
  const withTable = editor => {
5
5
  const {
6
6
  deleteBackward,
@@ -1,58 +1,181 @@
1
- import { Box, MenuItem, Select } from "@mui/material";
2
- import { defaultTheme } from ".";
3
- import { useEditorTheme } from "../hooks/useEditorTheme";
4
- import { useEffect, useState } from "react";
1
+ import { MenuItem, Select, useTheme } from "@mui/material";
2
+ import { fontOptions } from "../utils/font";
3
+ import { toolbarGroups } from "../Toolbar/toolbarGroups";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
- function ThemeList({
8
- editor,
9
- services = () => {}
10
- }) {
11
- const [themes, setThemes] = useState([]);
12
- const [loading, setLoading] = useState(false);
13
- console.log("loading", loading);
14
- const getThemesList = async () => {
15
- setLoading(true);
16
- try {
17
- const result = await services("getThemes", {});
18
- setThemes(result?.data || []);
19
- } catch (err) {
20
- console.log(err);
21
- }
22
- setLoading(false);
23
- };
6
+ const themes = [{
7
+ label: "Theme 1",
8
+ colors: ["#c90c1f", "#ff5d05"]
9
+ }, {
10
+ label: "Theme 2",
11
+ colors: ["#4c0be3", "#43f7ee"]
12
+ }, {
13
+ label: "Theme 3",
14
+ colors: ["#22f20f", "#fff705"]
15
+ }];
16
+ const allTools = toolbarGroups.flat();
17
+ function ThemeList(props) {
24
18
  const {
25
- updateTheme
26
- } = useEditorTheme();
27
- useEffect(() => {
28
- getThemesList();
29
- }, []);
30
- const handleThemeChange = e => {
31
- const {
32
- value
33
- } = e.target;
34
- const selectedTheme = themes.find(t => t.id === value) || defaultTheme;
35
- updateTheme(selectedTheme, "THEME_CHANGE");
19
+ selectedTheme,
20
+ setSelectedTheme
21
+ } = props;
22
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
23
+ const fontStyles = [{
24
+ text: "Bold",
25
+ value: "bold",
26
+ styleField: "fontWeight"
27
+ }, {
28
+ text: "Italic",
29
+ value: "italic",
30
+ styleField: "fontStyle"
31
+ }
32
+ // {
33
+ // text: "Underline",
34
+ // value: "underline",
35
+ // styleField: "textDecoration",
36
+ // },
37
+ // {
38
+ // text: "Line through",
39
+ // value: "line-through",
40
+ // styleField: "textDecoration",
41
+ // },
42
+ ];
43
+
44
+ const theme = useTheme();
45
+ const colorVars = theme?.vars?.colors || {};
46
+ const handleTypographyTheme = (key, value, elementType) => {
47
+ setSelectedTheme(prev => {
48
+ const newValue = {
49
+ ...prev,
50
+ typography: {
51
+ ...(prev.typography || {}),
52
+ [elementType]: {
53
+ ...(prev?.typography?.[elementType] || {}),
54
+ [key]: value
55
+ }
56
+ }
57
+ };
58
+ if (!value) {
59
+ delete newValue?.typography?.[elementType]?.[key];
60
+ }
61
+ return newValue;
62
+ });
36
63
  };
37
- return /*#__PURE__*/_jsx(Box, {
38
- sx: {
39
- padding: "10px",
40
- background: "#efefef",
41
- borderRadius: "6px"
42
- },
43
- children: /*#__PURE__*/_jsxs(Select, {
44
- onChange: handleThemeChange,
45
- defaultValue: 0,
46
- children: [/*#__PURE__*/_jsx(MenuItem, {
47
- value: 0,
48
- children: "Default Theme"
49
- }), themes.map((theme, i) => {
50
- return /*#__PURE__*/_jsx(MenuItem, {
51
- value: theme?.id,
52
- children: theme?.name
53
- }, i);
64
+ return /*#__PURE__*/_jsxs("div", {
65
+ children: [themes.map((theme, i) => {
66
+ return /*#__PURE__*/_jsxs("button", {
67
+ style: {
68
+ margin: "10px"
69
+ },
70
+ onClick: () => setSelectedTheme(prev => ({
71
+ ...prev,
72
+ colors: theme.colors
73
+ })),
74
+ children: [theme.label, /*#__PURE__*/_jsx("div", {
75
+ children: theme.colors.map((c, j) => {
76
+ return /*#__PURE__*/_jsx("div", {
77
+ style: {
78
+ width: "20px",
79
+ height: "20px",
80
+ background: c,
81
+ margin: "10px"
82
+ }
83
+ }, j);
84
+ })
85
+ })]
86
+ }, i);
87
+ }), /*#__PURE__*/_jsxs("div", {
88
+ children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
89
+ // value={""}
90
+ , {
91
+ label: "Font Family",
92
+ onChange: e => {
93
+ handleTypographyTheme("fontFamily", e.target.value, "h1");
94
+ },
95
+ children: fontOptions.map((font, i) => {
96
+ const {
97
+ text,
98
+ value
99
+ } = font;
100
+ return /*#__PURE__*/_jsx(MenuItem, {
101
+ value: value,
102
+ children: text
103
+ }, i);
104
+ })
105
+ }), "Font Weight", /*#__PURE__*/_jsx(Select
106
+ // value={""}
107
+ , {
108
+ label: "Font Weight",
109
+ onChange: e => {
110
+ handleTypographyTheme("fontWeight", e.target.value, "h1");
111
+ },
112
+ children: fontWeight.options.map((option, i) => {
113
+ const {
114
+ text,
115
+ value
116
+ } = option;
117
+ return /*#__PURE__*/_jsx(MenuItem, {
118
+ value: value,
119
+ children: text
120
+ }, i);
121
+ })
122
+ }), /*#__PURE__*/_jsx("input", {
123
+ type: "number",
124
+ placeholder: "font size",
125
+ onChange: e => {
126
+ handleTypographyTheme("fontSize", e.target.value, "h1");
127
+ }
128
+ }), /*#__PURE__*/_jsxs("div", {
129
+ children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
130
+ return /*#__PURE__*/_jsx("button", {
131
+ style: {
132
+ width: "20px",
133
+ height: "20px",
134
+ background: colorVar,
135
+ margin: "10px",
136
+ outline: "none"
137
+ },
138
+ onClick: () => handleTypographyTheme("color", colorVar, "h1")
139
+ }, i);
140
+ }), "normal color", /*#__PURE__*/_jsx("button", {
141
+ style: {
142
+ width: "20px",
143
+ height: "20px",
144
+ background: "#ff00e1",
145
+ margin: "10px",
146
+ outline: "none"
147
+ },
148
+ onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
149
+ })]
150
+ }), /*#__PURE__*/_jsxs("div", {
151
+ children: ["Font styles", fontStyles.map((option, i) => {
152
+ const styles = selectedTheme?.typography?.h1 || {};
153
+ const {
154
+ text,
155
+ value,
156
+ styleField
157
+ } = option;
158
+ return /*#__PURE__*/_jsxs("button", {
159
+ onClick: () => {
160
+ handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
161
+ },
162
+ children: [text, " ", styles[styleField] === value]
163
+ }, i);
164
+ })]
165
+ }), /*#__PURE__*/_jsx("input", {
166
+ type: "number",
167
+ placeholder: "Margin text Spacing",
168
+ onChange: e => {
169
+ handleTypographyTheme("letterSpacing", e.target.value, "h1");
170
+ }
171
+ }), /*#__PURE__*/_jsx("input", {
172
+ type: "number",
173
+ placeholder: "Line spacing",
174
+ onChange: e => {
175
+ handleTypographyTheme("lineHeight", e.target.value, "h1");
176
+ }
54
177
  })]
55
- })
178
+ })]
56
179
  });
57
180
  }
58
181
  export default ThemeList;
@@ -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 { getBreakpointLineSpacing, getBreakPointsValue, getDevice, getElementProperty, textThemeFields } from "../helper/theme";
37
+ import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, groupByBreakpoint } from "../helper/theme";
38
38
  import Variables from "../Elements/Variables/Variable";
39
+ import insertNewLine from "./insertNewLine";
39
40
  import Divider from "../Elements/Divider/Divider";
40
41
  import { getBorderColor, getSlateDom } from "./helper";
41
42
  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,17 +56,7 @@ const LIST_FORMAT_TYPE = {
56
56
  orderedList: "list-item",
57
57
  unorderedList: "list-item"
58
58
  };
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"];
59
+ const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
70
60
  export const toggleBlock = (editor, format, selection = true, attr = {}) => {
71
61
  const isActive = isBlockActive(editor, format);
72
62
  const isList = list_types.includes(format);
@@ -99,9 +89,8 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
99
89
  if (!selection) {
100
90
  Transforms.insertText(editor, "");
101
91
  }
102
- const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
103
92
  Transforms.setNodes(editor, {
104
- type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
93
+ type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
105
94
  ...attr
106
95
  });
107
96
  if (isList && !isActive) {
@@ -110,12 +99,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
110
99
  children: []
111
100
  });
112
101
  }
113
-
114
- // if (NEWLINESAFTER.indexOf(format) > -1) {
115
- // insertNewLine(editor);
116
- // }
102
+ if (NEWLINESAFTER.indexOf(format) > -1) {
103
+ insertNewLine(editor);
104
+ }
117
105
  };
118
-
119
106
  export const addMarkData = (editor, data) => {
120
107
  try {
121
108
  Editor.addMark(editor, data.format, data.value);
@@ -124,14 +111,9 @@ export const addMarkData = (editor, data) => {
124
111
  }
125
112
  };
126
113
  export const toggleMark = (editor, format) => {
127
- const isActive = isMarkBtnActive(editor, format);
114
+ const isActive = isMarkActive(editor, format);
128
115
  if (isActive) {
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
- }
116
+ Editor.removeMark(editor, format);
135
117
  } else {
136
118
  Editor.addMark(editor, format, true);
137
119
  }
@@ -145,58 +127,6 @@ export const isMarkActive = (editor, format) => {
145
127
  return null;
146
128
  }
147
129
  };
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
- };
200
130
  export const isBlockActive = (editor, format) => {
201
131
  const [match] = Editor.nodes(editor, {
202
132
  match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -222,7 +152,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
222
152
  });
223
153
  }
224
154
  };
225
- export const activeMark = (editor, format, noDefaultValue) => {
155
+ export const activeMark = (editor, format) => {
226
156
  const defaultMarkData = {
227
157
  color: "#000000",
228
158
  bgColor: "#FFFFFF",
@@ -232,7 +162,7 @@ export const activeMark = (editor, format, noDefaultValue) => {
232
162
  };
233
163
  try {
234
164
  const marks = Editor.marks(editor);
235
- let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
165
+ let defaultValue = defaultMarkData[format];
236
166
  const {
237
167
  selection
238
168
  } = editor || {};
@@ -249,31 +179,6 @@ export const activeMark = (editor, format, noDefaultValue) => {
249
179
  return null;
250
180
  }
251
181
  };
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
- };
277
182
  export const getMarked = (leaf, children, theme) => {
278
183
  const className = leaf?.doublequote ? "doublequote" : "";
279
184
  const lineH = leaf?.lineHeight;
@@ -303,7 +208,6 @@ export const getMarked = (leaf, children, theme) => {
303
208
  children: children
304
209
  });
305
210
  }
306
- children = getThemeMarkedLeaf(leaf, children);
307
211
  if (leaf.strikethrough) {
308
212
  children = /*#__PURE__*/_jsx("span", {
309
213
  style: {
@@ -331,15 +235,6 @@ export const getMarked = (leaf, children, theme) => {
331
235
  if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || lineHeight || className) {
332
236
  const family = leaf?.fontFamily;
333
237
  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);
343
238
  children = /*#__PURE__*/_jsx("span", {
344
239
  style: {
345
240
  background: leaf.bgColor
@@ -348,13 +243,12 @@ export const getMarked = (leaf, children, theme) => {
348
243
  className: `${className} leaf-item`,
349
244
  component: "span",
350
245
  sx: {
351
- "& span": {
352
- // fontSize: fontSizesImportant,
353
- // ...groupByBreakpoint(fontSizesImportant, theme),
354
- background: leaf.bgColor,
355
- ...fontSizeWithBreakpoints
356
- },
357
- ...fontSizeWithBreakpoints,
246
+ ...groupByBreakpoint({
247
+ fontSize: {
248
+ lg: sizeMap[leaf.fontSize] || leaf.fontSize,
249
+ ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
250
+ }
251
+ }, theme),
358
252
  // ...wrapThemeBreakpoints(
359
253
  // {
360
254
  // lg: sizeMap[leaf.fontSize] || leaf.fontSize,
@@ -406,23 +300,15 @@ export const getBlock = props => {
406
300
  const {
407
301
  translation
408
302
  } = 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
303
  const breakpoint = getDevice(window.innerWidth);
420
304
  const lineH = element?.children[0]?.lineHeight;
421
305
  const selectedLineHeight = getBreakpointLineSpacing(lineH, breakpoint);
422
306
  switch (element.type) {
423
307
  case "headingOne":
424
308
  return /*#__PURE__*/_jsxs("h1", {
425
- ...commonHeadingProps(),
309
+ ...attributes,
310
+ ...element.attr,
311
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
426
312
  placeholder: translation("Heading 1"),
427
313
  children: [children, /*#__PURE__*/_jsx("span", {
428
314
  contentEditable: false
@@ -430,7 +316,9 @@ export const getBlock = props => {
430
316
  });
431
317
  case "headingTwo":
432
318
  return /*#__PURE__*/_jsxs("h2", {
433
- ...commonHeadingProps(),
319
+ ...attributes,
320
+ ...element.attr,
321
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
434
322
  placeholder: translation("Heading 2"),
435
323
  children: [children, /*#__PURE__*/_jsx("span", {
436
324
  contentEditable: false
@@ -438,7 +326,9 @@ export const getBlock = props => {
438
326
  });
439
327
  case "headingThree":
440
328
  return /*#__PURE__*/_jsxs("h3", {
441
- ...commonHeadingProps(),
329
+ ...attributes,
330
+ ...element.attr,
331
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
442
332
  placeholder: translation("Heading 3"),
443
333
  children: [children, /*#__PURE__*/_jsx("span", {
444
334
  contentEditable: false
@@ -446,7 +336,9 @@ export const getBlock = props => {
446
336
  });
447
337
  case "headingFour":
448
338
  return /*#__PURE__*/_jsxs("h4", {
449
- ...commonHeadingProps(),
339
+ ...attributes,
340
+ ...element.attr,
341
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
450
342
  placeholder: translation("Heading 4"),
451
343
  children: [children, /*#__PURE__*/_jsx("span", {
452
344
  contentEditable: false
@@ -454,7 +346,9 @@ export const getBlock = props => {
454
346
  });
455
347
  case "headingFive":
456
348
  return /*#__PURE__*/_jsxs("h5", {
457
- ...commonHeadingProps(),
349
+ ...attributes,
350
+ ...element.attr,
351
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
458
352
  placeholder: translation("Heading 5"),
459
353
  children: [children, /*#__PURE__*/_jsx("span", {
460
354
  contentEditable: false
@@ -462,30 +356,14 @@ export const getBlock = props => {
462
356
  });
463
357
  case "headingSix":
464
358
  return /*#__PURE__*/_jsxs("h6", {
465
- ...commonHeadingProps(),
359
+ ...attributes,
360
+ ...element.attr,
361
+ className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
466
362
  placeholder: translation("Heading 6"),
467
363
  children: [children, /*#__PURE__*/_jsx("span", {
468
364
  contentEditable: false
469
365
  })]
470
366
  });
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
- });
489
367
  case "blockquote":
490
368
  return /*#__PURE__*/_jsx("blockquote", {
491
369
  ...attributes,
@@ -1,13 +1,6 @@
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
- };
11
4
  export const insertAccordion = (editor, path) => {
12
5
  try {
13
6
  const selectedText = getSelectedText(editor);
@@ -43,14 +36,11 @@ export const insertAccordion = (editor, path) => {
43
36
  // get title index
44
37
  const summaryIndex = upPath.length - 3;
45
38
  upPath[summaryIndex] = upPath[summaryIndex] === 0 ? 0 : upPath[summaryIndex] - 1;
46
-
47
39
  // select accordion title by default
48
- if (isMobileWindow()) {
49
- // timeout to resolve focus issue in mobile
50
- setTimeout(() => focusAccordion(editor, upPath), 0);
51
- } else {
52
- focusAccordion(editor, upPath);
53
- }
40
+ Transforms.select(editor, {
41
+ path: upPath,
42
+ offset: 0
43
+ });
54
44
  insertNewLine(editor);
55
45
  } catch (err) {
56
46
  console.log(err);