@flozy/editor 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/dist/Editor/CommonEditor.js +131 -104
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +27 -36
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +13 -12
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +10 -9
  7. package/dist/Editor/Elements/Button/EditorButton.js +4 -20
  8. package/dist/Editor/Elements/Carousel/Carousel.js +47 -28
  9. package/dist/Editor/Elements/Carousel/CarouselButton.js +7 -8
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +133 -0
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.js +39 -19
  12. package/dist/Editor/Elements/Color Picker/Styles.js +51 -0
  13. package/dist/Editor/Elements/Color Picker/defaultColors.js +1 -1
  14. package/dist/Editor/Elements/Embed/Embed.js +33 -126
  15. package/dist/Editor/Elements/Embed/Image.js +15 -7
  16. package/dist/Editor/Elements/Embed/Video.js +12 -5
  17. package/dist/Editor/Elements/Emoji/EmojiButton.js +73 -0
  18. package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -0
  19. package/dist/Editor/Elements/Form/Form.js +24 -12
  20. package/dist/Editor/Elements/Form/FormButton.js +11 -9
  21. package/dist/Editor/Elements/Form/FormElements/FormText.js +1 -0
  22. package/dist/Editor/Elements/Form/FormField.js +7 -1
  23. package/dist/Editor/Elements/Grid/Grid.js +15 -4
  24. package/dist/Editor/Elements/Grid/GridButton.js +52 -29
  25. package/dist/Editor/Elements/Grid/GridItem.js +30 -19
  26. package/dist/Editor/Elements/Grid/Styles.js +11 -0
  27. package/dist/Editor/Elements/List/CheckList.js +57 -0
  28. package/dist/Editor/Elements/List/CheckListButton.js +24 -0
  29. package/dist/Editor/Elements/NewLine/NewLineButton.js +14 -14
  30. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +17 -60
  31. package/dist/Editor/Elements/Signature/Signature.js +9 -3
  32. package/dist/Editor/Elements/Signature/SignatureButton.js +10 -9
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +42 -6
  34. package/dist/Editor/Elements/SimpleText.js +62 -0
  35. package/dist/Editor/Elements/Table/Styles.js +66 -0
  36. package/dist/Editor/Elements/Table/Table.js +33 -16
  37. package/dist/Editor/Elements/Table/TableCell.js +54 -24
  38. package/dist/Editor/Elements/Table/TableSelector.js +13 -15
  39. package/dist/Editor/Elements/Table/table.css +0 -10
  40. package/dist/Editor/Elements/TopBanner/Styles.js +33 -0
  41. package/dist/Editor/Elements/TopBanner/TopBanner.js +106 -0
  42. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +47 -0
  43. package/dist/Editor/Styles/EditorStyles.js +50 -0
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +8 -3
  45. package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +16 -16
  46. package/dist/Editor/Toolbar/FormatTools/FontSize.js +17 -17
  47. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -3
  48. package/dist/Editor/Toolbar/FormatTools/index.js +3 -2
  49. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +101 -0
  50. package/dist/Editor/Toolbar/Mini/Options/Options.js +17 -0
  51. package/dist/Editor/Toolbar/Mini/Styles.js +30 -0
  52. package/dist/Editor/Toolbar/PopupTool/AddElements.js +32 -0
  53. package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +115 -0
  54. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +65 -0
  55. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +160 -6
  56. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +263 -80
  57. package/dist/Editor/Toolbar/PopupTool/index.js +33 -44
  58. package/dist/Editor/Toolbar/Toolbar.js +178 -134
  59. package/dist/Editor/Toolbar/styles.css +1 -1
  60. package/dist/Editor/Toolbar/toolbarGroups.js +83 -34
  61. package/dist/Editor/assets/svg/AddElementIcon.js +29 -0
  62. package/dist/Editor/assets/svg/AddTemplateIcon.js +29 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +29 -0
  64. package/dist/Editor/common/Icon.js +48 -5
  65. package/dist/Editor/common/ImageList.js +10 -4
  66. package/dist/Editor/common/ImageSelector/ImageSelector.js +117 -0
  67. package/dist/Editor/common/ImageSelector/Options/AddLink.js +44 -0
  68. package/dist/Editor/common/ImageSelector/Options/ChooseAssets.js +39 -0
  69. package/dist/Editor/common/ImageSelector/Options/Upload.js +30 -0
  70. package/dist/Editor/common/ImageSelector/Styles.js +41 -0
  71. package/dist/Editor/common/ImageUploader.js +19 -8
  72. package/dist/Editor/common/MentionsPopup/ElementsListCard.js +66 -0
  73. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +70 -0
  74. package/dist/Editor/common/MentionsPopup/Styles.js +68 -0
  75. package/dist/Editor/common/MentionsPopup/index.js +129 -0
  76. package/dist/Editor/common/Shorthands/elements.js +191 -0
  77. package/dist/Editor/common/Shorthands/index.js +7 -0
  78. package/dist/Editor/common/Shorthands/mentions.js +8 -0
  79. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +21 -73
  80. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +3 -20
  81. package/dist/Editor/common/StyleBuilder/index.js +0 -1
  82. package/dist/Editor/common/StyleBuilder/tableStyle.js +9 -5
  83. package/dist/Editor/common/ToolbarIcon.js +43 -0
  84. package/dist/Editor/common/Uploader.js +10 -7
  85. package/dist/Editor/common/iconslist.js +46 -1
  86. package/dist/Editor/hooks/useMentions.js +104 -17
  87. package/dist/Editor/hooks/useMouseMove.js +53 -0
  88. package/dist/Editor/hooks/useScroll.js +26 -0
  89. package/dist/Editor/plugins/withEmbeds.js +12 -0
  90. package/dist/Editor/service/fileupload.js +2 -2
  91. package/dist/Editor/utils/SlateUtilityFunctions.js +61 -10
  92. package/dist/Editor/utils/carousel.js +5 -2
  93. package/dist/Editor/utils/carouselItem.js +2 -2
  94. package/dist/Editor/utils/customHooks/useResize.js +2 -3
  95. package/dist/Editor/utils/customHooks/useTableResize.js +2 -1
  96. package/dist/Editor/utils/embed.js +19 -5
  97. package/dist/Editor/utils/emoji.js +8 -0
  98. package/dist/Editor/utils/events.js +49 -12
  99. package/dist/Editor/utils/form.js +3 -9
  100. package/dist/Editor/utils/formfield.js +2 -1
  101. package/dist/Editor/utils/grid.js +44 -8
  102. package/dist/Editor/utils/gridItem.js +4 -3
  103. package/dist/Editor/utils/insertNewLine.js +12 -0
  104. package/dist/Editor/utils/mentions.js +14 -10
  105. package/dist/Editor/utils/pageSettings.js +67 -0
  106. package/dist/Editor/utils/signature.js +6 -8
  107. package/dist/Editor/utils/table.js +79 -18
  108. package/dist/Editor/utils/topBanner.js +58 -0
  109. package/package.json +4 -1
  110. package/dist/Editor/common/MentionsPopup.js +0 -56
