@flozy/editor 3.8.5 → 3.8.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms, Path } from "slate";
3
+ import { Transforms, Path, Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
6
6
  import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -30,11 +30,16 @@ const GridToolBar = ({
30
30
  onAddGridItem,
31
31
  onAddSection,
32
32
  onMoveSection,
33
- path
33
+ path,
34
+ isSectionFullWidth
34
35
  }) => {
35
36
  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
36
37
  className: "grid-container-toolbar",
37
38
  contentEditable: false,
39
+ style: isSectionFullWidth ? {
40
+ right: "4px",
41
+ top: "4px"
42
+ } : {},
38
43
  children: [/*#__PURE__*/_jsx(Tooltip, {
39
44
  title: "Grid Settings",
40
45
  arrow: true,
@@ -75,6 +80,17 @@ const GridToolBar = ({
75
80
  }) : null]
76
81
  }) : null;
77
82
  };
83
+ const getParentEl = (editor, path) => {
84
+ try {
85
+ if (path?.length) {
86
+ return Node.parent(editor, path);
87
+ } else {
88
+ return null;
89
+ }
90
+ } catch (err) {
91
+ return null;
92
+ }
93
+ };
78
94
  const Grid = props => {
79
95
  const theme = useTheme();
80
96
  const {
@@ -115,6 +131,11 @@ const Grid = props => {
115
131
  const selected = hoverPath === path.join(",");
116
132
  const [showTool] = useEditorSelection(editor);
117
133
  const [size] = useWindowResize();
134
+ const parentElement = getParentEl(editor, path);
135
+ const {
136
+ sectionGridSize
137
+ } = parentElement || {};
138
+ const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
118
139
  const onAddGridItem = () => {
119
140
  const currentPath = editor.selection?.anchor?.path;
120
141
  const ancestorsPath = Path.ancestors(currentPath, {
@@ -329,7 +350,8 @@ const Grid = props => {
329
350
  onAddGridItem: onAddGridItem,
330
351
  onAddSection: onAddSection,
331
352
  onMoveSection: onMoveSection,
332
- path: path
353
+ path: path,
354
+ isSectionFullWidth: isSectionFullWidth
333
355
  })]
334
356
  }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
335
357
  element: element,
@@ -1,4 +1,4 @@
1
- const TableStyles = () => ({
1
+ const TableStyles = themeType => ({
2
2
  tableToolBar: {
3
3
  position: "absolute",
4
4
  top: "-34px",
@@ -61,6 +61,28 @@ const TableStyles = () => ({
61
61
  "&:hover": {
62
62
  background: "#ccc"
63
63
  }
64
+ },
65
+ deleteCellsPopUp: {
66
+ backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
67
+ borderRadius: "7px !important",
68
+ border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
69
+ zIndex: 100,
70
+ minWidth: "186px !important"
71
+ },
72
+ menuItemPopUp: {
73
+ padding: "5px 7px !important",
74
+ margin: "6px !important",
75
+ borderRadius: 1,
76
+ userSelect: "none",
77
+ color: themeType === "dark" ? "#2563EB" : "#0F172A",
78
+ "&:hover": {
79
+ // backgroundColor: "rgba(0, 123, 255, 0.1)",
80
+ backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
81
+ },
82
+ "&.Mui-selected": {
83
+ backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
84
+ color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
85
+ }
64
86
  }
65
87
  });
66
88
  export default TableStyles;
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
4
+ import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
5
5
  import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
6
6
  import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
7
7
  import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,6 +15,7 @@ import { TableUtil } from "../../utils/table";
15
15
  import TablePopup from "./TablePopup";
16
16
  import { useEditorSelection } from "../../hooks/useMouseMove";
17
17
  import TableStyles from "./Styles";
18
+ import useClickOutside from "../../hooks/useClickOutside";
18
19
  import "./table.css";
19
20
  import { jsx as _jsx } from "react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -1,11 +1,12 @@
1
1
  import React, { useState, useEffect } from "react";
2
- import { Editor, Element } from "slate";
3
- import { Box } from "@mui/material";
2
+ import { Editor, Element, Transforms } from "slate";
3
+ import { Box, MenuItem, Popper, Typography } from "@mui/material";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import useTableResize from "../../utils/customHooks/useTableResize";
6
6
  import { TableUtil } from "../../utils/table";
7
7
  import TableStyles from "./Styles";
8
8
  import { useEditorSelection } from "../../hooks/useMouseMove";
9
+ import useClickOutside from "../../hooks/useClickOutside";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +29,8 @@ const Resizer = ({
28
29
  });
29
30
  };
30
31
  const TableCell = props => {
31
- const classes = TableStyles();
32
+ const themeType = localStorage.getItem("themeType");
33
+ const classes = TableStyles(themeType);
32
34
  const {
33
35
  element,
34
36
  attributes,
@@ -69,6 +71,42 @@ const TableCell = props => {
69
71
  const tableDOM = table.getDOMNode(path, true);
70
72
  const isCellSelected = table.isCellSelected(editor.selection);
71
73
  const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
74
+ const [anchorEl, setAnchorEl] = useState(null);
75
+ const open = Boolean(anchorEl);
76
+ const popperOptions = [{
77
+ value: "Delete Row"
78
+ }, {
79
+ value: "Delete Column"
80
+ }];
81
+ const onRightClick = e => {
82
+ e.preventDefault();
83
+ if (hasSelected) {
84
+ setAnchorEl(e.currentTarget);
85
+ }
86
+ };
87
+ const closePoper = () => {
88
+ setAnchorEl(null);
89
+ };
90
+ const handleMenuItemClick = value => {
91
+ Transforms.select(editor, editor.selection);
92
+ switch (value) {
93
+ case "Delete Row":
94
+ table.deleteRow();
95
+ break;
96
+ case "Delete Column":
97
+ table.deleteColumn();
98
+ break;
99
+ default:
100
+ return;
101
+ }
102
+ // closePoper();
103
+ };
104
+
105
+ // Use the useClickOutside hook
106
+ const popperRef = useClickOutside({
107
+ onClickOutside: closePoper,
108
+ refCount: 1
109
+ })[0];
72
110
  useEffect(() => {
73
111
  if (tableDOM) {
74
112
  const {
@@ -89,7 +127,7 @@ const TableCell = props => {
89
127
  cellWidth: parentWidth / columns
90
128
  });
91
129
  }
92
- }, [tableDOM]);
130
+ }, [tableDOM, anchorEl]);
93
131
  useEffect(() => {
94
132
  if (editor && element && tableSize) {
95
133
  const dom = ReactEditor.toDOMNode(editor, element);
@@ -99,14 +137,37 @@ const TableCell = props => {
99
137
  height: 100
100
138
  });
101
139
  }
102
- }, [tableSize]);
140
+ }, [tableSize, anchorEl]);
103
141
  useEffect(() => {
104
142
  if (!resizing && tableProps) {
105
143
  table.updateTableStyle({
106
144
  "col.size": size
107
145
  }, tableProps);
108
146
  }
109
- }, [resizing]);
147
+ }, [resizing, anchorEl]);
148
+ const poperForDeltion = () => {
149
+ return /*#__PURE__*/_jsx(Popper, {
150
+ open: open,
151
+ anchorEl: anchorEl,
152
+ placement: "bottom-start",
153
+ disablePortal: true,
154
+ ref: popperRef,
155
+ sx: classes.deleteCellsPopUp,
156
+ children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
157
+ value: option.value,
158
+ onClick: () => handleMenuItemClick(option.value),
159
+ contentEditable: false,
160
+ sx: classes.menuItemPopUp,
161
+ children: /*#__PURE__*/_jsx(Typography, {
162
+ sx: {
163
+ fontSize: "12px",
164
+ userSelect: "none"
165
+ },
166
+ children: option.value
167
+ })
168
+ }, option.value))
169
+ });
170
+ };
110
171
  const sizeProps = isHeader ? {
111
172
  width: size?.width || tableSize?.cellWidth
112
173
  } : {};
