@flozy/editor 1.7.8 → 1.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,11 +32,11 @@ blockquote {
32
32
  .editor-wrapper table,
33
33
  .editor-wrapperth,
34
34
  .editor-wrapper td {
35
- border: 1px solid black;
35
+ border: 1px solid transparent;
36
36
  }
37
37
 
38
38
  .editor-wrapper table {
39
- border-collapse: collapse;
39
+ border-collapse: separate;
40
40
  }
41
41
 
42
42
  .editor-wrapper .editor-wrapperbutton {
@@ -0,0 +1,95 @@
1
+ import React from "react";
2
+ import { Box, Card, CardMedia, CardContent, Typography } from "@mui/material";
3
+ import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
4
+ import TextSnippetIcon from "@mui/icons-material/TextSnippet";
5
+ import { formatDate } from "../../utils/helper";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ const Attachments = props => {
9
+ const {
10
+ attributes,
11
+ element,
12
+ children
13
+ } = props;
14
+ const {
15
+ url,
16
+ type,
17
+ date
18
+ } = element;
19
+ const getLastName = url?.split("/").pop();
20
+ const fileName = `${getLastName}`;
21
+ return /*#__PURE__*/_jsxs(Box, {
22
+ component: "div",
23
+ className: "attachment-wrpr-ev2",
24
+ ...attributes,
25
+ contentEditable: false,
26
+ style: {
27
+ display: "inline-flex"
28
+ },
29
+ children: [/*#__PURE__*/_jsxs(Card, {
30
+ style: {
31
+ display: "flex",
32
+ justifyContent: "center",
33
+ alignItems: "center",
34
+ width: "100%",
35
+ padding: "8px",
36
+ boxShadow: "none",
37
+ border: "1px solid #eae9e9",
38
+ backgroundColor: "#F7F7F7"
39
+ },
40
+ children: [/*#__PURE__*/_jsx(CardMedia, {
41
+ sx: {
42
+ "& svg": {
43
+ width: 32,
44
+ height: 32,
45
+ "&.pdf-i": {
46
+ fill: "#e5252a"
47
+ },
48
+ "&.doc-i": {
49
+ fill: "#0263d1"
50
+ }
51
+ }
52
+ },
53
+ children: type === "pdf" ? /*#__PURE__*/_jsx(PictureAsPdfIcon, {
54
+ className: "pdf-i"
55
+ }) : /*#__PURE__*/_jsx(TextSnippetIcon, {
56
+ className: "doc-i"
57
+ })
58
+ }), /*#__PURE__*/_jsxs(CardContent, {
59
+ component: "a",
60
+ href: url,
61
+ target: "_blank",
62
+ style: {
63
+ display: "flex",
64
+ justifyContent: "center",
65
+ alignItems: "start",
66
+ padding: "8px",
67
+ textDecoration: "none",
68
+ flexDirection: "column",
69
+ color: "#0F172A"
70
+ },
71
+ children: [/*#__PURE__*/_jsx(Typography, {
72
+ style: {
73
+ fontWeight: "bold",
74
+ color: "#0F172A",
75
+ fontSize: "14px"
76
+ },
77
+ component: "div",
78
+ children: fileName
79
+ }), /*#__PURE__*/_jsx(Typography, {
80
+ style: {
81
+ fontWeight: "normal",
82
+ color: "#64748b",
83
+ fontSize: "11px"
84
+ },
85
+ component: "div",
86
+ children: formatDate(date)
87
+ })]
88
+ })]
89
+ }), /*#__PURE__*/_jsx("span", {
90
+ contentEditable: false,
91
+ children: children
92
+ })]
93
+ });
94
+ };
95
+ export default Attachments;
@@ -0,0 +1,46 @@
1
+ import React, { useState } from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import ToolbarIcon from "../../common/ToolbarIcon";
4
+ import Icon from "../../common/Icon";
5
+ import ImageSelector from "../../common/ImageSelector/ImageSelector";
6
+ import { insertAttachments } from "../../utils/attachments";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ const AttachmentsButton = props => {
11
+ const editor = useSlateStatic();
12
+ const {
13
+ customProps,
14
+ icoBtnType
15
+ } = props;
16
+ const [open, SetOpen] = useState(false);
17
+ const handleClick = () => {
18
+ SetOpen(true);
19
+ };
20
+ const onSelectImage = url => {
21
+ insertAttachments(editor, {
22
+ url
23
+ });
24
+ handleClose();
25
+ };
26
+ const handleClose = () => {
27
+ SetOpen(false);
28
+ };
29
+ return /*#__PURE__*/_jsxs(_Fragment, {
30
+ children: [/*#__PURE__*/_jsx(ToolbarIcon, {
31
+ title: "Doc Upload",
32
+ onClick: handleClick,
33
+ icon: /*#__PURE__*/_jsx(Icon, {
34
+ icon: "docsUpload"
35
+ }),
36
+ icoBtnType: icoBtnType
37
+ }), /*#__PURE__*/_jsx(ImageSelector, {
38
+ open: open,
39
+ onClose: handleClose,
40
+ customProps: customProps,
41
+ onSelectImage: onSelectImage,
42
+ title: "Document"
43
+ })]
44
+ });
45
+ };
46
+ export default AttachmentsButton;
@@ -113,8 +113,7 @@ const Carousel = props => {
113
113
  className: "sliderBg",
114
114
  style: {
115
115
  backgroundColor: "transparent",
116
- position: "relative",
117
- minHeight: "300px"
116
+ position: "relative"
118
117
  },
119
118
  contentEditable: edit,
120
119
  onMouseOver: onMouseOver,
@@ -135,7 +134,7 @@ const Carousel = props => {
135
134
  }, i);
136
135
  })
