@flozy/editor 7.0.2 → 7.0.4

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.
Files changed (2) hide show
  1. package/dist/Editor/Styles/EditorStyles.js +289 -287
  2. package/package.json +1 -1
package/dist/Editor/Styles/EditorStyles.js CHANGED
@@ -3,325 +3,327 @@ const editorStyles = ({
3
3
  placeHolderColor,
4
4
  theme,
5
5
  overrideWrapperStyles = {}
6
- }) => ({
7
- root: {
8
- display: "flex",
9
- position: "relative",
10
- padding: "0px",
11
- alignItems: "center",
12
- justifyContent: "center",
13
- "*": {
14
- boxSizing: "border-box"
15
- },
16
- "&.iframe-editor": {
17
- "& .mini-tool-wrpr-ei": {
18
- display: "none"
19
- }
20
- },
21
- "& .mobileMiniTextWrapper": {
22
- boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
23
- position: "fixed",
24
- bottom: "env(safe-area-inset-bottom)",
25
- left: 0,
26
- width: "100%",
27
- zIndex: 99999,
28
- backgroundColor: theme?.palette?.editor?.background || "#fff",
29
- color: theme?.palette?.editor?.textColor || "black",
30
- "& .MuiOutlinedInput-input": {
31
- color: theme?.palette?.editor?.textColor || "black"
32
- }
33
- },
34
- "&.stimulate-xs": {
35
- "& .scrollable-content": {
36
- width: "320px"
6
+ }) => {
7
+ return {
8
+ root: {
9
+ display: "flex",
10
+ position: "relative",
11
+ padding: "0px",
12
+ alignItems: "center",
13
+ justifyContent: "center",
14
+ "*": {
15
+ boxSizing: "border-box"
37
16
  },
38
- ":before": {
39
- content: '" "',
40
- position: "absolute",
41
- top: 0,
42
- left: 0,
43
- width: "calc(50% - 162px)",
44
- height: "100%",
45
- pointerEvents: "none",
46
- backgroundColor: "#FFF",
47
- zIndex: 10
17
+ "&.iframe-editor": {
18
+ "& .mini-tool-wrpr-ei": {
19
+ display: "none"
20
+ }
48
21
  },
49
- ":after": {
50
- content: '" "',
51
- position: "absolute",
52
- top: 0,
53
- right: 0,
54
- width: "calc(50% - 160px)",
55
- height: "100%",
56
- pointerEvents: "none",
57
- backgroundColor: "#FFF",
58
- zIndex: 10
59
- }
60
- },
61
- ...overrideWrapperStyles
62
- },
63
- slateWrapper: {
64
- paddingTop: "0px",
65
- height: `${window.innerHeight - padHeight}px`,
66
- width: "100%",
67
- overflowY: "auto",
68
- overflowX: "hidden",
69
- display: "flex",
70
- flexDirection: "column",
71
- alignItems: "center",
72
- color: "#0f172a",
73
- "& .has-topbanner": {
74
- "& .doc-title-ele-wrpr": {
75
- marginTop: "12px"
76
- }
77
- },
78
- "&.no-color": {
79
- backgroundColor: theme?.palette?.editor?.background,
80
- color: theme?.palette?.editor?.textColor,
81
- "&.pc-page-builder": {
82
- backgroundColor: "#FFF",
83
- color: "#000"
22
+ "& .mobileMiniTextWrapper": {
23
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
24
+ position: "fixed",
25
+ bottom: "env(safe-area-inset-bottom)",
26
+ left: 0,
27
+ width: "100%",
28
+ zIndex: 99999,
29
+ backgroundColor: theme?.palette?.editor?.background || "#fff",
30
+ color: theme?.palette?.editor?.textColor || "black",
31
+ "& .MuiOutlinedInput-input": {
32
+ color: theme?.palette?.editor?.textColor || "black"
33
+ }
84
34
  },
85
- "& .signed-btn": {
86
- "& img": {
87
- backgroundColor: "#FFF"
35
+ "&.stimulate-xs": {
36
+ "& .scrollable-content": {
37
+ width: "320px"
38
+ },
39
+ ":before": {
40
+ content: '" "',
41
+ position: "absolute",
42
+ top: 0,
43
+ left: 0,
44
+ width: "calc(50% - 162px)",
45
+ height: "100%",
46
+ pointerEvents: "none",
47
+ backgroundColor: "#FFF",
48
+ zIndex: 10
49
+ },
50
+ ":after": {
51
+ content: '" "',
52
+ position: "absolute",
53
+ top: 0,
54
+ right: 0,
55
+ width: "calc(50% - 160px)",
56
+ height: "100%",
57
+ pointerEvents: "none",
58
+ backgroundColor: "#FFF",
59
+ zIndex: 10
88
60
  }
89
- }
61
+ },
62
+ ...overrideWrapperStyles
90
63
  },
91
- "& .max-content": {
64
+ slateWrapper: {
65
+ paddingTop: "0px",
66
+ height: `${window.innerHeight - padHeight}px`,
92
67
  width: "100%",
68
+ overflowY: "auto",
69
+ overflowX: "hidden",
93
70
  display: "flex",
94
- flex: 1,
95
71
  flexDirection: "column",
96
- paddingBottom: "25px !important"
97
- },
98
- "& .scroll-area": {
99
- display: "flex",
100
- justifyContent: "center",
101
- flex: 1
102
- },
103
- "& .editor-wrapper": {
104
- maxWidth: "100%",
105
- height: "100%",
106
- overflow: "visible",
107
- "& .section-wrapper-fluid": {
108
- "& .grid-container": {
109
- maxWidth: "1440px"
72
+ alignItems: "center",
73
+ color: "#0f172a",
74
+ "& .has-topbanner": {
75
+ "& .doc-title-ele-wrpr": {
76
+ marginTop: "12px"
110
77
  }
111
- }
112
- },
113
- "& .el-toolbar": {
114
- position: "absolute",
115
- left: 0,
116
- top: 0,
117
- width: "fit-content",
118
- "& button": {
119
- border: "1px solid rgba(37, 99, 235, 0.32)",
120
- borderRadius: "10px",
121
- boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
122
- background: "#fff",
123
- width: "36px",
124
- height: "36px",
125
- "&.mr": {
126
- marginRight: "2px"
78
+ },
79
+ "&.no-color": {
80
+ backgroundColor: theme?.palette?.editor?.background,
81
+ color: theme?.palette?.editor?.textColor,
82
+ "&.pc-page-builder": {
83
+ backgroundColor: "#FFF",
84
+ color: "#000"
127
85
  },
128
- "& svg": {
129
- stroke: "rgb(100, 116, 139);"
130
- }
131
- }
132
- },
133
- "& .accordion-summary-collapse-btn": {
134
- padding: "4px",
135
- width: '5px'
136
- },
137
- "& .workflow-icon-btn": {
138
- pointerEvents: "none",
139
- position: "absolute",
140
- right: "-9px",
141
- top: "-9px",
142
- border: "2px solid #f3b814",
143
- padding: "0px",
144
- background: "#FFF",
145
- "& svg": {
146
- width: "18px",
147
- height: "18px"
148
- }
149
- },
150
- "& .svg-big-btn": {
151
- padding: "2px !important",
152
- "& svg": {
153
- width: "24px !important",
154
- height: "24px !important"
155
- }
156
- },
157
- "& .ed-section-wrapper": {
158
- display: "flex",
159
- width: "100%",
160
- justifyContent: "center",
161
- alignItems: "center",
162
- position: "relative",
163
- "&:hover": {
164
- "& .ed-section-inner": {
165
- "& .element-toolbar.ss": {
166
- display: "block",
167
- left: "8px",
168
- top: "8px",
169
- width: "fit-content",
170
- "& button": {
171
- boxShadow: "none",
172
- color: "#D7D7D6",
173
- background: "rgb(221, 221, 221, 0.1)",
174
- "&:hover": {
175
- background: "rgb(221, 221, 221, 0.8)"
176
- }
177
- }
86
+ "& .signed-btn": {
87
+ "& img": {
88
+ backgroundColor: "#FFF"
178
89
  }
179
- },
180
- "&.hselect:before": {
181
- display: "block"
182
90
  }
183
91
  },
184
- "& .ed-section-inner": {
185
- maxWidth: "1440px",
186
- "& .element-toolbar.ss": {
187
- display: "none"
92
+ "& .max-content": {
93
+ width: "100%",
94
+ display: "flex",
95
+ flex: 1,
96
+ flexDirection: "column",
97
+ paddingBottom: "25px !important"
98
+ },
99
+ "& .scroll-area": {
100
+ display: "flex",
101
+ justifyContent: "center",
102
+ flex: 1
103
+ },
104
+ "& .editor-wrapper": {
105
+ maxWidth: "100%",
106
+ height: "100%",
107
+ overflow: "visible",
108
+ "& .section-wrapper-fluid": {
109
+ "& .grid-container": {
110
+ maxWidth: "1440px"
111
+ }
188
112
  }
189
113
  },
190
- "&.needHover:before": {
191
- content: '" "',
114
+ "& .el-toolbar": {
192
115
  position: "absolute",
193
- width: "calc(100% - 2px)",
194
- height: "calc(100% - 2px)",
195
116
  left: 0,
196
117
  top: 0,
197
- border: "1px solid transparent",
198
- background: "rgba(0,0,0,0.05)",
118
+ width: "fit-content",
119
+ "& button": {
120
+ border: "1px solid rgba(37, 99, 235, 0.32)",
121
+ borderRadius: "10px",
122
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
123
+ background: "#fff",
124
+ width: "36px",
125
+ height: "36px",
126
+ "&.mr": {
127
+ marginRight: "2px"
128
+ },
129
+ "& svg": {
130
+ stroke: "rgb(100, 116, 139);"
131
+ }
132
+ }
133
+ },
134
+ "& .accordion-summary-collapse-btn": {
135
+ padding: "4px",
136
+ width: '5px'
137
+ },
138
+ "& .workflow-icon-btn": {
199
139
  pointerEvents: "none",
200
- display: "none"
201
- }
202
- },
203
- "& .element-empty-btn": {
204
- backgroundColor: "rgb(242, 241, 238)",
205
- color: "rgba(55, 53, 47, 0.65)",
206
- outline: 0,
207
- border: 0,
208
- padding: "16px 12px",
209
- width: "100%",
210
- cursor: "pointer",
211
- display: "flex",
212
- alignItems: "center",
213
- justifyContent: "center",
214
- borderRadius: "12px",
215
- "& svg": {
216
- marginRight: "8px"
217
- }
218
- },
219
- "& .content-editable.empty": {
220
- "&:after": {
221
- color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
222
- }
223
- },
224
- "& .checkbox-edit": {
225
- alignSelf: "flex-start",
226
- "& .MuiFormControlLabel-root": {
227
- marginRight: "0px"
140
+ position: "absolute",
141
+ right: "-9px",
142
+ top: "-9px",
143
+ border: "2px solid #f3b814",
144
+ padding: "0px",
145
+ background: "#FFF",
146
+ "& svg": {
147
+ width: "18px",
148
+ height: "18px"
149
+ }
228
150
  },
229
- "& .MuiCheckbox-root": {
230
- padding: "5px",
151
+ "& .svg-big-btn": {
152
+ padding: "2px !important",
231
153
  "& svg": {
232
- width: "20px",
233
- height: "20px"
154
+ width: "24px !important",
155
+ height: "24px !important"
234
156
  }
235
- }
236
- },
237
- "& .tools-drawer": {
238
- zIndex: 1300,
239
- "& .MuiDrawer-paper": {
240
- backgroundColor: theme?.palette?.editor?.background
241
- }
242
- },
243
- "& .section-tw": {
244
- background: 'transparent !important',
245
- "& button": {
246
- padding: "2px",
247
- borderRadius: "0px",
157
+ },
158
+ "& .ed-section-wrapper": {
159
+ display: "flex",
160
+ width: "100%",
161
+ justifyContent: "center",
162
+ alignItems: "center",
163
+ position: "relative",
164
+ "&:hover": {
165
+ "& .ed-section-inner": {
166
+ "& .element-toolbar.ss": {
167
+ display: "block",
168
+ left: "8px",
169
+ top: "8px",
170
+ width: "fit-content",
171
+ "& button": {
172
+ boxShadow: "none",
173
+ color: "#D7D7D6",
174
+ background: "rgb(221, 221, 221, 0.1)",
175
+ "&:hover": {
176
+ background: "rgb(221, 221, 221, 0.8)"
177
+ }
178
+ }
179
+ }
180
+ },
181
+ "&.hselect:before": {
182
+ display: "block"
183
+ }
184
+ },
185
+ "& .ed-section-inner": {
186
+ maxWidth: "1440px",
187
+ "& .element-toolbar.ss": {
188
+ display: "none"
189
+ }
190
+ },
191
+ "&.needHover:before": {
192
+ content: '" "',
193
+ position: "absolute",
194
+ width: "calc(100% - 2px)",
195
+ height: "calc(100% - 2px)",
196
+ left: 0,
197
+ top: 0,
198
+ border: "1px solid transparent",
199
+ background: "rgba(0,0,0,0.05)",
200
+ pointerEvents: "none",
201
+ display: "none"
202
+ }
203
+ },
204
+ "& .element-empty-btn": {
205
+ backgroundColor: "rgb(242, 241, 238)",
206
+ color: "rgba(55, 53, 47, 0.65)",
207
+ outline: 0,
208
+ border: 0,
209
+ padding: "16px 12px",
210
+ width: "100%",
211
+ cursor: "pointer",
212
+ display: "flex",
213
+ alignItems: "center",
214
+ justifyContent: "center",
215
+ borderRadius: "12px",
248
216
  "& svg": {
249
- width: "17px",
250
- height: "18px",
251
- marginTop: "-1px"
217
+ marginRight: "8px"
252
218
  }
253
- }
254
- },
255
- "& .carousel-item": {
256
- padding: "12px 32px"
257
- },
258
- "& .slick-arrow": {
259
- borderRadius: "50%",
260
- backgroundColor: "#F8FAFF",
261
- textAlign: "center",
262
- border: "1px solid #CFD8F5"
263
- },
264
- "& .embed-image-wrpr .image-frame": {
265
- position: "absolute",
266
- top: 0,
267
- left: 0,
268
- width: "100%",
269
- height: "100%",
270
- padding: "0px",
271
- // pointerEvents: "none",
272
- "& svg": {
219
+ },
220
+ "& .content-editable.empty": {
221
+ "&:after": {
222
+ color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
223
+ }
224
+ },
225
+ "& .checkbox-edit": {
226
+ alignSelf: "flex-start",
227
+ "& .MuiFormControlLabel-root": {
228
+ marginRight: "0px"
229
+ },
230
+ "& .MuiCheckbox-root": {
231
+ padding: "5px",
232
+ "& svg": {
233
+ width: "20px",
234
+ height: "20px"
235
+ }
236
+ }
237
+ },
238
+ "& .tools-drawer": {
239
+ zIndex: 1300,
240
+ "& .MuiDrawer-paper": {
241
+ backgroundColor: theme?.palette?.editor?.background
242
+ }
243
+ },
244
+ "& .section-tw": {
245
+ background: 'transparent !important',
246
+ "& button": {
247
+ padding: "2px",
248
+ borderRadius: "0px",
249
+ "& svg": {
250
+ width: "17px",
251
+ height: "18px",
252
+ marginTop: "-1px"
253
+ }
254
+ }
255
+ },
256
+ "& .carousel-item": {
257
+ padding: "12px 32px"
258
+ },
259
+ "& .slick-arrow": {
260
+ borderRadius: "50%",
261
+ backgroundColor: "#F8FAFF",
262
+ textAlign: "center",
263
+ border: "1px solid #CFD8F5"
264
+ },
265
+ "& .embed-image-wrpr .image-frame": {
266
+ position: "absolute",
267
+ top: 0,
268
+ left: 0,
273
269
  width: "100%",
274
270
  height: "100%",
275
- "& .op-zero": {
276
- fillOpacity: 0
271
+ padding: "0px",
272
+ // pointerEvents: "none",
273
+ "& svg": {
274
+ width: "100%",
275
+ height: "100%",
276
+ "& .op-zero": {
277
+ fillOpacity: 0
278
+ }
277
279
  }
278
- }
279
- },
280
- "&.hideScroll": {
281
- overflowAnchor: "none",
282
- "&::-webkit-scrollbar-track": {
283
- background: "none !important"
284
280
  },
285
- "&::-webkit-scrollbar-thumb": {
286
- background: "none !important"
281
+ "&.hideScroll": {
282
+ overflowAnchor: "none",
283
+ "&::-webkit-scrollbar-track": {
284
+ background: "none !important"
285
+ },
286
+ "&::-webkit-scrollbar-thumb": {
287
+ background: "none !important"
288
+ },
289
+ "&::-webkit-scrollbar-thumb:hover": {
290
+ background: "none !important"
291
+ }
287
292
  },
288
- "&::-webkit-scrollbar-thumb:hover": {
289
- background: "none !important"
290
- }
291
- },
292
- "& ::selection": {
293
- background: 'rgba(35, 131, 226, 0.35)!important',
294
- color: 'inherit'
295
- },
296
- "&.readOnlyContainer": {
297
- "& .max-content": {
298
- paddingBottom: "0px !important"
293
+ "& ::selection": {
294
+ background: 'rgba(35, 131, 226, 0.35)!important',
295
+ color: 'inherit'
296
+ },
297
+ "&.readOnlyContainer": {
298
+ "& .max-content": {
299
+ paddingBottom: "0px !important"
300
+ }
299
301
  }
300
- }
301
- },
302
- fullScreenWrapper: {
303
- "& .editor-wrapper": {
304
- paddingTop: '20px'
305
- },
306
- "& .MuiDialog-paper, & .MuiPopover-paper": {
307
- background: `${theme?.palette?.editor?.background} !important`
308
302
  },
309
- "& .MuiPaper-root": {
310
- borderRadius: "0px !important",
311
- "& .MuiDialogTitle-root": {
312
- position: "absolute",
313
- top: 0,
314
- right: "0px",
315
- zIndex: 100
303
+ fullScreenWrapper: {
304
+ "& .editor-wrapper": {
305
+ paddingTop: '20px'
306
+ },
307
+ "& .MuiDialog-paper, & .MuiPopover-paper": {
308
+ background: `${theme?.palette?.editor?.background} !important`
316
309
  },
317
- "& .MuiDialogContent-root": {
318
- padding: "0px"
310
+ "& .MuiPaper-root": {
311
+ borderRadius: "0px !important",
312
+ "& .MuiDialogTitle-root": {
313
+ position: "absolute",
314
+ top: 0,
315
+ right: "0px",
316
+ zIndex: 100
317
+ },
318
+ "& .MuiDialogContent-root": {
319
+ padding: "0px"
320
+ }
319
321
  }
322
+ },
323
+ cardsTypo: {
324
+ color: theme?.palette?.editor?.textColor,
325
+ fontSize: "14px !important"
320
326
  }
321
- },
322
- cardsTypo: {
323
- color: theme?.palette?.editor?.textColor,
324
- fontSize: "14px !important"
325
- }
326
- });
327
+ };
328
+ };
327
329
  export default editorStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "7.0.2",
3
+ "version": "7.0.4",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"