@flozy/editor 2.1.0 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. package/dist/Editor/CommonEditor.js +19 -2
  2. package/dist/Editor/Elements/Button/EditorButton.js +2 -1
  3. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
  4. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
  5. package/dist/Editor/Elements/Form/Workflow/Styles.js +11 -10
  6. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
  7. package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
  8. package/dist/Editor/Elements/Grid/Grid.js +9 -3
  9. package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
  10. package/dist/Editor/Elements/SimpleText/style.js +40 -0
  11. package/dist/Editor/Elements/Table/TableCell.js +1 -1
  12. package/dist/Editor/Elements/Variables/Style.js +29 -4
  13. package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
  14. package/dist/Editor/Styles/EditorStyles.js +11 -0
  15. package/dist/Editor/Toolbar/Basic/index.js +54 -25
  16. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat.js +419 -0
  17. package/dist/Editor/Toolbar/PopupTool/index.js +2 -1
  18. package/dist/Editor/common/Section/index.js +1 -43
  19. package/dist/Editor/common/Section/styles.js +44 -0
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
  21. package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
  22. package/dist/Editor/common/StyleBuilder/index.js +8 -0
  23. package/dist/Editor/helper/deserialize/index.js +10 -6
  24. package/dist/Editor/plugins/withEmbeds.js +0 -1
  25. package/dist/Editor/plugins/withHTML.js +36 -4
  26. package/dist/Editor/utils/button.js +3 -1
  27. package/dist/Editor/utils/formfield.js +2 -0
  28. package/dist/Editor/utils/helper.js +40 -1
  29. package/package.json +1 -1
