@flozy/editor 5.4.8 → 5.4.9

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 (44) hide show
  1. package/dist/Editor/CommonEditor.js +8 -14
  2. package/dist/Editor/Editor.css +16 -18
  3. package/dist/Editor/Elements/Button/EditorButton.js +1 -3
  4. package/dist/Editor/Elements/Color Picker/Styles.js +1 -0
  5. package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +1 -1
  6. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +5 -1
  7. package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +1 -0
  8. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +1 -1
  9. package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +3 -3
  10. package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +19 -5
  11. package/dist/Editor/Elements/Form/Form.js +0 -1
  12. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -2
  13. package/dist/Editor/Elements/FreeGrid/styles.js +0 -1
  14. package/dist/Editor/Elements/List/CheckList.js +1 -2
  15. package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
  16. package/dist/Editor/Elements/SimpleText/index.js +3 -11
  17. package/dist/Editor/Elements/SimpleText/style.js +1 -5
  18. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -5
  19. package/dist/Editor/Toolbar/Mini/Styles.js +0 -5
  20. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +1 -10
  21. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
  22. package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
  23. package/dist/Editor/common/MentionsPopup/Styles.js +0 -1
  24. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
  25. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
  26. package/dist/Editor/common/RnD/Utils/gridDropItem.js +6 -9
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  30. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
  31. package/dist/Editor/common/Uploader.js +0 -8
  32. package/dist/Editor/commonStyle.js +8 -8
  33. package/dist/Editor/helper/deserialize/index.js +24 -66
  34. package/dist/Editor/helper/index.js +2 -2
  35. package/dist/Editor/helper/theme.js +1 -24
  36. package/dist/Editor/hooks/useMouseMove.js +2 -5
  37. package/dist/Editor/plugins/withHTML.js +5 -42
  38. package/dist/Editor/utils/SlateUtilityFunctions.js +1 -8
  39. package/dist/Editor/utils/button.js +4 -4
  40. package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +7 -51
  41. package/dist/Editor/utils/helper.js +16 -19
  42. package/dist/Editor/utils/pageSettings.js +2 -14
  43. package/package.json +1 -1
  44. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
@@ -1,6 +1,5 @@
1
1
  import { Transforms, Node, Path } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
- import { handleNegativeInteger } from "../../../utils/helper";
4
3
  export const ROW_HEIGHT = 50;
5
4
  const MARGIN_OF = {
6
5
  xs: 160,
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
76
75
  console.log(err);
77
76
  }
78
77
  };