@@ -0,0 +1,57 @@
1
+ import React from "react";
2
+ import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
3
+ import { Transforms } from "slate";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ const CheckList = ({
7
+ attributes,
8
+ children,
9
+ element
10
+ }) => {
11
+ const editor = useSlateStatic();
12
+ const readOnly = useReadOnly();
13
+ const {
14
+ checked
15
+ } = element;
16
+ return /*#__PURE__*/_jsxs("div", {
17
+ ...attributes,
18
+ className: "checkbox-list",
19
+ style: {
20
+ textAlign: element.alignment || "left"
21
+ },
22
+ children: [/*#__PURE__*/_jsxs("span", {
23
+ contentEditable: false,
24
+ className: "checkbox-edit",
25
+ children: [/*#__PURE__*/_jsx("input", {
26
+ type: "checkbox",
27
+ className: "styled-checkbox",
28
+ checked: checked,
29
+ style: {
30
+ marginRight: "8px"
31
+ },
32
+ onChange: event => {
33
+ const path = ReactEditor.findPath(editor, element);
34
+ const newProperties = {
35
+ checked: event.target.checked
36
+ };
37
+ Transforms.setNodes(editor, newProperties, {
38
+ at: path
39
+ });
40
+ }
41
+ }), /*#__PURE__*/_jsx("span", {
42
+ className: "checkbox-inner"
43
+ })]
44
+ }), /*#__PURE__*/_jsx("span", {
45
+ contentEditable: !readOnly,
46
+ suppressContentEditableWarning: true,
47
+ className: "",
48
+ style: {
49
+ flex: 1,
50
+ opacity: checked ? 1 : 1,
51
+ textDecoration: !checked ? "none" : "none"
52
+ },
53
+ children: children
54
+ })]
55
+ });
56
+ };
57
+ export default CheckList;
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import Icon from "../../common/Icon";
3
+ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
4
+ import ToolbarIcon from "../../common/ToolbarIcon";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { Fragment as _Fragment } from "react/jsx-runtime";
7
+ const CheckListButton = props => {
8
+ const {
9
+ editor
10
+ } = props;
11
+ const handleClick = type => () => {
12
+ toggleBlock(editor, type);
13
+ };
14
+ return /*#__PURE__*/_jsx(_Fragment, {
15
+ children: /*#__PURE__*/_jsx(ToolbarIcon, {
16
+ title: "Check List",
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "checkList"
19
+ }),
20
+ onClick: handleClick("checkList")
21
+ })
22
+ });
23
+ };
24
+ export default CheckListButton;
@@ -1,10 +1,12 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
4
3
  import { Transforms } from "slate";
