@flozy/editor 4.9.7 → 4.9.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -1260,4 +1260,3 @@ blockquote {
1260
1260
  .hideScroll::-webkit-scrollbar-thumb:hover {
1261
1261
  background: none !important;
1262
1262
  }
1263
-
@@ -13,7 +13,7 @@ import { isEmptyNode } from "../../utils/helper";
13
13
  import { onAddGridItem } from "../../utils/gridItem";
14
14
  import useTableResize from "../../utils/customHooks/useTableResize";
15
15
  import GridStyles from "./Styles";
16
- import { useGrid } from "./Providers/GridProvider";
16
+ import { useGrid, getChildCount } from "./Providers/GridProvider";
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
18
  import { Fragment as _Fragment } from "react/jsx-runtime";
19
19
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ const GridItemToolbar = props => {
47
47
  className: "grid-item-toolbar",
48
48
  style: {
49
49
  top: "-34px",
50
- left: "-4px",
50
+ left: "calc(100% - 68px)",
51
51
  display: "flex",
52
52
  flexDirection: "row"
53
53
  },
@@ -130,6 +130,7 @@ const GridItem = props => {
130
130
  const [showTool] = useEditorSelection(editor);
131
131
  const [parentDOM, setParentDOM] = useState({});
132
132
  const [alert, setAlert] = useState(null);
133
+ const childCount = getChildCount(editor, path);
133
134
  const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
134
135
  ...parentDOM
135
136
  });
@@ -146,7 +147,7 @@ const GridItem = props => {
146
147
  } catch (err) {
147
148
  console.log(err);
148
149
  }
149
- }, [columnRef?.current, minWidth]);
150
+ }, [columnRef?.current, minWidth, childCount]);
150
151
  useEffect(() => {
151
152
  if (isDone || isRightCol) {
152
153
  initDoms();
@@ -164,7 +165,7 @@ const GridItem = props => {
164
165
  if (resizing) {
165
166
  updateColumnWidth({
166
167
  left: size?.width / parentDOM?.gridWidth * 100
167
- });
168
+ }, path);
168
169
  }
169
170
  }, [resizing, size]);
170
171
  const initDoms = () => {
@@ -24,12 +24,24 @@ const getAdjacentColumnPath = (editor, currentPath, direction = "next") => {
24
24
  }; // Return the adjacent column's path
25
25
  };
26
26
 