79
- function isContainerElement(editor, moveTopath, props, appenBp) {
78
+ function isContainerElement(editor, moveTopath, props) {
80
79
  try {
81
80
  const {
82
81
  path,
@@ -92,7 +91,6 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
92
91
  parentNode = Node.get(editor, Path.parent(dragItemPath));
93
92
  }
94
93
  const moveToNode = Node.get(editor, moveTopath);
95
- const leftOfMoveToNode = moveToNode[`left${appenBp}`];
96
94
  if (moveToNode.type === "freegridBox") {
97
95
  if (parentNode.type === "freegridBox") {
98
96
  // same box
@@ -100,10 +98,10 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
100
98
  return props.calX;
101
99
  } else {
102
100
  // for different box
103
- return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
101
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
104
102
  }
105
103
  } else {
106
- return props.calX - leftOfMoveToNode;
104
+ return props.calX - moveToNode?.left;
107
105
  }
108
106
  } else if (moveToNode.type === "freegrid") {
109
107
  if (parentNode.type === "freegridBox") {
@@ -135,16 +133,14 @@ export function onDropItem(props, parentClass) {
135
133
  const from = parentPath.split("|").map(m => parseInt(m));
136
134
  let newPath = [];
137
135
  newPath = moveTo;
138
- const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
139
- const cCalx = isContainerElement(editor, moveTo, props, appenBp);
140
-
136
+ const cCalx = isContainerElement(editor, moveTo, props);
141
137
  // const posX = parseInt(
142
138
  // cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
143
139
  // );
144
140
  const toSectionNode = Node.get(editor, newPath);
145
141
  const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
146
142
  const rect = addToSectionDOM.getBoundingClientRect();
147
- const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
143
+ const y = endPosition.y - startPosition.diffY - rect.top;
148
144
 
149
145
  // Calculate grid position
150
146
  const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -154,6 +150,7 @@ export function onDropItem(props, parentClass) {
154
150
 
155
151
  // Update grid area
156
152
  const gridArea = `${row} / 1 / ${row + 1} / 2`;
153
+ const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
157
154
  Transforms.setNodes(editor, {
158
155
  [`gridArea${appenBp}`]: gridArea,
159
156
  [`left${appenBp}`]: cCalx,
@@ -73,11 +73,6 @@ const BackgroundImage = props => {
73
73
  children: "REMOVE"
74
74
  }) : /*#__PURE__*/_jsx(Grid, {
75
75
  className: "uploadImageText",
76
- sx: {
77
- padding: 0,
78
- background: `${theme?.palette?.editor?.inputFieldBgColor}`,
79
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
80
- },
81
76
  children: /*#__PURE__*/_jsxs(Button, {
82
77
  component: "label",
83
78
  variant: "text",
@@ -1,7 +1,6 @@
1
1
  import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
2
2
  import React from "react";
3
3
  import Icon from "../../Icon";
4
- import { useEditorContext } from "../../../hooks/useMouseMove";
5
4
  import { jsx as _jsx } from "react/jsx-runtime";
6
5
  import { Fragment as _Fragment } from "react/jsx-runtime";
7
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
16
15
  return /*#__PURE__*/_jsx(Card, {
17
16
  sx: {
18
17
  position: 'relative',
19
- padding: "10px",
20
- '& .MuiCheckbox-root svg': {
21
- fill: 'unset !important'
22
- }
18
+ padding: "10px"
23
19
  },
24
20
  children: /*#__PURE__*/_jsx(FormControlLabel, {
25
21
  control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
85
81
  selectedCard,
86
82
  infoIcon
87
83
  } = data;
88
- const {
89
- theme
90
- } = useEditorContext();
91
84
  const activeCard = value === selectedCard;
92
85
  const handleChange = e => {
93
86
  if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
106
99
  sx: {
107
100
  marginBottom: "12px",
108
101
  "& .MuiPaper-root": {
109
- background: theme?.palette?.editor?.miniToolBarBackground,
110
- border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
102
+ border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
111
103
  borderRadius: "8px",
112
104
  boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
113
105
  }
@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
18
18
  import SelectSwitch from "./selectSwitch";
19
19
  import CardsMapping from "./card";
20
20
  import MetaDataMapping from "./metaDataMapping";
21
- import LineSpacing from "./lineSpacing";
22
21
  const FieldMap = {
23
22
  text: Text,
24
23
  bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
39
38
  fontSize: FontSize,
40
39
  selectSwitch: SelectSwitch,
41
40
  card: CardsMapping,
42
- metadatamapping: MetaDataMapping,
43
- lineSpacing: LineSpacing
41
+ metadatamapping: MetaDataMapping
44
42
  };
45
43
  export default FieldMap;
@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
25
25
  label: "Padding",
26
26
  key: "bannerSpacing",
27
27
  type: "bannerSpacing"
28
- }, {
29
- label: "Line Spacing",
30
- key: "lineHeight",
31
- type: "lineSpacing"
32
28
  }]
33
29
  }, {
34
30
  tab: "Max Width",
@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
- import { useEditorContext } from "../hooks/useMouseMove";
8
7
  import { jsx as _jsx } from "react/jsx-runtime";
9
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
10
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,9 +18,6 @@ const Uploader = props => {
19
18
  const [base64, setBase64] = useState(value?.url);
20
19
  const [fileName, setFileName] = useState("");
21
20
  const [uploading, setUploading] = useState(false);
22
- const {
23
- theme
24
- } = useEditorContext();
25
21
  const handleChange = async e => {
26
22
  const uFile = e.target.files[0];
27
23
  const strImage = await convertBase64(uFile);
@@ -103,10 +99,6 @@ const Uploader = props => {
103
99
  className: "uploadImageSection",
104
100
  children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
105
101
  className: "uploadImageText",
106
- sx: {
107
- background: `${theme?.palette?.editor?.inputFieldBgColor}`,
108
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
109
- },
110
102
  children: /*#__PURE__*/_jsxs(Button, {
111
103
  component: "label",
112
104
  variant: "text",
@@ -205,7 +205,7 @@ const useCommonStyle = theme => ({
205
205
  colorPickerPopup: {
206
206
  "& .MuiPaper-root": {
207
207
  overflow: "auto",
208
- backgroundColor: theme?.palette?.editor?.background
208
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground
209
209
  },
210
210
  "& .popup_tabs": {
211
211
  backgroundColor: theme?.palette?.editor?.background,
@@ -221,7 +221,7 @@ const useCommonStyle = theme => ({
221
221
  }
222
222
  },
223
223
  "& .colorpicker": {
224
- backgroundColor: theme?.palette?.editor?.background,
224
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
225
225
  "& .default-color-panel": {
226
226
  display: "grid",
227
227
  gridTemplateColumns: "repeat(auto-fill, 20px)",
@@ -239,11 +239,11 @@ const useCommonStyle = theme => ({
239
239
  }
240
240
  },
241
241
  "& .color-picker-panel": {
242
- backgroundColor: theme?.palette?.editor?.background
242
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground
243
243
  },
244
244
  "& .input_rgba": {
245
245
  "& input": {
246
- backgroundColor: theme?.palette?.editor?.background,
246
+ backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
247
247
  color: theme?.palette?.editor?.textColor
248
248
  }
249
249
  }
@@ -464,6 +464,10 @@ const useCommonStyle = theme => ({
464
464
  }
465
465
  }
466
466
  },
467
+ pageSettingPopUpRoot: {
468
+ padding: "16px 8px 16px 10px!important",
469
+ height: "100%"
470
+ },
467
471
  buttonMoreOption: {
468
472
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
469
473
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -476,10 +480,6 @@ const useCommonStyle = theme => ({
476
480
  }
477
481
  }
478
482
  },
479
- pageSettingPopUpRoot: {
480
- padding: "16px 8px 16px 10px!important",
481
- height: "100%"
482
- },
483
483
  buttonMoreOption2: {
484
484
  background: `${theme?.palette?.editor?.aiInputBackground} !important`,
485
485
  border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -1,26 +1,4 @@
1
1
  import { jsx } from "slate-hyperscript";
2
- const inlineStyles = [{
3
- key: "bold",
4
- getStyle: styles => styles.fontWeight === "bold" || parseInt(styles.fontWeight, 10) >= 700
5
- }, {
6
- key: "italic",
7
- getStyle: styles => styles.fontStyle === "italic"
8
- }, {
9
- key: "underline",
10
- getStyle: styles => styles.textDecoration.includes("underline")
11
- }];
12
- function getInlineTextStyles(element) {
13
- if (!element || !element.style) return {};
14
- const styles = element.style;
15
- const elementStyles = inlineStyles.reduce((total, currVal) => {
16
- const style = currVal.getStyle(styles);
17
- if (style) {
18
- total[currVal.key] = style;
19
- }
20
- return total;
21
- }, {});
22
- return elementStyles;
23
- }
24
2
  const handleTableCell = (el, children) => {
25
3
  const wrapChild = children?.map(c => {
26
4
  if (typeof c === "string") {
@@ -42,24 +20,6 @@ const handleTableCell = (el, children) => {
42
20
  }
43
21
  };
44
22
  };
45
- const INLINE_TAGS = ["A", "ABBR", "B", "BDO", "CITE", "CODE", "DATA", "DEL", "DFN", "IMG", "INS", "KBD", "LABEL", "MARK", "Q", "SAMP", "SMALL", "SPAN", "SUB", "SUP", "TIME", "VAR"];
46
-
47
- // to avoid nested paragraph to resolve performace issue
48
- const paragraphType = el => {
49
- const {
50
- childNodes = []
51
- } = el || {};
52
-
53
- // if anyone of the child node is text node or wrapped with inline tags, it is considered to be an paragraph node
54
- const isHavingText = childNodes?.length ? Array.from(childNodes)?.some(child => {
55
- const isTextNode = child?.nodeType === 3;
56
- const isHavingInlineTags = TEXT_TAGS[child?.nodeName] || INLINE_TAGS.includes(child.nodeName);
57
- return isTextNode || isHavingInlineTags;
58
- }) : null;
59
- return isHavingText ? {
60
- type: "paragraph"
61
- } : {};
62
- };
63
23
  const ELEMENT_TAGS = {
64
24
  A: el => ({
65
25
  type: "link",
@@ -99,14 +59,24 @@ const ELEMENT_TAGS = {
99
59
  OL: () => ({
100
60
  type: "orderedList"
101
61
  }),
102
- P: paragraphType,
103
- DIV: paragraphType,
62
+ P: () => ({
63
+ type: "paragraph"
64
+ }),
65
+ DIV: () => ({
66
+ type: "paragraph"
67
+ }),
104
68
  PRE: () => ({
105
69
  type: "code"
106
70
  }),
107
- META: paragraphType,
108
- STYLE: paragraphType,
109
- "GOOGLE-SHEETS-HTML-ORIGIN": paragraphType,
71
+ META: () => ({
72
+ type: "paragraph"
73
+ }),
74
+ STYLE: () => ({
75
+ type: "paragraph"
76
+ }),
77
+ "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
78
+ type: "paragraph"
79
+ }),
110
80
  TABLE: (el, children = []) => {
111
81
  try {
112
82
  const bodyChild = children || [];
@@ -128,8 +98,12 @@ const ELEMENT_TAGS = {
128
98
  type: "table-row"
129
99
  }),
130
100
  TD: handleTableCell,
131
- COLGROUP: paragraphType,
132
- COL: paragraphType
101
+ COLGROUP: () => ({
102
+ type: "paragraph"
103
+ }),
104
+ COL: () => ({
105
+ type: "paragraph"
106
+ })
133
107
  };
134
108
 
135
109
  // COMPAT: `B` is omitted here because Google Docs uses `<b>` in weird ways.
@@ -155,18 +129,11 @@ const TEXT_TAGS = {
155
129
  U: () => ({
156
130
  underline: true
157
131
  })
158
- // B: () => ({ bold: true }),
159
132
  };
160
-
161
133
  const deserialize = el => {
162
134
  if (el.nodeType === 3) {
163
- // if there is any line-breaks
164
135
  const match = /\r|\n/.exec(el.textContent);
165
- const text = el.textContent.replace(/\r|\n/g, "").trim();
166
- return match && !text ? null : {
167
- text,
168
- ...getInlineTextStyles(el.parentNode)
169
- };
136
+ return match ? null : el.textContent;
170
137
  } else if (el.nodeType !== 1) {
171
138
  return null;
172
139
  } else if (el.nodeName === "BR") {
@@ -193,20 +160,11 @@ const deserialize = el => {
193
160
  overwriteChild,
194
161
  ...attrs
195
162
  } = ELEMENT_TAGS[nodeName](el, children);
196
- if (attrs?.type) {
197
- return jsx("element", attrs, overwriteChild || children);
198
- }
163
+ return jsx("element", attrs, overwriteChild || children);
199
164
  }
200
165
  if (TEXT_TAGS[nodeName]) {
201
166
  const attrs = TEXT_TAGS[nodeName](el);
202
- return children.map(child => {
203
- if (child?.type) {
204
- // if any list elements (like ul, ol... tags) is wrapped inside the TEXT_TAGS, we will return child as it is, else return it as text node
205
- return child;
206
- } else {
207
- return jsx("text", attrs, child);
208
- }
209
- });
167
+ return children.map(child => jsx("text", attrs, child));
210
168
  }
211
169
  return children;
212
170
  };
@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
337
337
  return false;
338
338
  }
339
339
  const [nodeEntry] = Editor.nodes(editor, {
340
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
340
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
341
341
  });
342
342
  if (!nodeEntry) {
343
343
  return false;
344
344
  }
345
345
  const [node] = nodeEntry;
346
346
  const carouselDom = ReactEditor.toDOMNode(editor, node);
347
- const isEdit = carouselDom.classList.contains("carousel_slider_edit");
347
+ const isEdit = carouselDom.classList.contains('carousel_slider_edit');
348
348
  return !isEdit;
349
349
  } catch (err) {
350
350
  console.log(err);
@@ -147,27 +147,4 @@ export const groupByBreakpoint = (styleProps, theme) => {
147
147
  }
148
148
  };
149
149
  };
150
- export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
151
- export const getBreakpointLineSpacing = (value, breakpoint) => {
152
- try {
153
- const values = getBreakPointsValue(value, breakpoint);
154
- const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
155
- if (values[b] || values["lg"]) {
156
- const value = values[b] || values["lg"];
157
- return {
158
- ...a,
159
- [b]: value
160
- };
161
- } else {
162
- return a;
163
- }
164
- }, {});
165
- if (breakpoint) {
166
- return value[breakpoint] || value["lg"] || value;
167
- } else {
168
- return cssVal["lg"];
169
- }
170
- } catch (err) {
171
- // console.log(err);
172
- }
173
- };
150
+ export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
@@ -35,7 +35,6 @@ export const EditorProvider = ({
35
35
  path: null
36
36
  });
37
37
  const [fontFamilies, setFontFamilies] = useState({});
38
- const [activeBreakPoint, setActiveBreakPoint] = useState("");
39
38
  useEffect(() => {
40
39
  window.updateSelectedItem = d => {
41
40
  setSelectedElement(d);
@@ -98,10 +97,8 @@ export const EditorProvider = ({
98
97
  setOpenAI,
99
98
  updateDragging,
100
99
  fontFamilies,
101
- setFontFamilies,
102
- activeBreakPoint,
103
- setActiveBreakPoint
104
- }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
100
+ setFontFamilies
101
+ }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
105
102
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
106
103
  value: otherValues,
107
104
  children: children
@@ -4,43 +4,6 @@ import { decodeAndParseBase64 } from "../utils/helper";
4
4
  const avoidDefaultInsert = ["table", "grid"];
5
5
  const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
6
6
  const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
7
- const parseCopiedHTML = html => {
8
- const parsed = new DOMParser().parseFromString(html, "text/html");
9
-
10
- // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
11
- parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
12
- // Find the parent li
13
- const parentLi = list.parentElement;
14
-
15
- // Move the list after the parent li
16
- parentLi.after(list);
17
- });
18
-
19
- // to handle google docs list
20
- parsed.querySelectorAll("li p, li div").forEach(element => {
21
- const parent = element.parentNode;
22
- // Move all child nodes of <p> or <div> to its parent <li>
23
- while (element.firstChild) {
24
- parent.insertBefore(element.firstChild, element);
25
- }
26
- // Remove the <p> or <div> element
27
- parent.removeChild(element);
28
- });
29
-
30
- // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
31
- parsed.querySelectorAll("li").forEach(li => {
32
- // Check if the parent of <li> is not a <ul> or <ol>
33
- if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
34
- // Create a <ul> element
35
- const ul = document.createElement("ul");
36
- // Append the <li> to the <ul>
37
- ul.appendChild(li.cloneNode(true)); // Clone the <li>
38
- // Replace the original <li> in the DOM with the <ul>
39
- li.replaceWith(ul);
40
- }
41
- });
42
- return parsed;
43
- };
44
7
  const loopChildren = (children = [], defaultInsert) => {
45
8
  if (!children?.length) {
46
9
  return defaultInsert;
@@ -65,7 +28,7 @@ const getCurrentElement = editor => {
65
28
  return null;
66
29
  }
67
30
  };
68
- export const getCurrentElementText = editor => {
31
+ const getCurrentElementText = editor => {
69
32
  try {
70
33
  if (editor.selection) {
71
34
  return Editor.string(editor, editor?.selection?.anchor?.path);
@@ -223,15 +186,15 @@ const withHtml = editor => {
223
186
  return;
224
187
  }
225
188
  const currentText = getCurrentElementText(editor);
226
- if (currentText?.trim() && !isTextNode) {
189
+ if (currentText && !isTextNode) {
227
190
  insertAtNextNode(editor, decoded);
228
191
  return;
229
192
  }
230
193
  insertData(data);
231
194
  }
232
195
  } else if (html) {
233
- const parsed = parseCopiedHTML(html);
234
- const rootElement = parsed.body;
196
+ const parsed = new DOMParser().parseFromString(html, "text/html");
197
+ const rootElement = parsed.body || parsed.documentElement;
235
198
  const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
236
199
  const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
237
200
  if (isGoogleSheet) {
@@ -267,7 +230,7 @@ const withHtml = editor => {
267
230
  return;
268
231
  }
269
232
  const currentText = getCurrentElementText(editor);
270
- if (currentText?.trim() && isNonText) {
233
+ if (currentText && isNonText) {
271
234
  insertAtNextNode(editor, formattedFragment);
272
235
  return;
273
236
  }
@@ -314,8 +314,7 @@ export const getBlock = props => {
314
314
  borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
315
315
  margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
316
316
  width: element?.bgColor ? "calc(100% - 16px)" : "100%",
317
- borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
318
- lineHeight: 1.43
317
+ borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
319
318
  },
320
319
  children: children
321
320
  });
@@ -375,9 +374,6 @@ export const getBlock = props => {
375
374
  });
376
375
  case "orderedList":
377
376
  return /*#__PURE__*/_jsx("ol", {
378
- style: {
379
- lineHeight: 1.43
380
- },
381
377
  className: "listItemMargin",
382
378
  type: "1",
383
379
  ...attributes,
@@ -385,9 +381,6 @@ export const getBlock = props => {
385
381
  });
386
382
  case "unorderedList":
387
383
  return /*#__PURE__*/_jsx("ul", {
388
- style: {
389
- lineHeight: 1.43
390
- },
391
384
  className: "listItemMargin",
392
385
  ...attributes,
393
386
  children: children
@@ -20,10 +20,10 @@ export const insertButton = editor => {
20
20
  bottomRight: 30
21
21
  },
22
22
  bannerSpacing: {
23
- left: 24,
24
- top: 10,
25
- right: 24,
26
- bottom: 10
23
+ left: 16,
24
+ top: 8,
25
+ right: 16,
26
+ bottom: 8
27
27
  },
28
28
  ...(windowVar.lastButtonProps || {})
29
29
  };
@@ -237,30 +237,24 @@ export const getBlock = props => {
237
237
  return /*#__PURE__*/_jsx("p", {
238
238
  ...attributes,
239
239
  ...element.attr,
240
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`
240
+ className: `content-editable ${isEmpty ? "empty" : ""}`
241
241
  // placeholder="paragraph"
242
242
  ,
243
243
  children: children
244
244
  });
245
245
  case "headingOne":
246
- return /*#__PURE__*/_jsx("h3", {
246
+ return /*#__PURE__*/_jsx("h1", {
247
247
  ...attributes,
248
248
  ...element.attr,
249
- style: {
250
- margin: "10px 0px"
251
- },
252
249
  className: `content-editable ${isEmpty ? "empty" : ""}`
253
250
  // placeholder="Heading 1"
254
251
  ,
255
252
  children: children
256
253
  });
257
254
  case "headingTwo":
258
- return /*#__PURE__*/_jsx("h3", {
255
+ return /*#__PURE__*/_jsx("h2", {
259
256
  ...attributes,
260
257
  ...element.attr,
261
- style: {
262
- margin: "10px 0px"
263
- },
264
258
  className: `content-editable ${isEmpty ? "empty" : ""}`
265
259
  // placeholder="Heading 2"
266
260
  ,
@@ -270,55 +264,18 @@ export const getBlock = props => {
270
264
  return /*#__PURE__*/_jsx("h3", {
271
265
  ...attributes,
272
266
  ...element.attr,
273
- style: {
274
- margin: "10px 0px"
275
- },
276
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
267
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
277
268
  children: children
278
269
  });
279
270
  case "headingThree":
280
271
  return /*#__PURE__*/_jsx("h3", {
281
272
  ...attributes,
282
273
  ...element.attr,
283
- style: {
284
- margin: "10px 0px"
285
- },
286
274
  className: `content-editable ${isEmpty ? "empty" : ""}`
287
275
  // placeholder="Heading 3"
288
276
  ,
289
277
  children: children
290
278
  });
291
- case "headingFour":
292
- return /*#__PURE__*/_jsx("h4", {
293
- ...attributes,
294
- ...element.attr,
295
- style: {
296
- margin: "10px 0px"
297
- },
298
- className: `content-editable ${isEmpty ? "empty" : ""}`,
299
- children: children
300
- });
301
- case "headingFive":
302
- return /*#__PURE__*/_jsx("h5", {
303
- ...attributes,
304
- ...element.attr,
305
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
306
- children: children
307
- });
308
- case "headingSix":
309
- return /*#__PURE__*/_jsx("h6", {
310
- ...attributes,
311
- ...element.attr,
312
- className: `content-editable ${isEmpty ? "empty" : ""}`,
313
- children: children
314
- });
315
- case "headingSeven":
316
- return /*#__PURE__*/_jsx("h7", {
317
- ...attributes,
318
- ...element.attr,
319
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
320
- children: children
321
- });
322
279
  case "blockquote":
323
280
  return /*#__PURE__*/_jsx("blockquote", {
324
281
  ...attributes,
@@ -370,7 +327,7 @@ export const getBlock = props => {
370
327
  return /*#__PURE__*/_jsx("li", {
371
328
  ...attributes,
372
329
  ...element.attr,
373
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
330
+ className: `content-editable ${isEmpty ? "empty" : ""}`,
374
331
  placeholder: "List",
375
332
  style: {
376
333
  color: firstChildren?.color
@@ -387,7 +344,7 @@ export const getBlock = props => {
387
344
  return /*#__PURE__*/_jsx("p", {
388
345
  ...attributes,
389
346
  ...element.attr,
390
- className: `content-editable ${isEmpty ? "empty" : ""} m-0`
347
+ className: `content-editable ${isEmpty ? "empty" : ""}`
391
348
  // placeholder="paragraph"
392
349
  ,
393
350
  children: children
@@ -409,8 +366,7 @@ export const getBlock = props => {
409
366
  default:
410
367
  return /*#__PURE__*/_jsx(SimpleText, {
411
368
  ...props,
412
- isEmpty: isEmpty,
413
- isChatEditor: true
369
+ isEmpty: isEmpty
414
370
  });
415
371
  }
416
372
  };