5
4
  import { ReactEditor, useSlateStatic } from "slate-react";
5
+ import ToolbarIcon from "../../common/ToolbarIcon";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
- const NewLineButton = () => {
7
+ const NewLineButton = ({
8
+ icoBtnType
9
+ }) => {
8
10
  const editor = useSlateStatic();
9
11
  const onAddNewLine = () => {
10
12
  Transforms.insertNodes(editor, [{
@@ -18,19 +20,17 @@ const NewLineButton = () => {
18
20
  });
19
21
  ReactEditor.focus(editor);
20
22
  };
21
- return /*#__PURE__*/_jsx(Tooltip, {
23
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
22
24
  title: "New Line",
23
- arrow: true,
24
- children: /*#__PURE__*/_jsx(IconButton, {
25
- onClick: onAddNewLine,
26
- children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
- sx: {
28
- fill: "#64748B",
29
- width: "18px",
30
- height: "18px"
31
- }
32
- })
33
- })
25
+ onClick: onAddNewLine,
26
+ icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
+ sx: {
28
+ fill: "#64748B",
29
+ width: "18px",
30
+ height: "18px"
31
+ }
32
+ }),
33
+ icoBtnType: icoBtnType
34
34
  });
35
35
  };
36
36
  export default NewLineButton;
@@ -1,15 +1,16 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Editor, Element } from "slate";
3
- import { IconButton, Tooltip } from "@mui/material";
4
- import { useSlateStatic, ReactEditor } from "slate-react";
2
+ import { useSlateStatic } from "slate-react";
5
3
  import PageSettingsPopup from "./PageSettingsPopup";
6
4
  import { PageSettings } from "../../common/iconslist";
5
+ import ToolbarIcon from "../../common/ToolbarIcon";
6
+ import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const PageSettingsButton = props => {
11
11
  const {
12
- customProps
12
+ customProps,
13
+ icoBtnType
13
14
  } = props;
14
15
  const [openSetttings, setOpenSettings] = useState(false);
15
16
  const editor = useSlateStatic();
@@ -17,77 +18,33 @@ const PageSettingsButton = props => {
17
18
  const {
18
19
  element,
19
20
  path
20
- } = getPageSettingsPath();
21
+ } = getPageSettings(editor);
21
22
  setOpenSettings({
22
23
  element: element?.pageProps || {},
23
24
  path
24
25
  });
25
26
  };
