@flozy/editor 2.0.8 → 2.0.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -129,7 +129,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
129
129
  }
130
130
  };
131
131
  const classes = editorStyles({
132
- padHeight: !fullScreen ? otherProps?.padHeight : 120,
132
+ padHeight: !fullScreen ? otherProps?.padHeight : 20,
133
133
  placeHolderColor: invertColor(pageColor || "#FFF"),
134
134
  theme
135
135
  });
@@ -41,9 +41,6 @@ const DialogWrapper = props => {
41
41
  })
42
42
  })
43
43
  }), /*#__PURE__*/_jsx(DialogContent, {
44
- style: {
45
- paddingTop: "12px"
46
- },
47
44
  children: children
48
45
  })]
49
46
  }) : children;
@@ -165,7 +165,7 @@ const EditorButton = props => {
165
165
  background: bgColor || "rgb(30, 75, 122)",
166
166
  borderBlockStyle: "solid",
167
167
  borderColor: borderColor || "transparent",
168
- borderWidth: borderWidth || "1px",
168
+ borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
169
169
  borderRadius: {
170
170
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
171
171
  },
@@ -27,7 +27,8 @@ const Video = ({
27
27
  borderColor,
28
28
  borderStyle,
29
29
  url,
30
- xsHidden
30
+ xsHidden,
31
+ width: oldWidth
31
32
  } = element;
32
33
  const editor = useSlateStatic();
33
34
  const [openSetttings, setOpenSettings] = useState(false);
@@ -40,9 +41,18 @@ const Video = ({
40
41
  horizantal
41
42
  } = alignment || {};
42
43
  const path = ReactEditor.findPath(editor, element);
44
+ const getSize = () => {
45
+ if (element?.size === undefined) {
46
+ return {
47
+ widthInPercent: parseInt(oldWidth)
48
+ };
49
+ } else {
50
+ return element?.size || {};
51
+ }
52
+ };
43
53
  const [size, onMouseDown, resizing, onLoad] = useResize({
44
54
  parentDOM,
45
- size: element?.size,
55
+ size: getSize(),
46
56
  onChange: uSize => {
47
57
  Transforms.setNodes(editor, {
48
58
  size: uSize
@@ -113,10 +123,10 @@ const Video = ({
113
123
  } else {
114
124
  return {
115
125
  width: {
116
- ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
126
+ ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
117
127
  },
118
128
  height: url ? {
119
- ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
129
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
120
130
  } : "auto"
121
131
  };
122
132
  }
@@ -175,6 +185,8 @@ const Video = ({
175
185
  xs: xsHidden ? "none" : "flex"
176
186
  },
177
187
  flexDirection: "row",
188
+ flexWrap: "wrap",
189
+ // to support oldWidth with link
178
190
  width: `100%`,
179
191
  justifyContent: horizantal,
180
192
  alignContent: vertical
@@ -234,8 +234,11 @@ const editorStyles = ({
234
234
  "& .MuiDialogTitle-root": {
235
235
  position: "absolute",
236
236
  top: 0,
237
- right: "12px",
237
+ right: "0px",
238
238
  zIndex: 100
239
+ },
240
+ "& .MuiDialogContent-root": {
241
+ padding: "0px"
239
242
  }
240
243
  }
241
244
  }
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Grid } from "@mui/material";
2
+ import { Grid, Box } from "@mui/material";
3
3
  import { toolbarGroups } from "../toolbarGroups";
4
4
  import { RenderToolbarIcon } from "../Toolbar";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,7 @@ const AddElements = props => {
17
17
  const filteredElements = elements.filter(f => (hideTools || []).indexOf(f.type) === -1);
18
18
  return /*#__PURE__*/_jsx(Grid, {
19
19
  container: true,
20
+ className: "elements-wrpr-pp",
20
21
  sx: classes.textFormatWrapper,
21
22
  spacing: 2,
22
23
  style: {
@@ -24,8 +25,11 @@ const AddElements = props => {
24
25
  },
25
26
  children: filteredElements.map(m => {
26
27
  return /*#__PURE__*/_jsx(Grid, {
28
+ className: "ele-item-single",
27
29
  item: true,
28
30
  xs: 6,
31
+ md: 4,
32
+ lg: 4,
29
33
  children: /*#__PURE__*/_jsx(RenderToolbarIcon, {
30
34
  editor: editor,
31
35
  element: m,
@@ -5,6 +5,14 @@ import FullViewCard from "./FullViewCard";
5
5
  import ButtonTemplateCard from "./ButtonTemplatesCard";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const CATEGORIES_SORT_INDEX = {
9
+ Brief: 1,
10
+ Buttons: 2,
11
+ Banners: 3,
12
+ Tables: 4,
13
+ Contract: 5,
14
+ Proposal: 6
15
+ };
8
16
  const Categories = props => {
9
17
  const {
10
18
  value,
@@ -65,6 +73,9 @@ const AddTemplates = props => {
65
73
  useEffect(() => {
66
74
  getTemplatesList();
67
75
  }, []);
76
+ const sortCategory = (a, b) => {
77
+ return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
78
+ };
68
79
  const getTemplatesList = async () => {
69
80
  setLoading(true);
70
81
  const result = await services("listTemplates", {});
@@ -74,7 +85,7 @@ const AddTemplates = props => {
74
85
  a.push(b.category);
75
86
  }
76
87
  return a;
77
- }, []);
88
+ }, []).sort(sortCategory);
78
89
  const ft = tempList?.filter(f => f.category === lic[0]);
79
90
  setTemplates(tempList);
80
91
  setCategories(lic);
@@ -50,9 +50,22 @@ const usePopupStyle = theme => ({
50
50
  textFormatWrapper: {
51
51
  padding: "0px 16px 16px 16px",
52
52
  width: "370px",
53
+ maxWidth: "100%",
53
54
  // 30% of window height
54
55
  maxHeight: `${window.innerHeight * 0.45}px`,
55
56
  overflow: "auto",
57
+ "&.elements-wrpr-pp": {
58
+ width: "500px",
59
+ maxWidth: "100%",
60
+ "&.fullscreen": {
61
+ width: "100%",
62
+ maxHeight: "fit-content"
63
+ },
64
+ "& .ele-item-single": {
65
+ paddingLeft: "4px",
66
+ paddingTop: "4px"
67
+ }
68
+ },
56
69
  "&.templates": {
57
70
  width: "500px",
58
71
  maxWidth: "100%",
@@ -43,6 +43,39 @@ const ELEMENT_TAGS = {
43
43
  }),
44
44
  PRE: () => ({
45
45
  type: "code"
46
+ }),
47
+ META: () => ({
48
+ type: "paragraph"
49
+ }),
50
+ STYLE: () => ({
51
+ type: "paragraph"
52
+ }),
53
+ "GOOGLE-SHEETS-HTML-ORIGIN": () => ({
54
+ type: "paragraph"
55
+ }),
56
+ TABLE: () => ({
57
+ type: "table"
58
+ }),
59
+ THEAD: () => ({
60
+ type: "table-head"
61
+ }),
62
+ TBODY: () => ({
63
+ type: "table-body"
64
+ }),
65
+ TH: () => ({
66
+ type: "table-cell"
67
+ }),
68
+ TR: () => ({
69
+ type: "table-row"
70
+ }),
71
+ TD: () => ({
72
+ type: "table-cell"
73
+ }),
74
+ COLGROUP: () => ({
75
+ type: "paragraph"
76
+ }),
77
+ COL: () => ({
78
+ type: "paragraph"
46
79
  })
47
80
  };
48
81
 
@@ -82,6 +115,7 @@ const deserialize = el => {
82
115
  nodeName
83
116
  } = el;
84
117
  let parent = el;
118
+ console.log(nodeName);
85
119
  if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
86
120
  parent = el.childNodes[0];
87
121
  }
@@ -40,9 +40,18 @@ const withEmbeds = editor => {
40
40
  select: true // Focus on this node once inserted
41
41
  });
42
42
  } else {
43
- insertBreak(...args);
43
+ // to disable default leafs
44
+ Transforms.insertNodes(editor, {
45
+ type: "paragraph",
46
+ children: [{
47
+ text: ""
48
+ }]
49
+ }, {
50
+ select: true // Focus on this node once inserted
51
+ });
44
52
  }
45
53
  };
54
+
46
55
  return editor;
47
56
  };
48
57
  export default withEmbeds;
@@ -15,6 +15,7 @@ const withHtml = editor => {
15
15
  editor.insertData = data => {
16
16
  const slateHTML = data?.getData("application/x-slate-fragment");
17
17
  const html = data?.getData("text/html");
18
+ console.log(slateHTML, "****", html);
18
19
  if (slateHTML) {
19
20
  const [tableNode] = Editor.nodes(editor, {
20
21
  match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -29,6 +30,7 @@ const withHtml = editor => {
29
30
  }
30
31
  } else if (html) {
31
32
  const parsed = new DOMParser().parseFromString(html, "text/html");
33
+ console.log(parsed.body);
32
34
  const fragment = deserialize(parsed.body);
33
35
  Transforms.insertFragment(editor, fragment);
34
36
  return;
@@ -5,17 +5,6 @@ const withTable = editor => {
5
5
  deleteBackward,
6
6
  deleteForward
7
7
  } = editor;
8
-
9
- // editor.insertData = (data) => {
10
- // try {
11
- // // const text = data.getData("text/plain");
12
- // Transforms.insertFragment(editor, data);
13
- // return;
14
- // } catch (err) {
15
- // console.log(err);
16
- // }
17
- // };
18
-
19
8
  editor.deleteBackward = unit => {
20
9
  const {
21
10
  selection
@@ -201,7 +201,7 @@ export const getMarked = (leaf, children) => {
201
201
  });
202
202
  }
203
203
  // cover under single span
204
- if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight) {
204
+ if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
205
205
  const family = fontFamilyMap[leaf?.fontFamily];
206
206
  const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
207
207
  background: leaf?.color?.concat("text"),
@@ -282,7 +282,8 @@ export const getBlock = props => {
282
282
  padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
283
283
  borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
284
284
  margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
285
- width: element?.bgColor ? "calc(100% - 16px)" : "100%"
285
+ width: element?.bgColor ? "calc(100% - 16px)" : "100%",
286
+ borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
286
287
  },
287
288
  children: children
288
289
  });
@@ -353,6 +354,14 @@ export const getBlock = props => {
353
354
  return /*#__PURE__*/_jsx(Table, {
354
355
  ...props
355
356
  });
357
+ case "table-head":
358
+ return /*#__PURE__*/_jsx("thead", {
359
+ children: children
360
+ });
361
+ case "table-body":
362
+ return /*#__PURE__*/_jsx("tbody", {
363
+ children: children
364
+ });
356
365
  case "table-row":
357
366
  return /*#__PURE__*/_jsx(TableRow, {
358
367
  ...props
@@ -390,8 +390,45 @@ export const createTableCell = text => {
390
390
  }]
391
391
  };
392
392
  };
393
+
394
+ // const createHead = (cellText) => {
395
+ // const newHead = Array.from(cellText, (value) => createTableHeadCell(value));
396
+ // return {
397
+ // type: "table-head",
398
+ // children: [
399
+ // {
400
+ // type: "table-row",
401
+ // children: newHead,
402
+ // },
403
+ // ],
404
+ // };
405
+ // };
406
+
407
+ // export const createTableHeadCell = (text) => {
408
+ // return {
409
+ // type: "table-cell",
410
+ // children: [
411
+ // {
412
+ // type: "paragraph",
413
+ // children: [{ text }],
414
+ // },
415
+ // ],
416
+ // };
417
+ // };
418
+
419
+ // const createTbody = (children) => {
420
+ // return [
421
+ // {
422
+ // type: "table-body",
423
+ // children: children,
424
+ // },
425
+ // ];
426
+ // };
427
+
393
428
  const createTableNode = (cellText, rows, columns) => {
429
+ // const tableHead = Array.from([cellText[0]], (value) => createHead(value));
394
430
  const tableChildren = Array.from(cellText, value => createRow(value));
431
+ // const tbodyChildren = createTbody(tableChildren);
395
432
  let tableNode = {
396
433
  type: "table",
397
434
  children: tableChildren,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"