@flozy/editor 1.7.8 → 1.7.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -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"