26
- const getPageSettingsPath = () => {
27
+ const onSave = data => {
27
28
  try {
28
- const [pageSettingsNode] = Editor.nodes(editor, {
29
- at: [],
30
- match: n => {
31
- return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
32
- }
33
- });
34
- if (pageSettingsNode && pageSettingsNode[0]) {
35
- const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
36
- return {
37
- path,
38
- element: pageSettingsNode[0]
39
- };
40
- } else {
41
- return {
42
- path: null
43
- };
44
- }
29
+ const updateData = {
30
+ ...data
31
+ };
32
+ delete updateData.children;
33
+ updatePageSettings(editor, updateData);
34
+ onClose();
45
35
  } catch (err) {
46
36
  console.log(err);
47
- return {
48
- path: null
49
- };
50
- }
51
- };
52
- const onSave = data => {
53
- const updateData = {
54
- ...data
55
- };
56
- delete updateData.children;
57
- if (openSetttings?.path) {
58
- Transforms.setNodes(editor, {
59
- pageProps: {
60
- ...updateData
61
- }
62
- }, {
63
- at: openSetttings?.path
64
- });
65
- } else {
66
- Transforms.insertNodes(editor, [{
67
- type: "page-settings",
68
- pageProps: {
69
- ...updateData
70
- },
71
- children: [{
72
- text: ""
73
- }]
74
- }], {
75
- at: [editor.children.length]
76
- });
77
37
  }
78
- onClose();
79
38
  };
80
39
  const onClose = () => {
81
40
  setOpenSettings(false);
82
41
  };
83
42
  return /*#__PURE__*/_jsxs(_Fragment, {
84
- children: [/*#__PURE__*/_jsx(Tooltip, {
43
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
85
44
  title: "Page Settings",
86
- arrow: true,
87
- children: /*#__PURE__*/_jsx(IconButton, {
88
- onClick: onSettings,
89
- children: /*#__PURE__*/_jsx(PageSettings, {})
90
- })
45
+ onClick: onSettings,
46
+ icon: /*#__PURE__*/_jsx(PageSettings, {}),
47
+ icoBtnType: icoBtnType
91
48
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
92
49
  element: openSetttings?.element || {},
93
50
  onSave: onSave,
@@ -29,22 +29,28 @@ const Signature = props => {
29
29
  }],
30
30
  ...data
31
31
  }], {
32
- at: [...path, 0]
32
+ at: path
33
33
  });
34
34
  };
35
35
  const onClear = () => {
36
36
  Transforms.removeNodes(editor, {
37
- at: [...path, 0]
37
+ at: path
38
38
  });
39
39
  };
40
40
  return /*#__PURE__*/_jsxs("div", {
41
41
  className: `signature-container`,
42
42
  ...attributes,
43
+ contentEditable: false,
43
44
  children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
44
45
  customProps: customProps,
45
46
  onSave: onSave,
46
47
  onClear: onClear
47
- }) : null, children]
48
+ }) : null, /*#__PURE__*/_jsx("span", {
49
+ style: {
50
+ display: "none"
51
+ },
52
+ children: children
53
+ })]
48
54
  });
49
55
  };
50
56
  export default Signature;
@@ -1,22 +1,23 @@
1
1
  import React from "react";
2
- import { IconButton, Tooltip } from "@mui/material";
3
2
  import { insertSignature } from "../../utils/signature";
4
- import { SignatureIcon } from "../../common/iconslist";
3
+ import ToolbarIcon from "../../common/ToolbarIcon";
4
+ import Icon from "../../common/Icon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const SignatureButton = props => {
7
7
  const {
8
- editor
8
+ editor,
9
+ icoBtnType
9
10
  } = props;
10
11
  const handleInsertSignature = () => {
11
12
  insertSignature(editor);
12
13
  };