27
- const isSingleColumn = (editor, parentPath) => {
27
+ const isSingleColumn = (editor, currentPath) => {
28
28
  try {
29
+ const parentPath = Path.parent(currentPath); // Get the parent grid path
29
30
  const gridNode = Node.get(editor, parentPath);
30
31
  return gridNode?.children?.length === 1;
31
32
  } catch (err) {
32
33
  console.log(err);
34
+ return false;
35
+ }
36
+ };
37
+ export const getChildCount = (editor, currentPath) => {
38
+ try {
39
+ const parentPath = Path.parent(currentPath); // Get the parent grid path
40
+ const gridNode = Node.get(editor, parentPath);
41
+ return gridNode?.children?.length;
42
+ } catch (err) {
43
+ console.log(err);
44
+ return 0;
33
45
  }
34
46
  };
35
47
  export const GridProvider = ({
@@ -69,11 +81,11 @@ export const GridProvider = ({
69
81
  *
70
82
  * @param {*} data - contains {left: calculatedWidth}
71
83
  */
72
- const updateColumnWidth = data => {
84
+ const updateColumnWidth = (data, currentColPath) => {
73
85
  // logic to update right column width
74
86
  const right = columnWidths?.right - (data?.left - columnWidths?.left);
75
87
  const diff = right !== widths?.right;
76
- if (isSingleColumn(editor, columnWidths?.parentPath) && data?.left <= 100) {
88
+ if (isSingleColumn(editor, currentColPath) && data?.left <= 100) {
77
89
  setWidths({
78
90
  ...data,
79
91
  right: right
@@ -113,26 +113,7 @@ const SearchAndDocList = ({
113
113
  overflowY: 'auto',
114
114
  overflowX: 'hidden',
115
115
  padding: '0px 16px 8px',
116
- marginBottom: '20px',
117
- scrollbarWidth: "thin",
118
- scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
119
- "&::-webkit-scrollbar": {
120
- width: "3px",
121
- height: "3px !important",
122
- borderRadius: "10px"
123
- },
124
- "&::-webkit-scrollbar-thumb": {
125
- backgroundColor: theme?.palette?.primary?.slashBrainBorder,
126
- borderRadius: "10px",
127
- width: "3px !important"
128
- },
129
- "&::-webkit-scrollbar-thumb:hover": {
130
- backgroundColor: theme?.palette?.primary?.slashBrainBorder
131
- },
132
- "&::-webkit-scrollbar-track": {
133
- background: "transparent",
134
- borderRadius: "10px"
135
- }
116
+ marginBottom: '20px'
136
117
  },
137
118
  children: [mapData?.map((doc, index) => {
138
119
  const title = doc?.title?.trim() === "" ? 'Untitled' : doc?.title;
@@ -78,7 +78,11 @@ const Table = props => {
78
78
  const {
79
79
  bgColor,
80
80
  borderColor,
81
- xsHidden
81
+ xsHidden,
82
+ fontFamily,
83
+ fontWeight,
84
+ textSize,
85
+ textColor
82
86
  } = element;
83
87
  const editor = useSlateStatic();
84
88
  const selected = useSelected();
@@ -190,7 +194,8 @@ const Table = props => {
190
194
  editor: editor,
191
195
  otherProps: {
192
196
  dragRowBtnCls,
193
- tablePath: path
197
+ tablePath: path,
198
+ openSetttings
194
199
  },
195
200
  children: [/*#__PURE__*/_jsxs("div", {
196
201
  style: {
@@ -213,7 +218,11 @@ const Table = props => {
213
218
  style: {
214
219
  background: bgColor,
215
220
  border: borderColor ? `1px solid ${borderColor}` : "",
216
- width: "auto"
221
+ width: "auto",
222
+ fontFamily,
223
+ fontWeight,
224
+ fontSize: textSize,
225
+ color: textColor
217
226
  },
218
227
  ref: tableRef,
219
228
  children: /*#__PURE__*/_jsx(TableBody, {
@@ -1,65 +1,17 @@
1
1
  import { toolbarGroups } from "../../Toolbar/toolbarGroups";
2
2
  import { fontOptions } from "../../utils/font";
3
+ import { capitalizeFirstLetter } from "../../utils/helper";
3
4
  import { jsx as _jsx } from "react/jsx-runtime";
4
- const tableStyle = [{
5
- tab: "Table",
6
- value: "tableSettings",
7
- fields: [{
8
- label: "Table Background",
9
- key: "table.bgColor",
10
- type: "color"
11
- }, {
12
- label: "Cell Border",
13
- key: "table.borderColor",
14
- type: "color"
15
- }]
16
- }, {
17
- tab: "Row",
18
- value: "rowSettings",
19
- fields: [{
20
- label: "Row Background",
21
- key: "row.bgColor",
22
- type: "color"
23
- }, {
24
- label: "Row Border",
25
- key: "row.borderColor",
26
- type: "color"
27
- }]
28
- }, {
29
- tab: "Column",
30
- value: "columnSettings",
31
- fields: [{
32
- label: "Entire Column Background",
33
- key: "col.entireBgColor",
34
- type: "color"
35
- }, {
36
- label: "Selected Cell Background",
37
- key: "col.bgColor",
38
- type: "color"
39
- }, {
40
- label: "Selected Cell Border Color",
41
- key: "col.borderColor",
42
- type: "color"
43
- }]
44
- }, {
45
- tab: "Visibility",
46
- value: "visibility",
47
- fields: [{
48
- label: "Hide on Mobile",
49
- key: "table.xsHidden",
50
- type: "selectBox",
51
- placeholder: "Hide on Mobile"
52
- }]
53
- }];
54
- export default tableStyle;
55
5
  const allTools = toolbarGroups.flat();
56
6
  const fontWeight = allTools.find(f => f.format === "fontWeight");
57
- export const tableRowStyle = [{
58
- tab: "Row",
59
- value: "rowSettings",
60
- fields: [{
7
+ function getKey(prefix, key) {
8
+ const settingKey = prefix === "col" ? capitalizeFirstLetter(key) : key;
9
+ return `${prefix}.${settingKey}`;
10
+ }
11
+ function getCommonSettings(prefix) {
12
+ let settings = [{
61
13
  label: "Font Family",
62
- key: "row.fontFamily",
14
+ key: "fontFamily",
63
15
  type: "textOptions",
64
16
  webFont: true,
65
17
  options: fontOptions,
@@ -73,70 +25,71 @@ export const tableRowStyle = [{
73
25
  }
74
26
  }, {
75
27
  label: "Font Weight",
76
- key: "row.fontWeight",
28
+ key: "fontWeight",
77
29
  type: "textOptions",
78
30
  options: fontWeight?.options,
79
31
  width: 7
80
32
  }, {
81
33
  label: "Font Size",
82
- key: "row.textSize",
34
+ key: "textSize",
83
35
  type: "fontSize",
84
36
  width: 5,
85
37
  placeholder: "16px or 1em"
86
38
  }, {
87
39
  label: "Text Color",
88
- key: "row.textColor",
40
+ key: "textColor",
89
41
  type: "color"
90
42
  }, {
91
43
  label: "Background",
92
- key: "row.bgColor",
44
+ key: "bgColor",
93
45
  type: "color"
94
46
  }, {
95
47
  label: "Border",
96
- key: "row.borderColor",
48
+ key: "borderColor",
97
49
  type: "color"
98
- }]
99
- }];
100
- export const tableColumnStyle = [{
101
- tab: "Column",
50
+ }];
51
+
52
+ // modify keys based on setting type (prefix)
53
+ settings = settings.map(s => ({
54
+ ...s,
55
+ key: getKey(prefix, s.key)
56
+ }));
57
+ return settings;
58
+ }
59
+ const tableStyle = [{
60
+ tab: "Table",
61
+ value: "tableSettings",
62
+ fields: getCommonSettings("table")
63
+ }, {
64
+ tab: "Selected cell",
102
65
  value: "columnSettings",
103
66
  fields: [{
104
- label: "Font Family",
105
- key: "col.entireFontFamily",
106
- type: "textOptions",
107
- webFont: true,
108
- options: fontOptions,
109
- renderOption: option => {
110
- return /*#__PURE__*/_jsx("span", {
111
- style: {
112
- fontFamily: option.value
113
- },
114
- children: option.text
115
- });
116
- }
117
- }, {
118
- label: "Font Weight",
119
- key: "col.entireFontWeight",
120
- type: "textOptions",
121
- options: fontWeight?.options,
122
- width: 7
123
- }, {
124
- label: "Font Size",
125
- key: "col.entireTextSize",
126
- type: "fontSize",
127
- width: 5,
128
- placeholder: "16px or 1em"
129
- }, {
130
- label: "Entire Text Color",
131
- key: "col.entireTextColor",
132
- type: "color"
133
- }, {
134
- label: "Background",
135
- key: "col.entireBgColor",
67
+ label: "Selected Cell Background",
68
+ key: "col.bgColor",
136
69
  type: "color"
137
70
  }, {
138
- label: "Border",
139
- key: "col.entireBorderColor",
71
+ label: "Selected Cell Border Color",
72
+ key: "col.borderColor",
140
73
  type: "color"
141
74
  }]
75
+ }, {
76
+ tab: "Visibility",
77
+ value: "visibility",
78
+ fields: [{
79
+ label: "Hide on Mobile",
80
+ key: "table.xsHidden",
81
+ type: "selectBox",
82
+ placeholder: "Hide on Mobile"
83
+ }]
84
+ }];
85
+ export default tableStyle;
86
+ export const tableRowStyle = [{
87
+ tab: "Row",
88
+ value: "rowSettings",
89
+ fields: getCommonSettings("row")
90
+ }];
91
+ export const tableColumnStyle = [{
92
+ tab: "Column",
93
+ value: "columnSettings",
94
+ fields: getCommonSettings("col")
142
95
  }];
@@ -61,8 +61,11 @@ export function getDefaultTableSelection() {
61
61
  export const TableProvider = ({
62
62
  editor,
63
63
  children,
64
- otherProps
64
+ otherProps = {}
65
65
  }) => {
66
+ const {
67
+ openSetttings
68
+ } = otherProps;
66
69
  const [hoverPath, setHoverPath] = useState(null);
67
70
  const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
68
71
  const [tableResizing, setTableResizing] = useState(null);
@@ -148,9 +151,10 @@ export const TableProvider = ({
148
151
  };
149
152
  }, [tableSelection, editor, tableSelection]);
150
153
  useEffect(() => {
151
- // on deselect table on insert
152
- Transforms.deselect(editor);
153
- }, []);
154
+ if (!openSetttings) {
155
+ resetAll();
156
+ }
157
+ }, [openSetttings]);
154
158
  return /*#__PURE__*/_jsx(TableContext.Provider, {
155
159
  value: values,
156
160
  children: /*#__PURE__*/_jsx(DndContext, {
@@ -567,4 +567,8 @@ export const isPageSettings = (event, editor) => {
567
567
  isPageSettingsNode = true;
568
568
  return isPageSettingsNode;
569
569
  }
570
- };
570
+ };
571
+ export function capitalizeFirstLetter(str) {
572
+ if (!str) return str;
573
+ return str.charAt(0).toUpperCase() + str.slice(1);
574
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.9.7",
3
+ "version": "4.9.8",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"