@flozy/editor 10.4.0 → 10.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -81
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -0,0 +1,58 @@
|
|
1
|
+
export function extractTextWithPath(data, path = []) {
|
2
|
+
let result = [];
|
3
|
+
data.forEach((item, index) => {
|
4
|
+
const currentPath = [...path, index];
|
5
|
+
if (item.text) {
|
6
|
+
result.push({
|
7
|
+
path_id: currentPath.join(","),
|
8
|
+
text: item.text
|
9
|
+
});
|
10
|
+
}
|
11
|
+
if (item.children) {
|
12
|
+
result = result.concat(extractTextWithPath(item.children, currentPath));
|
13
|
+
}
|
14
|
+
});
|
15
|
+
return result;
|
16
|
+
}
|
17
|
+
export function replaceTextPath(nestedJson, pathIdJson) {
|
18
|
+
// Create a map from path_id JSON for quick lookup
|
19
|
+
const pathIdMap = new Map(pathIdJson.map(item => [item.path_id, item.text]));
|
20
|
+
console.log(pathIdMap);
|
21
|
+
function extractTextWithPath(data, path = []) {
|
22
|
+
data.forEach((item, index) => {
|
23
|
+
const currentPath = [...path, index];
|
24
|
+
if (item.text) {
|
25
|
+
if (pathIdMap.has(currentPath?.join(","))) {
|
26
|
+
item.text = pathIdMap.get(currentPath?.join(","));
|
27
|
+
}
|
28
|
+
}
|
29
|
+
if (item.children) {
|
30
|
+
extractTextWithPath(item.children, currentPath);
|
31
|
+
}
|
32
|
+
});
|
33
|
+
}
|
34
|
+
extractTextWithPath(nestedJson, []);
|
35
|
+
return nestedJson;
|
36
|
+
}
|
37
|
+
|
38
|
+
// export function replaceTextPath(nestedJson, pathIdJson) {
|
39
|
+
// // Create a map from path_id JSON for quick lookup
|
40
|
+
// const pathIdMap = new Map(
|
41
|
+
// pathIdJson.map((item) => [item.path_id, item.text])
|
42
|
+
// );
|
43
|
+
|
44
|
+
// function traverseAndReplace(node) {
|
45
|
+
// if (Array.isArray(node)) {
|
46
|
+
// node.forEach(traverseAndReplace);
|
47
|
+
// } else if (typeof node === "object" && node !== null) {
|
48
|
+
// console.log(node);
|
49
|
+
// if (node.text && pathIdMap.has(node.text)) {
|
50
|
+
// node.text = pathIdMap.get(node.path_id);
|
51
|
+
// }
|
52
|
+
// Object.values(node).forEach(traverseAndReplace);
|
53
|
+
// }
|
54
|
+
// }
|
55
|
+
|
56
|
+
// traverseAndReplace(nestedJson);
|
57
|
+
// return nestedJson;
|
58
|
+
// }
|
@@ -1,4 +1,6 @@
|
|
1
|
+
import { ReactEditor } from "slate-react";
|
1
2
|
import { sizeMap } from "../utils/font";
|
3
|
+
import { Editor, Node } from "slate";
|
2
4
|
export const breakpoints = {
|
3
5
|
small: 0,
|
4
6
|
mobile: 600,
|
@@ -33,7 +35,7 @@ const overrideValues = (value, ot) => {
|
|
33
35
|
return Object.keys(value).reduce((a, b) => {
|
34
36
|
return {
|
35
37
|
...a,
|
36
|
-
[b]: overrides[ot] ? overrides[ot](value[b]) : value
|
38
|
+
[b]: overrides[ot] ? overrides[ot](value[b], value) : value
|
37
39
|
};
|
38
40
|
}, {});
|
39
41
|
};
|
@@ -50,7 +52,15 @@ const overrides = {
|
|
50
52
|
overrideReSizeH: val => {
|
51
53
|
return val ? `${val?.height}px` : "auto";
|
52
54
|
},
|
53
|
-
overrideBorderRadius: val => {
|
55
|
+
overrideBorderRadius: (val, breakpointValues) => {
|
56
|
+
if (!val?.topLeft) {
|
57
|
+
Object.values(breakpointValues || {}).forEach(v => {
|
58
|
+
if (v) {
|
59
|
+
// Applying the values from breakpoints that exist to those that do not have
|
60
|
+
val = v;
|
61
|
+
}
|
62
|
+
});
|
63
|
+
}
|
54
64
|
return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
|
55
65
|
}
|
56
66
|
};
|
@@ -118,6 +128,197 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
|
|
118
128
|
console.log(err);
|
119
129
|
}
|
120
130
|
};
|
131
|
+
export function getElementStyle(editor, element, stylePropertyName) {
|
132
|
+
try {
|
133
|
+
const path = ReactEditor.findPath(editor, element);
|
134
|
+
if (path?.length) {
|
135
|
+
const currentEle = Node.get(editor, path);
|
136
|
+
const dom = ReactEditor.toDOMNode(editor, currentEle);
|
137
|
+
const editorBtn = dom?.querySelector(".button.theme-element");
|
138
|
+
return getElementProperty(editorBtn, stylePropertyName);
|
139
|
+
}
|
140
|
+
} catch (err) {
|
141
|
+
// console.log(err);
|
142
|
+
}
|
143
|
+
}
|
144
|
+
export function getTextSizeVal(editor) {
|
145
|
+
try {
|
146
|
+
const currentNode = Node.get(editor, editor.selection.anchor.path);
|
147
|
+
const currentElement = ReactEditor.toDOMNode(editor, currentNode);
|
148
|
+
if (currentElement) {
|
149
|
+
const element = currentElement.querySelector('span[data-slate-string="true"]');
|
150
|
+
const fontSize = getElementProperty(element, "font-size");
|
151
|
+
return fontSize || 16;
|
152
|
+
}
|
153
|
+
} catch (err) {
|
154
|
+
// console.log(err);
|
155
|
+
}
|
156
|
+
}
|
157
|
+
export function getVariableValue(val) {
|
158
|
+
const bodyElement = document.body;
|
159
|
+
const computedStyle = getComputedStyle(bodyElement);
|
160
|
+
const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
|
161
|
+
const varValue = computedStyle.getPropertyValue(variableName).trim();
|
162
|
+
return varValue;
|
163
|
+
}
|
164
|
+
const MAP_PROPERTY_KEYS = {
|
165
|
+
fontFamily: "font-family",
|
166
|
+
fontSize: "font-size",
|
167
|
+
textSize: "font-size",
|
168
|
+
fontWeight: "font-weight",
|
169
|
+
color: "color",
|
170
|
+
bgColor: "background-color"
|
171
|
+
};
|
172
|
+
export function getElementProperty(element, styleProperty) {
|
173
|
+
if (!element) {
|
174
|
+
return "";
|
175
|
+
}
|
176
|
+
const computedStyle = window.getComputedStyle(element);
|
177
|
+
const property = MAP_PROPERTY_KEYS[styleProperty] || styleProperty;
|
178
|
+
let style = computedStyle.getPropertyValue(property);
|
179
|
+
if (property === "font-family") {
|
180
|
+
style = style.replace(/"/g, ""); // remove double quotes if exists e.g: '"Courier New"'
|
181
|
+
}
|
182
|
+
|
183
|
+
return style || "";
|
184
|
+
}
|
185
|
+
export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic", "fontWeight"
|
186
|
+
// "underline",
|
187
|
+
// "strikethrough",
|
188
|
+
];
|
189
|
+
|
190
|
+
const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
|
191
|
+
export const isTextCustomized = editor => {
|
192
|
+
try {
|
193
|
+
if (editor.selection) {
|
194
|
+
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
195
|
+
if (!currentElement) {
|
196
|
+
return false;
|
197
|
+
}
|
198
|
+
const {
|
199
|
+
children,
|
200
|
+
type
|
201
|
+
} = currentElement;
|
202
|
+
if (!themeElements.includes(type)) {
|
203
|
+
return false;
|
204
|
+
}
|
205
|
+
if (!children?.length) {
|
206
|
+
return true;
|
207
|
+
}
|
208
|
+
const customized = textThemeFields.some(field => {
|
209
|
+
const element = children.find(child => child.text.trim() !== "") || {};
|
210
|
+
const value = element[field];
|
211
|
+
if (field === "fontSize") {
|
212
|
+
return Object.keys(value || {}).length;
|
213
|
+
} else {
|
214
|
+
return value;
|
215
|
+
}
|
216
|
+
});
|
217
|
+
return customized;
|
218
|
+
} else {
|
219
|
+
return null;
|
220
|
+
}
|
221
|
+
} catch (err) {
|
222
|
+
return null;
|
223
|
+
}
|
224
|
+
};
|
225
|
+
const addToTheme = (field, value, element) => {
|
226
|
+
switch (field) {
|
227
|
+
case "fontFamily":
|
228
|
+
return {
|
229
|
+
fontFamily: value
|
230
|
+
};
|
231
|
+
case "fontSize":
|
232
|
+
return {
|
233
|
+
fontSize: value?.lg
|
234
|
+
};
|
235
|
+
case "color":
|
236
|
+
return {
|
237
|
+
color: value
|
238
|
+
};
|
239
|
+
case "bold":
|
240
|
+
return {
|
241
|
+
fontWeight: "bold"
|
242
|
+
};
|
243
|
+
case "italic":
|
244
|
+
return {
|
245
|
+
fontStyle: "italic"
|
246
|
+
};
|
247
|
+
// case "underline":
|
248
|
+
// case "strikethrough":
|
249
|
+
// let textDecoration = "";
|
250
|
+
|
251
|
+
// if (element.underline) {
|
252
|
+
// textDecoration = "underline";
|
253
|
+
// }
|
254
|
+
|
255
|
+
// if (element.strikethrough) {
|
256
|
+
// textDecoration += " strikethrough";
|
257
|
+
// }
|
258
|
+
|
259
|
+
// return { textDecoration };
|
260
|
+
default:
|
261
|
+
return {};
|
262
|
+
}
|
263
|
+
};
|
264
|
+
const MAP_TEXT_THEME_FIELD = {
|
265
|
+
headingOne: "h1",
|
266
|
+
headingTwo: "h2",
|
267
|
+
headingThree: "h3",
|
268
|
+
headingFour: "h4",
|
269
|
+
headingFive: "h5",
|
270
|
+
headingSix: "h6",
|
271
|
+
paragraphOne: "para1",
|
272
|
+
paragraphTwo: "para2",
|
273
|
+
paragraphThree: "para3"
|
274
|
+
};
|
275
|
+
export const saveToTheme = editor => {
|
276
|
+
try {
|
277
|
+
if (editor.selection) {
|
278
|
+
const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
|
279
|
+
if (!currentElement) {
|
280
|
+
return false;
|
281
|
+
}
|
282
|
+
const {
|
283
|
+
children
|
284
|
+
} = currentElement;
|
285
|
+
if (!children?.length) {
|
286
|
+
return true;
|
287
|
+
}
|
288
|
+
let theme = {};
|
289
|
+
textThemeFields.forEach(field => {
|
290
|
+
const element = children.find(child => child.text.trim() !== "") || {};
|
291
|
+
const value = element[field];
|
292
|
+
let style = {};
|
293
|
+
let isValueExist = false;
|
294
|
+
if (value) {
|
295
|
+
isValueExist = true;
|
296
|
+
if (field === "fontSize") {
|
297
|
+
isValueExist = !!Object.keys(value).length;
|
298
|
+
}
|
299
|
+
}
|
300
|
+
if (isValueExist) {
|
301
|
+
style = addToTheme(field, value, element);
|
302
|
+
}
|
303
|
+
theme = {
|
304
|
+
...theme,
|
305
|
+
...style
|
306
|
+
};
|
307
|
+
});
|
308
|
+
textThemeFields.forEach(field => {
|
309
|
+
Editor.removeMark(editor, field);
|
310
|
+
});
|
311
|
+
return {
|
312
|
+
field: MAP_TEXT_THEME_FIELD[currentElement?.type],
|
313
|
+
theme
|
314
|
+
};
|
315
|
+
}
|
316
|
+
} catch (err) {
|
317
|
+
return;
|
318
|
+
}
|
319
|
+
};
|
320
|
+
export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
321
|
+
export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
|
121
322
|
export const getBRValue = (props, rbr = "lg") => {
|
122
323
|
const {
|
123
324
|
value,
|
@@ -0,0 +1,153 @@
|
|
1
|
+
import { useSlate } from "slate-react";
|
2
|
+
import { defaultTheme } from "../theme";
|
3
|
+
import { getPageSettings, updatePageSettings } from "../utils/pageSettings";
|
4
|
+
import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../helper/theme";
|
5
|
+
import { useEditorContext } from "./useMouseMove";
|
6
|
+
const MAP_FIELDS = {
|
7
|
+
HEADING: HEADING_THEME_FIELDS,
|
8
|
+
PARAGRAPH: PARAGRAPH_THEME_FIELDS
|
9
|
+
};
|
10
|
+
const MAP_FONT_FIELD_KEYS = {
|
11
|
+
HEADING: "headingFontFamily",
|
12
|
+
PARAGRAPH: "paragraphFontFamily"
|
13
|
+
};
|
14
|
+
function getUpdatePayload(prevTheme = {}, update, actionData) {
|
15
|
+
const {
|
16
|
+
action,
|
17
|
+
fieldName
|
18
|
+
} = actionData || {};
|
19
|
+
const {
|
20
|
+
theme: prev
|
21
|
+
} = prevTheme;
|
22
|
+
let theme = {};
|
23
|
+
let themeProps = {};
|
24
|
+
switch (action) {
|
25
|
+
case "THEME_CHANGE":
|
26
|
+
theme = update;
|
27
|
+
break;
|
28
|
+
case "CSS_VAR_CHANGE":
|
29
|
+
const prevCssVars = prev?.cssVars || {};
|
30
|
+
const prevValue = prevCssVars[fieldName] || {};
|
31
|
+
themeProps = {
|
32
|
+
...(prev || {}),
|
33
|
+
cssVars: {
|
34
|
+
...prevCssVars,
|
35
|
+
[fieldName]: {
|
36
|
+
...prevValue,
|
37
|
+
...update
|
38
|
+
}
|
39
|
+
}
|
40
|
+
};
|
41
|
+
theme = {
|
42
|
+
...prevTheme,
|
43
|
+
theme: themeProps
|
44
|
+
};
|
45
|
+
break;
|
46
|
+
case "ELEMENT_PROPS_CHANGE":
|
47
|
+
const prevEleProps = prev?.elementProps || {};
|
48
|
+
const prevEleValue = prevEleProps[fieldName] || {};
|
49
|
+
themeProps = {
|
50
|
+
...(prev || {}),
|
51
|
+
elementProps: {
|
52
|
+
...prevEleProps,
|
53
|
+
[fieldName]: {
|
54
|
+
...prevEleValue,
|
55
|
+
...update
|
56
|
+
}
|
57
|
+
}
|
58
|
+
};
|
59
|
+
theme = {
|
60
|
+
...prevTheme,
|
61
|
+
theme: themeProps
|
62
|
+
};
|
63
|
+
break;
|
64
|
+
case "OTHER_PROPS_CHANGE":
|
65
|
+
themeProps = {
|
66
|
+
...(prev || {}),
|
67
|
+
otherProps: {
|
68
|
+
...(prev.otherProps || {}),
|
69
|
+
...update
|
70
|
+
}
|
71
|
+
};
|
72
|
+
theme = {
|
73
|
+
...prevTheme,
|
74
|
+
theme: themeProps
|
75
|
+
};
|
76
|
+
break;
|
77
|
+
case "FONT_CHANGE":
|
78
|
+
const {
|
79
|
+
elementProps = {},
|
80
|
+
otherProps = {}
|
81
|
+
} = prev;
|
82
|
+
const {
|
83
|
+
fieldType
|
84
|
+
} = actionData || {};
|
85
|
+
const fields = MAP_FIELDS[fieldType];
|
86
|
+
const fontFieldsUpdate = {};
|
87
|
+
fields?.forEach(field => {
|
88
|
+
const prevFieldData = elementProps[field];
|
89
|
+
fontFieldsUpdate[field] = {
|
90
|
+
...prevFieldData,
|
91
|
+
...update
|
92
|
+
};
|
93
|
+
});
|
94
|
+
const FONT_KEY_FOR_FIELD = MAP_FONT_FIELD_KEYS[fieldType];
|
95
|
+
themeProps = {
|
96
|
+
...(prev || {}),
|
97
|
+
elementProps: {
|
98
|
+
...elementProps,
|
99
|
+
...fontFieldsUpdate
|
100
|
+
},
|
101
|
+
otherProps: {
|
102
|
+
...otherProps,
|
103
|
+
[FONT_KEY_FOR_FIELD]: update?.fontFamily
|
104
|
+
}
|
105
|
+
};
|
106
|
+
theme = {
|
107
|
+
...prevTheme,
|
108
|
+
theme: themeProps
|
109
|
+
};
|
110
|
+
break;
|
111
|
+
default:
|
112
|
+
theme = {
|
113
|
+
...prevTheme,
|
114
|
+
...(update || {})
|
115
|
+
};
|
116
|
+
break;
|
117
|
+
}
|
118
|
+
return theme;
|
119
|
+
}
|
120
|
+
const updateTheme = (editor, pageSt, update, actionData, triggerRender) => {
|
121
|
+
const {
|
122
|
+
pageProps
|
123
|
+
} = pageSt || {};
|
124
|
+
const {
|
125
|
+
theme
|
126
|
+
} = pageProps || {};
|
127
|
+
const updatedTheme = getUpdatePayload(theme, update, actionData);
|
128
|
+
updatePageSettings(editor, {
|
129
|
+
...(pageProps || {}),
|
130
|
+
theme: updatedTheme
|
131
|
+
});
|
132
|
+
triggerRender();
|
133
|
+
};
|
134
|
+
export const useEditorTheme = () => {
|
135
|
+
const editor = useSlate();
|
136
|
+
const {
|
137
|
+
triggerRender
|
138
|
+
} = useEditorContext();
|
139
|
+
const {
|
140
|
+
element: pageSt
|
141
|
+
} = getPageSettings(editor) || {};
|
142
|
+
const {
|
143
|
+
pageProps
|
144
|
+
} = pageSt || {};
|
145
|
+
const {
|
146
|
+
theme
|
147
|
+
} = pageProps || {};
|
148
|
+
return {
|
149
|
+
selectedTheme: theme?.theme || defaultTheme?.theme,
|
150
|
+
updateTheme: (update, actionData) => updateTheme(editor, pageSt, update, actionData, triggerRender),
|
151
|
+
theme
|
152
|
+
};
|
153
|
+
};
|
@@ -21,7 +21,10 @@ export const useEditorSelection = editor => {
|
|
21
21
|
export const EditorProvider = ({
|
22
22
|
editor,
|
23
23
|
theme,
|
24
|
-
children
|
24
|
+
children,
|
25
|
+
openTheme = false,
|
26
|
+
setOpenTheme = () => {},
|
27
|
+
triggerRender
|
25
28
|
}) => {
|
26
29
|
const [previous, setPrevious] = useState("");
|
27
30
|
const [drop, setDrop] = useState(0);
|
@@ -36,7 +39,6 @@ export const EditorProvider = ({
|
|
36
39
|
path: null
|
37
40
|
});
|
38
41
|
const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
|
39
|
-
const [activeBreakPoint, setActiveBreakPoint] = useState("");
|
40
42
|
useEffect(() => {
|
41
43
|
window.updateSelectedItem = d => {
|
42
44
|
setSelectedElement(d);
|
@@ -100,9 +102,10 @@ export const EditorProvider = ({
|
|
100
102
|
updateDragging,
|
101
103
|
fontFamilies,
|
102
104
|
setFontFamilies,
|
103
|
-
|
104
|
-
|
105
|
-
|
105
|
+
openTheme,
|
106
|
+
setOpenTheme,
|
107
|
+
triggerRender
|
108
|
+
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme]);
|
106
109
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
107
110
|
value: otherValues,
|
108
111
|
children: children
|
@@ -190,16 +190,17 @@ export const TableProvider = ({
|
|
190
190
|
// selectFirstCell(tablePath, editor, updateTableSelection);
|
191
191
|
// }, []);
|
192
192
|
|
193
|
+
const onClickAway = () => {
|
194
|
+
setTableSelection(getDefaultTableSelection());
|
195
|
+
setHoverPath(null);
|
196
|
+
};
|
193
197
|
return /*#__PURE__*/_jsx(TableContext.Provider, {
|
194
198
|
value: values,
|
195
199
|
children: /*#__PURE__*/_jsxs(DndContext, {
|
196
200
|
sensors: sensors,
|
197
201
|
onDragEnd: data => handleDragEnd(data, editor, resetAll),
|
198
202
|
children: [/*#__PURE__*/_jsx(ClickAwayListener, {
|
199
|
-
onClickAway:
|
200
|
-
setTableSelection(getDefaultTableSelection());
|
201
|
-
setHoverPath(null);
|
202
|
-
},
|
203
|
+
onClickAway: onClickAway,
|
203
204
|
children: /*#__PURE__*/_jsx("div", {
|
204
205
|
children: children
|
205
206
|
})
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import { useEffect, useState } from "react";
|
2
|
+
import { getElementProperty } from "../helper/theme";
|
3
|
+
import { ReactEditor } from "slate-react";
|
4
|
+
import { Node } from "slate";
|
5
|
+
import { useEditorTheme } from "./useEditorTheme";
|
6
|
+
function useThemeValues() {
|
7
|
+
return {};
|
8
|
+
}
|
9
|
+
export default useThemeValues;
|
10
|
+
export function useButtonStyle(value, key, element) {
|
11
|
+
const [buttonStyle, setButtonStyle] = useState(value);
|
12
|
+
const {
|
13
|
+
selectedTheme
|
14
|
+
} = useEditorTheme();
|
15
|
+
const themeBtnProps = selectedTheme?.elementProps?.button || {};
|
16
|
+
useEffect(() => {
|
17
|
+
const color = getColorValue(value, key, element, themeBtnProps);
|
18
|
+
setButtonStyle({
|
19
|
+
color
|
20
|
+
});
|
21
|
+
}, [value, key, element]);
|
22
|
+
return {
|
23
|
+
buttonStyle
|
24
|
+
};
|
25
|
+
}
|
26
|
+
const DEFAULT_MAP_THEMES = {
|
27
|
+
textColor: "color",
|
28
|
+
bgColor: "backgroundColor"
|
29
|
+
};
|
30
|
+
const hoverMap = (theme, format) => {
|
31
|
+
const hover = theme?.hover || {};
|
32
|
+
const key = DEFAULT_MAP_THEMES[format];
|
33
|
+
return hover[key];
|
34
|
+
};
|
35
|
+
const MAP_THEME_KEYS = {
|
36
|
+
...DEFAULT_MAP_THEMES,
|
37
|
+
textColorHover: hoverMap,
|
38
|
+
bgColorHover: hoverMap
|
39
|
+
};
|
40
|
+
const getColorValue = (val, key, elementProps, themeBtnProps) => {
|
41
|
+
const themeKey = MAP_THEME_KEYS[key];
|
42
|
+
if (elementProps?.type === "button" && !val && themeKey) {
|
43
|
+
if (typeof themeKey === "string") {
|
44
|
+
return themeBtnProps[themeKey];
|
45
|
+
} else {
|
46
|
+
return themeKey(themeBtnProps, key);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
return val;
|
50
|
+
};
|
51
|
+
export function getButtonElementStyle(editor, element, stylePropertyName) {
|
52
|
+
try {
|
53
|
+
const path = ReactEditor.findPath(editor, element);
|
54
|
+
if (path?.length) {
|
55
|
+
const currentEle = Node.get(editor, path);
|
56
|
+
const dom = ReactEditor.toDOMNode(editor, currentEle);
|
57
|
+
const editorBtn = dom?.querySelector(".button.theme-element");
|
58
|
+
return getElementProperty(editorBtn, stylePropertyName);
|
59
|
+
}
|
60
|
+
} catch (err) {
|
61
|
+
// console.log(err);
|
62
|
+
}
|
63
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Transforms, Path, Node } from "slate";
|
2
|
-
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
|
2
|
+
const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
|
3
3
|
const BlockTypes = ["grid"];
|
4
4
|
const withEmbeds = editor => {
|
5
5
|
const {
|
@@ -30,6 +30,8 @@ const parseCopiedHTML = html => {
|
|
30
30
|
|
31
31
|
// claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
|
32
32
|
parsed.querySelectorAll("li").forEach(li => {
|
33
|
+
li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
|
34
|
+
|
33
35
|
// Check if the parent of <li> is not a <ul> or <ol>
|
34
36
|
if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
|
35
37
|
// Create a <ul> element
|
@@ -55,7 +57,7 @@ const loopChildren = (children = [], defaultInsert) => {
|
|
55
57
|
}
|
56
58
|
return defaultInsert;
|
57
59
|
};
|
58
|
-
const getCurrentElement = editor => {
|
60
|
+
export const getCurrentElement = editor => {
|
59
61
|
try {
|
60
62
|
if (editor.selection) {
|
61
63
|
return Node.parent(editor, editor?.selection?.anchor?.path);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Editor, Range, Point, Element, Transforms, Node } from "slate";
|
2
2
|
import { TableUtil, createTableCell } from "../utils/table";
|
3
|
-
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
|
3
|
+
const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
|
4
4
|
const withTable = editor => {
|
5
5
|
const {
|
6
6
|
deleteBackward,
|