@@ -0,0 +1,419 @@
1
+ import React, { useState } from "react";
2
+ import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
+ import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
4
+ import WidthFullIcon from "@mui/icons-material/WidthFull";
5
+ import WidthNormalIcon from "@mui/icons-material/WidthNormal";
6
+ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
7
+ import FormatClearIcon from "@mui/icons-material/FormatClear";
8
+ import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
9
+ import { toolbarGroups } from "../toolbarGroups";
10
+ import ColorPicker from "../../Elements/Color Picker/ColorPicker";
11
+ import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
12
+ import LinkButton from "../../Elements/Link/LinkButton";
13
+ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
14
+ import { AllColors } from "../../Elements/Color Picker/ColorButtons";
15
+ import { fontFamilyMap } from "../../utils/font";
16
+ import { jsx as _jsx } from "react/jsx-runtime";
17
+ import { jsxs as _jsxs } from "react/jsx-runtime";
18
+ const allTools = toolbarGroups.flat();
19
+ const ButtonComp = {
20
+ AccordionButton: AccordionButton
21
+ };
22
+ const MiniTextFormat = props => {
23
+ const {
24
+ classes,
25
+ editor
26
+ } = props;
27
+ const [anchorEl, setAnchorEl] = useState(null);
28
+ const [type, setType] = useState(null);
29
+ const open = Boolean(anchorEl);
30
+ const fontFamily = allTools.find(f => f.format === "fontFamily");
31
+ const fontWeight = allTools.find(f => f.format === "fontWeight");
32
+ const fontStyle = allTools.filter(f => f.type === "mark");
33
+ const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
34
+ const link = allTools.find(f => f.format?.indexOf("link") >= 0);
35
+ const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
36
+ const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
37
+ const {
38
+ pageProps
39
+ } = getPageSettings(editor)?.element || {};
40
+ const {
41
+ pageWidth
42
+ } = pageProps;
43
+ const {
44
+ isActive: isBlockQuoteActive,
45
+ props: bqProps
46
+ } = getBlockActive(editor, "blockquote");
47
+ const {
48
+ color: bqColor,
49
+ bgColor: bqBgColor
50
+ } = bqProps || {
51
+ color: "",
52
+ bgColor: ""
53
+ };
54
+ const handlePageWidth = width => () => {
55
+ updatePageSettings(editor, {
56
+ ...(pageProps || {}),
57
+ pageWidth: width
58
+ });
59
+ };
60
+ const handleColorPicker = type => e => {
61
+ setType(type);
62
+ setAnchorEl(e.currentTarget);
63
+ };
64
+ const updateBlockQuote = attr => {
65
+ const upAttr = {
66
+ ...(bqProps || {}),
67
+ ...attr
68
+ };
69
+ delete upAttr.children;
70
+ delete upAttr.type;
71
+ if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
72
+ upateBlockActive(editor, "blockquote", upAttr);
73
+ } else {
74
+ toggleBlock(editor, "blockquote", editor.selection, upAttr);
75
+ }
76
+ };
77
+ const onSelectColor = color => () => {
78
+ const attr = {
79
+ [type]: color
80
+ };
81
+ updateBlockQuote(attr);
82
+ };
83
+ const handleQuote = attr => () => {
84
+ updateBlockQuote(attr);
85
+ };
86
+ const onClosePicker = () => {
87
+ setAnchorEl(null);
88
+ };
89
+ const handleDefault = ({
90
+ format,
91
+ val
92
+ }) => () => {
93
+ const value = val ? val : "inherit";
94
+ addMarkData(editor, {
95
+ format,
96
+ value
97
+ });
98
+ };
99
+ return /*#__PURE__*/_jsxs(Grid, {
100
+ container: true,
101
+ sx: classes.textFormatWrapper,
102
+ children: [/*#__PURE__*/_jsxs(Grid, {
103
+ item: true,
104
+ xs: 12,
105
+ children: [/*#__PURE__*/_jsxs(Grid, {
106
+ container: true,
107
+ justifyContent: "space-between",
108
+ alignItems: "center",
109
+ children: [/*#__PURE__*/_jsx(Grid, {
110
+ item: true,
111
+ children: /*#__PURE__*/_jsx(Typography, {
112
+ variant: "body1",
113
+ color: "primary",
114
+ sx: classes.typoLabel,
115
+ children: "Font Family"
116
+ })
117
+ }), /*#__PURE__*/_jsx(Grid, {
118
+ item: true,
119
+ children: /*#__PURE__*/_jsx(Button, {
120
+ sx: classes.defaultBtn,
121
+ startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
122
+ onClick: handleDefault({
123
+ format: "fontFamily",
124
+ val: Object.values(fontFamilyMap)[0]
125
+ }),
126
+ children: "Default"
127
+ })
128
+ })]
129
+ }), /*#__PURE__*/_jsx(Grid, {
130
+ item: true,
131
+ xs: 12,
132
+ sx: classes.textFormatField,
133
+ children: /*#__PURE__*/_jsx(Dropdown, {
134
+ classes: classes,
135
+ ...fontFamily,
136
+ editor: editor
137
+ })
138
+ })]
139
+ }), /*#__PURE__*/_jsxs(Grid, {
140
+ container: true,
141
+ spacing: 2,
142
+ children: [/*#__PURE__*/_jsxs(Grid, {
143
+ item: true,
144
+ xs: 6,
145
+ children: [/*#__PURE__*/_jsx(Typography, {
146
+ variant: "body1",
147
+ color: "primary",
148
+ sx: classes.typoLabel,
149
+ children: "Font Weight"
150
+ }), /*#__PURE__*/_jsx(Grid, {
151
+ item: true,
152
+ xs: 12,
153
+ sx: classes.textFormatField,
154
+ children: /*#__PURE__*/_jsx(Dropdown, {
155
+ classes: classes,
156
+ ...fontWeight,
157
+ editor: editor,
158
+ width: "100%"
159
+ })
160
+ })]
161
+ }), /*#__PURE__*/_jsxs(Grid, {
162
+ item: true,
163
+ xs: 6,
164
+ children: [/*#__PURE__*/_jsx(Typography, {
165
+ variant: "body1",
166
+ color: "primary",
167
+ sx: classes.typoLabel,
168
+ children: "Font Size"
169
+ }), /*#__PURE__*/_jsx(Grid, {
170
+ item: true,
171
+ xs: 12,
172
+ sx: classes.textFormatCG,
173
+ children: /*#__PURE__*/_jsx(TextSize, {
174
+ classes: classes,
175
+ format: "fontSize",
176
+ activeMark: activeMark,
177
+ editor: editor,
178
+ fullWidth: true
179
+ })
180
+ })]
181
+ })]
182
+ }), /*#__PURE__*/_jsxs(Grid, {
183
+ item: true,
184
+ xs: 12,
185
+ sx: classes.textFormatField,
186
+ children: [/*#__PURE__*/_jsxs(Grid, {
187
+ container: true,
188
+ justifyContent: "space-between",
189
+ alignItems: "center",
190
+ children: [/*#__PURE__*/_jsx(Grid, {
191
+ item: true,
192
+ children: /*#__PURE__*/_jsx(Typography, {
193
+ variant: "body1",
194
+ color: "primary",
195
+ sx: classes.typoLabel,
196
+ children: "Text Color"
197
+ })
198
+ }), /*#__PURE__*/_jsx(Grid, {
199
+ item: true,
200
+ children: /*#__PURE__*/_jsx(Button, {
201
+ sx: classes.defaultBtn,
202
+ startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
203
+ onClick: handleDefault({
204
+ format: "color"
205
+ }),
206
+ children: "Default"
207
+ })
208
+ })]
209
+ }), /*#__PURE__*/_jsx(Grid, {
210
+ sx: classes.textFormatColorWrpr,
211
+ children: /*#__PURE__*/_jsx(ColorPicker, {
212
+ format: "color",
213
+ activeMark: activeMark,
214
+ editor: editor,
215
+ showHex: false,
216
+ rounded: true,
217
+ title: "Text Color",
218
+ id: "11_cc",
219
+ classes: classes
220
+ }, "11_cc")
221
+ })]
222
+ }), /*#__PURE__*/_jsxs(Grid, {
223
+ item: true,
224
+ xs: 12,
225
+ sx: classes.textFormatField,
226
+ children: [/*#__PURE__*/_jsxs(Grid, {
227
+ container: true,
228
+ justifyContent: "space-between",
229
+ alignItems: "center",
230
+ children: [/*#__PURE__*/_jsx(Grid, {
231
+ item: true,
232
+ children: /*#__PURE__*/_jsx(Typography, {
233
+ variant: "body1",
234
+ color: "primary",
235
+ sx: classes.typoLabel,
236
+ children: "Text Background Color"
237
+ })
238
+ }), /*#__PURE__*/_jsx(Grid, {
239
+ item: true,
240
+ children: /*#__PURE__*/_jsx(Grid, {
241
+ item: true,
242
+ children: /*#__PURE__*/_jsx(Button, {
243
+ sx: classes.defaultBtn,
244
+ startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
245
+ onClick: handleDefault({
246
+ format: "bgColor"
247
+ }),
248
+ children: "Default"
249
+ })
250
+ })
251
+ })]
252
+ }), /*#__PURE__*/_jsx(Grid, {
253
+ item: true,
254
+ xs: 12,
255
+ sx: classes.textFormatColorWrpr,
256
+ children: /*#__PURE__*/_jsx(ColorPicker, {
257
+ format: "bgColor",
258
+ activeMark: activeMark,
259
+ editor: editor,
260
+ showHex: false,
261
+ rounded: true,
262
+ title: "Text Background Color",
263
+ classes: classes,
264
+ id: "12_cc"
265
+ }, "12_cc")
266
+ })]
267
+ }), /*#__PURE__*/_jsxs(Grid, {
268
+ item: true,
269
+ xs: 6,
270
+ sx: classes.textFormatField,
271
+ children: [/*#__PURE__*/_jsx(Typography, {
272
+ variant: "body1",
273
+ color: "primary",
274
+ sx: classes.typoLabel,
275
+ children: "Text Alignment"
276
+ }), /*#__PURE__*/_jsx(Grid, {
277
+ item: true,
278
+ xs: 12,
279
+ sx: classes.textFormatCG,
280
+ children: fontAlign?.map((m, i) => {
281
+ return /*#__PURE__*/_jsx(BlockButton, {
282
+ editor: editor,
283
+ ...m
284
+ }, `pptool_block_${i}_${m.id}`);
285
+ })
286
+ })]
287
+ }), /*#__PURE__*/_jsxs(Grid, {
288
+ item: true,
289
+ xs: 6,
290
+ sx: classes.textFormatField,
291
+ children: [/*#__PURE__*/_jsx(Typography, {
292
+ variant: "body1",
293
+ color: "primary",
294
+ sx: classes.typoLabel,
295
+ children: "Lists"
296
+ }), /*#__PURE__*/_jsx(Grid, {
297
+ item: true,
298
+ xs: 12,
299
+ sx: classes.textFormatCG,
300
+ children: lists?.map((m, i) => {
301
+ const Comp = ButtonComp[m?.component] || BlockButton;
302
+ return /*#__PURE__*/_jsx(Comp, {
303
+ editor: editor,
304
+ ...m
305
+ }, `pptool_block_${i}_${m.id}`);
306
+ })
307
+ })]
308
+ }), /*#__PURE__*/_jsxs(Grid, {
309
+ item: true,
310
+ xs: 12,
311
+ children: [/*#__PURE__*/_jsx(Typography, {
312
+ variant: "body1",
313
+ color: "primary",
314
+ sx: classes.typoLabel,
315
+ children: "Typography"
316
+ }), /*#__PURE__*/_jsxs(Grid, {
317
+ item: true,
318
+ xs: 12,
319
+ className: "typo-icons",
320
+ sx: classes.evenSpace,
321
+ children: [typo?.map((m, i) => {
322
+ return /*#__PURE__*/_jsx(BlockButton, {
323
+ editor: editor,
324
+ ...m
325
+ }, `pptool_mark_${i}_${m.id}`);
326
+ }), fontStyle?.map((m, i) => {
327
+ return /*#__PURE__*/_jsx(MarkButton, {
328
+ editor: editor,
329
+ ...m
330
+ }, `pptool_mark_${i}_${m.id}`);
331
+ }), /*#__PURE__*/_jsx(LinkButton, {
332
+ active: isBlockActive(editor, link.format),
333
+ editor: editor
334
+ }, link.id)]
335
+ })]
336
+ }), /*#__PURE__*/_jsx(Grid, {
337
+ item: true,
338
+ xs: 12,
339
+ sx: classes.evenSpace,
340
+ style: {
341
+ justifyContent: "space-between"
342
+ },
343
+ children: /*#__PURE__*/_jsx(Typography, {
344
+ variant: "body1",
345
+ color: "primary",
346
+ sx: classes.typoLabel,
347
+ children: "Decorations"
348
+ })
349
+ }), /*#__PURE__*/_jsxs(Grid, {
350
+ item: true,
351
+ xs: 12,
352
+ sx: classes.evenSpace,
353
+ style: {
354
+ justifyContent: "space-between"
355
+ },
356
+ className: "text-decorations-wrpr",
357
+ children: [/*#__PURE__*/_jsxs(ButtonGroup, {
358
+ sx: classes.btnGroup,
359
+ children: [/*#__PURE__*/_jsx(Button, {
360
+ className: `no-hover ${bqBgColor ? "active" : ""}`,
361
+ onClick: handleQuote({
362
+ bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
363
+ }),
364
+ style: {
365
+ background: bqBgColor
366
+ },
367
+ children: "Colorbox"
368
+ }), /*#__PURE__*/_jsx(Button, {
369
+ onClick: handleColorPicker("bgColor"),
370
+ children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
371
+ })]
372
+ }), /*#__PURE__*/_jsxs(ButtonGroup, {
373
+ sx: classes.btnGroup,
374
+ children: [/*#__PURE__*/_jsx(Button, {
375
+ className: `no-hover ${bqColor ? "active" : ""}`,
376
+ onClick: handleQuote({
377
+ color: !bqColor ? "rgb(47, 94, 188)" : null
378
+ }),
379
+ children: /*#__PURE__*/_jsx("span", {
380
+ style: {
381
+ borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
382
+ paddingLeft: "12px"
383
+ },
384
+ children: "Quote"
385
+ })
386
+ }), /*#__PURE__*/_jsx(Button, {
387
+ onClick: handleColorPicker("color"),
388
+ children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
389
+ })]
390
+ }), /*#__PURE__*/_jsx(Button, {
391
+ onClick: handlePageWidth("fixed"),
392
+ startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
393
+ sx: classes.pageWidthBtn,
394
+ className: pageWidth === "fixed" || !pageWidth ? "active" : "",
395
+ style: {
396
+ width: "45%"
397
+ },
398
+ children: "Centered"
399
+ }), /*#__PURE__*/_jsx(Button, {
400
+ sx: classes.pageWidthBtn,
401
+ className: pageWidth === "full" ? "active" : "",
402
+ onClick: handlePageWidth("full"),
403
+ startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
404
+ style: {
405
+ width: "45%"
406
+ },
407
+ children: "Full width"
408
+ })]
409
+ }), /*#__PURE__*/_jsx(AllColors, {
410
+ open: open,
411
+ anchorEl: anchorEl,
412
+ onClose: onClosePicker,
413
+ classes: classes,
414
+ onSelect: onSelectColor,
415
+ id: "all_1"
416
+ })]
417
+ });
418
+ };
419
+ export default MiniTextFormat;
@@ -9,6 +9,7 @@ import PopperHeader from "./PopperHeader";
9
9
  import { TableUtil } from "../../utils/table";