@@ -121,6 +182,7 @@ const TableCell = props => {
121
182
  border: `3px solid ${cellBorderColor}`,
122
183
  ...(sizeProps || {})
123
184
  },
185
+ onContextMenu: onRightClick,
124
186
  children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
125
187
  classes: classes,
126
188
  onMouseDown: onMouseDown,
@@ -128,7 +190,7 @@ const TableCell = props => {
128
190
  }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
129
191
  className: "selection-area-tc",
130
192
  contentEditable: false
131
- }) : null]
193
+ }) : null, poperForDeltion()]
132
194
  });
133
195
  };
134
196
  export default TableCell;
@@ -8,6 +8,7 @@ import { ReactEditor } from "slate-react";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const TableContextMenu = props => {
11
+ console.log("Table context menu :", props);
11
12
  const {
12
13
  editor
13
14
  } = props;
@@ -8,58 +8,67 @@ import { Transforms } from "slate";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
11
- const DragHandleStyle = () => ({
12
- dragHandle: {
13
- opacity: 0,
14
- content: '" "',
11
+ const DragHandleStyle = fromPopper => {
12
+ const handleDragStyle = fromPopper ? {
13
+ position: "absolute",
14
+ top: "6px",
15
+ left: "4px"
16
+ } : {
15
17
  position: "absolute",
16
18
  top: "3px",
17
- left: "-52px",
18
- borderRadius: "0px",
19
- padding: "0px",
20
- width: "20px",
21
- height: "20px",
22
- border: 0,
23
- display: "flex",
24
- alignItems: "center",
25
- justifyContent: "center",
26
- cursor: "grab",
27
- color: "#D7D7D6",
28
- background: "rgb(221, 221, 221, 0.1)",
29
- "& svg": {
30
- width: "20px"
19
+ left: "-52px"
20
+ };
21
+ return {
22
+ dragHandle: {
23
+ opacity: 0,
24
+ content: '" "',
25
+ ...handleDragStyle,
26
+ borderRadius: "0px",
27
+ padding: "0px",
28
+ width: "20px",
29
+ height: "20px",
30
+ border: 0,
31
+ display: "flex",
32
+ alignItems: "center",
33
+ justifyContent: "center",
34
+ cursor: "grab",
35
+ color: "#D7D7D6",
36
+ background: "rgb(221, 221, 221, 0.1)",
37
+ "& svg": {
38
+ width: "20px"
39
+ },
40
+ "&:hover": {
41
+ opacity: 1,
42
+ background: "rgb(221, 221, 221, 0.8)"
43
+ },
44
+ "&.active": {
45
+ opacity: 1,
46
+ cursor: "grabbing"
47
+ }
31
48
  },
32
- "&:hover": {
33
- opacity: 1,
34
- background: "rgb(221, 221, 221, 0.8)"
49
+ dropArea: {
50
+ position: "absolute",
51
+ left: 0,
52
+ top: 0,
53
+ width: "100%",
54
+ height: "100%",
55
+ pointerEvents: "none",
56
+ zIndex: -1,
57
+ "&.dragging": {
58
+ backgroundColor: "#def4ff"
59
+ }
35
60
  },
36
- "&.active": {
37
- opacity: 1,
38
- cursor: "grabbing"
61
+ dropAreaOver: {
62
+ position: "absolute",
63
+ left: 0,
64
+ top: 0,
65
+ width: "100%",
66
+ height: "4px"
39
67
  }
40
- },
41
- dropArea: {
42
- position: "absolute",
43
- left: 0,
44
- top: 0,
45
- width: "100%",
46
- height: "100%",
47
- pointerEvents: "none",
48
- zIndex: -1,
49
- "&.dragging": {
50
- backgroundColor: "#def4ff"
51
- }
52
- },
53
- dropAreaOver: {
54
- position: "absolute",
55
- left: 0,
56
- top: 0,
57
- width: "100%",
58
- height: "4px"
59
- }
60
- });
68
+ };
69
+ };
61
70
  const DragHandle = props => {
62
- const classes = DragHandleStyle();
71
+ const classes = DragHandleStyle(props.fromPopper);
63
72
  const editor = useSlateStatic();
64
73
  const [dragging, setDragging] = useState(false);
65
74
  const {
@@ -1,15 +1,17 @@
1
- import React, { useState } from "react";
1
+ import React, { useRef, useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { ReactEditor, useSlateStatic } from "slate-react";
4
- import { Box, IconButton, Tooltip } from "@mui/material";
4
+ import { Box, IconButton, Popper, Tooltip } from "@mui/material";
5
5
  import TuneIcon from "@mui/icons-material/Tune";
6
6
  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
10
  import SectionStyle from "./styles";
11
+ import useWindowResize from "../../hooks/useWindowResize";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ import { Fragment as _Fragment } from "react/jsx-runtime";
13
15
  const list_types = ["orderedList", "unorderedList"];
14
16
  const Section = props => {
15
17
  const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
38
40
  flexDirection
39
41
  } = sectionAlignment || {};
40
42
  const path = ReactEditor.findPath(editor, element);
43
+ const anchorEl = useRef(null);
44
+ const popperEl = useRef(null);
45
+ const [size] = useWindowResize();
46
+ const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
47
+ const [isHovering, setIsHovering] = useState(false);
48
+ const onMouseEnter = () => {
49
+ setIsHovering(true);
50
+ };
51
+ const onMouseLeave = () => {
52
+ setIsHovering(false);
53
+ };
41
54
  const onSettings = () => {
42
55
  setOpenSettings(true);
43
56
  };
44
- const Toolbar = () => {
57
+ const Toolbar = ({
58
+ fromPopper
59
+ }) => {
45
60
  return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
46
61
  component: "div",
47
62
  className: `element-toolbar no-border-button hr section-tw sectionIcon`,
48
- style: {
63
+ style: fromPopper ? {
64
+ position: "unset",
65
+ marginLeft: "28px",
66
+ paddingTop: "4px",
67
+ marginRight: "10px",
68
+ height: "100%"
69
+ } : {
49
70
  left: "-28px",
50
71
  top: "3px"
51
72
  },
@@ -99,6 +120,8 @@ const Section = props => {
99
120
  alignItems: horizantal,
100
121
  justifyContent: vertical
101
122
  },
123
+ onMouseEnter: onMouseEnter,
124
+ onMouseLeave: onMouseLeave,
102
125
  children: [/*#__PURE__*/_jsxs(Box, {
103
126
  className: "ed-section-inner",
104
127
  sx: {
@@ -107,9 +130,36 @@ const Section = props => {
107
130
  ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
108
131
  }
109
132
  },
110
- children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
111
- ...props
112
- }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
133
+ ref: anchorEl,
134
+ children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
135
+ open: isHovering && isSectionFullWidth,
136
+ anchorEl: anchorEl?.current,
137
+ placement: "top-start",
138
+ sx: {
139
+ zIndex: 9999
140
+ },
141
+ disablePortal: true,
142
+ ref: popperEl,
143
+ className: "sectionPopper",
144
+ children: /*#__PURE__*/_jsxs(Box, {
145
+ sx: {
146
+ bgcolor: "background.paper",
147
+ background: "#F6F6F6",
148
+ height: "30px",
149
+ position: "relative"
150
+ },
151
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
152
+ ...props,
153
+ fromPopper: true
154
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {
155
+ fromPopper: true
156
+ })]
157
+ })
158
+ }) : /*#__PURE__*/_jsxs(_Fragment, {
159
+ children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
160
+ ...props
161
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
162
+ }), children]
113
163
  }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
114
164
  element: {
115
165
  ...element,
@@ -6,6 +6,9 @@ const SectionStyle = () => ({
6
6
  },
7
7
  "& .sectionIcon": {
8
8
  opacity: 1
9
+ },
10
+ "& .sectionPopper": {
11
+ opacity: 1
9
12
  }
10
13
  },
11
14
  "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
13
16
  display: "block"
14
17
  }
15
18
  },
19
+ "& .sectionPopper": {
20
+ "&:hover": {
21
+ opacity: 1
22
+ }
23
+ },
24
+ "& .sectionPopper": {
25
+ opacity: 0
26
+ },
16
27
  "& .sectionIcon": {
17
28
  opacity: 0,
18
29
  padding: "0px",
@@ -4,9 +4,19 @@ const useWindowMessage = props => {
4
4
  type
5
5
  } = props;
6
6
  const [message, setMessage] = useState(null);
7
+ const sendMessage = action => {
8
+ if (window.parent) {
9
+ window.parent.postMessage({
10
+ ...action
11
+ }, "*");
12
+ }
13
+ };
7
14
  useEffect(() => {
8
15
  if (window.addEventListener) {
9
16
  window.addEventListener("message", onMessage, false);
17
+ sendMessage({
18
+ isLoaded: true
19
+ });
10
20
  } else {
11
21
  window.attachEvent("onmessage", onMessage);
12
22
  }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
23
33
  setMessage(e?.data[type]);
24
34
  }
25
35
  };
26
- const sendMessage = action => {
27
- if (window.parent) {
28
- window.parent.postMessage({
29
- ...action
30
- }, "*");
31
- }
32
- };
33
36
  return [message, sendMessage];
34
37
  };
35
38
  export default useWindowMessage;
@@ -95,28 +95,32 @@ export class TableUtil {
95
95
  }
96
96
  };
97
97
  deleteRow = () => {
98
- const {
99
- selection
100
- } = this.editor;
101
- if (!!selection && Range.isCollapsed(selection)) {
102
- const [tableNode] = Editor.nodes(this.editor, {
103
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
104
- });
105
- if (tableNode) {
106
- const [[table, tablePath]] = Editor.nodes(this.editor, {
107
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
108
- });
109
- const [, currentRow] = tableNode;
110
- const path = currentRow;
111
- Transforms.removeNodes(this.editor, {
112
- at: path
113
- });
114
- Transforms.setNodes(this.editor, {
115
- rows: table.rows - 1
116
- }, {
117
- at: tablePath
98
+ try {
99
+ const {
100
+ selection
101
+ } = this.editor;
102
+ if (!!selection && Range.isCollapsed(selection)) {
103
+ const [tableNode] = Editor.nodes(this.editor, {
104
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
118
105
  });
106
+ if (tableNode) {
107
+ const [[table, tablePath]] = Editor.nodes(this.editor, {
108
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
109
+ });
110
+ const [, currentRow] = tableNode;
111
+ const path = currentRow;
112
+ Transforms.removeNodes(this.editor, {
113
+ at: path
114
+ });
115
+ Transforms.setNodes(this.editor, {
116
+ rows: table.rows - 1
117
+ }, {
118
+ at: tablePath
119
+ });
120
+ }
119
121
  }
122
+ } catch (error) {
123
+ console.log("Error", error);
120
124
  }
121
125
  };
122
126
  insertColumn = action => {
@@ -151,34 +155,38 @@ export class TableUtil {
151
155
  }
152
156
  };
153
157
  deleteColumn = () => {
154
- const {
155
- selection
156
- } = this.editor;
157
- if (!!selection && Range.isCollapsed(selection)) {
158
- const [tableNode] = Editor.nodes(this.editor, {
159
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
160
- });
161
- if (tableNode) {
162
- const [[table, tablePath]] = Editor.nodes(this.editor, {
163
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
158
+ try {
159
+ const {
160
+ selection
161
+ } = this.editor;
162
+ if (!!selection && Range.isCollapsed(selection)) {
163
+ const [tableNode] = Editor.nodes(this.editor, {
164
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
164
165
  });
165
- const [, currentCell] = tableNode;
166
- const startPath = currentCell;
166
+ if (tableNode) {
167
+ const [[table, tablePath]] = Editor.nodes(this.editor, {
168
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
169
+ });
170
+ const [, currentCell] = tableNode;
171
+ const startPath = currentCell;
167
172
 
168
- // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
169
- startPath[startPath.length - 2] = 0;
170
- for (let row = 0; row < table.rows; row++) {
171
- Transforms.removeNodes(this.editor, {
172
- at: startPath
173
+ // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
174
+ startPath[startPath.length - 2] = 0;
175
+ for (let row = 0; row < table.rows; row++) {
176
+ Transforms.removeNodes(this.editor, {
177
+ at: startPath
178
+ });
179
+ startPath[startPath.length - 2]++;
180
+ }
181
+ Transforms.setNodes(this.editor, {
182
+ columns: table.columns - 1
183
+ }, {
184
+ at: tablePath
173
185
  });
174
- startPath[startPath.length - 2]++;
175
186
  }
176
- Transforms.setNodes(this.editor, {
177
- columns: table.columns - 1
178
- }, {
179
- at: tablePath
180
- });
181
187
  }
188
+ } catch (error) {
189
+ console.log("Error ", error);
182
190
  }
183
191
  };
184
192
  updateTableStyle = (styleProps, paths) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.8.5",
3
+ "version": "3.8.6",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"
@@ -62,7 +62,7 @@
62
62
  "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
63
63
  "test": "craco test --passWithNoTests",
64
64
  "eject": "react-scripts eject",
65
- "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
65
+ "storybook": "storybook dev -p 6006",
66
66
  "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
67
67
  "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
68
68
  "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"