13
- return /*#__PURE__*/_jsx(Tooltip, {
14
+ return /*#__PURE__*/_jsx(ToolbarIcon, {
14
15
  title: "Signature",
15
- arrow: true,
16
- children: /*#__PURE__*/_jsx(IconButton, {
17
- onClick: handleInsertSignature,
18
- children: /*#__PURE__*/_jsx(SignatureIcon, {})
19
- })
16
+ onClick: handleInsertSignature,
17
+ icon: /*#__PURE__*/_jsx(Icon, {
18
+ icon: "signature"
19
+ }),
20
+ icoBtnType: icoBtnType
20
21
  });
21
22
  };
22
23
  export default SignatureButton;
@@ -19,6 +19,9 @@ const SignaturePopup = props => {
19
19
  customProps,
20
20
  className
21
21
  } = props;
22
+ const {
23
+ readOnly
24
+ } = customProps;
22
25
  const [open, setOpen] = useState(false);
23
26
  const [tab, setTab] = useState(0);
24
27
  const SeletectedTab = SignatureOptions[tab];
@@ -77,7 +80,7 @@ const SignaturePopup = props => {
77
80
  return /*#__PURE__*/_jsxs(_Fragment, {
78
81
  children: [/*#__PURE__*/_jsx("div", {
79
82
  className: `signature-btn-container`,
80
- children: /*#__PURE__*/_jsx("button", {
83
+ children: /*#__PURE__*/_jsx(Button, {
81
84
  contentEditable: false,
82
85
  onClick: handleOpen,
83
86
  children: "Sign Here"
@@ -187,13 +190,14 @@ const SignaturePopup = props => {
187
190
  sx: {
188
191
  pt: 2
189
192
  },
193
+ spacing: 1,
190
194
  style: {
191
195
  display: "flex",
192
196
  justifyContent: "space-between"
193
197
  },
194
198
  children: [/*#__PURE__*/_jsxs(Grid, {
195
199
  item: true,
196
- xs: 5,
200
+ xs: 6,
197
201
  style: {
198
202
  display: "flex",
199
203
  alignItems: "center"
@@ -207,7 +211,10 @@ const SignaturePopup = props => {
207
211
  children: "Name:"
208
212
  })
209
213
  }), /*#__PURE__*/_jsx(Grid, {
214
+ item: true,
215
+ xs: 12,
210
216
  children: /*#__PURE__*/_jsx(TextField, {
217
+ fullWidth: true,
211
218
  id: "signedBy",
212
219
  name: "signedBy",
213
220
  placeholder: "Enter Name",
@@ -217,7 +224,7 @@ const SignaturePopup = props => {
217
224
  })]
218
225
  }), /*#__PURE__*/_jsxs(Grid, {
219
226
  item: true,
220
- xs: 5,
227
+ xs: 6,
221
228
  style: {
222
229
  display: "flex",
223
230
  alignItems: "center"
@@ -231,6 +238,8 @@ const SignaturePopup = props => {
231
238
  children: "Date:"
232
239
  })
233
240
  }), /*#__PURE__*/_jsx(Grid, {
241
+ item: true,
242
+ xs: 12,
234
243
  children: /*#__PURE__*/_jsx(DatePicker, {
235
244
  showIcon: true,
236
245
  id: "signedOn",
@@ -244,6 +253,33 @@ const SignaturePopup = props => {
244
253
  }
245
254
  })
246
255
  })]
256
+ }), /*#__PURE__*/_jsxs(Grid, {
257
+ item: true,
258
+ xs: 6,
259
+ style: {
260
+ display: "flex",
261
+ alignItems: "center"
262
+ },
263
+ children: [/*#__PURE__*/_jsx(Grid, {
264
+ style: {
265
+ marginRight: "8px"
266
+ },
267
+ children: /*#__PURE__*/_jsx("label", {
268
+ htmlFor: "signedByEmail",
269
+ children: "Email:"
270
+ })
271
+ }), /*#__PURE__*/_jsx(Grid, {
272
+ item: true,
273
+ xs: 12,
274
+ children: /*#__PURE__*/_jsx(TextField, {
275
+ fullWidth: true,
276
+ id: "signedByEmail",
277
+ name: "signedByEmail",
278
+ placeholder: "Enter Email",
279
+ size: "small",
280
+ onChange: onChange
281
+ })
282
+ })]
247
283
  })]
248
284
  })]
249
285
  }), /*#__PURE__*/_jsxs(DialogActions, {
@@ -293,11 +329,11 @@ const SignaturePopup = props => {
293
329
  })
294
330
  })]
295
331
  }) : null, /*#__PURE__*/_jsxs(_Fragment, {
296
- children: [/*#__PURE__*/_jsx(Button, {
332
+ children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
297
333
  onClick: handleClear,
298
334
  className: "secondaryBtn",
299
- children: "Clear"
300
- }), /*#__PURE__*/_jsx(Button, {
335
+ children: "Delete"
336
+ }) : null, /*#__PURE__*/_jsx(Button, {
301
337
  onClick: handleSave,
302
338
  className: "primaryBtn",
303
339
  children: "Save"
@@ -0,0 +1,62 @@
1
+ import React from "react";
2
+ import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
3
+ import { Node } from "slate";
4
+ import { Box } from "@mui/material";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const SimpleTextStyle = () => ({
8
+ root: {
9
+ position: "relative",
10
+ padding: "0px",
11
+ "& .placeholder-simple-text": {
12
+ color: "#B8C5D7",
13
+ background: "#FFF",
14
+ position: "absolute",
15
+ zIndex: -1,
16
+ left: "4px",
17
+ top: 0,
18
+ bottom: 0,
19
+ margin: "auto",
20
+ pointerEvents: "none",
21
+ height: "18px",
22
+ padding: "0px",
23
+ "& .bg-pad-sl": {
24
+ padding: "2px 4px 2px 4px",
25
+ background: "#F2F6FA",
26
+ fontSize: "12px"
27
+ }
28
+ }
29
+ }
30
+ });
31
+ const SimpleText = props => {
32
+ const {
33
+ element,
34
+ attributes,
35
+ children
36
+ } = props;
37
+ const classes = SimpleTextStyle();
38
+ const editor = useSlateStatic();
39
+ const selected = useSelected();
40
+ const path = ReactEditor.findPath(editor, element);
41
+ // const parentPath = Path.parent(path);
42
+ // const parentNode = Node.get(editor, parentPath);
43
+ const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
44
+ const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
45
+ return /*#__PURE__*/_jsxs(Box, {
46
+ ...element.attr,
47
+ ...attributes,
48
+ className: `simple-text`,
49
+ sx: classes.root,
50
+ children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
51
+ className: "placeholder-simple-text",
52
+ children: ["Type ", /*#__PURE__*/_jsx("span", {
53
+ className: "bg-pad-sl",
54
+ children: "/"
55
+ }), " for browse elements"]
56
+ }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
57
+ className: "placeholder-simple-text",
58
+ children: "Write Something..."
59
+ }) : null]
60
+ });
61
+ };
62
+ export default SimpleText;
@@ -0,0 +1,66 @@
1
+ const TableStyles = () => ({
2
+ tableToolBar: {
3
+ position: "absolute",
4
+ top: "-34px",
5
+ left: 0,
6
+ backgroundColor: "#FFF",
7
+ border: "1px solid rgba(37, 99, 235, 0.32)",
8
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
9
+ borderRadius: "0px",
10
+ width: "32px",
11
+ height: "32px",
12
+ overflow: "hidden",
13
+ transition: "all 0.3s",
14
+ "& button": {
15
+ "& svg": {
16
+ width: "16px",
17
+ height: "16px"
18
+ }
19
+ },
20
+ "&.active": {
21
+ width: "auto",
22
+ "& .toggle": {
23
+ rotate: "180deg"
24
+ }
25
+ },
26
+ "& .toolbtn": {
27
+ "& svg": {
28
+ stroke: "rgb(100, 116, 139)"
29
+ }
30
+ }
31
+ },
32
+ table: {
33
+ "& td": {
34
+ padding: "8px 8px",
35
+ border: "1px solid #E0E0E0",
36
+ "&.selection": {
37
+ "& *::selection": {
38
+ background: "transparent"
39
+ }
40
+ }
41
+ },
42
+ "& .selection-area-tc": {
43
+ position: "absolute",
44
+ width: "100%",
45
+ height: "100%",
46
+ top: 0,
47
+ left: 0,
48
+ background: "rgba(149, 218, 255, .3)",
49
+ pointerEvents: "none"
50
+ }
51
+ },
52
+ cellResizer: {
53
+ position: "absolute",
54
+ cursor: "col-resize",
55
+ right: "-2px",
56
+ top: 0,
57
+ background: "transparent",
58
+ width: "4px",
59
+ borderRadius: "0px",
60
+ zIndex: 1,
61
+ "&:hover": {
62
+ background: "#ccc"
63
+ }
64
+ }
65
+ });
66
+ export default TableStyles;
@@ -1,18 +1,21 @@
1
1
  import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic } from "slate-react";
