@flozy/editor 2.0.2 → 2.0.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
- import { createEditor, Transforms } from "slate";
3
+ import { createEditor, Editor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
5
  import { useDebounce } from "use-debounce";
6
6
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -18,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
18
18
  import PopupTool from "./Toolbar/PopupTool";
19
19
  import "./font.css";
20
20
  import "./Editor.css";
21
- import { Box, Typography } from "@mui/material";
21
+ import { Box, Button, Typography } from "@mui/material";
22
22
  import Shorthands from "./common/Shorthands";
23
23
  import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
24
24
  import { EditorProvider } from "./hooks/useMouseMove";
@@ -195,9 +195,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
195
195
  getContent() {
196
196
  return getOnSaveData(deboundedValue);
197
197
  },
198
- insertFragments(fragments, clearAll = false) {
198
+ insertFragments(fragments, clearAll = false, rest = {}) {
199
199
  if (!clearAll) {
200
- editor.insertNode(fragments);
200
+ if (rest?.nextLine) {
201
+ const {
202
+ anchor
203
+ } = editor?.selection || {};
204
+ if (anchor?.path !== undefined && anchor?.path[0] !== undefined) {
205
+ editor.insertNode(fragments, {
206
+ at: [anchor?.path[0] + 1]
207
+ });
208
+ }
209
+ } else {
210
+ editor.insertNode(fragments);
211
+ }
201
212
  } else {
202
213
  // loop delete all
203
214
  editor.children.forEach(() => {
@@ -225,6 +236,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
225
236
  h
226
237
  });
227
238
  },
239
+ undo() {
240
+ editor?.undo();
241
+ },
242
+ redo() {
243
+ editor?.redo();
244
+ },
228
245
  getPageSettings: {
229
246
  background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
230
247
  }
@@ -979,6 +979,10 @@ blockquote {
979
979
  left: 0;
980
980
  top: 0;
981
981
  }
982
+ .content-editable.empty.np:after {
983
+ left: auto;
984
+ top: auto;
985
+ }
982
986
  .af-pl-1::after {
983
987
  padding-left: 12px;
984
988
  }
@@ -244,6 +244,7 @@ function AppHeader(props) {
244
244
  }
245
245
  },
246
246
  className: "app-logo",
247
+ onClick: onSettings,
247
248
  children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
248
249
  alt: `${appTitle} Logo`,
249
250
  style: {
@@ -9,7 +9,8 @@ const ButtonPopup = props => {
9
9
  customProps,
10
10
  onClose,
11
11
  style,
12
- styleName
12
+ styleName,
13
+ onDelete
13
14
  } = props;
14
15
  return /*#__PURE__*/_jsx(StyleBuilder, {
15
16
  title: "Button",
@@ -17,6 +18,7 @@ const ButtonPopup = props => {
17
18
  element: element,
18
19
  onSave: onSave,
19
20
  onClose: onClose,
21
+ onDelete: onDelete,
20
22
  renderTabs: style ? style : buttonStyle,
21
23
  customProps: customProps
22
24
  });
@@ -96,7 +96,8 @@ const EditorButton = props => {
96
96
  return !readOnly ? /*#__PURE__*/_jsxs("div", {
97
97
  className: "element-toolbar hr",
98
98
  style: {
99
- width: "max-content"
99
+ width: "max-content",
100
+ top: "-38px"
100
101
  },
101
102
  children: [/*#__PURE__*/_jsx(Tooltip, {
102
103
  title: "Settings",
@@ -112,13 +113,6 @@ const EditorButton = props => {
112
113
  onClick: onMenuClick("open"),
113
114
  children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
114
115
  })
115
- }), /*#__PURE__*/_jsx(Tooltip, {
116
- title: "Delete",
117
- arrow: true,
118
- children: /*#__PURE__*/_jsx(IconButton, {
119
- onClick: onMenuClick("delete"),
120
- children: /*#__PURE__*/_jsx(DeleteIcon, {})
121
- })
122
116
  })]
123
117
  }) : null;
124
118
  };
@@ -151,6 +145,14 @@ const EditorButton = props => {
151
145
  display: {
152
146
  lg: "inline",
153
147
  xs: xsHidden ? "none" : "inline"
148
+ },
149
+ "& .element-toolbar": {
150
+ display: "none"
151
+ },
152
+ "&:hover": {
153
+ "& .element-toolbar": {
154
+ display: "block"
155
+ }
154
156
  }
155
157
  },
156
158
  children: /*#__PURE__*/_jsxs("span", {
@@ -215,6 +217,7 @@ const EditorButton = props => {
215
217
  element: element,
216
218
  onSave: onSave,
217
219
  onClose: onClose,
220
+ onDelete: onMenuClick("delete"),
218
221
  customProps: customProps
219
222
  })]
220
223
  });
@@ -6,7 +6,6 @@
6
6
 
7
7
  .embed img {
8
8
  width: 100%;
9
- height: auto
10
9
  }
11
10
  .embed iframe {
12
11
  width: 100%;
@@ -0,0 +1,77 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const DarkFrame = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "330",
10
+ height: "557",
11
+ viewBox: "0 0 330 557",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("g", {
14
+ filter: "url(#filter0_d_14731_299242)",
15
+ children: /*#__PURE__*/_jsx("rect", {
16
+ x: "7.5",
17
+ y: "7.5",
18
+ width: "305",
19
+ height: "532",
20
+ rx: "27.5",
21
+ stroke: "#1E1E1E",
22
+ strokeWidth: "15",
23
+ shapeRendering: "crispEdges",
24
+ fill: `url(#imageSource_${id})`
25
+ })
26
+ }), /*#__PURE__*/_jsxs("defs", {
27
+ children: [/*#__PURE__*/_jsx("pattern", {
28
+ id: `imageSource_${id}`,
29
+ patternUnits: "userSpaceOnUse",
30
+ width: "305",
31
+ height: "532",
32
+ children: /*#__PURE__*/_jsx("image", {
33
+ x: "0",
34
+ y: "0",
35
+ height: "100%",
36
+ href: href
37
+ })
38
+ }), /*#__PURE__*/_jsxs("filter", {
39
+ id: "filter0_d_14731_299242",
40
+ x: "0",
41
+ y: "0",
42
+ width: "330",
43
+ height: "557",
44
+ filterUnits: "userSpaceOnUse",
45
+ colorInterpolationFilters: "sRGB",
46
+ children: [/*#__PURE__*/_jsx("feFlood", {
47
+ floodOpacity: "0",
48
+ result: "BackgroundImageFix"
49
+ }), /*#__PURE__*/_jsx("feColorMatrix", {
50
+ in: "SourceAlpha",
51
+ type: "matrix",
52
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
53
+ result: "hardAlpha"
54
+ }), /*#__PURE__*/_jsx("feOffset", {
55
+ dx: "10",
56
+ dy: "10"
57
+ }), /*#__PURE__*/_jsx("feComposite", {
58
+ in2: "hardAlpha",
59
+ operator: "out"
60
+ }), /*#__PURE__*/_jsx("feColorMatrix", {
61
+ type: "matrix",
62
+ values: "0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 1 0"
63
+ }), /*#__PURE__*/_jsx("feBlend", {
64
+ mode: "normal",
65
+ in2: "BackgroundImageFix",
66
+ result: "effect1_dropShadow_14731_299242"
67
+ }), /*#__PURE__*/_jsx("feBlend", {
68
+ mode: "normal",
69
+ in: "SourceGraphic",
70
+ in2: "effect1_dropShadow_14731_299242",
71
+ result: "shape"
72
+ })]
73
+ })]
74
+ })]
75
+ });
76
+ };
77
+ export default DarkFrame;
@@ -0,0 +1,95 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const InstaFrame = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "366",
10
+ height: "489",
11
+ viewBox: "0 0 366 489",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("rect", {
14
+ x: "2.5",
15
+ y: "2.5",
16
+ width: "361",
17
+ height: "484",
18
+ rx: "17.5",
19
+ fill: "white",
20
+ stroke: "#D5D5D5",
21
+ strokeWidth: "5"
22
+ }), /*#__PURE__*/_jsx("rect", {
23
+ x: "27.5",
24
+ y: "28.5",
25
+ width: "35",
26
+ height: "35",
27
+ rx: "17.5",
28
+ fill: "#D5D5D5",
29
+ stroke: "#D5D5D5",
30
+ strokeWidth: "5"
31
+ }), /*#__PURE__*/_jsx("rect", {
32
+ x: "80.5",
33
+ y: "40.5",
34
+ width: "121",
35
+ height: "11",
36
+ rx: "5.5",
37
+ fill: "#D5D5D5",
38
+ stroke: "#D5D5D5",
39
+ strokeWidth: "5"
40
+ }), /*#__PURE__*/_jsx("path", {
41
+ d: "M328.287 453.992L318.575 447.922L308.863 453.992L308.863 427.284C308.863 426.962 308.991 426.654 309.219 426.426C309.447 426.198 309.755 426.07 310.077 426.07L327.073 426.07C327.395 426.07 327.704 426.198 327.932 426.426C328.159 426.654 328.287 426.962 328.287 427.284L328.287 453.992Z",
42
+ stroke: "#D5D5D5",
43
+ strokeWidth: "4",
44
+ strokeLinecap: "round",
45
+ strokeLinejoin: "round"
46
+ }), /*#__PURE__*/_jsx("path", {
47
+ d: "M48.4231 452.778C48.4231 452.778 33.248 444.28 33.248 433.961C33.248 432.137 33.8801 430.369 35.0366 428.959C36.1931 427.548 37.8027 426.581 39.5915 426.224C41.3803 425.866 43.2378 426.139 44.8479 426.996C46.4581 427.854 47.7215 429.242 48.4231 430.926V430.926C49.1247 429.242 50.3881 427.854 51.9982 426.996C53.6084 426.139 55.4659 425.866 57.2547 426.224C59.0435 426.581 60.653 427.548 61.8096 428.959C62.9661 430.369 63.5981 432.137 63.5981 433.961C63.5981 444.28 48.4231 452.778 48.4231 452.778Z",
48
+ stroke: "#D5D5D5",
49
+ strokeWidth: "4",
50
+ strokeLinecap: "round",
51
+ strokeLinejoin: "round"
52
+ }), /*#__PURE__*/_jsx("path", {
53
+ d: "M90.8913 446.86C89.0838 443.81 88.4515 440.206 89.1132 436.723C89.775 433.24 91.6851 430.119 94.4852 427.945C97.2852 425.771 100.783 424.693 104.321 424.915C107.859 425.137 111.194 426.642 113.701 429.149C116.207 431.656 117.713 434.991 117.935 438.529C118.156 442.067 117.079 445.565 114.905 448.365C112.731 451.165 109.609 453.075 106.127 453.737C102.644 454.398 99.0397 453.766 95.9901 451.959V451.959L90.952 453.385C90.7456 453.445 90.5267 453.449 90.3184 453.396C90.11 453.343 89.9198 453.234 89.7678 453.082C89.6157 452.93 89.5073 452.74 89.454 452.532C89.4007 452.323 89.4045 452.104 89.4648 451.898L90.8913 446.86Z",
54
+ stroke: "#D5D5D5",
55
+ strokeWidth: "4",
56
+ strokeLinecap: "round",
57
+ strokeLinejoin: "round"
58
+ }), /*#__PURE__*/_jsx("path", {
59
+ d: "M170.92 425.447L142.634 433.414C142.393 433.479 142.179 433.618 142.019 433.81C141.86 434.002 141.764 434.239 141.744 434.488C141.724 434.737 141.781 434.985 141.908 435.201C142.035 435.416 142.225 435.587 142.452 435.69L155.442 441.836C155.696 441.954 155.901 442.158 156.018 442.412L162.164 455.402C162.268 455.629 162.438 455.819 162.654 455.946C162.869 456.073 163.118 456.13 163.366 456.11C163.615 456.09 163.852 455.994 164.044 455.835C164.236 455.675 164.375 455.461 164.441 455.22L172.408 426.934C172.468 426.727 172.472 426.509 172.418 426.3C172.365 426.092 172.257 425.902 172.105 425.75C171.953 425.597 171.762 425.489 171.554 425.436C171.346 425.383 171.127 425.386 170.92 425.447V425.447Z",
60
+ stroke: "#D5D5D5",
61
+ strokeWidth: "4",
62
+ strokeLinecap: "round",
63
+ strokeLinejoin: "round"
64
+ }), /*#__PURE__*/_jsx("path", {
65
+ d: "M155.836 442.019L162.695 435.16",
66
+ stroke: "#D5D5D5",
67
+ strokeWidth: "4",
68
+ strokeLinecap: "round",
69
+ strokeLinejoin: "round"
70
+ }), /*#__PURE__*/_jsx("rect", {
71
+ x: "27.5",
72
+ y: "86.5",
73
+ width: "311",
74
+ height: "311",
75
+ rx: "17.5",
76
+ stroke: "#D5D5D5",
77
+ strokeWidth: "5",
78
+ fill: `url(#imageSource_${id})`
79
+ }), /*#__PURE__*/_jsx("defs", {
80
+ children: /*#__PURE__*/_jsx("pattern", {
81
+ id: `imageSource_${id}`,
82
+ patternUnits: "userSpaceOnUse",
83
+ width: "338.5",
84
+ height: "397.5",
85
+ children: /*#__PURE__*/_jsx("image", {
86
+ x: "0",
87
+ y: "0",
88
+ height: "100%",
89
+ href: href
90
+ })
91
+ })
92
+ })]
93
+ });
94
+ };
95
+ export default InstaFrame;
@@ -0,0 +1,95 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const InstaFrame = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "366",
10
+ height: "489",
11
+ viewBox: "0 0 366 489",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("rect", {
14
+ x: "2.5",
15
+ y: "2.5",
16
+ width: "361",
17
+ height: "484",
18
+ rx: "17.5",
19
+ fill: "#12141d",
20
+ stroke: "#D5D5D5",
21
+ strokeWidth: "5"
22
+ }), /*#__PURE__*/_jsx("rect", {
23
+ x: "27.5",
24
+ y: "28.5",
25
+ width: "35",
26
+ height: "35",
27
+ rx: "17.5",
28
+ fill: "#D5D5D5",
29
+ stroke: "#D5D5D5",
30
+ strokeWidth: "5"
31
+ }), /*#__PURE__*/_jsx("rect", {
32
+ x: "80.5",
33
+ y: "40.5",
34
+ width: "121",
35
+ height: "11",
36
+ rx: "5.5",
37
+ fill: "#D5D5D5",
38
+ stroke: "#D5D5D5",
39
+ strokeWidth: "5"
40
+ }), /*#__PURE__*/_jsx("path", {
41
+ d: "M328.287 453.992L318.575 447.922L308.863 453.992L308.863 427.284C308.863 426.962 308.991 426.654 309.219 426.426C309.447 426.198 309.755 426.07 310.077 426.07L327.073 426.07C327.395 426.07 327.704 426.198 327.932 426.426C328.159 426.654 328.287 426.962 328.287 427.284L328.287 453.992Z",
42
+ stroke: "#D5D5D5",
43
+ strokeWidth: "4",
44
+ strokeLinecap: "round",
45
+ strokeLinejoin: "round"
46
+ }), /*#__PURE__*/_jsx("path", {
47
+ d: "M48.4231 452.778C48.4231 452.778 33.248 444.28 33.248 433.961C33.248 432.137 33.8801 430.369 35.0366 428.959C36.1931 427.548 37.8027 426.581 39.5915 426.224C41.3803 425.866 43.2378 426.139 44.8479 426.996C46.4581 427.854 47.7215 429.242 48.4231 430.926V430.926C49.1247 429.242 50.3881 427.854 51.9982 426.996C53.6084 426.139 55.4659 425.866 57.2547 426.224C59.0435 426.581 60.653 427.548 61.8096 428.959C62.9661 430.369 63.5981 432.137 63.5981 433.961C63.5981 444.28 48.4231 452.778 48.4231 452.778Z",
48
+ stroke: "#D5D5D5",
49
+ strokeWidth: "4",
50
+ strokeLinecap: "round",
51
+ strokeLinejoin: "round"
52
+ }), /*#__PURE__*/_jsx("path", {
53
+ d: "M90.8913 446.86C89.0838 443.81 88.4515 440.206 89.1132 436.723C89.775 433.24 91.6851 430.119 94.4852 427.945C97.2852 425.771 100.783 424.693 104.321 424.915C107.859 425.137 111.194 426.642 113.701 429.149C116.207 431.656 117.713 434.991 117.935 438.529C118.156 442.067 117.079 445.565 114.905 448.365C112.731 451.165 109.609 453.075 106.127 453.737C102.644 454.398 99.0397 453.766 95.9901 451.959V451.959L90.952 453.385C90.7456 453.445 90.5267 453.449 90.3184 453.396C90.11 453.343 89.9198 453.234 89.7678 453.082C89.6157 452.93 89.5073 452.74 89.454 452.532C89.4007 452.323 89.4045 452.104 89.4648 451.898L90.8913 446.86Z",
54
+ stroke: "#D5D5D5",
55
+ strokeWidth: "4",
56
+ strokeLinecap: "round",
57
+ strokeLinejoin: "round"
58
+ }), /*#__PURE__*/_jsx("path", {
59
+ d: "M170.92 425.447L142.634 433.414C142.393 433.479 142.179 433.618 142.019 433.81C141.86 434.002 141.764 434.239 141.744 434.488C141.724 434.737 141.781 434.985 141.908 435.201C142.035 435.416 142.225 435.587 142.452 435.69L155.442 441.836C155.696 441.954 155.901 442.158 156.018 442.412L162.164 455.402C162.268 455.629 162.438 455.819 162.654 455.946C162.869 456.073 163.118 456.13 163.366 456.11C163.615 456.09 163.852 455.994 164.044 455.835C164.236 455.675 164.375 455.461 164.441 455.22L172.408 426.934C172.468 426.727 172.472 426.509 172.418 426.3C172.365 426.092 172.257 425.902 172.105 425.75C171.953 425.597 171.762 425.489 171.554 425.436C171.346 425.383 171.127 425.386 170.92 425.447V425.447Z",
60
+ stroke: "#D5D5D5",
61
+ strokeWidth: "4",
62
+ strokeLinecap: "round",
63
+ strokeLinejoin: "round"
64
+ }), /*#__PURE__*/_jsx("path", {
65
+ d: "M155.836 442.019L162.695 435.16",
66
+ stroke: "#D5D5D5",
67
+ strokeWidth: "4",
68
+ strokeLinecap: "round",
69
+ strokeLinejoin: "round"
70
+ }), /*#__PURE__*/_jsx("rect", {
71
+ x: "27.5",
72
+ y: "86.5",
73
+ width: "311",
74
+ height: "311",
75
+ rx: "17.5",
76
+ stroke: "#D5D5D5",
77
+ strokeWidth: "5",
78
+ fill: `url(#imageSource_${id})`
79
+ }), /*#__PURE__*/_jsx("defs", {
80
+ children: /*#__PURE__*/_jsx("pattern", {
81
+ id: `imageSource_${id}`,
82
+ patternUnits: "userSpaceOnUse",
83
+ width: "338.5",
84
+ height: "397.5",
85
+ children: /*#__PURE__*/_jsx("image", {
86
+ x: "0",
87
+ y: "0",
88
+ height: "100%",
89
+ href: href
90
+ })
91
+ })
92
+ })]
93
+ });
94
+ };
95
+ export default InstaFrame;
@@ -0,0 +1,75 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const RoundedDark = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "105",
10
+ height: "105",
11
+ viewBox: "0 0 105 105",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("g", {
14
+ filter: "url(#filter0_d_14731_299244)",
15
+ children: /*#__PURE__*/_jsx("circle", {
16
+ cx: "50",
17
+ cy: "50",
18
+ r: "46.5",
19
+ stroke: "#1E1E1E",
20
+ strokeWidth: "7",
21
+ shapeRendering: "crispEdges",
22
+ fill: `url(#imageSource_${id})`
23
+ })
24
+ }), /*#__PURE__*/_jsxs("defs", {
25
+ children: [/*#__PURE__*/_jsx("pattern", {
26
+ id: `imageSource_${id}`,
27
+ patternUnits: "userSpaceOnUse",
28
+ width: "100",
29
+ height: "100",
30
+ children: /*#__PURE__*/_jsx("image", {
31
+ x: "0",
32
+ y: "0",
33
+ height: "100%",
34
+ href: href
35
+ })
36
+ }), /*#__PURE__*/_jsxs("filter", {
37
+ id: "filter0_d_14731_299244",
38
+ x: "0",
39
+ y: "0",
40
+ width: "105",
41
+ height: "105",
42
+ filterUnits: "userSpaceOnUse",
43
+ colorInterpolationFilters: "sRGB",
44
+ children: [/*#__PURE__*/_jsx("feFlood", {
45
+ floodOpacity: "0",
46
+ result: "BackgroundImageFix"
47
+ }), /*#__PURE__*/_jsx("feColorMatrix", {
48
+ in: "SourceAlpha",
49
+ type: "matrix",
50
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
51
+ result: "hardAlpha"
52
+ }), /*#__PURE__*/_jsx("feOffset", {
53
+ dx: "5",
54
+ dy: "5"
55
+ }), /*#__PURE__*/_jsx("feComposite", {
56
+ in2: "hardAlpha",
57
+ operator: "out"
58
+ }), /*#__PURE__*/_jsx("feColorMatrix", {
59
+ type: "matrix",
60
+ values: "0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 1 0"
61
+ }), /*#__PURE__*/_jsx("feBlend", {
62
+ mode: "normal",
63
+ in2: "BackgroundImageFix",
64
+ result: "effect1_dropShadow_14731_299244"
65
+ }), /*#__PURE__*/_jsx("feBlend", {
66
+ mode: "normal",
67
+ in: "SourceGraphic",
68
+ in2: "effect1_dropShadow_14731_299244",
69
+ result: "shape"
70
+ })]
71
+ })]
72
+ })]
73
+ });
74
+ };
75
+ export default RoundedDark;
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const RoundedLight = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "152",
10
+ height: "152",
11
+ viewBox: "0 0 152 152",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("circle", {
14
+ cx: "76",
15
+ cy: "76",
16
+ r: "75",
17
+ stroke: "white",
18
+ strokeWidth: "2",
19
+ fill: `url(#imageSource_${id})`
20
+ }), /*#__PURE__*/_jsx("defs", {
21
+ children: /*#__PURE__*/_jsx("pattern", {
22
+ id: `imageSource_${id}`,
23
+ patternUnits: "userSpaceOnUse",
24
+ width: "152",
25
+ height: "152",
26
+ children: /*#__PURE__*/_jsx("image", {
27
+ x: "0",
28
+ y: "0",
29
+ height: "100%",
30
+ href: href
31
+ })
32
+ })
33
+ })]
34
+ });
35
+ };
36
+ export default RoundedLight;
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { jsxs as _jsxs } from "react/jsx-runtime";
3
+ const RoundedLightB2 = ({
4
+ href,
5
+ id
6
+ }) => {
7
+ return /*#__PURE__*/_jsxs("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ width: "62",
10
+ height: "62",
11
+ viewBox: "0 0 62 62",
12
+ fill: "none",
13
+ children: [/*#__PURE__*/_jsx("circle", {
14
+ cx: "31",
15
+ cy: "31",
16
+ r: "28.5",
17
+ stroke: "#E0E0E0",
18
+ strokeWidth: "5",
19
+ fill: `url(#imageSource_${id})`
20
+ }), /*#__PURE__*/_jsx("defs", {
21
+ children: /*#__PURE__*/_jsx("pattern", {
22
+ id: `imageSource_${id}`,
23
+ patternUnits: "userSpaceOnUse",
24
+ width: "124",
25
+ height: "124",
26
+ children: /*#__PURE__*/_jsx("image", {
27
+ x: "0",
28
+ y: "0",
29
+ height: "100%",
30
+ href: href
31
+ })
32
+ })
33
+ })]
34
+ });
35
+ };
36
+ export default RoundedLightB2;
@@ -0,0 +1,15 @@
1
+ import InstaFrame from "./InstaFrame";
2
+ import InstaFrameDark from "./InstaFrameDark";
3
+ import DarkFrame from "./DarkFrame";
4
+ import RoundedDark from "./RoundedDark";
5
+ import RoundedLight from "./RoundedLight";
6
+ import RoundedLightB2 from "./RoundedLightB2";
7
+ const frames = {
8
+ InstaFrame: InstaFrame,
9
+ InstaFrameDark: InstaFrameDark,
10
+ DarkFrame: DarkFrame,
11
+ RoundedDark: RoundedDark,
12
+ RoundedLight: RoundedLight,
13
+ RoundedLightB2: RoundedLightB2
14
+ };
15
+ export default frames;
@@ -9,6 +9,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
9
9
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
10
10
  import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