137
136
  })
138
- }, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
137
+ }, `slider_${children.length}_${new Date().getTime()}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
139
138
  });
140
139
  };
141
140
  export default Carousel;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Transforms } from "slate";
2
+ import { Node, Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { Tooltip, IconButton } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
@@ -16,13 +16,17 @@ const CarouselItem = props => {
16
16
  readOnly
17
17
  } = customProps;
18
18
  const editor = useSlateStatic();
19
- const path = ReactEditor.findPath(editor, element);
20
19
  const onMenuClick = val => () => {
21
20
  switch (val) {
22
21
  case "delete":
23
- Transforms.removeNodes(editor, {
24
- at: [...path]
25
- });
22
+ const path = ReactEditor.findPath(editor, element);
23
+ const parentSlide = Node.get(editor, [path[0]]);
24
+ const canDelete = parentSlide?.children?.length > 1;
25
+ if (canDelete) {
26
+ Transforms.removeNodes(editor, {
27
+ at: [...path]
28
+ });
29
+ }
26
30
  return;
27
31
  default:
28
32
  return;
@@ -32,8 +36,10 @@ const CarouselItem = props => {
32
36
  return !readOnly ? /*#__PURE__*/_jsx("div", {
33
37
  className: "element-toolbar hr",
34
38
  style: {
35
- top: "0px"
39
+ top: "0px",
40
+ right: "28px"
36
41
  },
42
+ contentEditable: false,
37
43
  children: /*#__PURE__*/_jsx(Tooltip, {
38
44
  title: "Delete Slide",
39
45
  arrow: true,
@@ -50,7 +56,10 @@ const CarouselItem = props => {
50
56
  children: /*#__PURE__*/_jsxs("div", {
51
57
  className: "carousel-item-inner",
52
58
  style: {
53
- minHeight: "50px"
59
+ minHeight: "50px",
60
+ display: "flex",
61
+ justifyContent: "center",
62
+ alignItems: "center"
54
63
  },
55
64
  children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
56
65
  })
@@ -19,8 +19,8 @@ const ColorPickerStyles = () => ({
19
19
  position: "absolute",
20
20
  top: "-4px",
21
21
  left: "-4px",
22
- width: "calc(100% + 4px)",
23
- height: "calc(100% + 4px)",
22
+ width: "calc(100% + 8px)",
23
+ height: "calc(100% + 8px)",
24
24
  border: "2px solid #2563EB",
25
25
  borderRadius: "50%"
26
26
  }
@@ -123,7 +123,7 @@ const Image = ({
123
123
  onClick: onSettings,
124
124
  contentEditable: false,
125
125
  children: [/*#__PURE__*/_jsx(Icon, {
126
- icon: "video"
126
+ icon: "image"
127
127
  }), "Add Image"]
128
128
  }) : /*#__PURE__*/_jsx("img", {
129
129
  style: {
@@ -0,0 +1,60 @@
1
+ const carousel_item = itemNo => ({
2
+ type: "paragraph",
3
+ children: [{
4
+ type: "grid",
5
+ grid: "container",
6
+ children: [{
7
+ type: "grid-item",
8
+ grid: 12,
9
+ children: [{
10
+ type: "alignLeft",
11
+ children: [{
12
+ type: "paragraph",
13
+ children: [{
14
+ text: `Slide ${itemNo}`,
15
+ fontSize: "huge",
16
+ fontFamily: "PoppinsBold"
17
+ }]
18
+ }, {
19
+ type: "paragraph",
20
+ children: [{
21
+ fontSize: "16px",
22
+ fontFamily: "PoppinsRegular",
23
+ text: ""
24
+ }]
25
+ }, {
26
+ type: "paragraph",
27
+ children: [{
28
+ fontSize: "16px",
29
+ fontFamily: "PoppinsRegular",
30
+ text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
31
+ }]
32
+ }]
33
+ }],
34
+ bgColor: "rgba(185, 179, 179, 0)",
35
+ lockSpacing: true,
36
+ bannerSpacing: {
37
+ top: 16,
38
+ left: 16,
39
+ right: 16,
40
+ bottom: 16,
41
+ undefined: 16
42
+ },
43
+ alignment: {
44
+ horizantal: "center"
45
+ }
46
+ }],
47
+ alignment: {
48
+ flexDirection: "row"
49
+ },
50
+ lockSpacing: true,
51
+ bannerSpacing: {
52
+ top: "16",
53
+ left: "16",
54
+ right: "16",
55
+ bottom: "16"
56
+ },
57
+ bgColor: "rgb(102, 102, 102)"
58
+ }]
59
+ });
60
+ export default carousel_item;
@@ -8,6 +8,7 @@ import LinkOffIcon from "@mui/icons-material/LinkOff";
8
8
  import { removeLink } from "../../utils/link";
9
9
  import LinkPopup from "./LinkPopup";
10
10
  import "./styles.css";
11
+ import { absoluteLink } from "../../utils/helper";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const Link = ({
@@ -25,6 +26,7 @@ const Link = ({
25
26
  showInNewTab: true
26
27
  });
27
28
  const path = ReactEditor.findPath(editor, element);
29
+ const absLink = absoluteLink(element.href);
28
30
  const updateLink = () => {
29
31
  Transforms.setNodes(editor, {
30
32
  href: linkData?.url,
@@ -71,8 +73,8 @@ const Link = ({
71
73
  children: [/*#__PURE__*/_jsx(Tooltip, {
72
74
  title: "Open",
73
75
  children: /*#__PURE__*/_jsx(IconButton, {
74
- href: element.href,
75
- target: element.target,
76
+ href: absLink,
77
+ target: "_blank",
76
78
  children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
77
79
  })
78
80
  }), /*#__PURE__*/_jsx(Tooltip, {
@@ -93,7 +95,7 @@ const Link = ({
93
95
  return /*#__PURE__*/_jsxs("div", {
94
96
  className: "link",
95
97
  children: [/*#__PURE__*/_jsx("a", {
96
- href: element.href,
98
+ href: absLink,
97
99
  ...attributes,
98
100
  ...element.attr,
99
101
  target: element.target,
@@ -40,7 +40,8 @@ const TableCell = props => {
40
40
  const {
41
41
  bgColor,
42
42
  borderColor,
43
- entireBgColor
43
+ entireBgColor,
44
+ entireBorderColor
44
45
  } = element;
45
46
  const [parentDOM, setParentDOM] = useState(null);
46
47
  const editor = useSlateStatic();
@@ -107,7 +108,8 @@ const TableCell = props => {
107
108
  const sizeProps = isHeader ? {
108
109
  width: size?.width || tableSize?.cellWidth
109
110
  } : {};
110
- const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
111
+ const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
112
+ console.log(borderColor, entireBorderColor);
111
113
  return /*#__PURE__*/_jsxs("td", {
112
114
  ...element.attr,
113
115
  ...attributes,
@@ -27,6 +27,7 @@ import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
27
27
  import EmojiButton from "../Elements/Emoji/EmojiButton.js";
28
28
  import "./styles.css";
29
29
  import TopBannerButton from "../Elements/TopBanner/TopBannerButton.js";
30
+ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
30
31
  import { jsx as _jsx } from "react/jsx-runtime";
31
32
  import { jsxs as _jsxs } from "react/jsx-runtime";
32
33
  export const RenderToolbarIcon = props => {
@@ -193,6 +194,12 @@ export const RenderToolbarIcon = props => {
193
194
  customProps: customProps,
194
195
  icoBtnType: icoBtnType
195
196
  }, element.id);
197
+ case "docsUpload":
198
+ return /*#__PURE__*/_jsx(AttachmentsButton, {
199
+ editor: editor,
200
+ customProps: customProps,
201
+ icoBtnType: icoBtnType
202
+ }, element.id);
196
203
  default:
197
204
  return null;
198
205
  }
@@ -152,6 +152,11 @@ export const toolbarGroups = [[{
152
152
  format: "video",
153
153
  type: "embed",
154
154
  group: "elements"
155
+ }, {
156
+ id: 46,
157
+ format: "docsUpload",
158
+ type: "docsUpload",
159
+ group: "elements"
155
160
  }, {
156
161
  id: 44,
157
162
  lbT: "embed",
@@ -47,7 +47,7 @@ const ColorPickerButton = props => {
47
47
  onClose: handleClose,
48
48
  sx: {
49
49
  "& .MuiPaper-root": {
50
- overflow: "hidden"
50
+ overflow: "auto"
51
51
  }
52
52
  },
53
53
  children: /*#__PURE__*/_jsx(Grid, {
@@ -56,10 +56,12 @@ const ColorPickerButton = props => {
56
56
  children: /*#__PURE__*/_jsxs(Grid, {
57
57
  item: true,
58
58
  xs: 12,
59
- children: [/*#__PURE__*/_jsx(ColorPickerTool, {
60
- gradient: true,
61
- value: color,
62
- onChange: setColor
59
+ children: [/*#__PURE__*/_jsx("div", {
60
+ children: /*#__PURE__*/_jsx(ColorPickerTool, {
61
+ gradient: true,
62
+ value: color,
63
+ onChange: setColor
64
+ })
63
65
  }), /*#__PURE__*/_jsxs("div", {
64
66
  style: {
65
67
  display: "flex",
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
7
7
  import { SiLatex } from "react-icons/si";
8
8
  import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
9
9
  import { IoIosImage, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
10
- import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload } from "./iconslist";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
13
  const iconList = {
@@ -182,7 +182,8 @@ const iconList = {
182
182
  size: 20
183
183
  }),
184
184
  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
185
- moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
185
+ moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
186
+ docsUpload: /*#__PURE__*/_jsx(DocsUpload, {})
186
187
  };
187
188
  const Icon = props => {
188
189
  const {
@@ -13,6 +13,12 @@ const IMAGE_SLECTOR_OPTIONS = {
13
13
  choose: ChooseAssets,
14
14
  addLink: AddLink
15
15
  };
16
+ const TAB_SHOW = {
17
+ Image: ["upload", "choose", "addLink"],
18
+ Video: ["addLink"],
19
+ Embed: ["addLink"],
20
+ Document: ["addLink", "upload"]
21
+ };
16
22
  const ImageSelector = props => {
17
23
  const classes = ImageSelectorStyles();
18
24
  const {
@@ -25,6 +31,7 @@ const ImageSelector = props => {
25
31
  const [tabValue, setTabValue] = useState(title === "Image" ? "choose" : "addLink");
26
32
  const [image, setImage] = useState(value || "");
27
33
  const handleTabChange = (e, newValue) => {
34
+ setImage("");
28
35
  setTabValue(newValue);
29
36
  };
30
37
  const onUploaded = url => {
@@ -60,7 +67,7 @@ const ImageSelector = props => {
60
67
  orientation: "vertical",
61
68
  value: tabValue,
62
69
  children: [/*#__PURE__*/_jsx(Tab, {
63
- className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
70
+ className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
64
71
  sx: classes.tab,
65
72
  icon: /*#__PURE__*/_jsx(Icon, {
66
73
  icon: "fileUpload"
@@ -69,7 +76,7 @@ const ImageSelector = props => {
69
76
  value: "upload",
70
77
  label: "Upload Media"
71
78
  }), /*#__PURE__*/_jsx(Tab, {
72
- className: `${isActive("choose")} ${title !== "Image" ? "hidden" : ""}`,
79
+ className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
73
80
  sx: classes.tab,
74
81
  icon: /*#__PURE__*/_jsx(Icon, {
75
82
  icon: "media"
@@ -78,7 +85,7 @@ const ImageSelector = props => {
78
85
  value: "choose",
79
86
  label: "Choose Media"
80
87
  }), /*#__PURE__*/_jsx(Tab, {
81
- className: `${isActive("addLink")}`,
88
+ className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
82
89
  sx: classes.tab,
83
90
  icon: /*#__PURE__*/_jsx(Icon, {
84
91
  icon: "link"
@@ -109,8 +116,9 @@ const ImageSelector = props => {
109
116
  sx: classes.closeBtn,
110
117
  children: "Cancel"
111
118
  }), /*#__PURE__*/_jsx(Button, {
119
+ disabled: !image,
112
120
  onClick: onSave,
113
- className: "primaryBtn",
121
+ className: `primaryBtn ${!image ? "disabled" : ""}`,
114
122
  sx: classes.saveBtn,
115
123
  children: "Save"
116
124
  })]
@@ -8,7 +8,8 @@ const Upload = props => {
8
8
  value,
9
9
  onUploaded,
10
10
  customProps,
11
- disableUpload = false
11
+ disableUpload = false,
12
+ title
12
13
  } = props;
13
14
  const onDone = img => {
14
15
  onUploaded(img);
@@ -28,7 +29,8 @@ const Upload = props => {
28
29
  },
29
30
  customProps: customProps,
30
31
  onUploaded: onDone,
31
- disableUpload: disableUpload
32
+ disableUpload: disableUpload,
33
+ title: title
32
34
  })
33
35
  });
34
36
  };
@@ -101,7 +101,7 @@ const ELEMENTS_LIST = [{
101
101
  icon: /*#__PURE__*/_jsx(Icon, {
102
102
  icon: "embed"
103
103
  }),
104
- onInsert: editor => insertDefaultEmbed(editor, "video", "https://calendly.com/agenciflow/1-1-agency-scale-clone?hide_event_type_details=1&month=2024-03")
104
+ onInsert: editor => insertDefaultEmbed(editor, "video", "")
105
105
  }, {
106
106
  name: "Emoji",
107
107
  group: "Elements",
@@ -1,24 +1,28 @@
1
1
  import React, { useState } from "react";
2
- import { Grid, Button } from "@mui/material";
2
+ import { Grid, Button, Typography } from "@mui/material";
3
3
  import { convertBase64 } from "../utils/helper";
4
4
  import { uploadFile } from "../service/fileupload";
5
5
  import Icon from "./Icon";
6
6
  import UploadStyles from "../common/ImageSelector/UploadStyles";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const Uploader = props => {
10
11
  const {
11
12
  value,
12
13
  onUploaded,
13
- customProps
14
+ customProps,
15
+ title
14
16
  } = props;
15
17
  const classes = UploadStyles();
16
18
  const [base64, setBase64] = useState(value?.url);
19
+ const [fileName, setFileName] = useState("");
17
20
  const [uploading, setUploading] = useState(false);
18
21
  const handleChange = async e => {
19
22
  const uFile = e.target.files[0];
20
23
  const strImage = await convertBase64(uFile);
21
24
  setBase64(strImage);
25
+ setFileName(uFile?.name);
22
26
  doUpload(strImage, e.target.files[0]);
23
27
  };
24
28
  const doUpload = async (strImage, file) => {
@@ -38,6 +42,44 @@ const Uploader = props => {
38
42
  setBase64(null);
39
43
  onUploaded("none");
40
44
  };
45
+ const getBackground = () => {
46
+ switch (title) {
47
+ case "Document":
48
+ return {
49
+ backgroundImage: `url()`
50
+ };
51
+ default:
52
+ return {
53
+ backgroundImage: base64 ? `url(${base64})` : "none"
54
+ };
55
+ }
56
+ };
57
+ const renderThumb = () => {
58
+ switch (title) {
59
+ case "Document":
60
+ return /*#__PURE__*/_jsxs(_Fragment, {
61
+ children: [/*#__PURE__*/_jsx(Typography, {
62
+ style: {
63
+ padding: "8px",
64
+ fontSize: "12px",
65
+ color: "#2563eb",
66
+ textAlign: "center"
67
+ },
68
+ children: fileName
69
+ }), /*#__PURE__*/_jsx(Grid, {
70
+ className: "removeImageText",
71
+ onClick: onRemoveBG,
72
+ children: "REMOVE"
73
+ })]
74
+ });
75
+ default:
76
+ return /*#__PURE__*/_jsx(Grid, {
77
+ className: "removeImageText",
78
+ onClick: onRemoveBG,
79
+ children: "REMOVE"
80
+ });
81
+ }
82
+ };
41
83
  return /*#__PURE__*/_jsxs(Grid, {
42
84
  container: true,
43
85
  sx: classes.uploadContainer,
@@ -50,16 +92,12 @@ const Uploader = props => {
50
92
  xs: 12,
51
93
  className: "btn--wrpr",
52
94
  style: {
53
- backgroundImage: base64 ? `url(${base64})` : "none"
95
+ ...getBackground()
54
96
  },
55
97
  sx: classes.uploadField,
56
98
  children: !uploading ? /*#__PURE__*/_jsx(Grid, {
57
99
  className: "uploadImageSection",
58
- children: base64 ? /*#__PURE__*/_jsx(Grid, {
59
- className: "removeImageText",
60
- onClick: onRemoveBG,
61
- children: "REMOVE"
62
- }) : /*#__PURE__*/_jsx(Grid, {
100
+ children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
63
101
  className: "uploadImageText",
64
102
  children: /*#__PURE__*/_jsxs(Button, {
65
103
  component: "label",
@@ -77,11 +115,11 @@ const Uploader = props => {
77
115
  onChange: handleChange
78
116
  }), /*#__PURE__*/_jsx(Icon, {
79
117
  icon: "fileUpload"
80
- }), /*#__PURE__*/_jsx("span", {
118
+ }), /*#__PURE__*/_jsxs("span", {
81
119
  style: {
82
120
  paddingLeft: "8px"
83
121
  },
84
- children: "upload your image"
122
+ children: ["upload ", title || "image"]
85
123
  })]
86
124
  })
87
125
  })
@@ -765,32 +765,32 @@ export const DocsUpload = props => /*#__PURE__*/_jsxs("svg", {
765
765
  fill: "none",
766
766
  children: [/*#__PURE__*/_jsx("path", {
767
767
  d: "M6.14453 0.855469V3.14118C6.14453 3.29274 6.20474 3.43808 6.3119 3.54524C6.41906 3.65241 6.56441 3.71261 6.71596 3.71261H9.00167",
768
- stroke: "#828282",
769
- strokeWidth: "0.7",
768
+ stroke: "#64748B",
769
+ strokeWidth: "1",
770
770
  strokeLinecap: "round",
771
771
  strokeLinejoin: "round"
772
772
  }), /*#__PURE__*/_jsx("path", {
773
773
  d: "M7.85714 11.1412H2.14286C1.83975 11.1412 1.54906 11.0208 1.33474 10.8064C1.12041 10.5921 1 10.3014 1 9.99833V1.99833C1 1.69522 1.12041 1.40453 1.33474 1.1902C1.54906 0.975877 1.83975 0.855469 2.14286 0.855469H6.14286L9 3.71261V9.99833C9 10.3014 8.87959 10.5921 8.66527 10.8064C8.45094 11.0208 8.16025 11.1412 7.85714 11.1412Z",
774
- stroke: "#828282",
775
- strokeWidth: "0.7",
774
+ stroke: "#64748B",
775
+ strokeWidth: "1",
776
776
  strokeLinecap: "round",
777
777
  strokeLinejoin: "round"
778
778
  }), /*#__PURE__*/_jsx("path", {
779
779
  d: "M3.28516 4.28516H3.85658",
780
- stroke: "#828282",
781
- strokeWidth: "0.7",
780
+ stroke: "#64748B",
781
+ strokeWidth: "1",
782
782
  strokeLinecap: "round",
783
783
  strokeLinejoin: "round"
784
784
  }), /*#__PURE__*/_jsx("path", {
785
785
  d: "M3.28516 6.57031H6.71373",
786
- stroke: "#828282",
787
- strokeWidth: "0.7",
786
+ stroke: "#64748B",
787
+ strokeWidth: "1",
788
788
  strokeLinecap: "round",
789
789
  strokeLinejoin: "round"
790
790
  }), /*#__PURE__*/_jsx("path", {
791
791
  d: "M3.28516 8.85547H6.71373",
792
- stroke: "#828282",
793
- strokeWidth: "0.7",
792
+ stroke: "#64748B",
793
+ strokeWidth: "1",
794
794
  strokeLinecap: "round",
795
795
  strokeLinejoin: "round"
796
796
  })]
@@ -3,7 +3,6 @@ export const uploadFile = async (formData, props) => {
3
3
  const response = await fetch(`${props.API_HOST}/general/notes/file_upload`, {
4
4
  method: "POST",
5
5
  headers: {
6
- // "Content-Type": "application/json",
7
6
  Authorization: `Bearer ${props.token}`
8
7
  },
9
8
  body: formData
@@ -33,6 +33,7 @@ import EmbedLink from "../Elements/Embed/link";
33
33
  import SimpleText from "../Elements/SimpleText";
34
34
  import CheckList from "../Elements/List/CheckList";
35
35
  import { isEmptyTextNode } from "../helper";
36
+ import Attachments from "../Elements/Attachments/Attachments";
36
37
  import { jsx as _jsx } from "react/jsx-runtime";
37
38
  const alignment = ["alignLeft", "alignRight", "alignCenter"];
38
39
  const list_types = ["orderedList", "unorderedList"];
@@ -472,6 +473,11 @@ export const getBlock = props => {
472
473
  return /*#__PURE__*/_jsx(EmbedLink, {
473
474
  ...props
474
475
  });
476
+ case "docs":
477
+ case "pdf":
478
+ return /*#__PURE__*/_jsx(Attachments, {
479
+ ...props
480
+ });
475
481
  default:
476
482
  return /*#__PURE__*/_jsx(SimpleText, {
477
483
  ...props,
@@ -481,7 +487,7 @@ export const getBlock = props => {
481
487
  };
482
488
  export const getQueryStrings = urlString => {
483
489
  try {
484
- if (urlString) {
490
+ if (urlString && urlString?.indexOf("/embed") === -1) {
485
491
  const newUrl = new URL(urlString);
486
492
  var youCode = newUrl.searchParams.get("v");
487
493
  if (!youCode) {
@@ -0,0 +1,35 @@
1
+ import { Transforms } from "slate";
2
+ import insertNewLine from "./insertNewLine";
3
+ const createAttachmentsNode = ({
4
+ type,
5
+ url
6
+ }) => {
7
+ return {
8
+ type: type || "docs",
9
+ url,
10
+ date: new Date().getTime(),
11
+ width: "100%",
12
+ height: "300px",
13
+ children: [{
14
+ text: ""
15
+ }]
16
+ };
17
+ };
18
+ export const insertAttachments = (editor, data) => {
19
+ try {
20
+ const {
21
+ url
22
+ } = data;
23
+ if (url) {
24
+ const attachmentsNode = createAttachmentsNode({
25
+ ...data,
26
+ type: url?.split(".").pop() === "pdf" ? "pdf" : "docs"
27
+ });
28
+ console.log(attachmentsNode);
29
+ Transforms.insertNodes(editor, [attachmentsNode]);
30
+ insertNewLine(editor);
31
+ }
32
+ } catch (err) {
33
+ console.log(err);
34
+ }
35
+ };
@@ -1,13 +1,11 @@
1
1
  import { Transforms } from "slate";
2
+ import carousel_item from "../Elements/Grid/templates/carousel_item";
2
3
  export const carouselItem = (itemNo = "") => {
3
4
  return {
4
5
  type: "carousel-item",
5
6
  image: null,
6
7
  children: [{
7
- type: "paragraph",
8
- children: [{
9
- text: `Slide ${itemNo}`
10
- }]
8
+ ...carousel_item(itemNo)
11
9
  }]
12
10
  };
13
11
  };
@@ -41,4 +41,15 @@ export const gradientBorder = color => {
41
41
  borderColor: color || "transparent"
42
42
  };
43
43
  }
44
+ };
45
+ export const absoluteLink = url => {
46
+ try {
47
+ if (url?.indexOf("://") === -1) {
48
+ return `//${url}`;
49
+ }
50
+ return url;
51
+ } catch (err) {
52
+ console.log(err);
53
+ return url;
54
+ }
44
55
  };