10
10
  import useWindowResize from "../../hooks/useWindowResize";
11
11
  import useEvent from "../../hooks/useKeys";
12
+ import MiniTextFormat from "./MiniTextFormat";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const PopupTool = props => {
@@ -92,7 +93,7 @@ const PopupTool = props => {
92
93
  title: "Text Settings",
93
94
  classes: classes,
94
95
  onClose: handleClose
95
- }), /*#__PURE__*/_jsx(TextFormat, {
96
+ }), /*#__PURE__*/_jsx(MiniTextFormat, {
96
97
  editor: editor,
97
98
  classes: classes
98
99
  })]
@@ -7,51 +7,9 @@ import SectionPopup from "../../Elements/Grid/SectionPopup";
7
7
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
8
8
  import DragHandle from "../DnD/DragHandleButton";
9
9
  import { useEditorSelection } from "../../hooks/useMouseMove";
10
+ import SectionStyle from "./styles";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
- const SectionStyle = () => ({
13
- root: {
14
- "&:hover": {
15
- "& .dh-para": {
16
- opacity: 1
17
- },
18
- "& .sectionIcon": {
19
- opacity: 1
20
- }
21
- },
22
- "& .element-toolbar": {
23
- "&:hover": {
24
- display: "block"
25
- }
26
- },
27
- "& .sectionIcon": {
28
- opacity: 0,
29
- padding: "0px",
30
- background: "transparent",
31
- border: "none",
32
- width: "20px",
33
- height: "20px",
34
- "& button": {
35
- boxShadow: "none",
36
- background: "transparent",
37
- width: "20px",
38
- height: "20px"
39
- },
40
- "& svg": {
41
- fill: "#ccc",
42
- width: "20px",
43
- marginTop: '-5px'
44
- },
45
- "&:hover": {
46
- opacity: 1,
47
- background: "#eee"
48
- },
49
- "&.active": {
50
- opacity: 1
51
- }
52
- }
53
- }
54
- });
55
13
  const Section = props => {
56
14
  const classes = SectionStyle();
57
15
  const {
@@ -0,0 +1,44 @@
1
+ const SectionStyle = () => ({
2
+ root: {
3
+ "&:hover": {
4
+ "& .dh-para": {
5
+ opacity: 1
6
+ },
7
+ "& .sectionIcon": {
8
+ opacity: 1
9
+ }
10
+ },
11
+ "& .element-toolbar": {
12
+ "&:hover": {
13
+ display: "block"
14
+ }
15
+ },
16
+ "& .sectionIcon": {
17
+ opacity: 0,
18
+ padding: "0px",
19
+ background: "transparent",
20
+ border: "none",
21
+ width: "20px",
22
+ height: "20px",
23
+ "& button": {
24
+ boxShadow: "none",
25
+ background: "transparent",
26
+ width: "20px",
27
+ height: "20px"
28
+ },
29
+ "& svg": {
30
+ fill: "#ccc",
31
+ width: "20px",
32
+ marginTop: "-5px"
33
+ },
34
+ "&:hover": {
35
+ opacity: 1,
36
+ background: "#eee"
37
+ },
38
+ "&.active": {
39
+ opacity: 1
40
+ }
41
+ }
42
+ }
43
+ });
44
+ export default SectionStyle;
@@ -31,12 +31,14 @@ const BorderRadius = props => {
31
31
  BORDER_RADIUS_KEYS.forEach(m => {
32
32
  changeAll[m] = e.target.value;
33
33
  });
34
+ } else {
35
+ changeAll = val ? val[size?.device] : {};
34
36
  }
35
37
  onChange({
36
38
  [key]: {
37
39
  ...getBreakPointsValue(val, null),
38
40
  [size?.device]: {
39
- ...changeAll,
41
+ ...(changeAll || {}),
40
42
  [e.target.name]: e.target.value
41
43
  }
42
44
  }
@@ -94,11 +94,13 @@ const gridStyle = [{
94
94
  }, {
95
95
  tab: "Size",
96
96
  value: "gridSize",
97
- fields: [{
98
- label: "Width Size",
99
- key: "gridSize",
100
- type: "gridSize"
101
- }, {
97
+ fields: [
98
+ // {
99
+ // label: "Width Size",
100
+ // key: "gridSize",
101
+ // type: "gridSize",
102
+ // },
103
+ {
102
104
  label: "Wrap",
103
105
  key: "flexWrap",
104
106
  type: "textOptions",
@@ -85,6 +85,14 @@ const StyleBuilder = props => {
85
85
  ...data,
86
86
  field_type: data?.element
87
87
  });
88
+ if (data?.hasOwnProperty('name')) {
89
+ setElementProps({
90
+ ...elementProps,
91
+ ...data,
92
+ key: data?.name,
93
+ label: data?.name
94
+ });
95
+ }
88
96
  };
89
97
  const handleSave = () => {
90
98
  onSave(elementProps);
@@ -53,9 +53,13 @@ const ELEMENT_TAGS = {
53
53
  "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
54
54
  type: "paragraph"
55
55
  }),
56
- TABLE: () => ({
57
- type: "table"
58
- }),
56
+ TABLE: (el, bodyChildren = []) => {
57
+ return {
58
+ type: "table",
59
+ rows: bodyChildren?.length,
60
+ columns: bodyChildren[0]?.children?.length
61
+ };
62
+ },
59
63
  THEAD: () => ({
60
64
  type: "table-head"
61
65
  }),
@@ -105,7 +109,8 @@ const TEXT_TAGS = {
105
109
  };
106
110
  const deserialize = el => {
107
111
  if (el.nodeType === 3) {
108
- return el.textContent;
112
+ const match = /\r|\n/.exec(el.textContent);
113
+ return match ? null : el.textContent;
109
114
  } else if (el.nodeType !== 1) {
110
115
  return null;
111
116
  } else if (el.nodeName === "BR") {
@@ -115,7 +120,6 @@ const deserialize = el => {
115
120
  nodeName
116
121
  } = el;
117
122
  let parent = el;
118
- console.log(nodeName);
119
123
  if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
120
124
  parent = el.childNodes[0];
121
125
  }
@@ -129,7 +133,7 @@ const deserialize = el => {
129
133
  return jsx("fragment", {}, children);
130
134
  }
131
135
  if (ELEMENT_TAGS[nodeName]) {
132
- const attrs = ELEMENT_TAGS[nodeName](el);
136
+ const attrs = ELEMENT_TAGS[nodeName](el, children);
133
137
  return jsx("element", attrs, children);
134
138
  }
135
139
  if (TEXT_TAGS[nodeName]) {
@@ -17,7 +17,6 @@ const withEmbeds = editor => {
17
17
  editor.insertBreak = (...args) => {
18
18
  const parentPath = Path.parent(editor.selection.focus.path);
19
19
  const parentNode = Node.get(editor, parentPath);
20
- console.log(parentNode);
21
20
  if (editor.isVoid(parentNode)) {
22
21
  const nextPath = Path.next(parentPath);
23
22
  Transforms.insertNodes(editor, {
@@ -1,5 +1,36 @@
1
- import { Transforms, Editor, Element } from "slate";
1
+ import { Transforms, Editor, Element, Node } from "slate";
2
2
  import deserialize from "../helper/deserialize";
3
+ const getCurrentElement = editor => {
4
+ try {
5
+ if (editor.selection) {
6
+ return Node.parent(editor, editor?.selection?.anchor?.path);
7
+ } else {
8
+ return null;
9
+ }
10
+ } catch (err) {
11
+ return null;
12
+ }
13
+ };
14
+ const formatFragment = {
15
+ "list-item": fragment => {
16
+ let refactorFragment = [];
17
+ fragment.forEach(a => {
18
+ if (a.type === "orderedList") {
19
+ refactorFragment = [...refactorFragment, ...(a.children || [])];
20
+ } else {
21
+ a.type = "list-item";
22
+ refactorFragment.push(a);
23
+ }
24
+ });
25
+ return refactorFragment;
26
+ },
27
+ "check-list-item": fragment => {
28
+ return fragment.map(a => {
29
+ a.type = "check-list-item";
30
+ return a;
31
+ });
32
+ }
33
+ };
3
34
  const withHtml = editor => {
4
35
  const {
5
36
  insertData,
@@ -15,7 +46,7 @@ const withHtml = editor => {
15
46
  editor.insertData = data => {
16
47
  const slateHTML = data?.getData("application/x-slate-fragment");
17
48
  const html = data?.getData("text/html");
18
- console.log(slateHTML, "****", html);
49
+ const currentEl = getCurrentElement(editor);
19
50
  if (slateHTML) {
20
51
  const [tableNode] = Editor.nodes(editor, {
21
52
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -30,9 +61,10 @@ const withHtml = editor => {
30
61
  }
31
62
  } else if (html) {
32
63
  const parsed = new DOMParser().parseFromString(html, "text/html");
33
- console.log(parsed.body);
34
64
  const fragment = deserialize(parsed.body);
35
- Transforms.insertFragment(editor, fragment);
65
+ const eltype = currentEl?.type;
66
+ const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
67
+ Transforms.insertFragment(editor, formattedFragment);
36
68
  return;
37
69
  } else {
38
70
  insertData(data);