+ import frames from "./Frames";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const Image = ({
@@ -27,7 +28,9 @@ const Image = ({
27
28
  borderRadius,
28
29
  boxShadow,
29
30
  width: oldWidth,
30
- xsHidden
31
+ xsHidden,
32
+ objectFit,
33
+ frame = null
31
34
  } = element;
32
35
  const {
33
36
  readOnly
@@ -70,6 +73,7 @@ const Image = ({
70
73
  hoverPath
71
74
  } = useEditorContext();
72
75
  const selected = hoverPath === path.join(",");
76
+ const ImageFrame = frame ? frames[frame] : null;
73
77
  useEffect(() => {
74
78
  if (editor && ele && ele[1] !== undefined) {
75
79
  const dom = ReactEditor.toDOMNode(editor, element);
@@ -110,6 +114,12 @@ const Image = ({
110
114
  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
111
115
  className: "element-toolbar visible-on-hover",
112
116
  contentEditable: false,
117
+ style: {
118
+ top: "0px",
119
+ right: "0px",
120
+ left: "auto",
121
+ margin: "0px"
122
+ },
113
123
  children: /*#__PURE__*/_jsx(Tooltip, {
114
124
  title: "Image Settings",
115
125
  arrow: true,
@@ -131,12 +141,15 @@ const Image = ({
131
141
  }), "Add Image"]
132
142
  }) : /*#__PURE__*/_jsx(Box, {
133
143
  component: "img",
144
+ className: "emb-img",
134
145
  sx: {
135
146
  borderRadius: {
136
147
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
137
148
  },
138
149
  objectFit: "cover",
139
- boxShadow: boxShadow || "none"
150
+ boxShadow: boxShadow || "none",
151
+ height: objectFit ? "100%" : "auto",
152
+ opacity: frame ? 0 : 1
140
153
  },
141
154
  alt: alt,
142
155
  src: url,
@@ -148,13 +161,17 @@ const Image = ({
148
161
  const getWidth = () => {
149
162
  if (resizing) {
150
163
  return {
151
- width: `${size.width}px`
164
+ width: `${size.width}px`,
165
+ height: objectFit ? `${size.height}px` : "auto"
152
166
  };
153
167
  } else {
154
168
  return {
155
169
  width: url ? {
156
170
  ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
157
- } : "100%"
171
+ } : "100%",
172
+ height: objectFit && url ? {
173
+ ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
174
+ } : "auto"
158
175
  };
159
176
  }
160
177
  };
@@ -195,7 +212,14 @@ const Image = ({
195
212
  position: "relative",
196
213
  ...getWidth()
197
214
  },
198
- children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
215
+ children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && ImageFrame ? /*#__PURE__*/_jsx(Box, {
216
+ component: "div",
217
+ className: "image-frame",
218
+ children: /*#__PURE__*/_jsx(ImageFrame, {
219
+ href: url,
220
+ id: path.join(",")
221
+ })
222
+ }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
199
223
  onPointerDown: onMouseDown,
200
224
  style: {
201
225
  opacity: 1,
@@ -67,11 +67,11 @@ const FormWorkflow = props => {
67
67
  children: [/*#__PURE__*/_jsx(Grid, {
68
68
  item: true,
69
69
  sx: classes.radioBtn,
70
- children: /*#__PURE__*/_jsxs(RadioGroup, {
70
+ children: /*#__PURE__*/_jsx(RadioGroup, {
71
71
  name: "set timing",
72
72
  value: schedule,
73
73
  defaultValue: 1,
74
- children: [/*#__PURE__*/_jsx(FormControlLabel, {
74
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
75
75
  value: "immediately",
76
76
  label: "Immediately",
77
77
  onChange: () => {
@@ -80,16 +80,7 @@ const FormWorkflow = props => {
80
80
  control: /*#__PURE__*/_jsx(Radio, {
81
81
  size: "small"
82
82
  })
83
- }), /*#__PURE__*/_jsx(FormControlLabel, {
84
- value: "after",
85
- label: "After",
86
- onChange: () => {
87
- setSchedule("after");
88
- },
89
- control: /*#__PURE__*/_jsx(Radio, {
90
- size: "small"
91
- })
92
- })]
83
+ })
93
84
  })
94
85
  }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
95
86
  item: true,
@@ -66,10 +66,20 @@ const Grid = props => {
66
66
  const insertPath = ancestorsPath[1];
67
67
  if (insertPath) {
68
68
  insertPath[insertPath.length - 1] = element.children.length;
69
- Transforms.insertNodes(editor, [{
70
- ...gridItem()
71
- }], {
72
- at: [...path, children.length]
69
+ const lp = ReactEditor.findPath(editor, element);
70
+ const lastElement = {
71
+ ...element.children[element.children.length - 1]
72
+ };
73
+ Transforms.insertNodes(editor, gridItem({
74
+ ...lastElement,
75
+ children: [{
76
+ type: "paragraph",
77
+ children: [{
78
+ text: ""
79
+ }]
80
+ }]
81
+ }), {
82
+ at: [...lp, children.length]
73
83
  });
74
84
  // new line
75
85
  Transforms.insertNodes(editor, [{
@@ -111,10 +121,10 @@ const Grid = props => {
111
121
  console.log(err);
112
122
  }
113
123
  };
114
- const onAddSection = (defaultGrid = null, next = true) => () => {
124
+ const onAddSection = () => () => {
115
125
  try {
116
- const insertPath = next ? Path.next(path) : path;
117
- insertGrid(editor, defaultGrid, insertPath);
126
+ const duplicateGrid = JSON.parse(JSON.stringify(element));
127
+ insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
118
128
  } catch (err) {
119
129
  console.log(err);
120
130
  }
@@ -216,7 +226,7 @@ const Grid = props => {
216
226
  title: "Add Section",
217
227
  arrow: true,
218
228
  children: /*#__PURE__*/_jsx(IconButton, {
219
- onClick: onAddSection(null, true),
229
+ onClick: onAddSection(),
220
230
  children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
221
231
  })
222
232
  }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
@@ -311,7 +321,8 @@ const Grid = props => {
311
321
  width: "100%",
312
322
  flexWrap: {
313
323
  ...getBreakPointsValue(flexWrap || "wrap")
314
- }
324
+ },
325
+ height: "fit-content"
315
326
  },
316
327
  "data-path": path.join(","),
317
328
  children: children
@@ -1,12 +1,13 @@
1
1
  /* eslint-disable no-unused-vars */
2
2
  import React, { useState } from "react";
3
- import { Transforms } from "slate";
3
+ import { Transforms, Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import GridItemPopup from "./GridItemPopup";
6
6
  import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
7
7
  import { GridSettingsIcon } from "../../common/iconslist";
8
8
  import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
9
9
  import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
10
+ import { isEmptyNode } from "../../utils/helper";
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  const GridItem = props => {
@@ -49,12 +50,14 @@ const GridItem = props => {
49
50
  } = useEditorContext();
50
51
  const selected = hoverPath === path.join(",");
51
52
  const [showTool] = useEditorSelection(editor);
53
+ const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
52
54
  const GridItemToolbar = () => {
53
55
  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
54
56
  contentEditable: false,
55
57
  className: "grid-item-toolbar",
56
58
  style: {
57
- top: "0px"
59
+ top: "-14px",
60
+ left: "-14px"
58
61
  },
59
62
  children: /*#__PURE__*/_jsx(Tooltip, {
60
63
  title: "Grid Item Settings",
@@ -92,10 +95,13 @@ const GridItem = props => {
92
95
  });
93
96
  }
94
97
  };
98
+ const getBorderColor = () => {
99
+ return borderColor || "transparent";
100
+ };
95
101
  return /*#__PURE__*/_jsxs(Item, {
96
102
  item: true,
97
103
  component: "div",
98
- className: `grid-item element-root gi-top-wrpr content-editable`,
104
+ className: `grid-item element-root gi-top-wrpr`,
99
105
  ...attributes,
100
106
  sx: {
101
107
  width: {
@@ -110,7 +116,7 @@ const GridItem = props => {
110
116
  },
111
117
  flexDirection: flexDirection || "column",
112
118
  background: bgColor || "transparent",
113
- borderColor: borderColor || "transparent",
119
+ borderColor: getBorderColor(),
114
120
  borderWidth: borderWidth || "1px",
115
121
  borderRadius: {
116
122
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
@@ -129,7 +135,6 @@ const GridItem = props => {
129
135
  style: {
130
136
  textAlign: element.alignment || "left"
131
137
  },
132
- placeholder: "Grid Item",
133
138
  children: [!readOnly && /*#__PURE__*/_jsxs("div", {
134
139
  className: `element-selector ${selected ? "selected" : ""}`,
135
140
  contentEditable: false,
@@ -150,7 +155,7 @@ const GridItem = props => {
150
155
  children: " "
151
156
  }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
152
157
  }), /*#__PURE__*/_jsx(Box, {
153
- className: `gi-inner-cw ${animation || ""}`,
158
+ className: `gi-inner-cw ${animation || ""} content-editable ${isEmpty} np`,
154
159
  component: "div",
155
160
  "data-path": path.join(","),
156
161
  sx: {
@@ -166,6 +171,7 @@ const GridItem = props => {
166
171
  borderColor: borderColorHover || borderColor || "transparent"
167
172
  }
168
173
  },
174
+ placeholder: "Grid Item",
169
175
  children: children
170
176
  }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
171
177
  element: element,
@@ -210,6 +210,22 @@ const editorStyles = ({
210
210
  backgroundColor: "#F8FAFF",
211
211
  textAlign: "center",
212
212
  border: "1px solid #CFD8F5"
213
+ },
214
+ "& .embed-image-wrpr .image-frame": {
215
+ position: "absolute",
216
+ top: 0,
217
+ left: 0,
218
+ width: "100%",
219
+ height: "100%",
220
+ padding: "0px",
221
+ pointerEvents: "none",
222
+ "& svg": {
223
+ width: "100%",
224
+ height: "100%",
225
+ "& .op-zero": {
226
+ fillOpacity: 0
227
+ }
228
+ }
213
229
  }
214
230
  },
215
231
  fullScreenWrapper: {
@@ -10,6 +10,32 @@ const embedImageStyle = [{
10
10
  label: "File",
11
11
  key: "url",
12
12
  type: "backgroundImage"
13
+ }, {
14
+ label: "Image Frame",
15
+ key: "frame",
16
+ type: "textOptions",
17
+ options: [{
18
+ value: "",
19
+ label: "No Frame"
20
+ }, {
21
+ value: "InstaFrame",
22
+ label: "Instagram Light Frame"
23
+ }, {
24
+ value: "InstaFrameDark",
25
+ label: "Instagram Dark Frame"
26
+ }, {
27
+ value: "DarkFrame",
28
+ label: "Dark Frame"
29
+ }, {
30
+ value: "RoundedDark",
31
+ label: "Rounded Dark Frame"
32
+ }, {
33
+ value: "RoundedLight",
34
+ label: "Rounded Light Frame"
35
+ }, {
36
+ value: "RoundedLightB2",
37
+ label: "Rounded Light B2 Frame"
38
+ }]
13
39
  }]
14
40
  }, {
15
41
  tab: "Banner Spacing",
@@ -31,6 +57,11 @@ const embedImageStyle = [{
31
57
  tab: "Position",
32
58
  value: "position",
33
59
  fields: [{
60
+ label: "Disable Aspect Ratio",
61
+ key: "objectFit",
62
+ type: "selectBox",
63
+ placeholder: "Disable Aspect Ratio"
64
+ }, {
34
65
  label: "Hide on Mobile",
35
66
  key: "xsHidden",
36
67
  type: "selectBox",
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { Tooltip, IconButton } from "@mui/material";
2
+ import { Tooltip, IconButton, Typography } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { jsxs as _jsxs } from "react/jsx-runtime";
5
5
  const ToolbarIcon = props => {
@@ -14,11 +14,23 @@ const ToolbarIcon = props => {
14
14
  const renderIconText = () => {
15
15
  if (icoBtnType === "mini") {
16
16
  return /*#__PURE__*/_jsx("span", {
17
- children: title
17
+ children: /*#__PURE__*/_jsx(Typography, {
18
+ sx: {
19
+ fontSize: '14px',
20
+ fontWeight: 500
21
+ },
22
+ children: title
23
+ })
18
24
  });
19
25
  } else if (icoBtnType === "cmd") {
20
26
  return /*#__PURE__*/_jsx("span", {
21
- children: title
27
+ children: /*#__PURE__*/_jsx(Typography, {
28
+ sx: {
29
+ fontSize: '14px',
30
+ fontWeight: 500
31
+ },
32
+ children: title
33
+ })
22
34
  });
23
35
  }
24
36
  return null;
@@ -13,10 +13,10 @@ export const insertButton = editor => {
13
13
  bgColor: "#2563EB",
14
14
  textColor: "#FFF",
15
15
  borderRadius: {
16
- topLeft: 8,
17
- topRight: 8,
18
- bottomLeft: 8,
19
- bottomRight: 8
16
+ topLeft: 30,
17
+ topRight: 30,
18
+ bottomLeft: 30,
19
+ bottomRight: 30
20
20
  },
21
21
  bannerSpacing: {
22
22
  left: 16,
@@ -129,7 +129,6 @@ export const enterEvent = (e, editor, ele) => {
129
129
  try {
130
130
  // on shift enter break line in same node
131
131
  if (e.shiftKey) {
132
- console.log("shif enter");
133
132
  e.preventDefault();
134
133
  Transforms.insertText(editor, "\n");
135
134
  } else if (ele && ele[0]) {
@@ -6,7 +6,7 @@ export const insertPlainGrid = count => {
6
6
  const size = 12 / count;
7
7
  const items = Array.from(Array(count).keys()).map(() => gridItem({
8
8
  grid: size,
9
- borderColor: "#ccc",
9
+ cellGHeight: "100%",
10
10
  lockSpacing: true,
11
11
  bannerSpacing: {
12
12
  top: "16",
@@ -1,4 +1,4 @@
1
- import { Editor } from "slate";
1
+ import { Editor, Node } from "slate";
2
2
  export const formatDate = (date, format = "MM/DD/YYYY") => {
3
3
  if (!date) return "";
4
4
  var d = new Date(date),
@@ -78,6 +78,16 @@ export const getSelectedText = editor => {
78
78
  return Editor.string(editor, editor?.selection);
79
79
  } catch (err) {
80
80
  console.log(err);
81
- return '';
81
+ return "";
82
+ }
83
+ };
84
+ export const isEmptyNode = (editor, children, path) => {
85
+ try {
86
+ const isEmptyText = Node.string(Node.get(editor, path))?.length === 0;
87
+ const emptyNode = children?.length === 1 && children[0]?.children[0]?.type === undefined && children[0]?.type === "paragraph";
88
+ return isEmptyText && emptyNode;
89
+ } catch (err) {
90
+ console.log(err);
91
+ return "";
82
92
  }
83
93
  };
@@ -1,7 +1,6 @@
1
1
  import { Editor, Transforms, Element } from "slate";
2
2
  export const findPageSettings = editor => {
3
3
  try {
4
- console.log(editor?.children);
5
4
  return {
6
5
  element: editor?.children?.find(f => f.type === "page-settings")
7
6
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"