@flozy/editor 1.9.6 → 1.9.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -477,7 +477,7 @@ blockquote {
477
477
  }
478
478
 
479
479
  @media (max-width: 480px) {
480
- body {
480
+ body.editorbody {
481
481
  padding: 0px !important;
482
482
  }
483
483
 
@@ -7,7 +7,7 @@ import EmbedPopup from "./EmbedPopup";
7
7
  import { IconButton, Tooltip, Box } from "@mui/material";
8
8
  import { GridSettingsIcon } from "../../common/iconslist";
9
9
  import { useEditorContext } from "../../hooks/useMouseMove";
10
- import { getTRBLBreakPoints } from "../../helper/theme";
10
+ import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
11
11
  import Icon from "../../common/Icon";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -146,7 +146,19 @@ const Image = ({
146
146
  draggable: false
147
147
  });
148
148
  };
149
- const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
149
+ const getWidth = () => {
150
+ if (resizing) {
151
+ return {
152
+ width: `${size.width}px`
153
+ };
154
+ } else {
155
+ return {
156
+ width: url ? {
157
+ ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
158
+ } : "100%"
159
+ };
160
+ }
161
+ };
150
162
  return /*#__PURE__*/_jsxs(Box, {
151
163
  ...attributes,
152
164
  component: "div",
@@ -173,13 +185,13 @@ const Image = ({
173
185
  customProps: customProps,
174
186
  format: "image",
175
187
  onDelete: onDelete
176
- }) : null, /*#__PURE__*/_jsxs("div", {
188
+ }) : null, /*#__PURE__*/_jsxs(Box, {
189
+ component: "div",
177
190
  contentEditable: false,
178
191
  className: "embed-image-wrpr",
179
- style: {
192
+ sx: {
180
193
  position: "relative",
181
- width: `${width}`
182
- // height: `${size.height}px`,
194
+ ...getWidth()
183
195
  },
184
196
  children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
185
197
  onPointerDown: onMouseDown,
@@ -10,6 +10,7 @@ import EmbedPopup from "./EmbedPopup";
10
10
  import { GridSettingsIcon } from "../../common/iconslist";
11
11
  import { gradientBorder } from "../../utils/helper";
12
12
  import { getEmbedURL } from "../../helper";
13
+ import { getBreakPointsValue } from "../../helper/theme";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
16
  const Video = ({
@@ -108,7 +109,23 @@ const Video = ({
108
109
  at: path
109
110
  });
110
111
  };
111
- const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
112
+ const getWidth = () => {
113
+ if (resizing) {
114
+ return {
115
+ width: `${size.width}px`,
116
+ height: url ? `${size.height}px` : "auto"
117
+ };
118
+ } else {
119
+ return {
120
+ width: {
121
+ ...getBreakPointsValue(element?.size, null, "overrideReSize", true)
122
+ },
123
+ height: url ? {
124
+ ...getBreakPointsValue(element?.size, null, "overrideReSizeH", true)
125
+ } : "auto"
126
+ };
127
+ }
128
+ };
112
129
  const embedURL = getEmbedURL(element);
113
130
  const VideoContent = () => {
114
131
  return resizing ? /*#__PURE__*/_jsx("div", {
@@ -130,6 +147,7 @@ const Video = ({
130
147
  position: "absolute",
131
148
  width: "100%",
132
149
  height: "100%",
150
+ maxWidth: "100%",
133
151
  left: "0px",
134
152
  ...(gradientBorder(borderColor) || {}),
135
153
  borderWidth: borderWidth || "1px",
@@ -155,7 +173,7 @@ const Video = ({
155
173
  className: "embed has-hover video",
156
174
  style: {
157
175
  display: "flex",
158
- flexDirection: "column",
176
+ flexDirection: "row",
159
177
  width: `100%`,
160
178
  justifyContent: horizantal,
161
179
  alignContent: vertical
@@ -168,12 +186,13 @@ const Video = ({
168
186
  customProps: customProps,
169
187
  format: "video",
170
188
  onDelete: onDelete
171
- }) : null, /*#__PURE__*/_jsxs("div", {
189
+ }) : null, /*#__PURE__*/_jsxs(Box, {
190
+ component: "div",
172
191
  contentEditable: false,
173
- style: {
192
+ sx: {
174
193
  position: "relative",
175
- width: `${width}`,
176
- height: url ? `${size.height}px` : "auto"
194
+ ...getWidth(),
195
+ maxWidth: "100%"
177
196
  },
178
197
  children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
179
198
  onPointerDown: onMouseDown,
@@ -40,6 +40,7 @@ const Form = props => {
40
40
  fontFamily,
41
41
  textAlign
42
42
  } = element;
43
+ const isEmail = element?.children[0].element === "email";
43
44
  const {
44
45
  topLeft,
45
46
  topRight,
@@ -2,6 +2,7 @@ import FormText from "./FormText";
2
2
  import FormTextArea from "./FormTextArea";
3
3
  const FormElements = {
4
4
  text: FormText,
5
- textArea: FormTextArea
5
+ textArea: FormTextArea,
6
+ email: FormText
6
7
  };
7
8
  export default FormElements;
@@ -1,6 +1,8 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
3
3
  import TemplateCard from "./TemplateCard";
4
+ import FullViewCard from "./FullViewCard";
5
+ import ButtonTemplateCard from "./ButtonTemplatesCard";
4
6
  import { jsx as _jsx } from "react/jsx-runtime";
5
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
8
  const Categories = props => {
@@ -100,6 +102,43 @@ const AddTemplates = props => {
100
102
  return f.title.toLowerCase().includes(search);
101
103
  }
102
104
  };
105
+ const renderTemplate = mapData => {
106
+ switch (mapData?.category) {
107
+ case "Starter":
108
+ case "Proposal":
109
+ case "Page":
110
+ case "Contract":
111
+ case "404 Page":
112
+ return /*#__PURE__*/_jsx(TemplateCard, {
113
+ classes: classes,
114
+ onSelectTemplate: onSelectTemplate,
115
+ m: mapData,
116
+ fullScreen: fullScreen
117
+ }, `template_Card_${mapData.id}_popup`);
118
+ case "Buttons":
119
+ return /*#__PURE__*/_jsx(ButtonTemplateCard, {
120
+ classes: classes,
121
+ onSelectTemplate: onSelectTemplate,
122
+ m: mapData,
123
+ fullScreen: fullScreen
124
+ }, `template_Card_${mapData.id}_popup`);
125
+ case "Banners":
126
+ case "Tables":
127
+ return /*#__PURE__*/_jsx(FullViewCard, {
128
+ classes: classes,
129
+ onSelectTemplate: onSelectTemplate,
130
+ m: mapData,
131
+ fullScreen: fullScreen
132
+ }, `template_Card_${mapData.id}_popup`);
133
+ default:
134
+ /*#__PURE__*/_jsx(TemplateCard, {
135
+ classes: classes,
136
+ onSelectTemplate: onSelectTemplate,
137
+ m: mapData,
138
+ fullScreen: fullScreen
139
+ }, `template_Card_${mapData.id}_popup`);
140
+ }
141
+ };
103
142
  return /*#__PURE__*/_jsxs(Grid, {
104
143
  container: true,
105
144
  className: `templates ${fullScreen ? "fullscreen" : ""}`,
@@ -121,12 +160,7 @@ const AddTemplates = props => {
121
160
  children: [/*#__PURE__*/_jsx(ProgressBar, {
122
161
  loading: loading
123
162
  }), filteredTemplates.filter(filterByTitle).map(m => {
124
- return /*#__PURE__*/_jsx(TemplateCard, {
125
- classes: classes,
126
- onSelectTemplate: onSelectTemplate,
127
- m: m,
128
- fullScreen: fullScreen
129
- }, `template_Card_${m.id}_popup`);
163
+ return renderTemplate(m);
130
164
  })]
131
165
  })]
132
166
  });
@@ -0,0 +1,54 @@
1
+ import React from "react";
2
+ import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const Select = props => {
6
+ const {
7
+ classes,
8
+ data,
9
+ onSelectTemplate
10
+ } = props;
11
+ return /*#__PURE__*/_jsx(Box, {
12
+ className: "template-card-action",
13
+ component: "div",
14
+ sx: classes.templateCardBtnGrp,
15
+ style: {
16
+ padding: 0,
17
+ background: "transparent"
18
+ },
19
+ children: /*#__PURE__*/_jsx(Button, {
20
+ className: "blueBtn",
21
+ onClick: onSelectTemplate(data),
22
+ children: "Select"
23
+ })
24
+ });
25
+ };
26
+ const ButtonTemplateCard = props => {
27
+ const {
28
+ classes,
29
+ m,
30
+ onSelectTemplate
31
+ } = props;
32
+ return /*#__PURE__*/_jsx(Grid, {
33
+ item: true,
34
+ xs: 3,
35
+ children: /*#__PURE__*/_jsx(Card, {
36
+ sx: classes.paperOverrides,
37
+ children: /*#__PURE__*/_jsxs(Box, {
38
+ sx: classes.buttonCardMediaWrpr,
39
+ children: [/*#__PURE__*/_jsx(CardMedia, {
40
+ className: `template-card-media`,
41
+ component: "div",
42
+ image: m?.thumbnail,
43
+ alt: m?.title,
44
+ sx: classes.buttonCardMedia
45
+ }), /*#__PURE__*/_jsx(Select, {
46
+ classes: classes,
47
+ onSelectTemplate: onSelectTemplate,
48
+ data: m
49
+ })]
50
+ })
51
+ })
52
+ }, `template_${m.id}`);
53
+ };
54
+ export default ButtonTemplateCard;
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+ import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const Select = props => {
6
+ const {
7
+ classes,
8
+ data,
9
+ onSelectTemplate
10
+ } = props;
11
+ return /*#__PURE__*/_jsx(Box, {
12
+ className: "template-card-action",
13
+ component: "div",
14
+ sx: classes.templateCardBtnGrp,
15
+ style: {
16
+ background: "transparent"
17
+ },
18
+ children: /*#__PURE__*/_jsx(Button, {
19
+ className: "blueBtn",
20
+ onClick: onSelectTemplate(data),
21
+ children: "Select"
22
+ })
23
+ });
24
+ };
25
+ const FullViewCard = props => {
26
+ const {
27
+ classes,
28
+ m,
29
+ onSelectTemplate
30
+ } = props;
31
+ return /*#__PURE__*/_jsx(Grid, {
32
+ item: true,
33
+ xs: 12,
34
+ children: /*#__PURE__*/_jsx(Card, {
35
+ sx: classes.paperOverrides,
36
+ className: "paperOverrides",
37
+ children: /*#__PURE__*/_jsxs(Box, {
38
+ sx: classes.buttonCardMediaWrpr,
39
+ children: [/*#__PURE__*/_jsx(CardMedia, {
40
+ component: "div",
41
+ image: m?.thumbnail,
42
+ alt: m?.title,
43
+ sx: classes.fullViewCardMedia
44
+ }), /*#__PURE__*/_jsx(Select, {
45
+ classes: classes,
46
+ onSelectTemplate: onSelectTemplate,
47
+ data: m
48
+ })]
49
+ })
50
+ })
51
+ }, `template_${m.id}`);
52
+ };
53
+ export default FullViewCard;
@@ -373,6 +373,55 @@ const usePopupStyle = theme => ({
373
373
  "& .MuiPaper-root": {
374
374
  backgroundColor: theme?.palette?.editor?.background
375
375
  }
376
+ },
377
+ fullViewCardMedia: {
378
+ width: "100%",
379
+ height: "130px",
380
+ backgroundPosition: "left top",
381
+ backgroundSize: "100% auto",
382
+ zIndex: 1,
383
+ position: "relative",
384
+ "&.fullscreen": {
385
+ height: "130px"
386
+ }
387
+ },
388
+ buttonCardMedia: {
389
+ width: "100%",
390
+ height: "48px",
391
+ backgroundPosition: "left top",
392
+ backgroundSize: "contain",
393
+ zIndex: 1,
394
+ position: "relative",
395
+ "&.fullscreen": {
396
+ height: "48px"
397
+ }
398
+ },
399
+ buttonCardMediaWrpr: {
400
+ position: "relative",
401
+ margin: "8px",
402
+ marginBottom: "0px",
403
+ "&:hover": {
404
+ "& .template-card-action": {
405
+ display: "flex"
406
+ }
407
+ },
408
+ "& .img-loader-wrapper": {
409
+ position: "absolute",
410
+ width: "12px",
411
+ height: "12px",
412
+ left: 0,
413
+ right: 0,
414
+ top: 0,
415
+ bottom: 0,
416
+ margin: "auto",
417
+ zIndex: 0
418
+ }
419
+ },
420
+ paperOverrides: {
421
+ "&.MuiPaper-root": {
422
+ background: "transparent",
423
+ boxShadow: "none"
424
+ }
376
425
  }
377
426
  });
378
427
  export default usePopupStyle;
@@ -13,6 +13,9 @@ const fieldStyle = [{
13
13
  options: [{
14
14
  label: "Textbox",
15
15
  value: "text"
16
+ }, {
17
+ label: "Email",
18
+ value: "email"
16
19
  }, {
17
20
  label: "TextArea",
18
21
  value: "textArea"
@@ -82,7 +82,8 @@ const StyleBuilder = props => {
82
82
  const onElementPropsChange = data => {
83
83
  setElementProps({
84
84
  ...elementProps,
85
- ...data
85
+ ...data,
86
+ name: data?.element === "email" ? "field_email" : data?.name
86
87
  });
87
88
  };
88
89
  const handleSave = () => {
@@ -37,6 +37,12 @@ const overrides = {
37
37
  },
38
38
  overrideGridSize: val => {
39
39
  return `${(val || 8) / 12 * 100}%`;
40
+ },
41
+ overrideReSize: val => {
42
+ return `${val?.widthInPercent || 100}%`;
43
+ },
44
+ overrideReSizeH: val => {
45
+ return `${val?.height}px`;
40
46
  }
41
47
  };
42
48
  export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {
@@ -1,10 +1,13 @@
1
1
  import { useState } from "react";
2
+ import { getBreakPointsValue, getDevice } from "../../helper/theme";
2
3
  const useResize = ({
3
4
  parentDOM,
4
- size: defaultSize,
5
+ size: allSize,
5
6
  isGrid,
6
7
  onChange
7
8
  }) => {
9
+ const device = getDevice(window.innerWidth);
10
+ const defaultSize = getBreakPointsValue(allSize);
8
11
  const {
9
12
  width,
10
13
  height
@@ -36,17 +39,21 @@ const useResize = ({
36
39
  document.removeEventListener("pointermove", onMouseMove);
37
40
  document.removeEventListener("pointerup", onMouseUp);
38
41
  if (onChange) {
39
- onChange(latest);
42
+ onChange({
43
+ ...getBreakPointsValue(allSize),
44
+ [device]: latest
45
+ });
40
46
  }
41
47
  setResizing(false);
42
48
  };
43
49
  const onMouseMove = e => {
44
50
  setSize(currentSize => {
45
51
  const calcWidth = (currentSize.width || width) + e.movementX;
52
+ const cWP = calcWidth / width * 100;
46
53
  const calc = {
47
54
  width: calcWidth,
48
55
  height: (parseInt(currentSize.height) || height) + e.movementY,
49
- widthInPercent: calcWidth / width * 100
56
+ widthInPercent: cWP > 100 ? 100 : cWP
50
57
  };
51
58
  latest = calc;
52
59
  return calc;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.9.6",
3
+ "version": "1.9.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"