4
- import { IconButton } from "@mui/material";
4
+ import { Box, IconButton, Tooltip, Table as TableComp, TableBody } 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";
8
8
  import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
9
9
  import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
10
+ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
11
+ import MoreVertIcon from "@mui/icons-material/MoreVert";
10
12
  import SettingsIcon from "@mui/icons-material/Settings";
11
13
  import DeleteCellIcon from "./DeleteCellIcon";
12
14
  import DeleteRowIcon from "./DeleteRowIcon";
13
15
  import { TableUtil } from "../../utils/table";
14
16
  import TablePopup from "./TablePopup";
15
17
  import "./table.css";
18
+ import TableStyles from "./Styles";
16
19
  import { jsx as _jsx } from "react/jsx-runtime";
17
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
21
  const TABLE_MENUS = [{
@@ -75,10 +78,12 @@ const Table = props => {
75
78
  children,
76
79
  customProps
77
80
  } = props;
81
+ const classes = TableStyles();
78
82
  const {
79
83
  readOnly
80
84
  } = customProps;
81
85
  const [openSetttings, setOpenSettings] = useState(false);
86
+ const [exandTools, setExpandTools] = useState(false);
82
87
  const {
83
88
  bgColor,
84
89
  borderColor
@@ -117,27 +122,38 @@ const Table = props => {
117
122
  return;
118
123
  }
119
124
  };
125
+ const handleExpand = () => {
126
+ setExpandTools(!exandTools);
127
+ };
120
128
  const ToolBar = () => {
121
- return selected ? /*#__PURE__*/_jsx("div", {
129
+ return selected ? /*#__PURE__*/_jsxs(Box, {
130
+ component: "div",
122
131
  contentEditable: false,
123
- className: "tableToolBar",
124
- style: {
125
- position: "absolute",
126
- top: "-40px",
127
- left: 0,
128
- backgroundColor: "#CCC"
129
- },
130
- children: TABLE_MENUS.map(({
132
+ className: `tableToolBar ${exandTools ? "active" : ""}`,
133
+ sx: classes.tableToolBar,
134
+ children: [/*#__PURE__*/_jsx(Tooltip, {
135
+ title: "Show Tools",
136
+ arrow: true,
137
+ onClick: handleExpand,
138
+ children: /*#__PURE__*/_jsx(IconButton, {
139
+ className: "toolbtn toggle",
140
+ children: /*#__PURE__*/_jsx(MoreVertIcon, {})
141
+ })
142
+ }), TABLE_MENUS.map(({
131
143
  Icon,
132
144
  text,
133
145
  action
134
146
  }) => {
135
- return /*#__PURE__*/_jsx(IconButton, {
147
+ return /*#__PURE__*/_jsx(Tooltip, {
136
148
  title: text,
137
- onClick: handleAction(action),
138
- children: /*#__PURE__*/_jsx(Icon, {})
149
+ arrow: true,
150
+ children: /*#__PURE__*/_jsx(IconButton, {
151
+ className: "toolbtn",
152
+ onClick: handleAction(action),
153
+ children: /*#__PURE__*/_jsx(Icon, {})
154
+ })
139
155
  }, text);
140
- })
156
+ })]
141
157
  }) : null;
142
158
  };
143
159
  const onSettings = () => {
@@ -163,13 +179,14 @@ const Table = props => {
163
179
  maxWidth: "100%",
164
180
  position: "relative"
165
181
  },
166
- children: [/*#__PURE__*/_jsx("table", {
182
+ children: [/*#__PURE__*/_jsx(TableComp, {
183
+ sx: classes.table,
167
184
  style: {
168
185
  backgroundColor: bgColor,
169
186
  border: `1px solid ${borderColor}`,
170
187
  width: "auto"
171
188
  },
172
- children: /*#__PURE__*/_jsx("tbody", {
189
+ children: /*#__PURE__*/_jsx(TableBody, {
173
190
  ...attributes,
174
191
  children: children
175
192
  })