@@ -219,17 +219,36 @@ export class TableUtil {
219
219
  });
220
220
 
221
221
  // cell bg entire
222
- if (cellProps?.entireBgColor) {
222
+ if (cellProps?.entireBgColor || tableProps?.borderColor) {
223
223
  const {
224
- rows
224
+ rows,
225
+ columns
225
226
  } = tableProps;
226
227
  for (let r = 0; r < rows; r++) {
227
- Transforms.setNodes(this.editor, {
228
- ...cellProps,
229
- entireBgColor: cellProps?.entireBgColor
230
- }, {
231
- at: [currentCellPath[0], r, currentCellPath[2]]
232
- });
228
+ for (let c = 0; c < columns; c++) {
229
+ Transforms.setNodes(this.editor, {
230
+ entireBgColor: cellProps?.entireBgColor
231
+ }, {
232
+ at: [currentCellPath[0], r, currentCellPath[2]]
233
+ });
234
+ }
235
+ }
236
+ }
237
+
238
+ // cell border all
239
+ if (tableProps?.borderColor) {
240
+ const {
241
+ rows,
242
+ columns
243
+ } = tableProps;
244
+ for (let r = 0; r < rows; r++) {
245
+ for (let c = 0; c < columns; c++) {
246
+ Transforms.setNodes(this.editor, {
247
+ entireBorderColor: tableProps?.borderColor
248
+ }, {
249
+ at: [currentCellPath[0], r, c]
250
+ });
251
+ }
233
252
  }
234
253
  }
235
254
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.7.8",
3
+ "version": "1.7.9",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"